diff --git a/vibn-frontend/app/[workspace]/project/[projectId]/(home)/data/tables/page.tsx b/vibn-frontend/app/[workspace]/project/[projectId]/(home)/data/tables/page.tsx
index 1bf3a98e..f15fcf69 100644
--- a/vibn-frontend/app/[workspace]/project/[projectId]/(home)/data/tables/page.tsx
+++ b/vibn-frontend/app/[workspace]/project/[projectId]/(home)/data/tables/page.tsx
@@ -61,7 +61,7 @@ export default function DataTablesPage() {
     >
       <div style={{ maxWidth: 1400, margin: "0 auto" }}>
         <PageHeader
-          title="Data / Tables"
+          title="Databases"
           subtitle="Explore the raw schema and rows in your project databases."
         />
 
diff --git a/vibn-frontend/app/[workspace]/project/[projectId]/(home)/domains/page.tsx b/vibn-frontend/app/[workspace]/project/[projectId]/(home)/domains/page.tsx
index b724f996..50f100a7 100644
--- a/vibn-frontend/app/[workspace]/project/[projectId]/(home)/domains/page.tsx
+++ b/vibn-frontend/app/[workspace]/project/[projectId]/(home)/domains/page.tsx
@@ -45,7 +45,7 @@ export default function DomainsPage() {
     >
       <div style={{ maxWidth: 860, margin: "0 auto" }}>
         <PageHeader
-          title="Domains"
+          title="Custom Domains"
           subtitle="Public URLs for your deployed apps. To add a custom domain, ask the AI in chat — DNS + TLS are wired automatically."
         />
 
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 fd89ab40..ac49382a 100644
--- a/vibn-frontend/app/[workspace]/project/[projectId]/(home)/logs/page.tsx
+++ b/vibn-frontend/app/[workspace]/project/[projectId]/(home)/logs/page.tsx
@@ -82,7 +82,7 @@ export default function LogsPage() {
         }}
       >
         <PageHeader
-          title="Runtime Logs"
+          title="Server Logs"
           subtitle="Container stdout/stderr for your deployed apps."
         />
 
diff --git a/vibn-frontend/app/[workspace]/project/[projectId]/(home)/plan/page.tsx b/vibn-frontend/app/[workspace]/project/[projectId]/(home)/plan/page.tsx
index 9e8ee865..f1a03209 100644
--- a/vibn-frontend/app/[workspace]/project/[projectId]/(home)/plan/page.tsx
+++ b/vibn-frontend/app/[workspace]/project/[projectId]/(home)/plan/page.tsx
@@ -108,7 +108,7 @@ export default function PlanTab() {
     >
       <div style={{ maxWidth: 1400, margin: "0 auto" }}>
         <PageHeader
-          title="Plan & Specs"
+          title="AI Blueprint"
           subtitle="Your product brief, execution plan, and AI instructions."
         />
 
diff --git a/vibn-frontend/app/[workspace]/project/[projectId]/(home)/services/page.tsx b/vibn-frontend/app/[workspace]/project/[projectId]/(home)/services/page.tsx
index e67e2c25..0de97f94 100644
--- a/vibn-frontend/app/[workspace]/project/[projectId]/(home)/services/page.tsx
+++ b/vibn-frontend/app/[workspace]/project/[projectId]/(home)/services/page.tsx
@@ -17,6 +17,13 @@ import {
   Server,
 } from "lucide-react";
 import { useAnatomy, type Anatomy } from "@/components/project/use-anatomy";
+import {
+  THEME,
+  PageHeader,
+  Card,
+  SectionHeader,
+  EmptyState,
+} from "@/components/project/dashboard-ui";
 
 /**
  * Hosting tab — user-facing: "Is my thing live? How do I reach it?"
@@ -51,67 +58,96 @@ export default function ServicesPage() {
   const showLoading = loading && !anatomy;
 
   return (
-    <div style={pageWrap}>
-      {showLoading && (
-        <div style={centeredMsg}>
-          <Loader2
-            size={16}
-            className="animate-spin"
-            style={{ color: INK.muted }}
-          />
-          <span style={{ color: INK.muted, fontSize: "0.85rem" }}>
-            Loading…
-          </span>
-        </div>
-      )}
-      {error && !showLoading && (
-        <div style={centeredMsg}>
-          <AlertCircle size={15} style={{ color: DANGER }} />
-          <span style={{ fontSize: "0.85rem", color: DANGER }}>{error}</span>
-        </div>
-      )}
+    <div
+      style={{
+        minHeight: "100vh",
+        background: THEME.canvasGradient,
+        fontFamily: THEME.font,
+        padding: "36px 48px",
+      }}
+    >
+      <div style={{ maxWidth: 860, margin: "0 auto" }}>
+        <PageHeader
+          title="Live Servers"
+          subtitle="Your live deployments and development previews."
+        />
 
-      {anatomy && (
-        <>
-          {/* ── Live endpoints ── */}
-          <section>
-            <SectionHeader title="Live" count={anatomy.hosting.live.length} />
-            {anatomy.hosting.live.length === 0 ? (
-              <EmptySection
-                icon={<Server size={20} style={{ color: INK.muted }} />}
-                title="Nothing deployed yet"
-                hint="Ask the AI to deploy your app and it will appear here."
-                promptSuggestion="Deploy my app to production"
-              />
-            ) : (
-              <div
-                style={{ display: "flex", flexDirection: "column", gap: 16 }}
-              >
-                {anatomy.hosting.live.map((item) => (
-                  <LiveCard key={item.uuid} item={item} projectId={projectId} />
-                ))}
-              </div>
-            )}
-          </section>
+        {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>
+        )}
 
-          {/* ── Previews ── */}
-          {anatomy.hosting.previews.length > 0 && (
-            <section style={{ marginTop: 40 }}>
-              <SectionHeader
-                title="Dev Previews"
-                count={anatomy.hosting.previews.length}
-              />
-              <div
-                style={{ display: "flex", flexDirection: "column", gap: 10 }}
-              >
-                {anatomy.hosting.previews.map((p) => (
-                  <PreviewRow key={p.id} preview={p} />
-                ))}
-              </div>
+        {anatomy && (
+          <>
+            {/* ── Live endpoints ── */}
+            <section>
+              <SectionHeader title="Live" count={anatomy.hosting.live.length} />
+              {anatomy.hosting.live.length === 0 ? (
+                <EmptyState
+                  icon={<Server size={22} />}
+                  title="Nothing deployed yet"
+                  hint="Ask the AI to deploy your app and it will appear here."
+                />
+              ) : (
+                <div
+                  style={{ display: "flex", flexDirection: "column", gap: 16 }}
+                >
+                  {anatomy.hosting.live.map((item) => (
+                    <LiveCard
+                      key={item.uuid}
+                      item={item}
+                      projectId={projectId}
+                    />
+                  ))}
+                </div>
+              )}
             </section>
-          )}
-        </>
-      )}
+
+            {/* ── Previews ── */}
+            {anatomy.hosting.previews.length > 0 && (
+              <section style={{ marginTop: 40 }}>
+                <SectionHeader
+                  title="Dev Previews"
+                  count={anatomy.hosting.previews.length}
+                />
+                <div
+                  style={{ display: "flex", flexDirection: "column", gap: 10 }}
+                >
+                  {anatomy.hosting.previews.map((p) => (
+                    <PreviewRow key={p.id} preview={p} />
+                  ))}
+                </div>
+              </section>
+            )}
+          </>
+        )}
+      </div>
     </div>
   );
 }