diff --git a/apps/admin/src/components/page-builder/HeroV2Form.tsx b/apps/admin/src/components/page-builder/HeroV2Form.tsx
new file mode 100644
index 0000000..44d3153
--- /dev/null
+++ b/apps/admin/src/components/page-builder/HeroV2Form.tsx
@@ -0,0 +1,159 @@
+import { UploadCloud, Image as ImageIcon } from 'lucide-react';
+import { type PageSection } from '@homaroma/types';
+
+interface HeroV2FormProps {
+  editingSection: Partial<PageSection>;
+  editingLang: string;
+  getLocalizedValue: (payload: any, field: string) => string;
+  updateLocalizedValue: (field: string, value: string) => void;
+  updatePayloadValue: (field: string, value: string | number | boolean) => void;
+  setUploadTarget: (target: { type: 'main' | 'slide'; index?: number } | null) => void;
+  setIsMediaModalOpen: (open: boolean) => void;
+}
+
+export default function HeroV2Form({
+  editingSection,
+  getLocalizedValue,
+  updateLocalizedValue,
+  updatePayloadValue,
+  setUploadTarget,
+  setIsMediaModalOpen,
+}: HeroV2FormProps) {
+  return (
+    <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+      {/* Hero image uploading */}
+      <div className="md:col-span-2 space-y-2">
+        <label className="text-[10px] uppercase font-bold tracking-widest text-slate-400">Background Image</label>
+        <div
+          className="relative h-40 w-full rounded-2xl overflow-hidden border-2 border-dashed border-white/10 bg-night-950/50 flex flex-col items-center justify-center group cursor-pointer hover:border-cyan-glow/30 transition-all"
+          onClick={() => {
+            setUploadTarget({ type: 'main' });
+            setIsMediaModalOpen(true);
+          }}
+        >
+          {editingSection.payload?.imageUrl ? (
+            <>
+              <img src={editingSection.payload.imageUrl} className="w-full h-full object-cover" alt="Hero Background" />
+              <div className="absolute inset-0 bg-night-950/40 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center backdrop-blur-sm">
+                <UploadCloud className="w-10 h-10 text-white" />
+              </div>
+            </>
+          ) : (
+            <div className="text-center space-y-2">
+              <ImageIcon className="w-10 h-10 text-slate-700 mx-auto" />
+              <p className="text-xs text-slate-500 font-bold uppercase tracking-widest">Select Image</p>
+            </div>
+          )}
+        </div>
+      </div>
+
+      <div className="space-y-2">
+        <label className="text-[10px] uppercase font-bold tracking-widest text-slate-400">Alignment</label>
+        <select
+          value={editingSection.payload?.contentAlignment || 'left'}
+          onChange={(e) => updatePayloadValue('contentAlignment', e.target.value)}
+          className="admin-input w-full bg-slate-900 border-white/10"
+        >
+          <option value="left">Left</option>
+          <option value="center">Center</option>
+          <option value="right">Right</option>
+        </select>
+      </div>
+
+      <div className="space-y-2 flex items-center gap-2 pt-6">
+        <input
+          type="checkbox"
+          id="showOrnament"
+          checked={editingSection.payload?.showOrnament ?? true}
+          onChange={(e) => updatePayloadValue('showOrnament', e.target.checked)}
+          className="rounded bg-slate-900 border-white/10"
+        />
+        <label htmlFor="showOrnament" className="text-[10px] uppercase font-bold tracking-widest text-slate-400 cursor-pointer">
+          Show Divider Ornament
+        </label>
+      </div>
+
+      <div className="space-y-2">
+        <label className="text-[10px] uppercase font-bold tracking-widest text-slate-400">Tagline</label>
+        <input
+          type="text"
+          value={getLocalizedValue(editingSection.payload, 'tagline')}
+          onChange={(e) => updateLocalizedValue('tagline', e.target.value)}
+          className="admin-input w-full"
+        />
+      </div>
+
+      <div className="space-y-2">
+        <label className="text-[10px] uppercase font-bold tracking-widest text-slate-400">Title</label>
+        <input
+          type="text"
+          required
+          value={getLocalizedValue(editingSection.payload, 'title')}
+          onChange={(e) => updateLocalizedValue('title', e.target.value)}
+          className="admin-input w-full"
+        />
+        <p className="text-[9px] text-slate-500 font-medium">Use [brackets] for golden accent serif text (e.g. Inhale [Serenity]).</p>
+      </div>
+
+      <div className="md:col-span-2 space-y-2">
+        <label className="text-[10px] uppercase font-bold tracking-widest text-slate-400">Description</label>
+        <textarea
+          rows={3}
+          value={getLocalizedValue(editingSection.payload, 'description')}
+          onChange={(e) => updateLocalizedValue('description', e.target.value)}
+          className="admin-input w-full resize-none"
+        />
+      </div>
+
+      {/* Buttons */}
+      <div className="space-y-2 p-4 bg-slate-800/30 rounded-lg border border-white/5">
+        <label className="text-[10px] uppercase font-bold tracking-widest text-brand-primary">Primary Button</label>
+        <div className="space-y-3 mt-2">
+          <div>
+            <label className="text-[9px] uppercase font-bold tracking-widest text-slate-400">Text</label>
+            <input
+              type="text"
+              value={getLocalizedValue(editingSection.payload, 'primaryButtonText')}
+              onChange={(e) => updateLocalizedValue('primaryButtonText', e.target.value)}
+              className="admin-input w-full"
+            />
+          </div>
+          <div>
+            <label className="text-[9px] uppercase font-bold tracking-widest text-slate-400">Link URL</label>
+            <input
+              type="text"
+              value={editingSection.payload?.primaryButtonLink || ''}
+              onChange={(e) => updatePayloadValue('primaryButtonLink', e.target.value)}
+              className="admin-input w-full"
+            />
+          </div>
+        </div>
+      </div>
+
+      <div className="space-y-2 p-4 bg-slate-800/30 rounded-lg border border-white/5">
+        <label className="text-[10px] uppercase font-bold tracking-widest text-slate-400">Secondary Button (Optional)</label>
+        <div className="space-y-3 mt-2">
+          <div>
+            <label className="text-[9px] uppercase font-bold tracking-widest text-slate-400">Text</label>
+            <input
+              type="text"
+              value={getLocalizedValue(editingSection.payload, 'secondaryButtonText')}
+              onChange={(e) => updateLocalizedValue('secondaryButtonText', e.target.value)}
+              className="admin-input w-full"
+            />
+          </div>
+          <div>
+            <label className="text-[9px] uppercase font-bold tracking-widest text-slate-400">Link URL</label>
+            <input
+              type="text"
+              value={editingSection.payload?.secondaryButtonLink || ''}
+              onChange={(e) => updatePayloadValue('secondaryButtonLink', e.target.value)}
+              className="admin-input w-full"
+            />
+          </div>
+        </div>
+      </div>
+
+    </div>
+  );
+}
diff --git a/apps/admin/src/components/page-builder/UspBarForm.tsx b/apps/admin/src/components/page-builder/UspBarForm.tsx
new file mode 100644
index 0000000..5772bc4
--- /dev/null
+++ b/apps/admin/src/components/page-builder/UspBarForm.tsx
@@ -0,0 +1,146 @@
+import { type PageSection } from '@homaroma/types';
+import { Plus, Trash2 } from 'lucide-react';
+
+interface UspBarFormProps {
+  editingSection: Partial<PageSection>;
+  editingLang: string;
+  updatePayloadValue: (field: string, value: any) => void;
+  getLocalizedValue: (payload: any, field: string) => string;
+}
+
+export default function UspBarForm({
+  editingSection,
+  editingLang,
+  updatePayloadValue,
+  getLocalizedValue
+}: UspBarFormProps) {
+  
+  const items = Array.isArray(editingSection.payload?.items) ? editingSection.payload.items : [];
+
+  const handleAddItem = () => {
+    if (items.length >= 4) return;
+    const newItems = [...items, { icon: 'check', title: '', subtitle: '' }];
+    updatePayloadValue('items', newItems);
+  };
+
+  const handleRemoveItem = (index: number) => {
+    const newItems = items.filter((_, i) => i !== index);
+    updatePayloadValue('items', newItems);
+  };
+
+  const updateItem = (index: number, field: string, value: string) => {
+    const newItems = [...items];
+    if (field === 'icon') {
+      newItems[index] = { ...newItems[index], icon: value };
+    } else {
+      // Handle localized string for array item
+      const currentVal = newItems[index][field] || {};
+      newItems[index] = {
+        ...newItems[index],
+        [field]: typeof currentVal === 'string'
+          ? (editingLang === 'en' ? value : { en: currentVal, [editingLang]: value })
+          : { ...currentVal, [editingLang]: value }
+      };
+    }
+    updatePayloadValue('items', newItems);
+  };
+
+  const getLocalizedItemValue = (item: any, field: string) => {
+    if (!item || !item[field]) return '';
+    if (typeof item[field] === 'string') {
+      return editingLang === 'en' ? item[field] : '';
+    }
+    return item[field][editingLang] || '';
+  };
+
+  return (
+    <div className="space-y-6">
+      <div className="space-y-2">
+        <label className="text-[10px] uppercase font-bold tracking-widest text-slate-400">Background Color</label>
+        <input
+          type="text"
+          value={editingSection.payload?.backgroundColor || ''}
+          onChange={(e) => updatePayloadValue('backgroundColor', e.target.value)}
+          placeholder="e.g. #F8F5F0 or var(--surface-page)"
+          className="admin-input w-full md:w-1/2"
+        />
+      </div>
+
+      <div className="space-y-4">
+        <div className="flex items-center justify-between">
+          <label className="text-[10px] uppercase font-bold tracking-widest text-brand-primary">Features / USPs ({items.length}/4)</label>
+          <button
+            type="button"
+            onClick={handleAddItem}
+            disabled={items.length >= 4}
+            className="flex items-center gap-1.5 px-3 py-1.5 text-xs font-semibold bg-brand-primary text-night-900 rounded hover:bg-brand-secondary disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
+          >
+            <Plus className="w-3.5 h-3.5" />
+            Add Item
+          </button>
+        </div>
+
+        {items.length === 0 ? (
+          <div className="p-8 border border-dashed border-white/10 rounded-xl text-center text-slate-500">
+            No items added yet. Click "Add Item" to create the feature bar.
+          </div>
+        ) : (
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+            {items.map((item: any, idx: number) => (
+              <div key={idx} className="p-4 bg-slate-800/30 rounded-xl border border-white/5 space-y-4 relative group">
+                <button
+                  type="button"
+                  onClick={() => handleRemoveItem(idx)}
+                  className="absolute top-3 right-3 text-slate-500 hover:text-red-400 transition-colors"
+                  title="Remove item"
+                >
+                  <Trash2 className="w-4 h-4" />
+                </button>
+
+                <div className="space-y-2">
+                  <label className="text-[9px] uppercase font-bold tracking-widest text-slate-400">Icon</label>
+                  <select
+                    value={item.icon || 'check'}
+                    onChange={(e) => updateItem(idx, 'icon', e.target.value)}
+                    className="admin-input w-full bg-slate-900 border-white/10"
+                  >
+                    <option value="check">Checkmark</option>
+                    <option value="leaf">Leaf (Natural)</option>
+                    <option value="droplet">Droplet (Liquid/Oil)</option>
+                    <option value="sparkles">Sparkles (Premium)</option>
+                    <option value="gift">Gift (Present)</option>
+                    <option value="shield">Shield (Safe)</option>
+                    <option value="heart">Heart (Care)</option>
+                  </select>
+                </div>
+
+                <div className="space-y-2">
+                  <label className="text-[9px] uppercase font-bold tracking-widest text-slate-400">Title</label>
+                  <input
+                    type="text"
+                    required
+                    value={getLocalizedItemValue(item, 'title')}
+                    onChange={(e) => updateItem(idx, 'title', e.target.value)}
+                    className="admin-input w-full"
+                    placeholder="e.g. Premium Ingredients"
+                  />
+                </div>
+
+                <div className="space-y-2">
+                  <label className="text-[9px] uppercase font-bold tracking-widest text-slate-400">Subtitle</label>
+                  <input
+                    type="text"
+                    value={getLocalizedItemValue(item, 'subtitle')}
+                    onChange={(e) => updateItem(idx, 'subtitle', e.target.value)}
+                    className="admin-input w-full"
+                    placeholder="e.g. Sourced from the finest..."
+                  />
+                </div>
+              </div>
+            ))}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
diff --git a/apps/admin/src/pages/PageBuilderPage.tsx b/apps/admin/src/pages/PageBuilderPage.tsx
index 002cff9..1969dfb 100644
--- a/apps/admin/src/pages/PageBuilderPage.tsx
+++ b/apps/admin/src/pages/PageBuilderPage.tsx
@@ -36,6 +36,8 @@ import ProductCarouselForm from '../components/page-builder/ProductCarouselForm'
 import AccordionForm from '../components/page-builder/AccordionForm';
 import ContactInfoForm from '../components/page-builder/ContactInfoForm';
 import ContactFormForm from '../components/page-builder/ContactFormForm';
+import HeroV2Form from '../components/page-builder/HeroV2Form';
+import UspBarForm from '../components/page-builder/UspBarForm';
 
 interface Brand {
   id: number;
@@ -986,6 +988,8 @@ export default function PageBuilderPage() {
                     <option value="ACCORDION">ACCORDION (FAQ Style)</option>
                     <option value="CONTACT_INFO">CONTACT INFO (Location/Hours)</option>
                     <option value="CONTACT_FORM">CONTACT FORM (Message inputs)</option>
+                    <option value="HERO_V2">HERO V2 (Split Layout Hero)</option>
+                    <option value="USP_BAR">USP BAR (Features / Icons)</option>
                   </select>
                 </div>
               )}
@@ -1003,6 +1007,27 @@ export default function PageBuilderPage() {
                 />
               )}
 
+              {editingSection.type?.toUpperCase() === 'HERO_V2' && (
+                <HeroV2Form
+                  editingSection={editingSection}
+                  editingLang={editingLang}
+                  getLocalizedValue={getLocalizedValue}
+                  updateLocalizedValue={updateLocalizedValue}
+                  updatePayloadValue={updatePayloadValue}
+                  setUploadTarget={setUploadTarget}
+                  setIsMediaModalOpen={setIsMediaModalOpen}
+                />
+              )}
+
+              {editingSection.type?.toUpperCase() === 'USP_BAR' && (
+                <UspBarForm
+                  editingSection={editingSection}
+                  editingLang={editingLang}
+                  updatePayloadValue={updatePayloadValue}
+                  getLocalizedValue={getLocalizedValue}
+                />
+              )}
+
               {editingSection.type?.toUpperCase() === 'ANNOUNCEMENT_BAR' && (
                 <AnnouncementBarForm
                   editingSection={editingSection}
diff --git a/apps/admin/src/pages/SystemSettingsPage.tsx b/apps/admin/src/pages/SystemSettingsPage.tsx
index 9013a83..e0c4931 100644
--- a/apps/admin/src/pages/SystemSettingsPage.tsx
+++ b/apps/admin/src/pages/SystemSettingsPage.tsx
@@ -17,10 +17,15 @@ const defaultThemeTokens = {
   mutedText: '#666666',
   linePrimary: '#00B900',
   linePrimaryHover: '#009900',
+  captionText: '#B0A396',
+  borderColor: '#E8E0D8',
+  surfaceMuted: '#EDE6DD',
   fontBody: '',
   fontDisplay: '',
   shadowCard: '0 10px 25px rgba(0,0,0,0.05)',
   shadowCardHover: '0 20px 40px rgba(0,0,0,0.1)',
+  radiusBase: '8px',
+  radiusCard: '16px',
 }
 
 const FONT_PRESETS = {
@@ -39,6 +44,11 @@ const FONT_PRESETS = {
     body: 'var(--font-kanit, "Kanit"), "Noto Sans Thai", ui-sans-serif, system-ui, sans-serif',
     display: 'var(--font-kanit, "Kanit"), "Noto Sans Thai", ui-sans-serif, system-ui, sans-serif',
   },
+  playfair: {
+    label: 'Playfair + Sarabun (Serif Heading)',
+    body: 'var(--font-sarabun, "Sarabun"), "Noto Sans Thai", ui-sans-serif, system-ui, sans-serif',
+    display: '"Playfair Display", ui-serif, Georgia, serif',
+  },
 } as const
 
 type FontPresetKey = keyof typeof FONT_PRESETS
@@ -53,6 +63,7 @@ function resolveFontPreset(themeTokens: Record<string, string>) {
 
   if (fontBody === FONT_PRESETS.sarabun.body && fontDisplay === FONT_PRESETS.sarabun.display) return 'sarabun'
   if (fontBody === FONT_PRESETS.kanit.body && fontDisplay === FONT_PRESETS.kanit.display) return 'kanit'
+  if (fontBody === FONT_PRESETS.playfair.body && fontDisplay === FONT_PRESETS.playfair.display) return 'playfair'
 
   return 'custom'
 }
@@ -471,6 +482,9 @@ export default function SystemSettingsPage() {
               ['mutedText', 'Muted Text'],
               ['linePrimary', 'Line Primary'],
               ['linePrimaryHover', 'Line Primary Hover'],
+              ['captionText', 'Caption Text'],
+              ['borderColor', 'Border Color'],
+              ['surfaceMuted', 'Surface Muted'],
             ].map(([key, label]) => (
               <div key={key} className="space-y-2">
                 <label className="text-xs uppercase font-bold tracking-widest text-slate-400">{label}</label>
@@ -490,6 +504,8 @@ export default function SystemSettingsPage() {
               ['fontDisplay', 'Font Display Override'],
               ['shadowCard', 'Shadow Card'],
               ['shadowCardHover', 'Shadow Card Hover'],
+              ['radiusBase', 'Radius Base'],
+              ['radiusCard', 'Radius Card'],
             ].map(([key, label]) => (
               <div key={key} className="space-y-2">
                 <label className="text-xs uppercase font-bold tracking-widest text-slate-400">{label}</label>
@@ -498,7 +514,7 @@ export default function SystemSettingsPage() {
                   value={themeTokens[key] || ''}
                   onChange={e => setThemeTokens((current) => ({ ...current, [key]: e.target.value }))}
                   className="admin-input w-full"
-                  placeholder={key.startsWith('font') ? 'Leave blank to use locale preset' : undefined}
+                  placeholder={key.startsWith('font') ? 'Leave blank to use locale preset' : key.startsWith('radius') ? 'e.g. 8px' : undefined}
                 />
               </div>
             ))}
diff --git a/apps/admin/src/pages/ThemeSettingsPage.tsx b/apps/admin/src/pages/ThemeSettingsPage.tsx
index f2d5691..2bb208e 100644
--- a/apps/admin/src/pages/ThemeSettingsPage.tsx
+++ b/apps/admin/src/pages/ThemeSettingsPage.tsx
@@ -8,14 +8,20 @@ const defaultThemeTokens = {
   surfacePage: '#FFF0F5', surfaceNavRest: '#F9F8F5', surfaceCard: '#FFFFFF',
   textMain: '#333333', mutedText: '#666666',
   linePrimary: '#00B900', linePrimaryHover: '#009900',
+  captionText: '#B0A396',
+  borderColor: '#E8E0D8',
+  surfaceMuted: '#EDE6DD',
   fontBody: '', fontDisplay: '',
   shadowCard: '0 10px 25px rgba(0,0,0,0.05)', shadowCardHover: '0 20px 40px rgba(0,0,0,0.1)',
+  radiusBase: '8px',
+  radiusCard: '16px',
 }
 
 const FONT_PRESETS = {
   locale: { label: 'Locale default', body: '', display: '' },
   sarabun: { label: 'Sarabun', body: 'var(--font-sarabun, "Sarabun"), "Noto Sans Thai", ui-sans-serif, system-ui, sans-serif', display: 'var(--font-sarabun, "Sarabun"), "Noto Sans Thai", ui-sans-serif, system-ui, sans-serif' },
   kanit: { label: 'Kanit', body: 'var(--font-kanit, "Kanit"), "Noto Sans Thai", ui-sans-serif, system-ui, sans-serif', display: 'var(--font-kanit, "Kanit"), "Noto Sans Thai", ui-sans-serif, system-ui, sans-serif' },
+  playfair: { label: 'Playfair + Sarabun (Serif Heading)', body: 'var(--font-sarabun, "Sarabun"), "Noto Sans Thai", ui-sans-serif, system-ui, sans-serif', display: '"Playfair Display", ui-serif, Georgia, serif' },
 } as const
 type FontPresetKey = keyof typeof FONT_PRESETS
 
@@ -25,6 +31,7 @@ function resolveFontPreset(tokens: Record<string, string>) {
   if (!body && !display) return 'locale'
   if (body === FONT_PRESETS.sarabun.body && display === FONT_PRESETS.sarabun.display) return 'sarabun'
   if (body === FONT_PRESETS.kanit.body && display === FONT_PRESETS.kanit.display) return 'kanit'
+  if (body === FONT_PRESETS.playfair.body && display === FONT_PRESETS.playfair.display) return 'playfair'
   return 'custom'
 }
 
@@ -102,7 +109,7 @@ export default function ThemeSettingsPage() {
           </div>
 
           <div className="grid gap-6 md:grid-cols-2">
-            {(['brandPrimary', 'brandPrimaryHover', 'brandAccent', 'surfacePage', 'surfaceCard', 'textMain', 'mutedText', 'linePrimary', 'linePrimaryHover'] as const).map(key => (
+            {(['brandPrimary', 'brandPrimaryHover', 'brandAccent', 'surfacePage', 'surfaceCard', 'textMain', 'mutedText', 'linePrimary', 'linePrimaryHover', 'captionText', 'borderColor', 'surfaceMuted'] as const).map(key => (
               <div key={key} className="space-y-2">
                 <label className="text-xs uppercase font-bold tracking-widest text-slate-400">{key.replace(/([A-Z])/g, ' $1').trim()}</label>
                 <input type="color" value={themeTokens[key] || '#000000'}
@@ -113,13 +120,13 @@ export default function ThemeSettingsPage() {
           </div>
 
           <div className="grid gap-6 md:grid-cols-2">
-            {(['fontBody', 'fontDisplay', 'shadowCard', 'shadowCardHover'] as const).map(key => (
+            {(['fontBody', 'fontDisplay', 'shadowCard', 'shadowCardHover', 'radiusBase', 'radiusCard'] as const).map(key => (
               <div key={key} className="space-y-2">
                 <label className="text-xs uppercase font-bold tracking-widest text-slate-400">{key.replace(/([A-Z])/g, ' $1').trim()}</label>
                 <input type="text" value={themeTokens[key] || ''}
                   onChange={e => setThemeTokens(cur => ({ ...cur, [key]: e.target.value }))}
                   className="admin-input w-full"
-                  placeholder={key.startsWith('font') ? 'Leave blank to use locale preset' : undefined} />
+                  placeholder={key.startsWith('font') ? 'Leave blank to use locale preset' : key.startsWith('radius') ? 'e.g. 8px' : undefined} />
               </div>
             ))}
           </div>
diff --git a/apps/backend/src/routes/pages.ts b/apps/backend/src/routes/pages.ts
index 3b7c4bb..babc483 100644
--- a/apps/backend/src/routes/pages.ts
+++ b/apps/backend/src/routes/pages.ts
@@ -16,9 +16,10 @@ import {
   ScentNotesBreakdownSectionPayloadSchema,
   QuoteCalloutSectionPayloadSchema,
   ProductCarouselSectionPayloadSchema,
-  AccordionSectionPayloadSchema,
   ContactInfoSectionPayloadSchema,
   ContactFormSectionPayloadSchema,
+  HeroV2SectionPayloadSchema,
+  UspBarSectionPayloadSchema,
 } from "@homaroma/types";
 import { z } from "zod";
 import { adminOnly } from "../middleware/auth";
@@ -600,6 +601,12 @@ function validateSectionPayload(
     case "CONTACT_FORM":
       schema = ContactFormSectionPayloadSchema;
       break;
+    case "HERO_V2":
+      schema = HeroV2SectionPayloadSchema;
+      break;
+    case "USP_BAR":
+      schema = UspBarSectionPayloadSchema;
+      break;
     default:
       return {
         success: false,
diff --git a/apps/mcp-server/index.ts b/apps/mcp-server/index.ts
index f320e69..62a303b 100644
--- a/apps/mcp-server/index.ts
+++ b/apps/mcp-server/index.ts
@@ -236,7 +236,12 @@ server.setRequestHandler(ListToolsRequestSchema, async () => {
             fontBody: { type: "string" },
             fontDisplay: { type: "string" },
             shadowCard: { type: "string" },
-            shadowCardHover: { type: "string" }
+            shadowCardHover: { type: "string" },
+            captionText: { type: "string", description: "Tertiary/caption text color (e.g. #B0A396)" },
+            borderColor: { type: "string", description: "Default border/divider color (e.g. #E8E0D8)" },
+            surfaceMuted: { type: "string", description: "Muted surface background for footer/section bands (e.g. #EDE6DD)" },
+            radiusBase: { type: "string", description: "Base border-radius for UI components (e.g. 8px)" },
+            radiusCard: { type: "string", description: "Border-radius for cards (e.g. 16px)" }
           }
         }
       },
@@ -942,7 +947,9 @@ server.setRequestHandler(CallToolRequestSchema, async (request) => {
           "brandCool", "brandSuccess", "brandSoft", "surfacePage",
           "surfaceNavRest", "surfaceCard", "textMain", "mutedText",
           "linePrimary", "linePrimaryHover", "fontBody", "fontDisplay",
-          "shadowCard", "shadowCardHover"
+          "shadowCard", "shadowCardHover",
+          // Extended Quiet Luxury tokens
+          "captionText", "borderColor", "surfaceMuted", "radiusBase", "radiusCard"
         ];
         
         for (const key of validKeys) {
diff --git a/apps/spa/src/components/DynamicHeroV2.tsx b/apps/spa/src/components/DynamicHeroV2.tsx
new file mode 100644
index 0000000..9d5e69d
--- /dev/null
+++ b/apps/spa/src/components/DynamicHeroV2.tsx
@@ -0,0 +1,110 @@
+import { Link } from 'react-router-dom';
+import { useTranslation } from 'react-i18next';
+import { getLocalizedField } from '../utils/localization';
+import { Sparkles, ChevronRight } from 'lucide-react';
+
+interface DynamicHeroV2Props {
+  payload: Record<string, any>;
+}
+
+export default function DynamicHeroV2({ payload }: DynamicHeroV2Props) {
+  const { i18n } = useTranslation();
+  const lang = i18n.language;
+  
+  const tagline = getLocalizedField(payload.tagline, lang);
+  const title = getLocalizedField(payload.title, lang);
+  const description = getLocalizedField(payload.description, lang);
+  
+  const primaryBtnText = getLocalizedField(payload.primaryButtonText, lang);
+  const primaryBtnLink = typeof payload.primaryButtonLink === 'string' ? payload.primaryButtonLink : undefined;
+  const secondaryBtnText = getLocalizedField(payload.secondaryButtonText, lang);
+  const secondaryBtnLink = typeof payload.secondaryButtonLink === 'string' ? payload.secondaryButtonLink : undefined;
+
+  const imageUrl = typeof payload.imageUrl === 'string' ? payload.imageUrl : '/assets/hero.png';
+  const align = typeof payload.contentAlignment === 'string' ? payload.contentAlignment : 'left';
+  const showOrnament = typeof payload.showOrnament === 'boolean' ? payload.showOrnament : true;
+
+  const alignClass = align === 'center' ? 'text-center items-center mx-auto' : align === 'right' ? 'text-right items-end ml-auto' : 'text-left items-start';
+
+  const renderTitle = (text: string) => {
+    if (!text) return null;
+    return text.split('[').map((part, i) => {
+      if (part.includes(']')) {
+        const [accent, rest] = part.split(']');
+        return (
+          <span key={i}>
+            <span className="text-pop-pink font-medium italic">
+              {accent}
+            </span>
+            {rest}
+          </span>
+        );
+      }
+      return <span key={i}>{part}</span>;
+    });
+  };
+
+  return (
+    <section className="relative w-full h-[80vh] min-h-[600px] bg-white flex items-center overflow-hidden">
+      <div className="absolute inset-0 w-full h-full">
+        <img
+          src={imageUrl}
+          alt={title || 'Hero'}
+          className="w-full h-full object-cover"
+        />
+        <div className="absolute inset-0 bg-gradient-to-r from-white/90 via-white/50 to-transparent pointer-events-none" />
+      </div>
+      
+      <div className="relative z-10 w-full max-w-7xl mx-auto px-6 md:px-12">
+        <div className={`max-w-xl flex flex-col gap-6 ${alignClass}`}>
+          {tagline && (
+            <div className="flex items-center gap-4">
+              {showOrnament && align !== 'right' && <div className="w-8 h-[1px] bg-pop-pink" />}
+              <span className="text-sm font-semibold tracking-[0.2em] uppercase text-pop-pink">
+                {tagline}
+              </span>
+              {showOrnament && align !== 'left' && <div className="w-8 h-[1px] bg-pop-pink" />}
+            </div>
+          )}
+          
+          <h1 className="text-4xl md:text-5xl lg:text-6xl font-serif text-pop-black leading-tight">
+            {renderTitle(title || '')}
+          </h1>
+
+          {showOrnament && (
+            <div className="flex justify-center items-center text-pop-pink my-2">
+              <Sparkles className="w-5 h-5" />
+            </div>
+          )}
+
+          {description && (
+            <p className="text-base md:text-lg text-pop-black/80 leading-relaxed max-w-md">
+              {description}
+            </p>
+          )}
+
+          <div className={`flex flex-col sm:flex-row items-center gap-4 mt-4 w-full sm:w-auto ${align === 'center' ? 'justify-center' : align === 'right' ? 'justify-end' : 'justify-start'}`}>
+            {primaryBtnText && primaryBtnLink && (
+              <Link
+                to={primaryBtnLink}
+                className="inline-flex items-center justify-center gap-2 px-8 py-3.5 bg-pop-pink text-white font-medium rounded-md hover:bg-pop-pink/90 transition-colors w-full sm:w-auto"
+              >
+                {primaryBtnText}
+                <ChevronRight className="w-4 h-4" />
+              </Link>
+            )}
+            {secondaryBtnText && secondaryBtnLink && (
+              <Link
+                to={secondaryBtnLink}
+                className="inline-flex items-center justify-center gap-2 px-8 py-3.5 bg-transparent border border-pop-pink text-pop-pink font-medium rounded-md hover:bg-pop-pink/5 transition-colors w-full sm:w-auto"
+              >
+                {secondaryBtnText}
+                <ChevronRight className="w-4 h-4" />
+              </Link>
+            )}
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}
diff --git a/apps/spa/src/components/DynamicPageRenderer.tsx b/apps/spa/src/components/DynamicPageRenderer.tsx
index f59efe2..64930fc 100644
--- a/apps/spa/src/components/DynamicPageRenderer.tsx
+++ b/apps/spa/src/components/DynamicPageRenderer.tsx
@@ -1,5 +1,7 @@
 import type { PageSection, Category, AccordionSectionPayload, ContactInfoSectionPayload, ContactFormSectionPayload } from '@homaroma/types';
 import DynamicHero from './DynamicHero';
+import DynamicHeroV2 from './DynamicHeroV2';
+import DynamicUspBar from './DynamicUspBar';
 import DynamicCategories from './DynamicCategories';
 import DynamicProducts from './DynamicProducts';
 import DynamicBanner from './DynamicBanner';
@@ -40,6 +42,10 @@ export default function DynamicPageRenderer({
             return <DynamicAnnouncementBar key={section.id} payload={section.payload} />;
           case 'HERO':
             return <DynamicHero key={section.id} payload={section.payload} />;
+          case 'HERO_V2':
+            return <DynamicHeroV2 key={section.id} payload={section.payload} />;
+          case 'USP_BAR':
+            return <DynamicUspBar key={section.id} payload={section.payload} />;
 
           // animate เมื่อ scroll เข้า viewport
           case 'NEWSLETTER':
diff --git a/apps/spa/src/components/DynamicUspBar.tsx b/apps/spa/src/components/DynamicUspBar.tsx
new file mode 100644
index 0000000..4c6a925
--- /dev/null
+++ b/apps/spa/src/components/DynamicUspBar.tsx
@@ -0,0 +1,55 @@
+import { useTranslation } from 'react-i18next';
+import { getLocalizedField } from '../utils/localization';
+import { Leaf, Droplet, Sparkles, Gift, CheckCircle, ShieldCheck, Heart } from 'lucide-react';
+
+const ICON_MAP: Record<string, React.ElementType> = {
+  leaf: Leaf,
+  droplet: Droplet,
+  sparkles: Sparkles,
+  gift: Gift,
+  check: CheckCircle,
+  shield: ShieldCheck,
+  heart: Heart,
+};
+
+interface DynamicUspBarProps {
+  payload: Record<string, any>;
+}
+
+export default function DynamicUspBar({ payload }: DynamicUspBarProps) {
+  const { i18n } = useTranslation();
+  const lang = i18n.language;
+  const items = Array.isArray(payload.items) ? payload.items : [];
+  const backgroundColor = typeof payload.backgroundColor === 'string' ? payload.backgroundColor : 'var(--surface-page)';
+
+  if (items.length === 0) return null;
+
+  return (
+    <section className="w-full py-8 border-t border-b border-pop-pink/10" style={{ backgroundColor }}>
+      <div className="max-w-7xl mx-auto px-6">
+        <div className={`grid grid-cols-1 sm:grid-cols-2 md:grid-cols-${Math.min(items.length, 4)} gap-6 divide-y sm:divide-y-0 sm:divide-x divide-pop-pink/20`}>
+          {items.slice(0, 4).map((item: any, idx: number) => {
+            const Icon = ICON_MAP[item.icon] || CheckCircle;
+            return (
+              <div key={idx} className="flex items-start gap-4 px-4 pt-4 sm:pt-0 first:pt-0">
+                <div className="flex-shrink-0 text-pop-pink">
+                  <Icon className="w-8 h-8" strokeWidth={1.5} />
+                </div>
+                <div>
+                  <h3 className="text-sm md:text-base font-semibold text-pop-black">
+                    {getLocalizedField(item.title, lang)}
+                  </h3>
+                  {item.subtitle && (
+                    <p className="text-xs md:text-sm text-pop-black/70 mt-1">
+                      {getLocalizedField(item.subtitle, lang)}
+                    </p>
+                  )}
+                </div>
+              </div>
+            );
+          })}
+        </div>
+      </div>
+    </section>
+  );
+}
diff --git a/apps/spa/src/components/ThemeInjector.tsx b/apps/spa/src/components/ThemeInjector.tsx
index 9d519c1..46c93af 100644
--- a/apps/spa/src/components/ThemeInjector.tsx
+++ b/apps/spa/src/components/ThemeInjector.tsx
@@ -22,6 +22,11 @@ export default function ThemeInjector() {
             '--color-pop-bg': tokens.surfacePage,
             '--color-pop-black': tokens.textMain,
             '--color-night-900': tokens.surfaceCard,
+            '--color-pop-caption': tokens.captionText,
+            '--color-pop-border': tokens.borderColor,
+            '--color-pop-muted-bg': tokens.surfaceMuted,
+            '--radius-base': tokens.radiusBase,
+            '--radius-card': tokens.radiusCard,
           }
           for (const [key, value] of Object.entries(mapping)) {
             if (value && typeof value === 'string' && value.trim() !== '') {
diff --git a/apps/website/src/app/[lang]/layout.tsx b/apps/website/src/app/[lang]/layout.tsx
index a497157..b260dfb 100644
--- a/apps/website/src/app/[lang]/layout.tsx
+++ b/apps/website/src/app/[lang]/layout.tsx
@@ -1,5 +1,5 @@
 import type { Metadata } from 'next';
-import { Kanit, Sarabun } from 'next/font/google';
+import { Kanit, Sarabun, Playfair_Display } from 'next/font/google';
 import { notFound } from 'next/navigation';
 import '../globals.css';
 import Navbar from '@/components/Navbar';
@@ -25,6 +25,13 @@ const kanit = Kanit({
   variable: '--font-kanit',
 });
 
+const playfairDisplay = Playfair_Display({
+  subsets: ['latin'],
+  display: 'swap',
+  weight: ['400', '500', '600', '700'],
+  variable: '--font-playfair',
+});
+
 export async function generateMetadata({ params }: { params: Promise<{ lang: string }> }): Promise<Metadata> {
   const { lang } = await params;
   const settings = await getStoreSettings(lang);
@@ -127,6 +134,11 @@ function buildThemeStyle(settings: StoreSettings | null): CSSProperties | undefi
     ['--font-display-active', tokens.fontDisplay],
     ['--shadow-card', tokens.shadowCard],
     ['--shadow-card-hover', tokens.shadowCardHover],
+    ['--color-caption-text', tokens.captionText],
+    ['--color-border-color', tokens.borderColor],
+    ['--color-surface-muted', tokens.surfaceMuted],
+    ['--radius-base', tokens.radiusBase],
+    ['--radius-card', tokens.radiusCard],
   ]
 
   // Add Scroll Reveal Settings
@@ -171,7 +183,7 @@ export default async function RootLayout({
   const themeStyle = buildThemeStyle(settings)
 
   return (
-    <html lang={lang} className={`${sarabun.variable} ${kanit.variable} scroll-smooth`}>
+    <html lang={lang} className={`${sarabun.variable} ${kanit.variable} ${playfairDisplay.variable} scroll-smooth`}>
       <body className="min-h-screen bg-surface-page text-text-main font-sans antialiased" style={themeStyle}>
         <ClientProviders>
           <Navbar categories={categories} initialMenu={initialMenu} settings={settings} />
diff --git a/apps/website/src/app/globals.css b/apps/website/src/app/globals.css
index 1bfe815..26f9ac1 100644
--- a/apps/website/src/app/globals.css
+++ b/apps/website/src/app/globals.css
@@ -1,21 +1,30 @@
 @import "tailwindcss";
 
 @theme {
-  --color-brand-primary: #FF6B6B;
-  --color-brand-primary-hover: #FF4500;
-  --color-brand-accent: #FFF200;
-  --color-brand-warm: #FFA07A;
-  --color-brand-cool: #E0FFFF;
-  --color-brand-success: #98FB98;
-  --color-brand-soft: #D8BFD8;
-  --color-surface-page: #FFF0F5;
-  --color-surface-nav-rest: #F9F8F5;
+  /* Quiet Luxury Palette — HOM AROMA Brand Reference */
+  --color-brand-primary: #B8956A;
+  --color-brand-primary-hover: #A07D3A;
+  --color-brand-accent: #D4B97A;
+  --color-brand-warm: #D4785A;
+  --color-brand-cool: #EDE6DD;
+  --color-brand-success: #5B9A4D;
+  --color-brand-soft: #DABE7E;
+  --color-surface-page: #F5F0EB;
+  --color-surface-nav-rest: #FDFAF7;
   --color-surface-card: #FFFFFF;
-  --color-text-main: #333333;
-  --color-muted-text: #666666;
+  --color-text-main: #3A2F28;
+  --color-muted-text: #7A6E63;
   --color-line-primary: #00B900;
   --color-line-primary-hover: #009900;
 
+  /* New tokens — extended Quiet Luxury system */
+  --color-caption-text: #B0A396;
+  --color-border-color: #E8E0D8;
+  --color-surface-muted: #EDE6DD;
+  --radius-base: 8px;
+  --radius-card: 16px;
+
+  /* pop-* aliases — used by apps/spa ThemeInjector */
   --color-pop-pink: var(--color-brand-primary);
   --color-pop-yellow: var(--color-brand-accent);
   --color-pop-orange: var(--color-brand-warm);
@@ -25,12 +34,16 @@
   --color-pop-purple: var(--color-brand-soft);
   --color-pop-bg: var(--color-surface-page);
   --color-pop-black: var(--color-text-main);
+  --color-pop-caption: var(--color-caption-text);
+  --color-pop-border: var(--color-border-color);
+  --color-pop-muted-bg: var(--color-surface-muted);
 
-  /* Serif font — mirrors apps/spa font-serif token */
+  /* Serif font — Playfair Display for Quiet Luxury headings */
+  --font-playfair: var(--font-playfair, "Playfair Display"), ui-serif, Georgia, serif;
   --font-serif: var(--font-serif-locale, ui-serif), Georgia, Cambria, "Times New Roman", Times, serif;
 
-  --shadow-card: 0 10px 25px rgba(0,0,0,0.05);
-  --shadow-card-hover: 0 20px 40px rgba(0,0,0,0.1);
+  --shadow-card: 0 1px 4px rgba(0,0,0,0.04);
+  --shadow-card-hover: 0 4px 12px rgba(0,0,0,0.06);
   --shadow-brutal: var(--shadow-card);
   --shadow-brutal-hover: var(--shadow-card-hover);
   
diff --git a/apps/website/src/components/dynamic/DynamicPageRenderer.tsx b/apps/website/src/components/dynamic/DynamicPageRenderer.tsx
index 3532f72..fd26bb3 100644
--- a/apps/website/src/components/dynamic/DynamicPageRenderer.tsx
+++ b/apps/website/src/components/dynamic/DynamicPageRenderer.tsx
@@ -2,7 +2,7 @@
 
 import Image from 'next/image'
 import Link from '../LocalizedLink'
-import { Clock, Mail, MapPin, MessageCircle, Send, ChevronLeft, ChevronRight } from 'lucide-react'
+import { Clock, Mail, MapPin, MessageCircle, Send, ChevronLeft, ChevronRight, Leaf, Droplet, Sparkles, Gift, CheckCircle, ShieldCheck, Heart } from 'lucide-react'
 import { useState, useRef } from 'react'
 import type { Category, PageSection, Product } from '@homaroma/types'
 import { getCategoryImage } from '@homaroma/types'
@@ -152,6 +152,140 @@ function HeroSection({ payload, lang }: { payload: Record<string, unknown>, lang
   )
 }
 
+const ICON_MAP: Record<string, React.ElementType> = {
+  leaf: Leaf,
+  droplet: Droplet,
+  sparkles: Sparkles,
+  gift: Gift,
+  check: CheckCircle,
+  shield: ShieldCheck,
+  heart: Heart,
+}
+
+function UspBarSection({ payload, lang }: { payload: Record<string, unknown>, lang: string }) {
+  const i18nLang = useLang()
+  const resolvedLang = lang === 'all' ? i18nLang : lang
+  const items = Array.isArray(payload.items) ? payload.items : []
+  const backgroundColor = typeof payload.backgroundColor === 'string' ? payload.backgroundColor : 'var(--surface-page)'
+
+  if (items.length === 0) return null
+
+  return (
+    <section className="w-full py-8 border-t border-b border-line-primary/10" style={{ backgroundColor }}>
+      <div className="ui-section-shell">
+        <div className={`grid grid-cols-1 sm:grid-cols-2 md:grid-cols-${Math.min(items.length, 4)} gap-6 divide-y sm:divide-y-0 sm:divide-x divide-line-primary/20`}>
+          {items.slice(0, 4).map((item: any, idx: number) => {
+            const Icon = ICON_MAP[item.icon] || CheckCircle
+            return (
+              <div key={idx} className="flex items-start gap-4 px-4 pt-4 sm:pt-0 first:pt-0">
+                <div className="flex-shrink-0 text-brand-primary">
+                  <Icon className="w-8 h-8" strokeWidth={1.5} />
+                </div>
+                <div>
+                  <h3 className="text-sm md:text-base font-semibold text-text-main">
+                    {localizedFromRecord(item, 'title', resolvedLang)}
+                  </h3>
+                  {item.subtitle && (
+                    <p className="text-xs md:text-sm text-muted-text mt-1">
+                      {localizedFromRecord(item, 'subtitle', resolvedLang)}
+                    </p>
+                  )}
+                </div>
+              </div>
+            )
+          })}
+        </div>
+      </div>
+    </section>
+  )
+}
+
+function HeroV2Section({ payload, lang }: { payload: Record<string, unknown>, lang: string }) {
+  const i18nLang = useLang()
+  const resolvedLang = lang === 'all' ? i18nLang : lang
+  const tagline = localizedFromRecord(payload, 'tagline', resolvedLang)
+  const title = localizedFromRecord(payload, 'title', resolvedLang)
+  const description = localizedFromRecord(payload, 'description', resolvedLang)
+  
+  const primaryBtnText = localizedFromRecord(payload, 'primaryButtonText', resolvedLang)
+  const primaryBtnLink = typeof payload.primaryButtonLink === 'string' ? payload.primaryButtonLink : undefined
+  const secondaryBtnText = localizedFromRecord(payload, 'secondaryButtonText', resolvedLang)
+  const secondaryBtnLink = typeof payload.secondaryButtonLink === 'string' ? payload.secondaryButtonLink : undefined
+
+  const imageUrl = typeof payload.imageUrl === 'string' ? payload.imageUrl : '/images/hero.png'
+  const align = typeof payload.contentAlignment === 'string' ? payload.contentAlignment : 'left'
+  const showOrnament = typeof payload.showOrnament === 'boolean' ? payload.showOrnament : true
+
+  // Alignment classes
+  const alignClass = align === 'center' ? 'text-center items-center mx-auto' : align === 'right' ? 'text-right items-end ml-auto' : 'text-left items-start'
+
+  return (
+    <section className="relative w-full h-[80vh] min-h-[600px] bg-surface-page flex items-center overflow-hidden">
+      <div className="absolute inset-0 w-full h-full">
+        <Image
+          src={imageUrl}
+          alt={title || 'Hero'}
+          fill
+          unoptimized
+          className="object-cover"
+        />
+        <div className="absolute inset-0 bg-gradient-to-r from-surface-page/90 via-surface-page/50 to-transparent pointer-events-none" />
+      </div>
+      
+      <div className="relative z-10 w-full max-w-7xl mx-auto px-6 md:px-12">
+        <div className={`max-w-xl flex flex-col gap-6 ${alignClass}`}>
+          {tagline && (
+            <div className="flex items-center gap-4">
+              {showOrnament && align !== 'right' && <div className="w-8 h-[1px] bg-brand-primary" />}
+              <span className="text-sm font-semibold tracking-[0.2em] uppercase text-brand-primary">
+                {tagline}
+              </span>
+              {showOrnament && align !== 'left' && <div className="w-8 h-[1px] bg-brand-primary" />}
+            </div>
+          )}
+          
+          <h1 className="text-4xl md:text-5xl lg:text-6xl font-serif text-text-main leading-tight">
+            {renderAccentTitle(title || '', 'text-brand-primary')}
+          </h1>
+
+          {showOrnament && (
+            <div className="flex justify-center items-center text-brand-primary my-2">
+              <Sparkles className="w-5 h-5" />
+            </div>
+          )}
+
+          {description && (
+            <p className="text-base md:text-lg text-text-main/80 leading-relaxed max-w-md">
+              {description}
+            </p>
+          )}
+
+          <div className={`flex flex-col sm:flex-row items-center gap-4 mt-4 w-full sm:w-auto ${align === 'center' ? 'justify-center' : align === 'right' ? 'justify-end' : 'justify-start'}`}>
+            {primaryBtnText && primaryBtnLink && (
+              <Link
+                href={primaryBtnLink}
+                className="inline-flex items-center justify-center gap-2 px-8 py-3.5 bg-[#A18868] text-white font-medium rounded-md hover:bg-[#8B7355] transition-colors w-full sm:w-auto"
+              >
+                {primaryBtnText}
+                <ChevronRight className="w-4 h-4" />
+              </Link>
+            )}
+            {secondaryBtnText && secondaryBtnLink && (
+              <Link
+                href={secondaryBtnLink}
+                className="inline-flex items-center justify-center gap-2 px-8 py-3.5 bg-transparent border border-[#A18868] text-[#A18868] font-medium rounded-md hover:bg-[#A18868]/5 transition-colors w-full sm:w-auto"
+              >
+                {secondaryBtnText}
+                <ChevronRight className="w-4 h-4" />
+              </Link>
+            )}
+          </div>
+        </div>
+      </div>
+    </section>
+  )
+}
+
 function CategoriesSection({
   payload,
   categories,
@@ -888,6 +1022,18 @@ export default function DynamicPageRenderer({ sections, categories, lang: langPr
                 <HeroSection payload={payload} lang={lang} />
               </ScrollReveal>
             )
+          case 'HERO_V2':
+            return (
+              <ScrollReveal key={section.id}>
+                <HeroV2Section payload={payload} lang={lang} />
+              </ScrollReveal>
+            )
+          case 'USP_BAR':
+            return (
+              <ScrollReveal key={section.id}>
+                <UspBarSection payload={payload} lang={lang} />
+              </ScrollReveal>
+            )
           case 'CATEGORIES':
             return (
               <ScrollReveal key={section.id}>
diff --git a/packages/types/index.ts b/packages/types/index.ts
index 9a88046..a7f88da 100644
--- a/packages/types/index.ts
+++ b/packages/types/index.ts
@@ -560,10 +560,35 @@ export const ContactFormSectionPayloadSchema = z.object({
 });
 export type ContactFormSectionPayload = z.infer<typeof ContactFormSectionPayloadSchema>;
 
+export const HeroV2SectionPayloadSchema = z.object({
+  tagline: LocalizedStringSchema.optional(),
+  title: LocalizedStringSchema,
+  description: LocalizedStringSchema.optional(),
+  imageUrl: z.string().min(1),
+  contentAlignment: z.enum(['left', 'center', 'right']).optional(),
+  showOrnament: z.boolean().optional(),
+  primaryButtonText: LocalizedStringSchema.optional(),
+  primaryButtonLink: z.string().optional(),
+  secondaryButtonText: LocalizedStringSchema.optional(),
+  secondaryButtonLink: z.string().optional(),
+});
+export type HeroV2SectionPayload = z.infer<typeof HeroV2SectionPayloadSchema>;
+
+export const UspBarSectionPayloadSchema = z.object({
+  backgroundColor: z.string().optional(),
+  items: z.array(z.object({
+    icon: z.string(),
+    title: LocalizedStringSchema,
+    subtitle: LocalizedStringSchema.optional(),
+  })).max(4).optional(),
+});
+export type UspBarSectionPayload = z.infer<typeof UspBarSectionPayloadSchema>;
+
 export const PAGE_SECTION_TYPES = [
   'HERO', 'ANNOUNCEMENT_BAR', 'NEWSLETTER', 'EDITORIAL_TILE', 
   'EDITORIAL_CAROUSEL', 'PRODUCTS', 'CATEGORIES', 'TEXT', 'BANNER', 
   'HERO_ARTICLE', 'RICH_TEXT', 'SCENT_NOTES_BREAKDOWN', 'QUOTE_CALLOUT', 
-  'PRODUCT_CAROUSEL', 'ACCORDION', 'CONTACT_INFO', 'CONTACT_FORM'
+  'PRODUCT_CAROUSEL', 'ACCORDION', 'CONTACT_INFO', 'CONTACT_FORM',
+  'HERO_V2', 'USP_BAR'
 ] as const;
 export type SectionType = typeof PAGE_SECTION_TYPES[number];
diff --git a/style/06488f6a-d9da-4fb9-91b2-24c0fc39276f.png b/style/06488f6a-d9da-4fb9-91b2-24c0fc39276f.png
new file mode 100644
index 0000000..17ee969
Binary files /dev/null and b/style/06488f6a-d9da-4fb9-91b2-24c0fc39276f.png differ
diff --git a/style/3ec17ae5-f3f7-4a40-8360-bfc39e2eb9b2.png b/style/3ec17ae5-f3f7-4a40-8360-bfc39e2eb9b2.png
new file mode 100644
index 0000000..80bcd08
Binary files /dev/null and b/style/3ec17ae5-f3f7-4a40-8360-bfc39e2eb9b2.png differ
diff --git a/style/423a7d0c-c351-4412-b469-a41b457a3c5c.png b/style/423a7d0c-c351-4412-b469-a41b457a3c5c.png
new file mode 100644
index 0000000..d9b632d
Binary files /dev/null and b/style/423a7d0c-c351-4412-b469-a41b457a3c5c.png differ
diff --git a/style/5d5b62eb-ca8a-4696-a965-6126bf5360f1.png b/style/5d5b62eb-ca8a-4696-a965-6126bf5360f1.png
new file mode 100644
index 0000000..140bc93
Binary files /dev/null and b/style/5d5b62eb-ca8a-4696-a965-6126bf5360f1.png differ
diff --git a/style/5f97b29b-15e8-48b3-aac6-eb638ca34afd.png b/style/5f97b29b-15e8-48b3-aac6-eb638ca34afd.png
new file mode 100644
index 0000000..a0b1fb0
Binary files /dev/null and b/style/5f97b29b-15e8-48b3-aac6-eb638ca34afd.png differ
diff --git a/style/83e5c453-7acb-4a40-ad31-c9afa55cfd0d.png b/style/83e5c453-7acb-4a40-ad31-c9afa55cfd0d.png
new file mode 100644
index 0000000..af3c244
Binary files /dev/null and b/style/83e5c453-7acb-4a40-ad31-c9afa55cfd0d.png differ
diff --git a/style/9d2cbbd7-147d-433c-bb6b-1d5886bcef8b.png b/style/9d2cbbd7-147d-433c-bb6b-1d5886bcef8b.png
new file mode 100644
index 0000000..85700c1
Binary files /dev/null and b/style/9d2cbbd7-147d-433c-bb6b-1d5886bcef8b.png differ
diff --git a/style/ab39ee58-0c6b-426e-9cee-a9f3b2f2a5e2.png b/style/ab39ee58-0c6b-426e-9cee-a9f3b2f2a5e2.png
new file mode 100644
index 0000000..c4143bb
Binary files /dev/null and b/style/ab39ee58-0c6b-426e-9cee-a9f3b2f2a5e2.png differ
diff --git a/style/c382cc84-203f-49e7-aa85-ffffc551c582.png b/style/c382cc84-203f-49e7-aa85-ffffc551c582.png
new file mode 100644
index 0000000..edd466b
Binary files /dev/null and b/style/c382cc84-203f-49e7-aa85-ffffc551c582.png differ
diff --git a/style/c465fff2-8ccc-4a65-8d66-0de34cfd55ca.png b/style/c465fff2-8ccc-4a65-8d66-0de34cfd55ca.png
new file mode 100644
index 0000000..1fab2ce
Binary files /dev/null and b/style/c465fff2-8ccc-4a65-8d66-0de34cfd55ca.png differ
diff --git a/style/d45af121-0d95-47fe-91b4-95053815677c.png b/style/d45af121-0d95-47fe-91b4-95053815677c.png
new file mode 100644
index 0000000..7794296
Binary files /dev/null and b/style/d45af121-0d95-47fe-91b4-95053815677c.png differ
diff --git a/style/d9769c29-0da0-4523-96d7-fbff9bafa0a6.png b/style/d9769c29-0da0-4523-96d7-fbff9bafa0a6.png
new file mode 100644
index 0000000..5a5c8ef
Binary files /dev/null and b/style/d9769c29-0da0-4523-96d7-fbff9bafa0a6.png differ