diff --git a/app/[workspace]/project/[projectId]/design/page.tsx b/app/[workspace]/project/[projectId]/design/page.tsx
index 59757e5..9bf5dc5 100644
--- a/app/[workspace]/project/[projectId]/design/page.tsx
+++ b/app/[workspace]/project/[projectId]/design/page.tsx
@@ -243,7 +243,7 @@ const LIBRARY_STYLE_OPTIONS: Record<string, LibraryStyleOptions> = {
       { id: "dm-sans",     label: "DM Sans" },
       { id: "geist",       label: "Geist" },
     ],
-    defaultConfig: { mode: "dark", background: "solid", nav: "standard", header: "centered", components: ["features", "pricing"], font: "system" },
+    defaultConfig: { mode: "dark", background: "solid", nav: "standard", header: "centered", components: ["logos", "features", "steps", "testimonials", "pricing", "faq", "cta"], font: "system" },
   },
   "hero-ui": {
     modes: [{ id: "light", label: "Light" }, { id: "dark", label: "Dark" }],
@@ -277,7 +277,7 @@ const LIBRARY_STYLE_OPTIONS: Record<string, LibraryStyleOptions> = {
       { id: "geist",  label: "Geist" },
       { id: "nunito", label: "Nunito" },
     ],
-    defaultConfig: { mode: "light", background: "clean", nav: "blur", header: "animated-badge", components: ["features", "metrics"], font: "system" },
+    defaultConfig: { mode: "light", background: "clean", nav: "blur", header: "animated-badge", components: ["features", "metrics", "avatars", "pricing", "testimonials", "cta"], font: "system" },
   },
   "aceternity": {
     modes: [{ id: "dark", label: "Dark" }, { id: "light", label: "Light" }],
@@ -313,7 +313,7 @@ const LIBRARY_STYLE_OPTIONS: Record<string, LibraryStyleOptions> = {
       { id: "geist",       label: "Geist" },
       { id: "plus-jakarta", label: "Plus Jakarta" },
     ],
-    defaultConfig: { mode: "dark", background: "gradient", nav: "minimal", header: "gradient-text", components: ["features", "moving-cards"], font: "system" },
+    defaultConfig: { mode: "dark", background: "gradient", nav: "minimal", header: "gradient-text", components: ["badge", "features", "moving-cards", "bento", "pricing", "cta"], font: "system" },
   },
   "tailwind-only": {
     modes: [{ id: "light", label: "Light" }, { id: "dark", label: "Dark" }],
@@ -349,7 +349,7 @@ const LIBRARY_STYLE_OPTIONS: Record<string, LibraryStyleOptions> = {
       { id: "plus-jakarta", label: "Plus Jakarta" },
       { id: "dm-sans",     label: "DM Sans" },
     ],
-    defaultConfig: { mode: "light", background: "clean", nav: "minimal", header: "editorial", components: ["features", "stats", "pricing"], font: "system" },
+    defaultConfig: { mode: "light", background: "clean", nav: "minimal", header: "editorial", components: ["badge", "logos", "features", "stats", "testimonials", "pricing", "faq", "cta"], font: "system" },
   },
 };
 
@@ -654,6 +654,36 @@ function SurfaceSection({
           )}
         </div>
 
+        {/* Palette (colour) — top of mind, shown right after Lock */}
+        {availableColorThemes.length > 0 && (
+          <div style={{ display: "flex", flexDirection: "column", gap: 7, paddingBottom: 12, borderBottom: "1px solid #f0ece4" }}>
+            <span style={{ fontSize: "0.62rem", fontWeight: 700, color: "#a09a90", textTransform: "uppercase", letterSpacing: "0.1em", fontFamily: "Outfit" }}>Colour</span>
+            <div style={{ display: "flex", gap: 7, flexWrap: "wrap", alignItems: "center" }}>
+              {availableColorThemes.map(ct => (
+                <button
+                  key={ct.id}
+                  title={ct.label}
+                  onClick={() => !isLocked && setSelectedColorTheme(ct)}
+                  disabled={isLocked}
+                  style={{
+                    width: 22, height: 22, borderRadius: "50%", border: "none", cursor: isLocked ? "not-allowed" : "pointer",
+                    background: ct.bg ? `linear-gradient(135deg, ${ct.bg} 50%, ${ct.primary} 50%)` : ct.primary,
+                    outline: activeColorTheme?.id === ct.id ? `2.5px solid ${ct.primary}` : "2px solid transparent",
+                    outlineOffset: 2, transition: "transform 0.12s",
+                    opacity: isLocked ? 0.4 : 1,
+                    boxShadow: "0 1px 3px rgba(0,0,0,0.15)",
+                  }}
+                  onMouseEnter={e => { if (!isLocked) (e.currentTarget as HTMLElement).style.transform = "scale(1.18)"; }}
+                  onMouseLeave={e => { (e.currentTarget as HTMLElement).style.transform = "scale(1)"; }}
+                />
+              ))}
+            </div>
+            {activeColorTheme && (
+              <span style={{ fontSize: "0.72rem", color: "#a09a90", fontFamily: "Outfit" }}>{activeColorTheme.label}</span>
+            )}
+          </div>
+        )}
+
         {/* Library — simple name buttons */}
         <div style={{ display: "flex", flexDirection: "column", gap: 7, paddingBottom: 12, borderBottom: "1px solid #f0ece4" }}>
           <span style={{ fontSize: "0.62rem", fontWeight: 700, color: "#a09a90", textTransform: "uppercase", letterSpacing: "0.1em", fontFamily: "Outfit" }}>Library</span>
@@ -696,35 +726,6 @@ function SurfaceSection({
           />
         )}
 
