diff --git a/vibn-frontend/_onboarding/onboarding-entrepreneur.tsx b/vibn-frontend/_onboarding/onboarding-entrepreneur.tsx
index 6c97f761..214e93f6 100644
--- a/vibn-frontend/_onboarding/onboarding-entrepreneur.tsx
+++ b/vibn-frontend/_onboarding/onboarding-entrepreneur.tsx
@@ -174,7 +174,10 @@ function EntrepType({ value, onChange }) {
 
 function LayoutPreview({ styleId }: { styleId: string }) {
   // Ultra-high-fidelity CSS-rendered miniatures representing your actual page-dashboard.jsx designs!
-  const isDark = styleId === "rail";
+  const isDark =
+    styleId === "sidebar_dark" ||
+    styleId === "topbar_dark" ||
+    styleId === "rail";
   const accentColor = "var(--accent)";
 
   // Theme palettes from page-dashboard.jsx
@@ -240,7 +243,6 @@ function LayoutPreview({ styleId }: { styleId: string }) {
     </div>
   );
 
-  // Common high-fidelity dashboard body matching page-dashboard.jsx
   // Common high-fidelity dashboard body matching page-dashboard.jsx
   const renderDashboardMockup = () => (
     <div
@@ -725,7 +727,7 @@ function LayoutPreview({ styleId }: { styleId: string }) {
   );
 
   let content;
-  if (styleId === "sidebar") {
+  if (styleId === "sidebar_light") {
     // Left-side menu column + main dashboard area — Light/Minimal CRM theme (Screen 3)
     content = (
       <div
@@ -900,8 +902,137 @@ function LayoutPreview({ styleId }: { styleId: string }) {
                 </div>
               ))}
             </div>
+          </div>
+        </div>
+        {/* Main Dashboard (Light) */}
+        {renderDashboardMockup()}
+      </div>
+    );
+  } else if (styleId === "sidebar_dark") {
+    // Left-side menu column + main dashboard area — Full Dark theme (Screen 3 Dark)
+    content = (
+      <div
+        style={{
+          display: "flex",
+          width: "100%",
+          height: "100%",
+          background: "#0e0f12",
+        }}
+      >
+        {/* Sidebar */}
+        <div
+          style={{
+            width: 52,
+            borderRight: "1px solid rgba(255,255,255,0.08)",
+            padding: "8px 6px",
+            display: "flex",
+            flexDirection: "column",
+            gap: 6,
+            background: "#16171d",
+          }}
+        >
+          {/* Logo / Workspace Selector */}
+          <div
+            style={{
+              display: "flex",
+              gap: 3,
+              alignItems: "center",
+              borderBottom: "1px solid rgba(255,255,255,0.08)",
+              paddingBottom: 4,
+            }}
+          >
+            <div
+              style={{
+                width: 10,
+                height: 10,
+                borderRadius: 2.5,
+                background: accentColor,
+                opacity: 0.9,
+              }}
+            />
+            <div style={{ display: "flex", flexDirection: "column", gap: 1 }}>
+              <span
+                style={{
+                  fontSize: 4.5,
+                  fontWeight: 700,
+                  color: "#fff",
+                  letterSpacing: "-0.01em",
+                  lineHeight: 1,
+                }}
+              >
+                Lattice Studio
+              </span>
+              <span
+                style={{
+                  fontSize: 3,
+                  color: "rgba(255,255,255,0.4)",
+                  lineHeight: 1,
+                }}
+              >
+                Free · 4 members
+              </span>
+            </div>
+          </div>
+          {/* Mini Search box */}
+          <div
+            style={{
+              width: "100%",
+              height: 8,
+              borderRadius: 2,
+              border: "1px solid rgba(255,255,255,0.08)",
+              background: "rgba(255,255,255,0.05)",
+              display: "flex",
+              alignItems: "center",
+              paddingLeft: 3,
+            }}
+          >
+            {wireLine(16, 0.15)}
+          </div>
+          {/* Menu Sections (VIEWS, TOOLS, ADMIN) */}
+          <div
+            style={{
+              display: "flex",
+              flexDirection: "column",
+              gap: 5,
+              marginTop: 2,
+            }}
+          >
+            {/* Standard Links */}
+            <div style={{ display: "flex", flexDirection: "column", gap: 2 }}>
+              <div style={{ display: "flex", gap: 3, alignItems: "center" }}>
+                <div
+                  style={{
+                    width: 4,
+                    height: 4,
+                    borderRadius: "50%",
+                    background: accentColor,
+                  }}
+                />
+                {wireLine(12, 0.55)}
+              </div>
+              <div
+                style={{
+                  display: "flex",
+                  gap: 3,
+                  alignItems: "center",
+                  paddingLeft: 4,
+                }}
+              >
+                {wireLine(14, 0.35)}
+              </div>
+              <div
+                style={{
+                  display: "flex",
+                  gap: 3,
+                  alignItems: "center",
+                  paddingLeft: 4,
+                }}
+              >
+                {wireLine(16, 0.35)}
+              </div>
+            </div>
 
-            {/* Admin */}
+            {/* Views */}
             <div style={{ display: "flex", flexDirection: "column", gap: 2 }}>
               <span
                 style={{
@@ -912,26 +1043,57 @@ function LayoutPreview({ styleId }: { styleId: string }) {
                   textTransform: "uppercase",
                 }}
               >
-                ADMIN
+                VIEWS
               </span>
-              <div
+              {["Companies", "People", "Opportunities"].map((v) => (
+                <div
+                  key={v}
+                  style={{
+                    display: "flex",
+                    gap: 3,
+                    alignItems: "center",
+                    paddingLeft: 4,
+                  }}
+                >
+                  {wireLine(24, 0.35)}
+                </div>
+              ))}
+            </div>
+
+            {/* Tools */}
+            <div style={{ display: "flex", flexDirection: "column", gap: 2 }}>
+              <span
                 style={{
-                  display: "flex",
-                  gap: 3,
-                  alignItems: "center",
-                  paddingLeft: 4,
+                  fontSize: 3.5,
+                  color: c.muted,
+                  fontWeight: 600,
+                  letterSpacing: "0.04em",
+                  textTransform: "uppercase",
                 }}
               >
-                {wireLine(18, 0.35)}
-              </div>
+                TOOLS
+              </span>
+              {["Insights", "Automations", "Docs"].map((v) => (
+                <div
+                  key={v}
+                  style={{
+                    display: "flex",
+                    gap: 3,
+                    alignItems: "center",
+                    paddingLeft: 4,
+                  }}
+                >
+                  {wireLine(20, 0.35)}
+                </div>
+              ))}
             </div>
           </div>
         </div>
-        {/* Main Dashboard (Light) */}
+        {/* Main Dashboard (Dark) */}
         {renderDashboardMockup()}
       </div>
     );
-  } else if (styleId === "topbar") {
+  } else if (styleId === "topbar_light") {
     // Top Horizontal Dark Header Bar + Light Dashboard (Screen 2)
     content = (
       <div
@@ -1075,6 +1237,150 @@ function LayoutPreview({ styleId }: { styleId: string }) {
         {renderDashboardMockup()}
       </div>
     );
+  } else if (styleId === "topbar_dark") {
+    // Top Horizontal Dark Header Bar + Dark Dashboard (Screen 2 Dark)
+    content = (
+      <div
+        style={{
+          display: "flex",
+          flexDirection: "column",
+          width: "100%",
+          height: "100%",
+          background: "#0e0f12",
+        }}
+      >
+        {/* Top Dark Header */}
+        <div
+          style={{
+            height: 20,
+            borderBottom: "1px solid rgba(255,255,255,0.08)",
+            padding: "0 10px",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "space-between",
+            background: "#121110",
+          }}
+        >
+          <div style={{ display: "flex", gap: 6, alignItems: "center" }}>
+            <div
+              style={{
+                width: 8,
+                height: 8,
+                borderRadius: 2,
+                background: accentColor,
+                opacity: 0.9,
+              }}
+            />
+            <span
+              style={{
+                fontSize: 5.5,
+                fontWeight: 700,
+                color: "#fff",
+                fontFamily: "var(--font-sans)",
+                letterSpacing: "-0.01em",
+              }}
+            >
+              Lattice
+            </span>
+            <span style={{ fontSize: 4.5, color: "rgba(255,255,255,0.3)" }}>
+              /
+            </span>
+            <div style={{ display: "flex", alignItems: "center", gap: 2 }}>
+              <div
+                style={{
+                  width: 6,
+                  height: 6,
+                  borderRadius: "50%",
+                  background: "#d4b8a8",
+                }}
+              />
+              <span
+                style={{
+                  fontSize: 4.5,
+                  color: "rgba(255,255,255,0.6)",
+                  fontWeight: 500,
+                }}
+              >
+                mira-reyes
+              </span>
+            </div>
+            <span style={{ fontSize: 4.5, color: "rgba(255,255,255,0.3)" }}>
+              /
+            </span>
+            <span
+              style={{
+                fontSize: 4.5,
+                color: "rgba(255,255,255,0.8)",
+                fontWeight: 500,
+              }}
+            >
+              dashboard
+            </span>
+          </div>
+          {/* Miniature ⌘K Bar */}
+          <div
+            style={{
+              width: 56,
+              height: 10,
+              borderRadius: 4,
+              border: "1px solid rgba(255,255,255,0.15)",
+              background: "rgba(255,255,255,0.05)",
+              display: "flex",
+              alignItems: "center",
+              paddingLeft: 4,
+            }}
+          >
+            <div
+              style={{
+                height: 2,
+                width: 22,
+                background: "#fff",
+                opacity: 0.25,
+              }}
+            />
+          </div>
+          <div
+            style={{
+              width: 10,
+              height: 10,
+              borderRadius: "50%",
+              background: "rgba(255,255,255,0.2)",
+            }}
+          />
+        </div>
+
+        {/* Page tabs secondary bar */}
+        <div
+          style={{
+            height: 14,
+            background: "#1a1918",
+            borderBottom: "1px solid rgba(255,255,255,0.04)",
+            padding: "0 10px",
+            display: "flex",
+            alignItems: "center",
+            gap: 10,
+          }}
+        >
+          {["Overview", "Reports", "Goals", "Anomalies", "Custom"].map(
+            (tab, idx) => (
+              <span
+                key={tab}
+                style={{
+                  fontSize: 4.5,
+                  color: idx === 0 ? "#fff" : "rgba(255,255,255,0.4)",
+                  fontWeight: idx === 0 ? 600 : 400,
+                }}
+              >
+                {tab}
+              </span>
+            ),
+          )}
+        </div>
+
+        {/* Dark Dashboard below */}
+        {renderDashboardMockup()}
+      </div>
+    );
   } else if (styleId === "rail") {
     // Icon rail + secondary vertical list panel — Complete Dark-mode Dashboard (Screen 1)
     content = (
@@ -1934,22 +2240,28 @@ function LayoutPreview({ styleId }: { styleId: string }) {
 
 const SAAS_STYLES = [
   {
-    id: "sidebar",
-    label: "Vertical Sidebar",
-    desc: "Left-side collapsible menu, data-dense. Ideal for CRM/dashboards.",
-    illustration: <LayoutPreview styleId="sidebar" />,
+    id: "sidebar_light",
+    label: "Vertical Sidebar — Light",
+    desc: "Clean light sidebar + light dashboard layouts.",
+    illustration: <LayoutPreview styleId="sidebar_light" />,
   },
   {
-    id: "topbar",
-    label: "Top Horizontal + ⌘K",
-    desc: "Spacious top navigation with global command search bar.",
-    illustration: <LayoutPreview styleId="topbar" />,
+    id: "sidebar_dark",
+    label: "Vertical Sidebar — Dark",
+    desc: "Full dark sidebar + dark dashboard layouts.",
+    illustration: <LayoutPreview styleId="sidebar_dark" />,
   },
   {
-    id: "rail",
-    label: "Slim Icon Rail",
-    desc: "Minimalist vertical narrow icon bar, maximizes workspace area.",
-    illustration: <LayoutPreview styleId="rail" />,
+    id: "topbar_light",
+    label: "Top Horizontal — Light",
+    desc: "Sleek dark topbar + light dashboard layouts.",
+    illustration: <LayoutPreview styleId="topbar_light" />,
+  },
+  {
+    id: "topbar_dark",
+    label: "Top Horizontal — Dark",
+    desc: "Full dark topbar + dark dashboard layouts.",
+    illustration: <LayoutPreview styleId="topbar_dark" />,
   },
 ];