diff --git a/vibn-frontend/app/[workspace]/project/[projectId]/(home)/logs/page.tsx b/vibn-frontend/app/[workspace]/project/[projectId]/(home)/logs/page.tsx
index c347be37..493b1de1 100644
--- a/vibn-frontend/app/[workspace]/project/[projectId]/(home)/logs/page.tsx
+++ b/vibn-frontend/app/[workspace]/project/[projectId]/(home)/logs/page.tsx
@@ -107,13 +107,6 @@ export default function LogsPage() {
           minHeight: 0,
         }}
       >
-        <div style={{ padding: "20px 24px" }}>
-          <PageHeader
-            title="Server Logs"
-            subtitle="Container stdout/stderr for your deployed apps."
-          />
-        </div>
-
         {loading && !anatomy ? (
           <div
             style={{
@@ -141,7 +134,6 @@ export default function LogsPage() {
               display: "flex",
               flex: 1,
               minHeight: 0,
-              borderTop: `1px solid ${THEME.borderSoft}`,
             }}
           >
             {/* App Picker Column */}
@@ -151,33 +143,68 @@ export default function LogsPage() {
                 flexShrink: 0,
                 display: "flex",
                 flexDirection: "column",
-                gap: 8,
                 borderRight: `1px solid ${THEME.borderSoft}`,
-                padding: "20px",
                 overflowY: "auto",
               }}
             >
-              {live.map((app) => (
-                <button
-                  key={app.uuid}
-                  onClick={() => setActiveUuid(app.uuid)}
+              <header
+                style={{
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "space-between",
+                  padding: "10px 20px",
+                  position: "sticky",
+                  top: 0,
+                  background: THEME.cardBg,
+                  zIndex: 10,
+                  height: "41px",
+                  boxSizing: "border-box",
+                  borderTopLeftRadius: THEME.radius,
+                }}
+              >
+                <h3
                   style={{
-                    textAlign: "left",
-                    padding: "10px 14px",
-                    background:
-                      activeUuid === app.uuid ? THEME.subtleBg : THEME.cardBg,
-                    border: `1px solid ${activeUuid === app.uuid ? THEME.border : "transparent"}`,
-                    borderRadius: THEME.radiusSm,
-                    cursor: "pointer",
-                    fontSize: "0.875rem",
-                    fontWeight: 500,
-                    color: activeUuid === app.uuid ? THEME.ink : THEME.mid,
-                    transition: "all 0.15s ease",
+                    fontSize: "0.95rem",
+                    fontWeight: 600,
+                    color: THEME.ink,
+                    margin: 0,
                   }}
                 >
-                  {app.name}
-                </button>
-              ))}
+                  Apps
+                </h3>
+              </header>
+              <div
+                style={{
+                  display: "flex",
+                  flexDirection: "column",
+                  gap: 4,
+                  padding: "0 20px 20px 20px",
+                }}
+              >
+                {live.map((app) => (
+                  <button
+                    key={app.uuid}
+                    onClick={() => setActiveUuid(app.uuid)}
+                    style={{
+                      textAlign: "left",
+                      padding: "10px 14px",
+                      background:
+                        activeUuid === app.uuid
+                          ? THEME.subtleBg
+                          : "transparent",
+                      border: "1px solid transparent",
+                      borderRadius: THEME.radiusSm,
+                      cursor: "pointer",
+                      fontSize: "0.875rem",
+                      fontWeight: activeUuid === app.uuid ? 500 : 400,
+                      color: activeUuid === app.uuid ? THEME.ink : THEME.mid,
+                      transition: "all 0.1s ease",
+                    }}
+                  >
+                    {app.name}
+                  </button>
+                ))}
+              </div>
             </div>
 
             {/* Log Viewer Column */}
@@ -195,18 +222,18 @@ export default function LogsPage() {
                   display: "flex",
                   justifyContent: "space-between",
                   alignItems: "center",
-                  padding: "12px 20px",
+                  padding: "10px 16px",
                   background: THEME.subtleBg,
                   borderBottom: `1px solid ${THEME.borderSoft}`,
-                  height: "53px",
+                  height: "41px",
                   boxSizing: "border-box",
                 }}
               >
                 <span
                   style={{
-                    fontSize: "0.95rem",
-                    fontWeight: 600,
-                    color: THEME.ink,
+                    fontSize: "0.85rem",
+                    fontWeight: 500,
+                    color: THEME.mid,
                   }}
                 >
                   {live.find((a) => a.uuid === activeUuid)?.name ?? "Logs"}
@@ -214,13 +241,14 @@ export default function LogsPage() {
                 <SecondaryButton
                   icon={
                     logsLoading ? (
-                      <Loader2 size={14} className="animate-spin" />
+                      <Loader2 size={13} className="animate-spin" />
                     ) : (
-                      <RefreshCw size={14} />
+                      <RefreshCw size={13} />
                     )
                   }
                   onClick={() => activeUuid && fetchLogs(activeUuid)}
                   disabled={logsLoading}
+                  style={{ padding: "4px 8px", fontSize: "0.75rem" }}
                 >
                   Refresh
                 </SecondaryButton>