-        {/* Palette (colour) — shown after configurator */}
-        {availableColorThemes.length > 0 && (
-          <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
-            <span style={{ fontSize: "0.68rem", fontWeight: 600, color: "#a09a90", textTransform: "uppercase", letterSpacing: "0.08em", fontFamily: "Outfit" }}>Colour</span>
-            <div style={{ display: "flex", gap: 6, flexWrap: "wrap", alignItems: "center" }}>
-              {availableColorThemes.map(ct => (
-                <button
-                  key={ct.id}
-                  title={ct.label}
-                  onClick={() => !isLocked && setSelectedColorTheme(ct)}
-                  disabled={isLocked}
-                  style={{
-                    width: 20, height: 20, borderRadius: "50%", border: "none", cursor: isLocked ? "not-allowed" : "pointer",
-                    background: ct.bg ? `linear-gradient(135deg, ${ct.bg} 50%, ${ct.primary} 50%)` : ct.primary,
-                    outline: activeColorTheme?.id === ct.id ? `2px solid ${ct.primary}` : "none",
-                    outlineOffset: 2, transition: "transform 0.12s",
-                    opacity: isLocked ? 0.4 : 1,
-                  }}
-                  onMouseEnter={e => { if (!isLocked) (e.currentTarget as HTMLElement).style.transform = "scale(1.15)"; }}
-                  onMouseLeave={e => { (e.currentTarget as HTMLElement).style.transform = "scale(1)"; }}
-                />
-              ))}
-              {activeColorTheme && (
-                <span style={{ fontSize: "0.72rem", color: "#a09a90", fontFamily: "Outfit" }}>{activeColorTheme.label}</span>
-              )}
-            </div>
-          </div>
-        )}
-
       </div>{/* end inner padding div */}
       </div>{/* end right panel */}
     </div>
diff --git a/components/design-scaffolds/marketing.tsx b/components/design-scaffolds/marketing.tsx
index e6c6ee7..e334ba5 100644
--- a/components/design-scaffolds/marketing.tsx
+++ b/components/design-scaffolds/marketing.tsx
@@ -5,12 +5,21 @@ import { ThemeColor, DesignConfig, DAISY_THEMES, HEROUI_MARKETING_THEMES, ACETER
 function fontStack(font?: string) {
   if (font === "plus-jakarta") return '"Plus Jakarta Sans", system-ui, sans-serif';
   if (font === "dm-sans")      return '"DM Sans", system-ui, sans-serif';
-  if (font === "geist")        return '"Geist", system-ui, sans-serif';
+  if (font === "geist")        return '"Geist Sans", system-ui, sans-serif';
   if (font === "inter")        return '"Inter", system-ui, sans-serif';
   if (font === "nunito")       return '"Nunito", system-ui, sans-serif';
   return "system-ui, sans-serif";
 }
 
+function fontImport(font?: string): string {
+  if (font === "plus-jakarta") return "@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800;900&display=swap');";
+  if (font === "dm-sans")      return "@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;0,9..40,800;0,9..40,900;1,9..40,400&display=swap');";
+  if (font === "geist")        return "@import url('https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700;800;900&display=swap');";
+  if (font === "inter")        return "@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');";
+  if (font === "nunito")       return "@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;500;600;700;800;900&display=swap');";
+  return "";
+}
+
 // Namespaced CSS keyframes (won't conflict with page styles)
 const ACE_KEYFRAMES = `
   @keyframes ace-blob1 { 0%,100%{transform:translate(0%,0%) scale(1)} 33%{transform:translate(28%,-22%) scale(1.12)} 66%{transform:translate(-18%,18%) scale(0.9)} }
@@ -201,6 +210,7 @@ export function MarketingDaisy({ themeColor, config }: { themeColor?: ThemeColor
 
   return (
     <div style={{ height: "100%", fontFamily: ff, background: bg, color: text, overflow: "auto", position: "relative" }}>
+      <style>{fontImport(config?.font)}</style>
       {bgStyle === "pattern" && (
         <div style={{ position: "absolute", inset: 0, backgroundImage: `radial-gradient(${p}22 1px, transparent 1px)`, backgroundSize: "20px 20px", pointerEvents: "none", zIndex: 0 }} />
       )}
@@ -607,7 +617,7 @@ export function MarketingAceternity({ themeColor, config }: { themeColor?: Theme
 
   return (
     <div style={{ height: "100%", fontFamily: ff, background: bg, overflow: "auto", position: "relative", color: text }}>
-      <style>{ACE_KEYFRAMES}</style>
+      <style>{ACE_KEYFRAMES + fontImport(config?.font)}</style>
       <BgLayer />
 
       {/* Nav */}
@@ -832,6 +842,7 @@ export function MarketingHeroUI({ themeColor, config }: { themeColor?: ThemeColo
 
   return (
     <div style={{ height: "100%", fontFamily: ff, background: bg, overflow: "auto", position: "relative" }}>
+      <style>{fontImport(config?.font)}</style>
       {heroBgOverlay && <div style={{ position: "absolute", top: 0, left: 0, right: 0, height: "70%", background: heroBgOverlay, pointerEvents: "none", zIndex: 0 }} />}
 
       <nav style={{
@@ -1046,6 +1057,7 @@ export function MarketingTailwind({ themeColor, config }: { themeColor?: ThemeCo
 
   return (
     <div style={{ height: "100%", fontFamily: ff, background: bg, overflow: "auto", position: "relative", color: text }}>
+      <style>{fontImport(config?.font)}</style>
       {bgStyle === "dot-grid" && (
         <div style={{ position: "absolute", inset: 0, backgroundImage: `radial-gradient(${isDark ? "#ffffff14" : "#00000012"} 1px, transparent 1px)`, backgroundSize: "20px 20px", pointerEvents: "none" }} />
       )}