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 6bfaa54b..8231b5d5 100644
--- a/vibn-frontend/app/[workspace]/project/[projectId]/(home)/code/page.tsx
+++ b/vibn-frontend/app/[workspace]/project/[projectId]/(home)/code/page.tsx
@@ -58,142 +58,170 @@ export default function CodeTab() {
     >
       <div style={{ maxWidth: 1400, margin: "0 auto" }}>
         <PageHeader title="Codebase" />
-        <div style={grid}>
-          {/* ── Left rail ── */}
-          <section style={leftCol}>
-            {showLoading && (
-              <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 && (
-              <Card>
-                <div
-                  style={{
-                    display: "flex",
-                    alignItems: "center",
-                    gap: 8,
-                    color: THEME.danger,
-                    fontSize: "0.875rem",
-                  }}
-                >
-                  <AlertCircle size={15} /> {error}
-                </div>
-              </Card>
-            )}
+        <Card
+          padding={0}
+          style={{
+            overflow: "hidden",
+            display: "flex",
+            flexDirection: "column",
+            minHeight: "calc(100vh - 150px)",
+          }}
+        >
+          <div style={grid}>
+            {/* ── Left rail ── */}
+            <section style={leftCol}>
+              {showLoading && (
+                <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 && (
+                <Card>
+                  <div
+                    style={{
+                      display: "flex",
+                      alignItems: "center",
+                      gap: 8,
+                      color: THEME.danger,
+                      fontSize: "0.875rem",
+                    }}
+                  >
+                    <AlertCircle size={15} /> {error}
+                  </div>
+                </Card>
+              )}
 
-            {anatomy && (
-              <>
-                {/* Code Files */}
-                <RailGroup title="Code files" count={codebases?.length ?? 0}>
-                  {codebases && codebases.length === 0 && (
-                    <RailEmpty>
-                      {reason === "no_repo" ? (
-                        <>
-                          No codebase yet.{" "}
-                          <span style={nudge}>
-                            Try: &quot;Start building my app&quot;
-                          </span>
-                        </>
-                      ) : (
-                        <>
-                          Repo is empty — push a first commit.{" "}
-                          <span style={nudge}>
-                            Try: &quot;Scaffold a Next.js app&quot;
-                          </span>
-                        </>
-                      )}
-                    </RailEmpty>
-                  )}
-                  {codebases?.map((cb) => {
-                    return (
-                      <article key={cb.id} style={codebaseTile}>
-                        <div style={tileHeader}>
-                          <span style={chevronCell}>
-                            <ChevronDown
-                              size={13}
-                              style={{ color: THEME.mid }}
+              {anatomy && (
+                <>
+                  {/* Code Files */}
+                  <RailGroup title="Code files" count={codebases?.length ?? 0}>
+                    {codebases && codebases.length === 0 && (
+                      <RailEmpty>
+                        {reason === "no_repo" ? (
+                          <>
+                            No codebase yet.{" "}
+                            <span style={nudge}>
+                              Try: &quot;Start building my app&quot;
+                            </span>
+                          </>
+                        ) : (
+                          <>
+                            Repo is empty — push a first commit.{" "}
+                            <span style={nudge}>
+                              Try: &quot;Scaffold a Next.js app&quot;
+                            </span>
+                          </>
+                        )}
+                      </RailEmpty>
+                    )}
+                    {codebases?.map((cb) => {
+                      return (
+                        <article
+                          key={cb.id}
+                          style={{
+                            display: "flex",
+                            flexDirection: "column",
+                            flex: 1,
+                          }}
+                        >
+                          <div
+                            style={{ ...tileHeader, padding: "20px 24px 12px" }}
+                          >
+                            <span style={chevronCell}>
+                              <ChevronDown
+                                size={13}
+                                style={{ color: THEME.mid }}
+                              />
+                            </span>
+                            <Box
+                              size={14}
+                              style={{ color: THEME.mid, flexShrink: 0 }}
                             />
-                          </span>
-                          <Box
-                            size={13}
-                            style={{ color: THEME.mid, flexShrink: 0 }}
-                          />
-                          <div style={{ minWidth: 0, textAlign: "left" }}>
-                            <div style={tileLabel}>{cb.label}</div>
-                            {cb.hint && <div style={tileHint}>{cb.hint}</div>}
+                            <div style={{ minWidth: 0, textAlign: "left" }}>
+                              <div
+                                style={{
+                                  fontSize: "0.95rem",
+                                  fontWeight: 600,
+                                  color: THEME.ink,
+                                }}
+                              >
+                                {cb.label}
+                              </div>
+                              {cb.hint && <div style={tileHint}>{cb.hint}</div>}
+                            </div>
                           </div>
-                        </div>
-                        <div style={tileBody}>
-                          <GiteaFileTree
-                            projectId={projectId}
-                            rootPath={cb.path}
-                            selectedPath={
-                              selection?.type === "file" &&
-                              selection.codebaseId === cb.id
-                                ? selection.path
-                                : undefined
-                            }
-                            onSelectFile={(p) =>
-                              setSelection({
-                                type: "file",
-                                codebaseId: cb.id,
-                                path: p,
-                              })
-                            }
-                          />
-                        </div>
-                      </article>
-                    );
-                  })}
-                </RailGroup>
-              </>
-            )}
-          </section>
+                          <div style={{ padding: "0 10px 24px 10px" }}>
+                            <GiteaFileTree
+                              projectId={projectId}
+                              rootPath={cb.path}
+                              selectedPath={
+                                selection?.type === "file" &&
+                                selection.codebaseId === cb.id
+                                  ? selection.path
+                                  : undefined
+                              }
+                              onSelectFile={(p) =>
+                                setSelection({
+                                  type: "file",
+                                  codebaseId: cb.id,
+                                  path: p,
+                                })
+                              }
+                            />
+                          </div>
+                        </article>
+                      );
+                    })}
+                  </RailGroup>
+                </>
+              )}
+            </section>
 
-          {/* ── Right pane ── */}
-          <aside style={rightCol}>
-            <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>
+            {/* ── Right pane ── */}
+            <aside style={rightCol}>
+              <div
+                style={{
+                  flex: 1,
+                  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>
+                )}
+              </div>
+            </aside>
+          </div>
+        </Card>
       </div>
     </div>
   );
@@ -326,18 +354,19 @@ const pageWrap: React.CSSProperties = {
 };
 const grid: React.CSSProperties = {
   display: "grid",
-  gridTemplateColumns: "minmax(280px, 360px) minmax(0, 1fr)",
-  gap: 28,
-  maxWidth: 1400,
-  margin: "0 auto",
+  gridTemplateColumns: "300px minmax(0, 1fr)",
   alignItems: "stretch",
 };
+
 const leftCol: React.CSSProperties = {
   minWidth: 0,
   display: "flex",
   flexDirection: "column",
-  gap: 18,
+  gap: 24,
+  borderRight: `1px solid ${THEME.borderSoft}`,
+  paddingRight: 24,
 };
+
 const rightCol: React.CSSProperties = {
   minWidth: 0,
   display: "flex",