diff --git a/vibn-frontend/app/[workspace]/project/[projectId]/(home)/code/page.tsx b/vibn-frontend/app/[workspace]/project/[projectId]/(home)/code/page.tsx
index b95c3951..10a10887 100644
--- a/vibn-frontend/app/[workspace]/project/[projectId]/(home)/code/page.tsx
+++ b/vibn-frontend/app/[workspace]/project/[projectId]/(home)/code/page.tsx
@@ -13,6 +13,7 @@ import {
 } from "lucide-react";
 import { GiteaFileTree } from "@/components/project/gitea-file-tree";
 import { GiteaFileViewer } from "@/components/project/gitea-file-viewer";
+import { THEME, PageHeader, Card } from "@/components/project/dashboard-ui";
 import { useAnatomy, type Anatomy } from "@/components/project/use-anatomy";
 
 /**
@@ -47,20 +48,26 @@ export default function CodeTab() {
   const showLoading = loading && !anatomy;
 
   return (
-    <div style={pageWrap}>
+    <div style={{ minHeight: "100vh", background: THEME.canvasGradient, fontFamily: THEME.font, padding: "36px 48px" }}>
+      <div style={{ maxWidth: 1400, margin: "0 auto" }}>
+        <PageHeader title="Codebase" subtitle="Explore the repository files for your application." />
       <div style={grid}>
         {/* ── Left rail ── */}
         <section style={leftCol}>
           {showLoading && (
-            <Inline>
-              <Loader2 size={13} className="animate-spin" /> Loading…
-            </Inline>
-          )}
+              <Card>
+                <div style={{ display: "flex", alignItems: "center", gap: 8, color: THEME.mid, fontSize: "0.875rem" }}>
+                  <Loader2 size={15} className="animate-spin" /> Loading…
+                </div>
+              </Card>
+            )}
           {error && !showLoading && (
-            <Inline>
-              <AlertCircle size={13} /> {error}
-            </Inline>
-          )}
+              <Card>
+                <div style={{ display: "flex", alignItems: "center", gap: 8, color: THEME.danger, fontSize: "0.875rem" }}>
+                  <AlertCircle size={15} /> {error}
+                </div>
+              </Card>
+            )}
 
           {anatomy && (
             <>
@@ -90,11 +97,11 @@ export default function CodeTab() {
                     <article key={cb.id} style={codebaseTile}>
                       <div style={tileHeader}>
                         <span style={chevronCell}>
-                          <ChevronDown size={13} style={{ color: INK.mid }} />
+                          <ChevronDown size={13} style={{ color: THEME.mid }} />
                         </span>
                         <Box
                           size={13}
-                          style={{ color: INK.mid, flexShrink: 0 }}
+                          style={{ color: THEME.mid, flexShrink: 0 }}
                         />
                         <div style={{ minWidth: 0, textAlign: "left" }}>
                           <div style={tileLabel}>{cb.label}</div>
@@ -130,14 +137,26 @@ export default function CodeTab() {
 
         {/* ── Right pane ── */}
         <aside style={rightCol}>
-          <h3 style={heading}>{paneHeading(selection)}</h3>
-          <div style={panel}>
-            {selection?.type === "file" && (
-              <GiteaFileViewer projectId={projectId} path={selection.path} />
-            )}
-            {!selection && <Empty>Pick a codebase file on the left.</Empty>}
-          </div>
-        </aside>
+            <Card
+              padding={0}
+              style={{
+                flex: 1,
+                minHeight: "calc(100vh - 150px)",
+                display: "flex",
+                flexDirection: "column",
+              }}
+            >
+              {selection?.type === "file" && (
+                <GiteaFileViewer projectId={projectId} path={selection.path} />
+              )}
+              {!selection && (
+                <div style={{ flex: 1, display: "flex", alignItems: "center", justifyContent: "center", color: THEME.muted, fontSize: "0.85rem", padding: "32px 16px", textAlign: "center" }}>
+                  Pick a codebase file on the left.
+                </div>
+              )}
+            </Card>
+          </aside>
+      </div>
       </div>
     </div>
   );
@@ -208,9 +227,9 @@ function Inline({ children }: { children: React.ReactNode }) {
         gap: 8,
         padding: "12px 14px",
         fontSize: "0.82rem",
-        color: INK.mid,
-        background: INK.cardBg,
-        border: `1px solid ${INK.borderSoft}`,
+        color: THEME.mid,
+        background: THEME.cardBg,
+        border: `1px solid ${THEME.borderSoft}`,
         borderRadius: 8,
       }}
     >
@@ -227,7 +246,7 @@ function Empty({ children }: { children: React.ReactNode }) {
         display: "flex",
         alignItems: "center",
         justifyContent: "center",
-        color: INK.mid,
+        color: THEME.mid,
         fontSize: "0.85rem",
         padding: "32px 16px",
         textAlign: "center",
@@ -263,7 +282,7 @@ function statusColor(status: string) {
 // Tokens
 // ──────────────────────────────────────────────────
 
-const INK = {
+const THEME = {
   ink: "#111827",
   mid: "#4b5563",
   muted: "#9ca3af",
@@ -275,8 +294,8 @@ const INK = {
 
 const pageWrap: React.CSSProperties = {
   padding: "28px 48px 48px",
-  fontFamily: INK.fontSans,
-  color: INK.ink,
+  fontFamily: THEME.fontSans,
+  color: THEME.ink,
 };
 const grid: React.CSSProperties = {
   display: "grid",
@@ -321,7 +340,7 @@ const railGroupTitle: React.CSSProperties = {
 const countPill: React.CSSProperties = {
   fontSize: "0.7rem",
   fontWeight: 600,
-  color: INK.mid,
+  color: THEME.mid,
   padding: "1px 7px",
   borderRadius: 999,
   background: "#f3eee4",
@@ -334,8 +353,8 @@ const railItems: React.CSSProperties = {
 const railEmpty: React.CSSProperties = {
   padding: "10px 12px",
   fontSize: "0.74rem",
-  color: INK.muted,
-  border: `1px dashed ${INK.borderSoft}`,
+  color: THEME.muted,
+  border: `1px dashed ${THEME.borderSoft}`,
   borderRadius: 8,
   lineHeight: 1.6,
 };
@@ -355,8 +374,8 @@ const flatTile: React.CSSProperties = {
   gap: 10,
   width: "100%",
   padding: "12px 14px",
-  background: INK.cardBg,
-  border: `1px solid ${INK.borderSoft}`,
+  background: THEME.cardBg,
+  border: `1px solid ${THEME.borderSoft}`,
   borderRadius: 10,
   cursor: "pointer",
   font: "inherit",
@@ -364,8 +383,8 @@ const flatTile: React.CSSProperties = {
   transition: "border-color 0.12s, background 0.12s, box-shadow 0.12s",
 };
 const codebaseTile: React.CSSProperties = {
-  background: INK.cardBg,
-  border: `1px solid ${INK.borderSoft}`,
+  background: THEME.cardBg,
+  border: `1px solid ${THEME.borderSoft}`,
   borderRadius: 10,
   overflow: "hidden",
 };
@@ -383,17 +402,17 @@ const tileHeader: React.CSSProperties = {
 const tileLabel: React.CSSProperties = {
   fontSize: "0.85rem",
   fontWeight: 600,
-  color: INK.ink,
+  color: THEME.ink,
   marginBottom: 2,
 };
 const tileHint: React.CSSProperties = {
   fontSize: "0.74rem",
-  color: INK.mid,
+  color: THEME.mid,
   lineHeight: 1.4,
 };
 const tileBody: React.CSSProperties = {
   padding: "8px 10px 12px",
-  borderTop: `1px solid ${INK.borderSoft}`,
+  borderTop: `1px solid ${THEME.borderSoft}`,
 };
 const chevronCell: React.CSSProperties = {
   width: 14,
@@ -403,8 +422,8 @@ const chevronCell: React.CSSProperties = {
   flexShrink: 0,
 };
 const panel: React.CSSProperties = {
-  background: INK.cardBg,
-  border: `1px solid ${INK.border}`,
+  background: THEME.cardBg,
+  border: `1px solid ${THEME.border}`,
   borderRadius: 10,
   padding: 16,
   flex: 1,
@@ -417,22 +436,22 @@ const detailRow: React.CSSProperties = {
   alignItems: "center",
   justifyContent: "space-between",
   padding: "12px 4px",
-  borderBottom: `1px solid ${INK.borderSoft}`,
+  borderBottom: `1px solid ${THEME.borderSoft}`,
 };
 const detailLabel: React.CSSProperties = {
   fontSize: "0.72rem",
   fontWeight: 600,
   letterSpacing: "0.06em",
   textTransform: "uppercase",
-  color: INK.muted,
+  color: THEME.muted,
 };
 const detailValue: React.CSSProperties = {
   fontSize: "0.85rem",
-  color: INK.ink,
+  color: THEME.ink,
   display: "inline-flex",
   alignItems: "center",
 };
 const detailLink: React.CSSProperties = {
-  color: INK.ink,
+  color: THEME.ink,
   textDecoration: "underline",
 };