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 51028226..752e92da 100644
--- a/vibn-frontend/app/[workspace]/project/[projectId]/(home)/code/page.tsx
+++ b/vibn-frontend/app/[workspace]/project/[projectId]/(home)/code/page.tsx
@@ -50,205 +50,192 @@ export default function CodeTab() {
   return (
     <div
       style={{
-        minHeight: "100vh",
+        height: "100vh",
         background: THEME.canvasGradient,
         fontFamily: THEME.font,
-        padding: "24px",
+        padding: "16px",
+        display: "flex",
+        flexDirection: "column",
       }}
     >
-      <div
+      <Card
+        padding={0}
         style={{
-          maxWidth: "100%",
-          margin: "0 auto",
-          height: "calc(100vh - 48px)",
+          display: "flex",
+          flexDirection: "column",
+          flex: 1,
+          minHeight: 0,
         }}
       >
-        <Card
-          padding={0}
-          style={{
-            overflow: "hidden",
-            display: "flex",
-            flexDirection: "column",
-            height: "100%",
-          }}
-        >
-          <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>
-              )}
+        <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={
-                      codebases?.length === 1
-                        ? codebases[0].label
-                        : "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,
-                          }}
-                        >
-                          {codebases.length > 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 }}
-                              />
-                              <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>
-                          )}
+            {anatomy && (
+              <>
+                {/* Code Files */}
+                <RailGroup
+                  title={
+                    codebases?.length === 1 ? codebases[0].label : "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,
+                        }}
+                      >
+                        {codebases.length > 1 && (
                           <div
                             style={{
-                              padding:
-                                codebases.length > 1
-                                  ? "0 10px 24px 10px"
-                                  : "10px 10px 24px 10px",
+                              ...tileHeader,
+                              padding: "16px 20px 8px",
                             }}
                           >
-                            <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,
-                                })
-                              }
+                            <span style={chevronCell}>
+                              <ChevronDown
+                                size={13}
+                                style={{ color: THEME.mid }}
+                              />
+                            </span>
+                            <Box
+                              size={14}
+                              style={{ color: THEME.mid, flexShrink: 0 }}
                             />
+                            <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>
-                        </article>
-                      );
-                    })}
-                  </RailGroup>
-                </>
-              )}
-            </section>
+                        )}
+                        <div
+                          style={{
+                            padding:
+                              codebases.length > 1
+                                ? "0 8px 16px 8px"
+                                : "12px 8px 16px 8px",
+                          }}
+                        >
+                          <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}>
-              <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>
+          {/* ── 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>
   );
 }
@@ -390,9 +377,7 @@ const leftCol: React.CSSProperties = {
   minWidth: 0,
   display: "flex",
   flexDirection: "column",
-  gap: 24,
   borderRight: `1px solid ${THEME.borderSoft}`,
-  padding: "20px",
   overflowY: "auto",
 };
 
diff --git a/vibn-frontend/components/project/gitea-file-viewer.tsx b/vibn-frontend/components/project/gitea-file-viewer.tsx
index 5c61bdb9..941cc720 100644
--- a/vibn-frontend/components/project/gitea-file-viewer.tsx
+++ b/vibn-frontend/components/project/gitea-file-viewer.tsx
@@ -144,10 +144,6 @@ export function GiteaFileViewer({ projectId, path }: GiteaFileViewerProps) {
         minHeight: 0,
         position: "relative",
         background: THEME.cardBg,
-        border: `1px solid ${THEME.border}`,
-        borderRadius: THEME.radiusSm,
-        boxShadow: THEME.shadow,
-        overflow: "hidden",
       }}
     >
       <div
@@ -155,20 +151,19 @@ export function GiteaFileViewer({ projectId, path }: GiteaFileViewerProps) {
           display: "flex",
           justifyContent: "space-between",
           alignItems: "center",
-          padding: "8px 12px",
+          padding: "10px 16px",
           background: THEME.subtleBg,
           borderBottom: `1px solid ${THEME.borderSoft}`,
         }}
       >
         <div
           style={{
-            fontSize: "0.8rem",
+            fontSize: "0.85rem",
             color: THEME.mid,
-            fontFamily: "ui-monospace, monospace",
             fontWeight: 500,
           }}
         >
-          {basename(path)}
+          {path}
         </div>
         {!isImage && (
           <button