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 8403825..c347be3 100644
--- a/vibn-frontend/app/[workspace]/project/[projectId]/(home)/logs/page.tsx
+++ b/vibn-frontend/app/[workspace]/project/[projectId]/(home)/logs/page.tsx
@@ -85,59 +85,76 @@ export default function LogsPage() {
   return (
     <div
       style={{
-        minHeight: "100vh",
+        flex: 1,
+        minHeight: 0,
+        boxSizing: "border-box",
         background: THEME.canvasGradient,
         fontFamily: THEME.font,
-        padding: "36px 48px",
+        padding: "16px",
         display: "flex",
         flexDirection: "column",
       }}
     >
-      <div
+      <Card
+        padding={0}
         style={{
-          maxWidth: 1000,
+          maxWidth: "100%",
           margin: "0 auto",
           width: "100%",
-          flex: 1,
           display: "flex",
           flexDirection: "column",
+          flex: 1,
+          minHeight: 0,
         }}
       >
-        <PageHeader
-          title="Server Logs"
-          subtitle="Container stdout/stderr for your deployed apps."
-        />
+        <div style={{ padding: "20px 24px" }}>
+          <PageHeader
+            title="Server Logs"
+            subtitle="Container stdout/stderr for your deployed apps."
+          />
+        </div>
 
         {loading && !anatomy ? (
-          <Card>
-            <div
-              style={{
-                display: "flex",
-                alignItems: "center",
-                gap: 8,
-                color: THEME.mid,
-                fontSize: "0.875rem",
-              }}
-            >
-              <Loader2 size={15} className="animate-spin" /> Loading…
-            </div>
-          </Card>
+          <div
+            style={{
+              display: "flex",
+              alignItems: "center",
+              gap: 8,
+              color: THEME.mid,
+              fontSize: "0.875rem",
+              padding: "24px",
+            }}
+          >
+            <Loader2 size={15} className="animate-spin" /> Loading…
+          </div>
         ) : live.length === 0 ? (
-          <EmptyState
-            icon={<Activity size={22} />}
-            title="No apps running"
-            hint="Once you deploy an app, its runtime logs will appear here."
-          />
+          <div style={{ padding: 24 }}>
+            <EmptyState
+              icon={<Activity size={22} />}
+              title="No apps running"
+              hint="Once you deploy an app, its runtime logs will appear here."
+            />
+          </div>
         ) : (
-          <div style={{ display: "flex", gap: 16, flex: 1, minHeight: 0 }}>
+          <div
+            style={{
+              display: "flex",
+              flex: 1,
+              minHeight: 0,
+              borderTop: `1px solid ${THEME.borderSoft}`,
+            }}
+          >
             {/* App Picker Column */}
             <div
               style={{
-                width: 220,
+                width: 300,
                 flexShrink: 0,
                 display: "flex",
                 flexDirection: "column",
                 gap: 8,
+                borderRight: `1px solid ${THEME.borderSoft}`,
+                padding: "20px",
+                overflowY: "auto",
               }}
             >
               {live.map((app) => (
@@ -178,12 +195,16 @@ export default function LogsPage() {
                   display: "flex",
                   justifyContent: "space-between",
                   alignItems: "center",
-                  marginBottom: 16,
+                  padding: "12px 20px",
+                  background: THEME.subtleBg,
+                  borderBottom: `1px solid ${THEME.borderSoft}`,
+                  height: "53px",
+                  boxSizing: "border-box",
                 }}
               >
                 <span
                   style={{
-                    fontSize: "0.85rem",
+                    fontSize: "0.95rem",
                     fontWeight: 600,
                     color: THEME.ink,
                   }}
@@ -207,14 +228,16 @@ export default function LogsPage() {
 
               <Terminal
                 sequence={false}
-                className="w-full max-w-none shadow-sm flex-1"
+                className="w-full max-w-none shadow-none border-none rounded-none flex-1"
               >
                 <div
                   style={{
                     color: THEME.mid,
                     fontFamily:
                       "ui-monospace, SFMono-Regular, Menlo, monospace",
-                    fontSize: "0.8rem",
+                    fontSize: "13px",
+                    lineHeight: "24px",
+                    padding: "16px 24px",
                     whiteSpace: "pre-wrap",
                     wordBreak: "break-all",
                   }}
@@ -227,7 +250,7 @@ export default function LogsPage() {
             </div>
           </div>
         )}
-      </div>
+      </Card>
     </div>
   );
 }
diff --git a/vibn-frontend/components/project/dashboard-sidebar.tsx b/vibn-frontend/components/project/dashboard-sidebar.tsx
index 3e9ae56..a55cace 100644
--- a/vibn-frontend/components/project/dashboard-sidebar.tsx
+++ b/vibn-frontend/components/project/dashboard-sidebar.tsx
@@ -72,16 +72,7 @@ export function DashboardSidebar({
     { segment: "plan", label: "Plan Docs", Icon: ClipboardList },
     { segment: "code", label: "Codebase", Icon: Code2 },
     { segment: "users", label: "Users", Icon: Users },
-    {
-      segment: "data",
-      label: "Databases",
-      Icon: Database,
-      hasChildren: true,
-      children: databases.map((db) => ({
-        segment: `data/tables?db=${db.uuid}`,
-        label: db.name,
-      })),
-    },
+    { segment: "data/tables", label: "Databases", Icon: Database },
     { segment: "storage", label: "File Storage", Icon: HardDrive },
     { segment: "services", label: "Live Servers", Icon: Blocks },
     { segment: "domains", label: "Custom Domains", Icon: Globe },