diff --git a/vibn-frontend/_onboarding/onboarding-entrepreneur.tsx b/vibn-frontend/_onboarding/onboarding-entrepreneur.tsx
index 3384627..dff0cd1 100644
--- a/vibn-frontend/_onboarding/onboarding-entrepreneur.tsx
+++ b/vibn-frontend/_onboarding/onboarding-entrepreneur.tsx
@@ -173,22 +173,556 @@ function EntrepType({ value, onChange }) {
 }
 
 function LayoutPreview({ styleId }: { styleId: string }) {
-  // Styles are 100% width, 104px tall absolute layouts resembling the wireframes.
+  // Ultra-high-fidelity CSS-rendered miniatures representing your actual page-dashboard.jsx designs!
   const isDark = styleId === "rail";
   const accentColor = "var(--accent)";
 
+  // Theme palettes from page-dashboard.jsx
+  const c = isDark
+    ? {
+        bg: "#0e0f12",
+        panel: "#16171d",
+        border: "rgba(255,255,255,0.06)",
+        text: "#f5f4f2",
+        subtext: "#a09fa6",
+        muted: "#686972",
+        accent: "var(--accent)",
+        up: "#22c55e",
+        down: "#ff4d5e",
+      }
+    : {
+        bg: "#fafaf9",
+        panel: "#ffffff",
+        border: "#ebebe6",
+        text: "#1a1a1a",
+        subtext: "#5a5a5e",
+        muted: "#a09a90",
+        accent: "var(--accent)",
+        up: "#2e7d32",
+        down: "#d32f2f",
+      };
+
   const wireLine = (w: string | number, opacity = 0.25) => (
     <div
       style={{
-        height: 3,
+        height: 2.5,
         width: w,
         borderRadius: 1.5,
-        background: isDark ? "rgba(255,255,255,1)" : "rgba(0,0,0,1)",
+        background: isDark ? "#ffffff" : "#000000",
         opacity,
       }}
     />
   );
 
+  // High-fidelity Avatars matching your screenshots (MR, TR, DP, SK)
+  const MiniAvatar = ({
+    text: label,
+    color,
+  }: {
+    text: string;
+    color: string;
+  }) => (
+    <div
+      style={{
+        width: 10,
+        height: 10,
+        borderRadius: "50%",
+        background: color,
+        color: "#3a2210",
+        fontSize: 4.5,
+        fontWeight: 700,
+        display: "grid",
+        placeItems: "center",
+        flexShrink: 0,
+      }}
+    >
+      {label}
+    </div>
+  );
+
+  // Common high-fidelity dashboard body matching page-dashboard.jsx
+  const renderDashboardMockup = () => (
+    <div
+      style={{
+        flex: 1,
+        padding: "8px 10px",
+        display: "flex",
+        flexDirection: "column",
+        gap: 5,
+        background: c.bg,
+        color: c.text,
+        overflow: "hidden",
+      }}
+    >
+      {/* Header */}
+      <div
+        style={{
+          display: "flex",
+          justifyContent: "space-between",
+          alignItems: "flex-end",
+          borderBottom: `1px solid ${c.border}`,
+          paddingBottom: 4,
+          width: "100%",
+        }}
+      >
+        <div>
+          <span
+            style={{
+              fontSize: 3.5,
+              textTransform: "uppercase",
+              color: c.muted,
+              letterSpacing: "0.04em",
+              display: "block",
+              marginBottom: 0.5,
+              fontWeight: 600,
+            }}
+          >
+            Workspace dashboard
+          </span>
+          <span
+            style={{
+              fontSize: 7.5,
+              fontWeight: 700,
+              letterSpacing: "-0.01em",
+              display: "block",
+              lineHeight: 1,
+            }}
+          >
+            Good afternoon, Mira
+          </span>
+          <span
+            style={{
+              fontSize: 4,
+              color: c.subtext,
+              display: "block",
+              marginTop: 1,
+            }}
+          >
+            3 deals moved stage today · 12 unread in Inbox · 1 task overdue
+          </span>
+        </div>
+        <div style={{ display: "flex", gap: 3, paddingBottom: 1 }}>
+          <div
+            style={{
+              width: 22,
+              height: 7,
+              borderRadius: 2,
+              background: c.panel,
+              border: `1px solid ${c.border}`,
+              display: "flex",
+              alignItems: "center",
+              paddingLeft: 2,
+            }}
+          >
+            <div
+              style={{ height: 2, width: 12, background: c.text, opacity: 0.6 }}
+            />
+          </div>
+          <div
+            style={{
+              width: 14,
+              height: 7,
+              borderRadius: 2,
+              background: c.panel,
+              border: `1px solid ${c.border}`,
+            }}
+          />
+          <div
+            style={{
+              width: 18,
+              height: 7,
+              borderRadius: 2,
+              background: isDark ? "#ffffff" : "#1a1a1a",
+            }}
+          />
+        </div>
+      </div>
+
+      {/* KPI Strip */}
+      <div
+        style={{
+          display: "grid",
+          gridTemplateColumns: "repeat(4, 1fr)",
+          gap: 4,
+        }}
+      >
+        {[
+          { l: "Revenue · MTD", v: "€286,420", d: "+18.4%", up: true },
+          { l: "Active deals", v: "168", d: "+12", up: true },
+          { l: "Win rate · 30d", v: "34.2%", d: "−1.1%", up: false },
+          { l: "Pipeline ratio", v: "4.8×", d: "healthy", up: true },
+        ].map((k, i) => (
+          <div
+            key={i}
+            style={{
+              padding: "4px 5px",
+              borderRadius: 4,
+              background: c.panel,
+              border: `1px solid ${c.border}`,
+            }}
+          >
+            <div
+              style={{
+                display: "flex",
+                justifyContent: "space-between",
+                alignItems: "baseline",
+                marginBottom: 2,
+              }}
+            >
+              <span style={{ fontSize: 4, color: c.muted, fontWeight: 500 }}>
+                {k.l}
+              </span>
+              <span
+                style={{
+                  fontSize: 3.5,
+                  color: k.up
+                    ? c.up
+                    : k.d.startsWith("−") || k.d.startsWith("-")
+                      ? c.down
+                      : c.up,
+                  fontWeight: 600,
+                }}
+              >
+                {k.d}
+              </span>
+            </div>
+            <div
+              style={{
+                fontSize: 8,
+                fontWeight: 700,
+                letterSpacing: "-0.01em",
+                fontVariantNumeric: "tabular-nums",
+              }}
+            >
+              {k.v}
+            </div>
+            <svg
+              viewBox="0 0 100 20"
+              style={{
+                width: "100%",
+                height: 5,
+                display: "block",
+                marginTop: 2,
+              }}
+              preserveAspectRatio="none"
+            >
+              <path
+                d={
+                  k.up
+                    ? "M0,15 L20,12 L40,14 L60,8 L80,10 L100,2"
+                    : "M0,2 L20,5 L40,4 L60,12 L80,14 L100,18"
+                }
+                fill="none"
+                stroke={k.up ? c.up : c.down}
+                strokeWidth="2"
+              />
+            </svg>
+          </div>
+        ))}
+      </div>
+
+      {/* Main Grid: charts, activity and leaderboards */}
+      <div
+        style={{
+          display: "grid",
+          gridTemplateColumns: "1.4fr 1fr",
+          gap: 5,
+          flex: 1,
+          minHeight: 0,
+        }}
+      >
+        {/* Left column: Daily Revenue Chart + Recent Activity */}
+        <div style={{ display: "flex", flexDirection: "column", gap: 5 }}>
+          {/* Revenue Daily Chart */}
+          <div
+            style={{
+              padding: 5,
+              borderRadius: 5,
+              background: c.panel,
+              border: `1px solid ${c.border}`,
+              display: "flex",
+              flexDirection: "column",
+              gap: 3,
+            }}
+          >
+            <span style={{ fontSize: 4.5, color: c.muted, fontWeight: 600 }}>
+              Revenue, daily
+            </span>
+            <div
+              style={{
+                display: "flex",
+                gap: 1.5,
+                alignItems: "flex-end",
+                height: 16,
+              }}
+            >
+              {[10, 16, 22, 18, 25, 8, 6, 14, 20, 26, 22, 28, 12, 10].map(
+                (h, idx) => (
+                  <div
+                    key={idx}
+                    style={{
+                      flex: 1,
+                      height: `${(h / 30) * 100}%`,
+                      background:
+                        idx === 11
+                          ? c.accent
+                          : isDark
+                            ? "rgba(255,255,255,0.08)"
+                            : "rgba(0,0,0,0.06)",
+                      borderRadius: 0.5,
+                    }}
+                  />
+                ),
+              )}
+            </div>
+          </div>
+
+          {/* Recent Activity Card */}
+          <div
+            style={{
+              flex: 1,
+              padding: 5,
+              borderRadius: 5,
+              background: c.panel,
+              border: `1px solid ${c.border}`,
+              display: "flex",
+              flexDirection: "column",
+              gap: 3,
+              overflow: "hidden",
+            }}
+          >
+            <span style={{ fontSize: 4.5, color: c.muted, fontWeight: 600 }}>
+              Recent activity
+            </span>
+            <div style={{ display: "flex", flexDirection: "column", gap: 2.5 }}>
+              {[
+                {
+                  av: "MR",
+                  col: "#d4b8a8",
+                  name: "Mira Reyes",
+                  action: "moved Q3 to ",
+                  highlight: "Negotiation",
+                  hlCol: c.accent,
+                },
+                {
+                  av: "TR",
+                  col: "#c2d3a8",
+                  name: "Theo Roux",
+                  action: "logged call with ",
+                  highlight: "Sun Kim",
+                  hlCol: c.text,
+                },
+                {
+                  av: "DP",
+                  col: "#b8d4e8",
+                  name: "Devi Patel",
+                  action: "closed ",
+                  highlight: "Halcyon",
+                  hlCol: c.text,
+                },
+              ].map((act, i) => (
+                <div
+                  key={i}
+                  style={{ display: "flex", gap: 4, alignItems: "center" }}
+                >
+                  <MiniAvatar text={act.av} color={act.col} />
+                  <div
+                    style={{
+                      display: "flex",
+                      flexDirection: "column",
+                      gap: 0.5,
+                    }}
+                  >
+                    <div
+                      style={{
+                        fontSize: 3.5,
+                        color: c.text,
+                        fontWeight: 500,
+                        lineHeight: 1,
+                      }}
+                    >
+                      {act.name}
+                    </div>
+                    <div
+                      style={{ fontSize: 3, color: c.subtext, lineHeight: 1 }}
+                    >
+                      {act.action}
+                      <span style={{ color: act.hlCol, fontWeight: 600 }}>
+                        {act.highlight}
+                      </span>
+                    </div>
+                  </div>
+                </div>
+              ))}
+            </div>
+          </div>
+        </div>
+
+        {/* Right column: Pipeline Funnel + Team leaderboard */}
+        <div style={{ display: "flex", flexDirection: "column", gap: 5 }}>
+          {/* Pipeline Funnel */}
+          <div
+            style={{
+              padding: 5,
+              borderRadius: 5,
+              background: c.panel,
+              border: `1px solid ${c.border}`,
+              display: "flex",
+              flexDirection: "column",
+              gap: 3,
+            }}
+          >
+            <span style={{ fontSize: 4.5, color: c.muted, fontWeight: 600 }}>
+              Pipeline funnel
+            </span>
+            <div style={{ display: "flex", flexDirection: "column", gap: 1.5 }}>
+              {[
+                { s: "New", w: "100%", col: "#5e5cff" },
+                { s: "Qual", w: "80%", col: "#6d5cff" },
+                { s: "Prop", w: "60%", col: "#7c5cff" },
+                { s: "Nego", w: "40%", col: "#8c5cff" },
+                { s: "Won", w: "20%", col: "#22c55e" },
+              ].map((f, i) => (
+                <div
+                  key={i}
+                  style={{ display: "flex", alignItems: "center", gap: 4 }}
+                >
+                  <span
+                    style={{
+                      fontSize: 3.5,
+                      color: c.muted,
+                      width: 12,
+                      textAlign: "right",
+                      whiteSpace: "nowrap",
+                    }}
+                  >
+                    {f.s}
+                  </span>
+                  <div
+                    style={{
+                      flex: 1,
+                      height: 3,
+                      background: isDark
+                        ? "rgba(255,255,255,0.03)"
+                        : "rgba(0,0,0,0.03)",
+                      borderRadius: 1,
+                      overflow: "hidden",
+                    }}
+                  >
+                    <div
+                      style={{
+                        width: f.w,
+                        height: "100%",
+                        background: f.col,
+                        borderRadius: 1,
+                      }}
+                    />
+                  </div>
+                </div>
+              ))}
+            </div>
+          </div>
+
+          {/* Team Leaders Card */}
+          <div
+            style={{
+              flex: 1,
+              padding: 5,
+              borderRadius: 5,
+              background: c.panel,
+              border: `1px solid ${c.border}`,
+              display: "flex",
+              flexDirection: "column",
+              gap: 3,
+              overflow: "hidden",
+            }}
+          >
+            <span style={{ fontSize: 4.5, color: c.muted, fontWeight: 600 }}>
+              Team · this month
+            </span>
+            <div
+              style={{
+                display: "flex",
+                flexDirection: "column",
+                gap: 3,
+                justifyContent: "center",
+                flex: 1,
+              }}
+            >
+              {[
+                { av: "MR", col: "#d4b8a8", name: "Mira Reyes", val: "€124k" },
+                { av: "DP", col: "#b8d4e8", name: "Devi Patel", val: "€86k" },
+                { av: "TR", col: "#c2d3a8", name: "Theo Roux", val: "€62k" },
+              ].map((team, i) => (
+                <div
+                  key={i}
+                  style={{ display: "flex", alignItems: "center", gap: 4 }}
+                >
+                  <MiniAvatar text={team.av} color={team.col} />
+                  <div
+                    style={{
+                      display: "flex",
+                      flexDirection: "column",
+                      gap: 1,
+                      flex: 1,
+                    }}
+                  >
+                    <div
+                      style={{
+                        display: "flex",
+                        justifyContent: "space-between",
+                        alignItems: "baseline",
+                      }}
+                    >
+                      <span
+                        style={{
+                          fontSize: 3.5,
+                          color: c.text,
+                          fontWeight: 500,
+                        }}
+                      >
+                        {team.name}
+                      </span>
+                      <span
+                        style={{
+                          fontSize: 3.5,
+                          color: c.muted,
+                          fontWeight: 600,
+                        }}
+                      >
+                        {team.val}
+                      </span>
+                    </div>
+                    <div
+                      style={{
+                        width: "100%",
+                        height: 2,
+                        background: isDark
+                          ? "rgba(255,255,255,0.03)"
+                          : "rgba(0,0,0,0.03)",
+                        borderRadius: 1,
+                        overflow: "hidden",
+                      }}
+                    >
+                      <div
+                        style={{
+                          width: i === 0 ? "80%" : i === 1 ? "55%" : "40%",
+                          height: "100%",
+                          background: c.accent,
+                          opacity: 0.8,
+                        }}
+                      />
+                    </div>
+                  </div>
+                </div>
+              ))}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+
   let content;
   if (styleId === "sidebar") {
     // Left-side menu column + main dashboard area — Light/Minimal CRM theme (Screen 3)
@@ -204,7 +738,7 @@ function LayoutPreview({ styleId }: { styleId: string }) {
         {/* Sidebar */}
         <div
           style={{
-            width: 42,
+            width: 52,
             borderRight: "1px solid #eae6de",
             padding: "8px 6px",
             display: "flex",
@@ -213,162 +747,187 @@ function LayoutPreview({ styleId }: { styleId: string }) {
             background: "#f5f4ef",
           }}
         >
-          {/* Logo */}
-          <div style={{ display: "flex", gap: 4, alignItems: "center" }}>
+          {/* Logo / Workspace Selector */}
+          <div
+            style={{
+              display: "flex",
+              gap: 3,
+              alignItems: "center",
+              borderBottom: "1px solid #eae6de",
+              paddingBottom: 4,
+            }}
+          >
             <div
               style={{
                 width: 10,
                 height: 10,
-                borderRadius: 3,
+                borderRadius: 2.5,
                 background: accentColor,
                 opacity: 0.9,
               }}
             />
-            {wireLine(18, 0.55)}
+            <div style={{ display: "flex", flexDirection: "column", gap: 1 }}>
+              <span
+                style={{
+                  fontSize: 4.5,
+                  fontWeight: 700,
+                  color: "#1a1a1a",
+                  letterSpacing: "-0.01em",
+                  lineHeight: 1,
+                }}
+              >
+                Lattice Studio
+              </span>
+              <span
+                style={{ fontSize: 3, color: "var(--fg-mute)", lineHeight: 1 }}
+              >
+                Free · 4 members
+              </span>
+            </div>
           </div>
           {/* Mini Search box */}
           <div
             style={{
               width: "100%",
               height: 8,
-              borderRadius: 3,
+              borderRadius: 2,
               border: "1px solid #eae6de",
               background: "#fff",
+              display: "flex",
+              alignItems: "center",
+              paddingLeft: 3,
             }}
-          />
-          {/* Menu items */}
+          >
+            {wireLine(16, 0.15)}
+          </div>
+          {/* Menu Sections (VIEWS, TOOLS, ADMIN) */}
           <div
             style={{
               display: "flex",
               flexDirection: "column",
-              gap: 4,
-              marginTop: 4,
+              gap: 5,
+              marginTop: 2,
             }}
           >
-            {wireLine(24, 0.45)}
-            {wireLine(20, 0.3)}
-            {wireLine(26, 0.3)}
-          </div>
-        </div>
-        {/* Main Dashboard (Light) */}
-        <div
-          style={{
-            flex: 1,
-            padding: 8,
-            display: "flex",
-            flexDirection: "column",
-            gap: 6,
-          }}
-        >
-          {/* Header */}
-          <div
-            style={{
-              display: "flex",
-              justifyContent: "space-between",
-              alignItems: "center",
-            }}
-          >
-            {wireLine(36, 0.65)}
-            <div
-              style={{
-                width: 10,
-                height: 10,
-                borderRadius: "50%",
-                background: "rgba(0,0,0,0.12)",
-              }}
-            />
-          </div>
-          {/* 4 Mini Cards Grid */}
-          <div
-            style={{
-              display: "grid",
-              gridTemplateColumns: "repeat(4, 1fr)",
-              gap: 4,
-            }}
-          >
-            {[1, 2, 3, 4].map((i) => (
-              <div
-                key={i}
-                style={{
-                  border: "1px solid #eae6de",
-                  borderRadius: 4,
-                  padding: "4px 6px",
-                  display: "flex",
-                  flexDirection: "column",
-                  gap: 2,
-                  background: "#fff",
-                }}
-              >
-                {wireLine("50%", 0.3)}
+            {/* Standard Links */}
+            <div style={{ display: "flex", flexDirection: "column", gap: 2 }}>
+              <div style={{ display: "flex", gap: 3, alignItems: "center" }}>
                 <div
                   style={{
-                    height: 2,
-                    width: "100%",
-                    background:
-                      i === 3 ? "oklch(0.65 0.18 25)" : "oklch(0.78 0.16 155)",
-                    opacity: 0.6,
+                    width: 4,
+                    height: 4,
+                    borderRadius: "50%",
+                    background: accentColor,
                   }}
                 />
+                {wireLine(12, 0.55)}
               </div>
-            ))}
-          </div>
-          {/* Charts/Table Row */}
-          <div style={{ display: "flex", gap: 6, flex: 1 }}>
-            <div
-              style={{
-                flex: 1.5,
-                border: "1px solid #eae6de",
-                borderRadius: 5,
-                padding: 6,
-                display: "flex",
-                flexDirection: "column",
-                gap: 4,
-                background: "#ffffff",
-              }}
-            >
-              {wireLine("40%", 0.4)}
-              {/* Simulated bars */}
               <div
                 style={{
                   display: "flex",
                   gap: 3,
-                  alignItems: "flex-end",
-                  flex: 1,
-                  paddingTop: 4,
+                  alignItems: "center",
+                  paddingLeft: 4,
                 }}
               >
-                {[6, 12, 10, 16, 20, 14, 8].map((h, idx) => (
-                  <div
-                    key={idx}
-                    style={{
-                      flex: 1,
-                      height: h,
-                      background:
-                        idx === 4 ? "oklch(0.6 0.18 250)" : "rgba(0,0,0,0.06)",
-                      borderRadius: 1,
-                    }}
-                  />
-                ))}
+                {wireLine(14, 0.35)}
+              </div>
+              <div
+                style={{
+                  display: "flex",
+                  gap: 3,
+                  alignItems: "center",
+                  paddingLeft: 4,
+                }}
+              >
+                {wireLine(16, 0.35)}
               </div>
             </div>
-            <div
-              style={{
-                flex: 1,
-                border: "1px solid #eae6de",
-                borderRadius: 5,
-                background: "#ffffff",
-                padding: 6,
-                display: "flex",
-                flexDirection: "column",
-                gap: 4,
-              }}
-            >
-              {wireLine("70%", 0.4)}
-              {wireLine("100%", 0.15)}
-              {wireLine("90%", 0.15)}
+
+            {/* Views */}
+            <div style={{ display: "flex", flexDirection: "column", gap: 2 }}>
+              <span
+                style={{
+                  fontSize: 3.5,
+                  color: c.muted,
+                  fontWeight: 600,
+                  letterSpacing: "0.04em",
+                  textTransform: "uppercase",
+                }}
+              >
+                VIEWS
+              </span>
+              {["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={{
+                  fontSize: 3.5,
+                  color: c.muted,
+                  fontWeight: 600,
+                  letterSpacing: "0.04em",
+                  textTransform: "uppercase",
+                }}
+              >
+                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>
+
+            {/* Admin */}
+            <div style={{ display: "flex", flexDirection: "column", gap: 2 }}>
+              <span
+                style={{
+                  fontSize: 3.5,
+                  color: c.muted,
+                  fontWeight: 600,
+                  letterSpacing: "0.04em",
+                  textTransform: "uppercase",
+                }}
+              >
+                ADMIN
+              </span>
+              <div
+                style={{
+                  display: "flex",
+                  gap: 3,
+                  alignItems: "center",
+                  paddingLeft: 4,
+                }}
+              >
+                {wireLine(18, 0.35)}
+              </div>
             </div>
           </div>
         </div>
+        {/* Main Dashboard (Light) */}
+        {renderDashboardMockup()}
       </div>
     );
   } else if (styleId === "topbar") {
@@ -388,7 +947,7 @@ function LayoutPreview({ styleId }: { styleId: string }) {
           style={{
             height: 20,
             borderBottom: "1px solid rgba(255,255,255,0.08)",
-            padding: "0 8px",
+            padding: "0 10px",
             display: "flex",
             alignItems: "center",
             justifyContent: "space-between",
@@ -405,17 +964,56 @@ function LayoutPreview({ styleId }: { styleId: string }) {
                 opacity: 0.9,
               }}
             />
-            <div
-              style={{ height: 3, width: 14, background: "#fff", opacity: 0.8 }}
-            />
-            <div
-              style={{ height: 3, width: 12, background: "#fff", opacity: 0.4 }}
-            />
+            <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: 44,
+              width: 56,
               height: 10,
               borderRadius: 4,
               border: "1px solid rgba(255,255,255,0.15)",
@@ -428,7 +1026,7 @@ function LayoutPreview({ styleId }: { styleId: string }) {
             <div
               style={{
                 height: 2,
-                width: 10,
+                width: 22,
                 background: "#fff",
                 opacity: 0.25,
               }}
@@ -443,17 +1041,97 @@ function LayoutPreview({ styleId }: { styleId: string }) {
             }}
           />
         </div>
-        {/* Light Dashboard below */}
+
+        {/* Page tabs secondary bar */}
         <div
           style={{
-            flex: 1,
-            padding: 8,
+            height: 14,
+            background: "#1a1918",
+            borderBottom: "1px solid rgba(255,255,255,0.04)",
+            padding: "0 10px",
             display: "flex",
-            flexDirection: "column",
-            gap: 6,
+            alignItems: "center",
+            gap: 10,
           }}
         >
-          {/* Header */}
+          {["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>
+
+        {/* Light Dashboard below */}
+        {renderDashboardMockup()}
+      </div>
+    );
+  } else if (styleId === "rail") {
+    // Icon rail + secondary vertical list panel — Complete Dark-mode Dashboard (Screen 1)
+    content = (
+      <div
+        style={{
+          display: "flex",
+          width: "100%",
+          height: "100%",
+          background: "#0e0f12",
+        }}
+      >
+        {/* Far-left Icon Rail (Black) */}
+        <div
+          style={{
+            width: 18,
+            borderRight: "1px solid rgba(255,255,255,0.08)",
+            padding: "8px 0",
+            display: "flex",
+            flexDirection: "column",
+            alignItems: "center",
+            gap: 6,
+            background: "#121110",
+          }}
+        >
+          <div
+            style={{
+              width: 10,
+              height: 10,
+              borderRadius: 3,
+              background: accentColor,
+              opacity: 0.9,
+            }}
+          />
+          {[1, 2, 3, 4].map((i) => (
+            <div
+              key={i}
+              style={{
+                width: 8,
+                height: 8,
+                borderRadius: 2,
+                background: "rgba(255,255,255,0.18)",
+              }}
+            />
+          ))}
+        </div>
+        {/* Secondary List Panel (Dark) */}
+        <div
+          style={{
+            width: 52,
+            borderRight: "1px solid rgba(255,255,255,0.08)",
+            padding: "8px 6px",
+            display: "flex",
+            flexDirection: "column",
+            gap: 5,
+            background: "#1a1918",
+          }}
+        >
+          {/* Group Header */}
           <div
             style={{
               display: "flex",
@@ -461,100 +1139,49 @@ function LayoutPreview({ styleId }: { styleId: string }) {
               alignItems: "center",
             }}
           >
-            {wireLine(36, 0.65)}
-            {wireLine(24, 0.35)}
+            <span
+              style={{
+                fontSize: 3.5,
+                color: c.muted,
+                fontWeight: 600,
+                letterSpacing: "0.04em",
+                textTransform: "uppercase",
+              }}
+            >
+              MY DASHBOARDS
+            </span>
           </div>
-          {/* 4 Mini Cards Grid */}
-          <div
-            style={{
-              display: "grid",
-              gridTemplateColumns: "repeat(4, 1fr)",
-              gap: 4,
-            }}
-          >
-            {[1, 2, 3, 4].map((i) => (
+          {/* Active lists */}
+          <div style={{ display: "flex", flexDirection: "column", gap: 3.5 }}>
+            {[
+              { n: "Workspace overview", s: "default", active: true },
+              { n: "Revenue · weekly", s: "shared by Theo" },
+              { n: "Pipeline health", s: "auto-refresh" },
+              { n: "Team performance", s: "private" },
+            ].map((dash, idx) => (
               <div
-                key={i}
-                style={{
-                  border: "1px solid #eae6de",
-                  borderRadius: 4,
-                  padding: "4px 6px",
-                  display: "flex",
-                  flexDirection: "column",
-                  gap: 2,
-                  background: "#fff",
-                }}
+                key={idx}
+                style={{ display: "flex", flexDirection: "column", gap: 1 }}
               >
-                {wireLine("50%", 0.3)}
-                <div
+                <span
                   style={{
-                    height: 2,
-                    width: "100%",
-                    background:
-                      i === 3 ? "oklch(0.65 0.18 25)" : "oklch(0.78 0.16 155)",
-                    opacity: 0.6,
+                    fontSize: 4,
+                    color: dash.active ? "#fff" : c.subtext,
+                    fontWeight: dash.active ? 600 : 400,
                   }}
-                />
+                >
+                  {dash.n}
+                </span>
+                <span style={{ fontSize: 3, color: c.muted }}>{dash.s}</span>
               </div>
             ))}
           </div>
-          {/* Charts Row */}
-          <div style={{ display: "flex", gap: 6, flex: 1 }}>
-            <div
-              style={{
-                flex: 1.5,
-                border: "1px solid #eae6de",
-                borderRadius: 5,
-                padding: 6,
-                display: "flex",
-                flexDirection: "column",
-                gap: 4,
-                background: "#ffffff",
-              }}
-            >
-              <div
-                style={{
-                  display: "flex",
-                  gap: 3,
-                  alignItems: "flex-end",
-                  flex: 1,
-                  paddingTop: 4,
-                }}
-              >
-                {[6, 12, 10, 16, 20, 14, 8].map((h, idx) => (
-                  <div
-                    key={idx}
-                    style={{
-                      flex: 1,
-                      height: h,
-                      background:
-                        idx === 4 ? "oklch(0.6 0.18 250)" : "rgba(0,0,0,0.06)",
-                      borderRadius: 1,
-                    }}
-                  />
-                ))}
-              </div>
-            </div>
-            <div
-              style={{
-                flex: 1,
-                border: "1px solid #eae6de",
-                borderRadius: 5,
-                background: "#ffffff",
-                padding: 6,
-                display: "flex",
-                flexDirection: "column",
-                gap: 4,
-              }}
-            >
-              {wireLine("70%", 0.4)}
-              {wireLine("100%", 0.15)}
-            </div>
-          </div>
         </div>
+        {/* Main Content Area (Dark) */}
+        {renderDashboardMockup()}
       </div>
     );
-  } else if (styleId === "rail") {
+  } else if (styleId === "flux") {
     // Icon rail + secondary vertical list panel — Complete Dark-mode Dashboard (Screen 1)
     content = (
       <div