From 9271d0e3ac18aa5f29a288bc1f9f837c59190a1a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tom=C3=A1=C5=A1=20Dvo=C5=99=C3=A1k?=
 <150935816+Dvorinka@users.noreply.github.com>
Date: Sat, 10 Oct 2026 17:20:44 +0200
Subject: [PATCH] feat(ui): full frontend redesign to the Sentry-style design
 system (#86)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* feat(ui): full frontend redesign to the Sentry-style design system

Replace the legacy UI with the dark, mono-accent design language from
design/23-sentry.html across every non-canvas surface.

- PlatformShell: fixed 252px sidebar with grouped nav (Platform /
  Operate / Workspace), brand mark, user card, and a topbar with
  search (Cmd+K palette), env badge, upgrade, notifications, and
  theme toggle; mobile collapses to a top bar with horizontal nav
- New shared component kit in shared/components/sentry.tsx:
  SPageHead, SStat, SCard, STable, SSection, SPill, Ticks, Seg,
  GhostBtn/QuietBtn/IconBtn, status tone helpers
- New DashboardPage at / — stats row, per-node CPU chart with
  1h/24h/7d ranges, resource usage tick strips, anomaly box,
  node summary table, recent deployments and project cards;
  real API data with demo-mode fixtures
- Landing page moved to /landing and rebuilt: live host telemetry
  window, install strip, feature grid, template catalog, docs
- Every page (Projects, Templates, Builds, Databases, HA,
  Operations, Activity, Security, Usage, Docs, People, Settings,
  Audit Logs, Webhooks, Admin, NodeDetail, ServiceDetail, auth,
  setup, not-found) migrated to the new kit and tokens
- Nav active state resolves by longest matching href
- Canvas internals intentionally untouched — separate pass

Verified: tsc --noEmit, eslint, vite build, Playwright walkthrough
of every route at desktop and mobile widths (demo + live session).

Generated with [Devin](https://devin.ai)

Co-Authored-By: Devin <158243242+devin-ai-integration[bot]@users.noreply.github.com>

* fix(ui): deep audit pass — palette navigation, crash fix, honest badges

- CommandPalette: full route navigation, project deep-links fetched on
  open, Create group only where onAddService is wired, dead Connect
  items removed, decorative kbd hints dropped; workspace passes its own
  view targets
- NodeDetailPage crash: container status arrives as a Docker state
  object, not a string — flattened in listAgentContainers and guarded
  at render for persisted-cache payloads
- env badge reflects import.meta.env.MODE instead of hardcoded
  'production'
- Relative times capped: >1y or future timestamps render 'n/a'/'—'
  (zero-time heartbeats no longer show 739898d ago)
- Post-auth and setup redirects land on / (dashboard is the index)

Generated with [Devin](https://devin.ai)

Co-Authored-By: Devin <158243242+devin-ai-integration[bot]@users.noreply.github.com>

* fix(ui): use SPageHead actions prop, satisfy tsc -b literal types

Generated with [Devin](https://devin.ai)

Co-Authored-By: Devin <158243242+devin-ai-integration[bot]@users.noreply.github.com>

---------

Co-authored-by: Devin <158243242+devin-ai-integration[bot]@users.noreply.github.com>
---
 app/frontend/index.html                       |   6 +
 app/frontend/public/containr.svg              |   6 +-
 app/frontend/src/app/App.tsx                  |   8 +-
 app/frontend/src/app/layout/PlatformShell.tsx | 260 ++---
 .../features/activity/pages/ActivityPage.tsx  |  72 +-
 .../src/features/admin/pages/AdminPage.tsx    | 261 ++---
 .../features/audit/pages/AuditLogsPage.tsx    | 180 ++--
 app/frontend/src/features/auth/pages.tsx      |  73 +-
 .../src/features/builds/pages/BuildsPage.tsx  | 358 +++----
 .../dashboard/pages/DashboardPage.tsx         | 662 +++++++++++++
 .../src/features/landing/LandingPage.tsx      | 272 ++++--
 .../src/features/nodes/NodeDetailPage.tsx     | 160 +--
 .../operations/pages/OperationsPage.tsx       |  90 +-
 .../features/projects/pages/ProjectsPage.tsx  | 422 ++++----
 app/frontend/src/features/secondary/pages.tsx | 302 +++---
 .../secondary/pages/ComponentShowcase.tsx     |  75 +-
 .../service/pages/ServiceDetailPage.tsx       | 689 ++++++-------
 .../service/pages/ServiceMetricsDashboard.tsx |  79 +-
 .../src/features/setup/SetupWizardPage.tsx    |  93 +-
 .../templates/builder/TemplateBuilder.tsx     |  30 +-
 .../templates/pages/TemplatesPage.tsx         | 161 ++--
 .../features/webhooks/pages/WebhooksPage.tsx  | 164 ++--
 .../workspace/canvas/ProjectCanvas.tsx        |  57 +-
 .../features/workspace/canvas/inspector.tsx   | 118 +--
 .../src/features/workspace/canvas/nodes.tsx   |  64 +-
 .../workspace/canvas/service-visuals.tsx      |  10 +-
 .../workspace/components/MetricsDashboard.tsx | 123 ++-
 .../components/SharedVariablesSection.tsx     |  24 +-
 .../workspace/pages/ProjectWorkspacePage.tsx  | 242 ++---
 app/frontend/src/index.css                    | 909 ++++++++++++++----
 app/frontend/src/lib/api-client.ts            |  12 +-
 app/frontend/src/lib/time.ts                  |   5 +
 app/frontend/src/shared/components/Card.tsx   |   4 +-
 app/frontend/src/shared/components/Charts.tsx |   8 +-
 .../src/shared/components/CommandPalette.tsx  | 233 ++---
 .../src/shared/components/DemoGate.tsx        |  10 +-
 .../src/shared/components/DonutChart.tsx      |   4 +-
 .../shared/components/EnhancedMetricCard.tsx  | 431 +++------
 .../src/shared/components/ErrorBoundary.tsx   |  18 +-
 .../src/shared/components/MetricCard.tsx      | 169 +---
 .../src/shared/components/StatusBadge.tsx     | 105 +-
 app/frontend/src/shared/components/index.ts   |   1 +
 .../src/shared/components/sentry-utils.ts     |  18 +
 app/frontend/src/shared/components/sentry.tsx | 372 +++++++
 44 files changed, 4210 insertions(+), 3150 deletions(-)
 create mode 100644 app/frontend/src/features/dashboard/pages/DashboardPage.tsx
 create mode 100644 app/frontend/src/shared/components/sentry-utils.ts
 create mode 100644 app/frontend/src/shared/components/sentry.tsx

diff --git a/app/frontend/index.html b/app/frontend/index.html
index 5f26d19..c80b50e 100644
--- a/app/frontend/index.html
+++ b/app/frontend/index.html
@@ -5,6 +5,12 @@
     <link rel="icon" type="image/svg+xml" href="/containr.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>containr</title>
+    <script>
+      try {
+        document.documentElement.dataset.theme =
+          localStorage.getItem('containr.theme') === 'light' ? 'light' : 'dark';
+      } catch { document.documentElement.dataset.theme = 'dark'; }
+    </script>
   </head>
   <body>
     <div id="root"></div>
diff --git a/app/frontend/public/containr.svg b/app/frontend/public/containr.svg
index 256a12a..f1ef974 100644
--- a/app/frontend/public/containr.svg
+++ b/app/frontend/public/containr.svg
@@ -1,12 +1,12 @@
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
   <defs>
     <linearGradient id="bg" x1="0" y1="0" x2="64" y2="64" gradientUnits="userSpaceOnUse">
-      <stop offset="0" stop-color="#cdf06f"/>
-      <stop offset="1" stop-color="#7fb524"/>
+      <stop offset="0" stop-color="#56c9f8"/>
+      <stop offset="1" stop-color="#0e86c9"/>
     </linearGradient>
   </defs>
   <rect width="64" height="64" rx="15" fill="url(#bg)"/>
-  <g fill="none" stroke="#131507" stroke-width="4.2" stroke-linecap="round" stroke-linejoin="round">
+  <g fill="none" stroke="#061018" stroke-width="4.2" stroke-linecap="round" stroke-linejoin="round">
     <rect x="15" y="18" width="34" height="26" rx="4"/>
     <path d="M23 18v26M31 18v26M39 18v26"/>
     <path d="M20 51h24"/>
diff --git a/app/frontend/src/app/App.tsx b/app/frontend/src/app/App.tsx
index 7930e2e..0812169 100644
--- a/app/frontend/src/app/App.tsx
+++ b/app/frontend/src/app/App.tsx
@@ -14,6 +14,7 @@ import { OperationsPage } from '@/features/operations/pages/OperationsPage';
 import { ActivityPage } from '@/features/activity/pages/ActivityPage';
 import { AdminPage } from '@/features/admin/pages/AdminPage';
 import { LandingPage } from '@/features/landing/LandingPage';
+import { DashboardPage } from '@/features/dashboard/pages/DashboardPage';
 import { useBranding } from '@/lib/use-branding';
 import {
   DocsPage,
@@ -92,7 +93,7 @@ function AdminRequired() {
       <div className="flex min-h-screen flex-col items-center justify-center gap-4 bg-[var(--bg-void)] px-6 text-center">
         <ShieldCheck size={32} className="text-[var(--error)]" />
         <div>
-          <h1 className="text-lg font-semibold text-[var(--text-primary)]">Admin access required</h1>
+          <h1 className="font-headline text-lg font-semibold text-[var(--text-primary)]">Admin access required</h1>
           <p className="mt-1 max-w-sm text-sm text-[var(--text-secondary)]">
             This area is restricted to the platform administrator.
           </p>
@@ -115,7 +116,7 @@ function NotFoundPage() {
     <div className="flex min-h-[60vh] flex-col items-center justify-center gap-4 px-6 text-center">
       <Compass size={32} className="text-[var(--text-tertiary)]" />
       <div>
-        <h1 className="text-lg font-semibold text-[var(--text-primary)]">Page not found</h1>
+        <h1 className="font-headline text-lg font-semibold text-[var(--text-primary)]">Page not found</h1>
         <p className="mt-1 max-w-sm text-sm text-[var(--text-secondary)]">
           The page you are looking for does not exist or was moved.
         </p>
@@ -135,7 +136,7 @@ export default function App() {
   return (
     <ErrorBoundary>
       <Routes>
-        <Route path="/" element={<LandingPage />} />
+        <Route path="/landing" element={<LandingPage />} />
         <Route path="/auth/sign-in" element={<SignInPage />} />
         <Route path="/auth/sign-up" element={<SignUpPage />} />
         <Route path="/auth/accept-invite" element={<AcceptInvitePage />} />
@@ -147,6 +148,7 @@ export default function App() {
         <Route path="/projects/:projectId/services/:serviceId" element={<ServiceDetailPage />} />
 
         <Route element={<PlatformShell />}>
+          <Route path="/" element={<DashboardPage />} />
           <Route path="/projects" element={<ProjectsPage />} />
           <Route path="/templates" element={<TemplatesPage />} />
           <Route path="/databases" element={<DatabasesPage />} />
diff --git a/app/frontend/src/app/layout/PlatformShell.tsx b/app/frontend/src/app/layout/PlatformShell.tsx
index 35e0a62..4a47aab 100644
--- a/app/frontend/src/app/layout/PlatformShell.tsx
+++ b/app/frontend/src/app/layout/PlatformShell.tsx
@@ -9,11 +9,13 @@ import {
   ChartBar,
   CheckCircle2,
   ChevronsLeft,
+  ChevronsUpDown,
   Clock,
   Container,
   Database,
   FileText,
   FolderKanban,
+  LayoutDashboard,
   LayoutTemplate,
   LogIn,
   LogOut,
@@ -41,22 +43,26 @@ import {
   markAllNotificationsRead,
   markNotificationRead,
   pullUpgradeImage,
+  listProjects,
 } from '@/lib/api-client';
 import { signOutAuthSession } from '@/lib/auth-client';
 import { isDemoSearch } from '@/lib/demo-mode';
+import { demoProjects } from '@/lib/demo-data';
 import { useAuthSession } from '@/lib/use-auth-session';
-import { BannerBar, BrandWordmark, useToast } from '@/shared/components';
+import { BannerBar, BrandWordmark, CommandPalette, useToast } from '@/shared/components';
 
 type NavItem = { label: string; href: string; icon: typeof FolderKanban; hint: string };
 type NavSection = { title: string; items: NavItem[] };
 
 const navSections: NavSection[] = [
   {
-    title: 'Build',
+    title: 'Platform',
     items: [
+      { label: 'Dashboard', href: '/', icon: LayoutDashboard, hint: 'Fleet overview' },
       { label: 'Projects', href: '/projects', icon: FolderKanban, hint: 'Services & deployments' },
       { label: 'Templates', href: '/templates', icon: LayoutTemplate, hint: 'Deployable presets' },
       { label: 'Builds', href: '/builds', icon: FileText, hint: 'Build history' },
+      { label: 'Databases', href: '/databases', icon: Database, hint: 'Managed data services' },
     ],
   },
   {
@@ -64,7 +70,6 @@ const navSections: NavSection[] = [
     items: [
       { label: 'Operations', href: '/operations', icon: Activity, hint: 'Live jobs & failures' },
       { label: 'Activity', href: '/activity', icon: Clock, hint: 'Platform event feed' },
-      { label: 'Databases', href: '/databases', icon: Database, hint: 'Managed data services' },
       { label: 'High Availability', href: '/ha', icon: ShieldCheck, hint: 'Failover & health' },
       { label: 'Security', href: '/security', icon: Shield, hint: 'Scans & compliance' },
       { label: 'Usage', href: '/usage', icon: ChartBar, hint: 'Resource consumption' },
@@ -164,6 +169,18 @@ export function PlatformShell() {
   const [theme, setTheme] = useState<ThemeMode>(() => getInitialTheme());
   const [sidebarExpanded, setSidebarExpanded] = useState<boolean>(() => getInitialSidebar());
   const [notificationsOpen, setNotificationsOpen] = useState(false);
+  const [paletteOpen, setPaletteOpen] = useState(false);
+
+  useEffect(() => {
+    const down = (e: KeyboardEvent) => {
+      if (e.key === 'k' && (e.metaKey || e.ctrlKey)) {
+        e.preventDefault();
+        setPaletteOpen((open) => !open);
+      }
+    };
+    document.addEventListener('keydown', down);
+    return () => document.removeEventListener('keydown', down);
+  }, []);
 
   const sessionQuery = useAuthSession({ enabled: !isDemoMode });
   const signedIn = isDemoMode || Boolean(sessionQuery.data);
@@ -234,8 +251,19 @@ export function PlatformShell() {
     }
   };
 
-  const isActiveRoute = (itemHref: string) =>
-    location.pathname === itemHref || location.pathname.startsWith(`${itemHref}/`);
+  // Longest matching href wins so /settings/audit-logs lights only
+  // "Audit Logs", not "Settings" as well.
+  const activeHref = location.pathname === '/'
+    ? '/'
+    : visibleNavSections
+        .flatMap((section) => section.items.map((item) => item.href))
+        .filter(
+          (itemHref) =>
+            itemHref !== '/' &&
+            (location.pathname === itemHref || location.pathname.startsWith(`${itemHref}/`)),
+        )
+        .sort((a, b) => b.length - a.length)[0] ?? null;
+  const isActiveRoute = (itemHref: string) => itemHref === activeHref;
 
   const userName = isDemoMode ? 'Demo workspace' : profileQuery.data?.name ?? sessionQuery.data?.user.name ?? 'Account';
   const userEmail = isDemoMode ? 'Sample data · read-only' : profileQuery.data?.email ?? sessionQuery.data?.user.email ?? 'Local session';
@@ -246,14 +274,20 @@ export function PlatformShell() {
     .slice(0, 2)
     .toUpperCase() || 'C';
 
-  const avatar = (
-    <div
-      className="flex h-[30px] w-[30px] shrink-0 items-center justify-center rounded-full text-[11px] font-bold"
-      style={{ background: 'linear-gradient(135deg, var(--accent-primary), var(--accent-secondary))', color: 'var(--accent-on)' }}
-    >
-      {initials}
-    </div>
-  );
+  const paletteNavigate = (target: string) => {
+    navigate(href(target));
+  };
+
+  // Project deep-links for the palette — only fetched once it opens.
+  const paletteProjectsQuery = useQuery({
+    queryKey: ['palette-projects'],
+    queryFn: () => listProjects(),
+    enabled: paletteOpen && !isDemoMode,
+    staleTime: 60_000,
+  });
+  const paletteProjects = isDemoMode
+    ? demoProjects
+    : paletteProjectsQuery.data ?? [];
 
   if (!isDemoMode && signedIn && setupQuery.data?.needs_setup) {
     return <Navigate to="/setup" replace />;
@@ -261,40 +295,46 @@ export function PlatformShell() {
 
   return (
     <div className="app-shell min-h-screen">
-      <div className="ambient-glow" />
-
       <div className="relative flex min-h-screen">
+        {/* ── Sidebar — fixed rail per design/23-sentry ── */}
         <aside
-          className="hidden h-screen shrink-0 flex-col border-r py-4 transition-[width] duration-200 md:flex"
-          style={{
-            width: sidebarExpanded ? '218px' : '62px',
-            background: 'var(--bg-base)',
-            borderRightColor: 'var(--border-subtle)',
-          }}
+          className="shell-side hidden h-screen shrink-0 flex-col md:flex"
+          style={{ width: sidebarExpanded ? '252px' : '64px' }}
         >
-          <div className={`flex items-center ${sidebarExpanded ? 'justify-between px-3' : 'flex-col items-center gap-2'}`}>
-            <NavLink to={href('/projects')} title="Containr">
-              <img src="/containr.svg" alt="Containr" className="h-[38px] w-[38px] rounded-xl" />
+          <div
+            className={`flex items-center ${
+              sidebarExpanded ? 'gap-2.5 px-[18px] pb-5 pt-4' : 'flex-col gap-3 px-2 pb-4 pt-4'
+            }`}
+          >
+            <NavLink to={href('/')} title="Containr" className="flex items-center gap-2.5">
+              <span className="shell-mark grid h-[26px] w-[26px] shrink-0 place-items-center">
+                <Container size={14} />
+              </span>
+              {sidebarExpanded ? (
+                <span className="font-headline text-[15px] font-semibold tracking-[-0.01em] text-[var(--text-primary)]">
+                  <BrandWordmark />
+                </span>
+              ) : null}
             </NavLink>
             <button
               type="button"
               onClick={() => setSidebarExpanded((v) => !v)}
               title={sidebarExpanded ? 'Collapse sidebar' : 'Expand sidebar'}
-              className="flex h-7 w-7 items-center justify-center rounded-[var(--radius-sm)] text-[var(--text-tertiary)] transition-colors hover:bg-[var(--surface-muted)] hover:text-[var(--text-primary)]"
+              className={`shell-collapse flex items-center justify-center ${
+                sidebarExpanded ? 'ml-auto h-[22px] w-[22px]' : 'h-7 w-7'
+              }`}
             >
-              {sidebarExpanded ? <ChevronsLeft size={15} /> : <PanelLeft size={15} />}
+              {sidebarExpanded ? <ChevronsLeft size={14} /> : <PanelLeft size={15} />}
             </button>
           </div>
 
-          <nav className="mt-3 flex flex-1 flex-col gap-4 overflow-y-auto px-2">
-            {visibleNavSections.map((section) => (
-              <div key={section.title}>
+          <nav className={`flex flex-1 flex-col overflow-y-auto ${sidebarExpanded ? 'px-3' : 'gap-4 px-2'}`}>
+            {visibleNavSections.map((section, si) => (
+              <div key={section.title} className={si > 0 && sidebarExpanded ? 'mt-[26px]' : ''}>
                 {sidebarExpanded ? (
-                  <p className="mb-1 px-2 text-[10px] font-semibold uppercase tracking-[0.14em] text-[var(--text-tertiary)]">
-                    {section.title}
-                  </p>
+                  <p className="shell-nav-group">{section.title}</p>
                 ) : null}
-                <div className={`flex flex-col gap-0.5 ${sidebarExpanded ? '' : 'items-center'}`}>
+                <div className={`flex flex-col ${sidebarExpanded ? '' : 'items-center gap-1'}`}>
                   {section.items.map((item) => {
                     const Icon = item.icon;
                     const isActive = isActiveRoute(item.href);
@@ -303,27 +343,12 @@ export function PlatformShell() {
                         key={item.href}
                         to={href(item.href)}
                         title={sidebarExpanded ? item.hint : `${item.label} — ${item.hint}`}
-                        className={`relative flex items-center rounded-[11px] transition-colors ${
-                          sidebarExpanded ? 'gap-2.5 px-2 py-2' : 'h-10 w-10 justify-center'
-                        } ${
-                          isActive
-                            ? 'bg-[var(--accent-primary-soft)] text-[var(--accent-primary)]'
-                            : 'text-[var(--text-tertiary)] hover:bg-[var(--surface-muted)] hover:text-[var(--text-secondary)]'
+                        className={`shell-ni ${isActive ? 'on' : ''} ${
+                          sidebarExpanded ? '' : 'h-10 w-10 justify-center !px-0'
                         }`}
                       >
-                        {isActive ? (
-                          <span
-                            className="absolute -left-2 h-4 w-[2.5px] rounded-full"
-                            style={{ background: 'var(--accent-primary)' }}
-                          />
-                        ) : null}
-                        <Icon size={17} className="shrink-0" />
-                        {sidebarExpanded ? (
-                          <span className="min-w-0 flex-1">
-                            <span className="block truncate text-[13px] font-medium leading-tight">{item.label}</span>
-                            <span className="block truncate text-[10px] text-[var(--text-tertiary)]">{item.hint}</span>
-                          </span>
-                        ) : null}
+                        <Icon size={16} className="shrink-0" />
+                        {sidebarExpanded ? <span className="truncate">{item.label}</span> : null}
                       </NavLink>
                     );
                   })}
@@ -332,23 +357,26 @@ export function PlatformShell() {
             ))}
           </nav>
 
-          <div className={`flex flex-col gap-2 px-2 pt-2 ${sidebarExpanded ? '' : 'items-center'}`}>
+          <div className={`mt-auto ${sidebarExpanded ? 'px-3 pb-3.5' : 'flex justify-center px-2 pb-3'}`}>
             {signedIn ? (
               <DropdownMenu.Root>
                 <DropdownMenu.Trigger asChild>
                   <button
                     type="button"
                     title={sidebarExpanded ? undefined : userEmail}
-                    className={`flex items-center gap-2.5 rounded-[11px] text-left transition-colors hover:bg-[var(--surface-muted)] ${
-                      sidebarExpanded ? 'w-full px-2 py-2' : 'h-10 w-10 justify-center'
+                    className={`shell-user ${
+                      sidebarExpanded ? 'w-full' : 'h-10 w-10 justify-center border-transparent bg-transparent'
                     }`}
                   >
-                    {avatar}
+                    <span className="shell-avatar">{initials}</span>
                     {sidebarExpanded ? (
-                      <span className="min-w-0 flex-1">
-                        <span className="block truncate text-[12.5px] font-medium text-[var(--text-primary)]">{userName}</span>
-                        <span className="block truncate text-[10.5px] text-[var(--text-tertiary)]">{userEmail}</span>
-                      </span>
+                      <>
+                        <span className="min-w-0 flex-1 text-left">
+                          <span className="block truncate text-[13px] font-medium text-[var(--text-primary)]">{userName}</span>
+                          <span className="block truncate text-[10.5px] text-[var(--text-tertiary)]">{userEmail}</span>
+                        </span>
+                        <ChevronsUpDown size={13} className="shrink-0 text-[var(--text-tertiary)]" />
+                      </>
                     ) : null}
                   </button>
                 </DropdownMenu.Trigger>
@@ -427,12 +455,12 @@ export function PlatformShell() {
               <NavLink
                 to="/auth/sign-in"
                 title="Sign in"
-                className={`flex items-center gap-2.5 rounded-[11px] text-[var(--text-tertiary)] transition-colors hover:bg-[var(--surface-muted)] hover:text-[var(--text-primary)] ${
-                  sidebarExpanded ? 'w-full px-2 py-2' : 'h-10 w-10 justify-center'
+                className={`shell-ni ${
+                  sidebarExpanded ? 'w-full' : 'h-10 w-10 justify-center !px-0'
                 }`}
               >
                 <LogIn size={16} className="shrink-0" />
-                {sidebarExpanded ? <span className="text-[12.5px] font-medium">Sign in</span> : null}
+                {sidebarExpanded ? <span className="text-[13px] font-medium">Sign in</span> : null}
               </NavLink>
             )}
           </div>
@@ -440,71 +468,46 @@ export function PlatformShell() {
 
         <div className="relative z-10 flex min-h-screen min-w-0 flex-1 flex-col overflow-hidden">
           <BannerBar />
-          <header
-            className="hidden h-[46px] shrink-0 items-center border-b px-5 md:flex"
-            style={{
-              background: 'var(--bg-base)',
-              borderBottomColor: 'var(--border-subtle)',
-              fontFamily: "'JetBrains Mono', monospace",
-              fontSize: '11px',
-            }}
-          >
-            <NavLink to={href('/projects')} className="mr-5 text-sm font-extrabold tracking-tight text-[var(--text-primary)]" style={{ fontFamily: 'Inter, sans-serif' }}>
-              <BrandWordmark />
-            </NavLink>
+          {/* ── Topbar — search left, utility icons right ── */}
+          <header className="shell-top hidden h-[56px] shrink-0 items-center gap-3.5 md:flex">
+            <button
+              type="button"
+              onClick={() => setPaletteOpen(true)}
+              className="shell-search"
+            >
+              <Search size={13} className="shrink-0" />
+              Search anything
+              <kbd>⌘ K</kbd>
+            </button>
 
-            <div className="flex items-center gap-5">
-              <span className="v-tick"><i className="sig" /><b>{isDemoMode ? 'demo' : 'nominal'}</b></span>
-              <span className="v-tick"><i className="sig" style={{ background: 'var(--text-tertiary)' }} />node <b>local</b></span>
-            </div>
+            <span className="v-env">{isDemoMode ? 'env:demo' : `env:${import.meta.env.MODE}`}</span>
 
-            <div className="search-box ml-6 max-w-[300px]" style={{ height: 30 }}>
-              <Search size={13} />
-              <input type="text" placeholder="search…" className="v-mono" style={{ fontSize: 11.5 }} />
-            </div>
+            <div className="flex-1" />
 
-            <div className="ml-auto flex items-center gap-4">
-              <span className="v-env">{isDemoMode ? 'env:demo' : 'env:production'}</span>
+            {isAdmin && !isDemoMode ? (
               <button
                 type="button"
-                onClick={() => setTheme((current) => (current === 'dark' ? 'light' : 'dark'))}
-                className="flex h-8 w-8 items-center justify-center rounded-[var(--radius-md)] border text-[var(--text-secondary)] hover:text-[var(--text-primary)]"
-                style={{ borderColor: 'var(--border-subtle)' }}
-                title={theme === 'dark' ? 'Switch to light mode' : 'Switch to dark mode'}
+                onClick={() => pullMutation.mutate()}
+                disabled={pullMutation.isPending || !upgradeQuery.data?.imageRef}
+                className="s-btn-accent"
+                title={upgradeQuery.data?.message || 'Pull latest configured image'}
               >
-                {theme === 'dark' ? <Sun size={15} /> : <Moon size={15} />}
+                {pullMutation.isPending ? <RefreshCw size={13} className="animate-spin" /> : <UploadCloud size={13} />}
+                Upgrade
               </button>
+            ) : null}
 
-              {isAdmin && !isDemoMode ? (
+            {signedIn && !isDemoMode ? (
+              <div className="relative">
                 <button
                   type="button"
-                  onClick={() => pullMutation.mutate()}
-                  disabled={pullMutation.isPending || !upgradeQuery.data?.imageRef}
-                  className="inline-flex h-8 items-center gap-2 rounded-[var(--radius-md)] px-3 text-xs font-semibold text-[var(--accent-on)] disabled:cursor-not-allowed disabled:opacity-50"
-                  style={{ background: 'var(--accent-primary)' }}
-                  title={upgradeQuery.data?.message || 'Pull latest configured image'}
+                  onClick={() => setNotificationsOpen((open) => !open)}
+                  className="shell-tic relative"
+                  aria-label="Notifications"
                 >
-                  {pullMutation.isPending ? <RefreshCw size={14} className="animate-spin" /> : <UploadCloud size={14} />}
-                  Upgrade
+                  <Bell size={16} />
+                  {unreadCount > 0 ? <span className="shell-tic-dot" /> : null}
                 </button>
-              ) : null}
-
-              {signedIn && !isDemoMode ? (
-                <div className="relative">
-                  <button
-                    type="button"
-                    onClick={() => setNotificationsOpen((open) => !open)}
-                    className="relative flex h-8 w-8 items-center justify-center rounded-[var(--radius-md)] border text-[var(--text-secondary)] hover:text-[var(--text-primary)]"
-                    style={{ borderColor: 'var(--border-subtle)' }}
-                    aria-label="Notifications"
-                  >
-                    <Bell size={15} />
-                    {unreadCount > 0 ? (
-                      <span className="absolute -right-1 -top-1 flex h-4 min-w-4 items-center justify-center rounded-full bg-[var(--accent-primary)] px-1 text-[10px] font-semibold text-[var(--accent-on)]">
-                        {unreadCount > 99 ? '99+' : unreadCount}
-                      </span>
-                    ) : null}
-                  </button>
 
                   {notificationsOpen ? (
                     <div className="absolute right-0 top-10 z-50 w-80 rounded-[var(--radius-lg)] border border-[var(--border-subtle)] bg-[var(--surface-card)] p-3 shadow-2xl">
@@ -566,13 +569,21 @@ export function PlatformShell() {
                   ) : null}
                 </div>
               ) : null}
-            </div>
+
+            <button
+              type="button"
+              onClick={() => setTheme((current) => (current === 'dark' ? 'light' : 'dark'))}
+              className="shell-tic"
+              title={theme === 'dark' ? 'Switch to light mode' : 'Switch to dark mode'}
+            >
+              {theme === 'dark' ? <Sun size={16} /> : <Moon size={16} />}
+            </button>
           </header>
 
           <header className="md:hidden sticky top-0 z-50 border-b border-[var(--border-subtle)] bg-[var(--bg-base)]/85 backdrop-blur-2xl">
             <div className="flex items-center justify-between p-4">
-              <NavLink to={href('/projects')} className="flex items-center gap-3">
-                <div className="flex h-9 w-9 items-center justify-center rounded-[var(--radius-md)] bg-[var(--accent-primary)] text-[var(--accent-on)]">
+              <NavLink to={href('/')} className="flex items-center gap-3">
+                <div className="shell-mark flex h-9 w-9 items-center justify-center">
                   <Container size={16} />
                 </div>
                 <span className="font-headline font-semibold text-[var(--text-primary)]">Containr</span>
@@ -613,6 +624,17 @@ export function PlatformShell() {
           </main>
         </div>
       </div>
+
+      <CommandPalette
+        open={paletteOpen}
+        onClose={() => setPaletteOpen(false)}
+        onNavigate={paletteNavigate}
+        openTargets={paletteProjects.map((p) => ({
+          label: p.name,
+          target: `/projects/${p.id}`,
+          description: 'Project workspace',
+        }))}
+      />
     </div>
   );
 }
diff --git a/app/frontend/src/features/activity/pages/ActivityPage.tsx b/app/frontend/src/features/activity/pages/ActivityPage.tsx
index 1fcae08..8e06e77 100644
--- a/app/frontend/src/features/activity/pages/ActivityPage.tsx
+++ b/app/frontend/src/features/activity/pages/ActivityPage.tsx
@@ -6,6 +6,7 @@ import { type FilterConfig } from '@/lib/dynamic-filter';
 import { useDynamicFilter, useFilterState } from '@/lib/use-dynamic-filter';
 import { formatRelative } from '@/lib/time';
 import { DemoRestricted, FilterBar } from '@/shared/components';
+import { QuietBtn, SCard, SPageHead, SPill } from '@/shared/components/sentry';
 import {
   Activity, AlertCircle, CheckCircle2, Database, GitBranch, Info, Key,
   Loader2, Package, Projector, Rocket, Shield, User, Users, Wrench,
@@ -24,6 +25,10 @@ const SEVERITY_STYLE: Record<string, { icon: typeof Info; cls: string; dot: stri
   info:    { icon: Info,          cls: 'text-[var(--accent-primary)]', dot: 'bg-[var(--accent-primary)]' },
 };
 
+const SEV_TONE: Record<string, 'err' | 'warn' | 'ok' | 'info'> = {
+  error: 'err', warning: 'warn', success: 'ok', info: 'info',
+};
+
 const SCHEMA: FilterConfig<ActivityEntry>[] = [
   { key: 'q', label: 'events', type: 'search', searchFields: ['label', 'action', 'user_email'] },
   {
@@ -58,46 +63,33 @@ export function ActivityPage() {
 
   return (
     <div className="min-h-screen">
-      <div className="border-b border-[var(--border-subtle)]">
-        <div className="w-full px-8 py-5">
-          <h1 className="v-title">Activity<span className="v-cursor">_</span></h1>
-          <p className="v-mono mt-1.5 text-[11px] text-[var(--text-tertiary)]">
-            platform events across your visible projects
-          </p>
-        </div>
+      <div className="w-full px-4 pt-6 sm:px-8">
+        <SPageHead
+          title="Activity"
+          titleAccent="_"
+          sub="Platform events across your visible projects"
+          actions={query.isFetching ? <Loader2 size={14} className="animate-spin text-[var(--text-muted)]" /> : undefined}
+        />
       </div>
 
-      <div className="px-4 py-6 sm:px-8 space-y-4">
-        <div className="flex items-start gap-3">
-          <div className="flex-1">
+      <div className="px-4 sm:px-8 space-y-4">
+        <SCard icon={<Activity />} title="Event Feed" accent={`${entries.length} events`} pad={false}>
+          <div className="px-4 pt-1 pb-3">
             <FilterBar {...filter} />
           </div>
-          {query.isFetching && <Loader2 size={14} className="animate-spin text-[var(--text-muted)] mt-3" />}
-        </div>
+          <div className="divide-y divide-[var(--border-subtle)] border-t border-[var(--border-subtle)]">
+            {query.isLoading && <p className="px-5 py-8 text-xs text-[var(--text-muted)]">Loading…</p>}
+            {!query.isLoading && entries.length === 0 && (
+              <p className="px-5 py-8 text-xs text-[var(--text-muted)]">No events yet — activity appears here as you deploy, configure, and manage services.</p>
+            )}
+            {entries.map((e) => <Entry key={e.id} entry={e} />)}
+          </div>
+        </SCard>
 
-        <div className="panel p-0 divide-y divide-[var(--border-subtle)]">
-          {query.isLoading && <p className="px-5 py-8 text-xs text-[var(--text-muted)]">Loading…</p>}
-          {!query.isLoading && entries.length === 0 && (
-            <p className="px-5 py-8 text-xs text-[var(--text-muted)]">No events yet — activity appears here as you deploy, configure, and manage services.</p>
-          )}
-          {entries.map((e) => <Entry key={e.id} entry={e} />)}
-        </div>
-
-        <div className="flex items-center gap-3">
-          <button
-            disabled={page <= 1}
-            onClick={() => setPage(page - 1)}
-            className="v-mono text-[11px] px-3 py-1.5 rounded-md border border-[var(--border-subtle)] text-[var(--text-muted)] disabled:opacity-40 hover:text-[var(--text-primary)]"
-          >
-            newer
-          </button>
-          <button
-            disabled={!query.data?.has_more}
-            onClick={() => setPage(page + 1)}
-            className="v-mono text-[11px] px-3 py-1.5 rounded-md border border-[var(--border-subtle)] text-[var(--text-muted)] disabled:opacity-40 hover:text-[var(--text-primary)]"
-          >
-            older
-          </button>
+        <div className="flex items-center gap-2.5">
+          <QuietBtn disabled={page <= 1} onClick={() => setPage(page - 1)}>← newer</QuietBtn>
+          <QuietBtn disabled={!query.data?.has_more} onClick={() => setPage(page + 1)}>older →</QuietBtn>
+          <span className="v-mono text-[10.5px] text-[var(--text-muted)]">page {page}</span>
         </div>
       </div>
     </div>
@@ -108,14 +100,14 @@ function Entry({ entry }: { entry: ActivityEntry }) {
   const Cat = CATEGORY_ICONS[entry.category] ?? Activity;
   const sev = SEVERITY_STYLE[entry.severity] ?? SEVERITY_STYLE.info;
   return (
-    <div className="flex items-center gap-3 px-5 py-3">
-      <div className={`w-8 h-8 rounded-md bg-[var(--bg-elevated)] flex items-center justify-center ${sev.cls}`}>
-        <Cat size={15} />
+    <div className="flex items-center gap-3 px-4 py-3 hover:bg-[var(--tint-03)] transition-colors">
+      <div className={`s-ibox ${sev.cls}`} style={{ width: 30, height: 30 }}>
+        <Cat size={14} />
       </div>
       <div className="flex-1 min-w-0">
         <div className="flex items-center gap-2">
-          <span className="text-[13px] text-[var(--text-primary)] truncate">{entry.label || entry.action}</span>
-          <span className={`v-mono text-[9px] uppercase px-1.5 py-0.5 rounded ${sev.cls} bg-[var(--bg-elevated)]`}>{entry.severity}</span>
+          <span className="text-[13px] font-medium text-[var(--text-primary)] truncate">{entry.label || entry.action}</span>
+          <SPill tone={SEV_TONE[entry.severity] ?? 'info'}>{entry.severity}</SPill>
         </div>
         <div className="v-mono text-[10px] text-[var(--text-muted)] mt-0.5">
           {entry.category} · {entry.action}{entry.user_email ? ` · ${entry.user_email}` : ''}
diff --git a/app/frontend/src/features/admin/pages/AdminPage.tsx b/app/frontend/src/features/admin/pages/AdminPage.tsx
index 85e47c5..720f020 100644
--- a/app/frontend/src/features/admin/pages/AdminPage.tsx
+++ b/app/frontend/src/features/admin/pages/AdminPage.tsx
@@ -38,6 +38,7 @@ import {
 import { useAuthSession } from '@/lib/use-auth-session';
 import { useDemoMode } from '@/lib/demo-mode';
 import { DemoRestricted, LoadingState, useToast } from '@/shared/components';
+import { GhostBtn, QuietBtn, SPageHead, SPill } from '@/shared/components/sentry';
 
 const statLabels: Record<string, string> = {
   users: 'Users',
@@ -199,7 +200,7 @@ export function AdminPage() {
     return (
       <div className="mx-auto max-w-xl px-5 py-24 text-center">
         <ShieldCheck size={28} className="mx-auto text-[var(--error)]" />
-        <h1 className="mt-4 text-lg font-semibold text-[var(--text-primary)]">Admin access required</h1>
+        <h1 className="mt-4 font-headline text-lg font-semibold text-[var(--text-primary)]">Admin access required</h1>
         <p className="mt-2 text-sm text-[var(--text-secondary)]">
           This area is restricted to platform administrators.
         </p>
@@ -216,74 +217,74 @@ export function AdminPage() {
   const invites = invitesQuery.data ?? [];
 
   return (
-    <div className="mx-auto max-w-6xl px-5 py-8">
-      <div className="mb-8">
-        <h1 className="text-[24px] font-bold tracking-tight text-[var(--text-primary)]">Admin console</h1>
-        <p className="mt-1 text-sm text-[var(--text-secondary)]">
-          Platform overview, project approvals, and user management.
-        </p>
-      </div>
+    <div className="w-full px-4 py-6 sm:px-8">
+      <SPageHead
+        title="Admin Console"
+        titleAccent="_"
+        sub="Platform overview, project approvals, and user management."
+      />
 
-      <div className="grid grid-cols-4 gap-3 max-lg:grid-cols-3 max-sm:grid-cols-2">
+      <div className="grid grid-cols-4 gap-3.5 max-lg:grid-cols-3 max-sm:grid-cols-2">
         {Object.entries(statLabels).map(([key, label]) => (
-          <div
-            key={key}
-            className="rounded-[var(--radius-lg)] border border-[var(--border-subtle)] bg-[var(--surface-card)] px-4 py-3.5"
-          >
-            <p className="text-[20px] font-bold tabular-nums text-[var(--text-primary)]">{stats[key] ?? 0}</p>
-            <p className="mt-0.5 text-[10.5px] uppercase tracking-wider text-[var(--text-tertiary)]">{label}</p>
+          <div key={key} className="s-stat">
+            <div className="px-4 pb-1 pt-4">
+              <p className="text-[10.5px] font-medium uppercase tracking-[0.08em] text-[var(--text-tertiary)]">{label}</p>
+              <p className="font-headline mt-3 text-[28px] font-bold leading-none tabular-nums text-[var(--text-primary)]">
+                {stats[key] ?? 0}
+              </p>
+            </div>
+            <div className="s-stat-foot mt-3">
+              <span>total</span>
+            </div>
           </div>
         ))}
       </div>
 
-      <section className="mt-8">
-        <div className="mb-3 flex items-center gap-2">
-          <Clock size={15} className="text-[var(--warning)]" />
-          <h2 className="text-[15px] font-semibold text-[var(--text-primary)]">Pending approvals</h2>
-          {pending.length > 0 ? (
-            <span className="rounded-full bg-[var(--warning-soft)] px-2 py-0.5 text-[10.5px] font-semibold text-[var(--warning)]">
-              {pending.length}
-            </span>
-          ) : null}
+      <section className="s-card !p-0 mt-6 overflow-hidden">
+        <div className="s-cardhead border-b border-[var(--border-subtle)]">
+          <span className="s-ibox"><Clock /></span>
+          <h2 className="s-t">Pending Approvals</h2>
+          <span className="s-trail">
+            {pending.length > 0 ? <SPill tone="warn">{pending.length}</SPill> : null}
+          </span>
         </div>
         {pending.length > 0 ? (
-          <div className="overflow-hidden rounded-[var(--radius-lg)] border border-[var(--border-subtle)] bg-[var(--surface-card)]">
+          <div>
             {pending.map((project) => (
               <div
                 key={project.id}
                 className="flex items-center gap-4 border-b border-[var(--border-subtle)] px-4 py-3 last:border-b-0"
               >
-                <FolderKanban size={15} className="shrink-0 text-[var(--text-tertiary)]" />
+                <span className="s-ibox !h-7 !w-7"><FolderKanban /></span>
                 <div className="min-w-0 flex-1">
                   <Link to={`/projects/${project.id}`} className="text-[13.5px] font-medium text-[var(--text-primary)] hover:underline">
                     {project.name}
                   </Link>
                   <p className="truncate text-[11.5px] text-[var(--text-tertiary)]">{project.description || 'No description'}</p>
                 </div>
-                <button
-                  type="button"
+                <GhostBtn
                   onClick={() => approvalMutation.mutate({ id: project.id, approved: true })}
                   disabled={approvalMutation.isPending}
-                  className="inline-flex items-center gap-1.5 rounded-[var(--radius-md)] bg-[var(--accent-primary)] px-3 py-1.5 text-[12px] font-semibold text-[var(--accent-on)] disabled:opacity-50"
                 >
                   <CheckCircle2 size={13} /> Approve
-                </button>
+                </GhostBtn>
               </div>
             ))}
           </div>
         ) : (
-          <div className="rounded-[var(--radius-lg)] border border-[var(--border-subtle)] bg-[var(--surface-card)] px-4 py-6 text-center text-[13px] text-[var(--text-tertiary)]">
+          <p className="px-4 py-6 text-center text-[13px] text-[var(--text-tertiary)]">
             Nothing waiting for approval.
-          </div>
+          </p>
         )}
       </section>
 
-      <section className="mt-8">
-        <div className="mb-3 flex items-center gap-2">
-          <FolderKanban size={15} className="text-[var(--accent-primary)]" />
-          <h2 className="text-[15px] font-semibold text-[var(--text-primary)]">All projects</h2>
+      <section className="s-card !p-0 mt-6 overflow-hidden">
+        <div className="s-cardhead border-b border-[var(--border-subtle)]">
+          <span className="s-ibox"><FolderKanban /></span>
+          <h2 className="s-t">All Projects</h2>
+          <span className="s-trail"><span className="s-chip" style={{ cursor: 'default' }}>{allProjects.length}</span></span>
         </div>
-        <div className="overflow-hidden rounded-[var(--radius-lg)] border border-[var(--border-subtle)] bg-[var(--surface-card)]">
+        <div>
           {allProjects.map((project) => (
             <div
               key={project.id}
@@ -297,22 +298,16 @@ export function AdminPage() {
                   {project.stats?.service_count ?? 0} services · {project.stats?.deployment_count ?? 0} deploys
                 </p>
               </div>
-              <span
-                className={`rounded-full px-2.5 py-0.5 text-[10.5px] font-semibold ${
-                  project.isApproved
-                    ? 'bg-[var(--success-soft)] text-[var(--success)]'
-                    : 'bg-[var(--warning-soft)] text-[var(--warning)]'
-                }`}
-              >
+              <SPill tone={project.isApproved ? 'ok' : 'warn'}>
                 {project.isApproved ? 'public' : 'pending'}
-              </span>
+              </SPill>
               <button
                 type="button"
                 onClick={() => {
                   setEditingProject(project);
                   setEditForm({ name: project.name, description: project.description ?? '' });
                 }}
-                className="inline-flex items-center gap-1 rounded-[var(--radius-md)] border border-[var(--border-default)] px-2.5 py-1.5 text-[12px] font-medium text-[var(--text-secondary)] hover:text-[var(--text-primary)]"
+                className="s-icon-btn"
                 title="Edit project"
               >
                 <Pencil size={12} />
@@ -325,19 +320,17 @@ export function AdminPage() {
                   }
                 }}
                 disabled={deleteMutation.isPending}
-                className="inline-flex items-center gap-1 rounded-[var(--radius-md)] border border-[var(--error)] px-2.5 py-1.5 text-[12px] font-medium text-[var(--error)] hover:bg-[var(--error-soft)] disabled:opacity-50"
+                className="s-icon-btn !text-[var(--text-tertiary)] hover:!text-[var(--error)] disabled:opacity-40"
                 title="Delete project"
               >
                 <Trash2 size={12} />
               </button>
-              <button
-                type="button"
+              <QuietBtn
                 onClick={() => approvalMutation.mutate({ id: project.id, approved: !project.isApproved })}
                 disabled={approvalMutation.isPending}
-                className="rounded-[var(--radius-md)] border border-[var(--border-default)] px-3 py-1.5 text-[12px] font-medium text-[var(--text-secondary)] hover:text-[var(--text-primary)] disabled:opacity-50"
               >
                 {project.isApproved ? 'Unapprove' : 'Approve'}
-              </button>
+              </QuietBtn>
             </div>
           ))}
           {allProjects.length === 0 ? (
@@ -346,12 +339,13 @@ export function AdminPage() {
         </div>
       </section>
 
-      <section className="mt-8">
-        <div className="mb-3 flex items-center gap-2">
-          <Megaphone size={15} className="text-[var(--accent-primary)]" />
-          <h2 className="text-[15px] font-semibold text-[var(--text-primary)]">Announcements</h2>
+      <section className="s-card !p-0 mt-6 overflow-hidden">
+        <div className="s-cardhead border-b border-[var(--border-subtle)]">
+          <span className="s-ibox"><Megaphone /></span>
+          <h2 className="s-t">Announcements</h2>
+          <span className="s-trail"><span className="s-chip" style={{ cursor: 'default' }}>{banners.length}</span></span>
         </div>
-        <div className="overflow-hidden rounded-[var(--radius-lg)] border border-[var(--border-subtle)] bg-[var(--surface-card)]">
+        <div>
           <div className="flex flex-wrap items-center gap-2 border-b border-[var(--border-subtle)] px-4 py-3">
             <input
               value={bannerForm.title}
@@ -375,14 +369,12 @@ export function AdminPage() {
               <option value="warning">warning</option>
               <option value="error">error</option>
             </select>
-            <button
-              type="button"
+            <GhostBtn
               onClick={() => bannerCreateMutation.mutate()}
               disabled={bannerCreateMutation.isPending || bannerForm.title.trim().length === 0}
-              className="rounded-[var(--radius-md)] bg-[var(--accent-primary)] px-4 py-2 text-[12px] font-semibold text-[var(--accent-on)] disabled:opacity-50"
             >
               {bannerCreateMutation.isPending ? 'Publishing…' : 'Publish'}
-            </button>
+            </GhostBtn>
           </div>
           {banners.map((banner) => (
             <div
@@ -396,14 +388,12 @@ export function AdminPage() {
                   {banner.body ? ` · ${banner.body}` : ''}
                 </p>
               </div>
-              <button
-                type="button"
+              <QuietBtn
                 onClick={() => bannerToggleMutation.mutate({ id: banner.id, active: !banner.active })}
                 disabled={bannerToggleMutation.isPending}
-                className="rounded-[var(--radius-md)] border border-[var(--border-default)] px-3 py-1.5 text-[12px] font-medium text-[var(--text-secondary)] hover:text-[var(--text-primary)] disabled:opacity-50"
               >
                 {banner.active ? 'Deactivate' : 'Activate'}
-              </button>
+              </QuietBtn>
               <button
                 type="button"
                 onClick={() => {
@@ -412,7 +402,7 @@ export function AdminPage() {
                   }
                 }}
                 disabled={bannerDeleteMutation.isPending}
-                className="inline-flex items-center gap-1 rounded-[var(--radius-md)] border border-[var(--error)] px-2.5 py-1.5 text-[12px] font-medium text-[var(--error)] hover:bg-[var(--error-soft)] disabled:opacity-50"
+                className="s-icon-btn !text-[var(--text-tertiary)] hover:!text-[var(--error)] disabled:opacity-40"
                 title="Delete banner"
               >
                 <Trash2 size={12} />
@@ -425,12 +415,13 @@ export function AdminPage() {
         </div>
       </section>
 
-      <section className="mt-8">
-        <div className="mb-3 flex items-center gap-2">
-          <UserPlus size={15} className="text-[var(--accent-primary)]" />
-          <h2 className="text-[15px] font-semibold text-[var(--text-primary)]">Team invites</h2>
+      <section className="s-card !p-0 mt-6 overflow-hidden">
+        <div className="s-cardhead border-b border-[var(--border-subtle)]">
+          <span className="s-ibox"><UserPlus /></span>
+          <h2 className="s-t">Team Invites</h2>
+          <span className="s-trail"><span className="s-chip" style={{ cursor: 'default' }}>{invites.length}</span></span>
         </div>
-        <div className="overflow-hidden rounded-[var(--radius-lg)] border border-[var(--border-subtle)] bg-[var(--surface-card)]">
+        <div>
           <div className="flex flex-wrap items-center gap-2 border-b border-[var(--border-subtle)] px-4 py-3">
             <input
               value={inviteEmail}
@@ -439,35 +430,25 @@ export function AdminPage() {
               type="email"
               className="h-9 min-w-64 flex-1 rounded-[var(--radius-md)] border border-[var(--border-subtle)] bg-[var(--surface-muted)] px-3 text-sm focus:border-[var(--accent-primary)]"
             />
-            <button
-              type="button"
+            <GhostBtn
               onClick={() => inviteCreateMutation.mutate()}
               disabled={inviteCreateMutation.isPending}
-              className="rounded-[var(--radius-md)] bg-[var(--accent-primary)] px-4 py-2 text-[12px] font-semibold text-[var(--accent-on)] disabled:opacity-50"
             >
               {inviteCreateMutation.isPending ? 'Creating…' : 'Create invite link'}
-            </button>
+            </GhostBtn>
           </div>
           {inviteLink ? (
             <div className="flex items-center gap-2 border-b border-[var(--border-subtle)] bg-[var(--accent-primary-soft)] px-4 py-2.5">
-              <code className="min-w-0 flex-1 truncate text-[12px] text-[var(--accent-primary)]">{inviteLink}</code>
-              <button
-                type="button"
+              <code className="v-mono min-w-0 flex-1 truncate text-[12px] text-[var(--accent-primary)]">{inviteLink}</code>
+              <QuietBtn
                 onClick={() => {
                   navigator.clipboard?.writeText(inviteLink);
                   showToast('success', 'Link copied');
                 }}
-                className="inline-flex items-center gap-1 rounded-[var(--radius-md)] border border-[var(--border-default)] px-2.5 py-1 text-[11px] font-medium text-[var(--text-secondary)] hover:text-[var(--text-primary)]"
               >
                 <Copy size={11} /> Copy
-              </button>
-              <button
-                type="button"
-                onClick={() => setInviteLink(null)}
-                className="text-[11px] text-[var(--text-tertiary)] hover:text-[var(--text-secondary)]"
-              >
-                Dismiss
-              </button>
+              </QuietBtn>
+              <QuietBtn onClick={() => setInviteLink(null)}>Dismiss</QuietBtn>
             </div>
           ) : null}
           {invites.map((invite) => {
@@ -486,26 +467,17 @@ export function AdminPage() {
                     expires {new Date(invite.expires_at).toLocaleString()}
                   </p>
                 </div>
-                <span
-                  className={`rounded-full px-2.5 py-0.5 text-[10.5px] font-semibold ${
-                    used
-                      ? 'bg-[var(--surface-muted)] text-[var(--text-tertiary)]'
-                      : expired
-                        ? 'bg-[var(--error-soft)] text-[var(--error)]'
-                        : 'bg-[var(--success-soft)] text-[var(--success)]'
-                  }`}
-                >
+                <SPill tone={used ? 'off' : expired ? 'err' : 'ok'}>
                   {used ? 'used' : expired ? 'expired' : 'open'}
-                </span>
+                </SPill>
                 {!used ? (
-                  <button
-                    type="button"
+                  <QuietBtn
                     onClick={() => inviteRevokeMutation.mutate(invite.id)}
                     disabled={inviteRevokeMutation.isPending}
-                    className="rounded-[var(--radius-md)] border border-[var(--error)] px-2.5 py-1.5 text-[12px] font-medium text-[var(--error)] hover:bg-[var(--error-soft)] disabled:opacity-50"
+                    className="hover:!text-[var(--error)] hover:!border-[var(--error)]"
                   >
                     Revoke
-                  </button>
+                  </QuietBtn>
                 ) : null}
               </div>
             );
@@ -516,12 +488,13 @@ export function AdminPage() {
         </div>
       </section>
 
-      <section className="mt-8 pb-10">
-        <div className="mb-3 flex items-center gap-2">
-          <Users size={15} className="text-[var(--accent-tertiary)]" />
-          <h2 className="text-[15px] font-semibold text-[var(--text-primary)]">Users</h2>
+      <section className="s-card !p-0 mt-6 mb-10 overflow-hidden">
+        <div className="s-cardhead border-b border-[var(--border-subtle)]">
+          <span className="s-ibox"><Users /></span>
+          <h2 className="s-t">Users</h2>
+          <span className="s-trail"><span className="s-chip" style={{ cursor: 'default' }}>{users.length}</span></span>
         </div>
-        <div className="overflow-hidden rounded-[var(--radius-lg)] border border-[var(--border-subtle)] bg-[var(--surface-card)]">
+        <div>
           {users.map((user) => (
             <UserRow
               key={user.id}
@@ -540,30 +513,29 @@ export function AdminPage() {
 
       {impersonation ? (
         <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/60 p-4 backdrop-blur-sm">
-          <div className="w-full max-w-lg overflow-hidden rounded-[var(--radius-lg)] border border-[var(--border-subtle)] bg-[var(--bg-base)] shadow-2xl">
-            <div className="border-b border-[var(--border-subtle)] px-5 py-4">
-              <h2 className="text-[15px] font-semibold text-[var(--text-primary)]">
-                Impersonating {impersonation.user.email}
-              </h2>
-              <p className="text-xs text-[var(--text-tertiary)]">
-                Token valid until {new Date(impersonation.expires_at).toLocaleString()} — audit-logged.
-              </p>
+          <div className="w-full max-w-lg s-card !p-0 overflow-hidden">
+            <div className="s-cardhead border-b border-[var(--border-subtle)]">
+              <span className="s-ibox"><ShieldCheck /></span>
+              <h2 className="s-t">Impersonating {impersonation.user.email}</h2>
+              <span className="s-trail">
+                <span className="v-mono text-[10.5px] text-[var(--text-muted)]">
+                  expires {new Date(impersonation.expires_at).toLocaleString()}
+                </span>
+              </span>
             </div>
             <div className="space-y-3 px-5 py-4">
-              <div className="flex items-center gap-2 rounded-[var(--radius-md)] border border-[var(--border-subtle)] bg-[var(--surface-muted)] px-3 py-2.5">
-                <code className="min-w-0 flex-1 truncate text-[12px] text-[var(--text-primary)]">
+              <div className="s-inset flex items-center gap-2 px-3 py-2.5">
+                <code className="v-mono min-w-0 flex-1 truncate text-[12px] text-[var(--text-primary)]">
                   {impersonation.token}
                 </code>
-                <button
-                  type="button"
+                <QuietBtn
                   onClick={() => {
                     navigator.clipboard?.writeText(impersonation.token);
                     showToast('success', 'Token copied');
                   }}
-                  className="inline-flex shrink-0 items-center gap-1 rounded-[var(--radius-md)] border border-[var(--border-default)] px-2.5 py-1 text-[11px] font-medium text-[var(--text-secondary)] hover:text-[var(--text-primary)]"
                 >
                   <Copy size={11} /> Copy
-                </button>
+                </QuietBtn>
               </div>
               <p className="text-[12px] leading-relaxed text-[var(--text-tertiary)]">
                 Use it as a bearer token — e.g. <code className="text-[var(--text-secondary)]">CONTAINR_TOKEN=&lt;token&gt;
@@ -572,13 +544,7 @@ export function AdminPage() {
               </p>
             </div>
             <div className="flex items-center justify-end gap-2 border-t border-[var(--border-subtle)] px-5 py-3.5">
-              <button
-                type="button"
-                onClick={() => setImpersonation(null)}
-                className="rounded-[var(--radius-md)] bg-[var(--accent-primary)] px-4 py-2 text-xs font-semibold text-[var(--accent-on)]"
-              >
-                Done
-              </button>
+              <GhostBtn onClick={() => setImpersonation(null)}>Done</GhostBtn>
             </div>
           </div>
         </div>
@@ -586,10 +552,13 @@ export function AdminPage() {
 
       {editingProject ? (
         <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/60 p-4 backdrop-blur-sm">
-          <div className="w-full max-w-md overflow-hidden rounded-[var(--radius-lg)] border border-[var(--border-subtle)] bg-[var(--bg-base)] shadow-2xl">
-            <div className="border-b border-[var(--border-subtle)] px-5 py-4">
-              <h2 className="text-[15px] font-semibold text-[var(--text-primary)]">Edit project</h2>
-              <p className="text-xs text-[var(--text-tertiary)]">Admin edit — changes apply immediately.</p>
+          <div className="w-full max-w-md s-card !p-0 overflow-hidden">
+            <div className="s-cardhead border-b border-[var(--border-subtle)]">
+              <span className="s-ibox"><Pencil /></span>
+              <h2 className="s-t">Edit Project</h2>
+              <span className="s-trail">
+                <span className="v-mono text-[10.5px] text-[var(--text-muted)]">admin edit</span>
+              </span>
             </div>
             <div className="space-y-4 px-5 py-4">
               <div>
@@ -611,21 +580,13 @@ export function AdminPage() {
               </div>
             </div>
             <div className="flex items-center justify-end gap-2 border-t border-[var(--border-subtle)] px-5 py-3.5">
-              <button
-                type="button"
-                onClick={() => setEditingProject(null)}
-                className="rounded-[var(--radius-md)] px-3.5 py-2 text-xs font-medium text-[var(--text-secondary)] hover:bg-[var(--surface-muted)]"
-              >
-                Cancel
-              </button>
-              <button
-                type="button"
+              <QuietBtn onClick={() => setEditingProject(null)}>Cancel</QuietBtn>
+              <GhostBtn
                 onClick={() => editMutation.mutate()}
                 disabled={editMutation.isPending || editForm.name.trim().length < 2}
-                className="rounded-[var(--radius-md)] bg-[var(--accent-primary)] px-4 py-2 text-xs font-semibold text-[var(--accent-on)] disabled:opacity-50"
               >
                 {editMutation.isPending ? 'Saving…' : 'Save'}
-              </button>
+              </GhostBtn>
             </div>
           </div>
         </div>
@@ -660,32 +621,22 @@ function UserRow({
         <p className="truncate text-[11.5px] text-[var(--text-tertiary)]">{user.email}</p>
       </div>
       {user.is_admin ? (
-        <span className="inline-flex items-center gap-1 rounded-full bg-[var(--accent-primary-soft)] px-2.5 py-0.5 text-[10.5px] font-semibold text-[var(--accent-primary)]">
-          <ShieldCheck size={11} /> admin
-        </span>
+        <SPill tone="info"><ShieldCheck size={10} /> admin</SPill>
       ) : null}
       {onImpersonate ? (
-        <button
-          type="button"
-          onClick={onImpersonate}
-          className="rounded-[var(--radius-md)] border border-[var(--border-default)] px-3 py-1.5 text-[12px] font-medium text-[var(--text-secondary)] hover:text-[var(--text-primary)]"
-        >
-          Impersonate
-        </button>
+        <QuietBtn onClick={onImpersonate}>Impersonate</QuietBtn>
       ) : null}
-      <button
-        type="button"
+      <QuietBtn
         onClick={() => onToggle(!user.is_admin)}
         disabled={pending || isSelf}
         title={isSelf ? 'You cannot change your own admin flag' : undefined}
-        className="rounded-[var(--radius-md)] border border-[var(--border-default)] px-3 py-1.5 text-[12px] font-medium text-[var(--text-secondary)] hover:text-[var(--text-primary)] disabled:cursor-not-allowed disabled:opacity-40"
       >
         {user.is_admin ? (
           <span className="inline-flex items-center gap-1"><XCircle size={12} /> Revoke</span>
         ) : (
           'Make admin'
         )}
-      </button>
+      </QuietBtn>
     </div>
   );
 }
diff --git a/app/frontend/src/features/audit/pages/AuditLogsPage.tsx b/app/frontend/src/features/audit/pages/AuditLogsPage.tsx
index c4c6439..7e27ca1 100644
--- a/app/frontend/src/features/audit/pages/AuditLogsPage.tsx
+++ b/app/frontend/src/features/audit/pages/AuditLogsPage.tsx
@@ -6,7 +6,9 @@ import { type FilterConfig } from '@/lib/dynamic-filter';
 import { useDynamicFilter } from '@/lib/use-dynamic-filter';
 import { formatDate, formatRelative } from '@/lib/time';
 import { DemoRestricted, FilterBar } from '@/shared/components';
+import { QuietBtn, SCard, SPageHead, SPill, STable, type SCol } from '@/shared/components/sentry';
 import { ScrollText, ChevronLeft, ChevronRight, Loader2 } from 'lucide-react';
+import type { AuditLogEntity } from '@/lib/api-client';
 
 const PAGE_SIZE = 50;
 
@@ -72,109 +74,101 @@ export function AuditLogsPage() {
   const hasNext = logs.length === PAGE_SIZE;
   const hasFilters = filter.activeCount > 0;
 
+  const cols: SCol<AuditLogEntity>[] = [
+    {
+      key: 'time', label: 'Time', width: '100px', sortable: false,
+      render: (log) => (
+        <span className="v-mono text-[11px] text-[var(--text-tertiary)]" title={log.createdAt ? formatDate(log.createdAt) : undefined}>
+          {log.createdAt ? formatRelative(log.createdAt) : '—'}
+        </span>
+      ),
+    },
+    {
+      key: 'actor', label: 'Actor', width: 'minmax(140px,1.1fr)',
+      sortValue: (log) => log.userEmail ?? log.userId ?? 'system',
+      render: (log) => (
+        <span className="text-[12px] text-[var(--text-primary)] truncate">
+          {log.userEmail || (log.userId ? log.userId.slice(0, 8) : 'system')}
+        </span>
+      ),
+    },
+    {
+      key: 'resource', label: 'Resource', width: 'minmax(120px,1fr)',
+      sortValue: (log) => log.resource ?? '',
+      render: (log) => <span className="v-mono text-[11.5px] text-[var(--text-secondary)]">{log.resource}</span>,
+    },
+    {
+      key: 'action', label: 'Action', width: 'minmax(130px,1fr)',
+      sortValue: (log) => log.action ?? '',
+      render: (log) => <SPill tone="info">{log.action}</SPill>,
+    },
+    {
+      key: 'rid', label: 'Resource ID', width: 'minmax(110px,0.8fr)', sortable: false,
+      render: (log) => (
+        <span className="v-mono text-[10.5px] text-[var(--text-tertiary)] truncate block" title={log.resourceId}>
+          {log.resourceId || '—'}
+        </span>
+      ),
+    },
+    {
+      key: 'ip', label: 'IP', width: '110px', sortable: false,
+      render: (log) => <span className="v-mono text-[10.5px] text-[var(--text-tertiary)]">{log.ipAddress?.replace(/\/\d+$/, '') || '—'}</span>,
+    },
+    {
+      key: 'details', label: 'Details', width: 'minmax(160px,1.2fr)', sortable: false,
+      render: (log) => (
+        <span className="v-mono text-[10.5px] text-[var(--text-tertiary)] truncate block" title={log.details}>
+          {log.details && log.details !== '{}' ? log.details : '—'}
+        </span>
+      ),
+    },
+  ];
+
   return (
     <div className="min-h-screen">
-      <div className="border-b border-[var(--border-subtle)]">
-        <div className="w-full px-8 py-5">
-          <h1 className="v-title">
-            Audit Logs<span className="v-cursor">_</span>
-          </h1>
-          <p className="v-mono mt-1.5 text-[11px] text-[var(--text-tertiary)]">
-            Every authenticated action recorded by the platform
-          </p>
-        </div>
+      <div className="w-full px-4 pt-6 sm:px-8">
+        <SPageHead
+          title="Audit Logs"
+          titleAccent="_"
+          sub="Every authenticated action recorded by the platform"
+        />
       </div>
 
-      <div className="w-full px-4 py-6 sm:px-8">
-        <section className="panel p-6">
-          <FilterBar {...filter} />
-
-          <div className="overflow-x-auto">
-            <table className="w-full text-sm">
-              <thead>
-                <tr className="border-b border-[var(--border-subtle)] text-left">
-                  <th className="px-3 py-2.5 font-medium uppercase tracking-wider text-xs text-[var(--text-muted)]">Time</th>
-                  <th className="px-3 py-2.5 font-medium uppercase tracking-wider text-xs text-[var(--text-muted)]">Actor</th>
-                  <th className="px-3 py-2.5 font-medium uppercase tracking-wider text-xs text-[var(--text-muted)]">Resource</th>
-                  <th className="px-3 py-2.5 font-medium uppercase tracking-wider text-xs text-[var(--text-muted)]">Action</th>
-                  <th className="px-3 py-2.5 font-medium uppercase tracking-wider text-xs text-[var(--text-muted)]">Resource ID</th>
-                  <th className="px-3 py-2.5 font-medium uppercase tracking-wider text-xs text-[var(--text-muted)]">IP</th>
-                  <th className="px-3 py-2.5 font-medium uppercase tracking-wider text-xs text-[var(--text-muted)]">Details</th>
-                </tr>
-              </thead>
-              <tbody className="divide-y divide-[var(--border-subtle)]">
-                {logsQuery.isLoading ? (
-                  <tr>
-                    <td colSpan={7} className="px-4 py-10 text-center text-[var(--text-muted)]">
-                      <Loader2 size={18} className="animate-spin inline-block" />
-                    </td>
-                  </tr>
-                ) : logsQuery.isError ? (
-                  <tr>
-                    <td colSpan={7} className="px-4 py-10 text-center text-[var(--error)]">
-                      Failed to load audit logs.
-                    </td>
-                  </tr>
-                ) : logs.length === 0 ? (
-                  <tr>
-                    <td colSpan={7} className="px-4 py-10 text-center">
-                      <ScrollText size={20} className="inline-block mb-2 text-[var(--text-muted)]" />
-                      <p className="text-[var(--text-secondary)]">No audit events{hasFilters ? ' match these filters' : ' recorded yet'}.</p>
-                    </td>
-                  </tr>
-                ) : (
-                  logs.map((log) => (
-                    <tr key={log.id} className="hover:bg-[var(--surface-muted)]/50 transition-colors">
-                      <td className="px-3 py-2.5 whitespace-nowrap text-[var(--text-tertiary)]" title={log.createdAt ? formatDate(log.createdAt) : undefined}>
-                        {log.createdAt ? formatRelative(log.createdAt) : '—'}
-                      </td>
-                      <td className="px-3 py-2.5 text-[var(--text-primary)]">
-                        {log.userEmail || (log.userId ? log.userId.slice(0, 8) : 'system')}
-                      </td>
-                      <td className="px-3 py-2.5 mono text-[var(--text-secondary)]">{log.resource}</td>
-                      <td className="px-3 py-2.5">
-                        <span className="px-2 py-0.5 rounded-[var(--radius-sm)] bg-[var(--accent-primary-soft)] text-xs font-medium text-[var(--accent-primary)]">
-                          {log.action}
-                        </span>
-                      </td>
-                      <td className="px-3 py-2.5 mono text-xs text-[var(--text-tertiary)] max-w-[140px] truncate" title={log.resourceId}>
-                        {log.resourceId || '—'}
-                      </td>
-                      <td className="px-3 py-2.5 mono text-xs text-[var(--text-tertiary)]">{log.ipAddress?.replace(/\/\d+$/, '') || '—'}</td>
-                      <td className="px-3 py-2.5 mono text-xs text-[var(--text-tertiary)] max-w-[220px] truncate" title={log.details}>
-                        {log.details && log.details !== '{}' ? log.details : '—'}
-                      </td>
-                    </tr>
-                  ))
-                )}
-              </tbody>
-            </table>
+      <div className="w-full px-4 sm:px-8">
+        <SCard icon={<ScrollText />} title="Event Log" accent={`page ${page}`} pad={false}>
+          <div className="px-4 pt-1 pb-3">
+            <FilterBar {...filter} />
           </div>
-
-          <div className="mt-4 flex items-center justify-between">
-            <p className="text-xs text-[var(--text-muted)]">
+          <div className="border-t border-[var(--border-subtle)] px-4 overflow-x-auto">
+            {logsQuery.isLoading ? (
+              <div className="py-10 text-center text-[var(--text-muted)]">
+                <Loader2 size={18} className="animate-spin inline-block" />
+              </div>
+            ) : logsQuery.isError ? (
+              <div className="py-10 text-center text-[var(--error)]">Failed to load audit logs.</div>
+            ) : logs.length === 0 ? (
+              <div className="py-10 text-center">
+                <div className="s-ibox mx-auto mb-2"><ScrollText /></div>
+                <p className="text-[var(--text-secondary)] text-sm">No audit events{hasFilters ? ' match these filters' : ' recorded yet'}.</p>
+              </div>
+            ) : (
+              <STable cols={cols} rows={logs} rowKey={(l) => l.id} />
+            )}
+          </div>
+          <div className="flex items-center justify-between px-4 py-3 border-t border-[var(--border-subtle)]">
+            <p className="v-mono text-[10.5px] text-[var(--text-muted)]">
               Page {page}{logs.length > 0 ? ` — ${logs.length} entries` : ''}
             </p>
             <div className="flex items-center gap-2">
-              <button
-                onClick={() => setPage((p) => Math.max(1, p - 1))}
-                disabled={page <= 1}
-                className="flex items-center gap-1 px-3 py-1.5 rounded-[var(--radius-md)] border border-[var(--border-subtle)] text-xs font-medium text-[var(--text-secondary)] hover:border-[var(--border-default)] disabled:opacity-40 transition-colors"
-              >
-                <ChevronLeft size={12} />
-                Prev
-              </button>
-              <button
-                onClick={() => setPage((p) => p + 1)}
-                disabled={!hasNext}
-                className="flex items-center gap-1 px-3 py-1.5 rounded-[var(--radius-md)] border border-[var(--border-subtle)] text-xs font-medium text-[var(--text-secondary)] hover:border-[var(--border-default)] disabled:opacity-40 transition-colors"
-              >
-                Next
-                <ChevronRight size={12} />
-              </button>
+              <QuietBtn onClick={() => setPage((p) => Math.max(1, p - 1))} disabled={page <= 1}>
+                <ChevronLeft size={12} /> Prev
+              </QuietBtn>
+              <QuietBtn onClick={() => setPage((p) => p + 1)} disabled={!hasNext}>
+                Next <ChevronRight size={12} />
+              </QuietBtn>
             </div>
           </div>
-        </section>
+        </SCard>
       </div>
     </div>
   );
diff --git a/app/frontend/src/features/auth/pages.tsx b/app/frontend/src/features/auth/pages.tsx
index c3d6e54..1eb3da5 100644
--- a/app/frontend/src/features/auth/pages.tsx
+++ b/app/frontend/src/features/auth/pages.tsx
@@ -13,15 +13,16 @@ import {
 } from '@/lib/auth-client';
 import { acceptInvite, getInvite } from '@/lib/api-client';
 import { useAuthSession } from '@/lib/use-auth-session';
+import { GhostBtn, QuietBtn } from '@/shared/components/sentry';
 
 function sanitizeRedirect(raw: string | null): string {
   if (!raw) {
-    return '/projects';
+    return '/';
   }
 
   const value = raw.trim();
   if (!value.startsWith('/') || value.startsWith('//')) {
-    return '/projects';
+    return '/';
   }
 
   return value;
@@ -54,9 +55,11 @@ function AuthCard({
 }) {
   return (
     <div className="w-full max-w-[400px]">
-      <div className="rounded-[var(--radius-xl)] border border-[var(--border-subtle)] bg-[var(--surface-card)]/95 p-8 shadow-2xl shadow-black/50 backdrop-blur-xl">
-        <h2 className="font-headline text-xl font-semibold text-[var(--text-primary)]">{title}</h2>
-        <p className="mb-6 mt-1.5 text-sm text-[var(--text-secondary)]">{subtitle}</p>
+      <div className="s-card shadow-2xl shadow-black/50">
+        <div className="s-cardhead mb-1">
+          <h2 className="font-headline text-[17px] font-semibold text-[var(--text-primary)]">{title}</h2>
+        </div>
+        <p className="mb-6 v-mono text-[11.5px] text-[var(--text-tertiary)]">{subtitle}</p>
         {children}
       </div>
     </div>
@@ -67,19 +70,14 @@ function AuthLayout({ children }: { children: React.ReactNode }) {
   return (
     <div className="relative min-h-screen overflow-hidden bg-[var(--bg-void)]">
       <div className="subtle-grid absolute inset-0" />
-      <div className="ambient-glow" />
-      <div
-        className="absolute left-1/2 top-0 h-[420px] w-[720px] -translate-x-1/2 -translate-y-1/2 rounded-full"
-        style={{ background: 'radial-gradient(ellipse at center, rgba(180,227,74,0.10) 0%, transparent 65%)' }}
-      />
       <div className="relative flex min-h-screen flex-col items-center justify-center px-5 py-10">
         <div className="mb-8 flex flex-col items-center">
           <img src="/containr.svg" alt="Containr" className="h-14 w-14" />
           <span className="mt-4 font-headline text-2xl font-bold tracking-tight text-[var(--text-primary)]">Containr</span>
-          <span className="mt-1 text-xs text-[var(--text-muted)]">Self-hosted container platform</span>
+          <span className="mt-1 v-mono text-[11px] uppercase tracking-[0.14em] text-[var(--text-muted)]">Self-hosted container platform</span>
         </div>
         {children}
-        <p className="mt-8 text-center text-[11px] text-[var(--text-muted)]">
+        <p className="mt-8 text-center v-mono text-[10.5px] text-[var(--text-muted)]">
           Sessions are cookie-based · first account becomes platform owner
         </p>
       </div>
@@ -89,8 +87,8 @@ function AuthLayout({ children }: { children: React.ReactNode }) {
 
 function AuthErrorNotice({ message }: { message: string }) {
   return (
-    <div className="mb-4 flex items-start gap-2 rounded-[var(--radius-md)] border border-[var(--error-soft)] bg-[var(--error-soft)] px-3 py-2.5 text-sm text-[var(--error)]">
-      <AlertCircle size={16} className="mt-0.5 shrink-0" />
+    <div className="mb-4 s-inset flex items-start gap-2 !border-[var(--error)]/30 px-3 py-2.5 text-[12.5px] text-[var(--error)]">
+      <AlertCircle size={15} className="mt-0.5 shrink-0" />
       <span>{message}</span>
     </div>
   );
@@ -98,7 +96,7 @@ function AuthErrorNotice({ message }: { message: string }) {
 
 function AuthInfoNotice({ message }: { message: string }) {
   return (
-    <div className="mb-4 rounded-[var(--radius-md)] border border-[var(--success-soft)] bg-[var(--success-soft)] px-3 py-2.5 text-sm text-[var(--success)]">
+    <div className="mb-4 s-inset !border-[var(--success)]/30 px-3 py-2.5 text-[12.5px] text-[var(--success)]">
       {message}
     </div>
   );
@@ -206,15 +204,10 @@ export function SignInPage() {
             />
           </label>
 
-          <button
-            type="submit"
-            disabled={isSubmitting || sessionQuery.isPending}
-            className="mt-1 inline-flex h-10 w-full items-center justify-center gap-2 rounded-[var(--radius-md)] text-sm font-semibold text-[var(--accent-on)] shadow-lg transition-all disabled:cursor-not-allowed disabled:opacity-60"
-            style={{ background: 'var(--accent-primary)' }}
-          >
+          <GhostBtn type="submit" disabled={isSubmitting || sessionQuery.isPending} className="!h-10 w-full justify-center">
             {isSubmitting ? <Loader2 size={15} className="animate-spin" /> : <Mail size={15} />}
             Continue
-          </button>
+          </GhostBtn>
         </form>
 
         {providers.length > 0 ? (
@@ -227,24 +220,22 @@ export function SignInPage() {
 
             <div className="grid gap-2 sm:grid-cols-2">
               {providers.includes('github') ? (
-                <button
-                  type="button"
+                <QuietBtn
                   onClick={() => void signInWithGitHubProvider()}
-                  className="inline-flex h-10 items-center justify-center gap-2 rounded-[var(--radius-md)] border border-[var(--border-subtle)] bg-[var(--surface-muted)] text-sm font-medium text-[var(--text-primary)] transition-colors hover:border-[var(--border-default)]"
+                  className="!h-10 justify-center text-sm"
                 >
                   <Github size={15} />
                   GitHub
-                </button>
+                </QuietBtn>
               ) : null}
               {providers.includes('google') ? (
-                <button
-                  type="button"
+                <QuietBtn
                   onClick={() => void signInWithGoogleProvider()}
-                  className="inline-flex h-10 items-center justify-center gap-2 rounded-[var(--radius-md)] border border-[var(--border-subtle)] bg-[var(--surface-muted)] text-sm font-medium text-[var(--text-primary)] transition-colors hover:border-[var(--border-default)]"
+                  className="!h-10 justify-center text-sm"
                 >
                   <GoogleMark />
                   Google
-                </button>
+                </QuietBtn>
               ) : null}
             </div>
           </>
@@ -280,7 +271,7 @@ export function AcceptInvitePage() {
   const [isSubmitting, setIsSubmitting] = useState(false);
 
   if (sessionQuery.data) {
-    return <Navigate to="/projects" replace />;
+    return <Navigate to="/" replace />;
   }
 
   const boundEmail = inviteQuery.data?.email ?? undefined;
@@ -297,7 +288,7 @@ export function AcceptInvitePage() {
       // account, sign-in creates the browser session.
       await signInWithEmail(effectiveEmail.trim(), password);
       await queryClient.invalidateQueries({ queryKey: ['auth-session'] });
-      navigate('/projects', { replace: true });
+      navigate('/', { replace: true });
     } catch (exception) {
       setError(exception instanceof Error ? exception.message : 'Failed to accept invite');
     } finally {
@@ -369,15 +360,10 @@ export function AcceptInvitePage() {
               />
             </label>
 
-            <button
-              type="submit"
-              disabled={isSubmitting}
-              className="mt-1 inline-flex h-10 w-full items-center justify-center gap-2 rounded-[var(--radius-md)] text-sm font-semibold text-[var(--accent-on)] shadow-lg transition-all disabled:cursor-not-allowed disabled:opacity-60"
-              style={{ background: 'var(--accent-primary)' }}
-            >
+            <GhostBtn type="submit" disabled={isSubmitting} className="!h-10 w-full justify-center">
               {isSubmitting ? <Loader2 size={15} className="animate-spin" /> : <User2 size={15} />}
               Accept invite
-            </button>
+            </GhostBtn>
           </form>
         ) : null}
 
@@ -487,15 +473,10 @@ export function SignUpPage() {
             />
           </label>
 
-          <button
-            type="submit"
-            disabled={isSubmitting || sessionQuery.isPending}
-            className="mt-1 inline-flex h-10 w-full items-center justify-center gap-2 rounded-[var(--radius-md)] text-sm font-semibold text-[var(--accent-on)] shadow-lg transition-all disabled:cursor-not-allowed disabled:opacity-60"
-            style={{ background: 'var(--accent-primary)' }}
-          >
+          <GhostBtn type="submit" disabled={isSubmitting || sessionQuery.isPending} className="!h-10 w-full justify-center">
             {isSubmitting ? <Loader2 size={15} className="animate-spin" /> : <User2 size={15} />}
             Create Account
-          </button>
+          </GhostBtn>
         </form>
 
         <div className="mt-5 flex items-center justify-between text-xs text-[var(--text-secondary)]">
diff --git a/app/frontend/src/features/builds/pages/BuildsPage.tsx b/app/frontend/src/features/builds/pages/BuildsPage.tsx
index 2bdf1ad..9933742 100644
--- a/app/frontend/src/features/builds/pages/BuildsPage.tsx
+++ b/app/frontend/src/features/builds/pages/BuildsPage.tsx
@@ -14,6 +14,18 @@ import { useDynamicFilter, useFilterState } from '@/lib/use-dynamic-filter';
 import { FilterBar } from '@/shared/components';
 import { demoBuilds } from '@/lib/demo-data';
 import { formatRelative } from '@/lib/time';
+import {
+  SCard,
+  SPageHead,
+  SPill,
+  SStat,
+  STable,
+  IconBtn,
+  QuietBtn,
+  Ticks,
+  type SCol,
+} from '@/shared/components/sentry';
+import { statusTone } from '@/shared/components/sentry-utils';
 import {
   Check,
   X,
@@ -24,8 +36,6 @@ import {
   Box,
   Sparkles,
   Filter,
-  Circle,
-  HardDrive,
 } from 'lucide-react';
 
 const statusOptions: Array<{ value: '' | BuildStatus; label: string }> = [
@@ -50,26 +60,11 @@ const BUILD_SCHEMA: FilterConfig<BuildEntity>[] = [
   },
 ];
 
-function StatusBadge({ status }: { status: BuildStatus }) {
-  const config = {
-    success: { color: 'var(--success)', bg: 'var(--success-soft)', Icon: Check, animate: false },
-    failed: { color: 'var(--error)', bg: 'var(--error-soft)', Icon: X, animate: false },
-    running: { color: 'var(--warning)', bg: 'var(--warning-soft)', Icon: Loader2, animate: true },
-    pending: { color: 'var(--text-tertiary)', bg: 'var(--surface-muted)', Icon: Clock, animate: false },
-    cancelled: { color: 'var(--text-tertiary)', bg: 'var(--surface-muted)', Icon: X, animate: false },
-  }[status] || { color: 'var(--text-tertiary)', bg: 'var(--surface-muted)', Icon: Circle, animate: false };
-
-  const { Icon } = config;
-
-  return (
-    <div 
-      className="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-xs font-medium"
-      style={{ background: config.bg, color: config.color }}
-    >
-      <Icon size={12} className={config.animate ? 'animate-spin' : ''} />
-      {status}
-    </div>
-  );
+function BuildIcon({ status }: { status: BuildStatus }) {
+  if (status === 'success') return <Check size={14} className="text-[var(--success)]" />;
+  if (status === 'failed') return <X size={14} className="text-[var(--error)]" />;
+  if (status === 'running') return <Loader2 size={14} className="text-[var(--warning)] animate-spin" />;
+  return <Clock size={14} className="text-[var(--text-tertiary)]" />;
 }
 
 function bytesToHumanReadable(bytes: number): string {
@@ -149,109 +144,113 @@ export function BuildsPage() {
     return { running, success, failed, total: builds.length };
   }, [builds]);
 
+  const buildCols: SCol<BuildEntity>[] = [
+    {
+      key: 'build', label: 'Build', width: 'minmax(220px,1.4fr)',
+      sortValue: (b) => b.id,
+      render: (b) => (
+        <span className="flex items-center gap-2.5 min-w-0">
+          <span className="s-ibox"><BuildIcon status={b.status} /></span>
+          <span className="min-w-0">
+            <span className="block v-mono text-[12px] font-medium text-[var(--text-primary)] truncate">{b.id}</span>
+            <span className="block v-mono text-[10.5px] text-[var(--text-tertiary)] truncate">
+              {b.imageName || '—'}{b.imageTag ? `:${b.imageTag}` : ''}
+            </span>
+          </span>
+        </span>
+      ),
+    },
+    {
+      key: 'status', label: 'Status', width: '110px',
+      sortValue: (b) => b.status,
+      render: (b) => <SPill tone={statusTone(b.status)}>{b.status}</SPill>,
+    },
+    {
+      key: 'progress', label: 'Progress', width: '1fr',
+      sortValue: (b) => b.progress,
+      render: (b) =>
+        b.status === 'running' || b.status === 'pending' ? (
+          <span className="flex items-center gap-2.5">
+            <Ticks pct={b.progress} count={40} />
+            <span className="v-mono text-[10.5px] text-[var(--text-tertiary)]">{b.progress}%</span>
+          </span>
+        ) : (
+          <span className="v-mono text-[10.5px] text-[var(--text-muted)]">—</span>
+        ),
+    },
+    {
+      key: 'size', label: 'Size', width: '90px',
+      sortValue: (b) => b.size,
+      render: (b) => <span className="v-mono text-[11.5px] text-[var(--text-secondary)]">{bytesToHumanReadable(b.size)}</span>,
+    },
+    {
+      key: 'service', label: 'Service', width: '1fr',
+      sortValue: (b) => b.serviceId ?? '',
+      render: (b) => <span className="v-mono text-[11px] text-[var(--text-tertiary)] truncate">{b.serviceId || '—'}</span>,
+    },
+    {
+      key: 'when', label: 'Started', width: '90px',
+      sortValue: (b) => b.startedAt ?? '',
+      render: (b) => <span className="v-mono text-[11px] text-[var(--text-tertiary)]">{b.startedAt ? formatRelative(b.startedAt) : '—'}</span>,
+    },
+  ];
+
   return (
     <div className="min-h-screen">
-      {/* Header */}
-      <div className="border-b border-[var(--border-subtle)] bg-[var(--bg-base)]/50 backdrop-blur-sm">
-        <div className="w-full px-8 py-4">
-          <div className="flex items-center justify-between gap-4">
-            <div>
-              <h1 className="v-title">Build Pipeline<span className="v-cursor">_</span></h1>
-              <p className="text-sm text-[var(--text-secondary)]">Monitor build progress and manage jobs</p>
-            </div>
-
-            <div className="flex items-center gap-4">
-              <div className="flex items-center gap-2 text-sm">
-                <div className={`w-2 h-2 rounded-full ${liveStatus === 'live' ? 'bg-[var(--success)] animate-pulse' : 'bg-[var(--text-muted)]'}`} />
+      <div className="w-full px-4 pt-6 sm:px-8">
+        <SPageHead
+          title="Build Pipeline"
+          titleAccent="_"
+          sub="Monitor build progress and manage jobs"
+          actions={
+            <>
+              <div className="flex items-center gap-2 text-[11px] v-mono">
+                <div className={`w-1.5 h-1.5 rounded-full ${liveStatus === 'live' ? 'bg-[var(--success)] animate-pulse' : 'bg-[var(--text-muted)]'}`} />
                 <span className={liveStatus === 'live' ? 'text-[var(--success)]' : 'text-[var(--text-muted)]'}>
-                  {liveStatus === 'live' ? 'Live' : liveStatus === 'offline' ? 'Reconnecting...' : 'Polling'}
+                  {liveStatus === 'live' ? 'live' : liveStatus === 'offline' ? 'reconnecting' : 'polling'}
                 </span>
               </div>
-              <button
-                onClick={() => queryClient.invalidateQueries({ queryKey: ['builds-page'] })}
-                className="flex items-center gap-2 h-9 px-4 rounded-[var(--radius-md)] border border-[var(--border-subtle)] text-sm font-medium hover:border-[var(--border-default)] transition-colors"
-              >
+              <IconBtn onClick={() => queryClient.invalidateQueries({ queryKey: ['builds-page'] })} title="Refresh builds">
                 <RefreshCw size={14} />
-                Refresh
-              </button>
-            </div>
-          </div>
-        </div>
+              </IconBtn>
+            </>
+          }
+        />
       </div>
 
       {/* Demo Mode Banner */}
       {isDemoMode && (
         <div className="w-full px-8 py-4">
-          <div className="px-4 py-3 rounded-[var(--radius-md)] border border-[var(--warning-soft)] bg-[var(--warning-soft)]/50">
-            <div className="flex items-center gap-2 text-sm text-[var(--warning)]">
-              <Sparkles size={16} />
-              <span>Demo mode active — using sample data</span>
-            </div>
+          <div className="s-inset flex items-center gap-2 text-xs text-[var(--warning)]">
+            <Sparkles size={13} />
+            Demo mode active — using sample data
           </div>
         </div>
       )}
 
-      {/* Stats Overview */}
-      <div className="w-full px-4 py-6 sm:px-8">
-        <div className="grid grid-cols-2 lg:grid-cols-4 gap-4">
-          <div className="panel p-4">
-            <div className="flex items-center justify-between mb-3">
-              <div className="w-8 h-8 rounded-[var(--radius-sm)] bg-[var(--accent-primary-soft)] flex items-center justify-center">
-                <Box size={16} className="text-[var(--accent-primary)]" />
-              </div>
-            </div>
-            <p className="text-2xl font-semibold text-[var(--text-primary)]">{stats.total}</p>
-            <p className="text-xs text-[var(--text-muted)] mt-1">Total Builds</p>
-          </div>
-          <div className="panel p-4">
-            <div className="flex items-center justify-between mb-3">
-              <div className="w-8 h-8 rounded-[var(--radius-sm)] bg-[var(--warning-soft)] flex items-center justify-center">
-                <Loader2 size={16} className="text-[var(--warning)]" />
-              </div>
-            </div>
-            <p className="text-2xl font-semibold text-[var(--warning)]">{stats.running}</p>
-            <p className="text-xs text-[var(--text-muted)] mt-1">In Progress</p>
-          </div>
-          <div className="panel p-4">
-            <div className="flex items-center justify-between mb-3">
-              <div className="w-8 h-8 rounded-[var(--radius-sm)] bg-[var(--success-soft)] flex items-center justify-center">
-                <Check size={16} className="text-[var(--success)]" />
-              </div>
-            </div>
-            <p className="text-2xl font-semibold text-[var(--success)]">{stats.success}</p>
-            <p className="text-xs text-[var(--text-muted)] mt-1">Successful</p>
-          </div>
-          <div className="panel p-4">
-            <div className="flex items-center justify-between mb-3">
-              <div className="w-8 h-8 rounded-[var(--radius-sm)] bg-[var(--error-soft)] flex items-center justify-center">
-                <X size={16} className="text-[var(--error)]" />
-              </div>
-            </div>
-            <p className="text-2xl font-semibold text-[var(--error)]">{stats.failed}</p>
-            <p className="text-xs text-[var(--text-muted)] mt-1">Failed</p>
-          </div>
+      <div className="w-full px-4 py-6 sm:px-8 space-y-4">
+        <div className="grid grid-cols-2 lg:grid-cols-4 gap-3.5">
+          <SStat icon={<Box />} label="Total Builds" value={stats.total} foot="all jobs" />
+          <SStat icon={<Loader2 />} label="In Progress" value={stats.running} foot="building now" />
+          <SStat icon={<Check />} label="Successful" value={stats.success} foot="completed ok" />
+          <SStat icon={<X />} label="Failed" value={stats.failed} foot="need attention" />
         </div>
-      </div>
 
-      {/* Filters */}
-      <div className="w-full px-8">
-        <div className="panel p-4">
-          <div className="flex items-center gap-2">
-            <Filter size={16} className="text-[var(--text-tertiary)]" />
-            <span className="text-sm font-medium text-[var(--text-secondary)]">Filters</span>
-          </div>
-          <div className="flex flex-wrap items-end gap-3 mt-3">
-            <div className="flex-1">
+        <SCard icon={<Filter />} title="Filters"
+          trail={<span className="v-mono text-[10.5px] text-[var(--text-muted)]">{builds.length} jobs shown</span>}
+        >
+          <div className="flex flex-wrap items-end gap-3">
+            <div className="flex-1 min-w-[280px]">
               <FilterBar {...filter} />
             </div>
             <div>
-              <label className="block text-xs font-medium uppercase tracking-wider text-[var(--text-muted)] mb-2">
+              <label className="block text-[10.5px] font-medium uppercase tracking-wider text-[var(--text-muted)] mb-1.5">
                 Page Size
               </label>
               <select
                 value={String(limit)}
                 onChange={(e) => setLimit(Number(e.target.value))}
-                className="w-full h-10 px-3 rounded-[var(--radius-md)] border border-[var(--border-subtle)] bg-[var(--surface-muted)] text-sm focus:border-[var(--accent-primary)] transition-colors"
+                className="s-chip !cursor-pointer appearance-none pr-6"
               >
                 <option value="20">20</option>
                 <option value="50">50</option>
@@ -259,127 +258,41 @@ export function BuildsPage() {
               </select>
             </div>
           </div>
-        </div>
-      </div>
+        </SCard>
 
-      {/* Build Table */}
-      <div className="w-full px-4 py-6 sm:px-8">
-        <div className="panel overflow-hidden">
+        <SCard icon={<Box />} title="Build Queue" accent={`${builds.length} jobs`} pad={false}
+          trail={
+            <IconBtn onClick={() => queryClient.invalidateQueries({ queryKey: ['builds-page'] })} title="Refresh">
+              <RefreshCw size={13} />
+            </IconBtn>
+          }
+        >
           {!isDemoMode && buildsQuery.isLoading ? (
             <div className="p-12 text-center">
               <Loader2 size={24} className="animate-spin mx-auto text-[var(--text-tertiary)]" />
               <p className="mt-3 text-sm text-[var(--text-muted)]">Loading builds...</p>
             </div>
-          ) : null}
-
-          {!isDemoMode && buildsQuery.isError ? (
-            <div className="p-8 text-center">
-              <div className="w-12 h-12 mx-auto mb-4 rounded-full bg-[var(--error-soft)] flex items-center justify-center">
-                <X size={24} className="text-[var(--error)]" />
-              </div>
+          ) : !isDemoMode && buildsQuery.isError ? (
+            <div className="p-10 text-center">
               <p className="text-sm text-[var(--error)]">Failed to load builds</p>
               <p className="text-xs text-[var(--text-muted)] mt-1">{buildsQuery.error instanceof Error ? buildsQuery.error.message : 'Unknown error'}</p>
             </div>
-          ) : null}
-
-          {builds.length === 0 && !buildsQuery.isLoading ? (
+          ) : builds.length === 0 ? (
             <div className="p-12 text-center">
-              <div className="w-12 h-12 mx-auto mb-4 rounded-full bg-[var(--surface-muted)] flex items-center justify-center">
-                <Box size={24} className="text-[var(--text-tertiary)]" />
-              </div>
+              <div className="s-ibox mx-auto mb-3 !w-10 !h-10"><Box /></div>
               <p className="text-sm text-[var(--text-muted)]">No builds match current filters</p>
             </div>
-          ) : null}
-
-          {builds.length > 0 ? (
-            <div className="grid grid-cols-1 lg:grid-cols-2 gap-4 p-4">
-              {builds.map((build) => (
-                <div 
-                  key={build.id} 
-                  className="panel p-4 group hover:border-[var(--accent-primary)]/30 transition-all duration-300 card-lift cursor-pointer"
-                  onClick={() => setSelectedBuild(build)}
-                >
-                  <div className="flex items-start justify-between mb-3">
-                    <div className="flex items-center gap-3">
-                      <div className={`w-10 h-10 rounded-xl flex items-center justify-center ${
-                        build.status === 'success' 
-                          ? 'bg-[var(--success-soft)]' 
-                          : build.status === 'failed'
-                          ? 'bg-[var(--error-soft)]'
-                          : build.status === 'running'
-                          ? 'bg-[var(--warning-soft)]'
-                          : 'bg-[var(--surface-muted)]'
-                      }`}>
-                        {build.status === 'success' && <Check size={18} className="text-[var(--success)]" />}
-                        {build.status === 'failed' && <X size={18} className="text-[var(--error)]" />}
-                        {build.status === 'running' && <Loader2 size={18} className="text-[var(--warning)] animate-spin" />}
-                        {build.status === 'pending' && <Clock size={18} className="text-[var(--text-tertiary)]" />}
-                        {build.status === 'cancelled' && <X size={18} className="text-[var(--text-tertiary)]" />}
-                      </div>
-                      <div>
-                        <p className="mono text-sm font-medium text-[var(--text-primary)]">{build.id}</p>
-                        <div className="flex items-center gap-2 mt-1">
-                          <StatusBadge status={build.status} />
-                          <span className="text-xs text-[var(--text-tertiary)]">
-                            {build.startedAt ? formatRelative(build.startedAt) : '—'}
-                          </span>
-                        </div>
-                      </div>
-                    </div>
-                    
-                    <div className="opacity-0 group-hover:opacity-100 transition-opacity">
-                      <button className="p-2 rounded-lg hover:bg-[var(--surface-muted)] text-[var(--text-tertiary)] hover:text-[var(--text-primary)] transition-all">
-                        <FileText size={14} />
-                      </button>
-                    </div>
-                  </div>
-                  
-                  <div className="space-y-3">
-                    {/* Image info */}
-                    <div className="flex items-center justify-between text-xs">
-                      <span className="text-[var(--text-tertiary)]">Image</span>
-                      <span className="mono text-[var(--text-secondary)]">
-                        {build.imageName || '—'}:{build.imageTag || 'latest'}
-                      </span>
-                    </div>
-                    
-                    {/* Progress bar */}
-                    {(build.status === 'running' || build.status === 'pending') && (
-                      <div className="space-y-1.5">
-                        <div className="flex items-center justify-between text-xs">
-                          <span className="text-[var(--text-tertiary)]">Progress</span>
-                          <span className="text-[var(--text-secondary)] font-medium">{build.progress}%</span>
-                        </div>
-                        <div className="h-2 rounded-full bg-[var(--surface-muted)] overflow-hidden">
-                          <div
-                            className="h-full rounded-full transition-all duration-300"
-                            style={{ width: `${Math.max(0, Math.min(100, build.progress))}%`, background: 'var(--accent-primary)' }}
-                          />
-                        </div>
-                      </div>
-                    )}
-                    
-                    {/* Size and service */}
-                    <div className="flex items-center justify-between text-xs pt-2 border-t border-[var(--border-subtle)]">
-                      <div className="flex items-center gap-1.5 text-[var(--text-tertiary)]">
-                        <HardDrive size={10} />
-                        <span>{bytesToHumanReadable(build.size)}</span>
-                      </div>
-                      <span className="mono text-[var(--text-tertiary)]">{build.serviceId || '—'}</span>
-                    </div>
-                  </div>
-                  
-                  {/* Error message if present */}
-                  {build.error && (
-                    <div className="mt-3 p-2 rounded-lg bg-[var(--error-soft)]/50 border border-[var(--error)]/20">
-                      <p className="text-xs text-[var(--error)] line-clamp-2">{build.error}</p>
-                    </div>
-                  )}
-                </div>
-              ))}
+          ) : (
+            <div className="px-4">
+              <STable
+                cols={buildCols}
+                rows={builds}
+                rowKey={(b) => b.id}
+                onRowClick={(b) => setSelectedBuild(b)}
+              />
             </div>
-          ) : null}
-        </div>
+          )}
+        </SCard>
       </div>
 
       {/* Error Toast */}
@@ -393,27 +306,21 @@ export function BuildsPage() {
       {selectedBuild && (
         <div className="fixed inset-0 z-50 flex items-center justify-center p-4">
           <div className="absolute inset-0 bg-[var(--bg-void)]/80 backdrop-blur-sm" onClick={() => setSelectedBuild(null)} />
-          <div className="relative w-full max-w-3xl panel p-6">
-            <div className="flex items-center justify-between mb-4">
-              <div className="flex items-center gap-3">
-                <div className="w-10 h-10 rounded-[var(--radius-md)] bg-[var(--accent-primary-soft)] flex items-center justify-center">
-                  <FileText size={20} className="text-[var(--accent-primary)]" />
-                </div>
-                <div>
-                  <h2 className="text-lg font-semibold text-[var(--text-primary)]">Build Logs</h2>
-                  <p className="mono text-xs text-[var(--text-tertiary)]">{selectedBuild.id}</p>
-                </div>
+          <div className="relative w-full max-w-3xl s-card">
+            <div className="s-cardhead">
+              <span className="s-ibox"><FileText /></span>
+              <div>
+                <div className="s-t">Build Logs</div>
+                <div className="v-mono mt-0.5 text-[11px] text-[var(--text-tertiary)]">{selectedBuild.id}</div>
+              </div>
+              <div className="s-trail">
+                <QuietBtn onClick={() => setSelectedBuild(null)}>Close</QuietBtn>
               </div>
-              <button
-                onClick={() => setSelectedBuild(null)}
-                className="px-4 py-2 rounded-[var(--radius-md)] border border-[var(--border-subtle)] text-sm font-medium hover:border-[var(--border-default)] transition-colors"
-              >
-                Close
-              </button>
             </div>
+            <div className="px-4 pb-4">
 
             <div className="rounded-[var(--radius-md)] border border-[var(--border-subtle)] bg-[var(--bg-void)] p-4 max-h-[400px] overflow-auto">
-              <pre className="mono text-xs text-[var(--text-secondary)] whitespace-pre-wrap break-all">
+              <pre className="v-mono text-xs text-[var(--text-secondary)] whitespace-pre-wrap break-all">
                 {isDemoMode
                   ? selectedBuild.log || '[demo] No logs available.'
                   : logsQuery.isLoading
@@ -423,6 +330,7 @@ export function BuildsPage() {
                   : logsQuery.data || '(empty logs)'}
               </pre>
             </div>
+            </div>
           </div>
         </div>
       )}
diff --git a/app/frontend/src/features/dashboard/pages/DashboardPage.tsx b/app/frontend/src/features/dashboard/pages/DashboardPage.tsx
new file mode 100644
index 0000000..432a14c
--- /dev/null
+++ b/app/frontend/src/features/dashboard/pages/DashboardPage.tsx
@@ -0,0 +1,662 @@
+import { useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { useQueries, useQuery } from '@tanstack/react-query';
+import {
+  CartesianGrid,
+  Line,
+  LineChart as RechartsLineChart,
+  ResponsiveContainer,
+  Tooltip,
+  XAxis,
+  YAxis,
+} from 'recharts';
+import {
+  AlertTriangle,
+  Cpu,
+  FolderKanban,
+  HardDrive,
+  MemoryStick,
+  RefreshCw,
+  Rocket,
+  Server,
+  Settings,
+} from 'lucide-react';
+import {
+  getAgentMetrics,
+  getHostMonitoring,
+  listActiveAlerts,
+  listAgents,
+  listProjects,
+  listRecentDeployments,
+  type AgentMetricPoint,
+  type NodeAgentEntity,
+} from '@/lib/api-client';
+import { useAuthSession } from '@/lib/use-auth-session';
+import { useDemoMode } from '@/lib/demo-mode';
+import { demoHostMonitoring, demoProjects } from '@/lib/demo-data';
+import {
+  GhostBtn,
+  IconBtn,
+  MiniBars,
+  SAnomaly,
+  SCard,
+  SLegend,
+  SPageHead,
+  SPill,
+  STable,
+  SStat,
+  Ticks,
+  type SCol,
+} from '@/shared/components/sentry';
+import { statusTone } from '@/shared/components/sentry-utils';
+import { QuietBtn } from '@/shared/components/sentry';
+
+
+/* ------------------------------------------------------------------ */
+/* Demo fixtures — deterministic, clearly sample data.                 */
+/* ------------------------------------------------------------------ */
+
+const demoAgents: NodeAgentEntity[] = [
+  {
+    id: 'demo-node-1',
+    name: 'core-01',
+    hostname: 'core-01.containr.local',
+    ipAddress: '10.0.1.11',
+    port: 9090,
+    status: 'online',
+    version: '0.9.2',
+    capabilities: {
+      containerRuntimes: ['docker'],
+      supportedArchitectures: ['amd64'],
+      maxContainers: 64,
+      storageDriver: 'overlay2',
+      networkPlugins: ['bridge'],
+      features: [],
+    },
+    resources: {
+      cpu: { cores: 8, allocation: 8, usage: 2.6 },
+      memory: { total: 16_662_000_000, allocated: 0, used: 9_832_000_000, available: 6_830_000_000 },
+      storage: { total: 240_000_000_000, allocated: 0, used: 141_000_000_000, available: 99_000_000_000 },
+    },
+    autoPrune: true,
+    schedulable: true,
+    tags: ['prod'],
+    metadata: {},
+    lastHeartbeat: new Date(Date.now() - 42_000).toISOString(),
+  },
+  {
+    id: 'demo-node-2',
+    name: 'edge-01',
+    hostname: 'edge-01.containr.local',
+    ipAddress: '10.0.2.4',
+    port: 9090,
+    status: 'degraded',
+    version: '0.9.2',
+    capabilities: {
+      containerRuntimes: ['docker'],
+      supportedArchitectures: ['arm64'],
+      maxContainers: 32,
+      storageDriver: 'overlay2',
+      networkPlugins: ['bridge'],
+      features: [],
+    },
+    resources: {
+      cpu: { cores: 4, allocation: 4, usage: 3.4 },
+      memory: { total: 8_290_000_000, allocated: 0, used: 7_110_000_000, available: 1_180_000_000 },
+      storage: { total: 120_000_000_000, allocated: 0, used: 98_000_000_000, available: 22_000_000_000 },
+    },
+    autoPrune: false,
+    schedulable: true,
+    tags: ['edge'],
+    metadata: {},
+    lastHeartbeat: new Date(Date.now() - 610_000).toISOString(),
+  },
+];
+
+/* Deterministic pseudo metric series for demo mode (sine + wobble). */
+function demoMetricSeries(seed: number, points = 48): AgentMetricPoint[] {
+  const now = Date.now();
+  return Array.from({ length: points }, (_, i) => {
+    const t = now - (points - 1 - i) * 30 * 60_000;
+    const wave = Math.sin(i / 5.5 + seed) * 14 + Math.sin(i / 2.3 + seed * 2) * 6;
+    const cpu = Math.max(4, Math.min(96, 42 + wave + seed * 9));
+    const mem = Math.max(20, Math.min(95, 55 + wave / 2 + seed * 6));
+    return {
+      timestamp: new Date(t).toISOString(),
+      cpu: { usage: cpu, usage_percent: cpu, cores: 8 },
+      memory: { usage: mem, usage_percent: mem, limit: 100, available: 100 - mem },
+      system_load: { load_1m: cpu / 12, load_5m: cpu / 14, load_15m: cpu / 16 },
+      container_count: 12 + seed * 5,
+    };
+  });
+}
+
+const demoDeployRows = [
+  { id: 'd1', serviceId: 's1', serviceName: 'api-gateway', projectName: 'Core Platform', status: 'deployed', imageName: undefined, startedAt: new Date(Date.now() - 240_000).toISOString(), completedAt: undefined, createdAt: '' },
+  { id: 'd2', serviceId: 's2', serviceName: 'web-frontend', projectName: 'Core Platform', status: 'building', imageName: undefined, startedAt: new Date(Date.now() - 390_000).toISOString(), completedAt: undefined, createdAt: '' },
+  { id: 'd3', serviceId: 's3', serviceName: 'batch-evaluator', projectName: 'Inference Lab', status: 'failed', imageName: undefined, startedAt: new Date(Date.now() - 3_900_000).toISOString(), completedAt: undefined, createdAt: '' },
+  { id: 'd4', serviceId: 's4', serviceName: 'marketing-site', projectName: 'Growth Surface', status: 'deployed', imageName: undefined, startedAt: new Date(Date.now() - 7_400_000).toISOString(), completedAt: undefined, createdAt: '' },
+];
+
+/* ------------------------------------------------------------------ */
+
+const SERIES_COLORS = ['#38bdf8', '#1cd8ec', '#a271d9', '#45e896'];
+const MAX_CHART_AGENTS = 4;
+
+type RangeKey = '1h' | '24h' | '7d';
+
+function formatRelative(date?: string): string {
+  if (!date) return '—';
+  const diff = Date.now() - new Date(date).getTime();
+  if (diff < 0 || diff > 365 * 86_400_000) return '—';
+  if (diff < 60_000) return 'just now';
+  if (diff < 3_600_000) return `${Math.floor(diff / 60_000)}m ago`;
+  if (diff < 86_400_000) return `${Math.floor(diff / 3_600_000)}h ago`;
+  return `${Math.floor(diff / 86_400_000)}d ago`;
+}
+
+const fmtGB = (v: number) => `${(v / (1024 * 1024 * 1024)).toFixed(0)}G`;
+const pct = (used: number, total: number) => (total > 0 ? Math.round((used / total) * 100) : 0);
+
+/* Merge per-agent metric arrays into recharts rows keyed by index. */
+function mergeSeries(seriesList: { key: string; points: AgentMetricPoint[] }[]) {
+  const len = Math.max(...seriesList.map((s) => s.points.length), 0);
+  return Array.from({ length: len }, (_, i) => {
+    const row: Record<string, number | string> = {};
+    seriesList.forEach((s) => {
+      const p = s.points[Math.min(i, s.points.length - 1)];
+      if (p) {
+        row.t = row.t ?? new Date(p.timestamp).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
+        row[s.key] = Math.round(p.cpu.usage_percent * 10) / 10;
+      }
+    });
+    return row;
+  });
+}
+
+function ChartTooltip({ active, payload, label }: {
+  active?: boolean;
+  payload?: Array<{ name: string; value: number; color: string }>;
+  label?: string;
+}) {
+  if (!active || !payload?.length) return null;
+  return (
+    <div className="s-tip">
+      <div className="s-tip-t">{label}</div>
+      {payload.map((p) => (
+        <div key={p.name} className="s-tip-r">
+          <span><i style={{ background: p.color }} />{p.name}</span>
+          <b>{p.value}<small>%</small></b>
+        </div>
+      ))}
+    </div>
+  );
+}
+
+export function DashboardPage() {
+  const navigate = useNavigate();
+  const isDemoMode = useDemoMode();
+  const sessionQuery = useAuthSession({ enabled: !isDemoMode });
+  const signedIn = isDemoMode || Boolean(sessionQuery.data);
+  const userName = sessionQuery.data?.user.name;
+  const firstName = isDemoMode ? 'Operator' : userName?.split(' ')[0];
+  const [range, setRange] = useState<RangeKey>('24h');
+
+  const projectsQuery = useQuery({
+    queryKey: ['projects'],
+    enabled: !isDemoMode,
+    queryFn: () => listProjects(),
+  });
+  const hostQuery = useQuery({
+    queryKey: ['host-monitoring'],
+    enabled: !isDemoMode,
+    queryFn: getHostMonitoring,
+    refetchInterval: 30_000,
+  });
+  // Agents are admin-scoped; failures collapse to an empty list, never an error state.
+  const agentsQuery = useQuery({
+    queryKey: ['agents'],
+    enabled: !isDemoMode && signedIn,
+    queryFn: listAgents,
+    retry: false,
+    staleTime: 30_000,
+  });
+  const deploysQuery = useQuery({
+    queryKey: ['recent-deploys', 50],
+    enabled: !isDemoMode,
+    queryFn: () => listRecentDeployments(50),
+    refetchInterval: 30_000,
+  });
+  const alertsQuery = useQuery({
+    queryKey: ['ha-alerts'],
+    enabled: !isDemoMode && signedIn,
+    queryFn: listActiveAlerts,
+    retry: false,
+  });
+
+  const projects = isDemoMode ? demoProjects : projectsQuery.data ?? [];
+  const host = isDemoMode ? demoHostMonitoring : hostQuery.data;
+  const agents = isDemoMode ? demoAgents : agentsQuery.data ?? [];
+  const deployments = isDemoMode ? demoDeployRows : deploysQuery.data ?? [];
+  const alerts = isDemoMode ? [{ id: 'a1', severity: 'warning' as const, message: 'Disk I/O spikes at 03:22' }] : alertsQuery.data ?? [];
+
+  const chartAgents = agents.slice(0, MAX_CHART_AGENTS);
+  const metricQueries = useQueries({
+    queries: chartAgents.map((a) => ({
+      queryKey: ['agent-metrics', a.id, range],
+      queryFn: () => getAgentMetrics(a.id, range),
+      enabled: !isDemoMode && agents.length > 0,
+      staleTime: 60_000,
+      retry: false,
+    })),
+  });
+
+  /* Series: real per-agent CPU%; demo synth; empty otherwise.
+     Plain computation — the compiler memoizes it. */
+  const seriesList = chartAgents.map((a, i) => ({
+    key: a.name || a.hostname || `node-${i + 1}`,
+    points: isDemoMode ? demoMetricSeries(i + 1) : metricQueries[i]?.data ?? [],
+  }));
+  const chartData = {
+    rows: mergeSeries(seriesList),
+    series: seriesList.map((s, i) => ({ key: s.key, color: SERIES_COLORS[i % SERIES_COLORS.length] })),
+    hasData: seriesList.some((s) => s.points.length > 1),
+  };
+
+  const hostLabel = host?.scope === 'docker-desktop-vm' ? 'VM' : 'Host';
+  const cpuPct = host && host.cpu.cores > 0
+    ? Math.min(100, Math.round((host.load.load1m / host.cpu.cores) * 100))
+    : null;
+  const memPct = host ? Math.round(host.memory.usagePercent) : null;
+  const diskPct = host ? Math.round(host.storage.usagePercent) : null;
+
+  const totalServices = projects.reduce((sum, p) => sum + p.stats.service_count, 0);
+  const runningServices = projects.reduce((sum, p) => sum + p.stats.running_services, 0);
+  const onlineAgents = agents.filter((a) => a.status === 'online').length;
+  const succeeded = deployments.filter((d) => !['failed', 'error'].includes((d.status ?? '').toLowerCase())).length;
+
+  const anomalies = [
+    ...(diskPct !== null && diskPct > 85 ? [`Disk usage at ${diskPct}% — prune images or expand volume`] : []),
+    ...(memPct !== null && memPct > 85 ? [`Memory pressure at ${memPct}% — rebalance services`] : []),
+    ...alerts.slice(0, 3).map((a) => a.message).filter((m): m is string => Boolean(m)),
+    ...(deployments.some((d) => (d.status ?? '').toLowerCase() === 'failed')
+      ? [`${deployments.filter((d) => (d.status ?? '').toLowerCase() === 'failed').length} failed deployment${deployments.filter((d) => (d.status ?? '').toLowerCase() === 'failed').length > 1 ? 's' : ''} in the feed`]
+      : []),
+  ];
+
+  const statDefs = [
+    {
+      icon: <Server size={13.5} />,
+      label: 'Active Nodes',
+      value: agents.length > 0 ? onlineAgents : host?.dockerAvailable ? 1 : '—',
+      unit: agents.length > 0 ? `of ${agents.length}` : 'local',
+      ticks: null,
+      foot: agents.length > 0 ? `${agents.length - onlineAgents} offline or degraded` : 'single-host install',
+      delta: undefined,
+    },
+    {
+      icon: <Cpu size={13.5} />,
+      label: `${hostLabel} CPU`,
+      value: cpuPct ?? '—',
+      unit: cpuPct !== null ? '%' : undefined,
+      ticks: cpuPct,
+      foot: host ? `${host.cpu.cores} cores · load avg` : 'no telemetry',
+      delta: undefined,
+    },
+    {
+      icon: <MemoryStick size={13.5} />,
+      label: 'Memory Usage',
+      value: memPct ?? '—',
+      unit: memPct !== null ? '%' : undefined,
+      ticks: memPct,
+      foot: host ? `${fmtGB(host.memory.used)} / ${fmtGB(host.memory.total)} used` : 'no telemetry',
+      delta: undefined,
+    },
+    {
+      icon: <Rocket size={13.5} />,
+      label: 'Deployments',
+      value: deployments.length,
+      unit: 'recent',
+      ticks: null,
+      foot: `${succeeded} succeeded`,
+      delta: deployments.length > 0 ? { dir: 'up' as const, text: `+${deployments.length}` } : undefined,
+    },
+  ];
+
+  type NodeRow = {
+    id: string;
+    name: string;
+    address: string;
+    status: string;
+    cpu: number | null;
+    mem: number | null;
+    disk: number | null;
+    containers: string;
+    heartbeat: string;
+  };
+
+  const nodeRows: NodeRow[] = agents.length > 0
+    ? agents.map((a) => ({
+        id: a.id,
+        name: a.name || a.hostname,
+        address: `${a.ipAddress}${a.port ? `:${a.port}` : ''}`,
+        status: a.status,
+        cpu: a.resources.cpu.cores > 0 ? Math.round((a.resources.cpu.usage / a.resources.cpu.cores) * 100) : null,
+        mem: pct(a.resources.memory.used, a.resources.memory.total),
+        disk: pct(a.resources.storage.used, a.resources.storage.total),
+        containers: String(a.capabilities.maxContainers ? `≤${a.capabilities.maxContainers}` : '—'),
+        heartbeat: formatRelative(a.lastHeartbeat),
+      }))
+    : host
+      ? [{
+          id: 'local',
+          name: host.hostname || 'local host',
+          address: `${host.os}/${host.architecture}`,
+          status: host.dockerAvailable ? 'online' : 'degraded',
+          cpu: cpuPct,
+          mem: memPct,
+          disk: diskPct,
+          containers: host.docker?.containers !== undefined ? String(host.docker.containers) : '—',
+          heartbeat: 'live',
+        }]
+      : [];
+
+  const metricCell = (v: number | null) =>
+    v === null ? <span className="text-[var(--text-muted)]">—</span> : (
+      <span className="inline-flex items-center gap-2">
+        <MiniBars tone={v > 85 ? 'var(--error)' : v > 70 ? 'var(--warning)' : 'var(--accent-primary)'} />
+        <span className="text-[12.5px] font-medium text-[var(--text-primary)]">{v}<small className="text-[var(--text-tertiary)] font-normal">%</small></span>
+      </span>
+    );
+
+  const nodeCols: SCol<NodeRow>[] = [
+    { key: 'name', label: 'Node', width: '1.7fr', sortValue: (r) => r.name,
+      render: (r) => <span className="text-[var(--text-primary)] font-medium">{r.name}</span> },
+    { key: 'address', label: 'Address', width: '1.15fr', sortValue: (r) => r.address,
+      render: (r) => <span className="v-mono text-[11.5px] text-[var(--text-secondary)]">{r.address}</span> },
+    { key: 'status', label: 'Status', width: '0.85fr', sortValue: (r) => r.status,
+      render: (r) => <SPill tone={statusTone(r.status)}>{r.status}</SPill> },
+    { key: 'cpu', label: 'CPU', width: '0.9fr', sortValue: (r) => r.cpu ?? -1, render: (r) => metricCell(r.cpu) },
+    { key: 'mem', label: 'Memory', width: '0.9fr', sortValue: (r) => r.mem ?? -1, render: (r) => metricCell(r.mem) },
+    { key: 'disk', label: 'Disk', width: '0.9fr', sortValue: (r) => r.disk ?? -1, render: (r) => metricCell(r.disk) },
+    { key: 'containers', label: 'Capacity', width: '0.8fr', sortable: false,
+      render: (r) => <span className="v-mono text-[11.5px] text-[var(--text-secondary)]">{r.containers}</span> },
+    { key: 'heartbeat', label: 'Heartbeat', width: '0.8fr', sortable: false,
+      render: (r) => <span className="v-mono text-[11.5px] text-[var(--text-tertiary)]">{r.heartbeat}</span> },
+  ];
+
+  type DeployRow = { id: string; service: string; project: string; status: string; when: string };
+  const deployRows: DeployRow[] = deployments.slice(0, 7).map((d) => ({
+    id: d.id,
+    service: d.serviceName || d.imageName || d.serviceId || d.id,
+    project: d.projectName || '—',
+    status: d.status || 'queued',
+    when: formatRelative(d.startedAt ?? d.completedAt ?? d.createdAt),
+  }));
+
+  const deployCols: SCol<DeployRow>[] = [
+    { key: 'service', label: 'Service', width: '1.6fr', sortValue: (r) => r.service,
+      render: (r) => (
+        <span className="text-[var(--text-primary)] font-medium">
+          {r.service}
+          <span className="v-mono ml-2 text-[10.5px] font-normal text-[var(--text-tertiary)]">{r.project}</span>
+        </span>
+      ) },
+    { key: 'status', label: 'Status', width: '0.9fr', sortValue: (r) => r.status,
+      render: (r) => <SPill tone={statusTone(r.status)}>{r.status}</SPill> },
+    { key: 'when', label: 'When', width: '0.55fr', sortable: false,
+      render: (r) => <span className="v-mono text-[11.5px] text-[var(--text-tertiary)]">{r.when}</span> },
+  ];
+
+  const refetchAll = () => {
+    projectsQuery.refetch();
+    hostQuery.refetch();
+    deploysQuery.refetch();
+    agentsQuery.refetch();
+    alertsQuery.refetch();
+    metricQueries.forEach((q) => q.refetch());
+  };
+
+  return (
+    <div className="min-h-screen">
+      <div className="w-full px-4 py-6 sm:px-7">
+        <SPageHead
+          title={firstName ? 'Welcome back,' : 'Fleet'}
+          titleAccent={firstName ?? 'overview'}
+          sub={
+            <>
+              {String(runningServices).padStart(2, '0')} of {String(totalServices).padStart(2, '0')} services online ·{' '}
+            </>
+          }
+          subAccent={agents.length > 0 ? `${onlineAgents}/${agents.length} nodes live` : 'single host'}
+          actions={
+            <>
+              {signedIn && (
+                <GhostBtn onClick={() => navigate('/projects')}>+ New Project</GhostBtn>
+              )}
+              <QuietBtn onClick={() => navigate('/operations')}>
+                <AlertTriangle size={13} />
+                View alerts
+              </QuietBtn>
+              <IconBtn title="Refresh" onClick={refetchAll}>
+                <RefreshCw size={14} />
+              </IconBtn>
+              <IconBtn title="Settings" onClick={() => navigate('/settings')}>
+                <Settings size={14} />
+              </IconBtn>
+            </>
+          }
+        />
+
+        {/* Stat row */}
+        <div className="mb-4 grid grid-cols-2 gap-3.5 xl:grid-cols-4">
+          {statDefs.map((s) => (
+            <SStat
+              key={s.label}
+              icon={s.icon}
+              label={s.label}
+              value={s.value}
+              unit={s.unit}
+              foot={s.foot}
+              delta={s.delta}
+              extra={s.ticks !== null && s.ticks !== undefined ? <Ticks pct={s.ticks} count={44} warn={s.ticks > 85} /> : undefined}
+            />
+          ))}
+        </div>
+
+        {/* Chart + resource usage */}
+        <div className="mb-4 grid grid-cols-1 gap-3.5 xl:grid-cols-[2.32fr_1fr]">
+          <SCard
+            icon={<Cpu size={13.5} />}
+            title="Node CPU Load"
+            accent={`(${range})`}
+            trail={
+              <IconBtn title="Refresh" onClick={refetchAll}>
+                <RefreshCw size={13} />
+              </IconBtn>
+            }
+            pad={false}
+          >
+            <SLegend items={chartData.series.map((s) => ({ color: s.color, label: s.key }))} />
+            <div className="px-3 pb-3">
+              {chartData.hasData ? (
+                <ResponsiveContainer width="100%" height={292} initialDimension={{ width: 640, height: 292 }}>
+                  <RechartsLineChart data={chartData.rows} margin={{ top: 14, right: 14, bottom: 4, left: -14 }}>
+                    <CartesianGrid stroke="var(--border-subtle)" vertical={false} />
+                    <XAxis
+                      dataKey="t"
+                      tick={{ fill: 'var(--text-tertiary)', fontSize: 10.5, fontFamily: 'IBM Plex Mono' }}
+                      tickLine={false}
+                      axisLine={{ stroke: 'var(--border-subtle)' }}
+                      minTickGap={48}
+                    />
+                    <YAxis
+                      domain={[0, 100]}
+                      tick={{ fill: 'var(--text-tertiary)', fontSize: 10, fontFamily: 'IBM Plex Mono' }}
+                      tickLine={false}
+                      axisLine={false}
+                      tickFormatter={(v: number) => `${v}%`}
+                    />
+                    <Tooltip content={<ChartTooltip />} cursor={{ stroke: 'var(--border-default)' }} />
+                    {chartData.series.map((s, i) => (
+                      <Line
+                        key={s.key}
+                        dataKey={s.key}
+                        stroke={s.color}
+                        strokeWidth={i === 0 ? 1.6 : 1.3}
+                        dot={false}
+                        isAnimationActive={false}
+                      />
+                    ))}
+                  </RechartsLineChart>
+                </ResponsiveContainer>
+              ) : (
+                <div className="flex h-[292px] flex-col items-center justify-center gap-2 text-center">
+                  <Server size={22} className="text-[var(--text-tertiary)]" />
+                  <p className="text-[12.5px] text-[var(--text-secondary)]">No node telemetry yet</p>
+                  <p className="max-w-xs text-[11px] text-[var(--text-tertiary)]">
+                    Enroll a Containr agent on a host to chart per-node CPU over time.
+                  </p>
+                </div>
+              )}
+            </div>
+            {/* range picker rendered as a real control row under the chart */}
+            <div className="flex items-center gap-1.5 border-t border-[var(--border-subtle)] px-4 py-2">
+              {(['1h', '24h', '7d'] as RangeKey[]).map((r) => (
+                <button
+                  key={r}
+                  onClick={() => setRange(r)}
+                  className={`rounded-[5px] px-2 py-1 text-[10.5px] font-medium transition-colors ${
+                    range === r
+                      ? 'bg-[var(--nav-active)] text-[var(--text-primary)]'
+                      : 'text-[var(--text-tertiary)] hover:text-[var(--text-primary)]'
+                  }`}
+                >
+                  {r}
+                </button>
+              ))}
+              <span className="v-mono ml-auto text-[10.5px] text-[var(--text-muted)]">
+                {chartAgents.length > 0 ? `${chartAgents.length} node${chartAgents.length > 1 ? 's' : ''} sampled` : 'awaiting agents'}
+              </span>
+            </div>
+          </SCard>
+
+          <SCard
+            icon={<HardDrive size={13.5} />}
+            title="Resource Usage"
+            accent="(host)"
+            pad={false}
+          >
+            <div className="px-4 pt-1">
+              {[
+                { label: 'CPU Load', v: cpuPct },
+                { label: 'Memory', v: memPct },
+                { label: 'Disk I/O', v: diskPct },
+                { label: 'Services online', v: totalServices > 0 ? Math.round((runningServices / totalServices) * 100) : null },
+              ].map((r) => (
+                <div key={r.label} className="py-2">
+                  <div className="mb-2 flex items-baseline justify-between text-[12px]">
+                    <span className="font-medium text-[var(--text-secondary)]">{r.label}</span>
+                    <b className="font-semibold text-[var(--accent-primary)]">{r.v !== null ? `${r.v}%` : '—'}</b>
+                  </div>
+                  <Ticks pct={r.v ?? 0} count={56} warn={(r.v ?? 0) > 85} />
+                </div>
+              ))}
+            </div>
+            <div className="p-4 pt-2.5">
+              <SAnomaly
+                icon={<AlertTriangle size={12.5} className="text-[var(--accent-primary)]" />}
+                title={
+                  <>
+                    <b className="font-semibold text-[var(--text-primary)]">{anomalies.length}</b>
+                    {anomalies.length === 1 ? ' anomaly' : ' anomalies'} detected
+                  </>
+                }
+                items={anomalies.length > 0 ? anomalies : ['All systems nominal']}
+              />
+            </div>
+          </SCard>
+        </div>
+
+        {/* Node summary */}
+        <SCard
+          icon={<Server size={13.5} />}
+          title="Node Summary"
+          trail={
+            <IconBtn title="Refresh" onClick={() => agentsQuery.refetch()}>
+              <RefreshCw size={13} />
+            </IconBtn>
+          }
+          pad={false}
+        >
+          <STable
+            cols={nodeCols}
+            rows={nodeRows}
+            rowKey={(r) => r.id}
+            selectable
+            onRowClick={(r) => { if (r.id !== 'local') navigate(`/nodes/${r.id}`); }}
+          />
+          {nodeRows.length === 0 && (
+            <p className="px-7 pb-5 text-[12px] text-[var(--text-tertiary)]">
+              No nodes enrolled. The local host appears here once telemetry arrives.
+            </p>
+          )}
+        </SCard>
+
+        {/* Deployments + projects */}
+        <div className="mt-4 grid grid-cols-1 gap-3.5 xl:grid-cols-[1.6fr_1fr]">
+          <SCard
+            icon={<Rocket size={13.5} />}
+            title="Recent Deployments"
+            accent={deployRows.length > 0 ? `(${deployments.length})` : undefined}
+            trail={
+              <IconBtn title="Refresh" onClick={() => deploysQuery.refetch()}>
+                <RefreshCw size={13} />
+              </IconBtn>
+            }
+            pad={false}
+          >
+            <STable cols={deployCols} rows={deployRows} rowKey={(r) => r.id} />
+            {deployRows.length === 0 && (
+              <p className="px-7 pb-5 text-[12px] text-[var(--text-tertiary)]">No deployments yet.</p>
+            )}
+          </SCard>
+
+          <SCard
+            icon={<FolderKanban size={13.5} />}
+            title="Projects"
+            accent={`(${projects.length})`}
+            pad={false}
+          >
+            <div className="px-2 pb-2">
+              {projects.slice(0, 6).map((p) => {
+                const running = p.stats.running_services;
+                const total = p.stats.service_count;
+                const tone = total === 0 ? 'off' : running === total ? 'ok' : running > 0 ? 'warn' : 'err';
+                return (
+                  <button
+                    key={p.id}
+                    onClick={() => navigate(isDemoMode ? `/projects/${p.id}?demo=1` : `/projects/${p.id}`)}
+                    className="flex w-full items-center gap-3 rounded-[8px] px-3 py-2.5 text-left transition-colors hover:bg-[var(--surface-muted)]"
+                  >
+                    <span className="s-ibox"><FolderKanban size={13.5} /></span>
+                    <span className="min-w-0 flex-1">
+                      <span className="block truncate text-[12.5px] font-medium text-[var(--text-primary)]">{p.name}</span>
+                      <span className="v-mono block text-[10.5px] text-[var(--text-tertiary)]">
+                        {running}/{total} services · {p.stats.deployment_count} deploys
+                      </span>
+                    </span>
+                    <SPill tone={tone}>{total === 0 ? 'idle' : running === total ? 'healthy' : running > 0 ? 'partial' : 'down'}</SPill>
+                  </button>
+                );
+              })}
+              {projects.length === 0 && (
+                <p className="px-5 py-4 text-[12px] text-[var(--text-tertiary)]">No projects yet.</p>
+              )}
+            </div>
+          </SCard>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/app/frontend/src/features/landing/LandingPage.tsx b/app/frontend/src/features/landing/LandingPage.tsx
index 7aefa43..0978995 100644
--- a/app/frontend/src/features/landing/LandingPage.tsx
+++ b/app/frontend/src/features/landing/LandingPage.tsx
@@ -1,3 +1,4 @@
+import { useState } from 'react';
 import { Link } from 'react-router-dom';
 import { useQuery } from '@tanstack/react-query';
 import {
@@ -8,16 +9,18 @@ import {
   GitBranch,
   LayoutTemplate,
   Rocket,
+  Server,
   ShieldCheck,
+  Terminal,
   Zap,
 } from 'lucide-react';
-import { listProjects, listTemplates } from '@/lib/api-client';
+import { getHostMonitoring, listProjects, listRecentDeployments, listTemplates } from '@/lib/api-client';
 import { DocsBrowser } from '@/features/docs/DocsBrowser';
 import { useAuthSession } from '@/lib/use-auth-session';
 import { useDemoMode } from '@/lib/demo-mode';
 import { useBranding } from '@/lib/use-branding';
-import { BrandWordmark } from '@/shared/components';
-import { demoProjects, demoTemplates } from '@/lib/demo-data';
+import { BrandWordmark, MiniBars, SPill, Ticks } from '@/shared/components';
+import { demoHostMonitoring, demoProjects, demoTemplates } from '@/lib/demo-data';
 
 const features = [
   { icon: Rocket, title: 'Git-push deploys', text: 'Connect a repository and ship. Builds, rollouts, and rollbacks are handled for you.' },
@@ -28,7 +31,14 @@ const features = [
   { icon: Zap, title: 'Autoscaling', text: 'Metric-driven scaling policies adapt replicas to real load.' },
 ];
 
+const demoDeploys = [
+  { id: 'd1', serviceName: 'api-gateway', status: 'deployed', startedAt: new Date(Date.now() - 240_000).toISOString() },
+  { id: 'd2', serviceName: 'web-frontend', status: 'building', startedAt: new Date(Date.now() - 390_000).toISOString() },
+  { id: 'd3', serviceName: 'batch-evaluator', status: 'failed', startedAt: new Date(Date.now() - 3_900_000).toISOString() },
+];
+
 export function LandingPage() {
+  const [now] = useState(() => Date.now());
   const isDemoMode = useDemoMode();
   const { logoUrl, productName } = useBranding();
   const sessionQuery = useAuthSession({ enabled: !isDemoMode });
@@ -37,19 +47,35 @@ export function LandingPage() {
 
   const projectsQuery = useQuery({ queryKey: ['landing-projects'], queryFn: () => listProjects(), staleTime: 60_000, enabled: !isDemoMode });
   const templatesQuery = useQuery({ queryKey: ['landing-templates'], queryFn: () => listTemplates(), staleTime: 60_000, enabled: !isDemoMode });
+  const hostQuery = useQuery({ queryKey: ['landing-host'], queryFn: getHostMonitoring, staleTime: 30_000, enabled: !isDemoMode });
+  const deploysQuery = useQuery({ queryKey: ['landing-deploys'], queryFn: () => listRecentDeployments(4), staleTime: 30_000, enabled: !isDemoMode });
 
   const projects = isDemoMode ? demoProjects : (projectsQuery.data ?? []);
   const templates = (isDemoMode ? demoTemplates : (templatesQuery.data ?? [])).slice(0, 12);
+  const host = isDemoMode ? demoHostMonitoring : hostQuery.data;
+  const deploys = isDemoMode ? demoDeploys : (deploysQuery.data ?? []).slice(0, 3);
+
+  const cpuPct = host ? Math.min(100, Math.round((host.load.load1m / Math.max(1, host.cpu.cores)) * 100)) : null;
+  const memPct = host ? Math.round(host.memory.usagePercent) : null;
+  const diskPct = host ? Math.round(host.storage.usagePercent) : null;
+
+  const rel = (d?: string) => {
+    if (!d) return '—';
+    const s = Math.floor((now - new Date(d).getTime()) / 1000);
+    if (s < 60) return 'just now';
+    if (s < 3600) return `${Math.floor(s / 60)}m ago`;
+    if (s < 86400) return `${Math.floor(s / 3600)}h ago`;
+    return `${Math.floor(s / 86400)}d ago`;
+  };
 
   return (
     <div className="min-h-screen bg-[var(--bg-void)] text-[var(--text-secondary)]">
-      <div className="ambient-glow" />
-
+      {/* ── Top bar ── */}
       <header className="sticky top-0 z-40 border-b border-[var(--border-subtle)] bg-[var(--bg-base)]/80 backdrop-blur-xl">
         <div className="mx-auto flex h-14 max-w-6xl items-center justify-between px-5">
           <Link to="/" className="flex items-center gap-2.5">
             <img src={logoUrl || '/containr.svg'} alt={productName} className="h-7 w-7 rounded-lg object-contain" />
-            <span className="text-[15px] font-extrabold tracking-tight text-[var(--text-primary)]">
+            <span className="font-headline text-[15px] font-semibold tracking-tight text-[var(--text-primary)]">
               <BrandWordmark />
             </span>
           </Link>
@@ -57,112 +83,160 @@ export function LandingPage() {
             <a href="#features" className="rounded-[var(--radius-md)] px-3 py-1.5 text-[var(--text-secondary)] hover:bg-[var(--surface-muted)] hover:text-[var(--text-primary)] max-sm:hidden">Features</a>
             <a href="#templates" className="rounded-[var(--radius-md)] px-3 py-1.5 text-[var(--text-secondary)] hover:bg-[var(--surface-muted)] hover:text-[var(--text-primary)] max-sm:hidden">Templates</a>
             <a href="#docs" className="rounded-[var(--radius-md)] px-3 py-1.5 text-[var(--text-secondary)] hover:bg-[var(--surface-muted)] hover:text-[var(--text-primary)] max-sm:hidden">Docs</a>
-            <Link
-              to={`/projects${demo}`}
-              className="rounded-[var(--radius-md)] px-3 py-1.5 font-medium text-[var(--text-secondary)] hover:bg-[var(--surface-muted)] hover:text-[var(--text-primary)]"
-            >
+            <Link to={`/projects${demo}`} className="rounded-[var(--radius-md)] px-3 py-1.5 font-medium text-[var(--text-secondary)] hover:bg-[var(--surface-muted)] hover:text-[var(--text-primary)]">
               Browse
             </Link>
-            {signedIn ? (
-              <Link
-                to="/projects"
-                className="ml-1 inline-flex items-center gap-1.5 rounded-[var(--radius-md)] bg-[var(--accent-primary)] px-3.5 py-1.5 font-semibold text-[var(--accent-on)]"
-              >
+            {signedIn || isDemoMode ? (
+              <Link to={`/${demo}`} className="ml-1 s-btn-accent">
                 Console <ArrowRight size={13} />
               </Link>
             ) : (
-              <Link
-                to={isDemoMode ? `/projects${demo}` : '/auth/sign-in'}
-                className="ml-1 inline-flex items-center gap-1.5 rounded-[var(--radius-md)] bg-[var(--accent-primary)] px-3.5 py-1.5 font-semibold text-[var(--accent-on)]"
-              >
-                {isDemoMode ? 'Live demo' : 'Sign in'} <ArrowRight size={13} />
+              <Link to="/auth/sign-in" className="ml-1 s-btn-accent">
+                Sign in <ArrowRight size={13} />
               </Link>
             )}
           </nav>
         </div>
       </header>
 
-      <main className="relative">
-        <section className="mx-auto max-w-6xl px-5 pb-16 pt-20 text-center">
-          <p className="mx-auto mb-5 inline-flex items-center gap-2 rounded-full border border-[var(--border-subtle)] bg-[var(--surface-card)] px-3.5 py-1 text-[11px] font-medium uppercase tracking-[0.16em] text-[var(--text-tertiary)]">
-            <Container size={12} className="text-[var(--accent-primary)]" />
-            self-hosted PaaS
-          </p>
-          <h1 className="mx-auto max-w-3xl text-[42px] font-extrabold leading-[1.08] tracking-[-0.03em] text-[var(--text-primary)] max-sm:text-[32px]">
-            Deploy containers like it's{' '}
-            <span style={{ color: 'var(--accent-primary)' }}>your own cloud</span>
-          </h1>
-          <p className="mx-auto mt-5 max-w-xl text-[15px] leading-relaxed text-[var(--text-secondary)]">
-            Containr turns any Docker host into a full deployment platform — git-push builds,
-            managed databases, preview environments, HA failover, and a searchable knowledge base.
-          </p>
-          <div className="mt-8 flex items-center justify-center gap-3">
-            <Link
-              to={`/projects${demo}`}
-              className="inline-flex items-center gap-2 rounded-[var(--radius-md)] bg-[var(--accent-primary)] px-5 py-2.5 text-sm font-semibold text-[var(--accent-on)] transition-transform hover:scale-[1.02]"
-            >
-              {isDemoMode ? 'Explore the live demo' : 'Browse projects'} <ArrowRight size={15} />
-            </Link>
-            <a
-              href="#docs"
-              className="inline-flex items-center gap-2 rounded-[var(--radius-md)] border border-[var(--border-default)] px-5 py-2.5 text-sm font-medium text-[var(--text-secondary)] hover:border-[var(--border-strong)] hover:text-[var(--text-primary)]"
-            >
-              <BookOpen size={15} /> Read the docs
-            </a>
-          </div>
-
-          {projects.length > 0 ? (
-            <div className="mx-auto mt-12 grid max-w-3xl grid-cols-3 gap-3 text-left max-sm:grid-cols-1">
-              <Stat label="Public projects" value={projects.length} />
-              <Stat
-                label="Running services"
-                value={projects.reduce((sum, p) => sum + (p.stats?.running_services ?? 0), 0)}
-              />
-              <Stat
-                label="Deployments"
-                value={projects.reduce((sum, p) => sum + (p.stats?.deployment_count ?? 0), 0)}
-              />
+      <main>
+        {/* ── Hero + live instance window ── */}
+        <section className="border-b border-[var(--border-subtle)]">
+          <div className="mx-auto grid max-w-6xl gap-10 px-5 pb-16 pt-16 lg:grid-cols-[1.1fr_1fr] lg:items-center">
+            <div>
+              <p className="s-chip mb-6 inline-flex">
+                <Container size={11} />
+                self-hosted PaaS
+              </p>
+              <h1 className="font-headline text-[44px] font-bold leading-[1.06] tracking-[-0.03em] text-[var(--text-primary)] max-sm:text-[32px]">
+                Deploy containers like it's{' '}
+                <span className="text-[var(--accent-primary)]">your own cloud</span>
+              </h1>
+              <p className="mt-5 max-w-lg text-[14px] leading-relaxed text-[var(--text-secondary)]">
+                Containr turns any Docker host into a full deployment platform — git-push builds,
+                managed databases, preview environments, HA failover, and a searchable knowledge base.
+              </p>
+              <div className="mt-8 flex items-center gap-3">
+                <Link to={`/${demo}`} className="s-btn-accent !px-5 !h-10 text-sm">
+                  {isDemoMode ? 'Explore the live demo' : 'Open the console'} <ArrowRight size={15} />
+                </Link>
+                <a href="#docs" className="s-btn-quiet !px-5 !h-10 text-sm">
+                  <BookOpen size={15} /> Read the docs
+                </a>
+              </div>
+              <div className="v-mono mt-8 flex items-center gap-5 text-[11px] text-[var(--text-tertiary)]">
+                <span className="flex items-center gap-2">
+                  <i className="inline-block h-1.5 w-1.5 rounded-full bg-[var(--success)]" />
+                  {projects.length} public projects
+                </span>
+                <span>{projects.reduce((s, p) => s + (p.stats?.running_services ?? 0), 0)} services online</span>
+                <span className="max-sm:hidden">{projects.reduce((s, p) => s + (p.stats?.deployment_count ?? 0), 0)} deployments</span>
+              </div>
             </div>
-          ) : null}
+
+            {/* Live window — real telemetry from this instance */}
+            <div className="s-card !p-0 overflow-hidden">
+              <div className="s-cardhead border-b border-[var(--border-subtle)]">
+                <span className="s-ibox"><Server size={13.5} /></span>
+                <span className="s-t">{host?.hostname ?? 'this instance'} <span className="s-ta">live</span></span>
+                <span className="s-trail">
+                  <SPill tone={host?.dockerAvailable ? 'ok' : 'off'}>{host?.dockerAvailable ? 'online' : 'offline'}</SPill>
+                </span>
+              </div>
+              <div className="px-4 pb-2 pt-3">
+                {[
+                  { label: 'CPU', v: cpuPct },
+                  { label: 'Memory', v: memPct },
+                  { label: 'Disk', v: diskPct },
+                ].map((r) => (
+                  <div key={r.label} className="py-1.5">
+                    <div className="mb-1.5 flex items-baseline justify-between text-[11.5px]">
+                      <span className="text-[var(--text-secondary)]">{r.label}</span>
+                      <b className="font-semibold text-[var(--accent-primary)]">{r.v !== null ? `${r.v}%` : '—'}</b>
+                    </div>
+                    <Ticks pct={r.v ?? 0} count={48} warn={(r.v ?? 0) > 85} />
+                  </div>
+                ))}
+              </div>
+              <div className="border-t border-[var(--border-subtle)] px-4 py-3">
+                <p className="v-mono mb-2 text-[10px] uppercase tracking-[0.12em] text-[var(--text-tertiary)]">latest deploys</p>
+                {deploys.map((d) => (
+                  <div key={d.id} className="flex items-center gap-2.5 py-1.5 text-[12px]">
+                    <MiniBars tone={(d.status ?? '').toLowerCase() === 'failed' ? 'var(--error)' : 'var(--accent-primary)'} />
+                    <span className="min-w-0 flex-1 truncate font-medium text-[var(--text-primary)]">{d.serviceName || d.id}</span>
+                    <span className="v-mono text-[10.5px] text-[var(--text-tertiary)]">{rel(d.startedAt)}</span>
+                  </div>
+                ))}
+                {deploys.length === 0 && (
+                  <p className="py-1.5 text-[11.5px] text-[var(--text-tertiary)]">No deployments yet.</p>
+                )}
+              </div>
+            </div>
+          </div>
         </section>
 
-        <section id="features" className="border-t border-[var(--border-subtle)] bg-[var(--bg-base)]/60">
+        {/* ── Install strip ── */}
+        <section className="border-b border-[var(--border-subtle)] bg-[var(--bg-base)]/60">
+          <div className="mx-auto flex max-w-6xl flex-wrap items-center gap-4 px-5 py-5">
+            <span className="s-ibox"><Terminal size={13.5} /></span>
+            <code className="v-mono flex-1 text-[12.5px] text-[var(--text-secondary)]">
+              <span className="text-[var(--accent-primary)]">$</span> docker compose up -d
+            </code>
+            <span className="v-mono text-[11px] text-[var(--text-tertiary)]">one host · one command · full platform</span>
+          </div>
+        </section>
+
+        {/* ── Features ── */}
+        <section id="features" className="border-b border-[var(--border-subtle)]">
           <div className="mx-auto max-w-6xl px-5 py-16">
-            <h2 className="text-center text-[26px] font-bold tracking-tight text-[var(--text-primary)]">
-              Everything a deployment platform needs
-            </h2>
-            <p className="mx-auto mt-2 max-w-lg text-center text-sm text-[var(--text-secondary)]">
-              One install, one dashboard, full control over your own infrastructure.
-            </p>
-            <div className="mt-10 grid grid-cols-3 gap-4 max-md:grid-cols-2 max-sm:grid-cols-1">
+            <div className="flex items-end justify-between gap-6 max-sm:flex-col max-sm:items-start">
+              <div>
+                <p className="v-mono mb-2 flex items-center gap-2 text-[10.5px] uppercase tracking-[0.1em] text-[var(--text-tertiary)]">
+                  <i className="inline-block h-[5px] w-[5px] rounded-[1px] bg-[var(--accent-primary)]" />
+                  platform
+                </p>
+                <h2 className="font-headline text-[26px] font-bold tracking-tight text-[var(--text-primary)]">
+                  Everything a deployment platform needs
+                </h2>
+                <p className="mt-1.5 max-w-lg text-[13px] text-[var(--text-secondary)]">
+                  One install, one dashboard, full control over your own infrastructure.
+                </p>
+              </div>
+              <span className="v-mono text-[11px] text-[var(--text-muted)]">06 capabilities</span>
+            </div>
+            <div className="mt-9 grid grid-cols-3 gap-3.5 max-md:grid-cols-2 max-sm:grid-cols-1">
               {features.map((feature) => (
-                <div
-                  key={feature.title}
-                  className="rounded-[var(--radius-lg)] border border-[var(--border-subtle)] bg-[var(--surface-card)] p-5 transition-colors hover:border-[var(--border-default)]"
-                >
-                  <feature.icon size={18} className="text-[var(--accent-primary)]" />
-                  <h3 className="mt-3 text-[14.5px] font-semibold text-[var(--text-primary)]">{feature.title}</h3>
-                  <p className="mt-1.5 text-[12.5px] leading-relaxed text-[var(--text-tertiary)]">{feature.text}</p>
+                <div key={feature.title} className="s-card">
+                  <div className="s-cardhead !mb-0">
+                    <span className="s-ibox"><feature.icon size={13.5} /></span>
+                    <h3 className="s-t">{feature.title}</h3>
+                  </div>
+                  <p className="mt-2 text-[12.5px] leading-relaxed text-[var(--text-tertiary)]">{feature.text}</p>
                 </div>
               ))}
             </div>
           </div>
         </section>
 
-        <section id="templates" className="border-t border-[var(--border-subtle)]">
+        {/* ── Templates ── */}
+        <section id="templates" className="border-b border-[var(--border-subtle)] bg-[var(--bg-base)]/60">
           <div className="mx-auto max-w-6xl px-5 py-16">
-            <div className="flex items-end justify-between">
+            <div className="flex items-end justify-between gap-6">
               <div>
-                <h2 className="text-[26px] font-bold tracking-tight text-[var(--text-primary)]">Template catalog</h2>
-                <p className="mt-1 text-sm text-[var(--text-secondary)]">
+                <p className="v-mono mb-2 flex items-center gap-2 text-[10.5px] uppercase tracking-[0.1em] text-[var(--text-tertiary)]">
+                  <i className="inline-block h-[5px] w-[5px] rounded-[1px] bg-[var(--accent-primary)]" />
+                  catalog
+                </p>
+                <h2 className="font-headline text-[26px] font-bold tracking-tight text-[var(--text-primary)]">Template catalog</h2>
+                <p className="mt-1.5 text-[13px] text-[var(--text-secondary)]">
                   Production-ready presets — deploy in one click from the console.
                 </p>
               </div>
               <Link
                 to={`/templates${demo}`}
-                className="inline-flex items-center gap-1.5 text-[13px] font-medium text-[var(--accent-primary)] hover:underline"
+                className="s-chip !normal-case !tracking-normal"
               >
-                Browse all <ArrowRight size={13} />
+                Browse all <ArrowRight size={11} />
               </Link>
             </div>
             <div className="mt-8 grid grid-cols-4 gap-3 max-lg:grid-cols-3 max-sm:grid-cols-2">
@@ -170,22 +244,20 @@ export function LandingPage() {
                 <Link
                   key={template.id}
                   to={`/templates?template=${template.id}${isDemoMode ? '&demo=1' : ''}`}
-                  className="group rounded-[var(--radius-lg)] border border-[var(--border-subtle)] bg-[var(--surface-card)] p-4 transition-colors hover:border-[var(--border-strong)]"
+                  className="s-card group"
                 >
                   <div className="flex items-center gap-2.5">
                     {template.logo ? (
-                      <img src={template.logo} alt="" className="h-7 w-7 rounded-md" />
+                      <img src={template.logo} alt="" className="h-7 w-7 rounded-[6px]" />
                     ) : (
-                      <span className="flex h-7 w-7 items-center justify-center rounded-md bg-[var(--surface-muted)] text-[var(--accent-primary)]">
-                        <LayoutTemplate size={14} />
-                      </span>
+                      <span className="s-ibox !h-7 !w-7"><LayoutTemplate size={13.5} /></span>
                     )}
                     <span className="truncate text-[13px] font-semibold text-[var(--text-primary)]">{template.name}</span>
                   </div>
                   <p className="mt-2 line-clamp-2 text-[11.5px] leading-relaxed text-[var(--text-tertiary)]">
                     {template.description}
                   </p>
-                  <span className="mt-2 inline-block rounded-full bg-[var(--surface-muted)] px-2 py-0.5 text-[10px] font-medium uppercase tracking-wide text-[var(--text-tertiary)]">
+                  <span className="s-chip mt-2" style={{ cursor: 'default' }}>
                     {template.category || 'app'}
                   </span>
                 </Link>
@@ -199,10 +271,15 @@ export function LandingPage() {
           </div>
         </section>
 
-        <section id="docs" className="border-t border-[var(--border-subtle)] bg-[var(--bg-base)]/60">
+        {/* ── Docs ── */}
+        <section id="docs" className="border-b border-[var(--border-subtle)]">
           <div className="mx-auto max-w-6xl px-5 py-16">
-            <h2 className="text-[26px] font-bold tracking-tight text-[var(--text-primary)]">Documentation</h2>
-            <p className="mt-1 text-sm text-[var(--text-secondary)]">
+            <p className="v-mono mb-2 flex items-center gap-2 text-[10.5px] uppercase tracking-[0.1em] text-[var(--text-tertiary)]">
+              <i className="inline-block h-[5px] w-[5px] rounded-[1px] bg-[var(--accent-primary)]" />
+              reference
+            </p>
+            <h2 className="font-headline text-[26px] font-bold tracking-tight text-[var(--text-primary)]">Documentation</h2>
+            <p className="mt-1.5 text-[13px] text-[var(--text-secondary)]">
               Guides and references — synced from GitHub, cached locally, always available.
             </p>
             <div className="mt-8">
@@ -213,10 +290,10 @@ export function LandingPage() {
       </main>
 
       <footer className="border-t border-[var(--border-subtle)]">
-        <div className="mx-auto flex max-w-6xl items-center justify-between px-5 py-6 text-[12px] text-[var(--text-tertiary)]">
+        <div className="v-mono mx-auto flex max-w-6xl items-center justify-between px-5 py-6 text-[11.5px] text-[var(--text-tertiary)]">
           <span className="flex items-center gap-2">
             <img src="/containr.svg" alt="" className="h-4 w-4 rounded" />
-            Containr — self-hosted container platform
+            containr — self-hosted container platform
           </span>
           <div className="flex items-center gap-4">
             <Link to={`/projects${demo}`} className="hover:text-[var(--text-secondary)]">Projects</Link>
@@ -228,12 +305,3 @@ export function LandingPage() {
     </div>
   );
 }
-
-function Stat({ label, value }: { label: string; value: number }) {
-  return (
-    <div className="rounded-[var(--radius-lg)] border border-[var(--border-subtle)] bg-[var(--surface-card)] px-4 py-3.5">
-      <p className="text-[22px] font-bold tabular-nums text-[var(--text-primary)]">{value}</p>
-      <p className="mt-0.5 text-[11px] uppercase tracking-wider text-[var(--text-tertiary)]">{label}</p>
-    </div>
-  );
-}
diff --git a/app/frontend/src/features/nodes/NodeDetailPage.tsx b/app/frontend/src/features/nodes/NodeDetailPage.tsx
index 5508cd9..9faee48 100644
--- a/app/frontend/src/features/nodes/NodeDetailPage.tsx
+++ b/app/frontend/src/features/nodes/NodeDetailPage.tsx
@@ -19,8 +19,10 @@ import { useAuthSession } from '@/lib/use-auth-session';
 import { useDemoMode } from '@/lib/demo-mode';
 import { formatBytes, formatRelative } from '@/lib/time';
 import { DemoRestricted } from '@/shared/components';
+import { GhostBtn, QuietBtn, SPill } from '@/shared/components/sentry';
 import {
   ArrowLeft, CheckCircle2, ChevronRight, Loader2, Pencil, XCircle,
+  Activity, Cpu, ListOrdered, Server,
 } from 'lucide-react';
 
 const TIME_RANGES = [
@@ -129,8 +131,7 @@ export function NodeDetailPage() {
 
   return (
     <div className="min-h-screen">
-      <div className="border-b border-[var(--border-subtle)]">
-        <div className="w-full px-8 py-5">
+      <div className="w-full px-4 pt-6 sm:px-8">
           <div className="flex items-center gap-2 v-mono text-[11px] text-[var(--text-tertiary)] mb-2">
             <Link to="/usage" className="hover:text-[var(--text-primary)] flex items-center gap-1">
               <ArrowLeft size={12} /> usage
@@ -140,7 +141,7 @@ export function NodeDetailPage() {
           </div>
           <div className="flex items-center justify-between gap-4 flex-wrap">
             <div>
-              <h1 className="v-title">
+              <h1 className="v-title font-headline">
                 {rename === null ? agent.name : rename}
                 {isAdmin && rename === null && (
                   <button
@@ -163,7 +164,7 @@ export function NodeDetailPage() {
                       if (e.key === 'Escape') setRename(null);
                     }}
                     autoFocus
-                    className="rounded-md border border-[var(--border-subtle)] bg-[var(--bg-tertiary)] px-2 py-1 text-sm text-[var(--text-primary)]"
+                    className="rounded-md border border-[var(--border-subtle)] bg-[var(--bg-elevated)] px-2 py-1 text-sm text-[var(--text-primary)]"
                   />
                   <button onClick={() => updateMutation.mutate({ name: rename })} className="v-mono text-[11px] text-[var(--accent-primary)] hover:underline">save</button>
                   <button onClick={() => setRename(null)} className="v-mono text-[11px] text-[var(--text-muted)] hover:underline">cancel</button>
@@ -209,7 +210,7 @@ export function NodeDetailPage() {
                       }}
                       autoFocus
                       placeholder="eu-west, gpu"
-                      className="rounded-md border border-[var(--border-subtle)] bg-[var(--bg-tertiary)] px-2 py-0.5 text-[11px] text-[var(--text-primary)] w-52"
+                      className="rounded-md border border-[var(--border-subtle)] bg-[var(--bg-elevated)] px-2 py-0.5 text-[11px] text-[var(--text-primary)] w-52"
                     />
                     <button
                       onClick={() => updateMutation.mutate({ tags: tagDraft.split(',').map((t) => t.trim()).filter(Boolean) })}
@@ -247,7 +248,7 @@ export function NodeDetailPage() {
                       }}
                       autoFocus
                       placeholder="apps.node1.example.com — empty clears"
-                      className="rounded-md border border-[var(--border-subtle)] bg-[var(--bg-tertiary)] px-2 py-0.5 text-[11px] text-[var(--text-primary)] w-64"
+                      className="rounded-md border border-[var(--border-subtle)] bg-[var(--bg-elevated)] px-2 py-0.5 text-[11px] text-[var(--text-primary)] w-64"
                     />
                     <button
                       onClick={() => updateMutation.mutate({ default_domain: domainDraft.trim().toLowerCase() })}
@@ -258,17 +259,9 @@ export function NodeDetailPage() {
                 )}
               </p>
             </div>
-            <div className="flex items-center gap-3">
-              <span className={`v-mono text-[11px] px-2 py-1 rounded-md border ${online
-                ? 'border-[var(--success)]/40 text-[var(--success)]'
-                : 'border-[var(--error)]/40 text-[var(--error)]'}`}>
-                {agent.status}
-              </span>
-              {!agent.schedulable && (
-                <span className="v-mono text-[11px] px-2 py-1 rounded-md border border-[var(--warning)]/40 text-[var(--warning)]">
-                  cordoned
-                </span>
-              )}
+            <div className="flex items-center gap-2 flex-wrap">
+              <SPill tone={online ? 'ok' : 'err'}>{agent.status}</SPill>
+              {!agent.schedulable && <SPill tone="warn">cordoned</SPill>}
               {isAdmin && (
                 <>
                   <label className="flex items-center gap-1.5 v-mono text-[11px] text-[var(--text-tertiary)] cursor-pointer" title="Daily automatic docker prune">
@@ -280,81 +273,79 @@ export function NodeDetailPage() {
                     />
                     auto-prune
                   </label>
-                  <button
+                  <QuietBtn
                     onClick={() => cordonMutation.mutate(agent.schedulable)}
                     disabled={cordonMutation.isPending}
                     title={agent.schedulable
                       ? 'Block new placements — running replicas stay'
                       : 'Re-open for placement'}
-                    className="v-mono text-[11px] px-3 py-1.5 rounded-md border border-[var(--border-subtle)] text-[var(--text-secondary)] hover:text-[var(--text-primary)] disabled:opacity-50"
                   >
                     {agent.schedulable ? 'cordon' : 'uncordon'}
-                  </button>
-                  <button
+                  </QuietBtn>
+                  <QuietBtn
                     onClick={() => setConfirmDrain(true)}
                     disabled={drainMutation.isPending || !online}
                     title={online
                       ? 'Cordon + remove all service containers + unpin services (they redeploy locally)'
                       : 'Node must be online to drain'}
-                    className="v-mono text-[11px] px-3 py-1.5 rounded-md border border-[var(--warning)]/40 text-[var(--warning)] hover:bg-[var(--warning)]/10 disabled:opacity-50"
+                    className="!text-[var(--warning)] hover:!border-[var(--warning)]/60"
                   >
                     drain
-                  </button>
-                  <button
+                  </QuietBtn>
+                  <GhostBtn
                     onClick={() => upgradeMutation.mutate()}
                     disabled={upgradeMutation.isPending || !online}
                     title={online
                       ? `Upgrade agent to the server's bundled binary (server ${upgradeMutation.data?.version ?? 'build'}) — the agent restarts itself`
                       : 'Node must be online to upgrade'}
-                    className="v-mono text-[11px] px-3 py-1.5 rounded-md border border-[var(--border-subtle)] text-[var(--text-secondary)] hover:text-[var(--text-primary)] disabled:opacity-50"
                   >
                     {upgradeMutation.isPending ? 'upgrading…' : 'upgrade agent'}
-                  </button>
-                  <button
+                  </GhostBtn>
+                  <QuietBtn
                     onClick={() => setConfirmVolumes(true)}
                     disabled={pruneMutation.isPending}
-                    className="v-mono text-[11px] px-3 py-1.5 rounded-md border border-[var(--border-subtle)] text-[var(--text-secondary)] hover:text-[var(--text-primary)] disabled:opacity-50"
                   >
                     prune now
-                  </button>
-                  <button
+                  </QuietBtn>
+                  <QuietBtn
                     onClick={() => setConfirmDelete(true)}
-                    className="v-mono text-[11px] px-3 py-1.5 rounded-md border border-[var(--error)]/40 text-[var(--error)] hover:bg-[var(--error)]/10"
+                    className="!text-[var(--error)] hover:!border-[var(--error)]/60"
                   >
                     remove
-                  </button>
+                  </QuietBtn>
                 </>
               )}
             </div>
           </div>
         </div>
-      </div>
 
       <div className="px-4 py-6 sm:px-8 space-y-6">
         <div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-4">
-          <Stat label="cpu" value={latest ? `${latest.cpu.usage_percent.toFixed(0)}%` : '—'} sub={latest ? `${latest.cpu.cores} cores` : ''} />
-          <Stat label="memory" value={latest ? `${latest.memory.usage_percent.toFixed(0)}%` : '—'} sub={latest ? `${formatBytes(latest.memory.available)} free of ${formatBytes(latest.memory.limit)}` : ''} />
-          <Stat label="load 1m" value={latest ? latest.system_load.load_1m.toFixed(2) : '—'} sub={latest ? `5m ${latest.system_load.load_5m.toFixed(2)} · 15m ${latest.system_load.load_15m.toFixed(2)}` : ''} />
-          <Stat label="containers" value={latest ? String(latest.container_count) : String(containers.length)} sub="reported by agent" />
+          <Stat label="cpu" icon={<Cpu />} value={latest ? `${latest.cpu.usage_percent.toFixed(0)}%` : '—'} sub={latest ? `${latest.cpu.cores} cores` : ''} />
+          <Stat label="memory" icon={<Server />} value={latest ? `${latest.memory.usage_percent.toFixed(0)}%` : '—'} sub={latest ? `${formatBytes(latest.memory.available)} free of ${formatBytes(latest.memory.limit)}` : ''} />
+          <Stat label="load 1m" icon={<Activity />} value={latest ? latest.system_load.load_1m.toFixed(2) : '—'} sub={latest ? `5m ${latest.system_load.load_5m.toFixed(2)} · 15m ${latest.system_load.load_15m.toFixed(2)}` : ''} />
+          <Stat label="containers" icon={<ListOrdered />} value={latest ? String(latest.container_count) : String(containers.length)} sub="reported by agent" />
         </div>
 
-        <section className="panel p-5">
-          <div className="flex items-center justify-between mb-4">
-            <h2 className="v-mono text-[11px] uppercase tracking-wider text-[var(--text-tertiary)]">telemetry</h2>
-            <div className="flex gap-1">
-              {TIME_RANGES.map((r) => (
-                <button
-                  key={r.value}
-                  onClick={() => setTimeRange(r.value)}
-                  className={`v-mono text-[11px] px-2.5 py-1 rounded-md border ${timeRange === r.value
-                    ? 'border-[var(--accent-primary)]/50 text-[var(--accent-primary)]'
-                    : 'border-[var(--border-subtle)] text-[var(--text-muted)] hover:text-[var(--text-primary)]'}`}
-                >
-                  {r.label}
-                </button>
-              ))}
-            </div>
+        <section className="s-card !p-0">
+          <div className="s-cardhead border-b border-[var(--border-subtle)]">
+            <span className="s-ibox"><Activity /></span>
+            <h2 className="s-t">Telemetry</h2>
+            <span className="s-trail">
+              <span className="flex gap-1">
+                {TIME_RANGES.map((r) => (
+                  <button
+                    key={r.value}
+                    onClick={() => setTimeRange(r.value)}
+                    className={`s-chip v-mono ${timeRange === r.value ? 'on' : ''}`}
+                  >
+                    {r.label}
+                  </button>
+                ))}
+              </span>
+            </span>
           </div>
+          <div className="p-4">
           {metricsQuery.isLoading ? (
             <p className="text-xs text-[var(--text-muted)]">Loading metrics…</p>
           ) : metrics.length < 2 ? (
@@ -365,12 +356,17 @@ export function NodeDetailPage() {
               <Sparkline label="memory %" points={metrics} value={(m) => m.memory.usage_percent} />
             </div>
           )}
+          </div>
         </section>
 
         <div className="grid gap-6 lg:grid-cols-2">
-          <section className="panel p-0">
-            <h2 className="v-mono text-[11px] uppercase tracking-wider text-[var(--text-tertiary)] px-5 pt-4 pb-3">containers</h2>
-            <div className="divide-y divide-[var(--border-subtle)] border-t border-[var(--border-subtle)]">
+          <section className="s-card !p-0">
+            <div className="s-cardhead border-b border-[var(--border-subtle)]">
+              <span className="s-ibox"><Server /></span>
+              <h2 className="s-t">Containers</h2>
+              <span className="s-trail"><span className="s-chip" style={{ cursor: 'default' }}>{containers.length}</span></span>
+            </div>
+            <div className="divide-y divide-[var(--border-subtle)]">
               {containers.length === 0 && (
                 <p className="px-5 py-6 text-xs text-[var(--text-muted)]">No containers reported on this node.</p>
               )}
@@ -380,15 +376,24 @@ export function NodeDetailPage() {
                     <p className="truncate text-sm text-[var(--text-primary)]">{c.name ?? c.id}</p>
                     <p className="truncate v-mono text-[11px] text-[var(--text-tertiary)]">{c.image}</p>
                   </div>
-                  <span className="v-mono text-[11px] text-[var(--text-secondary)]">{c.status ?? '—'}</span>
+                  {/* Persisted query cache can replay the raw status object — flatten defensively. */}
+                  <span className="v-mono text-[11px] text-[var(--text-secondary)]">
+                    {typeof c.status === 'string'
+                      ? c.status
+                      : (c.status as { state?: string } | undefined)?.state ?? '—'}
+                  </span>
                 </div>
               ))}
             </div>
           </section>
 
-          <section className="panel p-0">
-            <h2 className="v-mono text-[11px] uppercase tracking-wider text-[var(--text-tertiary)] px-5 pt-4 pb-3">command history</h2>
-            <div className="divide-y divide-[var(--border-subtle)] border-t border-[var(--border-subtle)]">
+          <section className="s-card !p-0">
+            <div className="s-cardhead border-b border-[var(--border-subtle)]">
+              <span className="s-ibox"><ListOrdered /></span>
+              <h2 className="s-t">Command History</h2>
+              <span className="s-trail"><span className="s-chip" style={{ cursor: 'default' }}>{commands.length}</span></span>
+            </div>
+            <div className="divide-y divide-[var(--border-subtle)]">
               {commands.length === 0 && (
                 <p className="px-5 py-6 text-xs text-[var(--text-muted)]">No commands sent to this node yet.</p>
               )}
@@ -466,12 +471,19 @@ function meshAddresses(agent: { metadata: Record<string, unknown> }): [string, s
     .filter((entry): entry is [string, string] => typeof entry[1] === 'string' && entry[1] !== '');
 }
 
-function Stat({ label, value, sub }: { label: string; value: string; sub?: string }) {
+function Stat({ label, icon, value, sub }: { label: string; icon: React.ReactNode; value: string; sub?: string }) {
   return (
-    <div className="panel p-4">
-      <p className="v-mono text-[10px] uppercase tracking-wider text-[var(--text-tertiary)]">{label}</p>
-      <p className="mt-1 text-xl font-semibold text-[var(--text-primary)]">{value}</p>
-      {sub && <p className="mt-0.5 v-mono text-[11px] text-[var(--text-muted)]">{sub}</p>}
+    <div className="s-stat">
+      <div className="px-4 pb-1 pt-4">
+        <div className="flex items-center gap-2.5">
+          <span className="s-ibox">{icon}</span>
+          <span className="text-[11.5px] font-medium text-[var(--text-secondary)]">{label}</span>
+        </div>
+        <p className="mt-3 font-headline text-[24px] font-bold leading-none tabular-nums text-[var(--text-primary)]">{value}</p>
+      </div>
+      <div className="s-stat-foot mt-3">
+        <span>{sub ?? '—'}</span>
+      </div>
     </div>
   );
 }
@@ -510,24 +522,20 @@ function ConfirmModal({ title, body, confirmLabel, danger, extra, onCancel, onCo
   pending: boolean;
 }) {
   return (
-    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50" onClick={onCancel}>
-      <div className="panel w-full max-w-sm p-5" onClick={(e) => e.stopPropagation()}>
-        <h3 className="text-sm font-semibold text-[var(--text-primary)]">{title}</h3>
+    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm" onClick={onCancel}>
+      <div className="s-card w-full max-w-sm" onClick={(e) => e.stopPropagation()}>
+        <h3 className="s-t">{title}</h3>
         <p className="mt-2 text-xs text-[var(--text-secondary)]">{body}</p>
         {extra && <div className="mt-3">{extra}</div>}
         <div className="mt-5 flex justify-end gap-2">
-          <button onClick={onCancel} className="v-mono text-[11px] px-3 py-1.5 rounded-md border border-[var(--border-subtle)] text-[var(--text-secondary)]">
-            cancel
-          </button>
-          <button
+          <QuietBtn onClick={onCancel}>cancel</QuietBtn>
+          <GhostBtn
             onClick={onConfirm}
             disabled={pending}
-            className={`v-mono text-[11px] px-3 py-1.5 rounded-md border disabled:opacity-50 ${danger
-              ? 'border-[var(--error)]/50 text-[var(--error)] hover:bg-[var(--error)]/10'
-              : 'border-[var(--accent-primary)]/50 text-[var(--accent-primary)] hover:bg-[var(--accent-primary)]/10'}`}
+            className={danger ? '!text-[var(--error)] !border-[var(--error)]/40 !bg-[var(--error)]/10' : undefined}
           >
             {pending ? 'working…' : confirmLabel}
-          </button>
+          </GhostBtn>
         </div>
       </div>
     </div>
diff --git a/app/frontend/src/features/operations/pages/OperationsPage.tsx b/app/frontend/src/features/operations/pages/OperationsPage.tsx
index abeb1ab..15d20f4 100644
--- a/app/frontend/src/features/operations/pages/OperationsPage.tsx
+++ b/app/frontend/src/features/operations/pages/OperationsPage.tsx
@@ -4,28 +4,10 @@ import { getOperations, type OperationsView } from '@/lib/api-client';
 import { useDemoMode } from '@/lib/demo-mode';
 import { formatRelative } from '@/lib/time';
 import { DemoRestricted } from '@/shared/components';
+import { SPageHead, SPill, SStat, Ticks } from '@/shared/components/sentry';
+import { statusTone } from '@/shared/components/sentry-utils';
 import { Activity, AlertTriangle, Clock, Database, Loader2, Timer } from 'lucide-react';
 
-function statusClass(status: string): string {
-  switch (status) {
-    case 'deployed':
-    case 'completed':
-    case 'success':
-      return 'text-[var(--success)]';
-    case 'failed':
-    case 'cancelled':
-    case 'rolled_back':
-      return 'text-[var(--error)]';
-    case 'building':
-    case 'deploying':
-    case 'in_progress':
-    case 'running':
-      return 'text-[var(--accent-primary)]';
-    default:
-      return 'text-[var(--warning)]';
-  }
-}
-
 function Section({ title, icon: Icon, count, children }: {
   title: string;
   icon: typeof Activity;
@@ -33,13 +15,15 @@ function Section({ title, icon: Icon, count, children }: {
   children: React.ReactNode;
 }) {
   return (
-    <section className="panel p-5">
-      <div className="flex items-center gap-2 mb-4">
-        <Icon size={16} className="text-[var(--accent-primary)]" />
-        <h2 className="text-sm font-semibold text-[var(--text-primary)]">{title}</h2>
-        <span className="text-xs text-[var(--text-muted)] mono">({count})</span>
+    <section className="s-card overflow-hidden">
+      <div className="s-cardhead border-b border-[var(--border-subtle)]">
+        <span className="s-ibox"><Icon /></span>
+        <h2 className="s-t">{title}</h2>
+        <span className="s-trail">
+          <span className="s-chip" style={{ cursor: 'default' }}>{count}</span>
+        </span>
       </div>
-      {children}
+      <div className="p-3">{children}</div>
     </section>
   );
 }
@@ -74,13 +58,8 @@ export function OperationsPage() {
 
   return (
     <div className="min-h-screen">
-      <div className="border-b border-[var(--border-subtle)]">
-        <div className="w-full px-8 py-5">
-          <h1 className="v-title">Operations<span className="v-cursor">_</span></h1>
-          <p className="v-mono mt-1.5 text-[11px] text-[var(--text-tertiary)]">
-            Live view of deploys, queues, cron runs, and backups
-          </p>
-        </div>
+      <div className="w-full px-4 pt-6 sm:px-8">
+        <SPageHead title="Operations" titleAccent="_" sub="Live view of deploys, queues, cron runs, and backups" />
       </div>
 
       {opsQuery.isLoading ? (
@@ -89,23 +68,11 @@ export function OperationsPage() {
         </div>
       ) : (
         <div className="w-full px-4 py-6 sm:px-8 space-y-6">
-          <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
-            <div className="panel-soft p-4">
-              <p className="text-xs uppercase tracking-wider text-[var(--text-muted)]">In flight</p>
-              <p className="mt-1 text-2xl font-semibold text-[var(--accent-primary)]">{active.length}</p>
-            </div>
-            <div className="panel-soft p-4">
-              <p className="text-xs uppercase tracking-wider text-[var(--text-muted)]">Queued</p>
-              <p className="mt-1 text-2xl font-semibold text-[var(--warning)]">{queuedTotal}</p>
-            </div>
-            <div className="panel-soft p-4">
-              <p className="text-xs uppercase tracking-wider text-[var(--text-muted)]">Failed 24h</p>
-              <p className="mt-1 text-2xl font-semibold text-[var(--error)]">{failed.length}</p>
-            </div>
-            <div className="panel-soft p-4">
-              <p className="text-xs uppercase tracking-wider text-[var(--text-muted)]">Backups 24h</p>
-              <p className="mt-1 text-2xl font-semibold text-[var(--text-secondary)]">{backups.length}</p>
-            </div>
+          <div className="grid grid-cols-2 gap-3.5 md:grid-cols-4">
+            <SStat icon={<Activity />} label="In Flight" value={active.length} foot="deploying now" />
+            <SStat icon={<Clock />} label="Queued" value={queuedTotal} foot="waiting in queue" />
+            <SStat icon={<AlertTriangle />} label="Failed 24h" value={failed.length} foot="need attention" />
+            <SStat icon={<Database />} label="Backups 24h" value={backups.length} foot="completed runs" />
           </div>
 
           <div className="grid grid-cols-1 xl:grid-cols-2 gap-6">
@@ -125,7 +92,7 @@ export function OperationsPage() {
                         <span className="text-sm text-[var(--text-primary)]">{d.service_name}</span>
                         <span className="text-xs text-[var(--text-muted)]"> · {d.project_name}</span>
                       </div>
-                      <span className={`text-xs mono ${statusClass(d.status)}`}>{d.status}</span>
+                      <SPill tone={statusTone(d.status)}>{d.status}</SPill>
                       <span className="text-xs text-[var(--text-muted)]">{formatRelative(d.created_at)}</span>
                     </button>
                   ))}
@@ -152,7 +119,7 @@ export function OperationsPage() {
                           <p className="text-[11px] text-[var(--error)]/80 truncate">{d.error}</p>
                         )}
                       </div>
-                      <span className={`text-xs mono ${statusClass(d.status)}`}>{d.status}</span>
+                      <SPill tone={statusTone(d.status)}>{d.status}</SPill>
                       <span className="text-xs text-[var(--text-muted)]">{formatRelative(d.created_at)}</span>
                     </button>
                   ))}
@@ -167,9 +134,9 @@ export function OperationsPage() {
                 <div className="space-y-1.5">
                   {cron.map((r) => (
                     <div key={r.id} className="flex items-center gap-3 px-3 py-1.5 text-xs">
-                      <span className={`mono ${statusClass(r.status)}`}>{r.status}</span>
+                      <SPill tone={statusTone(r.status)}>{r.status}</SPill>
                       <span className="text-[var(--text-primary)]">{r.job_name}</span>
-                      <span className="mono text-[var(--text-muted)]">{r.schedule}</span>
+                      <span className="v-mono text-[var(--text-muted)]">{r.schedule}</span>
                       {r.error && <span className="text-[var(--error)]/80 truncate">{r.error}</span>}
                       <span className="ml-auto text-[var(--text-muted)]">{formatRelative(r.started_at)}</span>
                     </div>
@@ -185,7 +152,7 @@ export function OperationsPage() {
                 <div className="space-y-1.5">
                   {backups.map((b) => (
                     <div key={b.id} className="flex items-center gap-3 px-3 py-1.5 text-xs">
-                      <span className={`mono ${statusClass(b.status)}`}>{b.status}</span>
+                      <SPill tone={statusTone(b.status)}>{b.status}</SPill>
                       <span className="text-[var(--text-primary)]">{b.database_name}</span>
                       <span className="text-[var(--text-muted)]">{b.size}</span>
                       <span className="ml-auto text-[var(--text-muted)]">{formatRelative(b.created_at)}</span>
@@ -198,14 +165,15 @@ export function OperationsPage() {
 
           {queue.length > 0 && (
             <Section title="Deploy queue depth" icon={Clock} count={queue.length}>
-              <div className="space-y-1.5">
+              <div className="space-y-2">
                 {queue.map((q) => (
-                  <div key={q.service_id} className="flex items-center gap-3 px-3 py-1.5 text-xs mono">
-                    <span className="text-[var(--text-secondary)]">{q.service_id.slice(0, 8)}</span>
-                    <span className={q.running ? 'text-[var(--accent-primary)]' : 'text-[var(--text-muted)]'}>
-                      {q.running ? 'running' : 'idle'}
+                  <div key={q.service_id} className="flex items-center gap-3 px-3 py-1.5 text-xs">
+                    <span className="v-mono text-[var(--text-secondary)]">{q.service_id.slice(0, 8)}</span>
+                    <SPill tone={q.running ? 'info' : 'off'}>{q.running ? 'running' : 'idle'}</SPill>
+                    <span className="flex-1 max-w-[220px]">
+                      <Ticks pct={Math.min(100, q.queued * 25)} count={32} warn={!q.running} />
                     </span>
-                    <span className="text-[var(--warning)]">{q.queued} queued</span>
+                    <span className="v-mono text-[var(--warning)]">{q.queued} queued</span>
                   </div>
                 ))}
               </div>
diff --git a/app/frontend/src/features/projects/pages/ProjectsPage.tsx b/app/frontend/src/features/projects/pages/ProjectsPage.tsx
index 982d68a..d0b1378 100644
--- a/app/frontend/src/features/projects/pages/ProjectsPage.tsx
+++ b/app/frontend/src/features/projects/pages/ProjectsPage.tsx
@@ -13,10 +13,31 @@ import {
   Search,
   FolderOpen,
   X,
+  Cpu,
+  MemoryStick,
+  HardDrive,
+  Rocket,
+  RefreshCw,
+  Server,
 } from 'lucide-react';
 import { useAuthSession } from '@/lib/use-auth-session';
 import { useDemoMode } from '@/lib/demo-mode';
 import { demoProjects } from '@/lib/demo-data';
+import {
+  GhostBtn,
+  IconBtn,
+  QuietBtn,
+  SAnomaly,
+  SCard,
+  SPageHead,
+  SPill,
+  SSection,
+  SStat,
+  STable,
+  Ticks,
+  type SCol,
+} from '@/shared/components/sentry';
+import { statusTone } from '@/shared/components/sentry-utils';
 
 const demoDeploys = [
   { id: 'd1', name: 'API Gateway', project: 'Core Platform', status: 'DEPLOYED', when: '4m' },
@@ -25,6 +46,8 @@ const demoDeploys = [
   { id: 'd4', name: 'Marketing Site', project: 'Growth Surface', status: 'DEPLOYED', when: '2h' },
 ];
 
+type DeployRow = { id: string; name: string; project?: string; status: string; when: string };
+
 function getHealthStatus(stats: ProjectStats): 'healthy' | 'idle' | 'degraded' | 'critical' {
   if (stats.service_count === 0) return 'idle';
   if (stats.running_services === stats.service_count) return 'healthy';
@@ -32,19 +55,6 @@ function getHealthStatus(stats: ProjectStats): 'healthy' | 'idle' | 'degraded' |
   return 'critical';
 }
 
-function healthBadge(health: ReturnType<typeof getHealthStatus>) {
-  switch (health) {
-    case 'healthy':
-      return { label: 'RUNNING', cls: 'v-st-ok' };
-    case 'idle':
-      return { label: 'IDLE', cls: '' };
-    case 'degraded':
-      return { label: 'DEGRADED', cls: 'v-st-warn' };
-    case 'critical':
-      return { label: 'DOWN', cls: 'v-st-fail' };
-  }
-}
-
 function formatRelative(date?: string): string {
   if (!date) return '—';
   const diff = Date.now() - new Date(date).getTime();
@@ -54,6 +64,7 @@ function formatRelative(date?: string): string {
   return `${Math.floor(diff / 86_400_000)}d ago`;
 }
 
+/* Mini service topology preview inside each project card. */
 function MiniCanvas({ project }: { project: ProjectEntity }) {
   const count = project.stats.service_count;
   const running = project.stats.running_services;
@@ -84,40 +95,61 @@ function MiniCanvas({ project }: { project: ProjectEntity }) {
 function ProjectCard({ project, href }: { project: ProjectEntity; href: string }) {
   const navigate = useNavigate();
   const health = getHealthStatus(project.stats);
-  const badge = healthBadge(health);
-  const envOk = health === 'healthy';
-  const envLabel = envOk ? 'production' : health === 'idle' ? 'idle' : health === 'critical' ? 'down' : 'degraded';
+  const envLabel =
+    health === 'healthy' ? 'production' : health === 'idle' ? 'idle' : health === 'critical' ? 'down' : 'degraded';
 
   return (
     <article
-      className="group panel p-4 cursor-pointer transition-all duration-200 hover:-translate-y-0.5 hover:border-[var(--border-strong)]"
+      className="s-card group cursor-pointer transition-all duration-200 hover:-translate-y-0.5 hover:border-[var(--border-strong)]"
       onClick={() => navigate(href)}
     >
-      <div className="mb-3 flex items-center gap-2">
-        <h3 className="truncate text-[14.5px] font-bold tracking-tight text-[var(--text-primary)]">
-          {project.name}
-        </h3>
-        <span className={`v-st ml-auto ${badge.cls}`}>{badge.label}</span>
+      <div className="s-cardhead">
+        <IboxStub />
+        <h3 className="s-t truncate">{project.name}</h3>
+        <span className="s-trail">
+          <SPill
+            tone={
+              health === 'healthy' ? 'ok' : health === 'idle' ? 'off' : health === 'critical' ? 'err' : 'warn'
+            }
+          >
+            {health === 'healthy' ? 'Running' : health === 'idle' ? 'Idle' : health === 'critical' ? 'Down' : 'Degraded'}
+          </SPill>
+        </span>
       </div>
-      <MiniCanvas project={project} />
-      <div className="v-mono mt-3 flex items-center gap-2 text-[10.5px] text-[var(--text-tertiary)]">
-        <i
-          className="inline-block h-1.5 w-1.5 rounded-full"
-          style={{ background: envOk ? 'var(--success)' : health === 'idle' ? 'var(--text-tertiary)' : health === 'critical' ? 'var(--error)' : 'var(--warning)' }}
-        />
-        <span className="text-[var(--text-secondary)]">
-          {envLabel}
+      <div className="px-4">
+        <MiniCanvas project={project} />
+      </div>
+      <div className="s-stat-foot mt-3.5">
+        <span className="flex items-center gap-2">
+          <i
+            className="inline-block h-1.5 w-1.5 rounded-full"
+            style={{
+              background:
+                health === 'healthy'
+                  ? 'var(--success)'
+                  : health === 'idle'
+                    ? 'var(--text-tertiary)'
+                    : health === 'critical'
+                      ? 'var(--error)'
+                      : 'var(--warning)',
+            }}
+          />
+          {envLabel} · {project.stats.running_services}/{project.stats.service_count} online
         </span>
-        <span>·</span>
-        <span>
-          {project.stats.running_services}/{project.stats.service_count} online
-        </span>
-        <span className="ml-auto">{formatRelative(project.updatedAt)}</span>
+        <span>{formatRelative(project.updatedAt)}</span>
       </div>
     </article>
   );
 }
 
+function IboxStub() {
+  return (
+    <span className="s-ibox">
+      <Server size={13.5} />
+    </span>
+  );
+}
+
 export function ProjectsPage() {
   const navigate = useNavigate();
   const queryClient = useQueryClient();
@@ -181,7 +213,7 @@ export function ProjectsPage() {
   const totalServices = projects.reduce((sum, p) => sum + p.stats.service_count, 0);
   const runningServices = projects.reduce((sum, p) => sum + p.stats.running_services, 0);
   const host = hostQuery.data;
-  const hostLabel = host?.scope === 'docker-desktop-vm' ? 'VM' : 'HOST';
+  const hostLabel = host?.scope === 'docker-desktop-vm' ? 'VM' : 'Host';
   const cpuPct = isDemoMode ? 14 : host && host.cpu.cores > 0
     ? Math.min(100, Math.round((host.load.load1m / host.cpu.cores) * 100))
     : null;
@@ -190,9 +222,9 @@ export function ProjectsPage() {
   const fmtGB = (v: number) => `${(v / (1024 * 1024 * 1024)).toFixed(0)}G`;
   const deployments = isDemoMode ? [] : deploysQuery.data ?? [];
   const deployCount = deployments.length;
-  const feed = isDemoMode
+  const feed: DeployRow[] = isDemoMode
     ? demoDeploys
-    : deployments.slice(0, 5).map((d) => ({
+    : deployments.slice(0, 6).map((d) => ({
         id: d.id,
         name: d.serviceName || d.imageName || d.serviceId || d.id,
         project: d.projectName,
@@ -200,120 +232,188 @@ export function ProjectsPage() {
         when: formatRelative(d.startedAt ?? d.completedAt ?? d.createdAt),
       }));
 
-  const statusClass = (status: string) =>
-    status === 'DEPLOYED' || status === 'SUCCESS' || status === 'SUCCEEDED'
-      ? 'v-st-ok'
-      : status === 'BUILDING' || status === 'RUNNING' || status === 'QUEUED'
-        ? 'v-st-run'
-        : status === 'FAILED' || status === 'CANCELLED'
-          ? 'v-st-fail'
-          : 'v-st-off';
+  const statDefs = [
+    {
+      icon: <Cpu size={13.5} />,
+      label: `${hostLabel} CPU`,
+      value: cpuPct ?? '—',
+      unit: cpuPct !== null ? '%' : undefined,
+      ticks: cpuPct,
+      foot: isDemoMode || host ? `${host?.cpu.cores ?? 16} cores · load avg` : 'no telemetry',
+    },
+    {
+      icon: <MemoryStick size={13.5} />,
+      label: `${hostLabel} Memory`,
+      value: memPct ?? '—',
+      unit: memPct !== null ? '%' : undefined,
+      ticks: memPct,
+      foot: isDemoMode
+        ? '9.8G / 13G used'
+        : host
+          ? `${fmtGB(host.memory.used)} / ${fmtGB(host.memory.total)} used`
+          : 'no telemetry',
+    },
+    {
+      icon: <HardDrive size={13.5} />,
+      label: `${hostLabel} Disk`,
+      value: diskPct ?? '—',
+      unit: diskPct !== null ? '%' : undefined,
+      ticks: diskPct,
+      foot: isDemoMode
+        ? '338G of 465G'
+        : host
+          ? `${fmtGB(host.storage.used)} of ${fmtGB(host.storage.total)}`
+          : 'no telemetry',
+    },
+    {
+      icon: <Rocket size={13.5} />,
+      label: 'Deployments',
+      value: isDemoMode ? 18 : deployCount,
+      unit: 'recent',
+      ticks: null,
+      foot: isDemoMode
+        ? '17 succeeded'
+        : `${deployments.filter((d) => (d.status ?? '').toLowerCase() !== 'failed').length} succeeded`,
+    },
+  ];
+
+  const deployCols: SCol<DeployRow>[] = [
+    {
+      key: 'service',
+      label: 'Service',
+      width: '2.4fr',
+      sortValue: (r) => r.name,
+      render: (r) => (
+        <span className="text-[var(--text-primary)] font-medium">
+          {r.name}
+          {r.project ? (
+            <span className="v-mono ml-2 text-[10.5px] font-normal text-[var(--text-tertiary)]">{r.project}</span>
+          ) : null}
+        </span>
+      ),
+    },
+    {
+      key: 'status',
+      label: 'Status',
+      width: '1fr',
+      sortValue: (r) => r.status,
+      render: (r) => <SPill tone={statusTone(r.status)}>{r.status}</SPill>,
+    },
+    {
+      key: 'when',
+      label: 'When',
+      width: '0.6fr',
+      sortable: false,
+      render: (r) => <span className="v-mono text-[11.5px] text-[var(--text-tertiary)]">{r.when}</span>,
+    },
+  ];
+
+  const anomalies =
+    (diskPct ?? 0) > 85 || (memPct ?? 0) > 85
+      ? [
+          ...(diskPct ?? 0) > 85 ? [`Disk usage at ${diskPct}% — prune images or expand volume`] : [],
+          ...(memPct ?? 0) > 85 ? [`Memory pressure at ${memPct}% — consider rebalancing services`] : [],
+        ]
+      : [];
 
   return (
     <div className="min-h-screen">
-      <div className="w-full px-4 py-6 sm:px-8">
-        {/* Page head */}
-        <div className="mb-6 flex flex-wrap items-center justify-between gap-x-5 gap-y-3">
-          <div>
-            <h1 className="v-title">Projects<span className="v-cursor">_</span></h1>
-            <p className="v-mono mt-1.5 text-[11px] text-[var(--text-tertiary)]">
-              <b className="text-[var(--text-secondary)]">{String(projects.length).padStart(2, '0')}</b> projects ·{' '}
-              <b className="text-[var(--text-secondary)]">{String(totalServices).padStart(2, '0')}</b> services ·{' '}
-              <b className="text-[var(--text-secondary)]">{runningServices}</b> online
-            </p>
-          </div>
-          <div className="flex items-center gap-2.5">
-            <div className="search-box" style={{ width: 'min(240px, 42vw)' }}>
-              <Search size={13} />
-              <input
-                value={search}
-                onChange={(e) => setSearch(e.target.value)}
-                placeholder="search projects…"
-                className="v-mono"
-                style={{ fontSize: 11.5 }}
-              />
-            </div>
-            {signedIn && (
-              <button onClick={openCreate} className="v-btn">
-                + new project
-              </button>
-            )}
-          </div>
+      <div className="w-full px-4 py-6 sm:px-7">
+        <SPageHead
+          title="Projects"
+          titleAccent="_"
+          sub={
+            <>
+              {String(projects.length).padStart(2, '0')} projects · {String(totalServices).padStart(2, '0')} services ·{' '}
+            </>
+          }
+          subAccent={`${runningServices} online`}
+          actions={
+            <>
+              <div className="search-box" style={{ width: 'min(230px, 40vw)' }}>
+                <Search size={13} />
+                <input
+                  value={search}
+                  onChange={(e) => setSearch(e.target.value)}
+                  placeholder="Search projects"
+                />
+              </div>
+              <IconBtn title="Refresh" onClick={() => { projectsQuery.refetch(); deploysQuery.refetch(); hostQuery.refetch(); }}>
+                <RefreshCw size={14} />
+              </IconBtn>
+              {signedIn && (
+                <GhostBtn onClick={openCreate}>+ New Project</GhostBtn>
+              )}
+            </>
+          }
+        />
+
+        {/* Host telemetry */}
+        <div className="mb-4 grid grid-cols-2 gap-3.5 lg:grid-cols-4">
+          {statDefs.map((s) => (
+            <SStat
+              key={s.label}
+              icon={s.icon}
+              label={s.label}
+              value={s.value}
+              unit={s.unit}
+              foot={s.foot}
+              delta={s.label === 'Deployments' && feed.length > 0 ? { dir: 'up', text: `+${feed.length}` } : undefined}
+              extra={s.ticks !== null && s.ticks !== undefined ? <Ticks pct={s.ticks} count={44} warn={s.ticks > 85} /> : undefined}
+            />
+          ))}
         </div>
 
-        {/* Host stat row */}
-        <div className="mb-7 grid grid-cols-2 gap-3 lg:grid-cols-4">
-          <div className="v-stat">
-            <div className="v-k"><span>{hostLabel}.CPU</span><span className="v-live" /></div>
-            <div className="v-v">{cpuPct ?? '—'}<span>%</span></div>
-            {isDemoMode ? (
-              <div className="v-spark">
-                {[28, 44, 36, 58, 42, 66, 50, 34, 56, 40, 30, 20].map((h, i) => (
-                  <i key={i} style={{ height: `${h}%` }} />
-                ))}
-              </div>
-            ) : null}
-            <div className="v-d">
-              {isDemoMode || host ? (
-                <><b style={{ color: 'var(--success)' }}>healthy</b> · {host?.cpu.cores ?? 16} cores</>
-              ) : 'no telemetry'}
-            </div>
+        {anomalies.length > 0 && (
+          <div className="mb-4">
+            <SAnomaly
+              icon={
+                <svg width="12.5" height="12.5" viewBox="0 0 16 16" fill="none" stroke="var(--warning)" strokeWidth="1.5">
+                  <path d="M8 2.4 2.2 13h11.6z" />
+                  <path d="M8 6.6v3M8 11.4v.3" />
+                </svg>
+              }
+              title={<><b className="text-[var(--text-primary)] font-semibold">{anomalies.length}</b> resource anomaly{anomalies.length > 1 ? 's' : ''} detected</>}
+              items={anomalies}
+            />
           </div>
-          <div className="v-stat">
-            <div className="v-k"><span>{hostLabel}.MEM</span><span className="v-live" /></div>
-            <div className="v-v">{memPct ?? '—'}<span>%</span></div>
-            <div className="v-meter"><i className={memPct !== null && memPct > 85 ? 'r' : 'y'} style={{ width: `${memPct ?? 0}%` }} /></div>
-            <div className="v-d">{isDemoMode ? '9.8G / 13G' : host ? `${fmtGB(host.memory.used)} / ${fmtGB(host.memory.total)}` : 'no telemetry'}</div>
-          </div>
-          <div className="v-stat">
-            <div className="v-k"><span>{hostLabel}.DISK</span><span className="v-live" /></div>
-            <div className="v-v">{diskPct ?? '—'}<span>%</span></div>
-            <div className="v-meter"><i className="r" style={{ width: `${diskPct ?? 0}%` }} /></div>
-            <div className="v-d">{isDemoMode ? '338G of 465G · high' : host ? `${fmtGB(host.storage.used)} of ${fmtGB(host.storage.total)}` : 'no telemetry'}</div>
-          </div>
-          <div className="v-stat">
-            <div className="v-k"><span>DEPLOYS</span></div>
-            <div className="v-v">{isDemoMode ? 18 : deployCount}</div>
-            <div className="v-meter"><i style={{ width: '94%' }} /></div>
-            <div className="v-d"><b style={{ color: 'var(--success)' }}>{isDemoMode ? '17 ok' : `${deployments.filter((d) => (d.status ?? '').toLowerCase() !== 'failed').length} recent`}</b></div>
-          </div>
-        </div>
+        )}
 
         {/* Projects grid */}
-        <p className="v-sect">PROJECTS <span className="v-sect-r">{filteredProjects.length} records</span></p>
+        <SSection right={`${filteredProjects.length} records`}>Projects</SSection>
 
         {!isDemoMode && projectsQuery.isLoading && (
           <div className="grid grid-cols-1 gap-3.5 md:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-4">
             {Array.from({ length: 6 }).map((_, i) => (
-              <div key={i} className="panel h-[210px] animate-pulse" />
+              <div key={i} className="s-card h-[210px] animate-pulse" />
             ))}
           </div>
         )}
 
         {!isDemoMode && projectsQuery.isError && (
-          <div className="panel p-8 text-center">
-            <div className="mx-auto mb-4 flex h-12 w-12 items-center justify-center rounded-full bg-[var(--error-soft)]">
-              <X size={24} className="text-[var(--error)]" />
+          <div className="s-card p-8 text-center">
+            <div className="mx-auto mb-4 flex h-12 w-12 items-center justify-center rounded-xl bg-[var(--error-soft)]">
+              <X size={22} className="text-[var(--error)]" />
             </div>
-            <p className="text-lg font-medium text-[var(--text-primary)]">Failed to load projects</p>
-            <p className="mt-2 text-sm text-[var(--text-secondary)]">Check API connectivity and try again</p>
+            <p className="text-[15px] font-semibold text-[var(--text-primary)]">Failed to load projects</p>
+            <p className="mt-1.5 text-[12px] text-[var(--text-tertiary)]">Check API connectivity and try again</p>
           </div>
         )}
 
         {filteredProjects.length === 0 && !projectsQuery.isLoading && !projectsQuery.isError ? (
-          <div className="panel p-12 text-center">
-            <div className="mx-auto mb-6 flex h-16 w-16 items-center justify-center rounded-full bg-[var(--accent-primary-soft)]">
-              <FolderOpen size={28} className="text-[var(--accent-primary)]" />
+          <div className="s-card p-12 text-center">
+            <div className="mx-auto mb-5 flex h-14 w-14 items-center justify-center rounded-xl border border-[var(--border-default)] bg-[var(--bg-overlay)]">
+              <FolderOpen size={24} className="text-[var(--accent-primary)]" />
             </div>
-            <p className="text-xl font-semibold text-[var(--text-primary)]">No projects yet</p>
-            <p className="mx-auto mt-2 max-w-md text-[var(--text-secondary)]">
+            <p className="font-headline text-[17px] font-bold text-[var(--text-primary)]">No projects yet</p>
+            <p className="mx-auto mt-2 max-w-md text-[12.5px] text-[var(--text-secondary)]">
               {signedIn
                 ? 'Create your first project to start deploying services with visual topology management.'
                 : 'No public projects yet. Sign in to create one — an admin approves it before it goes public.'}
             </p>
-            <button onClick={openCreate} className="v-btn mt-6">
-              {signedIn ? '+ create project' : 'sign in to create'}
-            </button>
+            <GhostBtn onClick={openCreate} className="mt-6">
+              {signedIn ? '+ New Project' : 'Sign in to create'}
+            </GhostBtn>
           </div>
         ) : null}
 
@@ -326,24 +426,23 @@ export function ProjectsPage() {
         )}
 
         {/* Deploy feed */}
-        <p className="v-sect mt-7">RECENT DEPLOYMENTS <span className="v-sect-r">latest</span></p>
-        <div className="v-tbl">
-          <table>
-            <thead>
-              <tr><th>SERVICE</th><th>STATUS</th><th style={{ textAlign: 'right' }}>WHEN</th></tr>
-            </thead>
-            <tbody>
-              {feed.length === 0 ? (
-                <tr><td colSpan={3} className="text-center" style={{ color: 'var(--text-tertiary)' }}>no deployments yet</td></tr>
-              ) : feed.map((d) => (
-                <tr key={d.id}>
-                  <td className="v-lead">{d.name}{d.project ? <span className="v-mono ml-2 text-[10.5px] font-normal text-[var(--text-tertiary)]">{d.project}</span> : null}</td>
-                  <td><span className={`v-st ${statusClass(d.status)}`}>{d.status}</span></td>
-                  <td style={{ textAlign: 'right' }}>{d.when}</td>
-                </tr>
-              ))}
-            </tbody>
-          </table>
+        <div className="mt-6">
+          <SCard
+            icon={<Rocket size={13.5} />}
+            title="Recent Deployments"
+            accent={feed.length > 0 ? `(${feed.length})` : undefined}
+            trail={
+              <IconBtn title="Refresh" onClick={() => deploysQuery.refetch()}>
+                <RefreshCw size={13} />
+              </IconBtn>
+            }
+            pad={false}
+          >
+            <STable cols={deployCols} rows={feed} rowKey={(r) => r.id} />
+            {feed.length === 0 && (
+              <p className="px-7 pb-5 text-[12px] text-[var(--text-tertiary)]">No deployments yet.</p>
+            )}
+          </SCard>
         </div>
       </div>
 
@@ -351,58 +450,55 @@ export function ProjectsPage() {
       {isCreateOpen && (
         <div className="fixed inset-0 z-50 flex items-center justify-center p-4">
           <div className="absolute inset-0 bg-[var(--bg-void)]/80 backdrop-blur-sm" onClick={() => setCreateOpen(false)} />
-          <div className="relative w-full max-w-lg panel p-6">
-            <h2 className="text-xl font-semibold text-[var(--text-primary)]">Create new project</h2>
-            <p className="mt-1 text-sm text-[var(--text-secondary)]">
+          <div className="s-card relative w-full max-w-lg p-6">
+            <h2 className="font-headline text-[19px] font-bold tracking-tight text-[var(--text-primary)]">New project</h2>
+            <p className="mt-1 text-[12.5px] text-[var(--text-secondary)]">
               Projects organize your services and provide a visual canvas for topology management.
             </p>
-            <p className="mt-2 rounded-[var(--radius-md)] bg-[var(--warning-soft)] px-3 py-2 text-xs text-[var(--warning)]">
+            <div className="s-inset mt-3 text-[11.5px] text-[var(--warning)]">
               New projects stay private until a platform admin approves them for public listing.
-            </p>
+            </div>
 
-            <div className="mt-6 space-y-4">
+            <div className="mt-5 space-y-4">
               <div>
-                <label className="mb-2 block text-xs font-medium uppercase tracking-wider text-[var(--text-tertiary)]">
+                <label className="mb-2 block text-[11px] font-medium uppercase tracking-wider text-[var(--text-tertiary)]">
                   Project Name
                 </label>
                 <input
                   value={form.name}
                   onChange={(e) => setForm((p) => ({ ...p, name: e.target.value }))}
                   placeholder="my-awesome-project"
-                  className="h-11 w-full rounded-[var(--radius-md)] border border-[var(--border-subtle)] bg-[var(--surface-muted)] px-4 text-[var(--text-primary)] transition-all placeholder:text-[var(--text-muted)] focus:border-[var(--accent-primary)] focus:ring-1 focus:ring-[var(--accent-primary)]"
+                  className="h-10 w-full rounded-lg border border-[var(--border-default)] bg-[var(--bg-overlay)] px-3.5 text-[13px] text-[var(--text-primary)] transition-all placeholder:text-[var(--text-muted)] focus:border-[var(--accent-primary)] focus:outline-none"
                 />
               </div>
               <div>
-                <label className="mb-2 block text-xs font-medium uppercase tracking-wider text-[var(--text-tertiary)]">
+                <label className="mb-2 block text-[11px] font-medium uppercase tracking-wider text-[var(--text-tertiary)]">
                   Description <span className="normal-case text-[var(--text-muted)]">(optional)</span>
                 </label>
                 <textarea
                   value={form.description}
                   onChange={(e) => setForm((p) => ({ ...p, description: e.target.value }))}
-                  placeholder="Describe your project..."
+                  placeholder="Describe your project…"
                   rows={3}
-                  className="w-full resize-none rounded-[var(--radius-md)] border border-[var(--border-subtle)] bg-[var(--surface-muted)] px-4 py-3 text-[var(--text-primary)] transition-all placeholder:text-[var(--text-muted)] focus:border-[var(--accent-primary)] focus:ring-1 focus:ring-[var(--accent-primary)]"
+                  className="w-full resize-none rounded-lg border border-[var(--border-default)] bg-[var(--bg-overlay)] px-3.5 py-3 text-[13px] text-[var(--text-primary)] transition-all placeholder:text-[var(--text-muted)] focus:border-[var(--accent-primary)] focus:outline-none"
                 />
               </div>
             </div>
 
             {createProjectMutation.isError && (
-              <div className="mt-4 rounded-[var(--radius-md)] bg-[var(--error-soft)] px-4 py-3 text-sm text-[var(--error)]">
+              <div className="s-inset mt-4 text-[12px] text-[var(--error)]">
                 {(createProjectMutation.error as Error).message}
               </div>
             )}
 
-            <div className="mt-6 flex justify-end gap-3">
-              <button onClick={() => setCreateOpen(false)} className="v-btn-ghost">
-                Cancel
-              </button>
-              <button
+            <div className="mt-6 flex justify-end gap-2.5">
+              <QuietBtn onClick={() => setCreateOpen(false)}>Cancel</QuietBtn>
+              <GhostBtn
                 onClick={() => createProjectMutation.mutate()}
                 disabled={!form.name.trim() || createProjectMutation.isPending}
-                className="v-btn"
               >
-                {createProjectMutation.isPending ? 'Creating...' : 'Create Project'}
-              </button>
+                {createProjectMutation.isPending ? 'Creating…' : 'Create Project'}
+              </GhostBtn>
             </div>
           </div>
         </div>
diff --git a/app/frontend/src/features/secondary/pages.tsx b/app/frontend/src/features/secondary/pages.tsx
index f3d7b75..9221b80 100644
--- a/app/frontend/src/features/secondary/pages.tsx
+++ b/app/frontend/src/features/secondary/pages.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useMemo, useRef, useState } from 'react';
+import { useEffect, useMemo, useRef, useState, type ReactNode } from 'react';
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
 import { Link, useNavigate, useSearchParams } from 'react-router-dom';
 import {
@@ -104,6 +104,7 @@ import { formatRelative } from '@/lib/time';
 import { getAuthBaseUrl, signOutAuthSession } from '@/lib/auth-client';
 import { useBuildUpdates } from '@/lib/use-build-updates';
 import { EnhancedMetricCard, LineAreaChart, DonutChart, SegmentedBar, BarChart, DemoRestricted } from '@/shared/components';
+import { SPageHead } from '@/shared/components/sentry';
 import {
   Clock,
   Activity,
@@ -148,13 +149,10 @@ import {
   Send,
 } from 'lucide-react';
 
-function SecondaryPageHeader({ title, description }: { title: string; description: string }) {
+function SecondaryPageHeader({ title, description, actions }: { title: string; description: string; actions?: ReactNode }) {
   return (
-    <div className="border-b border-[var(--border-subtle)]">
-      <div className="w-full px-8 py-5">
-        <h1 className="v-title">{title}<span className="v-cursor">_</span></h1>
-        <p className="v-mono mt-1.5 text-[11px] text-[var(--text-tertiary)]">{description}</p>
-      </div>
+    <div className="w-full px-4 pt-6 sm:px-8">
+      <SPageHead title={title} titleAccent="_" sub={description} actions={actions} />
     </div>
   );
 }
@@ -180,15 +178,17 @@ function StatCard({
   };
 
   return (
-    <div className="panel p-5">
-      <div className="flex items-start justify-between mb-3">
-        <div className="w-10 h-10 rounded-[var(--radius-md)] bg-[var(--surface-muted)] flex items-center justify-center">
-          <Icon size={18} className="text-[var(--text-tertiary)]" />
+    <div className="s-stat">
+      <div className="px-4 pb-1 pt-4">
+        <div className="flex items-center gap-2.5">
+          <span className="s-ibox"><Icon /></span>
+          <span className="text-[11.5px] font-medium text-[var(--text-secondary)]">{title}</span>
         </div>
+        <p className={`font-headline mt-4 text-[30px] font-bold leading-none tracking-tight ${colorClasses[color]}`}>{value}</p>
+      </div>
+      <div className="s-stat-foot mt-4">
+        <span>{description}</span>
       </div>
-      <p className={`text-2xl font-semibold ${colorClasses[color]}`}>{value}</p>
-      <p className="text-xs font-medium text-[var(--text-muted)] mt-1">{title}</p>
-      <p className="text-xs text-[var(--text-tertiary)] mt-2">{description}</p>
     </div>
   );
 }
@@ -450,14 +450,14 @@ export function UsagePage() {
             <p className="mt-3 text-sm text-[var(--text-muted)]">Loading usage data...</p>
           </div>
         ) : !isDemoMode && buildsQuery.isError ? (
-          <div className="panel p-8 text-center">
+          <div className="s-card p-8 text-center">
             <div className="w-12 h-12 mx-auto mb-4 rounded-full bg-[var(--error-soft)] flex items-center justify-center">
               <AlertCircle size={24} className="text-[var(--error)]" />
             </div>
             <p className="text-sm text-[var(--error)]">Failed to load usage data</p>
           </div>
         ) : !signedIn ? (
-          <div className="panel p-8 text-center">
+          <div className="s-card p-8 text-center">
             <p className="text-sm text-[var(--text-secondary)]">Sign in to view build activity and capacity.</p>
           </div>
         ) : (
@@ -490,14 +490,12 @@ export function UsagePage() {
               />
             </div>
 
-            <section className="panel p-6">
+            <section className="s-card p-5">
               <div className="mb-5 flex items-center justify-between gap-3">
                 <div className="flex items-center gap-3">
-                  <div className="flex h-10 w-10 items-center justify-center rounded-[var(--radius-md)] bg-[var(--accent-primary-soft)]">
-                    <Server size={18} className="text-[var(--accent-primary)]" />
-                  </div>
+                  <span className="s-ibox !w-9 !h-9"><Server /></span>
                   <div>
-                    <h2 className="text-lg font-semibold text-[var(--text-primary)]">Host Monitoring</h2>
+                    <h2 className="s-t">Host Monitoring</h2>
                     <p className="text-xs text-[var(--text-tertiary)]">
                       {host
                         ? `${host.hostname} · ${host.os}/${host.architecture} · uptime ${formatUptime(host.uptimeSeconds)}${host.dockerAvailable ? '' : ' · Docker unavailable'}`
@@ -578,13 +576,11 @@ export function UsagePage() {
               )}
             </section>
 
-            <section className="panel p-6">
+            <section className="s-card p-5">
               <div className="mb-5 flex items-center gap-3">
-                <div className="flex h-10 w-10 items-center justify-center rounded-[var(--radius-md)] bg-[var(--surface-muted)]">
-                  <Radio size={18} className="text-[var(--text-tertiary)]" />
-                </div>
+                <span className="s-ibox !w-9 !h-9"><Radio /></span>
                 <div>
-                  <h2 className="text-lg font-semibold text-[var(--text-primary)]">Node Agents</h2>
+                  <h2 className="s-t">Node Agents</h2>
                   <p className="text-xs text-[var(--text-tertiary)]">Remote VPS, VM, and LXC capacity for placement and autoscaling.</p>
                 </div>
               </div>
@@ -678,8 +674,8 @@ export function UsagePage() {
                     <button
                       onClick={() => createTokenMutation.mutate()}
                       disabled={createTokenMutation.isPending}
-                      className="h-8 px-3 rounded-[var(--radius-md)] text-xs font-medium text-[var(--accent-on)] transition-all disabled:opacity-50"
-                      style={{ background: 'var(--accent-primary)' }}
+                      className="s-btn-accent h-8 disabled:opacity-50"
+                      
                     >
                       {createTokenMutation.isPending ? 'Issuing…' : 'Issue token'}
                     </button>
@@ -688,7 +684,7 @@ export function UsagePage() {
                   {issuedToken && (
                     <div className="mb-3 rounded-[var(--radius-md)] border border-[var(--success)]/30 bg-[var(--success-soft)] p-3">
                       <div className="flex items-center justify-between gap-2">
-                        <span className="mono text-xs text-[var(--text-primary)] break-all">{issuedToken.token}</span>
+                        <span className="v-mono text-xs text-[var(--text-primary)] break-all">{issuedToken.token}</span>
                         <button
                           onClick={() => void navigator.clipboard.writeText(issuedToken.token ?? '')}
                           className="flex items-center gap-1 text-xs text-[var(--accent-primary)] hover:underline shrink-0"
@@ -706,11 +702,11 @@ export function UsagePage() {
                     </p>
                   )}
 
-                  <pre className="mono text-xs text-[var(--text-secondary)] whitespace-pre-wrap">{installCommand}</pre>
-                  <pre className="mono text-xs text-[var(--text-secondary)] whitespace-pre-wrap mt-2">{sshCommand}</pre>
+                  <pre className="v-mono text-xs text-[var(--text-secondary)] whitespace-pre-wrap">{installCommand}</pre>
+                  <pre className="v-mono text-xs text-[var(--text-secondary)] whitespace-pre-wrap mt-2">{sshCommand}</pre>
                   <div className="mt-4 space-y-2 text-xs text-[var(--text-tertiary)]">
-                    <p>Agent endpoint: <span className="mono text-[var(--text-primary)]">{agentEndpoint}</span></p>
-                    <p>Use an issued token above, or set <span className="mono text-[var(--text-primary)]">CONTAINR_AGENT_AUTH_TOKENS</span> on the backend.</p>
+                    <p>Agent endpoint: <span className="v-mono text-[var(--text-primary)]">{agentEndpoint}</span></p>
+                    <p>Use an issued token above, or set <span className="v-mono text-[var(--text-primary)]">CONTAINR_AGENT_AUTH_TOKENS</span> on the backend.</p>
                     <p>Agent sends host resources, polls pending Docker commands, and reports command results.</p>
                   </div>
 
@@ -876,13 +872,11 @@ export function PeoplePage() {
               />
             </div>
 
-            <section className="panel p-6">
+            <section className="s-card p-5">
               <div className="mb-5 flex items-center gap-3">
-                <div className="flex h-10 w-10 items-center justify-center rounded-[var(--radius-md)] bg-[var(--accent-primary-soft)]">
-                  <UserPlus size={18} className="text-[var(--accent-primary)]" />
-                </div>
+                <span className="s-ibox !w-9 !h-9"><UserPlus /></span>
                 <div>
-                  <h2 className="text-lg font-semibold text-[var(--text-primary)]">Manual User Creation</h2>
+                  <h2 className="s-t">Manual User Creation</h2>
                   <p className="text-xs text-[var(--text-tertiary)]">Public registration is closed after bootstrap.</p>
                 </div>
               </div>
@@ -921,8 +915,8 @@ export function PeoplePage() {
                 <button
                   type="submit"
                   disabled={createUserMutation.isPending}
-                  className="inline-flex h-10 items-center justify-center gap-2 rounded-[var(--radius-md)] px-4 text-sm font-semibold text-[var(--accent-on)] disabled:opacity-60"
-                  style={{ background: 'var(--accent-primary)' }}
+                  className="s-btn-accent h-10 justify-center disabled:opacity-60"
+                  
                 >
                   {createUserMutation.isPending ? <Loader2 size={14} className="animate-spin" /> : <UserPlus size={14} />}
                   Create
@@ -1057,14 +1051,12 @@ function GitProvidersSection() {
   const selectedType = gitProviderTypes.find((t) => t.value === form.name)!;
 
   return (
-    <section className="panel p-6">
+    <section className="s-card p-5">
       <div className="flex items-center justify-between mb-4">
         <div className="flex items-center gap-3">
-          <div className="w-10 h-10 rounded-[var(--radius-md)] bg-[var(--accent-primary-soft)] flex items-center justify-center">
-            <GitBranch size={18} className="text-[var(--accent-primary)]" />
-          </div>
+          <span className="s-ibox !w-9 !h-9"><GitBranch /></span>
           <div>
-            <h2 className="text-lg font-semibold text-[var(--text-primary)]">Git Providers</h2>
+            <h2 className="s-t">Git Providers</h2>
             <p className="text-xs text-[var(--text-tertiary)]">Connect accounts to deploy services from repositories</p>
           </div>
         </div>
@@ -1073,8 +1065,8 @@ function GitProvidersSection() {
             <button
               onClick={() => provisionMutation.mutate()}
               disabled={provisionMutation.isPending}
-              className="flex items-center gap-2 h-9 px-4 rounded-[var(--radius-md)] text-[var(--accent-on)] text-sm font-medium shadow-lg transition-all disabled:opacity-50"
-              style={{ background: 'var(--accent-primary)' }}
+              className="s-btn-accent h-9 disabled:opacity-50"
+              
             >
               <GitBranch size={14} />
               {provisionMutation.isPending ? 'Opening GitHub…' : 'Set up GitHub App'}
@@ -1090,8 +1082,8 @@ function GitProvidersSection() {
           )}
           <button
             onClick={() => setFormOpen((open) => !open)}
-            className="flex items-center gap-2 h-9 px-4 rounded-[var(--radius-md)] text-[var(--accent-on)] text-sm font-medium shadow-lg transition-all"
-            style={{ background: 'var(--accent-primary)' }}
+            className="s-btn-accent h-9"
+            
           >
             <Link2 size={14} />
             {formOpen ? 'Close' : 'Connect'}
@@ -1140,12 +1132,10 @@ function GitProvidersSection() {
           {providers.map((provider) => (
             <div
               key={provider.id}
-              className="flex items-center justify-between p-3 rounded-[var(--radius-md)] border border-[var(--border-subtle)] bg-[var(--surface-muted)]"
+              className="s-inset flex items-center justify-between"
             >
               <div className="flex items-center gap-3">
-                <div className="w-8 h-8 rounded-[var(--radius-sm)] bg-[var(--surface-card)] flex items-center justify-center">
-                  <GitBranch size={14} className="text-[var(--text-tertiary)]" />
-                </div>
+                <span className="s-ibox"><GitBranch /></span>
                 <div>
                   <p className="text-sm font-medium text-[var(--text-primary)]">{provider.display_name}</p>
                   <p className="text-xs text-[var(--text-muted)] capitalize">{provider.name.replace('_', ' ')}</p>
@@ -1201,7 +1191,7 @@ function GitProvidersSection() {
               type="password"
               value={form.accessToken}
               onChange={(e) => setForm((p) => ({ ...p, accessToken: e.target.value }))}
-              className="w-full h-10 px-3 rounded-[var(--radius-md)] border border-[var(--border-subtle)] bg-[var(--surface-muted)] text-sm mono focus:border-[var(--accent-primary)] transition-colors"
+              className="w-full h-10 px-3 rounded-[var(--radius-md)] border border-[var(--border-subtle)] bg-[var(--surface-muted)] text-sm v-mono focus:border-[var(--accent-primary)] transition-colors"
               placeholder="••••••••••••••••"
             />
             <p className="text-xs text-[var(--text-muted)] mt-1.5">{selectedType.tokenHint}</p>
@@ -1214,7 +1204,7 @@ function GitProvidersSection() {
               <input
                 value={form.apiUrl}
                 onChange={(e) => setForm((p) => ({ ...p, apiUrl: e.target.value }))}
-                className="w-full h-10 px-3 rounded-[var(--radius-md)] border border-[var(--border-subtle)] bg-[var(--surface-muted)] text-sm mono focus:border-[var(--accent-primary)] transition-colors"
+                className="w-full h-10 px-3 rounded-[var(--radius-md)] border border-[var(--border-subtle)] bg-[var(--surface-muted)] text-sm v-mono focus:border-[var(--accent-primary)] transition-colors"
                 placeholder="https://gitea.example.com"
               />
             </div>
@@ -1228,8 +1218,8 @@ function GitProvidersSection() {
             <button
               onClick={() => createMutation.mutate()}
               disabled={!form.accessToken.trim() || createMutation.isPending}
-              className="flex items-center gap-2 h-9 px-4 rounded-[var(--radius-md)] text-[var(--accent-on)] text-sm font-medium shadow-lg disabled:opacity-50 disabled:cursor-not-allowed transition-all"
-              style={{ background: 'var(--accent-primary)' }}
+              className="s-btn-accent h-9 disabled:opacity-50 disabled:cursor-not-allowed"
+              
             >
               {createMutation.isPending ? <Loader2 size={14} className="animate-spin" /> : <Check size={14} />}
               Connect Provider
@@ -1274,7 +1264,7 @@ export function GitHubAppCallbackPage() {
       {!code ? (
         <>
           <AlertCircle size={28} className="mx-auto text-[var(--error)]" />
-          <h1 className="mt-4 text-lg font-semibold text-[var(--text-primary)]">Missing code</h1>
+          <h1 className="mt-4 font-headline text-lg font-semibold text-[var(--text-primary)]">Missing code</h1>
           <p className="mt-2 text-sm text-[var(--text-tertiary)]">
             GitHub did not return an app code. Start the setup again from Git providers.
           </p>
@@ -1282,14 +1272,14 @@ export function GitHubAppCallbackPage() {
       ) : convertMutation.isError ? (
         <>
           <AlertCircle size={28} className="mx-auto text-[var(--error)]" />
-          <h1 className="mt-4 text-lg font-semibold text-[var(--text-primary)]">Setup failed</h1>
+          <h1 className="mt-4 font-headline text-lg font-semibold text-[var(--text-primary)]">Setup failed</h1>
           <p className="mt-2 text-sm text-[var(--text-tertiary)]">
             {convertMutation.error instanceof Error ? convertMutation.error.message : 'Could not provision the GitHub App'}
           </p>
           <button
             type="button"
             onClick={() => navigate('/settings', { replace: true })}
-            className="mt-6 rounded-[var(--radius-md)] bg-[var(--accent-primary)] px-4 py-2 text-sm font-semibold text-[var(--accent-on)]"
+            className="s-btn-accent mt-6"
           >
             Back to settings
           </button>
@@ -1297,7 +1287,7 @@ export function GitHubAppCallbackPage() {
       ) : (
         <>
           <Loader2 size={28} className="mx-auto animate-spin text-[var(--accent-primary)]" />
-          <h1 className="mt-4 text-lg font-semibold text-[var(--text-primary)]">Setting up GitHub App</h1>
+          <h1 className="mt-4 font-headline text-lg font-semibold text-[var(--text-primary)]">Setting up GitHub App</h1>
           <p className="mt-2 text-sm text-[var(--text-tertiary)]">Exchanging the app credentials…</p>
         </>
       )}
@@ -1353,13 +1343,11 @@ function PlatformSettingsSection() {
   };
 
   return (
-    <section className="panel p-6">
+    <section className="s-card p-5">
       <div className="flex items-center gap-3 mb-4">
-        <div className="w-10 h-10 rounded-[var(--radius-md)] bg-[var(--accent-primary-soft)] flex items-center justify-center">
-          <Cloud size={18} className="text-[var(--accent-primary)]" />
-        </div>
+        <span className="s-ibox !w-9 !h-9"><Cloud /></span>
         <div>
-          <h2 className="text-lg font-semibold text-[var(--text-primary)]">Platform</h2>
+          <h2 className="s-t">Platform</h2>
           <p className="text-xs text-[var(--text-tertiary)]">Owner only - values set here override environment variables</p>
         </div>
       </div>
@@ -1412,8 +1400,8 @@ function PlatformSettingsSection() {
               <button
                 onClick={saveToken}
                 disabled={saveMutation.isPending || !tokenDraft.trim()}
-                className="h-9 px-4 rounded-[var(--radius-md)] text-sm font-medium text-[var(--accent-on)] disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
-                style={{ background: 'var(--accent-primary)' }}
+                className="s-btn-accent h-9 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
+                
               >
                 Save
               </button>
@@ -1475,8 +1463,8 @@ function PlatformSettingsSection() {
                   saveMutation.mutate({ branding: b });
                 }}
                 disabled={saveMutation.isPending || Object.keys(brandDraft).length === 0}
-                className="h-9 px-4 rounded-[var(--radius-md)] text-sm font-medium text-[var(--accent-on)] disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
-                style={{ background: 'var(--accent-primary)' }}
+                className="s-btn-accent h-9 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
+                
               >
                 Save branding
               </button>
@@ -1548,13 +1536,11 @@ function UserTokensSection({ isAdmin }: { isAdmin: boolean }) {
       ];
 
   return (
-    <section className="panel p-6">
+    <section className="s-card p-5">
       <div className="flex items-center gap-3 mb-4">
-        <div className="w-10 h-10 rounded-[var(--radius-md)] bg-[var(--accent-primary-soft)] flex items-center justify-center">
-          <Key size={18} className="text-[var(--accent-primary)]" />
-        </div>
+        <span className="s-ibox !w-9 !h-9"><Key /></span>
         <div>
-          <h2 className="text-lg font-semibold text-[var(--text-primary)]">Personal Access Tokens</h2>
+          <h2 className="s-t">Personal Access Tokens</h2>
           <p className="text-xs text-[var(--text-tertiary)]">Authenticate the CLI, MCP server, and scripts - same rights as you, bounded by scope</p>
         </div>
       </div>
@@ -1588,8 +1574,8 @@ function UserTokensSection({ isAdmin }: { isAdmin: boolean }) {
           <button
             onClick={() => createMutation.mutate()}
             disabled={createMutation.isPending || !tokenName.trim()}
-            className="h-9 px-4 rounded-[var(--radius-md)] text-sm font-medium text-[var(--accent-on)] disabled:opacity-50 disabled:cursor-not-allowed transition-all"
-            style={{ background: 'var(--accent-primary)' }}
+            className="s-btn-accent h-9 disabled:opacity-50 disabled:cursor-not-allowed"
+            
           >
             {createMutation.isPending ? 'Creating…' : 'Create token'}
           </button>
@@ -1598,7 +1584,7 @@ function UserTokensSection({ isAdmin }: { isAdmin: boolean }) {
         {issuedToken ? (
           <div className="rounded-[var(--radius-md)] border border-[var(--success)]/30 bg-[var(--success-soft)] p-3">
             <div className="flex items-center justify-between gap-2">
-              <span className="mono text-xs text-[var(--text-primary)] break-all">{issuedToken.token}</span>
+              <span className="v-mono text-xs text-[var(--text-primary)] break-all">{issuedToken.token}</span>
               <button
                 onClick={() => void navigator.clipboard.writeText(issuedToken.token ?? '')}
                 className="flex items-center gap-1 text-xs text-[var(--accent-primary)] hover:underline shrink-0"
@@ -1608,7 +1594,7 @@ function UserTokensSection({ isAdmin }: { isAdmin: boolean }) {
               </button>
             </div>
             <p className="mt-1 text-xs text-[var(--text-tertiary)]">
-              Shown once - store it now. Use with <span className="mono">containr auth login --token</span> or as a Bearer token.
+              Shown once - store it now. Use with <span className="v-mono">containr auth login --token</span> or as a Bearer token.
             </p>
           </div>
         ) : null}
@@ -1630,7 +1616,7 @@ function UserTokensSection({ isAdmin }: { isAdmin: boolean }) {
               <div key={token.id} className="flex items-center justify-between gap-2 text-xs">
                 <div className="min-w-0">
                   <span className="text-[var(--text-primary)]">{token.name}</span>
-                  <span className="ml-2 mono text-[var(--text-muted)]">{token.key_prefix}…</span>
+                  <span className="ml-2 v-mono text-[var(--text-muted)]">{token.key_prefix}…</span>
                   <span className="ml-2 rounded px-1.5 py-0.5 bg-[var(--surface-muted)] text-[var(--text-secondary)]">{token.scope}</span>
                   <span className="ml-2 text-[var(--text-muted)]">
                     {token.last_used_at ? `used ${formatRelative(token.last_used_at)}` : 'unused'}
@@ -1692,13 +1678,11 @@ function RegistriesSection() {
   const registries = registriesQuery.data ?? [];
 
   return (
-    <section className="panel p-6">
+    <section className="s-card p-5">
       <div className="flex items-center gap-3 mb-4">
-        <div className="w-10 h-10 rounded-[var(--radius-md)] bg-[var(--accent-primary-soft)] flex items-center justify-center">
-          <Archive size={18} className="text-[var(--accent-primary)]" />
-        </div>
+        <span className="s-ibox !w-9 !h-9"><Archive /></span>
         <div>
-          <h2 className="text-lg font-semibold text-[var(--text-primary)]">Registry credentials</h2>
+          <h2 className="s-t">Registry credentials</h2>
           <p className="text-xs text-[var(--text-tertiary)]">Pull private images on deploy - matched by image host, stored encrypted</p>
         </div>
       </div>
@@ -1733,8 +1717,8 @@ function RegistriesSection() {
           <button
             onClick={() => createMutation.mutate()}
             disabled={createMutation.isPending || !name.trim() || !host.trim()}
-            className="h-9 px-4 rounded-[var(--radius-md)] text-sm font-medium text-[var(--accent-on)] disabled:opacity-50 disabled:cursor-not-allowed transition-all"
-            style={{ background: 'var(--accent-primary)' }}
+            className="s-btn-accent h-9 disabled:opacity-50 disabled:cursor-not-allowed"
+            
           >
             {createMutation.isPending ? 'Adding…' : 'Add registry'}
           </button>
@@ -1760,7 +1744,7 @@ function RegistriesSection() {
               <div key={r.id} className="flex items-center justify-between gap-2 text-xs">
                 <div className="min-w-0">
                   <span className="text-[var(--text-primary)]">{r.name}</span>
-                  <span className="ml-2 mono text-[var(--text-muted)]">{r.host}</span>
+                  <span className="ml-2 v-mono text-[var(--text-muted)]">{r.host}</span>
                   {r.username ? <span className="ml-2 text-[var(--text-secondary)]">{r.username}</span> : null}
                   <span className="ml-2 rounded px-1.5 py-0.5 bg-[var(--surface-muted)] text-[var(--text-secondary)]">
                     {r.has_password ? 'password set' : 'anonymous'}
@@ -1828,13 +1812,11 @@ function BackupTargetsSection() {
   const fieldCls = 'h-9 flex-1 min-w-[130px] rounded-[var(--radius-md)] border border-[var(--border-subtle)] bg-[var(--surface-muted)] px-3 text-sm text-[var(--text-primary)] placeholder:text-[var(--text-muted)] focus:border-[var(--accent-primary)] transition-all';
 
   return (
-    <section className="panel p-6">
+    <section className="s-card p-5">
       <div className="flex items-center gap-3 mb-4">
-        <div className="w-10 h-10 rounded-[var(--radius-md)] bg-[var(--accent-primary-soft)] flex items-center justify-center">
-          <HardDrive size={18} className="text-[var(--accent-primary)]" />
-        </div>
+        <span className="s-ibox !w-9 !h-9"><HardDrive /></span>
         <div>
-          <h2 className="text-lg font-semibold text-[var(--text-primary)]">Backup targets</h2>
+          <h2 className="s-t">Backup targets</h2>
           <p className="text-xs text-[var(--text-tertiary)]">S3-compatible destinations for database archives — keys stored encrypted</p>
         </div>
       </div>
@@ -1853,8 +1835,8 @@ function BackupTargetsSection() {
           <button
             onClick={() => createMutation.mutate()}
             disabled={createMutation.isPending || !form.name.trim() || !form.endpoint.trim() || !form.bucket.trim()}
-            className="h-9 px-4 rounded-[var(--radius-md)] text-sm font-medium text-[var(--accent-on)] disabled:opacity-50 disabled:cursor-not-allowed transition-all"
-            style={{ background: 'var(--accent-primary)' }}
+            className="s-btn-accent h-9 disabled:opacity-50 disabled:cursor-not-allowed"
+            
           >
             {createMutation.isPending ? 'Checking…' : 'Add target'}
           </button>
@@ -1880,7 +1862,7 @@ function BackupTargetsSection() {
               <div key={t.id} className="flex items-center justify-between gap-2 text-xs">
                 <div className="min-w-0">
                   <span className="text-[var(--text-primary)]">{t.name}</span>
-                  <span className="ml-2 mono text-[var(--text-muted)]">{t.endpoint}/{t.bucket}{t.prefix ? `/${t.prefix}` : ''}</span>
+                  <span className="ml-2 v-mono text-[var(--text-muted)]">{t.endpoint}/{t.bucket}{t.prefix ? `/${t.prefix}` : ''}</span>
                   <span className="ml-2 rounded px-1.5 py-0.5 bg-[var(--surface-muted)] text-[var(--text-secondary)]">
                     {t.has_credentials ? 'keys set' : 'anonymous'}{t.use_tls ? '' : ' · no TLS'}
                   </span>
@@ -1961,13 +1943,11 @@ function NotificationChannelsSection() {
   const channels = channelsQuery.data ?? [];
 
   return (
-    <section className="panel p-6">
+    <section className="s-card p-5">
       <div className="flex items-center gap-3 mb-4">
-        <div className="w-10 h-10 rounded-[var(--radius-md)] bg-[var(--accent-primary-soft)] flex items-center justify-center">
-          <Bell size={18} className="text-[var(--accent-primary)]" />
-        </div>
+        <span className="s-ibox !w-9 !h-9"><Bell /></span>
         <div>
-          <h2 className="text-lg font-semibold text-[var(--text-primary)]">Push notifications</h2>
+          <h2 className="s-t">Push notifications</h2>
           <p className="text-xs text-[var(--text-tertiary)]">Relay notifications to a self-hosted ntfy or Gotify server</p>
         </div>
       </div>
@@ -1998,8 +1978,8 @@ function NotificationChannelsSection() {
           <button
             onClick={() => createMutation.mutate()}
             disabled={createMutation.isPending || !endpoint.trim()}
-            className="h-9 px-4 rounded-[var(--radius-md)] text-sm font-medium text-[var(--accent-on)] disabled:opacity-50 disabled:cursor-not-allowed transition-all"
-            style={{ background: 'var(--accent-primary)' }}
+            className="s-btn-accent h-9 disabled:opacity-50 disabled:cursor-not-allowed"
+            
           >
             {createMutation.isPending ? 'Adding…' : 'Add channel'}
           </button>
@@ -2027,7 +2007,7 @@ function NotificationChannelsSection() {
                   <span className="rounded px-1.5 py-0.5 bg-[var(--surface-muted)] text-[var(--text-secondary)] uppercase">
                     {ch.kind}
                   </span>
-                  <span className="ml-2 mono text-[var(--text-primary)] break-all">{ch.endpoint}</span>
+                  <span className="ml-2 v-mono text-[var(--text-primary)] break-all">{ch.endpoint}</span>
                   {testResult[ch.id] === 'ok' ? (
                     <span className="ml-2 text-[var(--success)]">delivered</span>
                   ) : testResult[ch.id] ? (
@@ -2148,13 +2128,11 @@ export function SettingsPage() {
       <div className="w-full px-4 py-6 sm:px-8">
         <div className="grid grid-cols-1 xl:grid-cols-2 gap-6">
           {/* Profile Section */}
-          <section className="panel p-6">
+          <section className="s-card p-5">
             <div className="flex items-center gap-3 mb-4">
-              <div className="w-10 h-10 rounded-[var(--radius-md)] bg-[var(--accent-primary-soft)] flex items-center justify-center">
-                <User size={18} className="text-[var(--accent-primary)]" />
-              </div>
+              <span className="s-ibox !w-9 !h-9"><User /></span>
               <div>
-                <h2 className="text-lg font-semibold text-[var(--text-primary)]">Profile</h2>
+                <h2 className="s-t">Profile</h2>
                 <p className="text-xs text-[var(--text-tertiary)]">Backed by GET/PUT /user/profile</p>
               </div>
             </div>
@@ -2196,8 +2174,8 @@ export function SettingsPage() {
                   <button
                     onClick={() => updateProfileMutation.mutate()}
                     disabled={!hasProfileChanges || updateProfileMutation.isPending}
-                    className="flex items-center gap-2 h-9 px-4 rounded-[var(--radius-md)] text-[var(--accent-on)] text-sm font-medium shadow-lg disabled:opacity-50 disabled:cursor-not-allowed transition-all"
-                    style={{ background: 'var(--accent-primary)' }}
+                    className="s-btn-accent h-9 disabled:opacity-50 disabled:cursor-not-allowed"
+                    
                   >
                     {updateProfileMutation.isPending ? (
                       <>
@@ -2248,13 +2226,11 @@ export function SettingsPage() {
           <GitProvidersSection />
 
           {/* Audit Logs Section */}
-          <section className="panel p-6">
+          <section className="s-card p-5">
             <div className="flex items-center gap-3 mb-4">
-              <div className="w-10 h-10 rounded-[var(--radius-md)] bg-[var(--accent-primary-soft)] flex items-center justify-center">
-                <ScrollText size={18} className="text-[var(--accent-primary)]" />
-              </div>
+              <span className="s-ibox !w-9 !h-9"><ScrollText /></span>
               <div>
-                <h2 className="text-lg font-semibold text-[var(--text-primary)]">Audit Logs</h2>
+                <h2 className="s-t">Audit Logs</h2>
                 <p className="text-xs text-[var(--text-tertiary)]">Every authenticated action recorded by the platform</p>
               </div>
             </div>
@@ -2271,13 +2247,11 @@ export function SettingsPage() {
           </section>
 
           {/* Runtime & Local State Section */}
-          <section className="panel p-6">
+          <section className="s-card p-5">
             <div className="flex items-center gap-3 mb-4">
-              <div className="w-10 h-10 rounded-[var(--radius-md)] bg-[var(--surface-muted)] flex items-center justify-center">
-                <Settings size={18} className="text-[var(--text-tertiary)]" />
-              </div>
+              <span className="s-ibox !w-9 !h-9"><Settings /></span>
               <div>
-                <h2 className="text-lg font-semibold text-[var(--text-primary)]">Runtime & Local State</h2>
+                <h2 className="s-t">Runtime & Local State</h2>
                 <p className="text-xs text-[var(--text-tertiary)]">API endpoints, cookie-session mode, and storage diagnostics</p>
               </div>
             </div>
@@ -2288,7 +2262,7 @@ export function SettingsPage() {
                   <Key size={14} className="text-[var(--text-tertiary)]" />
                   <span className="text-xs font-medium uppercase tracking-wider text-[var(--text-muted)]">API Base</span>
                 </div>
-                <p className="mono text-xs text-[var(--text-primary)] break-all">{getApiBaseUrl()}</p>
+                <p className="v-mono text-xs text-[var(--text-primary)] break-all">{getApiBaseUrl()}</p>
               </div>
 
               <div className="p-4 rounded-[var(--radius-md)] border border-[var(--border-subtle)] bg-[var(--surface-muted)]">
@@ -2296,7 +2270,7 @@ export function SettingsPage() {
                   <Key size={14} className="text-[var(--text-tertiary)]" />
                   <span className="text-xs font-medium uppercase tracking-wider text-[var(--text-muted)]">Auth Base</span>
                 </div>
-                <p className="mono text-xs text-[var(--text-primary)] break-all">{getAuthBaseUrl()}</p>
+                <p className="v-mono text-xs text-[var(--text-primary)] break-all">{getAuthBaseUrl()}</p>
               </div>
 
               <div className="p-4 rounded-[var(--radius-md)] border border-[var(--border-subtle)] bg-[var(--surface-muted)]">
@@ -2350,7 +2324,7 @@ export function SettingsPage() {
                 <p className="text-xs font-medium uppercase tracking-wider text-[var(--text-muted)] mb-2">Cached Keys</p>
                 <ul className="space-y-1">
                   {storageSummary.canvasKeys.slice(0, 5).map((key) => (
-                    <li key={key} className="mono text-xs text-[var(--text-tertiary)] truncate">
+                    <li key={key} className="v-mono text-xs text-[var(--text-tertiary)] truncate">
                       {key}
                     </li>
                   ))}
@@ -2522,7 +2496,7 @@ export function DatabasesPage() {
             <button
               type="button"
               onClick={() => setCreateOpen(true)}
-              className="inline-flex h-9 items-center gap-1.5 rounded-[var(--radius-md)] bg-[var(--accent-primary)] px-4 text-[12.5px] font-semibold text-[var(--accent-on)]"
+              className="s-btn-accent h-9 text-[12.5px]"
             >
               <Database size={13} /> New database
             </button>
@@ -2540,7 +2514,7 @@ export function DatabasesPage() {
               <button
                 type="button"
                 onClick={() => setCreateOpen(true)}
-                className="mt-4 inline-flex items-center gap-1.5 rounded-[var(--radius-md)] bg-[var(--accent-primary)] px-4 py-2 text-[12.5px] font-semibold text-[var(--accent-on)]"
+                className="s-btn-accent mt-4 text-[12.5px]"
               >
                 <Database size={13} /> Create your first database
               </button>
@@ -2574,7 +2548,7 @@ export function DatabasesPage() {
                     <div className="min-w-0 flex-1">
                       <div className="flex items-center gap-2">
                         <span className="text-sm font-medium text-[var(--text-primary)]">{db.name}</span>
-                        <span className="text-xs px-1.5 py-0.5 rounded bg-[var(--surface-muted)] text-[var(--text-secondary)] mono">{db.type}{db.version ? ` ${db.version}` : ''}</span>
+                        <span className="text-xs px-1.5 py-0.5 rounded bg-[var(--surface-muted)] text-[var(--text-secondary)] v-mono">{db.type}{db.version ? ` ${db.version}` : ''}</span>
                         {db.provider === 'external' && (
                           <span className="text-xs px-1.5 py-0.5 rounded bg-[var(--accent-primary-soft)] text-[var(--accent-primary)]">external</span>
                         )}
@@ -2594,7 +2568,7 @@ export function DatabasesPage() {
                       <div>
                         <p className="mb-1.5 text-xs font-medium uppercase tracking-wider text-[var(--text-muted)]">Connection URL</p>
                         <div className="flex items-center gap-2">
-                          <code className="mono flex-1 truncate rounded-[var(--radius-md)] border border-[var(--border-subtle)] bg-[var(--surface-muted)] px-3 py-2 text-xs text-[var(--text-primary)]">
+                          <code className="v-mono flex-1 truncate rounded-[var(--radius-md)] border border-[var(--border-subtle)] bg-[var(--surface-muted)] px-3 py-2 text-xs text-[var(--text-primary)]">
                             {db.connection_url || '—'}
                           </code>
                           {db.connection_url && (
@@ -2617,7 +2591,7 @@ export function DatabasesPage() {
                             <button
                               onClick={() => testByIdMutation.mutate(db.id ?? '')}
                               disabled={testByIdMutation.isPending}
-                              className="flex items-center gap-1.5 px-3 py-1.5 rounded-[var(--radius-md)] border border-[var(--border-subtle)] text-xs font-medium text-[var(--text-secondary)] hover:border-[var(--border-default)] disabled:opacity-40 transition-colors"
+                              className="s-btn-quiet"
                             >
                               <RefreshCw size={11} /> Test connection
                             </button>
@@ -2634,21 +2608,21 @@ export function DatabasesPage() {
                         <button
                           onClick={() => actionMutation.mutate({ id: db.id ?? '', action: 'start' })}
                           disabled={running || actionMutation.isPending}
-                          className="flex items-center gap-1.5 px-3 py-1.5 rounded-[var(--radius-md)] border border-[var(--border-subtle)] text-xs font-medium text-[var(--text-secondary)] hover:border-[var(--border-default)] disabled:opacity-40 transition-colors"
+                          className="s-btn-quiet"
                         >
                           <Play size={11} /> Start
                         </button>
                         <button
                           onClick={() => actionMutation.mutate({ id: db.id ?? '', action: 'stop' })}
                           disabled={!running || actionMutation.isPending}
-                          className="flex items-center gap-1.5 px-3 py-1.5 rounded-[var(--radius-md)] border border-[var(--border-subtle)] text-xs font-medium text-[var(--text-secondary)] hover:border-[var(--border-default)] disabled:opacity-40 transition-colors"
+                          className="s-btn-quiet"
                         >
                           <Square size={11} /> Stop
                         </button>
                         <button
                           onClick={() => actionMutation.mutate({ id: db.id ?? '', action: 'restart' })}
                           disabled={!running || actionMutation.isPending}
-                          className="flex items-center gap-1.5 px-3 py-1.5 rounded-[var(--radius-md)] border border-[var(--border-subtle)] text-xs font-medium text-[var(--text-secondary)] hover:border-[var(--border-default)] disabled:opacity-40 transition-colors"
+                          className="s-btn-quiet"
                         >
                           <RefreshCw size={11} /> Restart
                         </button>
@@ -2665,7 +2639,7 @@ export function DatabasesPage() {
                           onClick={() => setBindDb(bindDb?.id === db.id ? null : db)}
                           disabled={!db.connection_url}
                           title={db.connection_url ? 'Inject connection URL into a service' : 'No connection URL available'}
-                          className="flex items-center gap-1.5 px-3 py-1.5 rounded-[var(--radius-md)] border border-[var(--border-subtle)] text-xs font-medium text-[var(--text-secondary)] hover:border-[var(--border-default)] disabled:opacity-40 transition-colors"
+                          className="s-btn-quiet"
                         >
                           <Link2 size={11} /> Bind
                         </button>
@@ -2697,7 +2671,7 @@ export function DatabasesPage() {
                           ] as const).map(([label, value]) => (
                             <div key={label} className="rounded-[var(--radius-md)] border border-[var(--border-subtle)] bg-[var(--surface-muted)] px-3 py-2">
                               <p className="text-xs text-[var(--text-muted)]">{label}</p>
-                              <p className="mono text-sm text-[var(--text-primary)]">{value}</p>
+                              <p className="v-mono text-sm text-[var(--text-primary)]">{value}</p>
                             </div>
                           ))}
                         </div>
@@ -2743,8 +2717,8 @@ export function DatabasesPage() {
                           <button
                             onClick={() => backupMutation.mutate(db.id ?? '')}
                             disabled={!running || backupMutation.isPending}
-                            className="flex items-center gap-1.5 px-3 py-1.5 rounded-[var(--radius-md)] text-xs font-medium text-[var(--accent-on)] disabled:opacity-40 transition-all"
-                            style={{ background: 'var(--accent-primary)' }}
+                            className="s-btn-accent disabled:opacity-40"
+                            
                           >
                             <Archive size={11} />
                             {backupMutation.isPending ? 'Starting…' : 'New backup'}
@@ -2764,7 +2738,7 @@ export function DatabasesPage() {
                             {backups.map((b) => (
                               <div key={b.id} className="flex items-center gap-3 rounded-[var(--radius-md)] border border-[var(--border-subtle)] bg-[var(--surface-muted)] px-3 py-2 text-xs">
                                 <span className="text-[var(--text-secondary)]">{formatRelative(b.created_at)}</span>
-                                <span className="mono text-[var(--text-muted)]">{b.size}</span>
+                                <span className="v-mono text-[var(--text-muted)]">{b.size}</span>
                                 <span className={`${b.status === 'completed' ? 'text-[var(--success)]' : b.status === 'in_progress' ? 'text-[var(--warning)]' : 'text-[var(--error)]'}`}>{b.status}</span>
                                 {b.remote && <span className="rounded bg-[var(--surface-card)] px-1.5 py-0.5 text-[var(--accent-primary)]" title="Also shipped to the configured backup target">offsite</span>}
                                 {b.status === 'completed' && (
@@ -2994,7 +2968,7 @@ export function DatabasesPage() {
                   (createMode === 'managed' ? createMutation.isPending : registerExternalMutation.isPending) ||
                   (createMode === 'managed' ? createForm.name.trim().length === 0 : externalForm.name.trim().length === 0 || externalForm.host.trim().length === 0)
                 }
-                className="inline-flex items-center gap-1.5 rounded-[var(--radius-md)] bg-[var(--accent-primary)] px-4 py-2 text-xs font-semibold text-[var(--accent-on)] disabled:opacity-50"
+                className="s-btn-accent disabled:opacity-50"
               >
                 {(createMode === 'managed' ? createMutation.isPending : registerExternalMutation.isPending) ? <Loader2 size={13} className="animate-spin" /> : null}
                 {createMode === 'managed' ? 'Create database' : 'Register database'}
@@ -3041,10 +3015,10 @@ function BindDatabasePanel({
   const services = servicesQuery.data ?? [];
 
   return (
-    <div className="rounded-[var(--radius-md)] border border-[var(--border-default)] bg-[var(--surface-card)] p-4 space-y-3">
+    <div className="s-card space-y-3">
       <div className="flex items-center justify-between">
-        <p className="text-xs font-medium text-[var(--text-primary)]">Bind to service</p>
-        <button onClick={onClose} className="text-xs text-[var(--text-muted)] hover:text-[var(--text-primary)]">Close</button>
+        <p className="s-t">Bind to service</p>
+        <button onClick={onClose} className="v-mono text-[11px] text-[var(--text-muted)] hover:text-[var(--text-primary)]">close</button>
       </div>
       <p className="text-xs text-[var(--text-muted)]">
         Injects this database's connection URL as an environment variable on the selected service.
@@ -3082,13 +3056,13 @@ function BindDatabasePanel({
           <input
             value={varKey}
             onChange={(e) => setVarKey(e.target.value)}
-            className="rounded-[var(--radius-md)] border border-[var(--border-subtle)] bg-[var(--surface-muted)] px-2 py-1.5 text-xs mono text-[var(--text-primary)] w-40"
+            className="rounded-[var(--radius-md)] border border-[var(--border-subtle)] bg-[var(--surface-muted)] px-2 py-1.5 text-xs v-mono text-[var(--text-primary)] w-40"
           />
         </label>
         <button
           onClick={() => bindMutation.mutate()}
           disabled={!serviceId || !varKey.trim() || bindMutation.isPending}
-          className="flex items-center gap-1.5 px-3 py-1.5 rounded-[var(--radius-md)] bg-[var(--accent-primary)] text-[var(--accent-on)] text-xs font-medium disabled:opacity-40"
+          className="s-btn-accent disabled:opacity-40"
         >
           {bindMutation.isPending ? <Loader2 size={11} className="animate-spin" /> : <Link2 size={11} />} Bind
         </button>
@@ -3129,7 +3103,7 @@ function BackupScheduleRow({
         value={value}
         onChange={(e) => setValue(e.target.value)}
         placeholder="cron schedule, e.g. 0 3 * * *"
-        className="w-44 rounded-[var(--radius-md)] border border-[var(--border-subtle)] bg-[var(--surface-muted)] px-2 py-1.5 text-xs mono text-[var(--text-primary)]"
+        className="w-44 rounded-[var(--radius-md)] border border-[var(--border-subtle)] bg-[var(--surface-muted)] px-2 py-1.5 text-xs v-mono text-[var(--text-primary)]"
       />
       <button
         onClick={() => mutation.mutate(value.trim())}
@@ -3297,17 +3271,17 @@ export function HighAvailabilityPage() {
         </div>
 
         {isAdmin ? (
-        <div className="panel p-6">
+        <div className="s-card p-5">
           <div className="flex items-center gap-3 mb-4">
             <Zap size={18} className="text-[var(--accent-primary)]" />
-            <h2 className="text-base font-semibold text-[var(--text-primary)]">Manager controls</h2>
+            <h2 className="s-t">Manager controls</h2>
           </div>
           <div className="flex flex-wrap items-end gap-3">
             <button
               type="button"
               disabled={toggleMutation.isPending || statusQuery.isLoading}
               onClick={() => toggleMutation.mutate(!status?.enabled)}
-              className="px-4 py-2 rounded-[var(--radius-md)] bg-[var(--accent-primary)] text-[var(--accent-on)] text-sm font-medium disabled:opacity-50"
+              className="s-btn-accent disabled:opacity-50"
             >
               {status?.enabled ? 'Disable HA manager' : 'Enable HA manager'}
             </button>
@@ -3338,10 +3312,10 @@ export function HighAvailabilityPage() {
         </div>
         ) : null}
 
-        <div className="panel p-6">
+        <div className="s-card p-5">
           <div className="flex items-center gap-3 mb-4">
             <AlertCircle size={18} className="text-[var(--accent-primary)]" />
-            <h2 className="text-base font-semibold text-[var(--text-primary)]">Active alerts</h2>
+            <h2 className="s-t">Active alerts</h2>
           </div>
           {!isDemoMode && alertsQuery.isLoading ? (
             <p className="text-sm text-[var(--text-secondary)]">Loading…</p>
@@ -3365,7 +3339,7 @@ export function HighAvailabilityPage() {
                     type="button"
                     disabled={resolveMutation.isPending}
                     onClick={() => alert.id && resolveMutation.mutate(alert.id)}
-                    className="ml-4 shrink-0 px-3 py-1.5 rounded-[var(--radius-md)] border border-[var(--border-subtle)] text-xs text-[var(--text-primary)] disabled:opacity-50"
+                    className="s-btn-quiet"
                   >
                     Resolve
                   </button>
@@ -3376,17 +3350,17 @@ export function HighAvailabilityPage() {
           )}
         </div>
 
-        <div className="panel p-6">
+        <div className="s-card p-5">
           <div className="flex items-center justify-between mb-4">
             <div className="flex items-center gap-3">
               <ShieldCheck size={18} className="text-[var(--accent-primary)]" />
-              <h2 className="text-base font-semibold text-[var(--text-primary)]">Failover policies</h2>
+              <h2 className="s-t">Failover policies</h2>
             </div>
             {policyForm === null && isAdmin && (
               <button
                 type="button"
                 onClick={() => setPolicyForm({ serviceId: '', strategy: 'active_passive', minHealthyNodes: '1', maxFailures: '3', enabled: true, editing: false })}
-                className="px-3 py-1.5 rounded-[var(--radius-md)] bg-[var(--accent-primary)] text-[var(--accent-on)] text-xs font-medium"
+                className="s-btn-accent "
               >
                 New policy
               </button>
@@ -3480,14 +3454,14 @@ export function HighAvailabilityPage() {
                   type="button"
                   disabled={savePolicyMutation.isPending || !policyForm.serviceId}
                   onClick={() => savePolicyMutation.mutate()}
-                  className="px-4 py-2 rounded-[var(--radius-md)] bg-[var(--accent-primary)] text-[var(--accent-on)] text-sm font-medium disabled:opacity-50"
+                  className="s-btn-accent disabled:opacity-50"
                 >
                   {savePolicyMutation.isPending ? 'Saving…' : 'Save policy'}
                 </button>
                 <button
                   type="button"
                   onClick={() => setPolicyForm(null)}
-                  className="px-4 py-2 rounded-[var(--radius-md)] border border-[var(--border-subtle)] text-sm text-[var(--text-primary)]"
+                  className="s-btn-quiet"
                 >
                   Cancel
                 </button>
@@ -3526,7 +3500,7 @@ export function HighAvailabilityPage() {
                         enabled: policy.enabled ?? true,
                         editing: true,
                       })}
-                      className="px-3 py-1.5 rounded-[var(--radius-md)] border border-[var(--border-subtle)] text-xs text-[var(--text-primary)]"
+                      className="s-btn-quiet"
                     >
                       Edit
                     </button>
@@ -3553,10 +3527,10 @@ export function HighAvailabilityPage() {
           )}
         </div>
 
-        <div className="panel p-6">
+        <div className="s-card p-5">
           <div className="flex items-center gap-3 mb-4">
             <HeartPulse size={18} className="text-[var(--accent-primary)]" />
-            <h2 className="text-base font-semibold text-[var(--text-primary)]">Health check results</h2>
+            <h2 className="s-t">Health check results</h2>
           </div>
           {!isDemoMode && healthQuery.isLoading ? (
             <p className="text-sm text-[var(--text-secondary)]">Loading…</p>
@@ -3741,7 +3715,7 @@ export function SecurityPage() {
                 type="button"
                 disabled={scanMutation.isPending}
                 onClick={() => scanMutation.mutate()}
-                className="px-4 py-2 rounded-[var(--radius-md)] bg-[var(--accent-primary)] text-[var(--accent-on)] text-sm font-medium disabled:opacity-50"
+                className="s-btn-accent disabled:opacity-50"
               >
                 {scanMutation.isPending ? 'Starting…' : 'Run scan'}
               </button>
@@ -3784,10 +3758,10 @@ export function SecurityPage() {
         )}
 
         {effectiveProjectId && (
-          <div className="panel p-6">
+          <div className="s-card p-5">
             <div className="flex items-center gap-3 mb-4">
               <Shield size={18} className="text-[var(--accent-primary)]" />
-              <h2 className="text-base font-semibold text-[var(--text-primary)]">Findings</h2>
+              <h2 className="s-t">Findings</h2>
             </div>
             {!isDemoMode && vulnsQuery.isLoading ? (
               <p className="text-sm text-[var(--text-secondary)]">Loading…</p>
@@ -3826,7 +3800,7 @@ export function SecurityPage() {
                           type="button"
                           disabled={vulnMutation.isPending}
                           onClick={() => vulnMutation.mutate({ id: v.id!, status: 'ignored' })}
-                          className="px-3 py-1.5 rounded-[var(--radius-md)] border border-[var(--border-subtle)] text-xs text-[var(--text-secondary)] disabled:opacity-50"
+                          className="s-btn-quiet"
                         >
                           Ignore
                         </button>
@@ -3840,10 +3814,10 @@ export function SecurityPage() {
         )}
 
         {effectiveProjectId && (
-          <div className="panel p-6">
+          <div className="s-card p-5">
             <div className="flex items-center gap-3 mb-4">
               <Clock size={18} className="text-[var(--accent-primary)]" />
-              <h2 className="text-base font-semibold text-[var(--text-primary)]">Scan history</h2>
+              <h2 className="s-t">Scan history</h2>
             </div>
             {!isDemoMode && historyQuery.isLoading ? (
               <p className="text-sm text-[var(--text-secondary)]">Loading…</p>
diff --git a/app/frontend/src/features/secondary/pages/ComponentShowcase.tsx b/app/frontend/src/features/secondary/pages/ComponentShowcase.tsx
index 9697b7d..5d85e55 100644
--- a/app/frontend/src/features/secondary/pages/ComponentShowcase.tsx
+++ b/app/frontend/src/features/secondary/pages/ComponentShowcase.tsx
@@ -34,8 +34,7 @@ export function ComponentShowcase() {
   };
 
   return (
-    <div className="min-h-screen p-8" style={{ background: '#16171c' }}>
-      <div className="ambient-glow" />
+    <div className="min-h-screen p-8" style={{ background: 'var(--bg-void)' }}>
       
       <div className="w-full relative z-10">
         {/* Header */}
@@ -91,25 +90,25 @@ export function ComponentShowcase() {
                 Line Charts
               </h2>
               <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
-                <div className="panel p-6">
-                  <h3 className="text-sm font-medium text-[var(--text-secondary)] mb-4">
+                <div className="s-card p-6">
+                  <h3 className="s-t mb-4">
                     Basic Line Chart (CPU Style)
                   </h3>
                   <LineChart 
                     data={sampleLineData} 
-                    color="#b4e34a" 
+                    color="#38bdf8" 
                     height={120}
                     showDots={true}
                     smooth={true}
                   />
                 </div>
-                <div className="panel p-6">
-                  <h3 className="text-sm font-medium text-[var(--text-secondary)] mb-4">
+                <div className="s-card p-6">
+                  <h3 className="s-t mb-4">
                     Line Chart (No Dots)
                   </h3>
                   <LineChart 
                     data={sampleLineData} 
-                    color="#7ab8ff" 
+                    color="var(--accent-primary)" 
                     height={120}
                     showDots={false}
                     smooth={true}
@@ -123,8 +122,8 @@ export function ComponentShowcase() {
                 Area Charts
               </h2>
               <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
-                <div className="panel p-6">
-                  <h3 className="text-sm font-medium text-[var(--text-secondary)] mb-4">
+                <div className="s-card p-6">
+                  <h3 className="s-t mb-4">
                     Area Chart (Active Users Style)
                   </h3>
                   <LineAreaChart 
@@ -134,8 +133,8 @@ export function ComponentShowcase() {
                     height={150}
                   />
                 </div>
-                <div className="panel p-6">
-                  <h3 className="text-sm font-medium text-[var(--text-secondary)] mb-4">
+                <div className="s-card p-6">
+                  <h3 className="s-t mb-4">
                     Area Chart (Success Color)
                   </h3>
                   <LineAreaChart 
@@ -153,20 +152,20 @@ export function ComponentShowcase() {
                 Multi-Line & Bar Charts
               </h2>
               <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
-                <div className="panel p-6">
-                  <h3 className="text-sm font-medium text-[var(--text-secondary)] mb-4">
+                <div className="s-card p-6">
+                  <h3 className="s-t mb-4">
                     Multi-Line Chart (Performance Style)
                   </h3>
                   <MultiLineChart 
                     datasets={[
-                      { data: sampleLineData.map(v => v + 10), color: '#7ab8ff', fillOpacity: 0.15 },
-                      { data: sampleLineData, color: '#f2c94c', fillOpacity: 0.15 }
+                      { data: sampleLineData.map(v => v + 10), color: 'var(--accent-primary)', fillOpacity: 0.15 },
+                      { data: sampleLineData, color: 'var(--warning)', fillOpacity: 0.15 }
                     ]}
                     height={120}
                   />
                 </div>
-                <div className="panel p-6">
-                  <h3 className="text-sm font-medium text-[var(--text-secondary)] mb-4">
+                <div className="s-card p-6">
+                  <h3 className="s-t mb-4">
                     Bar Chart (Timeline Style)
                   </h3>
                   <BarChart 
@@ -184,23 +183,23 @@ export function ComponentShowcase() {
                 Donut Charts
               </h2>
               <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
-                <div className="panel p-6 flex flex-col items-center">
-                  <h3 className="text-sm font-medium text-[var(--text-secondary)] mb-4">
+                <div className="s-card p-6 flex flex-col items-center">
+                  <h3 className="s-t mb-4">
                     RAM Usage (65%)
                   </h3>
-                  <DonutChart percentage={65} color="#f2c94c" size={160} />
+                  <DonutChart percentage={65} color="var(--warning)" size={160} />
                 </div>
-                <div className="panel p-6 flex flex-col items-center">
-                  <h3 className="text-sm font-medium text-[var(--text-secondary)] mb-4">
+                <div className="s-card p-6 flex flex-col items-center">
+                  <h3 className="s-t mb-4">
                     Disk Usage (82%)
                   </h3>
-                  <DonutChart percentage={82} color="#b4e34a" size={160} />
+                  <DonutChart percentage={82} color="#38bdf8" size={160} />
                 </div>
-                <div className="panel p-6 flex flex-col items-center">
-                  <h3 className="text-sm font-medium text-[var(--text-secondary)] mb-4">
+                <div className="s-card p-6 flex flex-col items-center">
+                  <h3 className="s-t mb-4">
                     Network (45%)
                   </h3>
-                  <DonutChart percentage={45} color="#7ab8ff" size={160} />
+                  <DonutChart percentage={45} color="var(--accent-primary)" size={160} />
                 </div>
               </div>
             </section>
@@ -222,7 +221,7 @@ export function ComponentShowcase() {
                   status="good"
                   statusText="Good"
                   icon={<Cpu size={16} />}
-                  chart={<LineChart data={sampleLineData} color="#b4e34a" height={76} />}
+                  chart={<LineChart data={sampleLineData} color="#38bdf8" height={76} />}
                   onClick={() => handleCardClick('CPU Usage')}
                   animationDelay={0.04}
                 />
@@ -233,7 +232,7 @@ export function ComponentShowcase() {
                   status="average"
                   statusText="Average"
                   icon={<MemoryStick size={16} />}
-                  chart={<LineChart data={sampleLineData.map(v => v + 20)} color="#f2c94c" height={76} />}
+                  chart={<LineChart data={sampleLineData.map(v => v + 20)} color="var(--warning)" height={76} />}
                   onClick={() => handleCardClick('Memory')}
                   animationDelay={0.09}
                 />
@@ -276,7 +275,7 @@ export function ComponentShowcase() {
                   value="12.5K"
                   subtitle="Queries per minute"
                   icon={<Database size={16} />}
-                  chart={<LineAreaChart data={sampleAreaData.map(v => v + 10)} color="#7ab8ff" height={130} />}
+                  chart={<LineAreaChart data={sampleAreaData.map(v => v + 10)} color="var(--accent-primary)" height={130} />}
                   details={
                     <div className="flex items-center gap-3 text-xs">
                       <div className="flex items-center gap-1.5">
@@ -313,8 +312,8 @@ export function ComponentShowcase() {
                   upSpeed={10.4}
                   downSpeed={5.2}
                   datasets={[
-                    { data: sampleLineData.map(v => v + 20), color: '#7ab8ff', fillOpacity: 0.15 },
-                    { data: sampleLineData.map(v => v + 10), color: '#f2c94c', fillOpacity: 0.15 }
+                    { data: sampleLineData.map(v => v + 20), color: 'var(--accent-primary)', fillOpacity: 0.15 },
+                    { data: sampleLineData.map(v => v + 10), color: 'var(--warning)', fillOpacity: 0.15 }
                   ]}
                   onClick={() => handleCardClick('Performance')}
                   animationDelay={0.09}
@@ -331,7 +330,7 @@ export function ComponentShowcase() {
               <h2 className="text-xl font-semibold text-[var(--text-primary)] mb-4">
                 Badges & Indicators
               </h2>
-              <div className="panel p-6 space-y-4">
+              <div className="s-card p-6 space-y-4">
                 <div className="flex items-center gap-4 flex-wrap">
                   <span className="badge-active">
                     <span className="live-dot" />
@@ -358,7 +357,7 @@ export function ComponentShowcase() {
               <h2 className="text-xl font-semibold text-[var(--text-primary)] mb-4">
                 Buttons
               </h2>
-              <div className="panel p-6 space-y-4">
+              <div className="s-card p-6 space-y-4">
                 <div className="flex items-center gap-4 flex-wrap">
                   <button className="btn-stop">
                     <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round">
@@ -387,7 +386,7 @@ export function ComponentShowcase() {
               <h2 className="text-xl font-semibold text-[var(--text-primary)] mb-4">
                 Pills & Tabs
               </h2>
-              <div className="panel p-6 space-y-6">
+              <div className="s-card p-6 space-y-6">
                 <div>
                   <p className="text-sm text-[var(--text-secondary)] mb-3">Pill Group</p>
                   <div className="pill-group">
@@ -420,9 +419,9 @@ export function ComponentShowcase() {
               <h2 className="text-xl font-semibold text-[var(--text-primary)] mb-4">
                 Search & Input
               </h2>
-              <div className="panel p-6 space-y-4">
+              <div className="s-card p-6 space-y-4">
                 <div className="search-box">
-                  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#6b6e7d" strokeWidth="2" strokeLinecap="round">
+                  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="var(--text-tertiary)" strokeWidth="2" strokeLinecap="round">
                     <circle cx="11" cy="11" r="8"/>
                     <line x1="21" y1="21" x2="16.65" y2="16.65"/>
                   </svg>
@@ -435,7 +434,7 @@ export function ComponentShowcase() {
               <h2 className="text-xl font-semibold text-[var(--text-primary)] mb-4">
                 Toast Notifications
               </h2>
-              <div className="panel p-6">
+              <div className="s-card p-6">
                 <div className="flex gap-3 flex-wrap">
                   <button
                     onClick={() => showToast('Operation completed successfully!', 'success')}
diff --git a/app/frontend/src/features/service/pages/ServiceDetailPage.tsx b/app/frontend/src/features/service/pages/ServiceDetailPage.tsx
index 7ef1c13..fe22fdc 100644
--- a/app/frontend/src/features/service/pages/ServiceDetailPage.tsx
+++ b/app/frontend/src/features/service/pages/ServiceDetailPage.tsx
@@ -70,7 +70,6 @@ import {
   Trash2,
   ClipboardPaste,
   Save,
-  Check,
   X,
   Loader2,
   Clock,
@@ -82,13 +81,21 @@ import {
   Sparkles,
   RefreshCw,
   Box,
-  Ban,
   Play,
   ChevronDown,
+  ChevronLeft,
+  ChevronRight,
   GitPullRequest,
   ExternalLink,
+  Rocket,
   Terminal,
 } from 'lucide-react';
+import {
+  GhostBtn,
+  QuietBtn,
+  SPill,
+} from '@/shared/components/sentry';
+import { statusTone } from '@/shared/components/sentry-utils';
 
 type ServiceSection = 'metrics' | 'logs' | 'config' | 'variables' | 'cron' | 'previews' | 'scaling' | 'console' | 'settings';
 
@@ -115,28 +122,18 @@ function metricStatus(percent: number): 'good' | 'average' | 'warning' {
 const statusLabel = { good: 'Good', average: 'Average', warning: 'High' } as const;
 
 function StatusBadge({ status }: { status: string }) {
-  const config = {
-    running: { color: 'var(--success)', bg: 'var(--success-soft)', Icon: Check, animate: false },
-    deployed: { color: 'var(--success)', bg: 'var(--success-soft)', Icon: Check, animate: false },
-    failed: { color: 'var(--error)', bg: 'var(--error-soft)', Icon: X, animate: false },
-    building: { color: 'var(--warning)', bg: 'var(--warning-soft)', Icon: Loader2, animate: true },
-    pending: { color: 'var(--warning)', bg: 'var(--warning-soft)', Icon: Loader2, animate: true },
-    queued: { color: 'var(--warning)', bg: 'var(--warning-soft)', Icon: Clock, animate: false },
-    rolling_back: { color: 'var(--warning)', bg: 'var(--warning-soft)', Icon: RefreshCw, animate: true },
-    cancelled: { color: 'var(--text-tertiary)', bg: 'var(--surface-muted)', Icon: Ban, animate: false },
-    stopped: { color: 'var(--text-tertiary)', bg: 'var(--surface-muted)', Icon: Box, animate: false },
-  }[status] || { color: 'var(--text-tertiary)', bg: 'var(--surface-muted)', Icon: Box, animate: false };
-
-  const { Icon } = config;
-
+  const Icon = {
+    building: Loader2,
+    pending: Loader2,
+    rolling_back: RefreshCw,
+  }[status];
   return (
-    <div 
-      className="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-full text-xs font-medium"
-      style={{ background: config.bg, color: config.color }}
-    >
-      <Icon size={12} className={config.animate ? 'animate-spin' : ''} />
-      {status.replace('_', ' ')}
-    </div>
+    <SPill tone={statusTone(status)}>
+      <span className="inline-flex items-center gap-1.5">
+        {Icon && <Icon size={11} className="animate-spin" />}
+        {status.replace('_', ' ')}
+      </span>
+    </SPill>
   );
 }
 
@@ -627,15 +624,15 @@ export function ServiceDetailPage() {
   if (!isDemoMode && serviceQuery.isError) {
     return (
       <div className="min-h-screen flex items-center justify-center p-8">
-        <div className="panel p-8 text-center max-w-md">
+        <div className="s-card p-8 text-center max-w-md">
           <div className="w-12 h-12 mx-auto mb-4 rounded-full bg-[var(--error-soft)] flex items-center justify-center">
             <X size={24} className="text-[var(--error)]" />
           </div>
-          <p className="text-lg font-medium text-[var(--text-primary)]">Failed to load service</p>
+          <p className="font-headline text-lg font-medium text-[var(--text-primary)]">Failed to load service</p>
           <p className="mt-2 text-sm text-[var(--text-secondary)]">{(serviceQuery.error as Error).message}</p>
           <button
             onClick={() => serviceQuery.refetch()}
-            className="mt-6 px-4 py-2 rounded-[var(--radius-md)] border border-[var(--border-subtle)] text-sm font-medium hover:border-[var(--border-default)] transition-colors"
+            className="s-btn-quiet"
           >
             Retry
           </button>
@@ -647,132 +644,102 @@ export function ServiceDetailPage() {
   if (!service || !project) {
     return (
       <div className="min-h-screen flex items-center justify-center p-8">
-        <div className="panel p-8 text-center max-w-md">
+        <div className="s-card p-8 text-center max-w-md">
           <div className="w-12 h-12 mx-auto mb-4 rounded-full bg-[var(--surface-muted)] flex items-center justify-center">
             <Box size={24} className="text-[var(--text-tertiary)]" />
           </div>
-          <p className="text-lg font-medium text-[var(--text-primary)]">Service not found</p>
+          <p className="font-headline text-lg font-medium text-[var(--text-primary)]">Service not found</p>
           <p className="mt-2 text-sm text-[var(--text-secondary)]">This service may have been deleted.</p>
         </div>
       </div>
     );
   }
 
+  const canOperate = service.status === 'running' || service.status === 'degraded';
+
   return (
     <div className="min-h-screen relative">
-      {/* Breadcrumb - self.html exact match */}
-      <div 
-        className="flex items-center"
-        style={{ 
-          gap: '6px', 
-          padding: '14px 24px 10px',
-          color: 'var(--text-tertiary)',
-          fontSize: '13px'
-        }}
-      >
-        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="var(--text-tertiary)" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-          <polyline points="15 18 9 12 15 6"/>
-        </svg>
-        <button 
+      {/* Breadcrumb */}
+      <div className="flex items-center gap-1.5 px-6 pt-4 pb-1.5 text-[12.5px] text-[var(--text-tertiary)]">
+        <ChevronLeft size={14} />
+        <button
           onClick={() => navigate(isDemoMode ? `/projects/${project.id}?demo=1` : `/projects/${project.id}`)}
-          style={{ color: 'var(--text-tertiary)', textDecoration: 'none' }}
           className="hover:text-[var(--text-secondary)] transition-colors"
         >
           Servers
         </button>
-        <span style={{ opacity: 0.4 }}>/</span>
-        <span style={{ color: 'var(--text-secondary)' }}>{service.name}</span>
+        <span className="opacity-40">/</span>
+        <span className="text-[var(--text-secondary)]">{service.name}</span>
       </div>
 
-      {/* Project Header - self.html exact match */}
-      <div className="flex items-center" style={{ padding: '0 24px 18px' }}>
+      {/* Service header */}
+      <div className="flex items-center px-6 pb-4.5 flex-wrap gap-y-3">
         <div
-          className="rounded-[13px] flex items-center justify-center flex-shrink-0"
-          style={{
-            width: '46px',
-            height: '46px',
-            background: `${serviceAccent(service)}1f`,
-            color: serviceAccent(service),
-            marginRight: '14px'
-          }}
+          className="flex h-[46px] w-[46px] flex-none items-center justify-center rounded-xl border border-[var(--border-default)] bg-[var(--bg-overlay)]"
+          style={{ color: serviceAccent(service) }}
         >
           <ServiceIcon service={service} size={22} />
         </div>
-        <div>
-          <div className="flex items-center" style={{ gap: '10px' }}>
-            <span style={{ fontSize: '20px', fontWeight: 800, letterSpacing: '-0.5px', color: 'var(--text-primary)' }}>{service.name}</span>
-            <span
-              className={`badge-${service.status === 'running' ? 'active' : service.status === 'degraded' ? 'degraded' : 'stopped'}`}
-            >
-              {service.status === 'running' && <span className="live-dot" />}
-              {service.status === 'running' ? 'Active' : service.status === 'degraded' ? 'Degraded' : service.status === 'sleeping' ? 'Sleeping' : 'Stopped'}
+        <div className="ml-3.5">
+          <div className="flex items-center gap-2.5">
+            <span className="font-headline text-[21px] font-bold tracking-[-0.02em] text-[var(--text-primary)]">
+              {service.name}
             </span>
+            <SPill tone={statusTone(service.status === 'running' ? 'active' : service.status)}>
+              {service.status === 'running' ? 'Active' : service.status === 'degraded' ? 'Degraded' : service.status === 'sleeping' ? 'Sleeping' : 'Stopped'}
+            </SPill>
           </div>
-          <div className="flex items-center" style={{ gap: '16px', marginTop: '4px' }}>
+          <div className="mt-1 flex items-center gap-4">
             {(service.publicUrl || service.domain) && (
               <a
                 href={service.publicUrl ?? `https://${service.domain}`}
                 target="_blank"
                 rel="noopener noreferrer"
-                className="flex items-center hover:text-[var(--text-secondary)] transition-colors"
-                style={{ color: 'var(--text-tertiary)', fontSize: '12.5px', textDecoration: 'none', gap: '4px' }}
+                className="v-mono flex items-center gap-1 text-[11.5px] text-[var(--text-tertiary)] no-underline transition-colors hover:text-[var(--text-secondary)]"
               >
                 {service.publicUrl ?? `https://${service.domain}`}
-                <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
-                  <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/>
-                  <polyline points="15 3 21 3 21 9"/>
-                  <line x1="10" y1="14" x2="21" y2="3"/>
-                </svg>
+                <ExternalLink size={10.5} />
               </a>
             )}
-            <button 
+            <button
               onClick={() => navigate(isDemoMode ? `/projects/${project.id}?demo=1` : `/projects/${project.id}`)}
-              className="flex items-center hover:text-[var(--text-secondary)] transition-colors"
-              style={{ color: 'var(--text-tertiary)', fontSize: '12.5px', textDecoration: 'none', gap: '4px' }}
+              className="flex items-center gap-1 text-[12px] text-[var(--text-tertiary)] transition-colors hover:text-[var(--text-secondary)]"
             >
               Project Information
-              <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
-                <polyline points="9 18 15 12 9 6"/>
-              </svg>
+              <ChevronRight size={11} />
             </button>
           </div>
         </div>
-        <div className="ml-auto flex" style={{ gap: '10px' }}>
+        <div className="ml-auto flex items-center gap-2.5">
           {!isDemoMode && signedIn && (
             <>
-              <button
+              <QuietBtn
                 onClick={() => stopMutation.mutate()}
-                disabled={stopMutation.isPending || (service.status !== 'running' && service.status !== 'degraded')}
-                className={`btn-stop ${service.status !== 'running' && service.status !== 'degraded' ? 'disabled' : ''}`}
+                disabled={stopMutation.isPending || !canOperate}
               >
-                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round">
-                  <circle cx="12" cy="12" r="10"/>
-                  <circle cx="12" cy="12" r="3" fill="currentColor" stroke="none"/>
+                <svg viewBox="0 0 24 24" width="13" height="13" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round">
+                  <circle cx="12" cy="12" r="10" />
+                  <circle cx="12" cy="12" r="3" fill="currentColor" stroke="none" />
                 </svg>
-                {stopMutation.isPending ? 'STOPPING…' : 'STOP'}
-              </button>
-              <button
+                {stopMutation.isPending ? 'Stopping…' : 'Stop'}
+              </QuietBtn>
+              <QuietBtn
                 onClick={() => restartMutation.mutate()}
-                disabled={restartMutation.isPending || (service.status !== 'running' && service.status !== 'degraded')}
-                className={`btn-restart ${service.status !== 'running' && service.status !== 'degraded' ? 'disabled' : ''}`}
+                disabled={restartMutation.isPending || !canOperate}
               >
-                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round">
-                  <polyline points="1 4 1 10 7 10"/>
-                  <path d="M3.51 15a9 9 0 1 0 .49-4.5"/>
+                <svg viewBox="0 0 24 24" width="13" height="13" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round">
+                  <polyline points="1 4 1 10 7 10" />
+                  <path d="M3.51 15a9 9 0 1 0 .49-4.5" />
                 </svg>
-                {restartMutation.isPending ? 'RESTARTING…' : 'RESTART'}
-              </button>
-              <button
+                {restartMutation.isPending ? 'Restarting…' : 'Restart'}
+              </QuietBtn>
+              <GhostBtn
                 onClick={() => deployMutation.mutate('manual')}
                 disabled={deployMutation.isPending}
-                className={`btn-restart ${deployMutation.isPending ? 'disabled' : ''}`}
               >
-                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round">
-                  <path d="M4.5 16.5c-1.5 1.26-2 5-2 5s3.74-.5 5-2c.71-.84.7-2.13-.09-2.91a2.18 2.18 0 0 0-2.91-.09z"/>
-                  <path d="m12 15-3-3a22 22 0 0 1 2-3.95A12.88 12.88 0 0 1 22 2c0 2.72-.78 7.5-6 11a22.35 22.35 0 0 1-4 2z"/>
-                </svg>
-                {deployMutation.isPending ? 'DEPLOYING…' : 'DEPLOY'}
-              </button>
+                <Rocket size={13} />
+                {deployMutation.isPending ? 'Deploying…' : 'Deploy'}
+              </GhostBtn>
             </>
           )}
         </div>
@@ -781,11 +748,9 @@ export function ServiceDetailPage() {
       {/* Demo Mode Banner */}
       {isDemoMode && (
         <div className="w-full px-8 py-4">
-          <div className="px-4 py-3 rounded-[var(--radius-md)] border border-[var(--warning-soft)] bg-[var(--warning-soft)]/50">
-            <div className="flex items-center gap-2 text-sm text-[var(--warning)]">
-              <Sparkles size={16} />
-              <span>Demo mode active — using sample data for preview</span>
-            </div>
+          <div className="s-inset flex items-center gap-2 text-xs text-[var(--warning)]">
+            <Sparkles size={13} />
+            Demo mode active — using sample data for preview
           </div>
         </div>
       )}
@@ -931,7 +896,7 @@ export function ServiceDetailPage() {
           <div className="space-y-6">
             {/* Metrics Grid with enhanced cards */}
             {!isDemoMode && !hasLiveTelemetry && (
-              <div className="panel p-8 text-center">
+              <div className="s-card p-8 text-center">
                 <div className="w-12 h-12 mx-auto mb-4 rounded-full bg-[var(--surface-muted)] flex items-center justify-center">
                   <Activity size={22} className="text-[var(--text-tertiary)]" />
                 </div>
@@ -945,20 +910,14 @@ export function ServiceDetailPage() {
             )}
             {(isDemoMode || hasLiveTelemetry) && (
             <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
-              <div className="panel p-5 group hover:border-[var(--accent-primary)]/30 transition-all duration-300">
-                <div className="flex items-center justify-between mb-4">
-                  <div className="flex items-center gap-3">
-                    <div className="card-icon">
-                      <Cpu size={18} />
-                    </div>
-                    <div>
-                      <p className="text-sm font-medium text-[var(--text-primary)]">CPU Timeline</p>
-                      <p className="text-xs text-[var(--text-tertiary)]">
-                        {isDemoMode ? 'Last 24 intervals' : 'Live samples · every 5s'}
-                      </p>
-                    </div>
-                  </div>
-                </div>
+              <div className="s-card p-5 group hover:border-[var(--accent-primary)]/30 transition-all duration-300">
+                <div className="s-cardhead !mb-4">
+  <span className="s-ibox"><Cpu /></span>
+  <div>
+    <span className="s-t">CPU Timeline</span>
+    <p className="v-mono text-[10.5px] text-[var(--text-tertiary)] mt-0.5">{isDemoMode ? 'Last 24 intervals' : 'Live samples · every 5s'}</p>
+  </div>
+</div>
                 <div className="flex h-32 items-end gap-1">
                   {isDemoMode
                     ? Array.from({ length: 24 }).map((_, i) => {
@@ -986,20 +945,14 @@ export function ServiceDetailPage() {
                 </div>
               </div>
 
-              <div className="panel p-5 group hover:border-[var(--success)]/30 transition-all duration-300">
-                <div className="flex items-center justify-between mb-4">
-                  <div className="flex items-center gap-3">
-                    <div className="card-icon">
-                      <MemoryStick size={18} />
-                    </div>
-                    <div>
-                      <p className="text-sm font-medium text-[var(--text-primary)]">Memory Timeline</p>
-                      <p className="text-xs text-[var(--text-tertiary)]">
-                        {isDemoMode ? 'Last 24 intervals' : 'Live samples · every 5s'}
-                      </p>
-                    </div>
-                  </div>
-                </div>
+              <div className="s-card p-5 group hover:border-[var(--success)]/30 transition-all duration-300">
+                <div className="s-cardhead !mb-4">
+  <span className="s-ibox"><MemoryStick /></span>
+  <div>
+    <span className="s-t">Memory Timeline</span>
+    <p className="v-mono text-[10.5px] text-[var(--text-tertiary)] mt-0.5">{isDemoMode ? 'Last 24 intervals' : 'Live samples · every 5s'}</p>
+  </div>
+</div>
                 <div className="flex h-32 items-end gap-1">
                   {isDemoMode
                     ? Array.from({ length: 24 }).map((_, i) => {
@@ -1031,16 +984,14 @@ export function ServiceDetailPage() {
 
             {/* Instance list — real container states */}
             {!isDemoMode && hasLiveTelemetry && (
-              <div className="panel p-5">
-                <div className="flex items-center gap-3 mb-4">
-                  <div className="card-icon">
-                    <Layers size={18} />
-                  </div>
-                  <div>
-                    <p className="text-sm font-medium text-[var(--text-primary)]">Instances</p>
-                    <p className="text-xs text-[var(--text-tertiary)]">Containers backing this service</p>
-                  </div>
-                </div>
+              <div className="s-card p-5">
+                <div className="s-cardhead !mb-4">
+  <span className="s-ibox"><Layers /></span>
+  <div>
+    <span className="s-t">Instances</span>
+    <p className="v-mono text-[10.5px] text-[var(--text-tertiary)] mt-0.5">Containers backing this service</p>
+  </div>
+</div>
                 <div className="space-y-2">
                   {liveMetrics!.instances.map((instance) => (
                     <div
@@ -1049,11 +1000,11 @@ export function ServiceDetailPage() {
                     >
                       <div className="flex items-center gap-3 min-w-0">
                         <div className={`w-2 h-2 rounded-full flex-shrink-0 ${instance.state === 'running' ? 'bg-[var(--success)]' : 'bg-[var(--text-muted)]'}`} />
-                        <span className="mono text-xs text-[var(--text-primary)] truncate">{instance.name}</span>
+                        <span className="v-mono text-xs text-[var(--text-primary)] truncate">{instance.name}</span>
                       </div>
                       <div className="flex items-center gap-4 text-xs text-[var(--text-tertiary)] flex-shrink-0">
-                        <span className="mono">{instance.cpu_percent.toFixed(1)}% CPU</span>
-                        <span className="mono">{formatBytes(instance.memory_usage_bytes)}</span>
+                        <span className="v-mono">{instance.cpu_percent.toFixed(1)}% CPU</span>
+                        <span className="v-mono">{formatBytes(instance.memory_usage_bytes)}</span>
                         <span>{instance.started_at ? `up ${formatRelative(instance.started_at).replace(' ago', '')}` : instance.state}</span>
                       </div>
                     </div>
@@ -1064,20 +1015,18 @@ export function ServiceDetailPage() {
 
             {/* Domain & Networking Panel */}
             {service.status === 'running' && (
-              <div className="panel p-5">
-                <div className="flex items-center gap-3 mb-4">
-                  <div className="w-10 h-10 rounded-[var(--radius-md)] bg-[var(--accent-primary-soft)] flex items-center justify-center">
-                    <Zap size={18} className="text-[var(--accent-primary)]" />
-                  </div>
+              <div className="s-card p-5">
+                <div className="s-cardhead !mb-4">
+                  <span className="s-ibox"><Zap /></span>
                   <div>
-                    <p className="text-sm font-medium text-[var(--text-primary)]">Networking</p>
-                    <p className="text-xs text-[var(--text-tertiary)]">Public endpoints and ports</p>
+                    <span className="s-t">Networking</span>
+                    <p className="v-mono text-[10.5px] text-[var(--text-tertiary)] mt-0.5">Public endpoints and ports</p>
                   </div>
                   {runtimeQuery.data?.health === 'healthy' && (
-                    <span className="ml-auto v-st v-st-ok">HEALTHY</span>
+                    <span className="ml-auto"><SPill tone="ok">HEALTHY</SPill></span>
                   )}
                   {runtimeQuery.data?.health === 'unhealthy' && (
-                    <span className="ml-auto v-st v-st-fail">UNHEALTHY</span>
+                    <span className="ml-auto"><SPill tone="err">UNHEALTHY</SPill></span>
                   )}
                 </div>
 
@@ -1092,7 +1041,7 @@ export function ServiceDetailPage() {
                         href={`https://${service.domain}`}
                         target="_blank"
                         rel="noopener noreferrer"
-                        className="mono text-xs text-[var(--accent-primary)] hover:underline"
+                        className="v-mono text-xs text-[var(--accent-primary)] hover:underline"
                       >
                         {service.domain}
                       </a>
@@ -1108,7 +1057,7 @@ export function ServiceDetailPage() {
                         href={url}
                         target="_blank"
                         rel="noopener noreferrer"
-                        className="mono text-xs text-[var(--accent-primary)] hover:underline"
+                        className="v-mono text-xs text-[var(--accent-primary)] hover:underline"
                       >
                         {url.replace(/^https?:\/\//, '')}
                       </a>
@@ -1119,7 +1068,7 @@ export function ServiceDetailPage() {
                       <div className="w-2 h-2 rounded-full bg-[var(--accent-secondary)]" />
                       <span className="text-xs text-[var(--text-secondary)]">Internal</span>
                     </div>
-                    <span className="mono text-xs text-[var(--text-primary)]">{service.name}{service.port ? `:${service.port}` : ''}</span>
+                    <span className="v-mono text-xs text-[var(--text-primary)]">{service.name}{service.port ? `:${service.port}` : ''}</span>
                   </div>
                 </div>
                 {!service.domain && (runtimeQuery.data?.urls ?? []).length === 0 && (
@@ -1133,43 +1082,39 @@ export function ServiceDetailPage() {
         )}
 
         {activeSection === 'logs' && (
-          <div className="panel p-6">
-            <div className="flex items-center justify-between mb-6">
-              <div className="flex items-center gap-3">
-                <div className="w-10 h-10 rounded-[var(--radius-md)] bg-[var(--accent-primary-soft)] flex items-center justify-center">
-                  <FileText size={20} className="text-[var(--accent-primary)]" />
-                </div>
-                <div>
-                  <h2 className="text-lg font-semibold text-[var(--text-primary)]">Service Logs</h2>
-                  <p className="text-sm text-[var(--text-secondary)]">Container stdout/stderr output</p>
-                </div>
+          <div className="s-card">
+            <div className="s-cardhead">
+              <span className="s-ibox"><FileText /></span>
+              <div>
+                <div className="s-t">Service Logs</div>
+                <div className="mt-0.5 text-[11px] text-[var(--text-tertiary)]">Container stdout/stderr output</div>
               </div>
               {!isDemoMode && (
-                <div className="flex items-center gap-3">
+                <div className="s-trail">
                   <select
                     value={logTail}
                     onChange={(e) => setLogTail(e.target.value)}
-                    className="h-9 px-3 rounded-[var(--radius-md)] border border-[var(--border-subtle)] bg-[var(--surface-muted)] text-sm"
+                    className="s-chip !cursor-pointer appearance-none"
                   >
                     <option value="50">50 lines</option>
                     <option value="100">100 lines</option>
                     <option value="250">250 lines</option>
                   </select>
-                  <button
+                  <QuietBtn
                     onClick={() => {
                       serviceLogsQuery.refetch();
                       if (logsDeployment?.id) deploymentLogsQuery.refetch();
                     }}
-                    className="flex items-center gap-2 h-9 px-4 rounded-[var(--radius-md)] border border-[var(--border-subtle)] text-sm font-medium hover:border-[var(--border-default)] transition-colors"
                   >
-                    <RefreshCw size={14} />
+                    <RefreshCw size={13} />
                     Refresh
-                  </button>
+                  </QuietBtn>
                 </div>
               )}
             </div>
+            <div className="px-4 pb-4">
 
-            <div className="mono rounded-[var(--radius-md)] border border-[var(--border-subtle)] bg-[var(--bg-void)] p-4 text-xs text-[var(--text-secondary)] max-h-[500px] overflow-auto">
+            <div className="v-mono rounded-[var(--radius-md)] border border-[var(--border-subtle)] bg-[var(--bg-void)] p-4 text-xs text-[var(--text-secondary)] max-h-[500px] overflow-auto">
               {isDemoMode ? (
                 <div className="space-y-1">
                   {Array.from({ length: 15 }).map((_, i) => (
@@ -1208,7 +1153,7 @@ export function ServiceDetailPage() {
             </div>
 
             {!isDemoMode && logsDeployment && (
-              <div className="mt-6 panel-soft p-4">
+              <div className="mt-6 s-inset">
                 <div className="flex items-center justify-between mb-3">
                   <p className="text-xs uppercase tracking-wider text-[var(--text-muted)]">
                     {logsDeployment.id === latestDeployment?.id ? 'Latest Deployment' : 'Deployment'}
@@ -1225,8 +1170,8 @@ export function ServiceDetailPage() {
                     <StatusBadge status={logsDeployment.status} />
                   </div>
                 </div>
-                <p className="text-xs text-[var(--text-tertiary)] mono">{logsDeployment.id}</p>
-                <pre className="mono mt-3 max-h-40 overflow-auto whitespace-pre-wrap break-all text-xs text-[var(--text-secondary)]">
+                <p className="text-xs text-[var(--text-tertiary)] v-mono">{logsDeployment.id}</p>
+                <pre className="v-mono mt-3 max-h-40 overflow-auto whitespace-pre-wrap break-all text-xs text-[var(--text-secondary)]">
                   {deploymentLogsQuery.isLoading
                     ? 'Loading...'
                     : deploymentLogsQuery.isError
@@ -1235,105 +1180,95 @@ export function ServiceDetailPage() {
                 </pre>
               </div>
             )}
+            </div>
           </div>
         )}
 
         {activeSection === 'config' && (
-          <div className="panel p-6">
-            <div className="flex items-center gap-3 mb-6">
-              <div className="w-10 h-10 rounded-[var(--radius-md)] bg-[var(--accent-primary-soft)] flex items-center justify-center">
-                <Sliders size={20} className="text-[var(--accent-primary)]" />
-              </div>
+          <div className="s-card">
+            <div className="s-cardhead">
+              <span className="s-ibox"><Sliders /></span>
               <div>
-                <h2 className="text-lg font-semibold text-[var(--text-primary)]">Configuration</h2>
-                <p className="text-sm text-[var(--text-secondary)]">Runtime and deployment settings</p>
+                <div className="s-t">Configuration</div>
+                <div className="mt-0.5 text-[11px] text-[var(--text-tertiary)]">Runtime and deployment settings</div>
               </div>
             </div>
+            <div className="px-4 pb-4">
 
             <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-              <div className="panel-soft p-4">
+              <div className="s-inset">
                 <p className="text-xs uppercase tracking-wider text-[var(--text-muted)]">Environment</p>
                 <p className="mt-2 text-sm text-[var(--text-primary)]">{service.environment ?? 'production'}</p>
               </div>
-              <div className="panel-soft p-4">
+              <div className="s-inset">
                 <p className="text-xs uppercase tracking-wider text-[var(--text-muted)]">Image</p>
-                <p className="mono mt-2 text-sm text-[var(--text-primary)] break-all">{service.image ?? 'not set'}</p>
+                <p className="v-mono mt-2 text-sm text-[var(--text-primary)] break-all">{service.image ?? 'not set'}</p>
               </div>
-              <div className="panel-soft p-4">
+              <div className="s-inset">
                 <p className="text-xs uppercase tracking-wider text-[var(--text-muted)]">Command</p>
-                <p className="mono mt-2 text-sm text-[var(--text-primary)] break-all">{service.command ?? 'default'}</p>
+                <p className="v-mono mt-2 text-sm text-[var(--text-primary)] break-all">{service.command ?? 'default'}</p>
               </div>
-              <div className="panel-soft p-4">
+              <div className="s-inset">
                 <p className="text-xs uppercase tracking-wider text-[var(--text-muted)]">Git Branch</p>
-                <p className="mono mt-2 text-sm text-[var(--text-primary)]">{service.gitBranch ?? 'not configured'}</p>
+                <p className="v-mono mt-2 text-sm text-[var(--text-primary)]">{service.gitBranch ?? 'not configured'}</p>
               </div>
             </div>
+            </div>
           </div>
         )}
 
         {activeSection === 'variables' && (
-          <div className="panel p-6">
-            <div className="flex items-center justify-between mb-6">
-              <div className="flex items-center gap-3">
-                <div className="w-10 h-10 rounded-[var(--radius-md)] bg-[var(--accent-primary-soft)] flex items-center justify-center">
-                  <KeyRound size={20} className="text-[var(--accent-primary)]" />
-                </div>
-                <div>
-                  <h2 className="text-lg font-semibold text-[var(--text-primary)]">Environment Variables</h2>
-                  <p className="text-sm text-[var(--text-secondary)]">
-                    Runtime values injected at deploy. Reference another service's variable with{' '}
-                    <code className="mono text-[var(--accent-primary)]">{'${{service.KEY}}'}</code> or a project
-                    shared variable with{' '}
-                    <code className="mono text-[var(--accent-primary)]">{'${{shared.KEY}}'}</code>
-                  </p>
+          <div className="s-card">
+            <div className="s-cardhead">
+              <span className="s-ibox"><KeyRound /></span>
+              <div>
+                <div className="s-t">Environment Variables</div>
+                <div className="mt-0.5 text-[11px] text-[var(--text-tertiary)]">
+                  Reference another service's variable with{' '}
+                  <code className="v-mono text-[var(--accent-primary)]">{'${{service.KEY}}'}</code> or a project
+                  shared variable with{' '}
+                  <code className="v-mono text-[var(--accent-primary)]">{'${{shared.KEY}}'}</code>
                 </div>
               </div>
-              <div className="flex items-center gap-2">
-                <button
-                  onClick={() => setBulkOpen((open) => !open)}
-                  className="flex items-center gap-2 px-3 py-1.5 rounded-[var(--radius-md)] border border-[var(--border-subtle)] text-xs font-medium text-[var(--text-secondary)] hover:border-[var(--border-default)] transition-colors"
-                >
+              <div className="s-trail">
+                <QuietBtn onClick={() => setBulkOpen((open) => !open)}>
                   <ClipboardPaste size={12} />
                   Paste .env
-                </button>
-                <button
-                  onClick={() => setVarDrafts([...varRows, { key: '', value: '', isSecret: false }])}
-                  className="flex items-center gap-2 px-3 py-1.5 rounded-[var(--radius-md)] border border-[var(--border-subtle)] text-xs font-medium text-[var(--text-secondary)] hover:border-[var(--border-default)] transition-colors"
-                >
+                </QuietBtn>
+                <QuietBtn onClick={() => setVarDrafts([...varRows, { key: '', value: '', isSecret: false }])}>
                   <Plus size={12} />
                   Add variable
-                </button>
-                <button
+                </QuietBtn>
+                <GhostBtn
                   onClick={() => saveVariablesMutation.mutate(varRows)}
                   disabled={!varDirty || Object.keys(varErrors).length > 0 || saveVariablesMutation.isPending}
-                  className="flex items-center gap-2 px-4 py-1.5 rounded-[var(--radius-md)] text-xs font-medium text-[var(--accent-on)] shadow transition-all disabled:opacity-50 disabled:cursor-not-allowed"
-                  style={{ background: 'var(--accent-primary)' }}
                 >
                   {saveVariablesMutation.isPending ? <Loader2 size={12} className="animate-spin" /> : <Save size={12} />}
                   Save
-                </button>
+                </GhostBtn>
               </div>
             </div>
+            <div className="px-4 pb-4">
 
             {envCheckQuery.data && !envCheckQuery.data.ok && (
               <div className="mb-4 rounded-[var(--radius-md)] border border-[var(--warning)]/40 bg-[var(--warning-soft)] p-4">
                 <p className="text-xs font-semibold text-[var(--warning)] mb-2">Environment issues detected</p>
                 <ul className="space-y-1 text-xs text-[var(--text-secondary)]">
                   {(envCheckQuery.data.unresolved ?? []).map((u) => (
-                    <li key={u} className="mono">Unresolved reference: {u}</li>
+                    <li key={u} className="v-mono">Unresolved reference: {u}</li>
                   ))}
                   {(envCheckQuery.data.empty ?? []).map((k) => (
-                    <li key={k} className="mono">Empty value: {k}</li>
+                    <li key={k} className="v-mono">Empty value: {k}</li>
                   ))}
                   {(envCheckQuery.data.unreadable ?? []).map((k) => (
-                    <li key={k} className="mono">Cannot decrypt secret (key rotated?): {k}</li>
+                    <li key={k} className="v-mono">Cannot decrypt secret (key rotated?): {k}</li>
                   ))}
                 </ul>
               </div>
             )}
 
             {bulkOpen && (
-              <div className="mb-4 panel-soft p-4">
+              <div className="mb-4 s-inset">
                 <label className="block text-xs font-medium uppercase tracking-wider text-[var(--text-muted)] mb-2">
                   Paste .env contents
                 </label>
@@ -1342,19 +1277,19 @@ export function ServiceDetailPage() {
                   onChange={(e) => setBulkText(e.target.value)}
                   rows={6}
                   placeholder={'DATABASE_URL=postgres://...\nAPI_KEY=secret\n# comments are ignored'}
-                  className="w-full px-3 py-2 rounded-[var(--radius-md)] border border-[var(--border-subtle)] bg-[var(--surface-muted)] mono text-xs text-[var(--text-primary)] placeholder:text-[var(--text-muted)] focus:border-[var(--accent-primary)] focus:ring-1 focus:ring-[var(--accent-primary)] transition-all"
+                  className="w-full px-3 py-2 rounded-[var(--radius-md)] border border-[var(--border-subtle)] bg-[var(--surface-muted)] v-mono text-xs text-[var(--text-primary)] placeholder:text-[var(--text-muted)] focus:border-[var(--accent-primary)] focus:ring-1 focus:ring-[var(--accent-primary)] transition-all"
                 />
                 <div className="mt-3 flex justify-end gap-2">
                   <button
                     onClick={() => { setBulkOpen(false); setBulkText(''); }}
-                    className="px-3 py-1.5 rounded-[var(--radius-md)] border border-[var(--border-subtle)] text-xs font-medium text-[var(--text-secondary)] hover:border-[var(--border-default)] transition-colors"
+                    className="s-btn-quiet"
                   >
                     Cancel
                   </button>
                   <button
                     onClick={applyBulkPaste}
-                    className="px-3 py-1.5 rounded-[var(--radius-md)] text-xs font-medium text-[var(--accent-on)] transition-all"
-                    style={{ background: 'var(--accent-primary)' }}
+                    className="s-btn-accent"
+                    
                   >
                     Import {parseDotenv(bulkText).length > 0 ? `${parseDotenv(bulkText).length} variables` : ''}
                   </button>
@@ -1367,7 +1302,7 @@ export function ServiceDetailPage() {
                 <Loader2 size={20} className="animate-spin" />
               </div>
             ) : varRows.length === 0 ? (
-              <div className="panel-soft p-8 text-center">
+              <div className="s-inset !p-8 text-center">
                 <p className="text-sm text-[var(--text-secondary)]">No variables configured.</p>
                 <p className="mt-1 text-xs text-[var(--text-muted)]">Add rows or paste a .env file to get started.</p>
               </div>
@@ -1386,7 +1321,7 @@ export function ServiceDetailPage() {
                         value={row.key}
                         onChange={(e) => updateVarRow(i, { key: e.target.value })}
                         placeholder="KEY"
-                        className={`h-10 px-3 rounded-[var(--radius-md)] border bg-[var(--surface-muted)] mono text-sm text-[var(--text-primary)] placeholder:text-[var(--text-muted)] focus:ring-1 transition-all ${
+                        className={`h-10 px-3 rounded-[var(--radius-md)] border bg-[var(--surface-muted)] v-mono text-sm text-[var(--text-primary)] placeholder:text-[var(--text-muted)] focus:ring-1 transition-all ${
                           varErrors[i]
                             ? 'border-[var(--error)] focus:border-[var(--error)] focus:ring-[var(--error)]'
                             : 'border-[var(--border-subtle)] focus:border-[var(--accent-primary)] focus:ring-[var(--accent-primary)]'
@@ -1398,7 +1333,7 @@ export function ServiceDetailPage() {
                         type={row.isSecret ? 'password' : 'text'}
                         placeholder="value"
                         autoComplete="off"
-                        className="h-10 px-3 rounded-[var(--radius-md)] border border-[var(--border-subtle)] bg-[var(--surface-muted)] mono text-sm text-[var(--text-primary)] placeholder:text-[var(--text-muted)] focus:border-[var(--accent-primary)] focus:ring-1 focus:ring-[var(--accent-primary)] transition-all"
+                        className="h-10 px-3 rounded-[var(--radius-md)] border border-[var(--border-subtle)] bg-[var(--surface-muted)] v-mono text-sm text-[var(--text-primary)] placeholder:text-[var(--text-muted)] focus:border-[var(--accent-primary)] focus:ring-1 focus:ring-[var(--accent-primary)] transition-all"
                       />
                       <button
                         type="button"
@@ -1439,34 +1374,33 @@ export function ServiceDetailPage() {
                   : 'Failed to save variables'}
               </p>
             )}
+            </div>
           </div>
         )}
 
         {activeSection === 'cron' && (
-          <div className="panel p-6">
-            <div className="flex items-center justify-between mb-6">
-              <div className="flex items-center gap-3">
-                <div className="w-10 h-10 rounded-[var(--radius-md)] bg-[var(--accent-primary-soft)] flex items-center justify-center">
-                  <Clock size={20} className="text-[var(--accent-primary)]" />
-                </div>
-                <div>
-                  <h2 className="text-lg font-semibold text-[var(--text-primary)]">Cron Jobs</h2>
-                  <p className="text-sm text-[var(--text-secondary)]">Scheduled commands executed inside the service container</p>
-                </div>
+          <div className="s-card">
+            <div className="s-cardhead">
+              <span className="s-ibox"><Clock /></span>
+              <div>
+                <div className="s-t">Cron Jobs</div>
+                <div className="mt-0.5 text-[11px] text-[var(--text-tertiary)]">Scheduled commands executed inside the service container</div>
               </div>
               {signedIn ? (
-              <button
-                onClick={() => { setEditingCronId(null); setCronForm({ name: '', schedule: '', command: '', timezone: 'UTC', enabled: true, retention: 30 }); }}
-                className="flex items-center gap-2 px-3 py-1.5 rounded-[var(--radius-md)] border border-[var(--border-subtle)] text-xs font-medium text-[var(--text-secondary)] hover:border-[var(--border-default)] transition-colors"
-              >
-                <Plus size={12} />
-                New job
-              </button>
+              <div className="s-trail">
+                <QuietBtn
+                  onClick={() => { setEditingCronId(null); setCronForm({ name: '', schedule: '', command: '', timezone: 'UTC', enabled: true, retention: 30 }); }}
+                >
+                  <Plus size={12} />
+                  New job
+                </QuietBtn>
+              </div>
               ) : null}
             </div>
+            <div className="px-4 pb-4">
 
             {cronForm && (
-              <div className="mb-4 panel-soft p-4 space-y-3">
+              <div className="mb-4 s-inset space-y-3">
                 <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
                   <input
                     value={cronForm.name}
@@ -1478,14 +1412,14 @@ export function ServiceDetailPage() {
                     value={cronForm.schedule}
                     onChange={(e) => setCronForm({ ...cronForm, schedule: e.target.value })}
                     placeholder="Schedule (e.g. 0 3 * * * or @daily)"
-                    className="px-3 py-2 rounded-[var(--radius-md)] border border-[var(--border-subtle)] bg-[var(--surface-muted)] mono text-xs text-[var(--text-primary)] placeholder:text-[var(--text-muted)] focus:border-[var(--accent-primary)] focus:ring-1 focus:ring-[var(--accent-primary)] transition-all"
+                    className="px-3 py-2 rounded-[var(--radius-md)] border border-[var(--border-subtle)] bg-[var(--surface-muted)] v-mono text-xs text-[var(--text-primary)] placeholder:text-[var(--text-muted)] focus:border-[var(--accent-primary)] focus:ring-1 focus:ring-[var(--accent-primary)] transition-all"
                   />
                 </div>
                 <input
                   value={cronForm.command}
                   onChange={(e) => setCronForm({ ...cronForm, command: e.target.value })}
                   placeholder="Command (runs via sh -c inside the container)"
-                  className="w-full px-3 py-2 rounded-[var(--radius-md)] border border-[var(--border-subtle)] bg-[var(--surface-muted)] mono text-xs text-[var(--text-primary)] placeholder:text-[var(--text-muted)] focus:border-[var(--accent-primary)] focus:ring-1 focus:ring-[var(--accent-primary)] transition-all"
+                  className="w-full px-3 py-2 rounded-[var(--radius-md)] border border-[var(--border-subtle)] bg-[var(--surface-muted)] v-mono text-xs text-[var(--text-primary)] placeholder:text-[var(--text-muted)] focus:border-[var(--accent-primary)] focus:ring-1 focus:ring-[var(--accent-primary)] transition-all"
                 />
                 <div className="flex flex-wrap items-center gap-3">
                   <input
@@ -1508,15 +1442,15 @@ export function ServiceDetailPage() {
                   <div className="ml-auto flex gap-2">
                     <button
                       onClick={() => { setCronForm(null); setEditingCronId(null); }}
-                      className="px-3 py-1.5 rounded-[var(--radius-md)] border border-[var(--border-subtle)] text-xs font-medium text-[var(--text-secondary)] hover:border-[var(--border-default)] transition-colors"
+                      className="s-btn-quiet"
                     >
                       Cancel
                     </button>
                     <button
                       onClick={() => saveCronMutation.mutate()}
                       disabled={!cronForm.name.trim() || !cronForm.schedule.trim() || !cronForm.command.trim() || saveCronMutation.isPending}
-                      className="flex items-center gap-2 px-4 py-1.5 rounded-[var(--radius-md)] text-xs font-medium text-[var(--accent-on)] transition-all disabled:opacity-50"
-                      style={{ background: 'var(--accent-primary)' }}
+                      className="s-btn-accent disabled:opacity-50"
+                      
                     >
                       {saveCronMutation.isPending ? <Loader2 size={12} className="animate-spin" /> : <Save size={12} />}
                       {editingCronId ? 'Save job' : 'Create job'}
@@ -1536,14 +1470,14 @@ export function ServiceDetailPage() {
                 <Loader2 size={20} className="animate-spin" />
               </div>
             ) : (isDemoMode ? getDemoCronJobsByService(serviceId) : cronJobsQuery.data ?? []).length === 0 ? (
-              <div className="panel-soft p-8 text-center">
+              <div className="s-inset !p-8 text-center">
                 <p className="text-sm text-[var(--text-secondary)]">No cron jobs configured.</p>
                 <p className="mt-1 text-xs text-[var(--text-muted)]">Create a job to run commands on a schedule inside this service's container.</p>
               </div>
             ) : (
               <div className="space-y-2">
                 {(isDemoMode ? getDemoCronJobsByService(serviceId) : cronJobsQuery.data ?? []).map((job) => (
-                  <div key={job.id} className="panel-soft p-3">
+                  <div key={job.id} className="s-inset !p-3">
                     <div className="flex items-center gap-3">
                       <button
                         onClick={() => signedIn && toggleCronMutation.mutate(job)}
@@ -1556,9 +1490,9 @@ export function ServiceDetailPage() {
                       <div className="min-w-0 flex-1">
                         <div className="flex items-center gap-2">
                           <span className="text-sm font-medium text-[var(--text-primary)] truncate">{job.name}</span>
-                          <span className="mono text-xs text-[var(--text-muted)]">{job.schedule}</span>
+                          <span className="v-mono text-xs text-[var(--text-muted)]">{job.schedule}</span>
                         </div>
-                        <p className="mono text-xs text-[var(--text-tertiary)] truncate">{job.command}</p>
+                        <p className="v-mono text-xs text-[var(--text-tertiary)] truncate">{job.command}</p>
                         <p className="text-xs text-[var(--text-muted)]">
                           {job.next_run_at ? `next ${formatRelative(job.next_run_at)}` : 'not scheduled'}
                           {job.last_status ? ` · last ${job.last_status}` : ''}
@@ -1610,7 +1544,7 @@ export function ServiceDetailPage() {
                                   <span className="text-[var(--text-muted)]">{ex.status}</span>
                                 </div>
                                 {(ex.output || ex.error) && (
-                                  <pre className="mono mt-1 ml-3.5 whitespace-pre-wrap break-all text-[var(--text-tertiary)]">{ex.output || ex.error}</pre>
+                                  <pre className="v-mono mt-1 ml-3.5 whitespace-pre-wrap break-all text-[var(--text-tertiary)]">{ex.output || ex.error}</pre>
                                 )}
                               </div>
                             ))}
@@ -1622,30 +1556,27 @@ export function ServiceDetailPage() {
                 ))}
               </div>
             )}
+            </div>
           </div>
         )}
 
         {activeSection === 'previews' && (
-          <div className="panel p-6">
-            <div className="flex items-center justify-between mb-6">
-              <div className="flex items-center gap-3">
-                <div className="w-10 h-10 rounded-[var(--radius-md)] bg-[var(--accent-primary-soft)] flex items-center justify-center">
-                  <GitPullRequest size={20} className="text-[var(--accent-primary)]" />
-                </div>
-                <div>
-                  <h2 className="text-lg font-semibold text-[var(--text-primary)]">Preview Environments</h2>
-                  <p className="text-sm text-[var(--text-secondary)]">Ephemeral per-branch deployments of this service</p>
-                </div>
+          <div className="s-card">
+            <div className="s-cardhead">
+              <span className="s-ibox"><GitPullRequest /></span>
+              <div>
+                <div className="s-t">Preview Environments</div>
+                <div className="mt-0.5 text-[11px] text-[var(--text-tertiary)]">Ephemeral per-branch deployments of this service</div>
               </div>
               {signedIn ? (
-              <button
-                onClick={() => setPreviewForm({ branch: '', prNumber: '', ttlHours: '72' })}
-                className="flex items-center gap-2 px-3 py-1.5 rounded-[var(--radius-md)] border border-[var(--border-subtle)] text-xs font-medium text-[var(--text-secondary)] hover:border-[var(--border-default)] transition-colors"
-              >
-                <Plus size={12} /> New preview
-              </button>
+              <div className="s-trail">
+                <QuietBtn onClick={() => setPreviewForm({ branch: '', prNumber: '', ttlHours: '72' })}>
+                  <Plus size={12} /> New preview
+                </QuietBtn>
+              </div>
               ) : null}
             </div>
+            <div className="px-4 pb-4">
 
             {previewForm && (
               <div className="mb-6 rounded-[var(--radius-md)] border border-[var(--border-subtle)] bg-[var(--surface-muted)] p-4 space-y-3">
@@ -1680,13 +1611,13 @@ export function ServiceDetailPage() {
                   <button
                     onClick={() => createPreviewMutation.mutate()}
                     disabled={!previewForm.branch.trim() || createPreviewMutation.isPending}
-                    className="flex items-center gap-1.5 px-3 py-1.5 rounded-[var(--radius-md)] bg-[var(--accent-primary)] text-[var(--accent-on)] text-xs font-medium disabled:opacity-40"
+                    className="s-btn-accent disabled:opacity-40"
                   >
                     {createPreviewMutation.isPending ? <Loader2 size={11} className="animate-spin" /> : <Plus size={11} />} Create
                   </button>
                   <button
                     onClick={() => setPreviewForm(null)}
-                    className="px-3 py-1.5 rounded-[var(--radius-md)] border border-[var(--border-subtle)] text-xs text-[var(--text-secondary)] hover:border-[var(--border-default)]"
+                    className="s-btn-quiet"
                   >
                     Cancel
                   </button>
@@ -1755,22 +1686,20 @@ export function ServiceDetailPage() {
                 {((deletePreviewMutation.error ?? promotePreviewMutation.error) as Error)?.message ?? 'Operation failed'}
               </p>
             )}
+            </div>
           </div>
         )}
 
         {activeSection === 'scaling' && (
-          <div className="panel p-6">
-            <div className="flex items-center justify-between mb-6">
-              <div className="flex items-center gap-3">
-                <div className="w-10 h-10 rounded-[var(--radius-md)] bg-[var(--accent-primary-soft)] flex items-center justify-center">
-                  <Layers size={20} className="text-[var(--accent-primary)]" />
-                </div>
-                <div>
-                  <h2 className="text-lg font-semibold text-[var(--text-primary)]">Scaling</h2>
-                  <p className="text-sm text-[var(--text-secondary)]">Replica policy and manual scaling</p>
-                </div>
+          <div className="s-card">
+            <div className="s-cardhead">
+              <span className="s-ibox"><Layers /></span>
+              <div>
+                <div className="s-t">Scaling</div>
+                <div className="mt-0.5 text-[11px] text-[var(--text-tertiary)]">Replica policy and manual scaling</div>
               </div>
             </div>
+            <div className="px-4 pb-4">
 
             {scalingPolicyQuery.isLoading ? (
               <p className="text-sm text-[var(--text-secondary)]">Loading…</p>
@@ -1778,8 +1707,8 @@ export function ServiceDetailPage() {
               <>
                 <div className="grid grid-cols-2 sm:grid-cols-4 gap-3 mb-6">
                   <div className="rounded-[var(--radius-md)] border border-[var(--border-subtle)] p-3">
-                    <p className="text-xs text-[var(--text-tertiary)] uppercase tracking-wide">Replicas</p>
-                    <p className="text-xl font-semibold text-[var(--text-primary)]">
+                    <p className="v-mono text-[10.5px] uppercase tracking-[0.08em] text-[var(--text-tertiary)]">Replicas</p>
+                    <p className="font-headline text-xl font-semibold text-[var(--text-primary)]">
                       {scalingStateQuery.data?.CurrentReplicas ??
                         runtimeQuery.data?.containers.filter((c) => c.state === 'running').length ??
                         '—'}
@@ -1789,19 +1718,19 @@ export function ServiceDetailPage() {
                     </p>
                   </div>
                   <div className="rounded-[var(--radius-md)] border border-[var(--border-subtle)] p-3">
-                    <p className="text-xs text-[var(--text-tertiary)] uppercase tracking-wide">Policy</p>
-                    <p className="text-xl font-semibold text-[var(--text-primary)]">
+                    <p className="v-mono text-[10.5px] uppercase tracking-[0.08em] text-[var(--text-tertiary)]">Policy</p>
+                    <p className="font-headline text-xl font-semibold text-[var(--text-primary)]">
                       {scalingPolicyQuery.data ? `${scalingPolicyQuery.data.min_replicas}–${scalingPolicyQuery.data.max_replicas}` : 'None'}
                     </p>
                   </div>
                   <div className="rounded-[var(--radius-md)] border border-[var(--border-subtle)] p-3">
-                    <p className="text-xs text-[var(--text-tertiary)] uppercase tracking-wide">Autoscaling</p>
-                    <p className="text-xl font-semibold text-[var(--text-primary)]">
+                    <p className="v-mono text-[10.5px] uppercase tracking-[0.08em] text-[var(--text-tertiary)]">Autoscaling</p>
+                    <p className="font-headline text-xl font-semibold text-[var(--text-primary)]">
                       {scalingPolicyQuery.data?.enabled ? 'On' : 'Off'}
                     </p>
                   </div>
                   <div className="rounded-[var(--radius-md)] border border-[var(--border-subtle)] p-3">
-                    <p className="text-xs text-[var(--text-tertiary)] uppercase tracking-wide">Last action</p>
+                    <p className="v-mono text-[10.5px] uppercase tracking-[0.08em] text-[var(--text-tertiary)]">Last action</p>
                     <p className="text-sm font-medium text-[var(--text-primary)] truncate">
                       {scalingStateQuery.data?.LastScaleDirection ?? '—'}
                     </p>
@@ -1828,7 +1757,7 @@ export function ServiceDetailPage() {
                       type="button"
                       disabled={manualScaleMutation.isPending || !scaleReplicas}
                       onClick={() => manualScaleMutation.mutate(Number(scaleReplicas))}
-                      className="px-4 py-2 rounded-[var(--radius-md)] bg-[var(--accent-primary)] text-[var(--accent-on)] text-sm font-medium disabled:opacity-50"
+                      className="s-btn-accent disabled:opacity-50"
                     >
                       {manualScaleMutation.isPending ? 'Scaling…' : 'Scale'}
                     </button>
@@ -1841,7 +1770,7 @@ export function ServiceDetailPage() {
                         targetMemory: String(scalingPolicyQuery.data?.target_memory ?? 80),
                         enabled: scalingPolicyQuery.data?.enabled ?? true,
                       })}
-                      className="px-4 py-2 rounded-[var(--radius-md)] border border-[var(--border-subtle)] text-sm text-[var(--text-primary)]"
+                      className="s-btn-quiet"
                     >
                       {scalingPolicyQuery.data ? 'Edit policy' : 'Create policy'}
                     </button>
@@ -1850,7 +1779,7 @@ export function ServiceDetailPage() {
                         type="button"
                         disabled={deleteScalingMutation.isPending}
                         onClick={() => { if (window.confirm('Disable autoscaling for this service?')) deleteScalingMutation.mutate(); }}
-                        className="px-4 py-2 rounded-[var(--radius-md)] border border-[var(--error)] text-sm text-[var(--error)] disabled:opacity-50"
+                        className="s-btn-quiet !text-[var(--error)] !border-[var(--error)]/50"
                       >
                         Disable policy
                       </button>
@@ -1894,14 +1823,14 @@ export function ServiceDetailPage() {
                         type="button"
                         disabled={saveScalingMutation.isPending}
                         onClick={() => saveScalingMutation.mutate()}
-                        className="px-4 py-2 rounded-[var(--radius-md)] bg-[var(--accent-primary)] text-[var(--accent-on)] text-sm font-medium disabled:opacity-50"
+                        className="s-btn-accent disabled:opacity-50"
                       >
                         {saveScalingMutation.isPending ? 'Saving…' : 'Save policy'}
                       </button>
                       <button
                         type="button"
                         onClick={() => setScalingForm(null)}
-                        className="px-4 py-2 rounded-[var(--radius-md)] border border-[var(--border-subtle)] text-sm text-[var(--text-primary)]"
+                        className="s-btn-quiet"
                       >
                         Cancel
                       </button>
@@ -1921,46 +1850,46 @@ export function ServiceDetailPage() {
                 )}
               </>
             )}
+            </div>
           </div>
         )}
 
         {activeSection === 'console' && (
-          <div className="panel p-6">
-            <div className="flex items-center gap-3 mb-6">
-              <div className="w-10 h-10 rounded-[var(--radius-md)] bg-[var(--accent-primary-soft)] flex items-center justify-center">
-                <Terminal size={20} className="text-[var(--accent-primary)]" />
-              </div>
+          <div className="s-card">
+            <div className="s-cardhead">
+              <span className="s-ibox"><Terminal /></span>
               <div>
-                <h2 className="text-lg font-semibold text-[var(--text-primary)]">Console</h2>
-                <p className="text-sm text-[var(--text-secondary)]">Interactive shell inside the service container</p>
+                <div className="s-t">Console</div>
+                <div className="mt-0.5 text-[11px] text-[var(--text-tertiary)]">Interactive shell inside the service container</div>
               </div>
             </div>
-            <ServiceTerminal serviceId={serviceId} />
+            <div className="px-4 pb-4">
+              <ServiceTerminal serviceId={serviceId} />
+            </div>
           </div>
         )}
 
         {activeSection === 'settings' && (
-          <div className="panel p-6">
-            <div className="flex items-center gap-3 mb-6">
-              <div className="w-10 h-10 rounded-[var(--radius-md)] bg-[var(--accent-primary-soft)] flex items-center justify-center">
-                <Settings size={20} className="text-[var(--accent-primary)]" />
-              </div>
+          <div className="s-card">
+            <div className="s-cardhead">
+              <span className="s-ibox"><Settings /></span>
               <div>
-                <h2 className="text-lg font-semibold text-[var(--text-primary)]">Settings</h2>
-                <p className="text-sm text-[var(--text-secondary)]">Service metadata and history</p>
+                <div className="s-t">Settings</div>
+                <div className="mt-0.5 text-[11px] text-[var(--text-tertiary)]">Service metadata and history</div>
               </div>
             </div>
+            <div className="px-4 pb-4">
 
             <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-              <div className="panel-soft p-4">
+              <div className="s-inset">
                 <p className="text-xs uppercase tracking-wider text-[var(--text-muted)]">Service ID</p>
-                <p className="mono mt-2 text-sm text-[var(--text-primary)] break-all">{service.id}</p>
+                <p className="v-mono mt-2 text-sm text-[var(--text-primary)] break-all">{service.id}</p>
               </div>
-              <div className="panel-soft p-4">
+              <div className="s-inset">
                 <p className="text-xs uppercase tracking-wider text-[var(--text-muted)]">Created</p>
                 <p className="mt-2 text-sm text-[var(--text-primary)]">{formatDate(service.createdAt)}</p>
               </div>
-              <div className="panel-soft p-4 md:col-span-2">
+              <div className="s-inset md:col-span-2">
                 <p className="text-xs uppercase tracking-wider text-[var(--text-muted)]">Last Update</p>
                 <p className="mt-2 text-sm text-[var(--text-primary)]">{formatRelative(service.updatedAt)}</p>
               </div>
@@ -1969,7 +1898,7 @@ export function ServiceDetailPage() {
             {!isDemoMode && (
               <div className="mt-6 pt-6 border-t border-[var(--border-subtle)]">
                 <div className="flex items-center justify-between mb-4">
-                  <h3 className="text-sm font-medium text-[var(--text-primary)]">Networking</h3>
+                  <h3 className="s-t">Networking</h3>
                   {networkForm === null && (
                     <button
                       type="button"
@@ -1982,7 +1911,7 @@ export function ServiceDetailPage() {
                           replicas: String(service.replicas ?? 1),
                         })
                       }
-                      className="px-3 py-1.5 rounded-[var(--radius-md)] border border-[var(--border-subtle)] text-xs font-medium hover:border-[var(--border-default)] transition-colors"
+                      className="s-btn-quiet"
                     >
                       Edit
                     </button>
@@ -1996,10 +1925,10 @@ export function ServiceDetailPage() {
                         Live: <span className="text-[var(--text-primary)] font-medium">{runtimeQuery.data.containers.filter((c) => c.state === 'running').length}/{runtimeQuery.data.desired}</span> replicas
                       </span>
                       <span className="text-[var(--text-tertiary)]">
-                        Internal: <span className="mono text-[var(--text-primary)]">{service.name}{service.port ? `:${service.port}` : ''}</span>
+                        Internal: <span className="v-mono text-[var(--text-primary)]">{service.name}{service.port ? `:${service.port}` : ''}</span>
                       </span>
                       {runtimeQuery.data.urls.map((url) => (
-                        <a key={url} href={url} target="_blank" rel="noopener noreferrer" className="mono text-[var(--accent-primary)] hover:underline">
+                        <a key={url} href={url} target="_blank" rel="noopener noreferrer" className="v-mono text-[var(--accent-primary)] hover:underline">
                           {url}
                         </a>
                       ))}
@@ -2098,14 +2027,14 @@ export function ServiceDetailPage() {
                             replicas: Math.max(1, Math.min(20, Number(networkForm.replicas) || 1)),
                           })
                         }
-                        className="px-4 py-2 rounded-[var(--radius-md)] bg-[var(--accent-primary)] text-[var(--accent-on)] text-sm font-medium disabled:opacity-50"
+                        className="s-btn-accent disabled:opacity-50"
                       >
                         {updateServiceMutation.isPending ? 'Saving…' : 'Save'}
                       </button>
                       <button
                         type="button"
                         onClick={() => setNetworkForm(null)}
-                        className="px-4 py-2 rounded-[var(--radius-md)] border border-[var(--border-subtle)] text-sm text-[var(--text-primary)]"
+                        className="s-btn-quiet"
                       >
                         Cancel
                       </button>
@@ -2122,12 +2051,12 @@ export function ServiceDetailPage() {
             {!isDemoMode && (
               <div className="mt-6 pt-6 border-t border-[var(--border-subtle)]">
                 <div className="flex items-center justify-between mb-4">
-                  <h3 className="text-sm font-medium text-[var(--text-primary)]">Volumes</h3>
+                  <h3 className="s-t">Volumes</h3>
                   {volumesForm === null && (
                     <button
                       type="button"
                       onClick={() => setVolumesForm([...(service.volumes ?? [])])}
-                      className="px-3 py-1.5 rounded-[var(--radius-md)] border border-[var(--border-subtle)] text-xs font-medium hover:border-[var(--border-default)] transition-colors"
+                      className="s-btn-quiet"
                     >
                       Edit
                     </button>
@@ -2142,9 +2071,9 @@ export function ServiceDetailPage() {
                       {(service.volumes ?? []).map((v, i) => (
                         <div key={i} className="flex items-center gap-3 rounded-[var(--radius-md)] border border-[var(--border-subtle)] px-3 py-2 text-xs">
                           <span className="px-1.5 py-0.5 rounded bg-[var(--surface-muted)] text-[var(--text-tertiary)] uppercase tracking-wide">{v.type || 'volume'}</span>
-                          <span className="mono text-[var(--text-primary)]">{v.source}</span>
+                          <span className="v-mono text-[var(--text-primary)]">{v.source}</span>
                           <span className="text-[var(--text-tertiary)]">→</span>
-                          <span className="mono text-[var(--text-primary)]">{v.target}</span>
+                          <span className="v-mono text-[var(--text-primary)]">{v.target}</span>
                           {v.read_only && <span className="text-[var(--text-tertiary)]">(read-only)</span>}
                         </div>
                       ))}
@@ -2174,7 +2103,7 @@ export function ServiceDetailPage() {
                             setVolumesForm(next);
                           }}
                           placeholder={v.type === 'bind' ? '/host/path' : 'volume-name'}
-                          className="px-3 py-1.5 rounded-[var(--radius-md)] bg-[var(--surface-muted)] border border-[var(--border-subtle)] text-xs mono text-[var(--text-primary)]"
+                          className="s-btn-quiet"
                         />
                         <input
                           value={v.target}
@@ -2184,7 +2113,7 @@ export function ServiceDetailPage() {
                             setVolumesForm(next);
                           }}
                           placeholder="/container/path"
-                          className="px-3 py-1.5 rounded-[var(--radius-md)] bg-[var(--surface-muted)] border border-[var(--border-subtle)] text-xs mono text-[var(--text-primary)]"
+                          className="s-btn-quiet"
                         />
                         <label className="flex items-center gap-1 text-[10px] text-[var(--text-tertiary)]">
                           <input
@@ -2211,7 +2140,7 @@ export function ServiceDetailPage() {
                       <button
                         type="button"
                         onClick={() => setVolumesForm([...volumesForm, { type: 'volume', source: '', target: '', read_only: false }])}
-                        className="px-3 py-1.5 rounded-[var(--radius-md)] border border-[var(--border-subtle)] text-xs font-medium hover:border-[var(--border-default)] transition-colors"
+                        className="s-btn-quiet"
                       >
                         Add mount
                       </button>
@@ -2228,14 +2157,14 @@ export function ServiceDetailPage() {
                             { onSuccess: () => setVolumesForm(null) },
                           )
                         }
-                        className="px-4 py-2 rounded-[var(--radius-md)] bg-[var(--accent-primary)] text-[var(--accent-on)] text-sm font-medium disabled:opacity-50"
+                        className="s-btn-accent disabled:opacity-50"
                       >
                         {updateServiceMutation.isPending ? 'Saving…' : 'Save'}
                       </button>
                       <button
                         type="button"
                         onClick={() => setVolumesForm(null)}
-                        className="px-4 py-2 rounded-[var(--radius-md)] border border-[var(--border-subtle)] text-sm text-[var(--text-primary)]"
+                        className="s-btn-quiet"
                       >
                         Cancel
                       </button>
@@ -2252,7 +2181,7 @@ export function ServiceDetailPage() {
             {!isDemoMode && (
               <div className="mt-6 pt-6 border-t border-[var(--border-subtle)]">
                 <div className="flex items-center justify-between mb-4">
-                  <h3 className="text-sm font-medium text-[var(--text-primary)]">Domains</h3>
+                  <h3 className="s-t">Domains</h3>
                   <button
                     type="button"
                     disabled={domainMutation.isPending}
@@ -2260,7 +2189,7 @@ export function ServiceDetailPage() {
                       const results = await checkServiceDomains(serviceId);
                       setDomainChecks(Object.fromEntries(results.map((r) => [r.domain, r])));
                     }}
-                    className="px-3 py-1.5 rounded-[var(--radius-md)] border border-[var(--border-subtle)] text-xs font-medium hover:border-[var(--border-default)] transition-colors"
+                    className="s-btn-quiet"
                   >
                     Check DNS
                   </button>
@@ -2274,7 +2203,7 @@ export function ServiceDetailPage() {
                     const check = domainChecks?.[d.domain];
                     return (
                       <div key={d.id} className="flex items-center gap-3 rounded-[var(--radius-md)] border border-[var(--border-subtle)] px-3 py-2 text-xs">
-                        <span className="mono text-[var(--text-primary)]">{d.domain}</span>
+                        <span className="v-mono text-[var(--text-primary)]">{d.domain}</span>
                         {d.is_default && <span className="px-1.5 py-0.5 rounded bg-[var(--accent-primary)]/15 text-[var(--accent-primary)]">default</span>}
                         {check && (
                           <span className={`px-1.5 py-0.5 rounded ${check.status === 'ok' ? 'bg-[var(--success-soft)] text-[var(--success)]' : check.status === 'pending' ? 'bg-[var(--warning-soft)] text-[var(--warning)]' : 'bg-[var(--error-soft)] text-[var(--error)]'}`}>
@@ -2308,7 +2237,7 @@ export function ServiceDetailPage() {
                     value={domainInput}
                     onChange={(e) => setDomainInput(e.target.value)}
                     placeholder="app.example.com"
-                    className="flex-1 px-3 py-2 rounded-[var(--radius-md)] bg-[var(--surface-muted)] border border-[var(--border-subtle)] text-sm mono text-[var(--text-primary)]"
+                    className="flex-1 px-3 py-2 rounded-[var(--radius-md)] bg-[var(--surface-muted)] border border-[var(--border-subtle)] text-sm v-mono text-[var(--text-primary)]"
                   />
                   <button
                     type="button"
@@ -2318,7 +2247,7 @@ export function ServiceDetailPage() {
                         onSuccess: () => setDomainInput(''),
                       })
                     }
-                    className="px-4 py-2 rounded-[var(--radius-md)] bg-[var(--accent-primary)] text-[var(--accent-on)] text-sm font-medium disabled:opacity-50"
+                    className="s-btn-accent disabled:opacity-50"
                   >
                     Add
                   </button>
@@ -2334,7 +2263,7 @@ export function ServiceDetailPage() {
               <div className="mt-6 pt-6 border-t border-[var(--border-subtle)]">
                 <div className="flex items-center justify-between mb-3">
                   <div>
-                    <h3 className="text-sm font-medium text-[var(--text-primary)]">Sleep</h3>
+                    <h3 className="s-t">Sleep</h3>
                     <p className="text-xs text-[var(--text-tertiary)] mt-0.5">
                       Scale to zero after idle minutes without traffic. Requests resume the service automatically.
                     </p>
@@ -2344,7 +2273,7 @@ export function ServiceDetailPage() {
                       type="button"
                       disabled={wakeMutation.isPending}
                       onClick={() => wakeMutation.mutate()}
-                      className="px-3 py-1.5 rounded-[var(--radius-md)] bg-[var(--accent-primary)] text-[var(--accent-on)] text-xs font-medium disabled:opacity-50"
+                      className="s-btn-accent disabled:opacity-50"
                     >
                       {wakeMutation.isPending ? 'Waking…' : 'Wake now'}
                     </button>
@@ -2353,7 +2282,7 @@ export function ServiceDetailPage() {
                       type="button"
                       disabled={sleepMutation.isPending || service.status !== 'running'}
                       onClick={() => sleepMutation.mutate()}
-                      className="px-3 py-1.5 rounded-[var(--radius-md)] border border-[var(--border-subtle)] text-xs font-medium hover:border-[var(--border-default)] transition-colors disabled:opacity-50"
+                      className="s-btn-quiet"
                     >
                       {sleepMutation.isPending ? 'Sleeping…' : 'Sleep now'}
                     </button>
@@ -2393,7 +2322,7 @@ export function ServiceDetailPage() {
                         sleep_idle_minutes: Math.max(1, Math.min(1440, Number(sleepMinutes) || 15)),
                       })
                     }
-                    className="px-3 py-1.5 rounded-[var(--radius-md)] bg-[var(--accent-primary)] text-[var(--accent-on)] text-xs font-medium disabled:opacity-50"
+                    className="s-btn-accent disabled:opacity-50"
                   >
                     Save
                   </button>
@@ -2407,7 +2336,7 @@ export function ServiceDetailPage() {
             {!isDemoMode && (nodesQuery.data?.length ?? 0) > 0 && (
               <div className="mt-6 pt-6 border-t border-[var(--border-subtle)]">
                 <div className="mb-3">
-                  <h3 className="text-sm font-medium text-[var(--text-primary)]">Placement</h3>
+                  <h3 className="s-t">Placement</h3>
                   <p className="text-xs text-[var(--text-tertiary)] mt-0.5">
                     Which node runs this service's containers. Remote nodes pull the image
                     from its registry — git builds and domains stay on the local host.
@@ -2446,7 +2375,7 @@ export function ServiceDetailPage() {
                         type="button"
                         disabled={updateServiceMutation.isPending}
                         onClick={() => updateServiceMutation.mutate({ node_id: nodeDraft })}
-                        className="px-3 py-1.5 rounded-[var(--radius-md)] bg-[var(--accent-primary)] text-[var(--accent-on)] text-xs font-medium disabled:opacity-50"
+                        className="s-btn-accent disabled:opacity-50"
                       >
                         Save
                       </button>
@@ -2496,7 +2425,7 @@ export function ServiceDetailPage() {
             {!isDemoMode && (
               <div className="mt-6 pt-6 border-t border-[var(--border-subtle)]">
                 <div className="flex items-center justify-between mb-4">
-                  <h3 className="text-sm font-medium text-[var(--text-primary)]">Access</h3>
+                  <h3 className="s-t">Access</h3>
                   {accessForm === null && (
                     <button
                       type="button"
@@ -2509,7 +2438,7 @@ export function ServiceDetailPage() {
                             .join('\n'),
                         })
                       }
-                      className="px-3 py-1.5 rounded-[var(--radius-md)] border border-[var(--border-subtle)] text-xs font-medium hover:border-[var(--border-default)] transition-colors"
+                      className="s-btn-quiet"
                     >
                       Edit
                     </button>
@@ -2554,7 +2483,7 @@ export function ServiceDetailPage() {
                         onChange={(e) => setAccessForm({ ...accessForm, basicAuth: e.target.value })}
                         rows={2}
                         placeholder="admin:s3cret"
-                        className="w-full px-3 py-2 rounded-[var(--radius-md)] bg-[var(--surface-muted)] border border-[var(--border-subtle)] text-sm mono text-[var(--text-primary)]"
+                        className="w-full px-3 py-2 rounded-[var(--radius-md)] bg-[var(--surface-muted)] border border-[var(--border-subtle)] text-sm v-mono text-[var(--text-primary)]"
                       />
                     </div>
                     <div>
@@ -2564,7 +2493,7 @@ export function ServiceDetailPage() {
                         onChange={(e) => setAccessForm({ ...accessForm, traefikLabels: e.target.value })}
                         rows={3}
                         placeholder={"middlewares.rl.ratelimit.average=100\nmiddlewares.sec.headers.customresponseheaders.X-Frame-Options=DENY"}
-                        className="w-full px-3 py-2 rounded-[var(--radius-md)] bg-[var(--surface-muted)] border border-[var(--border-subtle)] text-sm mono text-[var(--text-primary)]"
+                        className="w-full px-3 py-2 rounded-[var(--radius-md)] bg-[var(--surface-muted)] border border-[var(--border-subtle)] text-sm v-mono text-[var(--text-primary)]"
                       />
                     </div>
                     <div className="flex items-center gap-2">
@@ -2595,14 +2524,14 @@ export function ServiceDetailPage() {
                             { onSuccess: () => setAccessForm(null) },
                           );
                         }}
-                        className="px-4 py-2 rounded-[var(--radius-md)] bg-[var(--accent-primary)] text-[var(--accent-on)] text-sm font-medium disabled:opacity-50"
+                        className="s-btn-accent disabled:opacity-50"
                       >
                         {updateServiceMutation.isPending ? 'Saving…' : 'Save'}
                       </button>
                       <button
                         type="button"
                         onClick={() => setAccessForm(null)}
-                        className="px-4 py-2 rounded-[var(--radius-md)] border border-[var(--border-subtle)] text-sm text-[var(--text-primary)]"
+                        className="s-btn-quiet"
                       >
                         Cancel
                       </button>
@@ -2616,7 +2545,7 @@ export function ServiceDetailPage() {
             {!isDemoMode && (
               <div className="mt-6 pt-6 border-t border-[var(--border-subtle)]">
                 <div className="flex items-center justify-between mb-4">
-                  <h3 className="text-sm font-medium text-[var(--text-primary)]">Build &amp; Resources</h3>
+                  <h3 className="s-t">Build &amp; Resources</h3>
                   {buildForm === null && (
                     <button
                       type="button"
@@ -2629,7 +2558,7 @@ export function ServiceDetailPage() {
                           staticDir: service.staticDir ?? '',
                         })
                       }
-                      className="px-3 py-1.5 rounded-[var(--radius-md)] border border-[var(--border-subtle)] text-xs font-medium hover:border-[var(--border-default)] transition-colors"
+                      className="s-btn-quiet"
                     >
                       Edit
                     </button>
@@ -2652,7 +2581,7 @@ export function ServiceDetailPage() {
                     {service.builder === 'static' && (
                       <div className="rounded-[var(--radius-md)] border border-[var(--border-subtle)] p-3 col-span-2">
                         <p className="text-[var(--text-tertiary)] uppercase tracking-wide">Static build</p>
-                        <p className="mt-1 text-sm font-medium mono text-[var(--text-primary)]">
+                        <p className="mt-1 text-sm font-medium v-mono text-[var(--text-primary)]">
                           {service.staticBuildCmd || 'npm ci && npm run build'} → {service.staticDir || 'dist'}
                         </p>
                       </div>
@@ -2679,7 +2608,7 @@ export function ServiceDetailPage() {
                           value={buildForm.cpuReserve}
                           onChange={(e) => setBuildForm({ ...buildForm, cpuReserve: e.target.value })}
                           placeholder="0.25"
-                          className="w-full px-3 py-2 rounded-[var(--radius-md)] bg-[var(--surface-muted)] border border-[var(--border-subtle)] text-sm mono text-[var(--text-primary)]"
+                          className="w-full px-3 py-2 rounded-[var(--radius-md)] bg-[var(--surface-muted)] border border-[var(--border-subtle)] text-sm v-mono text-[var(--text-primary)]"
                         />
                       </div>
                       <div>
@@ -2688,7 +2617,7 @@ export function ServiceDetailPage() {
                           value={buildForm.memoryReserve}
                           onChange={(e) => setBuildForm({ ...buildForm, memoryReserve: e.target.value })}
                           placeholder="128Mi"
-                          className="w-full px-3 py-2 rounded-[var(--radius-md)] bg-[var(--surface-muted)] border border-[var(--border-subtle)] text-sm mono text-[var(--text-primary)]"
+                          className="w-full px-3 py-2 rounded-[var(--radius-md)] bg-[var(--surface-muted)] border border-[var(--border-subtle)] text-sm v-mono text-[var(--text-primary)]"
                         />
                       </div>
                     </div>
@@ -2700,7 +2629,7 @@ export function ServiceDetailPage() {
                             value={buildForm.staticCmd}
                             onChange={(e) => setBuildForm({ ...buildForm, staticCmd: e.target.value })}
                             placeholder="npm ci && npm run build"
-                            className="w-full px-3 py-2 rounded-[var(--radius-md)] bg-[var(--surface-muted)] border border-[var(--border-subtle)] text-sm mono text-[var(--text-primary)]"
+                            className="w-full px-3 py-2 rounded-[var(--radius-md)] bg-[var(--surface-muted)] border border-[var(--border-subtle)] text-sm v-mono text-[var(--text-primary)]"
                           />
                         </div>
                         <div>
@@ -2709,7 +2638,7 @@ export function ServiceDetailPage() {
                             value={buildForm.staticDir}
                             onChange={(e) => setBuildForm({ ...buildForm, staticDir: e.target.value })}
                             placeholder="dist"
-                            className="w-full px-3 py-2 rounded-[var(--radius-md)] bg-[var(--surface-muted)] border border-[var(--border-subtle)] text-sm mono text-[var(--text-primary)]"
+                            className="w-full px-3 py-2 rounded-[var(--radius-md)] bg-[var(--surface-muted)] border border-[var(--border-subtle)] text-sm v-mono text-[var(--text-primary)]"
                           />
                         </div>
                       </div>
@@ -2730,14 +2659,14 @@ export function ServiceDetailPage() {
                             { onSuccess: () => setBuildForm(null) },
                           );
                         }}
-                        className="px-4 py-2 rounded-[var(--radius-md)] bg-[var(--accent-primary)] text-[var(--accent-on)] text-sm font-medium disabled:opacity-50"
+                        className="s-btn-accent disabled:opacity-50"
                       >
                         {updateServiceMutation.isPending ? 'Saving…' : 'Save'}
                       </button>
                       <button
                         type="button"
                         onClick={() => setBuildForm(null)}
-                        className="px-4 py-2 rounded-[var(--radius-md)] border border-[var(--border-subtle)] text-sm text-[var(--text-primary)]"
+                        className="s-btn-quiet"
                       >
                         Cancel
                       </button>
@@ -2754,14 +2683,11 @@ export function ServiceDetailPage() {
             {!isDemoMode && (
               <div className="mt-6 pt-6 border-t border-[var(--border-subtle)]">
                 <div className="flex items-center justify-between mb-4">
-                  <h3 className="text-sm font-medium text-[var(--text-primary)]">Deployment History</h3>
-                  <button
-                    onClick={() => deploymentsQuery.refetch()}
-                    className="flex items-center gap-2 px-3 py-1.5 rounded-[var(--radius-md)] border border-[var(--border-subtle)] text-xs font-medium hover:border-[var(--border-default)] transition-colors"
-                  >
+                  <h3 className="s-t">Deployment History</h3>
+                  <QuietBtn onClick={() => deploymentsQuery.refetch()}>
                     <RefreshCw size={12} />
                     Refresh
-                  </button>
+                  </QuietBtn>
                 </div>
 
                 <div className="rounded-[var(--radius-md)] border border-[var(--border-subtle)] overflow-hidden">
@@ -2800,8 +2726,8 @@ export function ServiceDetailPage() {
                             <td className="px-4 py-3">
                               <StatusBadge status={deployment.status} />
                             </td>
-                            <td className="px-4 py-3 mono text-[var(--text-secondary)]">{deployment.id}</td>
-                            <td className="px-4 py-3 mono text-[var(--text-secondary)]">
+                            <td className="px-4 py-3 v-mono text-[var(--text-secondary)]">{deployment.id}</td>
+                            <td className="px-4 py-3 v-mono text-[var(--text-secondary)]">
                               {deployment.imageName || '—'}:{deployment.imageTag || '—'}
                             </td>
                             <td className="px-4 py-3 text-[var(--text-tertiary)]">
@@ -2814,7 +2740,7 @@ export function ServiceDetailPage() {
                                     setLogDeploymentId(deployment.id);
                                     setActiveSection('logs');
                                   }}
-                                  className="px-3 py-1.5 rounded-[var(--radius-sm)] border border-[var(--border-subtle)] text-xs font-medium hover:border-[var(--border-default)] transition-colors"
+                                  className="s-btn-quiet"
                                 >
                                   Logs
                                 </button>
@@ -2826,7 +2752,7 @@ export function ServiceDetailPage() {
                                       }
                                     }}
                                     disabled={cancelDeploymentMutation.isPending}
-                                    className="px-3 py-1.5 rounded-[var(--radius-sm)] border border-[var(--border-subtle)] text-xs font-medium text-[var(--error)] hover:border-[var(--error)]/50 disabled:opacity-50 transition-colors"
+                                    className="s-btn-quiet !text-[var(--error)] hover:!border-[var(--error)]/50"
                                   >
                                     {cancelDeploymentMutation.isPending && cancelDeploymentMutation.variables === deployment.id ? '...' : 'Cancel'}
                                   </button>
@@ -2838,7 +2764,7 @@ export function ServiceDetailPage() {
                                     }
                                   }}
                                   disabled={!canRollback(deployment.status) || rollbackMutation.isPending}
-                                  className="px-3 py-1.5 rounded-[var(--radius-sm)] border border-[var(--border-subtle)] text-xs font-medium hover:border-[var(--border-default)] disabled:opacity-50 transition-colors"
+                                  className="s-btn-quiet"
                                 >
                                   {rollbackMutation.isPending && rollbackMutation.variables === deployment.id ? '...' : 'Rollback'}
                                 </button>
@@ -2856,12 +2782,12 @@ export function ServiceDetailPage() {
             {!isDemoMode && signedIn && (
               <div className="mt-6 pt-6 border-t border-[var(--border-subtle)]">
                 <div className="flex items-center justify-between mb-4">
-                  <h3 className="text-sm font-medium text-[var(--text-primary)]">Lifecycle</h3>
+                  <h3 className="s-t">Lifecycle</h3>
                   {lifecycleForm === null && (
                     <button
                       type="button"
                       onClick={() => setLifecycleForm({ cloneName: `${service.name}-copy`, cloneProject: '', moveTarget: '' })}
-                      className="px-3 py-1.5 rounded-[var(--radius-md)] border border-[var(--border-subtle)] text-xs font-medium hover:border-[var(--border-default)] transition-colors"
+                      className="s-btn-quiet"
                     >
                       Manage
                     </button>
@@ -2881,7 +2807,7 @@ export function ServiceDetailPage() {
                           value={lifecycleForm.cloneName}
                           onChange={(e) => setLifecycleForm({ ...lifecycleForm, cloneName: e.target.value })}
                           placeholder={`${service.name}-copy`}
-                          className="w-52 px-3 py-2 rounded-[var(--radius-md)] bg-[var(--surface-muted)] border border-[var(--border-subtle)] text-sm mono text-[var(--text-primary)]"
+                          className="w-52 px-3 py-2 rounded-[var(--radius-md)] bg-[var(--surface-muted)] border border-[var(--border-subtle)] text-sm v-mono text-[var(--text-primary)]"
                         />
                         <select
                           value={lifecycleForm.cloneProject}
@@ -2904,7 +2830,7 @@ export function ServiceDetailPage() {
                               project_id: lifecycleForm.cloneProject || undefined,
                             })
                           }
-                          className="px-4 py-2 rounded-[var(--radius-md)] bg-[var(--accent-primary)] text-[var(--accent-on)] text-sm font-medium disabled:opacity-50"
+                          className="s-btn-accent disabled:opacity-50"
                         >
                           {cloneMutation.isPending ? 'Cloning…' : 'Clone'}
                         </button>
@@ -2937,7 +2863,7 @@ export function ServiceDetailPage() {
                               moveMutation.mutate(lifecycleForm.moveTarget);
                             }
                           }}
-                          className="px-4 py-2 rounded-[var(--radius-md)] border border-[var(--border-subtle)] text-sm font-medium hover:border-[var(--border-default)] disabled:opacity-50 transition-colors"
+                          className="s-btn-quiet"
                         >
                           {moveMutation.isPending ? 'Moving…' : 'Move'}
                         </button>
@@ -2957,7 +2883,7 @@ export function ServiceDetailPage() {
                             deleteServiceMutation.mutate();
                           }
                         }}
-                        className="px-4 py-2 rounded-[var(--radius-md)] border border-[var(--error-soft)] text-[var(--error)] text-sm font-medium hover:bg-[var(--error-soft)] disabled:opacity-50 transition-colors"
+                        className="s-btn-quiet !text-[var(--error)] !border-[var(--error)]/50"
                       >
                         {deleteServiceMutation.isPending ? 'Deleting…' : 'Delete'}
                       </button>
@@ -2967,7 +2893,7 @@ export function ServiceDetailPage() {
                       <button
                         type="button"
                         onClick={() => setLifecycleForm(null)}
-                        className="px-4 py-2 rounded-[var(--radius-md)] border border-[var(--border-subtle)] text-sm text-[var(--text-primary)]"
+                        className="s-btn-quiet"
                       >
                         Close
                       </button>
@@ -2981,6 +2907,7 @@ export function ServiceDetailPage() {
                 )}
               </div>
             )}
+            </div>
           </div>
         )}
       </div>
diff --git a/app/frontend/src/features/service/pages/ServiceMetricsDashboard.tsx b/app/frontend/src/features/service/pages/ServiceMetricsDashboard.tsx
index 59d8a4c..e088885 100644
--- a/app/frontend/src/features/service/pages/ServiceMetricsDashboard.tsx
+++ b/app/frontend/src/features/service/pages/ServiceMetricsDashboard.tsx
@@ -78,8 +78,8 @@ export function ServiceMetricsDashboard() {
       userData,
       perf: perfPercent,
       perfData: [
-        { data: perfData1, color: '#7ab8ff', fillOpacity: 0.15 },
-        { data: perfData2, color: '#f2c94c', fillOpacity: 0.15 }
+        { data: perfData1, color: 'var(--accent-primary)', fillOpacity: 0.15 },
+        { data: perfData2, color: 'var(--warning)', fillOpacity: 0.15 }
       ],
       upSpeed: seededRandom(`${serviceId}:upspeed`, 8, 13).toFixed(1),
       downSpeed: seededRandom(`${serviceId}:downspeed`, 4, 7).toFixed(1),
@@ -107,9 +107,8 @@ export function ServiceMetricsDashboard() {
   };
 
   return (
-    <div className="min-h-screen" style={{ background: '#16171c' }}>
+    <div className="min-h-screen" style={{ background: 'var(--bg-void)' }}>
       {/* Ambient glow */}
-      <div className="ambient-glow" />
 
       <div className="flex min-h-screen relative">
         {/* Sidebar - self.html exact match */}
@@ -117,8 +116,8 @@ export function ServiceMetricsDashboard() {
           className="hidden md:flex shrink-0 flex-col items-center border-r"
           style={{ 
             width: '64px',
-            background: '#111217',
-            borderRight: '1px solid rgba(255,255,255,0.07)',
+            background: 'var(--bg-surface)',
+            borderRight: '1px solid var(--border-subtle)',
             padding: '16px 0',
             gap: '5px'
           }}
@@ -169,10 +168,10 @@ export function ServiceMetricsDashboard() {
             style={{ 
               width: '34px', 
               height: '34px', 
-              background: '#22233a',
+              background: 'var(--accent-primary-soft)',
               fontSize: '11px',
               fontWeight: 700,
-              color: '#9295a4',
+              color: 'var(--text-tertiary)',
               marginTop: '4px',
               letterSpacing: '-0.3px'
             }}
@@ -188,8 +187,8 @@ export function ServiceMetricsDashboard() {
             className="shrink-0 flex items-center"
             style={{ 
               height: '52px',
-              background: '#111217',
-              borderBottom: '1px solid rgba(255,255,255,0.07)',
+              background: 'var(--bg-surface)',
+              borderBottom: '1px solid var(--border-subtle)',
               padding: '0 22px',
               gap: '14px'
             }}
@@ -201,22 +200,22 @@ export function ServiceMetricsDashboard() {
             
             <div className="ml-auto flex items-center" style={{ gap: '8px' }}>
               <button 
-                className="rounded-[9px] border bg-transparent text-[#9295a4] font-medium cursor-pointer"
+                className="rounded-[9px] border bg-transparent text-[var(--text-tertiary)] font-medium cursor-pointer"
                 style={{
                   height: '32px',
                   padding: '0 14px',
-                  border: '1px solid rgba(255,255,255,0.1)',
+                  border: '1px solid var(--border-default)',
                   fontSize: '13px'
                 }}
               >
                 Support
               </button>
               <button 
-                className="rounded-[9px] border-none flex items-center text-[#e8e9f0] font-medium cursor-pointer"
+                className="rounded-[9px] border-none flex items-center text-[var(--text-primary)] font-medium cursor-pointer"
                 style={{
                   height: '32px',
                   padding: '0 14px',
-                  background: 'rgba(255,255,255,0.08)',
+                  background: 'var(--bg-overlay)',
                   fontSize: '13px',
                   gap: '6px'
                 }}
@@ -229,10 +228,10 @@ export function ServiceMetricsDashboard() {
                 style={{
                   width: '32px',
                   height: '32px',
-                  border: '1px solid rgba(255,255,255,0.1)'
+                  border: '1px solid var(--border-default)'
                 }}
               >
-                <Bell size={15} color="#9295a4" />
+                <Bell size={15}  />
               </button>
             </div>
           </header>
@@ -245,22 +244,22 @@ export function ServiceMetricsDashboard() {
               style={{ 
                 gap: '6px', 
                 padding: '14px 0 10px',
-                color: '#6b6e7d',
+                color: 'var(--text-tertiary)',
                 fontSize: '13px'
               }}
             >
-              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#6b6e7d" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="var(--text-tertiary)" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                 <polyline points="15 18 9 12 15 6"/>
               </svg>
               <button 
                 onClick={() => navigate(-1)}
-                style={{ color: '#6b6e7d' }}
-                className="hover:text-[#9295a4] transition-colors"
+                style={{ color: 'var(--text-tertiary)' }}
+                className="hover:text-[var(--text-tertiary)] transition-colors"
               >
                 Servers
               </button>
               <span style={{ opacity: 0.4 }}>/</span>
-              <span style={{ color: '#9295a4' }}>[NuFest] - App Project</span>
+              <span style={{ color: 'var(--text-tertiary)' }}>[NuFest] - App Project</span>
             </div>
 
             {/* Project Header */}
@@ -280,7 +279,7 @@ export function ServiceMetricsDashboard() {
               </div>
               <div>
                 <div className="flex items-center" style={{ gap: '10px' }}>
-                  <span style={{ fontSize: '20px', fontWeight: 800, letterSpacing: '-0.5px', color: '#e8e9f0' }}>
+                  <span style={{ fontSize: '20px', fontWeight: 800, letterSpacing: '-0.5px', color: 'var(--text-primary)' }}>
                     [NuFest] - App Project
                   </span>
                   <span className={`badge-${isSystemRunning ? 'active' : 'stopped'}`}>
@@ -293,8 +292,8 @@ export function ServiceMetricsDashboard() {
                     href="https://nufest-dth.app"
                     target="_blank"
                     rel="noopener noreferrer"
-                    className="flex items-center hover:text-[#9295a4] transition-colors"
-                    style={{ color: '#6b6e7d', fontSize: '12.5px', textDecoration: 'none', gap: '4px' }}
+                    className="flex items-center hover:text-[var(--text-tertiary)] transition-colors"
+                    style={{ color: 'var(--text-tertiary)', fontSize: '12.5px', textDecoration: 'none', gap: '4px' }}
                   >
                     https://nufest-dth.app
                     <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
@@ -304,8 +303,8 @@ export function ServiceMetricsDashboard() {
                     </svg>
                   </a>
                   <button 
-                    className="flex items-center hover:text-[#9295a4] transition-colors"
-                    style={{ color: '#6b6e7d', fontSize: '12.5px', gap: '4px' }}
+                    className="flex items-center hover:text-[var(--text-tertiary)] transition-colors"
+                    style={{ color: 'var(--text-tertiary)', fontSize: '12.5px', gap: '4px' }}
                   >
                     Project Information
                     <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
@@ -344,7 +343,7 @@ export function ServiceMetricsDashboard() {
             <div 
               className="flex"
               style={{ 
-                borderBottom: '1px solid rgba(255,255,255,0.07)',
+                borderBottom: '1px solid var(--border-subtle)',
                 marginBottom: '18px'
               }}
             >
@@ -365,16 +364,16 @@ export function ServiceMetricsDashboard() {
 
             {/* Metrics Header */}
             <div className="flex items-center justify-between" style={{ marginBottom: '16px' }}>
-              <span style={{ fontSize: '15px', fontWeight: 700, color: '#e8e9f0' }}>Metrics</span>
+              <span style={{ fontSize: '15px', fontWeight: 700, color: 'var(--text-primary)' }}>Metrics</span>
               <div className="flex items-center" style={{ gap: '8px' }}>
                 <button 
                   className="rounded-[9px] border flex items-center font-medium cursor-pointer"
                   style={{
                     height: '32px',
                     padding: '0 12px',
-                    border: '1px solid rgba(255,255,255,0.09)',
-                    background: 'rgba(255,255,255,0.04)',
-                    color: '#9295a4',
+                    border: '1px solid var(--border-default)',
+                    background: 'var(--bg-elevated)',
+                    color: 'var(--text-tertiary)',
                     fontSize: '12.5px',
                     gap: '6px'
                   }}
@@ -408,7 +407,7 @@ export function ServiceMetricsDashboard() {
                 status="good"
                 statusText="Good"
                 icon={<Cpu size={16} />}
-                chart={<LineChart data={metrics.cpuData} color="#b4e34a" height={76} />}
+                chart={<LineChart data={metrics.cpuData} color="#38bdf8" height={76} />}
                 animationDelay={0.04}
               />
 
@@ -418,23 +417,23 @@ export function ServiceMetricsDashboard() {
                   <div className="card-icon">
                     <MemoryStick size={16} />
                   </div>
-                  <span style={{ fontSize: 14, fontWeight: 600, color: '#e8e9f0' }}>RAM Usage</span>
+                  <span style={{ fontSize: 14, fontWeight: 600, color: 'var(--text-primary)' }}>RAM Usage</span>
                 </div>
-                <div style={{ fontSize: 38, fontWeight: 900, letterSpacing: '-1.5px', lineHeight: 1, color: '#e8e9f0' }}>
+                <div style={{ fontSize: 38, fontWeight: 900, letterSpacing: '-1.5px', lineHeight: 1, color: 'var(--text-primary)' }}>
                   {metrics.ram}%
                 </div>
-                <div style={{ fontSize: 12, color: '#6b6e7d', marginTop: 4 }}>
-                  <span style={{ color: '#f2c94c', fontWeight: 700 }}>Average</span> Daily usage
+                <div style={{ fontSize: 12, color: 'var(--text-tertiary)', marginTop: 4 }}>
+                  <span style={{ color: 'var(--warning)', fontWeight: 700 }}>Average</span> Daily usage
                 </div>
                 <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', margin: '10px 0 4px', position: 'relative' }}>
-                  <DonutChart percentage={metrics.ram} color="#f2c94c" />
+                  <DonutChart percentage={metrics.ram} color="var(--warning)" />
                   <div style={{ position: 'absolute', bottom: 14, textAlign: 'center' }}>
-                    <div style={{ fontSize: 10.5, color: '#6b6e7d', marginBottom: 1 }}>Used</div>
-                    <div style={{ fontSize: 12.5, fontWeight: 700, color: '#e8e9f0' }}>{metrics.ramUsedGB} GB / 8GB</div>
+                    <div style={{ fontSize: 10.5, color: 'var(--text-tertiary)', marginBottom: 1 }}>Used</div>
+                    <div style={{ fontSize: 12.5, fontWeight: 700, color: 'var(--text-primary)' }}>{metrics.ramUsedGB} GB / 8GB</div>
                   </div>
                 </div>
                 <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', paddingTop: 4 }}>
-                  <span style={{ fontSize: 13, color: '#6b6e7d', fontWeight: 500, cursor: 'pointer' }}>Details</span>
+                  <span style={{ fontSize: 13, color: 'var(--text-tertiary)', fontWeight: 500, cursor: 'pointer' }}>Details</span>
                   <div className="arrow-btn">
                     <svg viewBox="0 0 24 24" fill="none" stroke="white" strokeWidth={2.5} strokeLinecap="round" strokeLinejoin="round">
                       <polyline points="9 18 15 12 9 6" />
diff --git a/app/frontend/src/features/setup/SetupWizardPage.tsx b/app/frontend/src/features/setup/SetupWizardPage.tsx
index 6f506c5..e8696c2 100644
--- a/app/frontend/src/features/setup/SetupWizardPage.tsx
+++ b/app/frontend/src/features/setup/SetupWizardPage.tsx
@@ -9,6 +9,7 @@ import {
   getSetupStatus,
   updatePlatformSettings,
 } from '@/lib/api-client';
+import { GhostBtn, QuietBtn } from '@/shared/components/sentry';
 
 // Marker the GitHub App callback reads so the wizard flow resumes here
 // instead of the settings page.
@@ -39,7 +40,7 @@ export function SetupWizardPage() {
     mutationFn: completeSetup,
     onSuccess: () => {
       queryClient.invalidateQueries({ queryKey: ['setup-status'] });
-      navigate('/projects', { replace: true });
+      navigate('/', { replace: true });
     },
   });
 
@@ -53,7 +54,7 @@ export function SetupWizardPage() {
 
   // Wizard is optional once the instance is already configured.
   if (status && !status.needs_setup && !override) {
-    return <Navigate to="/projects" replace />;
+    return <Navigate to="/" replace />;
   }
 
   const steps: { key: Step; label: string }[] = [
@@ -92,9 +93,12 @@ export function SetupWizardPage() {
         </div>
 
         {step === 'account' ? (
-          <section className="panel p-6">
-            <h1 className="text-xl font-bold text-[var(--text-primary)]">Welcome to Containr</h1>
-            <p className="mt-2 text-sm text-[var(--text-secondary)]">
+          <section className="s-card">
+            <div className="s-cardhead mb-1">
+              <span className="s-ibox"><Rocket /></span>
+              <h1 className="s-t">Welcome to Containr</h1>
+            </div>
+            <p className="mt-1 text-sm text-[var(--text-secondary)]">
               First boot detected. Create the admin account — registration closes to the public
               right after, so this account owns the instance.
             </p>
@@ -105,8 +109,7 @@ export function SetupWizardPage() {
                 </p>
                 <Link
                   to="/auth/sign-in?redirect=/setup"
-                  className="mt-4 inline-flex items-center gap-2 h-9 px-4 rounded-[var(--radius-md)] text-sm font-medium text-[var(--accent-on)]"
-                  style={{ background: 'var(--accent-primary)' }}
+                  className="mt-4 s-btn-accent inline-flex items-center gap-2"
                 >
                   Sign in <ChevronRight size={14} />
                 </Link>
@@ -114,8 +117,7 @@ export function SetupWizardPage() {
             ) : !status?.has_users ? (
               <Link
                 to="/auth/sign-up?redirect=/setup"
-                className="mt-4 inline-flex items-center gap-2 h-9 px-4 rounded-[var(--radius-md)] text-sm font-medium text-[var(--accent-on)]"
-                style={{ background: 'var(--accent-primary)' }}
+                className="mt-4 s-btn-accent inline-flex items-center gap-2"
               >
                 Create admin account <ChevronRight size={14} />
               </Link>
@@ -127,9 +129,9 @@ export function SetupWizardPage() {
         {step === 'tunnel' ? <TunnelStep onNext={() => setOverride('done')} /> : null}
 
         {step === 'done' ? (
-          <section className="panel p-6 text-center">
-            <Rocket size={28} className="mx-auto text-[var(--accent-primary)]" />
-            <h1 className="mt-4 text-xl font-bold text-[var(--text-primary)]">All set</h1>
+          <section className="s-card text-center">
+            <div className="s-ibox mx-auto !h-10 !w-10"><ShieldCheck /></div>
+            <h1 className="mt-4 font-headline text-lg font-bold text-[var(--text-primary)]">All set</h1>
             <p className="mt-2 text-sm text-[var(--text-secondary)]">
               Deploy your first service from a git repo, an image, or a template — the dashboard is
               ready.
@@ -141,12 +143,10 @@ export function SetupWizardPage() {
                   : 'Failed to save setup state'}
               </p>
             ) : null}
-            <button
-              type="button"
+            <GhostBtn
               onClick={() => completeMutation.mutate()}
               disabled={completeMutation.isPending}
-              className="mt-5 inline-flex items-center gap-2 h-10 px-6 rounded-[var(--radius-md)] text-sm font-semibold text-[var(--accent-on)] disabled:opacity-50"
-              style={{ background: 'var(--accent-primary)' }}
+              className="mt-5 !h-10 !px-6"
             >
               {completeMutation.isPending ? (
                 <Loader2 size={14} className="animate-spin" />
@@ -154,7 +154,7 @@ export function SetupWizardPage() {
                 <ShieldCheck size={15} />
               )}
               Enter Containr
-            </button>
+            </GhostBtn>
           </section>
         ) : null}
       </div>
@@ -185,12 +185,12 @@ function GitHubStep({ onNext }: { onNext: () => void }) {
   });
 
   return (
-    <section className="panel p-6">
-      <div className="flex items-center gap-3 mb-3">
-        <Github size={20} className="text-[var(--text-primary)]" />
-        <h1 className="text-xl font-bold text-[var(--text-primary)]">Connect a git provider</h1>
+    <section className="s-card">
+      <div className="s-cardhead mb-1">
+        <span className="s-ibox"><Github /></span>
+        <h1 className="s-t">Connect a Git Provider</h1>
       </div>
-      <p className="text-sm text-[var(--text-secondary)]">
+      <p className="mt-1 text-sm text-[var(--text-secondary)]">
         Provision the instance GitHub App — repo push events then trigger deployments and preview
         environments automatically. Self-hosted GitLab/Gitea can be added later in Settings.
       </p>
@@ -201,24 +201,15 @@ function GitHubStep({ onNext }: { onNext: () => void }) {
             : 'Could not start GitHub App provisioning'}
         </p>
       ) : null}
-      <div className="mt-5 flex items-center gap-3">
-        <button
-          type="button"
+      <div className="mt-5 flex items-center gap-2">
+        <GhostBtn
           onClick={() => provisionMutation.mutate()}
           disabled={provisionMutation.isPending}
-          className="inline-flex items-center gap-2 h-9 px-4 rounded-[var(--radius-md)] text-sm font-medium text-[var(--accent-on)] disabled:opacity-50"
-          style={{ background: 'var(--accent-primary)' }}
         >
-          {provisionMutation.isPending ? <Loader2 size={14} className="animate-spin" /> : null}
+          {provisionMutation.isPending ? <Loader2 size={13} className="animate-spin" /> : null}
           Set up GitHub App
-        </button>
-        <button
-          type="button"
-          onClick={onNext}
-          className="h-9 px-4 rounded-[var(--radius-md)] border border-[var(--border-subtle)] text-sm text-[var(--text-secondary)] hover:text-[var(--text-primary)] transition-colors"
-        >
-          Skip for now
-        </button>
+        </GhostBtn>
+        <QuietBtn onClick={onNext}>Skip for now</QuietBtn>
       </div>
     </section>
   );
@@ -237,9 +228,12 @@ function TunnelStep({ onNext }: { onNext: () => void }) {
   });
 
   return (
-    <section className="panel p-6">
-      <h1 className="text-xl font-bold text-[var(--text-primary)]">Public access (optional)</h1>
-      <p className="mt-2 text-sm text-[var(--text-secondary)]">
+    <section className="s-card">
+      <div className="s-cardhead mb-1">
+        <span className="s-ibox"><ShieldCheck /></span>
+        <h1 className="s-t">Public Access (optional)</h1>
+      </div>
+      <p className="mt-1 text-sm text-[var(--text-secondary)]">
         Paste a Cloudflare Tunnel token to expose this instance on the internet. Without one,
         Containr stays reachable on this network — you can add it later in Settings.
       </p>
@@ -248,31 +242,22 @@ function TunnelStep({ onNext }: { onNext: () => void }) {
         value={token}
         onChange={(e) => setToken(e.target.value)}
         placeholder="eyJhIjo… tunnel token"
-        className="mt-4 w-full h-10 px-3 rounded-[var(--radius-md)] border border-[var(--border-subtle)] bg-[var(--surface-muted)] text-sm text-[var(--text-primary)] placeholder:text-[var(--text-muted)] focus:border-[var(--accent-primary)] transition-colors"
+        className="mt-4 w-full h-10 px-3 rounded-[var(--radius-md)] border border-[var(--border-subtle)] bg-[var(--surface-muted)] v-mono text-sm text-[var(--text-primary)] placeholder:text-[var(--text-muted)] focus:border-[var(--accent-primary)] transition-colors"
       />
       {saveMutation.isError ? (
         <p className="mt-3 text-xs text-[var(--error)]">
           {saveMutation.error instanceof Error ? saveMutation.error.message : 'Failed to save token'}
         </p>
       ) : null}
-      <div className="mt-5 flex items-center gap-3">
-        <button
-          type="button"
+      <div className="mt-5 flex items-center gap-2">
+        <GhostBtn
           onClick={() => (token.trim() ? saveMutation.mutate() : onNext())}
           disabled={saveMutation.isPending}
-          className="inline-flex items-center gap-2 h-9 px-4 rounded-[var(--radius-md)] text-sm font-medium text-[var(--accent-on)] disabled:opacity-50"
-          style={{ background: 'var(--accent-primary)' }}
         >
-          {saveMutation.isPending ? <Loader2 size={14} className="animate-spin" /> : null}
+          {saveMutation.isPending ? <Loader2 size={13} className="animate-spin" /> : null}
           {token.trim() ? 'Save tunnel token' : 'Continue'}
-        </button>
-        <button
-          type="button"
-          onClick={onNext}
-          className="h-9 px-4 rounded-[var(--radius-md)] border border-[var(--border-subtle)] text-sm text-[var(--text-secondary)] hover:text-[var(--text-primary)] transition-colors"
-        >
-          Skip
-        </button>
+        </GhostBtn>
+        <QuietBtn onClick={onNext}>Skip</QuietBtn>
       </div>
     </section>
   );
diff --git a/app/frontend/src/features/templates/builder/TemplateBuilder.tsx b/app/frontend/src/features/templates/builder/TemplateBuilder.tsx
index 3d8d5a3..d9dabd6 100644
--- a/app/frontend/src/features/templates/builder/TemplateBuilder.tsx
+++ b/app/frontend/src/features/templates/builder/TemplateBuilder.tsx
@@ -17,6 +17,7 @@ import {
 } from '@xyflow/react';
 import '@xyflow/react/dist/style.css';
 import { Database, GitBranch, Package, Timer, Trash2, X } from 'lucide-react';
+import { GhostBtn, QuietBtn } from '@/shared/components/sentry';
 import {
   canvasFromConfig,
   configFromCanvas,
@@ -57,7 +58,7 @@ function ServiceBuilderNodeView({ data, selected }: NodeProps<ServiceBuilderNode
       </div>
       <div className="mt-1 flex items-center justify-between gap-2">
         <span className="text-[10.5px] uppercase tracking-wide text-[var(--text-tertiary)]">{meta.label}</span>
-        <span className="mono max-w-[120px] truncate text-[10.5px] text-[var(--text-secondary)]">
+        <span className="v-mono max-w-[120px] truncate text-[10.5px] text-[var(--text-secondary)]">
           {data.svc.runtime || data.svc.repo || '—'}
         </span>
       </div>
@@ -120,8 +121,8 @@ function BuilderInner({
             id: `${dep}->${svc.key}`,
             source: dep,
             target: svc.key,
-            markerEnd: { type: MarkerType.ArrowClosed, width: 14, height: 14, color: 'rgba(180,227,74,0.55)' },
-            style: { stroke: 'rgba(180,227,74,0.42)', strokeWidth: 1.6 },
+            markerEnd: { type: MarkerType.ArrowClosed, width: 14, height: 14, color: 'rgba(56, 189, 248,0.55)' },
+            style: { stroke: 'rgba(56, 189, 248,0.42)', strokeWidth: 1.6 },
             className: 'edge-premium',
           })),
       ),
@@ -239,7 +240,7 @@ function BuilderInner({
                 key={t}
                 type="button"
                 onClick={() => addService(t)}
-                className="canvas-pill inline-flex items-center gap-1.5 px-2.5 py-1.5 text-[11px] font-medium text-[var(--text-secondary)] hover:text-[var(--text-primary)]"
+                className="s-chip !py-1.5"
               >
                 <Icon size={12} className={meta.cls} />
                 {meta.label}
@@ -263,7 +264,7 @@ function BuilderInner({
           deleteKeyCode={['Backspace', 'Delete']}
           proOptions={{ hideAttribution: true }}
         >
-          <Background variant={BackgroundVariant.Dots} gap={22} size={1.2} color="rgba(255,255,255,0.07)" />
+          <Background variant={BackgroundVariant.Dots} gap={22} size={1.2} color="var(--tint-07)" />
         </ReactFlow>
         <div className="canvas-pill absolute bottom-3 left-3 z-10 px-3 py-1.5 text-[10.5px] text-[var(--text-tertiary)]">
           drag = move · connect handles = depends_on · double-click = add web · Del = remove
@@ -295,21 +296,16 @@ function BuilderInner({
             </div>
           ) : null}
           <div className="flex gap-2">
-            <button
-              type="button"
-              onClick={onCancel}
-              className="flex-1 rounded-[var(--radius-md)] px-3 py-2 text-xs font-medium text-[var(--text-secondary)] hover:bg-[var(--surface-muted)]"
-            >
+            <QuietBtn onClick={onCancel} className="flex-1 justify-center">
               Back to JSON
-            </button>
-            <button
-              type="button"
+            </QuietBtn>
+            <GhostBtn
               disabled={errors.length > 0 || services.size === 0}
               onClick={() => onApply(configFromCanvas(builderNodes, config))}
-              className="flex-1 rounded-[var(--radius-md)] bg-[var(--accent-primary)] px-3 py-2 text-xs font-semibold text-[var(--accent-on)] disabled:opacity-50"
+              className="flex-1 justify-center"
             >
               Apply to JSON
-            </button>
+            </GhostBtn>
           </div>
         </div>
       </div>
@@ -409,7 +405,7 @@ function Inspector({
 
       <label className={`${LABEL_CLS} mt-3`}>Environment (KEY=value, one per line)</label>
       <textarea
-        className={`${FIELD_CLS} mono min-h-[70px] resize-y`}
+        className={`${FIELD_CLS} v-mono min-h-[70px] resize-y`}
         defaultValue={envText}
         spellCheck={false}
         onBlur={(e) => {
@@ -425,7 +421,7 @@ function Inspector({
 
       <label className={`${LABEL_CLS} mt-3`}>Volumes (source:target[:ro], one per line)</label>
       <textarea
-        className={`${FIELD_CLS} mono min-h-[50px] resize-y`}
+        className={`${FIELD_CLS} v-mono min-h-[50px] resize-y`}
         defaultValue={volText}
         spellCheck={false}
         onBlur={(e) => {
diff --git a/app/frontend/src/features/templates/pages/TemplatesPage.tsx b/app/frontend/src/features/templates/pages/TemplatesPage.tsx
index 1a2750f..cf5786f 100644
--- a/app/frontend/src/features/templates/pages/TemplatesPage.tsx
+++ b/app/frontend/src/features/templates/pages/TemplatesPage.tsx
@@ -18,6 +18,7 @@ import {
 import { useAuthSession } from '@/lib/use-auth-session';
 import { useDemoMode } from '@/lib/demo-mode';
 import { demoProjects, demoTemplates, demoTemplateDetails } from '@/lib/demo-data';
+import { GhostBtn, QuietBtn, SPageHead } from '@/shared/components/sentry';
 import {
   Search,
   Filter,
@@ -489,53 +490,37 @@ export function TemplatesPage() {
 
   return (
     <div className="min-h-screen">
-      {/* Header */}
-      <div className="border-b border-[var(--border-subtle)] bg-[var(--bg-base)]/50 backdrop-blur-sm">
-        <div className="w-full px-8 py-4">
-          <div className="flex items-center justify-between gap-4">
-            <div>
-              <h1 className="v-title">Template Catalog<span className="v-cursor">_</span></h1>
-              <p className="text-sm text-[var(--text-secondary)]">Deploy services from pre-configured templates</p>
-            </div>
-            <div className="flex items-center gap-3 text-sm text-[var(--text-tertiary)]">
-              <Layers size={16} />
-              <span>{filteredTemplates.length} templates</span>
-              {signedIn && !isDemoMode ? (
-                <>
-                  <button
-                    type="button"
-                    onClick={() => {
-                      setComposeYaml('');
-                      setComposeWarnings([]);
-                      setComposeError(null);
-                      setComposeOpen(true);
-                    }}
-                    className="inline-flex h-9 items-center gap-1.5 rounded-[var(--radius-md)] border border-[var(--border-subtle)] px-3.5 text-[12.5px] font-medium text-[var(--text-secondary)] hover:text-[var(--text-primary)]"
-                  >
-                    <FileCode size={14} /> Import Compose
-                  </button>
-                  <button
-                    type="button"
-                    onClick={openCreateEditor}
-                    className="inline-flex h-9 items-center gap-1.5 rounded-[var(--radius-md)] bg-[var(--accent-primary)] px-3.5 text-[12.5px] font-semibold text-[var(--accent-on)]"
-                  >
-                    <Plus size={14} /> New template
-                  </button>
-                </>
-              ) : null}
-            </div>
-          </div>
-        </div>
+      <div className="w-full px-4 pt-6 sm:px-8">
+        <SPageHead
+          title="Template Catalog"
+          titleAccent="_"
+          sub={`${filteredTemplates.length} templates · deploy services from pre-configured stacks`}
+          actions={signedIn && !isDemoMode ? (
+            <>
+              <QuietBtn
+                onClick={() => {
+                  setComposeYaml('');
+                  setComposeWarnings([]);
+                  setComposeError(null);
+                  setComposeOpen(true);
+                }}
+              >
+                <FileCode size={13} /> Import Compose
+              </QuietBtn>
+              <GhostBtn onClick={openCreateEditor}>
+                <Plus size={13} /> New template
+              </GhostBtn>
+            </>
+          ) : undefined}
+        />
       </div>
 
       {/* Demo Mode Banner */}
       {isDemoMode && (
         <div className="w-full px-8 py-4">
-          <div className="px-4 py-3 rounded-[var(--radius-md)] border border-[var(--warning-soft)] bg-[var(--warning-soft)]/50">
-            <div className="flex items-center gap-2 text-sm text-[var(--warning)]">
-              <Sparkles size={16} />
-              <span>Demo mode active — using sample data</span>
-            </div>
+          <div className="s-inset flex items-center gap-2 text-xs text-[var(--warning)]">
+            <Sparkles size={13} />
+            Demo mode active — using sample data
           </div>
         </div>
       )}
@@ -544,12 +529,12 @@ export function TemplatesPage() {
       <div className="w-full px-4 py-6 sm:px-8">
         <div className="grid grid-cols-1 xl:grid-cols-[380px_1fr] gap-6">
           {/* Template List */}
-          <section className="panel overflow-hidden">
+          <section className="s-card overflow-hidden">
+            <div className="s-cardhead border-b border-[var(--border-subtle)]">
+              <span className="s-ibox"><Filter /></span>
+              <span className="s-t">Filters</span>
+            </div>
             <div className="p-4 border-b border-[var(--border-subtle)]">
-              <div className="flex items-center gap-2 mb-4">
-                <Filter size={16} className="text-[var(--text-tertiary)]" />
-                <span className="text-sm font-medium text-[var(--text-secondary)]">Filters</span>
-              </div>
               <div className="space-y-3">
                 <div>
                   <label className="block text-xs font-medium uppercase tracking-wider text-[var(--text-muted)] mb-2">
@@ -614,21 +599,21 @@ export function TemplatesPage() {
                   {filteredTemplates.map((template) => {
                     const selected = template.id === selectedTemplateId;
                     const Icon = categoryIcon(template.category);
-                    const categoryColor = template.category === 'database' ? '#7ab8ff' : template.category === 'frontend' ? '#f2c94c' : template.category === 'web' ? 'var(--accent-primary)' : '#9295a4';
+                    const categoryColor = template.category === 'database' ? 'var(--info)' : template.category === 'frontend' ? 'var(--warning)' : template.category === 'web' ? 'var(--accent-primary)' : 'var(--text-tertiary)';
                     return (
                       <button
                         key={template.id}
                         onClick={() => selectTemplate(template.id)}
                         className={`w-full p-4 rounded-[var(--radius-lg)] border text-left transition-all duration-300 group ${
                           selected
-                            ? 'border-[var(--accent-primary)] bg-[var(--accent-primary-soft)] shadow-lg shadow-[var(--accent-primary-glow)]'
+                            ? 'border-[var(--accent-primary)]/60 bg-[var(--accent-primary-soft)]'
                             : 'border-[var(--border-subtle)] hover:border-[var(--border-default)] hover:bg-[var(--surface-muted)]/50 card-lift'
                         }`}
                       >
                         <div className="flex items-start gap-3">
                           <div 
                             className={`w-11 h-11 rounded-xl flex items-center justify-center transition-all duration-300 ${
-                              selected ? 'ring-2 ring-white/20' : ''
+                              selected ? 'ring-1 ring-[var(--accent-primary)]/40' : ''
                             }`}
                             style={{ 
                               background: selected ? categoryColor : `${categoryColor}20`,
@@ -691,12 +676,10 @@ export function TemplatesPage() {
           </section>
 
           {/* Template Detail */}
-          <section className="panel p-6">
+          <section className="s-card p-5">
             {!selectedTemplateId ? (
               <div className="py-16 text-center">
-                <div className="w-16 h-16 mx-auto mb-4 rounded-full bg-[var(--surface-muted)] flex items-center justify-center">
-                  <Layers size={28} className="text-[var(--text-tertiary)]" />
-                </div>
+                <div className="s-ibox mx-auto mb-4 !w-14 !h-14"><Layers size={22} /></div>
                 <p className="text-sm text-[var(--text-muted)]">Select a template to view details and deploy</p>
               </div>
             ) : null}
@@ -722,15 +705,15 @@ export function TemplatesPage() {
                 {/* Header */}
                 <div className="flex items-start justify-between gap-4 mb-6">
                   <div className="flex items-center gap-4">
-                    <div className="w-14 h-14 rounded-[var(--radius-md)] bg-[var(--accent-primary-soft)] flex items-center justify-center">
+                    <div className="s-ibox !w-14 !h-14 !rounded-xl text-[var(--accent-primary)]">
                       {(() => {
                         const Icon = categoryIcon(selectedDetail.template.category);
-                        return <Icon size={24} className="text-[var(--accent-primary)]" />;
+                        return <Icon size={24} />;
                       })()}
                     </div>
                     <div>
                       <div className="flex items-center gap-2">
-                        <h2 className="text-xl font-semibold text-[var(--text-primary)]">{selectedDetail.template.name}</h2>
+                        <h2 className="font-headline text-lg font-semibold text-[var(--text-primary)]">{selectedDetail.template.name}</h2>
                         {selectedDetail.template.isOfficial && (
                           <span className="flex items-center gap-1 px-2 py-0.5 rounded-full bg-[var(--warning-soft)] text-[var(--warning)] text-xs font-medium">
                             <Star size={10} className="fill-[var(--warning)]" />
@@ -738,7 +721,7 @@ export function TemplatesPage() {
                           </span>
                         )}
                         {!selectedDetail.template.isOfficial && selectedDetail.template.isPublic && (
-                          <span className="px-2 py-0.5 rounded-full bg-[var(--info-soft)] text-[var(--info)] text-xs font-medium">
+                          <span className="s-chip !text-[var(--info)] !border-[color-mix(in_srgb,var(--info)_30%,transparent)] !bg-[var(--info-soft)] v-mono !text-[10.5px]">
                             Public
                           </span>
                         )}
@@ -747,10 +730,10 @@ export function TemplatesPage() {
                     </div>
                   </div>
                   <div className="flex items-center gap-2">
-                    <span className="px-3 py-1 rounded-full border border-[var(--border-subtle)] text-xs text-[var(--text-tertiary)]">
+                    <span className="s-chip v-mono !text-[10.5px]">
                       {categoryLabel(selectedDetail.template.category)}
                     </span>
-                    <span className="px-3 py-1 rounded-full border border-[var(--border-subtle)] text-xs text-[var(--text-tertiary)]">
+                    <span className="s-chip v-mono !text-[10.5px]">
                       {selectedDetail.config.runtime || 'n/a'}
                     </span>
                     {canManageTemplate(selectedDetail.template) ? (
@@ -777,25 +760,25 @@ export function TemplatesPage() {
 
                 {/* Config Grid */}
                 <div className="grid grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
-                  <div className="panel-soft p-4">
+                  <div className="s-inset">
                     <p className="text-xs font-medium uppercase tracking-wider text-[var(--text-muted)]">Type</p>
-                    <p className="mono text-sm text-[var(--text-primary)] mt-2">{selectedDetail.config.type || '—'}</p>
+                    <p className="v-mono text-sm text-[var(--text-primary)] mt-2">{selectedDetail.config.type || '—'}</p>
                   </div>
-                  <div className="panel-soft p-4">
+                  <div className="s-inset">
                     <p className="text-xs font-medium uppercase tracking-wider text-[var(--text-muted)]">Port</p>
-                    <p className="mono text-sm text-[var(--text-primary)] mt-2">{selectedDetail.config.port || '—'}</p>
+                    <p className="v-mono text-sm text-[var(--text-primary)] mt-2">{selectedDetail.config.port || '—'}</p>
                   </div>
-                  <div className="panel-soft p-4">
+                  <div className="s-inset">
                     <p className="text-xs font-medium uppercase tracking-wider text-[var(--text-muted)]">Build</p>
-                    <p className="mono text-xs text-[var(--text-primary)] mt-2 truncate">{selectedDetail.config.buildCommand || '—'}</p>
+                    <p className="v-mono text-xs text-[var(--text-primary)] mt-2 truncate">{selectedDetail.config.buildCommand || '—'}</p>
                   </div>
-                  <div className="panel-soft p-4">
+                  <div className="s-inset">
                     <p className="text-xs font-medium uppercase tracking-wider text-[var(--text-muted)]">Start</p>
-                    <p className="mono text-xs text-[var(--text-primary)] mt-2 truncate">{selectedDetail.config.startCommand || '—'}</p>
+                    <p className="v-mono text-xs text-[var(--text-primary)] mt-2 truncate">{selectedDetail.config.startCommand || '—'}</p>
                   </div>
                 </div>
 
-                <div className="panel-soft p-4 mb-6">
+                <div className="s-inset mb-6">
                   <p className="text-xs font-medium uppercase tracking-wider text-[var(--text-muted)] mb-2">How Templates Work</p>
                   <p className="text-sm text-[var(--text-secondary)]">
                     Template defaults are merged with your variable inputs. Creating from template saves a stopped service in the selected project, then you deploy it from the service detail page.
@@ -808,7 +791,7 @@ export function TemplatesPage() {
                 </div>
 
                 {isGraphTemplate ? (
-                  <div className="panel-soft p-4 mb-6">
+                  <div className="s-inset mb-6">
                     <div className="flex items-center gap-2 mb-3">
                       <Network size={14} className="text-[var(--accent-primary)]" />
                       <p className="text-xs font-medium uppercase tracking-wider text-[var(--text-muted)]">
@@ -824,14 +807,14 @@ export function TemplatesPage() {
                             ) : (
                               <Box size={13} className="text-[var(--text-tertiary)] shrink-0" />
                             )}
-                            <span className="mono text-[var(--text-primary)] truncate">{member.name || member.key}</span>
+                            <span className="v-mono text-[var(--text-primary)] truncate">{member.name || member.key}</span>
                             {member.dependsOn && member.dependsOn.length > 0 ? (
                               <span className="text-[10px] text-[var(--text-tertiary)]">
                                 after {member.dependsOn.join(', ')}
                               </span>
                             ) : null}
                           </div>
-                          <span className="mono text-[11px] text-[var(--text-tertiary)] truncate">
+                          <span className="v-mono text-[11px] text-[var(--text-tertiary)] truncate">
                             {member.type === 'database' ? `managed ${member.runtime}` : member.runtime || member.repo || '—'}
                           </span>
                         </div>
@@ -845,13 +828,11 @@ export function TemplatesPage() {
 
                 {/* Deploy Section */}
                 <div className="border-t border-[var(--border-subtle)] pt-6">
-                  <div className="flex items-center gap-3 mb-4">
-                    <div className="w-10 h-10 rounded-[var(--radius-md)] bg-[var(--success-soft)] flex items-center justify-center">
-                      <Play size={18} className="text-[var(--success)]" />
-                    </div>
+                  <div className="s-cardhead !mb-4">
+                    <span className="s-ibox"><Play /></span>
                     <div>
-                      <h3 className="text-lg font-semibold text-[var(--text-primary)]">Deploy from Template</h3>
-                      <p className="text-sm text-[var(--text-secondary)]">
+                      <span className="s-t">Deploy from Template</span>
+                      <p className="v-mono text-[10.5px] text-[var(--text-tertiary)] mt-0.5">
                         {isGraphTemplate ? 'Deploy all members into a project' : 'Configure and create a new service'}
                       </p>
                     </div>
@@ -868,7 +849,7 @@ export function TemplatesPage() {
                       </p>
                       <Link
                         to="/auth/sign-in"
-                        className="mt-3 inline-flex items-center gap-1.5 rounded-[var(--radius-md)] bg-[var(--accent-primary)] px-4 py-2 text-[12.5px] font-semibold text-[var(--accent-on)]"
+                        className="s-btn-accent mt-3 text-[12.5px]"
                       >
                         Sign in <ArrowRight size={13} />
                       </Link>
@@ -974,7 +955,7 @@ export function TemplatesPage() {
                         <span>
                           {lastDeployment.created
                             ? `Stack deployed — ${lastDeployment.created.length} resources`
-                            : <>Service <span className="mono font-medium">{lastDeployment.serviceName}</span> created</>}
+                            : <>Service <span className="v-mono font-medium">{lastDeployment.serviceName}</span> created</>}
                         </span>
                         <Link
                           to={lastDeployment.created
@@ -990,7 +971,7 @@ export function TemplatesPage() {
                           {lastDeployment.created.map((m) => (
                             <div key={m.id} className="flex items-center gap-2 text-xs">
                               {m.kind === 'database' ? <Database size={11} /> : <Box size={11} />}
-                              <span className="mono">{m.name}</span>
+                              <span className="v-mono">{m.name}</span>
                               <span className="opacity-70">({m.kind})</span>
                             </div>
                           ))}
@@ -1003,8 +984,8 @@ export function TemplatesPage() {
                     <button
                       onClick={() => deployMutation.mutate()}
                       disabled={isDeployDisabled}
-                      className="flex items-center gap-2 h-11 px-6 rounded-[var(--radius-md)] text-[var(--accent-on)] text-sm font-medium shadow-lg disabled:opacity-50 disabled:cursor-not-allowed transition-all"
-                      style={{ background: 'var(--accent-primary)' }}
+                      className="s-btn-accent h-11 disabled:opacity-50 disabled:cursor-not-allowed"
+                      
                     >
                       {deployMutation.isPending ? (
                         <>
@@ -1137,7 +1118,7 @@ export function TemplatesPage() {
                 value={editorJson}
                 onChange={(e) => setEditorJson(e.target.value)}
                 spellCheck={false}
-                className="mono min-h-[380px] flex-1 resize-none bg-[var(--bg-void)] p-4 text-[12.5px] leading-relaxed text-[var(--text-secondary)] outline-none"
+                className="v-mono min-h-[380px] flex-1 resize-none bg-[var(--bg-void)] p-4 text-[12.5px] leading-relaxed text-[var(--text-secondary)] outline-none"
               />
             )}
             {composeWarnings.length > 0 ? (
@@ -1175,7 +1156,7 @@ export function TemplatesPage() {
                   type="button"
                   onClick={submitEditor}
                   disabled={saveTemplateMutation.isPending}
-                  className="inline-flex items-center gap-1.5 rounded-[var(--radius-md)] bg-[var(--accent-primary)] px-4 py-2 text-xs font-semibold text-[var(--accent-on)] disabled:opacity-50"
+                  className="s-btn-accent disabled:opacity-50"
                 >
                   {saveTemplateMutation.isPending ? <Loader2 size={13} className="animate-spin" /> : null}
                   {editingTemplate ? 'Save changes' : 'Create template'}
@@ -1227,7 +1208,7 @@ export function TemplatesPage() {
                 onChange={(e) => setComposeYaml(e.target.value)}
                 spellCheck={false}
                 placeholder={'services:\n  db:\n    image: postgres:16\n  web:\n    image: myapp:latest\n    depends_on: [db]'}
-                className="mono min-h-[320px] flex-1 resize-none bg-[var(--bg-void)] p-4 text-[12.5px] leading-relaxed text-[var(--text-secondary)] outline-none"
+                className="v-mono min-h-[320px] flex-1 resize-none bg-[var(--bg-void)] p-4 text-[12.5px] leading-relaxed text-[var(--text-secondary)] outline-none"
               />
             ) : (
               <div className="flex min-h-[320px] flex-1 flex-col gap-3 bg-[var(--bg-void)] p-4">
@@ -1238,7 +1219,7 @@ export function TemplatesPage() {
                     onChange={(e) => setGitRepo(e.target.value)}
                     spellCheck={false}
                     placeholder="owner/repo or https://github.com/owner/repo.git"
-                    className="mono mt-1 w-full rounded-[var(--radius-md)] border border-[var(--border-subtle)] bg-[var(--bg-base)] px-3 py-2 text-[12.5px] text-[var(--text-secondary)] outline-none focus:border-[var(--accent-primary)]"
+                    className="v-mono mt-1 w-full rounded-[var(--radius-md)] border border-[var(--border-subtle)] bg-[var(--bg-base)] px-3 py-2 text-[12.5px] text-[var(--text-secondary)] outline-none focus:border-[var(--accent-primary)]"
                   />
                 </label>
                 <label className="text-xs text-[var(--text-tertiary)]">
@@ -1248,7 +1229,7 @@ export function TemplatesPage() {
                     onChange={(e) => setGitPath(e.target.value)}
                     spellCheck={false}
                     placeholder="deploy/compose.yml"
-                    className="mono mt-1 w-full rounded-[var(--radius-md)] border border-[var(--border-subtle)] bg-[var(--bg-base)] px-3 py-2 text-[12.5px] text-[var(--text-secondary)] outline-none focus:border-[var(--accent-primary)]"
+                    className="v-mono mt-1 w-full rounded-[var(--radius-md)] border border-[var(--border-subtle)] bg-[var(--bg-base)] px-3 py-2 text-[12.5px] text-[var(--text-secondary)] outline-none focus:border-[var(--accent-primary)]"
                   />
                 </label>
                 <label className="text-xs text-[var(--text-tertiary)]">
@@ -1258,7 +1239,7 @@ export function TemplatesPage() {
                     onChange={(e) => setGitRef(e.target.value)}
                     spellCheck={false}
                     placeholder="main"
-                    className="mono mt-1 w-full rounded-[var(--radius-md)] border border-[var(--border-subtle)] bg-[var(--bg-base)] px-3 py-2 text-[12.5px] text-[var(--text-secondary)] outline-none focus:border-[var(--accent-primary)]"
+                    className="v-mono mt-1 w-full rounded-[var(--radius-md)] border border-[var(--border-subtle)] bg-[var(--bg-base)] px-3 py-2 text-[12.5px] text-[var(--text-secondary)] outline-none focus:border-[var(--accent-primary)]"
                   />
                 </label>
                 <p className="text-[11px] text-[var(--text-tertiary)]">
@@ -1283,7 +1264,7 @@ export function TemplatesPage() {
                 type="button"
                 onClick={() => composeImportMutation.mutate()}
                 disabled={(composeMode === 'paste' ? !composeYaml.trim() : !gitRepo.trim()) || composeImportMutation.isPending}
-                className="inline-flex items-center gap-1.5 rounded-[var(--radius-md)] bg-[var(--accent-primary)] px-4 py-2 text-xs font-semibold text-[var(--accent-on)] disabled:opacity-50"
+                className="s-btn-accent disabled:opacity-50"
               >
                 {composeImportMutation.isPending ? <Loader2 size={13} className="animate-spin" /> : <FileCode size={13} />}
                 Convert to template
diff --git a/app/frontend/src/features/webhooks/pages/WebhooksPage.tsx b/app/frontend/src/features/webhooks/pages/WebhooksPage.tsx
index 044f3c7..f84ae62 100644
--- a/app/frontend/src/features/webhooks/pages/WebhooksPage.tsx
+++ b/app/frontend/src/features/webhooks/pages/WebhooksPage.tsx
@@ -8,11 +8,12 @@ import {
   testWebhook,
   updateWebhook,
   type OutboundWebhook,
-  type WebhookDelivery,
 } from '@/lib/api-client';
 import { useDemoMode } from '@/lib/demo-mode';
 import { formatRelative } from '@/lib/time';
 import { DemoRestricted, useToast } from '@/shared/components';
+import { GhostBtn, QuietBtn, SPageHead, SPill } from '@/shared/components/sentry';
+import { statusTone } from '@/shared/components/sentry-utils';
 import {
   Webhook,
   Plus,
@@ -30,17 +31,6 @@ const inputClass =
 
 const eventSuggestions = ['*', 'service.*', 'project.*', 'database.*', 'deployment.*', 'template.*'];
 
-function statusClass(status: WebhookDelivery['status']): string {
-  switch (status) {
-    case 'success':
-      return 'text-[var(--success)]';
-    case 'failed':
-      return 'text-[var(--error)]';
-    default:
-      return 'text-[var(--warning)]';
-  }
-}
-
 function WebhookRow({
   webhook,
   onDelete,
@@ -63,59 +53,50 @@ function WebhookRow({
   });
 
   return (
-    <div className="panel p-4">
-      <div className="flex items-center gap-3">
-        <button onClick={() => setExpanded((v) => !v)} className="text-[var(--text-tertiary)]">
-          {expanded ? <ChevronDown size={16} /> : <ChevronRight size={16} />}
-        </button>
+    <div className="s-card !p-0">
+      <div className="flex items-center gap-3 px-4 py-3">
+        <span className="s-ibox shrink-0"><Webhook /></span>
         <div className="min-w-0 flex-1">
           <div className="flex items-center gap-2">
             <span className="text-sm font-semibold text-[var(--text-primary)]">{webhook.name}</span>
-            {!webhook.enabled && (
-              <span className="text-[10px] px-1.5 py-0.5 rounded bg-[var(--surface-muted)] text-[var(--text-muted)]">
-                disabled
-              </span>
-            )}
+            {!webhook.enabled && <SPill tone="off">disabled</SPill>}
           </div>
-          <p className="text-xs text-[var(--text-muted)] mono truncate">{webhook.url}</p>
+          <p className="v-mono text-[10.5px] text-[var(--text-muted)] truncate">{webhook.url}</p>
         </div>
-        <div className="hidden md:flex gap-1">
+        <div className="hidden md:flex gap-1.5">
           {webhook.events.map((ev) => (
-            <span
-              key={ev}
-              className="text-[10px] px-1.5 py-0.5 rounded bg-[var(--accent-primary-soft)] text-[var(--accent-primary)] mono"
-            >
-              {ev}
-            </span>
+            <span key={ev} className="s-chip">{ev}</span>
           ))}
         </div>
         <div className="flex items-center gap-1 shrink-0">
+          <button
+            onClick={() => setExpanded((v) => !v)}
+            className="s-icon-btn"
+            title={expanded ? 'Collapse' : 'Deliveries'}
+          >
+            {expanded ? <ChevronDown size={13} /> : <ChevronRight size={13} />}
+          </button>
           <button
             onClick={onTest}
             disabled={testing || !webhook.enabled}
-            className="p-2 rounded-[var(--radius-md)] text-[var(--text-tertiary)] hover:text-[var(--accent-primary)] disabled:opacity-40 transition-colors"
+            className="s-icon-btn disabled:opacity-40"
             title="Send test ping"
           >
-            {testing ? <Loader2 size={15} className="animate-spin" /> : <Send size={15} />}
-          </button>
-          <button
-            onClick={onToggle}
-            className="p-2 rounded-[var(--radius-md)] text-[var(--text-tertiary)] hover:text-[var(--text-primary)] transition-colors text-xs"
-          >
-            {webhook.enabled ? 'Disable' : 'Enable'}
+            {testing ? <Loader2 size={13} className="animate-spin" /> : <Send size={13} />}
           </button>
+          <QuietBtn onClick={onToggle}>{webhook.enabled ? 'Disable' : 'Enable'}</QuietBtn>
           <button
             onClick={onDelete}
-            className="p-2 rounded-[var(--radius-md)] text-[var(--text-tertiary)] hover:text-[var(--error)] transition-colors"
+            className="s-icon-btn !text-[var(--text-tertiary)] hover:!text-[var(--error)]"
             title="Delete webhook"
           >
-            <Trash2 size={15} />
+            <Trash2 size={13} />
           </button>
         </div>
       </div>
       {expanded && (
-        <div className="mt-3 border-t border-[var(--border-subtle)] pt-3">
-          <p className="text-[11px] uppercase tracking-wider text-[var(--text-muted)] mb-2">
+        <div className="border-t border-[var(--border-subtle)] bg-[var(--surface-muted)]/40 px-4 py-3">
+          <p className="v-mono text-[10px] uppercase tracking-[0.12em] text-[var(--text-muted)] mb-2">
             Recent deliveries
           </p>
           {deliveriesQuery.isLoading ? (
@@ -123,10 +104,10 @@ function WebhookRow({
           ) : (deliveriesQuery.data ?? []).length === 0 ? (
             <p className="text-xs text-[var(--text-muted)]">No deliveries yet.</p>
           ) : (
-            <div className="space-y-1">
+            <div className="space-y-1.5">
               {(deliveriesQuery.data ?? []).slice(0, 20).map((d) => (
-                <div key={d.id} className="flex items-center gap-3 text-xs mono">
-                  <span className={statusClass(d.status)}>{d.status}</span>
+                <div key={d.id} className="flex items-center gap-3 text-[11px] v-mono">
+                  <SPill tone={statusTone(d.status)}>{d.status}</SPill>
                   <span className="text-[var(--text-secondary)]">{d.event}</span>
                   {d.response_status != null && (
                     <span className="text-[var(--text-muted)]">HTTP {d.response_status}</span>
@@ -207,46 +188,41 @@ export function WebhooksPage() {
 
   return (
     <div className="min-h-screen">
-      <div className="border-b border-[var(--border-subtle)]">
-        <div className="w-full px-8 py-5 flex items-center justify-between">
-          <div>
-            <h1 className="v-title">Webhooks<span className="v-cursor">_</span></h1>
-            <p className="v-mono mt-1.5 text-[11px] text-[var(--text-tertiary)]">
-              Signed HTTP delivery for every platform event — deploys, restarts, deletes
-            </p>
-          </div>
-          <button
-            onClick={() => setCreating(true)}
-            className="flex items-center gap-1.5 h-9 px-4 rounded-[var(--radius-md)] text-sm font-semibold text-[var(--accent-on)]"
-            style={{ background: 'var(--accent-primary)' }}
-          >
-            <Plus size={15} />
-            New webhook
-          </button>
-        </div>
+      <div className="w-full px-4 pt-6 sm:px-8">
+        <SPageHead
+          title="Webhooks"
+          titleAccent="_"
+          sub="Signed HTTP delivery for every platform event — deploys, restarts, deletes"
+          actions={
+            <GhostBtn onClick={() => setCreating(true)}>
+              <Plus size={13} /> New webhook
+            </GhostBtn>
+          }
+        />
       </div>
 
-      <div className="w-full px-4 py-6 sm:px-8 space-y-4 max-w-4xl">
+      <div className="w-full px-4 sm:px-8 space-y-4 max-w-4xl">
         {secret && (
-          <div className="panel-soft p-4 flex items-center gap-3">
+          <div className="s-inset p-4 flex items-center gap-3">
+            <span className="s-ibox shrink-0"><Webhook /></span>
             <div className="flex-1 min-w-0">
               <p className="text-sm font-medium text-[var(--text-primary)]">Signing secret — shown once</p>
-              <p className="text-xs text-[var(--text-muted)]">
-                Verify deliveries with <span className="mono">X-Containr-Signature</span>
+              <p className="v-mono text-[11px] text-[var(--text-muted)]">
+                Verify deliveries with <span className="v-mono">X-Containr-Signature</span>
               </p>
-              <code className="block mt-2 text-xs mono text-[var(--accent-primary)] break-all">{secret}</code>
+              <code className="block mt-2 v-mono text-xs text-[var(--accent-primary)] break-all">{secret}</code>
             </div>
             <button
               onClick={() => {
                 navigator.clipboard?.writeText(secret);
                 toast.showToast('Secret copied', 'success');
               }}
-              className="p-2 text-[var(--text-tertiary)] hover:text-[var(--text-primary)]"
+              className="s-icon-btn"
             >
-              <Copy size={15} />
+              <Copy size={13} />
             </button>
-            <button onClick={() => setSecret(null)} className="p-2 text-[var(--text-tertiary)]">
-              <X size={15} />
+            <button onClick={() => setSecret(null)} className="s-icon-btn">
+              <X size={13} />
             </button>
           </div>
         )}
@@ -254,12 +230,12 @@ export function WebhooksPage() {
         {webhooksQuery.isLoading ? (
           <Loader2 size={18} className="animate-spin text-[var(--text-muted)]" />
         ) : (webhooksQuery.data ?? []).length === 0 ? (
-          <div className="panel p-8 text-center">
-            <Webhook size={28} className="mx-auto text-[var(--text-muted)] mb-3" />
+          <div className="s-card py-10 text-center">
+            <div className="s-ibox mx-auto mb-3"><Webhook /></div>
             <p className="text-sm text-[var(--text-secondary)]">No webhooks yet.</p>
-            <p className="text-xs text-[var(--text-muted)] mt-1">
-              Subscribe an HTTP endpoint to platform events like <span className="mono">service.*</span> or{' '}
-              <span className="mono">deployment.fail</span>.
+            <p className="v-mono text-[11px] text-[var(--text-muted)] mt-1">
+              Subscribe an HTTP endpoint to platform events like <span className="v-mono">service.*</span> or{' '}
+              <span className="v-mono">deployment.fail</span>.
             </p>
           </div>
         ) : (
@@ -283,8 +259,11 @@ export function WebhooksPage() {
       {creating && (
         <div className="fixed inset-0 z-50 flex items-center justify-center p-4">
           <div className="absolute inset-0 bg-[var(--bg-void)]/80 backdrop-blur-sm" onClick={() => setCreating(false)} />
-          <div className="relative w-full max-w-md panel p-6">
-            <h3 className="text-lg font-semibold text-[var(--text-primary)] mb-4">New webhook</h3>
+          <div className="relative w-full max-w-md s-card">
+            <div className="s-cardhead mb-4">
+              <span className="s-ibox"><Webhook /></span>
+              <h3 className="s-t">New Webhook</h3>
+            </div>
             <div className="space-y-4">
               <div>
                 <label className="block text-xs font-medium uppercase tracking-wider text-[var(--text-tertiary)] mb-2">
@@ -304,7 +283,7 @@ export function WebhooksPage() {
                 <input
                   value={form.url}
                   onChange={(e) => setForm((f) => ({ ...f, url: e.target.value }))}
-                  className={`${inputClass} w-full mono`}
+                  className={`${inputClass} w-full v-mono`}
                   placeholder="https://example.com/hooks/containr"
                 />
               </div>
@@ -317,30 +296,21 @@ export function WebhooksPage() {
                     <button
                       key={ev}
                       onClick={() => toggleEvent(ev)}
-                      className={`px-2.5 py-1 rounded-[var(--radius-md)] border text-xs mono transition-colors ${
-                        form.events.includes(ev)
-                          ? 'border-[var(--accent-primary)] bg-[var(--accent-primary-soft)] text-[var(--accent-primary)]'
-                          : 'border-[var(--border-subtle)] bg-[var(--surface-muted)] text-[var(--text-tertiary)]'
-                      }`}
+                      className={`s-chip v-mono ${form.events.includes(ev) ? 'on' : ''}`}
                     >
                       {ev}
                     </button>
                   ))}
                 </div>
-                <p className="mt-2 text-[11px] text-[var(--text-muted)]">
-                  Events are <span className="mono">resource.action</span> — wildcards like{' '}
-                  <span className="mono">service.*</span> match the whole resource.
+                <p className="mt-2 v-mono text-[10.5px] text-[var(--text-muted)]">
+                  Events are <span className="v-mono">resource.action</span> — wildcards like{' '}
+                  <span className="v-mono">service.*</span> match the whole resource.
                 </p>
               </div>
             </div>
             <div className="mt-6 flex justify-end gap-2">
-              <button
-                onClick={() => setCreating(false)}
-                className="h-10 px-4 rounded-[var(--radius-md)] text-sm text-[var(--text-secondary)]"
-              >
-                Cancel
-              </button>
-              <button
+              <QuietBtn onClick={() => setCreating(false)}>Cancel</QuietBtn>
+              <GhostBtn
                 onClick={() => createMutation.mutate()}
                 disabled={
                   createMutation.isPending ||
@@ -348,12 +318,10 @@ export function WebhooksPage() {
                   !form.url.trim() ||
                   form.events.length === 0
                 }
-                className="h-10 px-5 rounded-[var(--radius-md)] text-sm font-semibold text-[var(--accent-on)] disabled:opacity-50 flex items-center gap-2"
-                style={{ background: 'var(--accent-primary)' }}
               >
-                {createMutation.isPending && <Loader2 size={14} className="animate-spin" />}
+                {createMutation.isPending && <Loader2 size={13} className="animate-spin" />}
                 Create
-              </button>
+              </GhostBtn>
             </div>
           </div>
         </div>
diff --git a/app/frontend/src/features/workspace/canvas/ProjectCanvas.tsx b/app/frontend/src/features/workspace/canvas/ProjectCanvas.tsx
index 9b93377..57cbf97 100644
--- a/app/frontend/src/features/workspace/canvas/ProjectCanvas.tsx
+++ b/app/frontend/src/features/workspace/canvas/ProjectCanvas.tsx
@@ -167,12 +167,12 @@ function toFlowEdges(
       },
       markerEnd: {
         type: MarkerType.ArrowClosed,
-        color: 'rgba(180, 227, 74, 0.55)',
+        color: 'color-mix(in srgb, var(--accent-primary) 55%, transparent)',
         width: 13,
         height: 13,
       },
       style: {
-        stroke: 'rgba(180, 227, 74, 0.42)',
+        stroke: 'color-mix(in srgb, var(--accent-primary) 42%, transparent)',
         strokeWidth: 1.6,
       },
       className: 'edge-premium',
@@ -198,7 +198,7 @@ function ZoomControls({ onTidy }: { onTidy: () => void }) {
       <button
         type="button"
         onClick={() => setViewport({ x: 0, y: 0, zoom: 1 }, { duration: 180 })}
-        className="canvas-pill-btn mono w-12 text-[11px]"
+        className="canvas-pill-btn v-mono w-12 text-[11px]"
         title="Reset zoom (0)"
       >
         {Math.round(zoom * 100)}%
@@ -873,7 +873,7 @@ function CanvasInner({ projectId, services, variablesByService, onAddService, on
   const minimapNodeColor = useCallback(
     (node: CanvasNode) => {
       if (node.type === 'groupNode') {
-        return 'rgba(255,255,255,0.08)';
+        return 'var(--tint-08)';
       }
       return serviceAccent((node.data as ServiceNodeData).service);
     },
@@ -922,14 +922,14 @@ function CanvasInner({ projectId, services, variablesByService, onAddService, on
         selectionKeyCode="Shift"
         proOptions={{ hideAttribution: true }}
       >
-        <Background variant={BackgroundVariant.Dots} gap={26} size={1.2} color="rgba(255,255,255,0.055)" />
+        <Background variant={BackgroundVariant.Dots} gap={26} size={1.2} color="var(--tint-05)" />
         <MiniMap
           position="bottom-right"
           pannable
           zoomable
           nodeColor={minimapNodeColor}
-          bgColor="rgba(14, 15, 18, 0.92)"
-          maskColor="rgba(12, 13, 15, 0.72)"
+          bgColor="var(--surface-glass)"
+          maskColor="var(--surface-glass)"
           className="canvas-minimap hidden md:block"
         />
       </ReactFlow>
@@ -937,21 +937,19 @@ function CanvasInner({ projectId, services, variablesByService, onAddService, on
       {/* Floating: env filter + group (top-left) */}
       <div className="absolute left-4 top-4 flex items-center gap-2">
         {environments.length > 1 && (
-          <div className="canvas-pill flex items-center gap-0.5 p-1">
-            {['all', ...environments].map((env) => (
-              <button
-                key={env}
-                type="button"
-                onClick={() => setEnvFilter(env)}
-                className={`px-2.5 py-1 rounded-full text-[11px] font-medium capitalize transition-all ${
-                  envFilter === env
-                    ? 'bg-[var(--surface-card)] text-[var(--text-primary)] shadow-sm'
-                    : 'text-[var(--text-tertiary)] hover:text-[var(--text-secondary)]'
-                }`}
-              >
-                {env}
-              </button>
-            ))}
+          <div className="canvas-pill !rounded-[9px] p-1">
+            <span className="s-seg">
+              {['all', ...environments].map((env) => (
+                <button
+                  key={env}
+                  type="button"
+                  onClick={() => setEnvFilter(env)}
+                  className={`!w-auto !h-auto px-2.5 py-1 capitalize v-mono text-[10.5px] ${envFilter === env ? 'on' : ''}`}
+                >
+                  {env}
+                </button>
+              ))}
+            </span>
           </div>
         )}
         {!readOnly && (
@@ -1018,12 +1016,12 @@ function CanvasInner({ projectId, services, variablesByService, onAddService, on
       {/* Empty state */}
       {services.length === 0 && (
         <div className="absolute inset-0 flex items-center justify-center pointer-events-none">
-          <div className="text-center pointer-events-auto">
-            <div className="w-14 h-14 mx-auto mb-4 rounded-2xl bg-[var(--surface-card)] border border-[var(--border-subtle)] flex items-center justify-center">
-              <Rocket size={24} className="text-[var(--accent-primary)]" />
+          <div className="text-center pointer-events-auto s-card !py-8 !px-10">
+            <div className="s-ibox mx-auto mb-4 !h-11 !w-11">
+              <Rocket />
             </div>
-            <h3 className="text-base font-semibold text-[var(--text-primary)]">Deploy your first service</h3>
-            <p className="text-sm text-[var(--text-tertiary)] mt-1 mb-4 max-w-xs">
+            <h3 className="font-headline text-base font-semibold text-[var(--text-primary)]">Deploy your first service</h3>
+            <p className="v-mono text-[11.5px] text-[var(--text-tertiary)] mt-1.5 mb-5 max-w-xs">
               Add a service from a git repo or Docker image - it runs on a private network with the rest of this
               project.
             </p>
@@ -1031,10 +1029,9 @@ function CanvasInner({ projectId, services, variablesByService, onAddService, on
               <button
                 type="button"
                 onClick={onAddService}
-                className="inline-flex items-center gap-2 h-9 px-4 rounded-lg text-[var(--accent-on)] text-sm font-medium shadow-lg"
-                style={{ background: 'var(--accent-primary)' }}
+                className="s-btn-accent inline-flex items-center gap-2"
               >
-                <Plus size={15} />
+                <Plus size={13} />
                 Add Service
               </button>
             )}
diff --git a/app/frontend/src/features/workspace/canvas/inspector.tsx b/app/frontend/src/features/workspace/canvas/inspector.tsx
index b3c748c..18832a0 100644
--- a/app/frontend/src/features/workspace/canvas/inspector.tsx
+++ b/app/frontend/src/features/workspace/canvas/inspector.tsx
@@ -1,6 +1,7 @@
 import type { ServiceEntity } from '@/lib/api-client';
-import { serviceStatusClass } from '@/lib/api-client';
 import type { ServiceVariable } from '../auto-connections';
+import { GhostBtn, QuietBtn, SPill } from '@/shared/components/sentry';
+import { statusTone } from '@/shared/components/sentry-utils';
 import { ServiceIcon } from './ServiceIcon';
 import { serviceAccent } from './service-visuals';
 import { formatRelative } from '@/lib/time';
@@ -63,28 +64,11 @@ function statusLabel(status: string): string {
   }
 }
 
-function statusColor(status: string): string {
-  switch (status) {
-    case 'running':
-    case 'deployed':
-      return 'var(--success)';
-    case 'failed':
-      return 'var(--error)';
-    case 'building':
-    case 'deploying':
-    case 'pending':
-    case 'rolling_back':
-      return 'var(--warning)';
-    default:
-      return 'var(--text-tertiary)';
-  }
-}
-
 function Section({ title, children, action }: { title: string; children: React.ReactNode; action?: React.ReactNode }) {
   return (
     <div>
       <div className="flex items-center justify-between mb-1.5">
-        <p className="text-[10px] uppercase tracking-wider text-[var(--text-muted)]">{title}</p>
+        <p className="v-mono text-[10px] uppercase tracking-[0.14em] text-[var(--text-muted)]">{title}</p>
         {action}
       </div>
       {children}
@@ -163,48 +147,49 @@ export function ServiceInspector({
 
   return (
     <aside className="canvas-inspector absolute right-4 top-4 bottom-4 w-[312px] panel-glass flex flex-col overflow-hidden">
-      <div className="flex items-center gap-3 px-4 pt-4 pb-3 border-b border-[var(--border-subtle)]">
-        <div
-          className="w-9 h-9 rounded-[var(--radius-md)] flex items-center justify-center flex-shrink-0"
-          style={{ background: `${accent}1c`, color: accent }}
+      <div className="s-cardhead border-b border-[var(--border-subtle)]">
+        <span
+          className="s-ibox flex-shrink-0"
+          style={{ background: `${accent}14`, color: accent, borderColor: `${accent}33` }}
         >
-          <ServiceIcon service={service} size={16} />
-        </div>
+          <ServiceIcon service={service} size={15} />
+        </span>
         <div className="min-w-0 flex-1">
-          <h3 className="text-sm font-semibold text-[var(--text-primary)] truncate">{service.name}</h3>
-          <div className="flex items-center gap-1.5 text-[11px] text-[var(--text-tertiary)]">
-            <span className={`status-dot ${serviceStatusClass(service.status)}`} />
-            <span style={{ color: statusColor(service.status) }}>{statusLabel(service.status)}</span>
-            <span>· {service.type}</span>
-            {service.environment && service.environment !== 'production' && <span>· {service.environment}</span>}
+          <h3 className="text-[13px] font-semibold text-[var(--text-primary)] truncate leading-tight">{service.name}</h3>
+          <div className="flex items-center gap-1.5 mt-1">
+            <SPill tone={statusTone(service.status)}>{statusLabel(service.status)}</SPill>
+            <span className="v-mono text-[10px] text-[var(--text-tertiary)]">
+              {service.type}
+              {service.environment && service.environment !== 'production' ? ` · ${service.environment}` : ''}
+            </span>
           </div>
         </div>
         <button
           type="button"
           onClick={onClose}
-          className="w-7 h-7 rounded-md flex items-center justify-center text-[var(--text-tertiary)] hover:text-[var(--text-primary)] hover:bg-[var(--surface-muted)]"
+          className="s-icon-btn"
           title="Close (Esc)"
         >
-          <X size={14} />
+          <X size={12} />
         </button>
       </div>
 
       <div className="flex-1 overflow-y-auto px-4 py-3 space-y-4">
         {(publicUrl || service.port) && (
           <Section title="Address">
-            <div className="flex items-center gap-1.5 group">
+            <div className="s-inset flex items-center gap-1.5 px-2.5 py-2 group">
               <Globe size={11} className="text-[var(--text-tertiary)] flex-shrink-0" />
               {publicUrl ? (
                 <a
                   href={publicUrl}
                   target="_blank"
                   rel="noopener noreferrer"
-                  className="mono text-[11px] text-[var(--accent-primary)] hover:underline break-all"
+                  className="v-mono text-[11px] text-[var(--accent-primary)] hover:underline break-all"
                 >
                   {publicUrl.replace(/^https?:\/\//, '')}
                 </a>
               ) : (
-                <span className="mono text-[11px] text-[var(--text-secondary)]">
+                <span className="v-mono text-[11px] text-[var(--text-secondary)]">
                   {service.name}:{service.port}
                 </span>
               )}
@@ -218,7 +203,7 @@ export function ServiceInspector({
               </button>
             </div>
             {publicUrl && service.port ? (
-              <p className="mono text-[10.5px] text-[var(--text-tertiary)] mt-0.5 pl-4">
+              <p className="v-mono text-[10.5px] text-[var(--text-tertiary)] mt-1 pl-1">
                 {service.name}:{service.port}
               </p>
             ) : null}
@@ -266,13 +251,13 @@ export function ServiceInspector({
               {variables.slice(0, 6).map((variable) => (
                 <div
                   key={variable.key}
-                  className="flex items-center gap-2 px-2 py-1.5 rounded-[var(--radius-sm)] bg-[var(--surface-muted)]/50"
+                  className="s-inset !rounded-[6px] flex items-center gap-2 px-2 py-1.5"
                 >
                   <KeyRound size={9} className="text-[var(--text-tertiary)] flex-shrink-0" />
-                  <span className="mono text-[10px] text-[var(--text-primary)] truncate font-medium">
+                  <span className="v-mono text-[10px] text-[var(--text-primary)] truncate font-medium">
                     {variable.key}
                   </span>
-                  <span className="mono text-[10px] text-[var(--text-tertiary)] truncate ml-auto max-w-[130px]" title={variable.isSecret ? 'Secret' : variable.value}>
+                  <span className="v-mono text-[10px] text-[var(--text-tertiary)] truncate ml-auto max-w-[130px]" title={variable.isSecret ? 'Secret' : variable.value}>
                     {variable.isSecret ? '••••••••' : variable.value}
                   </span>
                 </div>
@@ -299,7 +284,7 @@ export function ServiceInspector({
               {visibleConfig.map(([label, value]) => (
                 <div key={label} className="flex items-baseline gap-2">
                   <dt className="text-[10px] text-[var(--text-muted)] w-[70px] flex-shrink-0">{label}</dt>
-                  <dd className="mono text-[10.5px] text-[var(--text-secondary)] truncate" title={value}>
+                  <dd className="v-mono text-[10.5px] text-[var(--text-secondary)] truncate" title={value}>
                     {value}
                   </dd>
                 </div>
@@ -307,7 +292,7 @@ export function ServiceInspector({
               {(service.replicas ?? 0) > 0 && (
                 <div className="flex items-baseline gap-2">
                   <dt className="text-[10px] text-[var(--text-muted)] w-[70px] flex-shrink-0">Replicas</dt>
-                  <dd className="mono text-[10.5px] text-[var(--text-secondary)]">{service.replicas}</dd>
+                  <dd className="v-mono text-[10.5px] text-[var(--text-secondary)]">{service.replicas}</dd>
                 </div>
               )}
             </dl>
@@ -318,7 +303,7 @@ export function ServiceInspector({
           {connections.length === 0 ? (
             <p className="text-[11px] text-[var(--text-muted)]">
               No inferred connections. Reference another service via{' '}
-              <span className="mono">{'{{variable}}'}</span> placeholders in env vars.
+              <span className="v-mono">{'{{variable}}'}</span> placeholders in env vars.
             </p>
           ) : (
             <div className="space-y-1.5">
@@ -327,13 +312,13 @@ export function ServiceInspector({
                   key={conn.id}
                   type="button"
                   onClick={() => onSelectPeer(conn.peerId)}
-                  className="w-full text-left px-2.5 py-2 rounded-[var(--radius-sm)] border border-[var(--border-subtle)] bg-[var(--surface-muted)]/40 hover:bg-[var(--surface-muted)] transition-colors"
+                  className="s-inset !rounded-[6px] w-full text-left px-2.5 py-2 hover:border-[var(--border-default)] transition-colors"
                 >
                   <div className="flex items-center gap-1.5 text-[11px] text-[var(--text-primary)]">
                     <Link2 size={10} className="text-[var(--accent-primary)] flex-shrink-0" />
                     <span className="truncate font-medium">{conn.outbound ? `→ ${conn.peer}` : `← ${conn.peer}`}</span>
                   </div>
-                  <p className="mono text-[9.5px] text-[var(--text-tertiary)] truncate mt-0.5 pl-4">
+                  <p className="v-mono text-[9.5px] text-[var(--text-tertiary)] truncate mt-0.5 pl-4">
                     {conn.reasons.join(' · ')}
                   </p>
                 </button>
@@ -350,65 +335,58 @@ export function ServiceInspector({
       </div>
 
       <div className="border-t border-[var(--border-subtle)] px-4 py-3 space-y-2">
-        <button
-          type="button"
+        <GhostBtn
           onClick={() => onOpenService(service.id)}
-          className="w-full flex items-center justify-center gap-2 h-9 rounded-[var(--radius-md)] text-[var(--accent-on)] text-[13px] font-medium"
-          style={{ background: 'var(--accent-primary)' }}
+          className="w-full justify-center !h-9"
         >
           <ArrowUpRight size={14} />
           Open service
-        </button>
+        </GhostBtn>
         <div className="grid grid-cols-3 gap-1.5">
-          <button
-            type="button"
+          <QuietBtn
             disabled={actions.pending || readOnly}
             onClick={actions.deploy}
-            className="flex items-center justify-center gap-1 h-8 rounded-[var(--radius-sm)] border border-[var(--border-subtle)] text-[11px] font-medium text-[var(--text-secondary)] hover:text-[var(--text-primary)] hover:border-[var(--border-default)] transition-colors disabled:opacity-40"
+            className="justify-center"
           >
             {actions.deployPending ? <Loader2 size={11} className="animate-spin" /> : <Rocket size={11} />}
             Deploy
-          </button>
+          </QuietBtn>
           {service.status !== 'running' ? (
-            <button
-              type="button"
+            <QuietBtn
               disabled={actions.pending || readOnly}
               onClick={actions.start}
-              className="flex items-center justify-center gap-1 h-8 rounded-[var(--radius-sm)] border border-[var(--border-subtle)] text-[11px] font-medium text-[var(--text-secondary)] hover:text-[var(--text-primary)] hover:border-[var(--border-default)] transition-colors disabled:opacity-40"
+              className="justify-center"
             >
               <Play size={11} />
               Start
-            </button>
+            </QuietBtn>
           ) : (
-            <button
-              type="button"
+            <QuietBtn
               disabled={actions.pending || readOnly}
               onClick={actions.restart}
-              className="flex items-center justify-center gap-1 h-8 rounded-[var(--radius-sm)] border border-[var(--border-subtle)] text-[11px] font-medium text-[var(--text-secondary)] hover:text-[var(--text-primary)] hover:border-[var(--border-default)] transition-colors disabled:opacity-40"
+              className="justify-center"
             >
               {actions.restartPending ? <Loader2 size={11} className="animate-spin" /> : <Play size={11} />}
               Restart
-            </button>
+            </QuietBtn>
           )}
-          <button
-            type="button"
+          <QuietBtn
             disabled={actions.pending || readOnly || service.status !== 'running'}
             onClick={actions.stop}
-            className="flex items-center justify-center gap-1 h-8 rounded-[var(--radius-sm)] border border-[var(--border-subtle)] text-[11px] font-medium text-[var(--text-secondary)] hover:text-[var(--text-primary)] hover:border-[var(--border-default)] transition-colors disabled:opacity-40"
+            className="justify-center"
           >
             <Square size={11} />
             Stop
-          </button>
+          </QuietBtn>
         </div>
-        <button
-          type="button"
+        <QuietBtn
           disabled={actions.pending || readOnly}
           onClick={actions.remove}
-          className="w-full flex items-center justify-center gap-1.5 h-8 rounded-[var(--radius-sm)] text-[11px] font-medium text-[var(--error)] hover:bg-[var(--error-soft)] transition-colors disabled:opacity-40"
+          className="w-full justify-center !text-[var(--error)] hover:!border-[var(--error)]/50"
         >
           <Trash2 size={11} />
           Delete service
-        </button>
+        </QuietBtn>
       </div>
     </aside>
   );
diff --git a/app/frontend/src/features/workspace/canvas/nodes.tsx b/app/frontend/src/features/workspace/canvas/nodes.tsx
index f6b85da..403985e 100644
--- a/app/frontend/src/features/workspace/canvas/nodes.tsx
+++ b/app/frontend/src/features/workspace/canvas/nodes.tsx
@@ -1,10 +1,11 @@
 import { Handle, Position, type Node, type NodeProps } from '@xyflow/react';
 import type { ServiceEntity } from '@/lib/api-client';
-import { serviceStatusClass } from '@/lib/api-client';
 import { Box, ExternalLink, Copy, Layers, Loader2 } from 'lucide-react';
 import { useState } from 'react';
 import { serviceIcon, serviceAccent } from './service-visuals';
 import { ServiceIcon } from './ServiceIcon';
+import { SPill } from '@/shared/components/sentry';
+import { statusTone } from '@/shared/components/sentry-utils';
 
 export type ServiceNodeData = {
   service: ServiceEntity;
@@ -65,10 +66,10 @@ export function ServiceNode({ data }: NodeProps<ServiceNodeType>) {
 
   return (
     <div
-      className={`w-full rounded-[var(--radius-lg)] border transition-[border-color,box-shadow,transform] duration-150 group relative overflow-hidden ${
+      className={`w-full rounded-[10px] border transition-[border-color,box-shadow] duration-150 group relative overflow-hidden ${
         selected
-          ? 'border-[var(--accent-primary)] bg-[var(--accent-primary-soft)] shadow-[0_0_0_1px_var(--accent-primary),0_12px_36px_rgba(0,0,0,0.5)]'
-          : 'border-[var(--border-subtle)] bg-[var(--surface-card)] hover:border-[var(--border-default)] hover:shadow-[0_12px_32px_rgba(0,0,0,0.45)] hover:-translate-y-px'
+          ? 'border-[var(--accent-primary)] bg-[var(--surface-card)] shadow-[0_0_0_1px_var(--accent-primary),0_12px_36px_rgba(0,0,0,0.5)]'
+          : 'border-[var(--border-subtle)] bg-[var(--surface-card)] hover:border-[var(--border-default)]'
       }`}
     >
       <div
@@ -86,39 +87,39 @@ export function ServiceNode({ data }: NodeProps<ServiceNodeType>) {
         style={{ background: stateColor }}
       />
 
-      <div className="relative px-3.5 pt-3.5 pb-3">
-        <div className="flex items-center gap-3 mb-2.5">
+      <div className="relative">
+        <div className="flex items-center gap-2.5 px-3.5 pt-3 pb-2.5">
           <div
-            className="w-9 h-9 rounded-[var(--radius-md)] flex items-center justify-center flex-shrink-0 transition-all duration-200"
+            className="w-8 h-8 rounded-[7px] border border-[var(--border-subtle)] flex items-center justify-center flex-shrink-0 transition-all duration-200"
             style={{
-              background: selected && !brand ? typeColor : `${typeColor}1c`,
+              background: selected && !brand ? typeColor : `${typeColor}14`,
               color: selected && !brand ? 'var(--bg-void)' : typeColor,
             }}
           >
             {isTransient ? (
-              <Loader2 size={16} className="animate-spin" />
+              <Loader2 size={14} className="animate-spin" />
             ) : (
-              <ServiceIcon service={service} size={17} />
+              <ServiceIcon service={service} size={15} />
             )}
           </div>
           <div className="min-w-0 flex-1">
-            <h4 className="font-semibold text-[13px] leading-tight text-[var(--text-primary)] truncate tracking-tight">
+            <h4 className="font-semibold text-[12.5px] leading-tight text-[var(--text-primary)] truncate tracking-tight">
               {service.name}
             </h4>
-            <p className="text-[10.5px] text-[var(--text-tertiary)] truncate mt-0.5">
+            <p className="v-mono text-[10px] text-[var(--text-tertiary)] truncate mt-0.5">
               {service.type}
               {service.environment && service.environment !== 'production' ? ` · ${service.environment}` : ''}
             </p>
           </div>
           {replicas > 1 && (
-            <span className="flex items-center gap-1 px-1.5 py-0.5 rounded bg-[var(--surface-muted)] text-[10px] font-semibold text-[var(--text-secondary)]">
+            <span className="s-chip">
               <Layers size={9} />
               {replicas}
             </span>
           )}
         </div>
 
-        <div className="flex items-center gap-2 mb-2.5 px-2.5 py-1.5 rounded-[var(--radius-sm)] bg-[var(--surface-muted)]/60 border border-[var(--border-subtle)]/60 group/addr">
+        <div className="mx-3 mb-2.5 s-inset !rounded-[6px] flex items-center gap-2 px-2.5 py-1.5 group/addr">
           <ExternalLink size={10} className="text-[var(--text-tertiary)] flex-shrink-0" />
           {publicUrl ? (
             <a
@@ -126,12 +127,12 @@ export function ServiceNode({ data }: NodeProps<ServiceNodeType>) {
               target="_blank"
               rel="noopener noreferrer"
               onClick={(e) => e.stopPropagation()}
-              className="text-[10.5px] text-[var(--accent-primary)] truncate mono hover:underline"
+              className="v-mono text-[10.5px] text-[var(--accent-primary)] truncate hover:underline"
             >
               {publicUrl.replace(/^https?:\/\//, '')}
             </a>
           ) : (
-            <span className="text-[10.5px] text-[var(--text-secondary)] truncate mono" title="Internal network address">
+            <span className="v-mono text-[10.5px] text-[var(--text-secondary)] truncate" title="Internal network address">
               {internalAddr}
             </span>
           )}
@@ -148,15 +149,10 @@ export function ServiceNode({ data }: NodeProps<ServiceNodeType>) {
           </button>
         </div>
 
-        <div className="flex items-center justify-between">
-          <div className="flex items-center gap-1.5">
-            <span className={`status-dot ${serviceStatusClass(service.status)}`} />
-            <span className="text-[10px] font-semibold tracking-[0.08em] uppercase" style={{ color: stateColor }}>
-              {statusLabel(service.status)}
-            </span>
-          </div>
+        <div className="flex items-center justify-between px-3.5 py-2 border-t border-[var(--border-subtle)]">
+          <SPill tone={statusTone(service.status)}>{statusLabel(service.status)}</SPill>
           {service.image && (
-            <span className="text-[9.5px] text-[var(--text-muted)] truncate mono max-w-[110px]" title={service.image}>
+            <span className="v-mono text-[9.5px] text-[var(--text-muted)] truncate max-w-[110px]" title={service.image}>
               {service.image}
             </span>
           )}
@@ -191,25 +187,25 @@ export function GroupNode({ id, data }: NodeProps<GroupNodeType>) {
 
   return (
     <div
-      className="h-full w-full rounded-[var(--radius-xl)] border-2 border-dashed transition-all duration-200 relative"
+      className="h-full w-full rounded-[12px] border border-dashed transition-all duration-200 relative"
       style={{
         borderColor: isHovered ? 'var(--border-strong)' : 'var(--border-default)',
-        background: isHovered ? 'var(--accent-primary-soft)' : 'rgba(255,255,255,0.02)',
+        background: isHovered ? 'var(--accent-primary-soft)' : 'var(--tint-03)',
       }}
       onMouseEnter={() => setIsHovered(true)}
       onMouseLeave={() => setIsHovered(false)}
     >
       <div className="relative p-4">
         <div className="flex items-center gap-2.5">
-          <div
-            className="w-7 h-7 rounded-lg flex items-center justify-center transition-colors duration-200"
+          <span
+            className="s-ibox !h-7 !w-7 transition-colors duration-200"
             style={{
-              background: isHovered ? 'var(--accent-primary-soft)' : 'var(--surface-card)',
-              color: isHovered ? 'var(--accent-primary)' : 'var(--text-tertiary)',
+              background: isHovered ? 'var(--accent-primary-soft)' : undefined,
+              color: isHovered ? 'var(--accent-primary)' : undefined,
             }}
           >
-            <Box size={14} />
-          </div>
+            <Box />
+          </span>
           {editing ? (
             <input
               autoFocus
@@ -227,7 +223,7 @@ export function GroupNode({ id, data }: NodeProps<GroupNodeType>) {
             />
           ) : (
             <h3
-              className="text-sm font-semibold text-[var(--text-primary)] tracking-tight"
+              className="font-headline text-sm font-semibold text-[var(--text-primary)] tracking-tight"
               onDoubleClick={(e) => {
                 e.stopPropagation();
                 setDraft(data.title);
@@ -241,7 +237,7 @@ export function GroupNode({ id, data }: NodeProps<GroupNodeType>) {
         </div>
 
         <p
-          className="text-[10px] text-[var(--text-tertiary)] mt-2 transition-opacity duration-200"
+          className="v-mono text-[10px] uppercase tracking-[0.12em] text-[var(--text-tertiary)] mt-2 transition-opacity duration-200"
           style={{ opacity: isHovered ? 1 : 0 }}
         >
           Drag services here to group them
diff --git a/app/frontend/src/features/workspace/canvas/service-visuals.tsx b/app/frontend/src/features/workspace/canvas/service-visuals.tsx
index 0fe768d..f7105dd 100644
--- a/app/frontend/src/features/workspace/canvas/service-visuals.tsx
+++ b/app/frontend/src/features/workspace/canvas/service-visuals.tsx
@@ -18,15 +18,15 @@ export function serviceTypeIcon(type: string, size = 18) {
 export function serviceTypeColor(type: string): string {
   switch (type) {
     case 'web':
-      return '#7ab8ff';
+      return 'var(--info)';
     case 'database':
-      return '#b4e34a';
+      return '#38bdf8';
     case 'worker':
-      return '#f2c94c';
+      return 'var(--warning)';
     case 'cron':
-      return '#f2994a';
+      return 'var(--accent-secondary)';
     default:
-      return '#9295a4';
+      return 'var(--text-tertiary)';
   }
 }
 
diff --git a/app/frontend/src/features/workspace/components/MetricsDashboard.tsx b/app/frontend/src/features/workspace/components/MetricsDashboard.tsx
index 8deaa74..6e66931 100644
--- a/app/frontend/src/features/workspace/components/MetricsDashboard.tsx
+++ b/app/frontend/src/features/workspace/components/MetricsDashboard.tsx
@@ -10,17 +10,26 @@ interface MetricsDashboardProps {
   isDemoMode?: boolean;
 }
 
-const cardStyle: React.CSSProperties = {
-  background: 'var(--surface-card, rgba(255,255,255,0.03))',
-  border: '1px solid var(--border-subtle, rgba(255,255,255,0.09))',
-  borderRadius: '14px',
-  padding: '18px 20px',
-};
-
 function healthLabel(pct: number): { text: string; color: string } {
-  if (pct < 50) return { text: 'Good', color: 'var(--success, #5ee6a0)' };
-  if (pct < 80) return { text: 'Average', color: 'var(--warning, #f2c94c)' };
-  return { text: 'High', color: 'var(--error, #ff6b6b)' };
+  if (pct < 50) return { text: 'Good', color: 'var(--success)' };
+  if (pct < 80) return { text: 'Average', color: 'var(--warning)' };
+  return { text: 'High', color: 'var(--error)' };
+}
+
+function Tile({ icon: Icon, label, children }: {
+  icon: React.ElementType;
+  label: string;
+  children: React.ReactNode;
+}) {
+  return (
+    <div className="s-card !p-0 overflow-hidden">
+      <div className="s-cardhead">
+        <span className="s-ibox"><Icon /></span>
+        <span className="s-t">{label}</span>
+      </div>
+      <div className="px-4 pb-4 pt-3">{children}</div>
+    </div>
+  );
 }
 
 export function MetricsDashboard({ services, isDemoMode = false }: MetricsDashboardProps) {
@@ -79,8 +88,8 @@ export function MetricsDashboard({ services, isDemoMode = false }: MetricsDashbo
   return (
     <div>
       <div className="flex items-center justify-between mb-4">
-        <span className="text-[15px] font-bold text-[var(--text-primary)]">Metrics</span>
-        <span className="text-xs text-[var(--text-muted)]">
+        <span className="v-mono text-[10.5px] uppercase tracking-[0.1em] text-[var(--text-tertiary)]">Metrics</span>
+        <span className="v-mono text-[10.5px] text-[var(--text-muted)]">
           {isDemoMode
             ? 'sample data'
             : reporting > 0
@@ -91,112 +100,96 @@ export function MetricsDashboard({ services, isDemoMode = false }: MetricsDashbo
 
       <div className="grid grid-cols-1 gap-3 sm:grid-cols-2 xl:grid-cols-4">
         {/* CPU */}
-        <div style={cardStyle}>
-          <div className="flex items-center gap-2.5 mb-3">
-            <span className="card-icon"><Cpu size={16} /></span>
-            <span className="text-sm font-semibold text-[var(--text-primary)]">CPU Usage</span>
+        <Tile icon={Cpu} label="CPU Usage">
+          <div className="font-headline text-[30px] font-bold leading-none tracking-[-0.02em] text-[var(--text-primary)]">
+            {avgCpu.toFixed(1)}<span className="text-[13px] font-medium text-[var(--text-tertiary)]">%</span>
           </div>
-          <div className="text-4xl font-black tracking-tight text-[var(--text-primary)]">
-            {avgCpu.toFixed(1)}%
+          <div className="mt-1.5 v-mono text-[10.5px] text-[var(--text-tertiary)]">
+            <span style={{ color: cpuHealth.color }}>{cpuHealth.text}</span>
+            {' '}· avg across running services
           </div>
-          <div className="mt-1 text-xs text-[var(--text-tertiary)]">
-            <span style={{ color: cpuHealth.color, fontWeight: 700 }}>{cpuHealth.text}</span>
-            {' '}avg across running services
-          </div>
-          <div style={{ height: 64, marginTop: 12 }}>
+          <div style={{ height: 56, marginTop: 12 }}>
             {cpuHistory.length > 1 ? (
-              <LineMetricChart data={cpuHistory} color="var(--accent-primary)" fillOpacity={0.15} showArea height={64} />
+              <LineMetricChart data={cpuHistory} color="var(--accent-primary)" fillOpacity={0.15} showArea height={56} />
             ) : (
               <div className="h-full rounded bg-[var(--surface-muted)] opacity-40" />
             )}
           </div>
-        </div>
+        </Tile>
 
         {/* Memory */}
-        <div style={cardStyle}>
-          <div className="flex items-center gap-2.5 mb-3">
-            <span className="card-icon"><HardDrive size={16} /></span>
-            <span className="text-sm font-semibold text-[var(--text-primary)]">Memory</span>
+        <Tile icon={HardDrive} label="Memory">
+          <div className="font-headline text-[30px] font-bold leading-none tracking-[-0.02em] text-[var(--text-primary)]">
+            {memPct.toFixed(0)}<span className="text-[13px] font-medium text-[var(--text-tertiary)]">%</span>
           </div>
-          <div className="text-4xl font-black tracking-tight text-[var(--text-primary)]">
-            {memPct.toFixed(0)}%
-          </div>
-          <div className="mt-1 text-xs text-[var(--text-tertiary)]">
-            <span style={{ color: memHealth.color, fontWeight: 700 }}>{memHealth.text}</span>
-            {' '}{formatBytes(memUsed)} used
+          <div className="mt-1.5 v-mono text-[10.5px] text-[var(--text-tertiary)]">
+            <span style={{ color: memHealth.color }}>{memHealth.text}</span>
+            {' '}· {formatBytes(memUsed)} used
           </div>
           <div className="mt-2 flex justify-center">
-            <DonutChart percentage={memPct} size={110} thickness={12} />
+            <DonutChart percentage={memPct} size={100} thickness={11} />
           </div>
-          <div className="mt-1 text-center text-xs text-[var(--text-tertiary)] mono">
+          <div className="mt-1 text-center v-mono text-[10.5px] text-[var(--text-tertiary)]">
             {formatBytes(memUsed)} / {memLimit > 0 ? formatBytes(memLimit) : '∞'}
           </div>
-        </div>
+        </Tile>
 
         {/* Network */}
-        <div style={cardStyle}>
-          <div className="flex items-center gap-2.5 mb-3">
-            <span className="card-icon"><ArrowDownUp size={16} /></span>
-            <span className="text-sm font-semibold text-[var(--text-primary)]">Network</span>
-          </div>
-          <div className="text-4xl font-black tracking-tight text-[var(--text-primary)]">
+        <Tile icon={ArrowDownUp} label="Network">
+          <div className="font-headline text-[30px] font-bold leading-none tracking-[-0.02em] text-[var(--text-primary)]">
             {formatBytes(netRx)}
           </div>
-          <div className="mt-1 text-xs text-[var(--text-tertiary)]">
-            <span style={{ color: 'var(--accent-primary)', fontWeight: 700 }}>RX</span>
+          <div className="mt-1.5 v-mono text-[10.5px] text-[var(--text-tertiary)]">
+            <span className="text-[var(--accent-primary)]">RX</span>
             {' '}total · TX {formatBytes(netTx)}
           </div>
-          <div style={{ height: 64, marginTop: 12 }}>
+          <div style={{ height: 56, marginTop: 12 }}>
             {netHistory.rx.length > 1 ? (
-              <LineMetricChart data={netHistory.rx} color="#7ab8ff" fillOpacity={0.12} showArea height={64} />
+              <LineMetricChart data={netHistory.rx} color="var(--accent-primary)" fillOpacity={0.12} showArea height={56} />
             ) : (
               <div className="h-full rounded bg-[var(--surface-muted)] opacity-40" />
             )}
           </div>
-          <div className="mt-2 text-[11px] text-[var(--text-muted)] mono">
+          <div className="mt-2 v-mono text-[10.5px] text-[var(--text-muted)]">
             {netHistory.rx.length > 0
               ? `↓ ${formatBytes(netHistory.rx[netHistory.rx.length - 1])}/s · ↑ ${formatBytes(netHistory.tx[netHistory.tx.length - 1])}/s`
               : 'rate accumulating…'}
           </div>
-        </div>
+        </Tile>
 
         {/* Instances */}
-        <div style={cardStyle}>
-          <div className="flex items-center gap-2.5 mb-3">
-            <span className="card-icon"><Boxes size={16} /></span>
-            <span className="text-sm font-semibold text-[var(--text-primary)]">Instances</span>
-          </div>
-          <div className="text-4xl font-black tracking-tight text-[var(--text-primary)]">
+        <Tile icon={Boxes} label="Instances">
+          <div className="font-headline text-[30px] font-bold leading-none tracking-[-0.02em] text-[var(--text-primary)]">
             {isDemoMode ? liveServices.length : instanceCount}
           </div>
-          <div className="mt-1 text-xs text-[var(--text-tertiary)]">
-            <span style={{ color: 'var(--success, #5ee6a0)', fontWeight: 700 }}>Running</span>
-            {' '}containers across {liveServices.length} service{liveServices.length === 1 ? '' : 's'}
+          <div className="mt-1.5 v-mono text-[10.5px] text-[var(--text-tertiary)]">
+            <span className="text-[var(--success)]">Running</span>
+            {' '}across {liveServices.length} service{liveServices.length === 1 ? '' : 's'}
           </div>
           <ul className="mt-3 space-y-1.5">
             {liveServices.slice(0, 4).map((service, i) => {
               const m = samples.find((s) => s.service_id === service.id);
               return (
-                <li key={service.id} className="flex items-center justify-between text-xs">
+                <li key={service.id} className="flex items-center justify-between text-[11.5px]">
                   <span className="truncate text-[var(--text-secondary)]">
-                    <span className="mr-1.5 inline-block h-1.5 w-1.5 rounded-full bg-[var(--success,#5ee6a0)] align-middle" />
+                    <span className="mr-1.5 inline-block h-1.5 w-1.5 rounded-full bg-[var(--success)] align-middle" />
                     {service.name}
                   </span>
-                  <span className="mono text-[var(--text-muted)]">
+                  <span className="v-mono text-[10.5px] text-[var(--text-muted)]">
                     {m ? `${m.cpu_percent.toFixed(1)}%` : i < 3 ? '—' : ''}
                   </span>
                 </li>
               );
             })}
             {liveServices.length > 4 && (
-              <li className="text-[11px] text-[var(--text-muted)]">+{liveServices.length - 4} more</li>
+              <li className="v-mono text-[10.5px] text-[var(--text-muted)]">+{liveServices.length - 4} more</li>
             )}
           </ul>
-        </div>
+        </Tile>
       </div>
 
       {noData && (
-        <p className="mt-3 text-xs text-[var(--text-muted)]">
+        <p className="mt-3 v-mono text-[11px] text-[var(--text-muted)]">
           Metrics collector is not reporting yet — check that the node agent is online.
         </p>
       )}
diff --git a/app/frontend/src/features/workspace/components/SharedVariablesSection.tsx b/app/frontend/src/features/workspace/components/SharedVariablesSection.tsx
index ced0c31..b60bebe 100644
--- a/app/frontend/src/features/workspace/components/SharedVariablesSection.tsx
+++ b/app/frontend/src/features/workspace/components/SharedVariablesSection.tsx
@@ -2,6 +2,7 @@ import { useState } from 'react';
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
 import { listProjectVariables, updateProjectVariables } from '@/lib/api-client';
 import { Loader2, Plus, Save, Trash2, KeyRound } from 'lucide-react';
+import { QuietBtn } from '@/shared/components/sentry';
 
 type Row = { key: string; value: string; isSecret: boolean };
 
@@ -42,26 +43,23 @@ export function SharedVariablesSection({ projectId }: { projectId: string }) {
     <div className="mt-6 pt-6 border-t border-[var(--border-subtle)]">
       <div className="flex items-center justify-between mb-3">
         <div>
-          <h3 className="text-sm font-medium text-[var(--text-secondary)]">Shared Variables</h3>
+          <h3 className="s-t">Shared Variables</h3>
           <p className="mt-1 text-xs text-[var(--text-muted)]">
             Reference from any service as{' '}
-            <code className="mono text-[var(--accent-primary)]">{'${{shared.KEY}}'}</code>. Applied on next
+            <code className="v-mono text-[var(--accent-primary)]">{'${{shared.KEY}}'}</code>. Applied on next
             deploy/redeploy — not live-updated.
           </p>
         </div>
         <div className="flex items-center gap-2">
-          <button
-            onClick={() => setDrafts([...rows, { key: '', value: '', isSecret: false }])}
-            className="flex items-center gap-2 px-3 py-1.5 rounded-[var(--radius-md)] border border-[var(--border-subtle)] text-xs font-medium text-[var(--text-secondary)] hover:border-[var(--border-default)] transition-colors"
-          >
+          <QuietBtn onClick={() => setDrafts([...rows, { key: '', value: '', isSecret: false }])}>
             <Plus size={12} />
             Add
-          </button>
+          </QuietBtn>
           <button
             onClick={() => saveMutation.mutate(rows)}
             disabled={!dirty || saveMutation.isPending}
-            className="flex items-center gap-2 px-3 py-1.5 rounded-[var(--radius-md)] text-xs font-medium text-[var(--accent-on)] disabled:opacity-50 transition-all"
-            style={{ background: 'var(--accent-primary)' }}
+            className="s-btn-accent disabled:opacity-50"
+            
           >
             {saveMutation.isPending ? <Loader2 size={12} className="animate-spin" /> : <Save size={12} />}
             Save
@@ -83,7 +81,7 @@ export function SharedVariablesSection({ projectId }: { projectId: string }) {
                 value={row.key}
                 onChange={(e) => updateRow(i, { key: e.target.value })}
                 placeholder="KEY"
-                className="h-9 px-3 rounded-[var(--radius-md)] border border-[var(--border-subtle)] bg-[var(--surface-muted)] mono text-xs text-[var(--text-primary)] placeholder:text-[var(--text-muted)] focus:border-[var(--accent-primary)] focus:ring-1 focus:ring-[var(--accent-primary)] transition-all"
+                className="h-9 px-3 rounded-[var(--radius-md)] border border-[var(--border-subtle)] bg-[var(--surface-muted)] v-mono text-xs text-[var(--text-primary)] placeholder:text-[var(--text-muted)] focus:border-[var(--accent-primary)] focus:ring-1 focus:ring-[var(--accent-primary)] transition-all"
               />
               <input
                 value={row.value}
@@ -91,13 +89,13 @@ export function SharedVariablesSection({ projectId }: { projectId: string }) {
                 type={row.isSecret ? 'password' : 'text'}
                 placeholder="value"
                 autoComplete="off"
-                className="h-9 px-3 rounded-[var(--radius-md)] border border-[var(--border-subtle)] bg-[var(--surface-muted)] mono text-xs text-[var(--text-primary)] placeholder:text-[var(--text-muted)] focus:border-[var(--accent-primary)] focus:ring-1 focus:ring-[var(--accent-primary)] transition-all"
+                className="h-9 px-3 rounded-[var(--radius-md)] border border-[var(--border-subtle)] bg-[var(--surface-muted)] v-mono text-xs text-[var(--text-primary)] placeholder:text-[var(--text-muted)] focus:border-[var(--accent-primary)] focus:ring-1 focus:ring-[var(--accent-primary)] transition-all"
               />
               <button
                 type="button"
                 title={row.isSecret ? 'Secret — masked on save' : 'Mark as secret'}
                 onClick={() => updateRow(i, { isSecret: !row.isSecret })}
-                className={`w-9 h-9 rounded-[var(--radius-md)] border flex items-center justify-center transition-colors ${
+                className={`w-9 h-9 rounded-lg border flex items-center justify-center transition-colors ${
                   row.isSecret
                     ? 'border-[var(--accent-primary)] bg-[var(--accent-primary-soft)] text-[var(--accent-primary)]'
                     : 'border-[var(--border-subtle)] text-[var(--text-muted)] hover:border-[var(--border-default)]'
@@ -108,7 +106,7 @@ export function SharedVariablesSection({ projectId }: { projectId: string }) {
               <button
                 type="button"
                 onClick={() => setDrafts(rows.filter((_, idx) => idx !== i))}
-                className="w-9 h-9 rounded-[var(--radius-md)] border border-[var(--border-subtle)] flex items-center justify-center text-[var(--text-muted)] hover:border-[var(--error)] hover:text-[var(--error)] transition-colors"
+                className="w-9 h-9 rounded-lg border border-[var(--border-subtle)] flex items-center justify-center text-[var(--text-muted)] hover:border-[var(--error)] hover:text-[var(--error)] transition-colors"
               >
                 <Trash2 size={12} />
               </button>
diff --git a/app/frontend/src/features/workspace/pages/ProjectWorkspacePage.tsx b/app/frontend/src/features/workspace/pages/ProjectWorkspacePage.tsx
index dea68b1..1482b1d 100644
--- a/app/frontend/src/features/workspace/pages/ProjectWorkspacePage.tsx
+++ b/app/frontend/src/features/workspace/pages/ProjectWorkspacePage.tsx
@@ -50,7 +50,9 @@ import {
   GitBranch,
   Container,
   FileUp,
+  RefreshCw,
 } from 'lucide-react';
+import { GhostBtn, QuietBtn } from '@/shared/components/sentry';
 
 type WorkspaceView = 'canvas' | 'observability' | 'logs' | 'activity' | 'settings';
 
@@ -146,12 +148,10 @@ function ServiceCreateDialog(props: {
   return (
     <div className="fixed inset-0 z-50 flex items-center justify-center p-4">
       <div className="absolute inset-0 bg-[var(--bg-void)]/80 backdrop-blur-sm" onClick={props.onClose} />
-      <div className="relative w-full max-w-lg panel p-6">
-        <div className="flex items-center gap-3 mb-1">
-          <div className="w-10 h-10 rounded-[var(--radius-md)] bg-[var(--accent-primary-soft)] flex items-center justify-center">
-            <Plus size={20} className="text-[var(--accent-primary)]" />
-          </div>
-          <h3 className="text-xl font-semibold text-[var(--text-primary)]">Add Service</h3>
+      <div className="relative w-full max-w-lg s-card !p-6">
+        <div className="flex items-center gap-2.5 mb-1">
+          <span className="s-ibox !w-9 !h-9"><Plus /></span>
+          <h3 className="font-headline text-lg font-semibold text-[var(--text-primary)]">Add Service</h3>
         </div>
         <p className="text-sm text-[var(--text-secondary)]">
           Deploy a new service to this project. Configure runtime settings after creation.
@@ -202,7 +202,7 @@ function ServiceCreateDialog(props: {
           </div>
 
           {isDatabase ? (
-            <div className="space-y-3 p-3 rounded-[var(--radius-md)] border border-[var(--border-subtle)] bg-[var(--surface-muted)]/50">
+            <div className="s-inset space-y-3">
               <div className="grid grid-cols-2 gap-3">
                 <div>
                   <label className="block text-xs font-medium uppercase tracking-wider text-[var(--text-tertiary)] mb-2">
@@ -287,12 +287,12 @@ function ServiceCreateDialog(props: {
               <input
                 value={form.image ?? ''}
                 onChange={(e) => setForm((p) => ({ ...p, image: e.target.value }))}
-                className="w-full h-11 px-4 rounded-[var(--radius-md)] border border-[var(--border-subtle)] bg-[var(--surface-muted)] text-[var(--text-primary)] placeholder:text-[var(--text-muted)] focus:border-[var(--accent-primary)] focus:ring-1 focus:ring-[var(--accent-primary)] transition-all mono text-sm"
+                className="w-full h-11 px-4 rounded-[var(--radius-md)] border border-[var(--border-subtle)] bg-[var(--surface-muted)] text-[var(--text-primary)] placeholder:text-[var(--text-muted)] focus:border-[var(--accent-primary)] focus:ring-1 focus:ring-[var(--accent-primary)] transition-all v-mono text-sm"
                 placeholder="ghcr.io/org/app:latest"
               />
             </div>
           ) : (
-            <div className="space-y-3 p-3 rounded-[var(--radius-md)] border border-[var(--border-subtle)] bg-[var(--surface-muted)]/50">
+            <div className="s-inset space-y-3">
               <div>
                 <label className="block text-xs font-medium uppercase tracking-wider text-[var(--text-tertiary)] mb-2">
                   Provider
@@ -326,7 +326,7 @@ function ServiceCreateDialog(props: {
                   <input
                     value={repoSearch}
                     onChange={(e) => setRepoSearch(e.target.value)}
-                    className="w-full h-9 px-3 rounded-[var(--radius-sm)] border border-[var(--border-subtle)] bg-[var(--surface-muted)] text-sm mono mb-2"
+                    className="w-full h-9 px-3 rounded-[var(--radius-sm)] border border-[var(--border-subtle)] bg-[var(--surface-muted)] text-sm v-mono mb-2"
                     placeholder="Search repositories..."
                   />
                   {repositoriesQuery.isLoading ? (
@@ -357,7 +357,7 @@ function ServiceCreateDialog(props: {
                               : 'text-[var(--text-secondary)] hover:bg-[var(--surface-card-hover)]'
                           }`}
                         >
-                          <span className="mono text-xs truncate">{repo.full_name}</span>
+                          <span className="v-mono text-xs truncate">{repo.full_name}</span>
                           <span className="text-[10px] text-[var(--text-muted)] ml-2 shrink-0">{repo.default_branch}</span>
                         </button>
                       ))}
@@ -380,7 +380,7 @@ function ServiceCreateDialog(props: {
                       <select
                         value={form.git_branch ?? ''}
                         onChange={(e) => setForm((p) => ({ ...p, git_branch: e.target.value }))}
-                        className="w-full h-10 px-3 rounded-[var(--radius-md)] border border-[var(--border-subtle)] bg-[var(--surface-muted)] text-sm mono"
+                        className="w-full h-10 px-3 rounded-[var(--radius-md)] border border-[var(--border-subtle)] bg-[var(--surface-muted)] text-sm v-mono"
                       >
                         <option value="">Select branch</option>
                         {branches.map((branch) => (
@@ -391,7 +391,7 @@ function ServiceCreateDialog(props: {
                       <input
                         value={form.git_branch ?? ''}
                         onChange={(e) => setForm((p) => ({ ...p, git_branch: e.target.value }))}
-                        className="w-full h-10 px-3 rounded-[var(--radius-md)] border border-[var(--border-subtle)] bg-[var(--surface-muted)] text-sm mono"
+                        className="w-full h-10 px-3 rounded-[var(--radius-md)] border border-[var(--border-subtle)] bg-[var(--surface-muted)] text-sm v-mono"
                         placeholder={selectedRepo?.default_branch ?? 'main'}
                       />
                     )}
@@ -403,7 +403,7 @@ function ServiceCreateDialog(props: {
                     <input
                       value={form.build_path ?? ''}
                       onChange={(e) => setForm((p) => ({ ...p, build_path: e.target.value }))}
-                      className="w-full h-10 px-3 rounded-[var(--radius-md)] border border-[var(--border-subtle)] bg-[var(--surface-muted)] text-sm mono"
+                      className="w-full h-10 px-3 rounded-[var(--radius-md)] border border-[var(--border-subtle)] bg-[var(--surface-muted)] text-sm v-mono"
                       placeholder="/ (repo root)"
                     />
                   </div>
@@ -419,7 +419,7 @@ function ServiceCreateDialog(props: {
             <input
               value={form.command ?? ''}
               onChange={(e) => setForm((p) => ({ ...p, command: e.target.value }))}
-              className="w-full h-11 px-4 rounded-[var(--radius-md)] border border-[var(--border-subtle)] bg-[var(--surface-muted)] text-[var(--text-primary)] placeholder:text-[var(--text-muted)] focus:border-[var(--accent-primary)] focus:ring-1 focus:ring-[var(--accent-primary)] transition-all mono text-sm"
+              className="w-full h-11 px-4 rounded-[var(--radius-md)] border border-[var(--border-subtle)] bg-[var(--surface-muted)] text-[var(--text-primary)] placeholder:text-[var(--text-muted)] focus:border-[var(--accent-primary)] focus:ring-1 focus:ring-[var(--accent-primary)] transition-all v-mono text-sm"
               placeholder="npm run start"
             />
           </div>
@@ -434,7 +434,7 @@ function ServiceCreateDialog(props: {
         <div className="mt-6 flex justify-end gap-3">
           <button
             onClick={props.onClose}
-            className="px-4 py-2 rounded-[var(--radius-md)] border border-[var(--border-subtle)] text-[var(--text-secondary)] text-sm font-medium hover:text-[var(--text-primary)] hover:border-[var(--border-default)] transition-colors"
+            className="s-btn-quiet"
           >
             Cancel
           </button>
@@ -454,8 +454,8 @@ function ServiceCreateDialog(props: {
                 database: isDatabase ? { engine: dbEngine, plan: dbPlan } : undefined,
               })
             }
-            className="px-5 py-2 rounded-[var(--radius-md)] text-[var(--accent-on)] text-sm font-medium shadow-lg disabled:opacity-50 disabled:cursor-not-allowed transition-all"
-            style={{ background: 'var(--accent-primary)' }}
+            className="s-btn-accent disabled:opacity-50 disabled:cursor-not-allowed"
+            
           >
             {props.loading ? 'Creating...' : isDatabase ? 'Create Database' : 'Create Service'}
           </button>
@@ -689,17 +689,17 @@ export function ProjectWorkspacePage() {
   if ((!isDemoMode && projectQuery.isError) || !project) {
     return (
       <div className="min-h-screen flex items-center justify-center p-8">
-        <div className="panel p-8 text-center max-w-md">
+        <div className="s-card p-8 text-center max-w-md">
           <div className="w-12 h-12 mx-auto mb-4 rounded-full bg-[var(--error-soft)] flex items-center justify-center">
             <X size={24} className="text-[var(--error)]" />
           </div>
-          <p className="text-lg font-medium text-[var(--text-primary)]">Project not found</p>
+          <p className="font-headline text-lg font-medium text-[var(--text-primary)]">Project not found</p>
           <p className="mt-2 text-sm text-[var(--text-secondary)]">
             This project may have been deleted or you don't have access.
           </p>
           <button
             onClick={() => navigate(isDemoMode ? '/projects?demo=1' : '/projects')}
-            className="mt-6 px-4 py-2 rounded-[var(--radius-md)] border border-[var(--border-subtle)] text-sm font-medium hover:border-[var(--border-default)] transition-colors"
+            className="s-btn-quiet"
           >
             Back to Projects
           </button>
@@ -724,13 +724,13 @@ export function ProjectWorkspacePage() {
           <span className="hidden sm:inline">Projects</span>
         </button>
         <div className="w-px h-4 bg-[var(--border-subtle)] shrink-0" />
-        <h1 className="v-title text-sm shrink-0 min-w-0 truncate">{project.name}<span className="v-cursor">_</span></h1>
+        <h1 className="v-title font-headline text-sm shrink-0 min-w-0 truncate">{project.name}<span className="v-cursor">_</span></h1>
         <span className="hidden lg:flex items-center gap-1.5 text-[11px] text-[var(--text-tertiary)] shrink-0">
           {services.length} service{services.length !== 1 ? 's' : ''} · {runningServices} running
         </span>
 
         {/* View tabs */}
-        <nav className="flex items-center gap-0.5 rounded-full bg-[var(--surface-muted)] border border-[var(--border-subtle)] p-0.5 mx-2 overflow-x-auto min-w-0">
+        <nav className="flex items-center gap-0.5 mx-2 overflow-x-auto min-w-0 self-stretch [scrollbar-width:none] [&::-webkit-scrollbar]:hidden">
           {viewItems.filter((item) => signedIn || !item.authOnly).map((item) => {
             const active = activeView === item.key;
             const Icon = item.icon;
@@ -742,11 +742,7 @@ export function ProjectWorkspacePage() {
                   next.set('view', item.key);
                   return next;
                 })}
-                className={`flex items-center gap-1.5 px-3 py-1.5 rounded-full text-xs font-medium transition-all whitespace-nowrap ${
-                  active
-                    ? 'bg-[var(--surface-card)] text-[var(--text-primary)] shadow-sm'
-                    : 'text-[var(--text-tertiary)] hover:text-[var(--text-secondary)]'
-                }`}
+                className={`tab ${active ? 'active' : ''} !py-0 h-full !text-[11.5px]`}
               >
                 <Icon size={13} />
                 <span className="hidden md:inline">{item.label}</span>
@@ -765,29 +761,21 @@ export function ProjectWorkspacePage() {
           </span>
           <button
             onClick={() => setCommandPaletteOpen(true)}
-            className="hidden lg:flex items-center gap-2 h-8 px-2.5 rounded-[var(--radius-md)] border border-[var(--border-subtle)] bg-[var(--surface-muted)] text-[var(--text-muted)] text-xs hover:border-[var(--border-default)] hover:text-[var(--text-secondary)] transition-colors"
+            className="s-chip hidden lg:flex"
           >
             <Search size={12} />
-            <kbd className="px-1 py-0.5 rounded bg-[var(--surface-card)] text-[10px] font-mono">⌘K</kbd>
+            <kbd className="px-1 py-px rounded border border-[var(--border-subtle)] bg-[var(--bg-surface)] text-[10px] font-mono">⌘K</kbd>
           </button>
           {!isDemoMode && signedIn && (
             <>
-              <button
-                onClick={() => setImportOpen(true)}
-                className="flex items-center gap-1.5 h-8 px-3 rounded-[var(--radius-md)] border border-[var(--border-subtle)] bg-[var(--surface-muted)] text-xs font-medium text-[var(--text-secondary)] hover:border-[var(--border-default)] hover:text-[var(--text-primary)] transition-colors"
-                title="Deploy a docker-compose file into this project"
-              >
-                <FileUp size={14} />
+              <QuietBtn onClick={() => setImportOpen(true)} title="Deploy a docker-compose file into this project">
+                <FileUp size={13} />
                 <span className="hidden sm:inline">Compose</span>
-              </button>
-              <button
-                onClick={openAddService}
-                className="flex items-center gap-1.5 h-8 px-3 rounded-[var(--radius-md)] text-[var(--accent-on)] text-xs font-semibold shadow-lg hover:shadow-xl transition-all"
-                style={{ background: 'var(--accent-primary)' }}
-              >
-                <Plus size={14} />
+              </QuietBtn>
+              <GhostBtn onClick={openAddService}>
+                <Plus size={13} />
                 <span className="hidden sm:inline">Add Service</span>
-              </button>
+              </GhostBtn>
             </>
           )}
         </div>
@@ -818,11 +806,9 @@ export function ProjectWorkspacePage() {
       <div className="flex-1 min-h-0 overflow-y-auto">
         {isDemoMode && (
           <div className="w-full px-8 pt-6">
-            <div className="px-4 py-3 rounded-[var(--radius-md)] border border-[var(--warning-soft)] bg-[var(--warning-soft)]/50">
-              <div className="flex items-center gap-2 text-sm text-[var(--warning)]">
-                <Sparkles size={16} />
-                <span>Demo mode active - using sample data for preview</span>
-              </div>
+            <div className="s-inset flex items-center gap-2 text-xs text-[var(--warning)]">
+              <Sparkles size={13} />
+              Demo mode active — using sample data for preview
             </div>
           </div>
         )}
@@ -831,50 +817,37 @@ export function ProjectWorkspacePage() {
             {activeView === 'observability' && (
               <div className="space-y-6">
                 {/* Health Summary */}
-                <div className="grid grid-cols-1 sm:grid-cols-3 gap-4">
-                  <div className="panel-soft p-4">
-                    <div className="flex items-center gap-2">
-                      <div className="w-2 h-2 rounded-full bg-[var(--success)] live-pulse" />
-                      <p className="text-xs uppercase tracking-wider text-[var(--text-muted)]">Healthy</p>
+                <div className="grid grid-cols-1 sm:grid-cols-3 gap-3.5">
+                  {([
+                    { label: 'Healthy', color: 'var(--success)', value: runningServices, pulse: true },
+                    { label: 'Failed', color: 'var(--error)', value: services.filter((s) => s.status === 'failed').length, pulse: false },
+                    { label: 'Building', color: 'var(--warning)', value: services.filter((s) => s.status === 'building').length, pulse: true },
+                  ]).map((s) => (
+                    <div key={s.label} className="s-card">
+                      <div className="s-cardhead !py-2.5">
+                        <span className={`w-1.5 h-1.5 rounded-full ${s.pulse ? 'animate-pulse' : ''}`} style={{ background: s.color }} />
+                        <span className="text-[11px] text-[var(--text-tertiary)]">{s.label}</span>
+                      </div>
+                      <div className="px-4 pb-3.5">
+                        <span className="font-headline text-[28px] font-bold leading-none" style={{ color: s.color }}>{s.value}</span>
+                      </div>
                     </div>
-                    <p className="mt-2 text-3xl font-semibold text-[var(--success)]">{runningServices}</p>
-                  </div>
-                  <div className="panel-soft p-4">
-                    <div className="flex items-center gap-2">
-                      <div className="w-2 h-2 rounded-full bg-[var(--error)]" />
-                      <p className="text-xs uppercase tracking-wider text-[var(--text-muted)]">Failed</p>
-                    </div>
-                    <p className="mt-2 text-3xl font-semibold text-[var(--error)]">
-                      {services.filter((s) => s.status === 'failed').length}
-                    </p>
-                  </div>
-                  <div className="panel-soft p-4">
-                    <div className="flex items-center gap-2">
-                      <div className="w-2 h-2 rounded-full bg-[var(--warning)] animate-pulse" />
-                      <p className="text-xs uppercase tracking-wider text-[var(--text-muted)]">Building</p>
-                    </div>
-                    <p className="mt-2 text-3xl font-semibold text-[var(--warning)]">
-                      {services.filter((s) => s.status === 'building').length}
-                    </p>
-                  </div>
+                  ))}
                 </div>
 
                 {/* Metrics Dashboard */}
                 <MetricsDashboard services={visibleServices} isDemoMode={isDemoMode} />
 
                 {/* Service List */}
-                <div className="panel p-6">
-                  <div className="flex items-center justify-between mb-3">
-                    <h3 className="text-sm font-medium text-[var(--text-secondary)]">Services</h3>
+                <div className="s-card">
+                  <div className="s-cardhead">
+                    <span className="s-ibox"><Layers /></span>
+                    <span className="s-t">Services</span>
                     {!isDemoMode && environments.length > 0 && (
-                      <div className="flex items-center gap-1.5 flex-wrap">
+                      <div className="s-trail flex-wrap">
                         <button
                           onClick={() => setEnvFilter(null)}
-                          className={`px-2.5 py-1 rounded-full text-xs font-medium transition-colors ${
-                            envFilter === null
-                              ? 'bg-[var(--accent-primary)] text-white'
-                              : 'bg-[var(--surface-muted)] text-[var(--text-secondary)] hover:bg-[var(--surface-card)]'
-                          }`}
+                          className={`s-chip !py-1 !px-2.5 ${envFilter === null ? '!text-[var(--accent-primary)] !border-[var(--accent-primary)]/40' : ''}`}
                         >
                           All
                         </button>
@@ -882,11 +855,7 @@ export function ProjectWorkspacePage() {
                           <button
                             key={env.id}
                             onClick={() => setEnvFilter(envFilter === env.name ? null : env.name)}
-                            className={`px-2.5 py-1 rounded-full text-xs font-medium transition-colors ${
-                              envFilter === env.name
-                                ? 'bg-[var(--accent-primary)] text-white'
-                                : 'bg-[var(--surface-muted)] text-[var(--text-secondary)] hover:bg-[var(--surface-card)]'
-                            }`}
+                            className={`s-chip !py-1 !px-2.5 ${envFilter === env.name ? '!text-[var(--accent-primary)] !border-[var(--accent-primary)]/40' : ''}`}
                           >
                             {env.name} ({env.service_count})
                           </button>
@@ -895,6 +864,7 @@ export function ProjectWorkspacePage() {
                       </div>
                     )}
                   </div>
+                  <div className="px-4 pb-4">
                   <div className="rounded-[var(--radius-md)] border border-[var(--border-subtle)] overflow-hidden divide-y divide-[var(--border-subtle)]">
                     {visibleServices.length === 0 ? (
                       <div className="p-8 text-center">
@@ -914,9 +884,7 @@ export function ProjectWorkspacePage() {
                           className="w-full flex items-center justify-between px-4 py-3 hover:bg-[var(--surface-muted)]/50 transition-colors text-left"
                         >
                           <div className="flex items-center gap-3">
-                            <div className="w-8 h-8 rounded-[var(--radius-sm)] bg-[var(--surface-card)] border border-[var(--border-subtle)] flex items-center justify-center">
-                              <Box size={14} className="text-[var(--text-tertiary)]" />
-                            </div>
+                            <span className="s-ibox"><Box /></span>
                             <div>
                               <p className="text-sm font-medium text-[var(--text-primary)]">{service.name}</p>
                               <p className="text-xs text-[var(--text-tertiary)]">{service.type}</p>
@@ -927,33 +895,31 @@ export function ProjectWorkspacePage() {
                       ))
                     )}
                   </div>
+                  </div>
                 </div>
               </div>
             )}
 
             {activeView === 'logs' && (
-              <div className="panel p-6">
-                <div className="flex items-center justify-between mb-4">
-                  <div className="flex items-center gap-3">
-                    <div className="w-10 h-10 rounded-[var(--radius-md)] bg-[var(--accent-primary-soft)] flex items-center justify-center">
-                      <FileText size={20} className="text-[var(--accent-primary)]" />
-                    </div>
-                    <div>
-                      <h2 className="text-lg font-semibold text-[var(--text-primary)]">Logs</h2>
-                      <p className="text-sm text-[var(--text-secondary)]">Aggregated service output</p>
-                    </div>
+              <div className="s-card">
+                <div className="s-cardhead">
+                  <span className="s-ibox"><FileText /></span>
+                  <div>
+                    <div className="s-t">Logs</div>
+                    <div className="mt-0.5 text-[11px] text-[var(--text-tertiary)]">Aggregated service output</div>
                   </div>
                   {!isDemoMode && (
-                    <button
-                      onClick={() => workspaceLogsQuery.refetch()}
-                      className="px-3 py-1.5 rounded-[var(--radius-md)] border border-[var(--border-subtle)] text-xs font-medium text-[var(--text-secondary)] hover:text-[var(--text-primary)] hover:border-[var(--border-default)] transition-colors"
-                    >
-                      Refresh
-                    </button>
+                    <div className="s-trail">
+                      <QuietBtn onClick={() => workspaceLogsQuery.refetch()}>
+                        <RefreshCw size={13} />
+                        Refresh
+                      </QuietBtn>
+                    </div>
                   )}
                 </div>
+                <div className="px-4 pb-4">
 
-                <div className="mono rounded-[var(--radius-md)] border border-[var(--border-subtle)] bg-[var(--bg-void)] p-4 text-xs text-[var(--text-secondary)] overflow-x-auto max-h-[600px] overflow-y-auto">
+                <div className="v-mono rounded-[var(--radius-md)] border border-[var(--border-subtle)] bg-[var(--bg-void)] p-4 text-xs text-[var(--text-secondary)] overflow-x-auto max-h-[600px] overflow-y-auto">
                   {services.length === 0 ? (
                     <p className="text-[var(--text-muted)]">No services available.</p>
                   ) : isDemoMode ? (
@@ -994,20 +960,20 @@ export function ProjectWorkspacePage() {
                     </div>
                   )}
                 </div>
+                </div>
               </div>
             )}
 
             {activeView === 'activity' && (
-              <div className="panel p-6">
-                <div className="flex items-center gap-3 mb-4">
-                  <div className="w-10 h-10 rounded-[var(--radius-md)] bg-[var(--accent-primary-soft)] flex items-center justify-center">
-                    <Clock size={20} className="text-[var(--accent-primary)]" />
-                  </div>
+              <div className="s-card">
+                <div className="s-cardhead">
+                  <span className="s-ibox"><Clock /></span>
                   <div>
-                    <h2 className="text-lg font-semibold text-[var(--text-primary)]">Activity</h2>
-                    <p className="text-sm text-[var(--text-secondary)]">Project timeline — deploys, config, membership</p>
+                    <div className="s-t">Activity</div>
+                    <div className="mt-0.5 text-[11px] text-[var(--text-tertiary)]">Project timeline — deploys, config, membership</div>
                   </div>
                 </div>
+                <div className="px-4 pb-4">
                 <div className="divide-y divide-[var(--border-subtle)] border border-[var(--border-subtle)] rounded-[var(--radius-md)]">
                   {activityQuery.isLoading ? (
                     <p className="px-4 py-6 text-xs text-[var(--text-muted)]">Loading…</p>
@@ -1030,40 +996,40 @@ export function ProjectWorkspacePage() {
                     ))
                   )}
                 </div>
+                </div>
               </div>
             )}
 
             {activeView === 'settings' && (
-              <div className="panel p-6">
-                <div className="flex items-center gap-3 mb-6">
-                  <div className="w-10 h-10 rounded-[var(--radius-md)] bg-[var(--accent-primary-soft)] flex items-center justify-center">
-                    <Settings size={20} className="text-[var(--accent-primary)]" />
-                  </div>
+              <div className="s-card">
+                <div className="s-cardhead">
+                  <span className="s-ibox"><Settings /></span>
                   <div>
-                    <h2 className="text-lg font-semibold text-[var(--text-primary)]">Settings</h2>
-                    <p className="text-sm text-[var(--text-secondary)]">Project configuration</p>
+                    <div className="s-t">Settings</div>
+                    <div className="mt-0.5 text-[11px] text-[var(--text-tertiary)]">Project configuration</div>
                   </div>
                 </div>
+                <div className="px-4 pb-4">
 
                 <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-                  <div className="panel-soft p-4">
+                  <div className="s-inset">
                     <p className="text-xs uppercase tracking-wider text-[var(--text-muted)]">Project ID</p>
-                    <p className="mono mt-2 text-sm text-[var(--text-primary)] break-all">{project.id}</p>
+                    <p className="v-mono mt-2 text-sm text-[var(--text-primary)] break-all">{project.id}</p>
                   </div>
-                  <div className="panel-soft p-4">
+                  <div className="s-inset">
                     <p className="text-xs uppercase tracking-wider text-[var(--text-muted)]">Created</p>
                     <p className="mt-2 text-sm text-[var(--text-primary)]">{formatDate(project.createdAt)}</p>
                   </div>
-                  <div className="panel-soft p-4 md:col-span-2">
+                  <div className="s-inset md:col-span-2">
                     <p className="text-xs uppercase tracking-wider text-[var(--text-muted)]">Canvas Storage Key</p>
-                    <p className="mono mt-2 text-xs text-[var(--text-secondary)] break-all">{canvasStorageKey(project.id)}</p>
+                    <p className="v-mono mt-2 text-xs text-[var(--text-secondary)] break-all">{canvasStorageKey(project.id)}</p>
                   </div>
                 </div>
 
                 {!isDemoMode && signedIn && <SharedVariablesSection projectId={project.id} />}
 
                 <div className="mt-6 pt-6 border-t border-[var(--border-subtle)]">
-                  <h3 className="text-sm font-medium text-[var(--text-secondary)] mb-3">Local Data</h3>
+                  <h3 className="s-t mb-3">Local Data</h3>
                   <button
                     onClick={() => {
                       clearCanvasMetadata(project.id);
@@ -1075,6 +1041,7 @@ export function ProjectWorkspacePage() {
                     Reset Canvas Layout
                   </button>
                 </div>
+                </div>
               </div>
             )}
           </section>
@@ -1101,12 +1068,10 @@ export function ProjectWorkspacePage() {
       {importOpen && (
         <div className="fixed inset-0 z-50 flex items-center justify-center p-4">
           <div className="absolute inset-0 bg-[var(--bg-void)]/80 backdrop-blur-sm" onClick={() => setImportOpen(false)} />
-          <div className="relative w-full max-w-2xl panel p-6">
-            <div className="flex items-center gap-3 mb-1">
-              <div className="w-10 h-10 rounded-[var(--radius-md)] bg-[var(--accent-primary-soft)] flex items-center justify-center">
-                <FileUp size={20} className="text-[var(--accent-primary)]" />
-              </div>
-              <h3 className="text-xl font-semibold text-[var(--text-primary)]">Import docker-compose</h3>
+          <div className="relative w-full max-w-2xl s-card !p-6">
+            <div className="flex items-center gap-2.5 mb-1">
+              <span className="s-ibox !w-9 !h-9"><FileUp /></span>
+              <h3 className="font-headline text-lg font-semibold text-[var(--text-primary)]">Import docker-compose</h3>
             </div>
             <p className="text-sm text-[var(--text-secondary)]">
               Paste a docker-compose.yml. Services deploy in dependency order; postgres, mysql, redis, mongo,
@@ -1116,7 +1081,7 @@ export function ProjectWorkspacePage() {
               value={composeYaml}
               onChange={(e) => setComposeYaml(e.target.value)}
               spellCheck={false}
-              className="mt-5 w-full h-72 px-4 py-3 rounded-[var(--radius-md)] border border-[var(--border-subtle)] bg-[var(--surface-muted)] text-[var(--text-primary)] placeholder:text-[var(--text-muted)] focus:border-[var(--accent-primary)] focus:ring-1 focus:ring-[var(--accent-primary)] transition-all mono text-sm resize-none"
+              className="mt-5 w-full h-72 px-4 py-3 rounded-[var(--radius-md)] border border-[var(--border-subtle)] bg-[var(--surface-muted)] text-[var(--text-primary)] placeholder:text-[var(--text-muted)] focus:border-[var(--accent-primary)] focus:ring-1 focus:ring-[var(--accent-primary)] transition-all v-mono text-sm resize-none"
               placeholder={'services:\n  web:\n    image: nginx:alpine\n    ports:\n      - "80"\n  db:\n    image: postgres:16-alpine\n    environment:\n      POSTGRES_PASSWORD: secret'}
             />
             <div className="mt-5 flex justify-end gap-2">
@@ -1129,8 +1094,8 @@ export function ProjectWorkspacePage() {
               <button
                 onClick={() => composeImportMutation.mutate(composeYaml)}
                 disabled={composeImportMutation.isPending || composeYaml.trim().length === 0}
-                className="h-10 px-5 rounded-[var(--radius-md)] text-sm font-semibold text-[var(--accent-on)] disabled:opacity-50 transition-all flex items-center gap-2"
-                style={{ background: 'var(--accent-primary)' }}
+                className="s-btn-accent h-10 disabled:opacity-50"
+                
               >
                 {composeImportMutation.isPending && <Loader2 size={14} className="animate-spin" />}
                 Deploy stack
@@ -1159,6 +1124,9 @@ export function ProjectWorkspacePage() {
             return next;
           });
         }}
+        navTargets={viewItems
+          .filter((item) => signedIn || !item.authOnly)
+          .map((item) => ({ label: `Go to ${item.label}`, target: item.key }))}
       />
 
       {/* Error Banner */}
diff --git a/app/frontend/src/index.css b/app/frontend/src/index.css
index 0e6775c..9909e7d 100644
--- a/app/frontend/src/index.css
+++ b/app/frontend/src/index.css
@@ -2,55 +2,72 @@
 
 /* Inter font - exact match from self.html */
 @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600;700&display=swap');
 @import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&display=swap');
 
 :root {
-  /* Vertice palette — near-black gray, lime accent */
-  --bg-void: #0c0d0f;
-  --bg-base: #0e0f12;
-  --bg-surface: #101214;
-  --bg-elevated: #131518;
-  --bg-overlay: #16181d;
+  /* Sentry palette — matte black, sky accent */
+  --bg-void: #0c0c0c;
+  --bg-base: #0b0b0b;
+  --bg-surface: #0e0e0e;
+  --bg-elevated: #111111;
+  --bg-overlay: #1a1a1a;
 
-  --surface-card: #131518;
-  --surface-card-hover: #1a1d22;
-  --surface-muted: rgba(255, 255, 255, 0.05);
-  --surface-glass: rgba(16, 18, 21, 0.7);
-  --surface-base: #131518;
+  --surface-card: #111111;
+  --surface-card-hover: #161616;
+  --surface-muted: var(--tint-04);
+  --surface-glass: rgba(12, 12, 12, 0.72);
+  --surface-base: #111111;
 
-  --text-primary: #ecedf0;
-  --text-secondary: #8b919e;
-  --text-tertiary: #575d68;
-  --text-muted: #575d68;
+  --text-primary: #e8e8e8;
+  --text-secondary: #a9a9a9;
+  --text-tertiary: #6e6e6e;
+  --text-muted: #565656;
 
-  /* Lime accent + subtle yellow secondary */
-  --accent-primary: #b4e34a;
-  --accent-primary-soft: rgba(180, 227, 74, 0.1);
-  --accent-primary-glow: rgba(180, 227, 74, 0.35);
-  --accent-on: #131507;
-  --accent-secondary: #f2c94c;
-  --accent-tertiary: #7ab8ff;
+  /* Sky accent + copper secondary */
+  --accent-primary: #38bdf8;
+  --accent-primary-soft: rgba(56, 189, 248, 0.12);
+  --accent-primary-glow: rgba(56, 189, 248, 0.35);
+  --accent-on: #06283a;
+  --accent-secondary: #e0a377;
+  --accent-tertiary: #a271d9;
 
-  --success: #5ee6a0;
-  --success-soft: rgba(94, 230, 160, 0.1);
-  --success-glow: rgba(94, 230, 160, 0.3);
+  --success: #3fe38c;
+  --success-soft: rgba(63, 227, 140, 0.13);
+  --success-glow: rgba(63, 227, 140, 0.3);
 
-  --warning: #f2c94c;
-  --warning-soft: rgba(242, 201, 76, 0.1);
-  --warning-glow: rgba(242, 201, 76, 0.3);
+  --warning: #f0a53f;
+  --warning-soft: rgba(240, 165, 63, 0.13);
+  --warning-glow: rgba(240, 165, 63, 0.3);
 
-  --error: #ff6f5c;
-  --error-soft: rgba(255, 111, 92, 0.1);
-  --error-glow: rgba(255, 111, 92, 0.3);
+  --error: #f0554a;
+  --error-soft: rgba(240, 85, 74, 0.13);
+  --error-glow: rgba(240, 85, 74, 0.3);
 
-  --info: #7ab8ff;
-  --info-soft: rgba(122, 184, 255, 0.12);
+  --info: #1cd8ec;
+  --info-soft: rgba(28, 216, 236, 0.12);
+
+  --nav-active: #262628;
+
+  /* White-overlay tints (light theme flips to black) */
+  --tint-03: rgba(255, 255, 255, 0.03);
+  --tint-04: rgba(255, 255, 255, 0.04);
+  --tint-05: rgba(255, 255, 255, 0.05);
+  --tint-06: rgba(255, 255, 255, 0.06);
+  --tint-07: rgba(255, 255, 255, 0.07);
+  --tint-08: rgba(255, 255, 255, 0.08);
+  --tint-09: rgba(255, 255, 255, 0.09);
+  --tint-10: rgba(255, 255, 255, 0.10);
+  --tint-12: rgba(255, 255, 255, 0.12);
+  --tint-14: rgba(255, 255, 255, 0.14);
+  --tint-16: rgba(255, 255, 255, 0.16);
+  --tint-30: rgba(255, 255, 255, 0.30);
 
   /* Border system */
-  --border-subtle: rgba(255, 255, 255, 0.065);
-  --border-default: rgba(255, 255, 255, 0.13);
-  --border-strong: rgba(180, 227, 74, 0.35);
-  --border-glow: rgba(180, 227, 74, 0.55);
+  --border-subtle: #1e1e1e;
+  --border-default: #2a2a2a;
+  --border-strong: rgba(56, 189, 248, 0.35);
+  --border-glow: rgba(56, 189, 248, 0.55);
   
   /* Shadows */
   --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
@@ -87,54 +104,71 @@
 }
 
 :root[data-theme='light'] {
-  --bg-void: #f4f6fb;
-  --bg-base: #ffffff;
-  --bg-surface: #eef1f7;
+  /* Sentry white mode — warm paper, deepened sky for contrast */
+  --bg-void: #f4f3f0;
+  --bg-base: #f0efeb;
+  --bg-surface: #f4f3f0;
   --bg-elevated: #ffffff;
   --bg-overlay: #ffffff;
 
   --surface-card: #ffffff;
-  --surface-card-hover: #eef1f7;
-  --surface-muted: rgba(17, 18, 23, 0.05);
-  --surface-glass: rgba(255, 255, 255, 0.72);
+  --surface-card-hover: #faf9f6;
+  --surface-muted: #eceae4;
+  --surface-glass: rgba(255, 255, 255, 0.78);
   --surface-base: #ffffff;
 
-  --text-primary: #151821;
-  --text-secondary: #4f5668;
-  --text-tertiary: #7b8498;
-  --text-muted: #7b8498;
+  --text-primary: #1a1a1a;
+  --text-secondary: #5f5c55;
+  --text-tertiary: #9a978f;
+  --text-muted: #b0ada4;
 
-  --accent-primary: #7ba91e;
-  --accent-primary-soft: rgba(123, 169, 30, 0.14);
-  --accent-primary-glow: rgba(123, 169, 30, 0.28);
+  --accent-primary: #0284c7;
+  --accent-primary-soft: rgba(2, 132, 199, 0.1);
+  --accent-primary-glow: rgba(2, 132, 199, 0.28);
   --accent-on: #ffffff;
-  --accent-secondary: #b8860b;
-  --accent-tertiary: #2f67d8;
+  --accent-secondary: #b0723a;
+  --accent-tertiary: #7c5cc9;
 
-  --success: #168a55;
-  --success-soft: rgba(22, 138, 85, 0.12);
-  --success-glow: rgba(22, 138, 85, 0.2);
+  --success: #15803d;
+  --success-soft: rgba(21, 128, 61, 0.11);
+  --success-glow: rgba(21, 128, 61, 0.2);
 
-  --warning: #c7511f;
-  --warning-soft: rgba(199, 81, 31, 0.12);
-  --warning-glow: rgba(199, 81, 31, 0.2);
+  --warning: #b45309;
+  --warning-soft: rgba(180, 83, 9, 0.11);
+  --warning-glow: rgba(180, 83, 9, 0.2);
 
-  --error: #c9362b;
-  --error-soft: rgba(201, 54, 43, 0.12);
-  --error-glow: rgba(201, 54, 43, 0.2);
+  --error: #c93a30;
+  --error-soft: rgba(201, 58, 48, 0.11);
+  --error-glow: rgba(201, 58, 48, 0.2);
 
-  --info: #2f67d8;
-  --info-soft: rgba(47, 103, 216, 0.12);
+  --info: #0e7490;
+  --info-soft: rgba(14, 116, 144, 0.11);
 
-  --border-subtle: rgba(21, 24, 33, 0.1);
-  --border-default: rgba(21, 24, 33, 0.16);
-  --border-strong: rgba(123, 169, 30, 0.4);
-  --border-glow: rgba(123, 169, 30, 0.5);
+  --nav-active: #e4e2dc;
 
-  --shadow-sm: 0 1px 2px rgba(17, 18, 23, 0.08);
-  --shadow-md: 0 4px 12px rgba(17, 18, 23, 0.1);
-  --shadow-lg: 0 8px 30px rgba(17, 18, 23, 0.12);
-  --shadow-xl: 0 16px 48px rgba(17, 18, 23, 0.16);
+  /* Black-overlay tints for light theme */
+  --tint-03: rgba(0, 0, 0, 0.03);
+  --tint-04: rgba(0, 0, 0, 0.04);
+  --tint-05: rgba(0, 0, 0, 0.05);
+  --tint-06: rgba(0, 0, 0, 0.06);
+  --tint-07: rgba(0, 0, 0, 0.07);
+  --tint-08: rgba(0, 0, 0, 0.08);
+  --tint-09: rgba(0, 0, 0, 0.09);
+  --tint-10: rgba(0, 0, 0, 0.10);
+  --tint-12: rgba(0, 0, 0, 0.12);
+  --tint-14: rgba(0, 0, 0, 0.14);
+  --tint-16: rgba(0, 0, 0, 0.16);
+  --tint-30: rgba(0, 0, 0, 0.30);
+
+  --border-subtle: #e3e1db;
+  --border-default: #d4d1c9;
+  --border-strong: rgba(2, 132, 199, 0.4);
+  --border-glow: rgba(2, 132, 199, 0.5);
+
+  --shadow-sm: 0 1px 2px rgba(26, 26, 26, 0.07);
+  --shadow-md: 0 4px 12px rgba(26, 26, 26, 0.08);
+  --shadow-lg: 0 8px 30px rgba(26, 26, 26, 0.1);
+  --shadow-xl: 0 16px 48px rgba(26, 26, 26, 0.14);
   --shadow-glow: 0 0 20px var(--accent-primary-glow);
   --shadow-glow-lg: 0 0 40px var(--accent-primary-glow);
 
@@ -168,7 +202,7 @@ body,
 }
 
 body {
-  font-family: 'Inter', system-ui, -apple-system, sans-serif;
+  font-family: 'IBM Plex Mono', system-ui, -apple-system, sans-serif;
   color: var(--text-primary);
   background: var(--bg-void);
   -webkit-font-smoothing: antialiased;
@@ -202,7 +236,7 @@ body {
   right: -5%;
   width: 45%;
   height: 45%;
-  background: radial-gradient(ellipse at center, rgba(180, 227, 74, 0.05) 0%, transparent 70%);
+  background: radial-gradient(ellipse at center, rgba(56, 189, 248, 0.05) 0%, transparent 70%);
   filter: blur(60px);
 }
 
@@ -213,7 +247,7 @@ body {
   left: -10%;
   width: 55%;
   height: 55%;
-  background: radial-gradient(ellipse at center, rgba(242, 201, 76, 0.03) 0%, transparent 70%);
+  background: radial-gradient(ellipse at center, rgba(240, 165, 63, 0.03) 0%, transparent 70%);
   filter: blur(80px);
 }
 
@@ -264,13 +298,13 @@ body {
 
 @keyframes pulse-dot {
   0% {
-    box-shadow: 0 0 0 0 rgba(61, 214, 140, 0.7);
+    box-shadow: 0 0 0 0 rgba(63, 227, 140, 0.7);
   }
   70% {
-    box-shadow: 0 0 0 6px rgba(61, 214, 140, 0);
+    box-shadow: 0 0 0 6px rgba(63, 227, 140, 0);
   }
   100% {
-    box-shadow: 0 0 0 0 rgba(61, 214, 140, 0);
+    box-shadow: 0 0 0 0 rgba(63, 227, 140, 0);
   }
 }
 
@@ -287,7 +321,7 @@ textarea {
 }
 
 .mono {
-  font-family: 'JetBrains Mono', 'SF Mono', Consolas, monospace;
+  font-family: 'IBM Plex Mono', 'SF Mono', Consolas, monospace;
 }
 
 /* Card - self.html exact match */
@@ -303,7 +337,7 @@ textarea {
 }
 
 .card:hover {
-  border-color: rgba(255, 255, 255, 0.14);
+  border-color: var(--tint-14);
 }
 
 .card:nth-child(1) { animation-delay: 0.04s; }
@@ -322,35 +356,35 @@ textarea {
 }
 
 .panel:hover {
-  border-color: rgba(255, 255, 255, 0.14);
-  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.05);
+  border-color: var(--tint-14);
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3), 0 0 0 1px var(--tint-05);
 }
 
 .panel-soft {
-  border: 1px solid rgba(255, 255, 255, 0.08);
-  background: rgba(255, 255, 255, 0.04);
+  border: 1px solid var(--tint-08);
+  background: var(--tint-04);
   border-radius: 10px;
   transition: border-color 0.2s ease, background 0.2s ease;
 }
 
 .panel-soft:hover {
-  border-color: rgba(255, 255, 255, 0.14);
-  background: rgba(255, 255, 255, 0.06);
+  border-color: var(--tint-14);
+  background: var(--tint-06);
 }
 
 /* Glass panel effect for elevated UI elements */
 .panel-glass {
-  background: rgba(28, 29, 36, 0.7);
+  background: color-mix(in srgb, var(--surface-card) 78%, transparent);
   backdrop-filter: blur(20px);
   -webkit-backdrop-filter: blur(20px);
-  border: 1px solid rgba(255, 255, 255, 0.1);
-  border-radius: 16px;
+  border: 1px solid var(--tint-10);
+  border-radius: 12px;
 }
 
 /* Subtle grid background - Railway-style dots */
 .subtle-grid {
   background-image:
-    radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.05) 1px, transparent 0);
+    radial-gradient(circle at 1px 1px, var(--tint-05) 1px, transparent 0);
   background-size: 28px 28px;
 }
 
@@ -502,13 +536,13 @@ textarea {
 /* Live pulse animation */
 @keyframes live-pulse {
   0% {
-    box-shadow: 0 0 0 0 rgba(61, 214, 140, 0.7);
+    box-shadow: 0 0 0 0 rgba(63, 227, 140, 0.7);
   }
   70% {
-    box-shadow: 0 0 0 6px rgba(61, 214, 140, 0);
+    box-shadow: 0 0 0 6px rgba(63, 227, 140, 0);
   }
   100% {
-    box-shadow: 0 0 0 0 rgba(61, 214, 140, 0);
+    box-shadow: 0 0 0 0 rgba(63, 227, 140, 0);
   }
 }
 
@@ -587,7 +621,7 @@ textarea {
   left: 50%;
   width: 20px;
   height: 20px;
-  background: rgba(255, 255, 255, 0.3);
+  background: var(--tint-30);
   border-radius: 50%;
   transform: scale(0);
   pointer-events: none;
@@ -615,7 +649,7 @@ textarea {
 /* Edge label styling */
 .react-flow__edge-text {
   font-size: 10px;
-  font-family: 'JetBrains Mono', monospace;
+  font-family: 'IBM Plex Mono', monospace;
 }
 
 /* Connection dots at endpoints */
@@ -638,12 +672,12 @@ textarea {
 .edge-premium .react-flow__edge-path {
   stroke-linecap: round;
   stroke-linejoin: round;
-  filter: drop-shadow(0 0 4px rgba(180, 227, 74, 0.25));
+  filter: drop-shadow(0 0 4px rgba(56, 189, 248, 0.25));
   transition: filter 0.2s ease, stroke-width 0.2s ease;
 }
 
 .edge-premium:hover .react-flow__edge-path {
-  filter: drop-shadow(0 0 8px rgba(180, 227, 74, 0.45));
+  filter: drop-shadow(0 0 8px rgba(56, 189, 248, 0.45));
   stroke-width: 2.6px;
 }
 
@@ -668,7 +702,7 @@ textarea {
 
 /* Code/mono styling */
 .code-inline {
-  font-family: 'JetBrains Mono', monospace;
+  font-family: 'IBM Plex Mono', monospace;
   font-size: 0.9em;
   padding: 0.15em 0.4em;
   background: var(--surface-muted);
@@ -710,9 +744,9 @@ textarea {
 /* Gradient mesh background */
 .gradient-mesh {
   background: 
-    radial-gradient(ellipse at 20% 30%, rgba(180, 227, 74, 0.06) 0%, transparent 50%),
-    radial-gradient(ellipse at 80% 70%, rgba(122, 184, 255, 0.05) 0%, transparent 50%),
-    radial-gradient(ellipse at 50% 50%, rgba(242, 201, 76, 0.03) 0%, transparent 50%);
+    radial-gradient(ellipse at 20% 30%, rgba(56, 189, 248, 0.06) 0%, transparent 50%),
+    radial-gradient(ellipse at 80% 70%, rgba(28, 216, 236, 0.05) 0%, transparent 50%),
+    radial-gradient(ellipse at 50% 50%, rgba(240, 165, 63, 0.03) 0%, transparent 50%);
 }
 
 /* Spotlight effect on hover */
@@ -730,7 +764,7 @@ textarea {
   bottom: 0;
   background: radial-gradient(
     circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
-    rgba(255, 255, 255, 0.03) 0%,
+    var(--tint-03) 0%,
     transparent 50%
   );
   pointer-events: none;
@@ -747,8 +781,8 @@ textarea {
    ============================================ */
 
 /* Service type color coding */
-.service-web { --service-color: #7ab8ff; }
-.service-database { --service-color: #f2c94c; }
+.service-web { --service-color: var(--info); }
+.service-database { --service-color: var(--warning); }
 .service-worker { --service-color: var(--accent-primary); }
 
 /* Status bar animation */
@@ -828,19 +862,19 @@ textarea {
   align-items: center;
   justify-content: center;
   cursor: pointer;
-  color: #6b6e7d;
+  color: var(--text-tertiary);
   transition: background 0.15s, color 0.15s;
   text-decoration: none;
 }
 
 .nav-item:hover {
-  background: rgba(255, 255, 255, 0.06);
-  color: #9295a4;
+  background: var(--tint-06);
+  color: var(--text-secondary);
 }
 
 .nav-item.active {
-  background: rgba(255, 255, 255, 0.09);
-  color: #e8e9f0;
+  background: var(--tint-09);
+  color: var(--text-primary);
 }
 
 .nav-item svg {
@@ -898,7 +932,7 @@ textarea {
   padding: 10px 14px;
   font-size: 13.5px;
   font-weight: 500;
-  color: #6b6e7d;
+  color: var(--text-tertiary);
   cursor: pointer;
   border-bottom: 2px solid transparent;
   margin-bottom: -1px;
@@ -912,11 +946,11 @@ textarea {
 }
 
 .tab:hover {
-  color: #9295a4;
+  color: var(--text-secondary);
 }
 
 .tab.active {
-  color: #e8e9f0;
+  color: var(--text-primary);
   border-bottom-color: var(--accent-primary);
 }
 
@@ -932,8 +966,8 @@ textarea {
 /* Pill Group - self.html exact match */
 .pill-group {
   display: flex;
-  background: rgba(255, 255, 255, 0.04);
-  border: 1px solid rgba(255, 255, 255, 0.08);
+  background: var(--tint-04);
+  border: 1px solid var(--tint-08);
   border-radius: 10px;
   overflow: hidden;
 }
@@ -942,19 +976,19 @@ textarea {
   padding: 5px 14px;
   font-size: 12.5px;
   font-weight: 500;
-  color: #6b6e7d;
+  color: var(--text-tertiary);
   cursor: pointer;
   transition: all 0.15s;
   user-select: none;
 }
 
 .pill.active {
-  background: rgba(255, 255, 255, 0.1);
-  color: #e8e9f0;
+  background: var(--tint-10);
+  color: var(--text-primary);
 }
 
 .pill:hover:not(.active) {
-  color: #9295a4;
+  color: var(--text-secondary);
 }
 
 .live-dot {
@@ -968,7 +1002,7 @@ textarea {
 }
 
 .live-dot.stopped {
-  background: #6b6e7d;
+  background: var(--text-tertiary);
   animation: none;
 }
 
@@ -976,11 +1010,11 @@ textarea {
 .badge-active {
   padding: 2px 8px;
   border-radius: 6px;
-  background: rgba(61, 214, 140, 0.15);
+  background: rgba(63, 227, 140, 0.15);
   font-size: 10px;
   font-weight: 700;
   letter-spacing: 0.7px;
-  color: #5ee6a0;
+  color: var(--success);
   text-transform: uppercase;
   display: inline-flex;
   align-items: center;
@@ -990,7 +1024,7 @@ textarea {
 .badge-degraded {
   padding: 2px 8px;
   border-radius: 6px;
-  background: rgba(242, 201, 76, 0.15);
+  background: rgba(240, 165, 63, 0.15);
   font-size: 10px;
   font-weight: 700;
   letter-spacing: 0.7px;
@@ -1004,11 +1038,11 @@ textarea {
 .badge-stopped {
   padding: 2px 8px;
   border-radius: 6px;
-  background: rgba(255, 255, 255, 0.08);
+  background: var(--tint-08);
   font-size: 10px;
   font-weight: 700;
   letter-spacing: 0.7px;
-  color: #6b6e7d;
+  color: var(--text-tertiary);
   text-transform: uppercase;
 }
 
@@ -1017,7 +1051,7 @@ textarea {
   width: 34px;
   height: 34px;
   border-radius: 10px;
-  background: rgba(255, 255, 255, 0.07);
+  background: var(--tint-07);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -1027,7 +1061,7 @@ textarea {
 .card-icon svg {
   width: 16px;
   height: 16px;
-  stroke: #9295a4;
+  stroke: var(--text-secondary);
   fill: none;
   stroke-width: 1.8;
   stroke-linecap: round;
@@ -1082,7 +1116,7 @@ textarea {
   align-items: center;
   justify-content: center;
   font-size: 15px;
-  background: rgba(255, 255, 255, 0.05);
+  background: var(--tint-05);
 }
 
 /* Stat Dot - self.html exact match */
@@ -1111,26 +1145,27 @@ textarea {
   stroke-linecap: round;
 }
 
-/* Button Stop - self.html style */
+/* Button Stop - sentry style */
 .btn-stop {
-  height: 38px;
-  padding: 0 20px;
-  border-radius: 11px;
-  border: 1px solid rgba(255, 255, 255, 0.15);
-  background: rgba(255, 255, 255, 0.06);
-  color: var(--text-primary);
-  font-size: 13.5px;
-  font-weight: 700;
+  height: 34px;
+  padding: 0 16px;
+  border-radius: 9px;
+  border: 1px solid var(--border-default);
+  background: var(--bg-elevated);
+  color: var(--text-secondary);
+  font-size: 12.5px;
+  font-weight: 600;
   font-family: inherit;
   cursor: pointer;
   display: flex;
   align-items: center;
-  gap: 8px;
-  transition: background 0.15s;
+  gap: 7px;
+  transition: background 0.15s, color 0.15s;
 }
 
 .btn-stop:hover {
-  background: rgba(255, 255, 255, 0.1);
+  color: var(--text-primary);
+  background: var(--bg-overlay);
 }
 
 .btn-stop.disabled {
@@ -1147,31 +1182,33 @@ textarea {
   stroke-linecap: round;
 }
 
-/* Button Restart - self.html style */
+/* Button Restart - sentry ghost-accent style */
 .btn-restart {
-  height: 38px;
-  padding: 0 20px;
-  border-radius: 11px;
-  border: none;
-  background: var(--accent-primary);
-  color: var(--accent-on);
-  font-size: 13.5px;
-  font-weight: 700;
+  height: 34px;
+  padding: 0 16px;
+  border-radius: 9px;
+  border: 1px solid var(--accent-border, rgba(56, 189, 248, 0.35));
+  background: var(--accent-primary-soft);
+  color: var(--accent-primary);
+  font-size: 12.5px;
+  font-weight: 600;
   font-family: inherit;
   cursor: pointer;
   display: flex;
   align-items: center;
-  gap: 8px;
+  gap: 7px;
   transition: all 0.15s;
 }
 
 .btn-restart:hover {
-  background: #cdf06f;
+  background: var(--accent-primary-soft);
+  filter: brightness(1.15);
 }
 
 .btn-restart.disabled {
-  background: #444;
+  opacity: 0.45;
   cursor: not-allowed;
+  filter: none;
 }
 
 .btn-restart svg {
@@ -1193,7 +1230,7 @@ textarea {
   content: '';
   position: absolute;
   inset: 0;
-  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
+  background: linear-gradient(90deg, transparent, var(--tint-10), transparent);
   transform: translateX(-100%);
   transition: transform 0.6s ease;
 }
@@ -1406,24 +1443,27 @@ textarea {
    ============================================ */
 
 .v-mono {
-  font-family: 'JetBrains Mono', 'SF Mono', Consolas, monospace;
+  font-family: 'IBM Plex Mono', 'SF Mono', Consolas, monospace;
   font-variant-numeric: tabular-nums;
 }
 
-/* Section header: `// LABEL` */
+/* Section header: small caps label */
 .v-sect {
   display: flex;
   align-items: center;
-  font: 600 10px 'JetBrains Mono', monospace;
-  letter-spacing: 0.22em;
+  font: 500 10px 'IBM Plex Mono', monospace;
+  letter-spacing: 0.16em;
+  text-transform: uppercase;
   color: var(--text-tertiary);
   margin-bottom: 13px;
 }
 .v-sect::before {
-  content: '//';
-  color: var(--accent-primary);
-  font-weight: 700;
-  margin-right: 8px;
+  content: '';
+  width: 5px;
+  height: 5px;
+  border-radius: 1.5px;
+  background: var(--accent-primary);
+  margin-right: 9px;
 }
 .v-sect .v-sect-r {
   margin-left: auto;
@@ -1448,7 +1488,7 @@ textarea {
   height: 5.5px;
   border-radius: 50%;
   background: var(--accent-primary);
-  box-shadow: 0 0 7px rgba(180, 227, 74, 0.8);
+  box-shadow: 0 0 7px rgba(56, 189, 248, 0.8);
   animation: v-pulse 2.4s infinite;
   flex-shrink: 0;
 }
@@ -1462,24 +1502,24 @@ textarea {
   padding: 14px 17px 12px;
   transition: border-color 0.15s;
 }
-.v-stat:hover { border-color: rgba(180, 227, 74, 0.2); }
+.v-stat:hover { border-color: rgba(56, 189, 248, 0.2); }
 .v-stat .v-k {
   display: flex; align-items: center; justify-content: space-between;
-  font: 600 9.5px 'JetBrains Mono', monospace; letter-spacing: 0.16em;
+  font: 600 9.5px 'IBM Plex Mono', monospace; letter-spacing: 0.16em;
   color: var(--text-tertiary);
 }
 .v-stat .v-v {
-  font: 500 28px/1.1 'JetBrains Mono', monospace;
+  font: 500 28px/1.1 'IBM Plex Mono', monospace;
   letter-spacing: -1.2px; margin-top: 8px;
   font-variant-numeric: tabular-nums; color: var(--text-primary);
 }
 .v-stat .v-v span { font-size: 13px; color: var(--text-tertiary); }
-.v-stat .v-d { font: 10.5px 'JetBrains Mono', monospace; color: var(--text-tertiary); margin-top: 2px; }
+.v-stat .v-d { font: 10.5px 'IBM Plex Mono', monospace; color: var(--text-tertiary); margin-top: 2px; }
 .v-stat .v-d b { font-weight: 600; }
 
 /* Thin meter */
 .v-meter {
-  height: 4px; background: rgba(255,255,255,0.07); border-radius: 2px;
+  height: 4px; background: var(--tint-07); border-radius: 2px;
   margin: 12px 0 7px; overflow: hidden;
 }
 .v-meter i { display: block; height: 100%; border-radius: 2px; background: var(--accent-primary); }
@@ -1490,46 +1530,46 @@ textarea {
 .v-spark { display: flex; gap: 3px; align-items: flex-end; height: 22px; margin: 10px 0 6px; }
 .v-spark i {
   flex: 1; border-radius: 1.5px;
-  background: linear-gradient(180deg, var(--accent-primary), rgba(180,227,74,0.1));
+  background: linear-gradient(180deg, var(--accent-primary), rgba(56,189,248,0.1));
   opacity: 0.7;
 }
 
 /* Project mini-canvas (dot grid + service tiles) */
 .v-mini {
   position: relative; height: 104px; border-radius: 10px; overflow: hidden;
-  background: #0e1013; border: 1px solid rgba(255,255,255,0.04);
-  background-image: radial-gradient(rgba(255,255,255,0.09) 1px, transparent 1.5px);
+  background: var(--bg-surface); border: 1px solid var(--tint-04);
+  background-image: radial-gradient(var(--tint-09) 1px, transparent 1.5px);
   background-size: 14px 14px;
 }
 .v-mini .v-node {
   position: absolute; min-width: 32px; height: 32px; padding: 0 8px; border-radius: 9px;
-  background: var(--surface-card-hover); border: 1px solid rgba(255,255,255,0.09);
+  background: var(--surface-card-hover); border: 1px solid var(--tint-09);
   display: flex; align-items: center; justify-content: center; gap: 5px;
-  font: 700 9px 'JetBrains Mono', monospace; color: var(--text-secondary);
+  font: 700 9px 'IBM Plex Mono', monospace; color: var(--text-secondary);
 }
 .v-mini .v-node .v-nd {
   position: absolute; top: -2px; right: -2px; width: 7px; height: 7px;
-  border-radius: 50%; background: var(--success); border: 2px solid #0e1013;
+  border-radius: 50%; background: var(--success); border: 2px solid var(--bg-surface);
 }
 .v-mini .v-node .v-nd.r { background: var(--error); }
 .v-mini .v-node .v-nd.y { background: var(--accent-secondary); }
 .v-mini .v-node .v-nd.off { background: var(--text-tertiary); }
 .v-mini .v-more {
   position: absolute; width: 32px; height: 32px; border-radius: 9px;
-  border: 1px dashed rgba(255,255,255,0.16);
+  border: 1px dashed var(--tint-16);
   display: flex; align-items: center; justify-content: center;
-  font: 600 9px 'JetBrains Mono', monospace; color: var(--text-tertiary);
+  font: 600 9px 'IBM Plex Mono', monospace; color: var(--text-tertiary);
 }
-.v-mini .v-edge { position: absolute; height: 1px; background: rgba(255,255,255,0.12); }
+.v-mini .v-edge { position: absolute; height: 1px; background: var(--tint-12); }
 
 /* Lime primary button */
 .v-btn {
   background: var(--accent-primary); color: var(--accent-on);
   border: none; border-radius: 8px; padding: 9px 17px;
-  font: 700 12px 'JetBrains Mono', monospace; cursor: pointer;
+  font: 700 12px 'IBM Plex Mono', monospace; cursor: pointer;
   white-space: nowrap; flex-shrink: 0;
   transition: background 0.15s, transform 0.15s;
-  box-shadow: 0 2px 12px rgba(180, 227, 74, 0.22);
+  box-shadow: 0 2px 12px rgba(56, 189, 248, 0.22);
 }
 .v-btn:hover { background: var(--accent-primary); filter: brightness(1.1); transform: translateY(-1px); }
 .v-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
@@ -1538,47 +1578,51 @@ textarea {
 .v-btn-ghost {
   background: var(--surface-card); color: var(--text-secondary);
   border: 1px solid var(--border-subtle); border-radius: 8px; padding: 8px 16px;
-  font: 600 12px 'JetBrains Mono', monospace; cursor: pointer; transition: 0.15s;
+  font: 600 12px 'IBM Plex Mono', monospace; cursor: pointer; transition: 0.15s;
   white-space: nowrap; flex-shrink: 0;
 }
 .v-btn-ghost:hover { color: var(--text-primary); border-color: var(--border-default); }
 
 /* Env pill */
 .v-env {
-  font: 10px 'JetBrains Mono', monospace; letter-spacing: 0.1em;
+  font: 10px 'IBM Plex Mono', monospace; letter-spacing: 0.1em;
   color: var(--accent-primary); display: inline-flex; align-items: center; gap: 8px;
 }
 .v-env::before { content: ''; width: 5px; height: 5px; background: var(--accent-primary); }
 
-/* Table — mono body, quiet rows */
+/* Table — inset header bar, mono body, quiet rows */
 .v-tbl {
   background: var(--surface-card); border: 1px solid var(--border-subtle);
-  border-radius: 14px; overflow: hidden;
+  border-radius: 12px; overflow: hidden; padding: 7px 8px 4px;
 }
 .v-tbl table { width: 100%; border-collapse: collapse; }
 .v-tbl th {
-  text-align: left; font: 600 9px 'JetBrains Mono', monospace; letter-spacing: 0.2em;
-  color: var(--text-tertiary); padding: 11px 18px; border-bottom: 1px solid var(--border-subtle);
+  text-align: left; font: 500 9.5px 'IBM Plex Mono', monospace; letter-spacing: 0.14em;
+  text-transform: uppercase;
+  color: var(--text-tertiary); padding: 8px 14px;
+  background: var(--bg-surface);
 }
+.v-tbl th:first-child { border-radius: 7px 0 0 7px; }
+.v-tbl th:last-child { border-radius: 0 7px 7px 0; }
 .v-tbl td {
-  padding: 11.5px 18px; border-bottom: 1px solid rgba(255,255,255,0.035);
-  font: 11.5px 'JetBrains Mono', monospace; color: var(--text-secondary);
+  padding: 11.5px 14px; border-bottom: 1px solid var(--border-subtle);
+  font: 11.5px 'IBM Plex Mono', monospace; color: var(--text-secondary);
 }
 .v-tbl tbody tr:last-child td { border-bottom: none; }
 .v-tbl tbody tr { transition: background 0.12s; }
-.v-tbl tbody tr:hover td { background: rgba(180,227,74,0.025); }
+.v-tbl tbody tr:hover td { background: rgba(56,189,248,0.025); }
 .v-tbl td.v-lead { color: var(--text-primary); font: 600 12.5px 'Inter', sans-serif; }
 
 /* Status pill */
 .v-st {
-  font: 600 9.5px 'JetBrains Mono', monospace; letter-spacing: 0.1em;
+  font: 600 9.5px 'IBM Plex Mono', monospace; letter-spacing: 0.1em;
   padding: 3px 9px; border-radius: 5px; display: inline-block;
 }
 .v-st-ok { background: var(--success-soft); color: var(--success); }
 .v-st-run { background: var(--info-soft); color: var(--info); }
 .v-st-warn { background: var(--warning-soft); color: var(--warning); }
 .v-st-fail { background: var(--error-soft); color: var(--error); }
-.v-st-off { background: rgba(255,255,255,0.06); color: var(--text-tertiary); }
+.v-st-off { background: var(--tint-06); color: var(--text-tertiary); }
 
 /* Ticker segments */
 .v-tick { display: flex; align-items: center; gap: 7px; color: var(--text-tertiary); }
@@ -1639,7 +1683,7 @@ textarea {
 .docs-article li { margin: 4px 0; }
 .docs-article li::marker { color: var(--text-tertiary); }
 .docs-article code {
-  font-family: 'JetBrains Mono', monospace;
+  font-family: 'IBM Plex Mono', monospace;
   font-size: 12px;
   background: var(--surface-muted);
   border: 1px solid var(--border-subtle);
@@ -1700,11 +1744,11 @@ textarea {
 .canvas-pill {
   display: inline-flex;
   align-items: center;
-  background: rgba(19, 21, 24, 0.82);
+  background: color-mix(in srgb, var(--surface-card) 82%, transparent);
   backdrop-filter: blur(16px);
   -webkit-backdrop-filter: blur(16px);
-  border: 1px solid var(--border-default);
-  border-radius: 999px;
+  border: 1px solid var(--tint-10);
+  border-radius: 9px;
   box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
 }
 
@@ -1712,10 +1756,10 @@ textarea {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  min-width: 30px;
-  height: 30px;
+  min-width: 28px;
+  height: 28px;
   padding: 0 6px;
-  border-radius: 999px;
+  border-radius: 6px;
   color: var(--text-tertiary);
   transition: color 0.15s ease, background 0.15s ease;
 }
@@ -1774,3 +1818,480 @@ textarea {
     animation: none;
   }
 }
+
+/* ============================================
+   SENTRY SYSTEM — shared primitives
+   ============================================ */
+
+/* Bordered icon chip (card + stat headers) */
+.s-ibox {
+  width: 26px;
+  height: 26px;
+  border-radius: 7px;
+  background: var(--bg-overlay);
+  border: 1px solid var(--border-default);
+  display: grid;
+  place-items: center;
+  flex: none;
+  color: var(--text-secondary);
+}
+.s-ibox svg { width: 13.5px; height: 13.5px; }
+
+/* Ghost accent button ("+ Add server") */
+.s-btn-accent {
+  display: inline-flex;
+  align-items: center;
+  gap: 7px;
+  background: var(--accent-primary-soft);
+  border: 1px solid var(--border-strong);
+  color: var(--accent-primary);
+  font-weight: 600;
+  font-size: 12.5px;
+  border-radius: 8px;
+  padding: 8px 15px;
+  cursor: pointer;
+  transition: filter 0.15s;
+  white-space: nowrap;
+}
+.s-btn-accent:hover { filter: brightness(1.25); }
+.s-btn-accent:disabled { opacity: 0.5; cursor: not-allowed; }
+
+/* Quiet bordered button ("View alerts") */
+.s-btn-quiet {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  background: var(--bg-overlay);
+  border: 1px solid var(--border-default);
+  color: var(--text-primary);
+  font-weight: 500;
+  font-size: 12.5px;
+  border-radius: 8px;
+  padding: 8px 15px;
+  cursor: pointer;
+  transition: filter 0.15s, border-color 0.15s;
+  white-space: nowrap;
+}
+.s-btn-quiet:hover { filter: brightness(1.3); }
+.s-btn-quiet:disabled { opacity: 0.5; cursor: not-allowed; }
+
+/* 35px bordered square icon button */
+.s-icon-btn {
+  width: 35px;
+  height: 35px;
+  border-radius: 8px;
+  background: var(--bg-overlay);
+  border: 1px solid var(--border-default);
+  display: grid;
+  place-items: center;
+  color: var(--text-tertiary);
+  cursor: pointer;
+  transition: filter 0.15s, color 0.15s;
+  flex: none;
+}
+.s-icon-btn:hover { filter: brightness(1.3); color: var(--text-primary); }
+.s-icon-btn svg { width: 14px; height: 14px; }
+
+/* Delta pill */
+.s-delta {
+  font: 600 10px 'IBM Plex Mono', monospace;
+  border-radius: 5px;
+  padding: 3.5px 6.5px;
+  letter-spacing: 0.01em;
+  display: inline-flex;
+  align-items: center;
+  gap: 3px;
+}
+.s-delta.up { color: var(--success); background: var(--success-soft); }
+.s-delta.down { color: var(--error); background: var(--error-soft); }
+
+/* Inset callout box (anomalies, hints) */
+.s-inset {
+  border: 1px solid var(--border-subtle);
+  border-radius: 10px;
+  background: var(--bg-surface);
+  padding: 10px 12px;
+}
+
+/* Card header row: chip + title + trailing */
+.s-cardhead {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 12px 16px;
+}
+.s-cardhead .s-t { font-size: 14px; font-weight: 600; color: var(--text-primary); font-family: 'Inter', sans-serif; letter-spacing: -0.01em; }
+.s-cardhead .s-trail { margin-left: auto; display: flex; align-items: center; gap: 8px; }
+
+/* Filter/sort select chip */
+.s-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  background: var(--bg-overlay);
+  border: 1px solid var(--border-default);
+  color: var(--text-secondary);
+  font-size: 12px;
+  font-weight: 500;
+  border-radius: 7px;
+  padding: 6px 10px;
+  cursor: pointer;
+  transition: color 0.15s, border-color 0.15s;
+  white-space: nowrap;
+}
+.s-chip:hover { color: var(--text-primary); }
+
+/* Stat card with divider footer */
+.s-stat {
+  background: var(--surface-card);
+  border: 1px solid var(--border-subtle);
+  border-radius: 12px;
+  overflow: hidden;
+}
+.s-stat .s-stat-foot {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  border-top: 1px solid var(--border-subtle);
+  padding: 10px 16px 11px;
+  background: var(--bg-surface);
+  font-size: 11px;
+  color: var(--text-tertiary);
+}
+
+/* Uniform tick strip (resource bars — all ticks same height) */
+.s-ticks { display: flex; gap: 2.5px; height: 15px; }
+.s-ticks i { flex: 1; border-radius: 1px; background: var(--border-default); }
+.s-ticks i.on { background: var(--accent-primary); }
+.s-ticks i.warn { background: var(--warning); }
+
+/* Card + card-head accent text */
+.s-card {
+  background: var(--surface-card);
+  border: 1px solid var(--border-subtle);
+  border-radius: 12px;
+}
+.s-card .s-ta { color: var(--accent-primary); font-weight: 500; font-size: 12px; }
+
+/* Segmented icon group */
+.s-seg {
+  display: inline-flex;
+  background: var(--bg-overlay);
+  border: 1px solid var(--border-default);
+  border-radius: 8px;
+  overflow: hidden;
+}
+.s-seg button {
+  width: 32px;
+  height: 30px;
+  display: grid;
+  place-items: center;
+  color: var(--text-tertiary);
+  border-right: 1px solid var(--border-default);
+  transition: filter 0.15s, color 0.15s;
+}
+.s-seg button:last-child { border-right: none; }
+.s-seg button.on { background: var(--nav-active); color: var(--text-primary); }
+.s-seg button:hover { color: var(--text-primary); }
+.s-seg button svg { width: 13px; height: 13px; }
+
+/* Data table — inset header bar, hairline rows */
+.s-dt-head {
+  display: grid;
+  align-items: center;
+  gap: 10px;
+  background: var(--bg-overlay);
+  border-radius: 8px;
+  margin: 2px 14px 6px;
+  padding: 9px 13px;
+  font-size: 11px;
+  font-weight: 500;
+  color: var(--text-tertiary);
+}
+.s-dt-h { display: flex; align-items: center; gap: 5px; white-space: nowrap; user-select: none; }
+.s-dt-h.sortable { cursor: pointer; }
+.s-dt-h.sortable:hover { color: var(--text-secondary); }
+.s-dt-h.on { color: var(--text-primary); }
+.s-dt-row {
+  display: grid;
+  align-items: center;
+  gap: 10px;
+  margin: 0 14px;
+  padding: 12px 13px;
+  border-bottom: 1px solid var(--border-subtle);
+  font-size: 12.5px;
+  color: var(--text-secondary);
+}
+.s-dt-row:last-child { border-bottom: none; }
+.s-dt-row:hover { background: var(--tint-03); }
+.s-dt-row.clickable { cursor: pointer; }
+
+/* Square checkbox */
+.s-ck {
+  width: 14px;
+  height: 14px;
+  border: 1.5px solid var(--border-default);
+  border-radius: 4px;
+  display: inline-block;
+  cursor: pointer;
+  vertical-align: -2px;
+  position: relative;
+  background: var(--bg-surface);
+}
+.s-ck.on { background: var(--accent-primary); border-color: var(--accent-primary); }
+.s-ck.on::after {
+  content: "";
+  position: absolute;
+  left: 3.5px;
+  top: 0.5px;
+  width: 4px;
+  height: 8px;
+  border: solid var(--bg-void);
+  border-width: 0 1.5px 1.5px 0;
+  transform: rotate(42deg);
+}
+
+/* Anomaly list items — accent square bullet */
+.s-anomaly-item {
+  display: flex;
+  gap: 9px;
+  align-items: center;
+  font-size: 11.5px;
+  color: var(--text-secondary);
+  padding: 3.5px 0;
+}
+.s-anomaly-item::before {
+  content: "";
+  width: 6px;
+  height: 6px;
+  border-radius: 1.5px;
+  background: var(--accent-primary);
+  flex: none;
+}
+
+/* ============================================
+   GLOBAL FIELD BASELINE — Sentry grammar.
+   Element selectors sit below utilities; existing
+   class-based overrides still win where set.
+   ============================================ */
+input:not([type='checkbox']):not([type='radio']):not([type='range']):not([type='file']):not([type='hidden']),
+select,
+textarea {
+  font-family: 'IBM Plex Mono', ui-monospace, monospace;
+  font-size: 12.5px;
+  color: var(--text-primary);
+  caret-color: var(--accent-primary);
+}
+input:not([type='checkbox']):not([type='radio']):not([type='range']):not([type='file']):not([type='hidden']):focus-visible,
+select:focus-visible,
+textarea:focus-visible {
+  outline: none;
+  border-color: var(--accent-primary) !important;
+  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent-primary) 18%, transparent);
+}
+input::placeholder,
+textarea::placeholder {
+  color: var(--text-muted);
+}
+select option {
+  background: var(--surface-card);
+  color: var(--text-primary);
+}
+
+/* ============================================
+   APP SHELL — design/23-sentry chrome.
+   Fixed rail: brand + nav groups + user card.
+   Topbar: mono search + utility icons.
+   ============================================ */
+.shell-side {
+  background: var(--bg-base);
+  border-right: 1px solid var(--border-subtle);
+  transition: width 0.2s ease;
+}
+
+.shell-mark {
+  border-radius: 7px;
+  background: var(--accent-primary);
+  color: var(--accent-on);
+}
+
+.shell-collapse {
+  border-radius: 6px;
+  color: var(--text-tertiary);
+  transition: color 0.15s ease, background 0.15s ease;
+}
+.shell-collapse:hover {
+  color: var(--text-primary);
+  background: var(--surface-muted);
+}
+
+.shell-nav-group {
+  padding: 0 12px 8px;
+  font-size: 10px;
+  font-weight: 500;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--text-muted);
+}
+
+.shell-ni {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  width: 100%;
+  text-align: left;
+  padding: 11px 12px;
+  border-radius: 9px;
+  color: var(--text-secondary);
+  font-size: 13px;
+  font-weight: 500;
+  transition: color 0.15s ease, background 0.15s ease;
+}
+.shell-ni svg {
+  color: var(--text-tertiary);
+  flex: none;
+  transition: color 0.15s ease;
+}
+.shell-ni:hover {
+  color: var(--text-primary);
+  background: var(--surface-muted);
+}
+.shell-ni.on {
+  background: var(--nav-active);
+  color: var(--text-primary);
+}
+.shell-ni.on svg {
+  color: var(--accent-primary);
+}
+
+.shell-user {
+  display: flex;
+  align-items: center;
+  gap: 11px;
+  background: var(--bg-overlay);
+  border: 1px solid var(--border-default);
+  border-radius: 12px;
+  padding: 9px 11px;
+  transition: filter 0.15s ease;
+}
+.shell-user:hover {
+  filter: brightness(1.25);
+}
+.shell-avatar {
+  width: 28px;
+  height: 28px;
+  border-radius: 7px;
+  background: var(--accent-primary);
+  color: var(--accent-on);
+  display: grid;
+  place-items: center;
+  font-size: 10.5px;
+  font-weight: 600;
+  font-family: 'IBM Plex Mono', monospace;
+  flex: none;
+}
+
+.shell-top {
+  padding: 12px 26px;
+  border-bottom: 1px solid var(--border-subtle);
+}
+
+.shell-search {
+  display: flex;
+  align-items: center;
+  gap: 9px;
+  background: var(--bg-overlay);
+  border: 1px solid var(--border-default);
+  border-radius: 8px;
+  padding: 8px 12px;
+  color: var(--text-tertiary);
+  font-size: 12px;
+  width: 302px;
+  text-align: left;
+  transition: border-color 0.15s ease, color 0.15s ease;
+}
+.shell-search:hover {
+  border-color: var(--tint-16);
+  color: var(--text-secondary);
+}
+.shell-search kbd {
+  margin-left: auto;
+  font-family: 'IBM Plex Mono', monospace;
+  font-size: 11px;
+  font-weight: 500;
+  color: var(--text-tertiary);
+  border: 1px solid var(--border-default);
+  border-radius: 4px;
+  padding: 1px 6px;
+}
+
+.shell-tic {
+  position: relative;
+  display: grid;
+  place-items: center;
+  width: 32px;
+  height: 32px;
+  border-radius: 8px;
+  color: var(--text-tertiary);
+  transition: color 0.15s ease, background 0.15s ease;
+}
+.shell-tic:hover {
+  color: var(--text-primary);
+  background: var(--surface-muted);
+}
+.shell-tic-dot {
+  position: absolute;
+  top: 4px;
+  right: 5px;
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: var(--accent-primary);
+  border: 1.5px solid var(--bg-void);
+}
+
+/* Chart tooltip — .tip from design/23-sentry */
+.s-tip {
+  pointer-events: none;
+  background: var(--bg-overlay);
+  border: 1px solid var(--border-default);
+  border-radius: 10px;
+  padding: 10px 0 8px;
+  white-space: nowrap;
+  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.55);
+  min-width: 200px;
+}
+.s-tip-t {
+  font-size: 11px;
+  color: var(--text-secondary);
+  padding: 0 13px 8px;
+  border-bottom: 1px solid var(--border-subtle);
+  margin-bottom: 5px;
+  font-weight: 500;
+}
+.s-tip-r {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  font-size: 11.5px;
+  color: var(--text-secondary);
+  padding: 3.5px 13px;
+  gap: 26px;
+  font-weight: 500;
+}
+.s-tip-r i {
+  width: 7px;
+  height: 7px;
+  border-radius: 2px;
+  display: inline-block;
+  margin-right: 9px;
+}
+.s-tip-r b {
+  color: var(--text-primary);
+  font-weight: 600;
+}
+.s-tip-r b small {
+  color: var(--text-tertiary);
+  font-weight: 400;
+  margin-left: 3px;
+}
diff --git a/app/frontend/src/lib/api-client.ts b/app/frontend/src/lib/api-client.ts
index 2344e7f..837dc59 100644
--- a/app/frontend/src/lib/api-client.ts
+++ b/app/frontend/src/lib/api-client.ts
@@ -1239,9 +1239,17 @@ export type AgentContainer = {
   created_at?: string;
 };
 
+type RawAgentContainer = Omit<AgentContainer, 'status'> & {
+  status?: string | { state?: string; health?: string };
+};
+
 export async function listAgentContainers(id: string): Promise<AgentContainer[]> {
-  const payload = await requestJson<{ containers?: AgentContainer[] }>(`/agents/${id}/containers`);
-  return payload.containers ?? [];
+  const payload = await requestJson<{ containers?: RawAgentContainer[] }>(`/agents/${id}/containers`);
+  // The wire sends status as a Docker state object — flatten to its state string.
+  return (payload.containers ?? []).map((c) => ({
+    ...c,
+    status: typeof c.status === 'string' ? c.status : c.status?.state || '—',
+  }));
 }
 
 export type AgentCommand = {
diff --git a/app/frontend/src/lib/time.ts b/app/frontend/src/lib/time.ts
index 1aa01cc..475a032 100644
--- a/app/frontend/src/lib/time.ts
+++ b/app/frontend/src/lib/time.ts
@@ -13,6 +13,11 @@ export function formatRelative(iso?: string): string {
   const hour = 60 * minute;
   const day = 24 * hour;
 
+  // Future-dated or year-plus-old timestamps are effectively meaningless —
+  // surface them as absent rather than "739898d ago".
+  if (diffMs < 0 || diffMs > 365 * day) {
+    return 'n/a';
+  }
   if (diffMs < minute) {
     return 'just now';
   }
diff --git a/app/frontend/src/shared/components/Card.tsx b/app/frontend/src/shared/components/Card.tsx
index af9cd60..180f1a9 100644
--- a/app/frontend/src/shared/components/Card.tsx
+++ b/app/frontend/src/shared/components/Card.tsx
@@ -77,12 +77,12 @@ export function CardHeader({ title, description, icon, action, className = '', .
     <div className={`flex items-start justify-between gap-4 ${className}`} {...props}>
       <div className="flex items-start gap-3">
         {icon && (
-          <div className="w-10 h-10 rounded-xl flex items-center justify-center flex-shrink-0 ring-1 ring-white/5" style={{ background: 'rgba(255,255,255,0.07)' }}>
+          <div className="w-10 h-10 rounded-xl flex items-center justify-center flex-shrink-0 ring-1 ring-[var(--tint-05)]" style={{ background: 'var(--tint-07)' }}>
             {icon}
           </div>
         )}
         <div>
-          <h3 className="text-lg font-semibold text-[var(--text-primary)] tracking-tight">{title}</h3>
+          <h3 className="font-headline text-base font-semibold text-[var(--text-primary)] tracking-tight">{title}</h3>
           {description && (
             <p className="text-sm text-[var(--text-secondary)] mt-0.5">{description}</p>
           )}
diff --git a/app/frontend/src/shared/components/Charts.tsx b/app/frontend/src/shared/components/Charts.tsx
index 020a9ed..b59e38a 100644
--- a/app/frontend/src/shared/components/Charts.tsx
+++ b/app/frontend/src/shared/components/Charts.tsx
@@ -68,7 +68,7 @@ function gradientId(prefix: string, color: string, index = 0) {
 
 export function LineChart({
   data,
-  color = '#b4e34a',
+  color = '#38bdf8',
   fillColor = 'transparent',
   height = 76,
   showDots = true,
@@ -181,7 +181,7 @@ export function MultiLineChart({
 
 export function LineMetricChart({
   data,
-  color = '#b4e34a',
+  color = '#38bdf8',
   fillOpacity = 0.15,
   height = 76,
   showArea = false,
@@ -204,8 +204,8 @@ export function DualLineChart({
   data1,
   data2,
   height = 58,
-  color1 = '#7ab8ff',
-  color2 = '#f2c94c',
+  color1 = 'var(--accent-primary)',
+  color2 = 'var(--warning)',
   fillOpacity1 = 0.15,
   fillOpacity2 = 0.15,
 }: DualLineChartProps) {
diff --git a/app/frontend/src/shared/components/CommandPalette.tsx b/app/frontend/src/shared/components/CommandPalette.tsx
index 65a580d..179a676 100644
--- a/app/frontend/src/shared/components/CommandPalette.tsx
+++ b/app/frontend/src/shared/components/CommandPalette.tsx
@@ -1,24 +1,25 @@
 import { useEffect, useState } from 'react';
 import { Command } from 'cmdk';
 import {
+  ArrowRight,
   Box,
+  CornerDownRight,
   Database,
-  Github,
-  Image,
   Clock,
   Search,
-  Settings,
-  FileText,
-  Activity,
-  LayoutGrid,
 } from 'lucide-react';
 
+export interface PaletteTarget {
+  label: string;
+  target: string;
+  description?: string;
+}
+
 interface CommandItem {
   id: string;
   label: string;
   description?: string;
   icon: typeof Box;
-  shortcut?: string;
   action: () => void;
   category?: string;
 }
@@ -27,14 +28,39 @@ interface CommandPaletteProps {
   open: boolean;
   onClose: () => void;
   onAddService?: (type: string) => void;
-  onNavigate?: (path: string) => void;
+  onNavigate?: (target: string) => void;
+  /** Navigate-group items; falls back to the full app route map. */
+  navTargets?: PaletteTarget[];
+  /** Extra searchable "Open …" rows, e.g. projects. */
+  openTargets?: PaletteTarget[];
 }
 
+const APP_NAV: PaletteTarget[] = [
+  { label: 'Dashboard', target: '/', description: 'Index — stats, nodes, deploys' },
+  { label: 'Projects', target: '/projects', description: 'All projects' },
+  { label: 'Templates', target: '/templates', description: 'Template catalog' },
+  { label: 'Builds', target: '/builds', description: 'Build pipeline' },
+  { label: 'Databases', target: '/databases', description: 'Managed databases' },
+  { label: 'Operations', target: '/operations', description: 'Backups, cron, maintenance' },
+  { label: 'Activity', target: '/activity', description: 'Platform event feed' },
+  { label: 'High Availability', target: '/ha', description: 'Failover & alerts' },
+  { label: 'Security', target: '/security', description: 'Access, sessions, secrets' },
+  { label: 'Usage', target: '/usage', description: 'Resource consumption' },
+  { label: 'People', target: '/people', description: 'Team & access control' },
+  { label: 'Audit Logs', target: '/settings/audit-logs', description: 'Recorded actions' },
+  { label: 'Webhooks', target: '/settings/webhooks', description: 'Signed event delivery' },
+  { label: 'Settings', target: '/settings', description: 'Platform preferences' },
+  { label: 'Docs', target: '/docs', description: 'Guides & reference' },
+  { label: 'Landing', target: '/landing', description: 'Public page' },
+];
+
 export function CommandPalette({
   open,
   onClose,
   onAddService,
   onNavigate,
+  navTargets,
+  openTargets,
 }: CommandPaletteProps) {
   if (!open) return null;
 
@@ -43,6 +69,8 @@ export function CommandPalette({
       onClose={onClose}
       onAddService={onAddService}
       onNavigate={onNavigate}
+      navTargets={navTargets}
+      openTargets={openTargets}
     />
   );
 }
@@ -51,6 +79,8 @@ function CommandPaletteContent({
   onClose,
   onAddService,
   onNavigate,
+  navTargets,
+  openTargets,
 }: Omit<CommandPaletteProps, 'open'>) {
   const [search, setSearch] = useState('');
 
@@ -66,119 +96,69 @@ function CommandPaletteContent({
     return () => document.removeEventListener('keydown', down);
   }, [onClose]);
 
-  const commands: CommandItem[] = [
-    {
-      id: 'add-web',
-      label: 'Add Web Service',
-      description: 'Deploy a web application',
-      icon: Box,
-      shortcut: 'W',
-      category: 'Create',
-      action: () => {
-        onAddService?.('web');
-        onClose();
+  const commands: CommandItem[] = [];
+
+  // Create items only exist where onAddService is wired — elsewhere the
+  // entries would silently no-op.
+  if (onAddService) {
+    commands.push(
+      {
+        id: 'add-web',
+        label: 'Add Web Service',
+        description: 'Deploy a web application',
+        icon: Box,
+        category: 'Create',
+        action: () => { onAddService('web'); onClose(); },
       },
-    },
-    {
-      id: 'add-worker',
-      label: 'Add Worker Service',
-      description: 'Deploy a background worker',
-      icon: Clock,
-      shortcut: 'K',
-      category: 'Create',
-      action: () => {
-        onAddService?.('worker');
-        onClose();
+      {
+        id: 'add-worker',
+        label: 'Add Worker Service',
+        description: 'Deploy a background worker',
+        icon: Clock,
+        category: 'Create',
+        action: () => { onAddService('worker'); onClose(); },
       },
-    },
-    {
-      id: 'add-database',
-      label: 'Add Database',
-      description: 'Provision a PostgreSQL database',
-      icon: Database,
-      shortcut: 'D',
-      category: 'Create',
-      action: () => {
-        onAddService?.('database');
-        onClose();
+      {
+        id: 'add-database',
+        label: 'Add Database',
+        description: 'Provision a PostgreSQL database',
+        icon: Database,
+        category: 'Create',
+        action: () => { onAddService('database'); onClose(); },
       },
-    },
-    {
-      id: 'add-cron',
-      label: 'Add Cron Job',
-      description: 'Schedule a recurring task',
-      icon: Clock,
-      category: 'Create',
-      action: () => {
-        onAddService?.('cron');
-        onClose();
+      {
+        id: 'add-cron',
+        label: 'Add Cron Job',
+        description: 'Schedule a recurring task',
+        icon: Clock,
+        category: 'Create',
+        action: () => { onAddService('cron'); onClose(); },
       },
-    },
-    {
-      id: 'connect-github',
-      label: 'Connect GitHub Repo',
-      description: 'Link a repository for auto-deploy',
-      icon: Github,
-      category: 'Connect',
-      action: () => {
-        onClose();
-      },
-    },
-    {
-      id: 'deploy-image',
-      label: 'Deploy Docker Image',
-      description: 'Deploy from a container registry',
-      icon: Image,
-      category: 'Connect',
-      action: () => {
-        onClose();
-      },
-    },
-    {
-      id: 'goto-canvas',
-      label: 'Go to Canvas',
-      icon: LayoutGrid,
-      shortcut: 'C',
-      category: 'Navigate',
-      action: () => {
-        onNavigate?.('canvas');
-        onClose();
-      },
-    },
-    {
-      id: 'goto-logs',
-      label: 'Go to Logs',
-      icon: FileText,
-      shortcut: 'L',
-      category: 'Navigate',
-      action: () => {
-        onNavigate?.('logs');
-        onClose();
-      },
-    },
-    {
-      id: 'goto-metrics',
-      label: 'Go to Metrics',
-      icon: Activity,
-      shortcut: 'M',
-      category: 'Navigate',
-      action: () => {
-        onNavigate?.('observability');
-        onClose();
-      },
-    },
-    {
-      id: 'goto-settings',
-      label: 'Go to Settings',
-      icon: Settings,
-      shortcut: 'S',
-      category: 'Navigate',
-      action: () => {
-        onNavigate?.('settings');
-        onClose();
-      },
-    },
-  ];
+    );
+  }
+
+  if (onNavigate) {
+    (navTargets ?? APP_NAV).forEach((t, i) =>
+      commands.push({
+        id: `nav-${i}`,
+        label: t.label,
+        description: t.description,
+        icon: CornerDownRight,
+        category: 'Navigate',
+        action: () => { onNavigate(t.target); onClose(); },
+      }),
+    );
+    (openTargets ?? []).forEach((t, i) =>
+      commands.push({
+        id: `open-${i}`,
+        label: t.label,
+        description: t.description,
+        icon: ArrowRight,
+        category: 'Open',
+        action: () => { onNavigate(t.target); onClose(); },
+      }),
+    );
+  }
 
   const filteredCommands = commands.filter(
     (cmd) =>
@@ -197,6 +177,10 @@ function CommandPaletteContent({
     {} as Record<string, CommandItem[]>
   );
 
+  const placeholder = onNavigate
+    ? 'Search pages, projects, actions…'
+    : 'What would you like to create?';
+
   return (
     <div className="fixed inset-0 z-50">
       <div
@@ -205,7 +189,7 @@ function CommandPaletteContent({
       />
       <div className="absolute left-1/2 top-[20%] -translate-x-1/2 w-full max-w-xl">
         <Command
-          className="panel overflow-hidden"
+          className="s-card !p-0 overflow-hidden shadow-2xl shadow-black/50"
           loop
         >
           <div className="flex items-center gap-3 px-4 py-3 border-b border-[var(--border-subtle)]">
@@ -213,7 +197,7 @@ function CommandPaletteContent({
             <Command.Input
               value={search}
               onValueChange={setSearch}
-              placeholder="What would you like to create?"
+              placeholder={placeholder}
               className="flex-1 bg-transparent text-[var(--text-primary)] placeholder:text-[var(--text-muted)] text-sm outline-none"
             />
             <kbd className="px-2 py-0.5 rounded bg-[var(--surface-muted)] text-[10px] font-mono text-[var(--text-muted)]">
@@ -228,7 +212,7 @@ function CommandPaletteContent({
 
             {Object.entries(groupedCommands).map(([category, items]) => (
               <Command.Group key={category} heading={category} className="mb-2">
-                <div className="px-2 py-1.5 text-[10px] font-semibold uppercase tracking-widest text-[var(--text-muted)]">
+                <div className="px-2 py-1.5 v-mono text-[10px] uppercase tracking-[0.14em] text-[var(--text-muted)]">
                   {category}
                 </div>
                 {items.map((item) => {
@@ -238,20 +222,15 @@ function CommandPaletteContent({
                       key={item.id}
                       value={item.label}
                       onSelect={item.action}
-                      className="flex items-center gap-3 px-3 py-2.5 rounded-[var(--radius-md)] cursor-pointer text-[var(--text-secondary)] hover:bg-[var(--surface-muted)] hover:text-[var(--text-primary)] aria-selected:bg-[var(--accent-primary-soft)] aria-selected:text-[var(--accent-primary)] transition-colors"
+                      className="flex items-center gap-3 px-3 py-2 rounded-[var(--radius-md)] cursor-pointer text-[var(--text-secondary)] hover:bg-[var(--surface-muted)] hover:text-[var(--text-primary)] aria-selected:bg-[var(--accent-primary-soft)] aria-selected:text-[var(--accent-primary)] transition-colors"
                     >
-                      <Icon size={18} className="text-[var(--text-muted)]" />
+                      <span className="s-ibox !h-7 !w-7"><Icon size={13.5} /></span>
                       <div className="flex-1">
                         <div className="text-sm font-medium">{item.label}</div>
                         {item.description && (
                           <div className="text-xs text-[var(--text-muted)]">{item.description}</div>
                         )}
                       </div>
-                      {item.shortcut && (
-                        <kbd className="px-2 py-0.5 rounded bg-[var(--surface-muted)] text-[10px] font-mono text-[var(--text-muted)]">
-                          {item.shortcut}
-                        </kbd>
-                      )}
                     </Command.Item>
                   );
                 })}
diff --git a/app/frontend/src/shared/components/DemoGate.tsx b/app/frontend/src/shared/components/DemoGate.tsx
index 7291a19..cc2b87a 100644
--- a/app/frontend/src/shared/components/DemoGate.tsx
+++ b/app/frontend/src/shared/components/DemoGate.tsx
@@ -8,15 +8,15 @@ import { Sparkles } from 'lucide-react';
 export function DemoRestricted({ feature }: { feature: string }) {
   return (
     <div className="flex min-h-[60vh] items-center justify-center p-8">
-      <div className="panel max-w-md p-8 text-center">
-        <div className="mx-auto mb-4 flex h-12 w-12 items-center justify-center rounded-full bg-[var(--accent-primary-soft)]">
-          <Sparkles size={22} className="text-[var(--accent-primary)]" />
+      <div className="s-card max-w-md text-center">
+        <div className="s-ibox mx-auto mb-4 !h-10 !w-10">
+          <Sparkles size={18} />
         </div>
-        <p className="text-lg font-semibold text-[var(--text-primary)]">Not part of the demo</p>
+        <p className="font-headline text-[17px] font-semibold text-[var(--text-primary)]">Not part of the demo</p>
         <p className="mt-2 text-sm text-[var(--text-secondary)]">
           {feature} needs a live Containr session. The demo covers sample projects, services, and platform views only.
         </p>
-        <Link to="/projects?demo=1" className="v-btn mt-5 inline-flex">
+        <Link to="/projects?demo=1" className="s-btn-accent mt-5 inline-flex">
           Back to demo projects
         </Link>
       </div>
diff --git a/app/frontend/src/shared/components/DonutChart.tsx b/app/frontend/src/shared/components/DonutChart.tsx
index 55d2039..7ee45c5 100644
--- a/app/frontend/src/shared/components/DonutChart.tsx
+++ b/app/frontend/src/shared/components/DonutChart.tsx
@@ -17,8 +17,8 @@ export function DonutChart({
   percentage,
   size = 160,
   thickness = 16,
-  color = '#b4e34a',
-  trackColor = 'rgba(255, 255, 255, 0.07)',
+  color = '#38bdf8',
+  trackColor = 'var(--tint-07)',
   segments = 28,
   gap = 0.048,
   animated = true,
diff --git a/app/frontend/src/shared/components/EnhancedMetricCard.tsx b/app/frontend/src/shared/components/EnhancedMetricCard.tsx
index bbbd90e..e42315e 100644
--- a/app/frontend/src/shared/components/EnhancedMetricCard.tsx
+++ b/app/frontend/src/shared/components/EnhancedMetricCard.tsx
@@ -1,4 +1,5 @@
 import { type ReactNode } from 'react';
+import { ChevronRight, MoreHorizontal } from 'lucide-react';
 
 interface EnhancedMetricCardProps {
   title: string;
@@ -15,6 +16,42 @@ interface EnhancedMetricCardProps {
   horizontal?: boolean;
 }
 
+const statusColors: Record<string, string> = {
+  good: 'var(--success)',
+  average: 'var(--warning)',
+  warning: 'var(--warning)',
+};
+
+function CardHead({ icon, title }: { icon: ReactNode; title: string }) {
+  return (
+    <div className="s-cardhead">
+      <span className="s-ibox">{icon}</span>
+      <span className="text-[11.5px] font-medium text-[var(--text-secondary)] whitespace-nowrap">{title}</span>
+      <span className="ml-auto text-[var(--text-tertiary)]">
+        <MoreHorizontal size={14} />
+      </span>
+    </div>
+  );
+}
+
+function CardFoot({ label, onClick }: { label: string; onClick?: () => void }) {
+  return (
+    <div className="s-stat-foot mt-auto">
+      <span
+        onClick={onClick}
+        className="cursor-pointer hover:text-[var(--text-secondary)] transition-colors"
+      >
+        {label}
+      </span>
+      {onClick && (
+        <button className="s-icon-btn !w-[26px] !h-[26px]" onClick={onClick} title={label}>
+          <ChevronRight size={12} />
+        </button>
+      )}
+    </div>
+  );
+}
+
 export function EnhancedMetricCard({
   title,
   value,
@@ -29,75 +66,23 @@ export function EnhancedMetricCard({
   animationDelay = 0,
   horizontal = false,
 }: EnhancedMetricCardProps) {
-  const statusColors: Record<string, string> = {
-    good: '#5ee6a0',
-    average: '#f2c94c',
-    warning: '#f2c94c',
-  };
-
-  // Horizontal layout for cards like Active User
   if (horizontal) {
     return (
-      <div
-        className={`card ${className}`}
-        style={{
-          display: 'flex',
-          flexDirection: 'row',
-          padding: 0,
-          overflow: 'hidden',
-          animationDelay: `${animationDelay}s`,
-        }}
-      >
-        <div style={{
-          flex: 1,
-          padding: '20px 18px 18px 20px',
-          display: 'flex',
-          flexDirection: 'column',
-        }}>
-          <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 12 }}>
-            <div className="card-icon">{icon}</div>
-            <span style={{ fontSize: 14, fontWeight: 600, color: '#e8e9f0' }}>{title}</span>
-          </div>
-          <div style={{
-            fontSize: 36,
-            fontWeight: 900,
-            letterSpacing: '-1.5px',
-            lineHeight: 1,
-            color: '#e8e9f0',
-          }}>
-            {value}
-          </div>
-          {subtitle && (
-            <div style={{ fontSize: 12, color: '#6b6e7d', marginTop: 4 }}>{subtitle}</div>
-          )}
-          {details && <div style={{ marginTop: 12 }}>{details}</div>}
-          <div style={{
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'space-between',
-            marginTop: 'auto',
-            paddingTop: 14,
-          }}>
-            <span
-              style={{ fontSize: 13, color: '#6b6e7d', fontWeight: 500, cursor: 'pointer' }}
-              onClick={onClick}
-            >
-              Details
-            </span>
-            <div className="arrow-btn" onClick={onClick}>
-              <svg viewBox="0 0 24 24" fill="none" stroke="white" strokeWidth={2.5} strokeLinecap="round" strokeLinejoin="round">
-                <polyline points="9 18 15 12 9 6" />
-              </svg>
+      <div className={`s-card flex flex-row overflow-hidden ${className}`} style={{ animationDelay: `${animationDelay}s` }}>
+        <div className="flex flex-1 flex-col">
+          <CardHead icon={icon} title={title} />
+          <div className="px-4">
+            <div className="font-headline text-[32px] font-bold leading-none tracking-[-0.025em] text-[var(--text-primary)]">
+              {value}
             </div>
+            {subtitle && <div className="mt-1 text-[11.5px] text-[var(--text-tertiary)]">{subtitle}</div>}
+            {details && <div className="mt-3">{details}</div>}
           </div>
+          <div className="mt-4" />
+          <CardFoot label="Details" onClick={onClick} />
         </div>
         {chart && (
-          <div style={{
-            width: '50%',
-            padding: '16px 14px 46px 0',
-            display: 'flex',
-            alignItems: 'flex-end',
-          }}>
+          <div className="flex w-1/2 items-end py-3 pr-3.5">
             {chart}
           </div>
         )}
@@ -105,64 +90,25 @@ export function EnhancedMetricCard({
     );
   }
 
-  // Standard vertical card layout - matching self.html exactly
   return (
-    <div
-      className={`card ${className}`}
-      style={{
-        display: 'flex',
-        flexDirection: 'column',
-        padding: 20,
-        animationDelay: `${animationDelay}s`,
-      }}
-    >
-      <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 12 }}>
-        <div className="card-icon">{icon}</div>
-        <span style={{ fontSize: 14, fontWeight: 600, color: '#e8e9f0' }}>{title}</span>
-      </div>
-
-      <div style={{
-        fontSize: 38,
-        fontWeight: 900,
-        letterSpacing: '-1.5px',
-        lineHeight: 1,
-        color: '#e8e9f0',
-      }}>
-        {value}
-      </div>
-
-      {(subtitle || statusText) && (
-        <div style={{ fontSize: 12, color: '#6b6e7d', marginTop: 4 }}>
-          {statusText && status && (
-            <span style={{ color: statusColors[status], fontWeight: 700 }}>{statusText}</span>
-          )}{' '}
-          {subtitle}
-        </div>
-      )}
-
-      {chart && <div style={{ marginTop: 12, marginBottom: 6 }}>{chart}</div>}
-
-      {details && <div style={{ marginTop: 16 }}>{details}</div>}
-
-      <div style={{ 
-        display: 'flex', 
-        alignItems: 'center', 
-        justifyContent: 'space-between', 
-        paddingTop: 4, 
-        marginTop: 'auto' 
-      }}>
-        <span
-          onClick={onClick}
-          style={{ fontSize: 13, color: '#6b6e7d', fontWeight: 500, cursor: 'pointer' }}
-        >
-          Details
-        </span>
-        <div className="arrow-btn" onClick={onClick}>
-          <svg viewBox="0 0 24 24" fill="none" stroke="white" strokeWidth={2.5} strokeLinecap="round" strokeLinejoin="round">
-            <polyline points="9 18 15 12 9 6" />
-          </svg>
+    <div className={`s-card flex flex-col ${className}`} style={{ animationDelay: `${animationDelay}s` }}>
+      <CardHead icon={icon} title={title} />
+      <div className="px-4 pb-1">
+        <div className="font-headline text-[32px] font-bold leading-none tracking-[-0.025em] text-[var(--text-primary)]">
+          {value}
         </div>
+        {(subtitle || statusText) && (
+          <div className="mt-1.5 text-[11.5px] text-[var(--text-tertiary)]">
+            {statusText && status && (
+              <span className="font-semibold" style={{ color: statusColors[status] }}>{statusText}</span>
+            )}{' '}
+            {subtitle}
+          </div>
+        )}
+        {chart && <div className="mt-3 mb-1">{chart}</div>}
+        {details && <div className="mt-3">{details}</div>}
       </div>
+      <CardFoot label="Details" onClick={onClick} />
     </div>
   );
 }
@@ -186,118 +132,56 @@ export function CacheMetricCard({
   const nonCachePercent = Math.round((nonCacheMB / totalMB) * 100);
 
   return (
-    <div
-      className="card"
-      style={{
-        display: 'flex',
-        flexDirection: 'column',
-        padding: 20,
-        animationDelay: `${animationDelay}s`,
-      }}
-    >
-      <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 12 }}>
-        <div className="card-icon">
-          <svg viewBox="0 0 24 24" fill="none" stroke="#9295a4" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
-            <polyline points="3 6 5 6 21 6"/>
-            <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/>
+    <div className="s-card flex flex-col" style={{ animationDelay: `${animationDelay}s` }}>
+      <CardHead
+        icon={
+          <svg viewBox="0 0 24 24" width="13.5" height="13.5" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
+            <polyline points="3 6 5 6 21 6" />
+            <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" />
           </svg>
+        }
+        title="Cache"
+      />
+      <div className="px-4">
+        <div className="font-headline text-[32px] font-bold leading-none tracking-[-0.025em] text-[var(--text-primary)]">
+          {totalMB} <span className="text-[12px] font-medium text-[var(--text-tertiary)]">MB</span>
         </div>
-        <span style={{ fontSize: 14, fontWeight: 600, color: '#e8e9f0' }}>Cache</span>
-      </div>
-
-      <div style={{
-        fontSize: 38,
-        fontWeight: 900,
-        letterSpacing: '-1.5px',
-        lineHeight: 1,
-        color: '#e8e9f0',
-      }}>
-        {totalMB} MB
-      </div>
-
-      <div style={{ fontSize: 12, color: '#6b6e7d', marginTop: 4 }}>
-        <span style={{ color: '#f2c94c', fontWeight: 700 }}>{Math.round(totalMB * 0.625)}MB Average</span> cached images and files
-      </div>
-
-      {/* Segmented Bar */}
-      <div style={{ display: 'flex', alignItems: 'center', gap: 5, margin: '16px 0 15px', height: 32 }}>
-        <div 
-          className="cache-seg" 
-          style={{ 
-            width: `${cachePercent}%`, 
-            background: '#ff6b5b', 
-            borderRadius: '10px 4px 4px 10px' 
-          }} 
-        />
-        <div 
-          className="cache-seg" 
-          style={{ 
-            width: `${nonCachePercent}%`, 
-            background: '#8c6ef0', 
-            borderRadius: '5px' 
-          }} 
-        />
-        <div 
-          className="cache-seg" 
-          style={{ 
-            flex: 1, 
-            background: 'rgba(255,255,255,0.07)', 
-            borderRadius: '4px 10px 10px 4px' 
-          }} 
-        />
-      </div>
-
-      {/* Stats Row */}
-      <div style={{ 
-        display: 'grid', 
-        gridTemplateColumns: '1fr auto 1fr auto 1fr', 
-        gap: 0, 
-        alignItems: 'stretch' 
-      }}>
-        <div>
-          <div style={{ display: 'flex', alignItems: 'center', gap: 5, fontSize: 11, color: '#6b6e7d', marginBottom: 5 }}>
-            <div className="stat-dot" style={{ background: '#ff6b5b' }} /> Cache
-          </div>
-          <div style={{ display: 'flex', alignItems: 'baseline', gap: 4 }}>
-            <span style={{ fontSize: 15, fontWeight: 800 }}>{cacheMB} MB</span>
-            <span style={{ fontSize: 11, color: '#6b6e7d' }}>{cachePercent}%</span>
-          </div>
+        <div className="mt-1.5 text-[11.5px] text-[var(--text-tertiary)]">
+          <span className="font-semibold text-[var(--warning)]">{Math.round(totalMB * 0.625)}MB average</span> cached images and files
         </div>
-        <div style={{ width: 1, background: 'rgba(255,255,255,0.08)', margin: '0 16px' }} />
-        <div>
-          <div style={{ display: 'flex', alignItems: 'center', gap: 5, fontSize: 11, color: '#6b6e7d', marginBottom: 5 }}>
-            <div className="stat-dot" style={{ background: '#8c6ef0' }} /> Non-Cache
-          </div>
-          <div style={{ display: 'flex', alignItems: 'baseline', gap: 4 }}>
-            <span style={{ fontSize: 15, fontWeight: 800 }}>{nonCacheMB} MB</span>
-            <span style={{ fontSize: 11, color: '#6b6e7d' }}>{nonCachePercent}%</span>
-          </div>
+
+        {/* Segmented bar */}
+        <div className="my-4 flex h-8 items-center gap-1">
+          <div className="h-full rounded-l-md" style={{ width: `${cachePercent}%`, background: 'var(--error)' }} />
+          <div className="h-full" style={{ width: `${nonCachePercent}%`, background: 'var(--accent-tertiary)' }} />
+          <div className="h-full flex-1 rounded-r-md bg-[var(--tint-07)]" />
         </div>
-        <div style={{ width: 1, background: 'rgba(255,255,255,0.08)', margin: '0 16px' }} />
-        <div>
-          <div style={{ fontSize: 11, color: '#6b6e7d', marginBottom: 5 }}>Total</div>
-          <div style={{ fontSize: 15, fontWeight: 800 }}>{totalMB * 5} GB</div>
-        </div>
-      </div>
 
-      <div style={{ 
-        display: 'flex', 
-        alignItems: 'center', 
-        justifyContent: 'space-between', 
-        paddingTop: 16 
-      }}>
-        <span
-          onClick={onClick}
-          style={{ fontSize: 13, color: '#6b6e7d', fontWeight: 500, cursor: 'pointer' }}
-        >
-          Details
-        </span>
-        <div className="arrow-btn" onClick={onClick}>
-          <svg viewBox="0 0 24 24" fill="none" stroke="white" strokeWidth={2.5} strokeLinecap="round" strokeLinejoin="round">
-            <polyline points="9 18 15 12 9 6" />
-          </svg>
+        {/* Stats row */}
+        <div className="grid grid-cols-[1fr_auto_1fr_auto_1fr] items-stretch">
+          {[
+            { dot: 'var(--error)', label: 'Cache', value: `${cacheMB} MB`, pct: `${cachePercent}%` },
+            { dot: 'var(--accent-tertiary)', label: 'Non-Cache', value: `${nonCacheMB} MB`, pct: `${nonCachePercent}%` },
+            { dot: null, label: 'Total', value: `${totalMB * 5} GB`, pct: '' },
+          ].map((s, i) => (
+            <div key={s.label} className="contents">
+              {i > 0 && <div className="mx-4 w-px bg-[var(--border-subtle)]" />}
+              <div>
+                <div className="mb-1 flex items-center gap-1.5 text-[10.5px] text-[var(--text-tertiary)]">
+                  {s.dot && <i className="h-1.5 w-1.5 rounded-full" style={{ background: s.dot }} />}
+                  {s.label}
+                </div>
+                <div className="flex items-baseline gap-1">
+                  <span className="text-[14px] font-bold text-[var(--text-primary)]">{s.value}</span>
+                  {s.pct && <span className="text-[10.5px] text-[var(--text-tertiary)]">{s.pct}</span>}
+                </div>
+              </div>
+            </div>
+          ))}
         </div>
       </div>
+      <div className="mt-4" />
+      <CardFoot label="Details" onClick={onClick} />
     </div>
   );
 }
@@ -319,86 +203,47 @@ export function PerformanceMetricCard({
   animationDelay = 0,
 }: PerformanceMetricCardProps) {
   const status = percentage >= 85 ? 'Good' : percentage >= 70 ? 'Average' : 'Warning';
-  const statusColor = percentage >= 85 ? '#5ee6a0' : percentage >= 70 ? '#f2c94c' : '#ff6f5c';
+  const statusColor = percentage >= 85 ? 'var(--success)' : percentage >= 70 ? 'var(--warning)' : 'var(--error)';
 
   return (
-    <div
-      className="card"
-      style={{
-        display: 'flex',
-        flexDirection: 'column',
-        padding: 20,
-        animationDelay: `${animationDelay}s`,
-      }}
-    >
-      <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 12 }}>
-        <div className="card-icon">
-          <svg viewBox="0 0 24 24" fill="none" stroke="#9295a4" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
-            <circle cx="12" cy="12" r="10"/>
-            <line x1="2" y1="12" x2="22" y2="12"/>
-            <path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/>
+    <div className="s-card flex flex-col" style={{ animationDelay: `${animationDelay}s` }}>
+      <CardHead
+        icon={
+          <svg viewBox="0 0 24 24" width="13.5" height="13.5" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
+            <circle cx="12" cy="12" r="10" />
+            <line x1="2" y1="12" x2="22" y2="12" />
+            <path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z" />
           </svg>
-        </div>
-        <span style={{ fontSize: 14, fontWeight: 600, color: '#e8e9f0' }}>Performance</span>
-      </div>
-
-      <div style={{ display: 'flex', alignItems: 'flex-start', gap: 16, flex: 1 }}>
-        <div style={{ flex: 1 }}>
-          <div style={{
-            fontSize: 36,
-            fontWeight: 900,
-            letterSpacing: '-1.5px',
-            lineHeight: 1,
-            color: '#e8e9f0',
-          }}>
+        }
+        title="Performance"
+      />
+      <div className="flex flex-1 items-start gap-4 px-4">
+        <div className="flex-1">
+          <div className="font-headline text-[32px] font-bold leading-none tracking-[-0.025em] text-[var(--text-primary)]">
             {percentage}%
           </div>
-          <div style={{ fontSize: 12, color: '#6b6e7d', marginTop: 4 }}>
-            <span style={{ color: statusColor, fontWeight: 700 }}>{status}</span> Last scan on {new Date().toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' })}
+          <div className="mt-1.5 text-[11.5px] text-[var(--text-tertiary)]">
+            <span className="font-semibold" style={{ color: statusColor }}>{status}</span>
+            {' '}Last scan {new Date().toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' })}
           </div>
         </div>
-
-        <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-end', gap: 8 }}>
-          {/* Chart placeholder - will be replaced with actual chart */}
-          <div style={{ width: 134, height: 58, background: 'rgba(255,255,255,0.03)', borderRadius: 8 }} />
-          
-          <div style={{ display: 'flex', flexDirection: 'column', gap: 4, alignItems: 'flex-end' }}>
-            <div className="speed-row" style={{ color: '#7ab8ff' }}>
-              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round">
-                <line x1="12" y1="19" x2="12" y2="5"/>
-                <polyline points="5 12 12 19 19 12"/>
-              </svg>
-              <span>{upSpeed}</span> Mbps
-            </div>
-            <div className="speed-row" style={{ color: 'var(--accent-primary)' }}>
-              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round">
-                <line x1="12" y1="5" x2="12" y2="19"/>
-                <polyline points="19 12 12 5 5 12"/>
-              </svg>
-              <span>{downSpeed}</span> Mbps
-            </div>
+        <div className="flex flex-col items-end gap-2">
+          <div className="h-[58px] w-[134px] rounded-lg bg-[var(--tint-03)]" />
+          <div className="flex flex-col items-end gap-1">
+            {[{ v: upSpeed, up: false }, { v: downSpeed, up: true }].map((s, i) => (
+              <div key={i} className="flex items-center gap-1 text-[11px] font-medium text-[var(--accent-primary)]">
+                <svg viewBox="0 0 24 24" width="12" height="12" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round">
+                  <line x1="12" y1={s.up ? 5 : 19} x2="12" y2={s.up ? 19 : 5} />
+                  {s.up ? <polyline points="19 12 12 5 5 12" /> : <polyline points="5 12 12 19 19 12" />}
+                </svg>
+                <span>{s.v}</span> Mbps
+              </div>
+            ))}
           </div>
         </div>
       </div>
-
-      <div style={{ 
-        display: 'flex', 
-        alignItems: 'center', 
-        justifyContent: 'space-between', 
-        paddingTop: 14 
-      }}>
-        <span
-          onClick={onClick}
-          style={{ fontSize: 13, color: '#6b6e7d', fontWeight: 500, cursor: 'pointer' }}
-        >
-          Check Speed
-        </span>
-        <div className="arrow-btn" onClick={onClick}>
-          <svg viewBox="0 0 24 24" fill="none" stroke="white" strokeWidth={2.5} strokeLinecap="round" strokeLinejoin="round">
-            <polyline points="9 18 15 12 9 6" />
-          </svg>
-        </div>
-      </div>
+      <div className="mt-4" />
+      <CardFoot label="Check Speed" onClick={onClick} />
     </div>
   );
 }
diff --git a/app/frontend/src/shared/components/ErrorBoundary.tsx b/app/frontend/src/shared/components/ErrorBoundary.tsx
index 4c1169f..9deed8e 100644
--- a/app/frontend/src/shared/components/ErrorBoundary.tsx
+++ b/app/frontend/src/shared/components/ErrorBoundary.tsx
@@ -61,9 +61,9 @@ export class ErrorBoundary extends Component<Props, State> {
 
       return (
         <div className="min-h-screen bg-[var(--bg-void)] flex items-center justify-center p-4">
-          <div className="max-w-md w-full bg-[var(--bg-primary)] border border-[var(--border-subtle)] rounded-lg p-6 space-y-4">
+          <div className="s-card max-w-md w-full space-y-4">
             <div className="space-y-2">
-              <h2 className="text-xl font-semibold text-[var(--text-primary)]">
+              <h2 className="font-headline text-xl font-semibold text-[var(--text-primary)]">
                 Something went wrong
               </h2>
               <p className="text-sm text-[var(--text-secondary)]">
@@ -72,24 +72,18 @@ export class ErrorBoundary extends Component<Props, State> {
             </div>
 
             {import.meta.env.DEV && this.state.error && (
-              <div className="bg-[var(--surface-muted)] border border-[var(--border-subtle)] rounded p-3">
-                <p className="text-xs font-mono text-[var(--error)] break-all">
+              <div className="s-inset">
+                <p className="v-mono text-[11px] text-[var(--error)] break-all">
                   {this.state.error.toString()}
                 </p>
               </div>
             )}
 
             <div className="flex gap-2">
-              <button
-                onClick={this.handleReset}
-                className="flex-1 px-4 py-2 bg-[var(--accent-primary-soft)] text-[var(--text-primary)] rounded hover:opacity-90 transition-opacity"
-              >
+              <button onClick={this.handleReset} className="s-btn-accent flex-1 justify-center">
                 Try Again
               </button>
-              <button
-                onClick={() => window.location.reload()}
-                className="flex-1 px-4 py-2 bg-[var(--surface-muted)] text-[var(--text-primary)] border border-[var(--border-subtle)] rounded hover:bg-[var(--surface-soft)] transition-colors"
-              >
+              <button onClick={() => window.location.reload()} className="s-btn-quiet flex-1 justify-center">
                 Reload Page
               </button>
             </div>
diff --git a/app/frontend/src/shared/components/MetricCard.tsx b/app/frontend/src/shared/components/MetricCard.tsx
index 88bcc58..86f54e4 100644
--- a/app/frontend/src/shared/components/MetricCard.tsx
+++ b/app/frontend/src/shared/components/MetricCard.tsx
@@ -1,4 +1,5 @@
 import { type ReactNode, useEffect, useRef, useState } from 'react';
+import { ChevronRight } from 'lucide-react';
 
 interface MetricCardProps {
   title: string;
@@ -15,6 +16,12 @@ interface MetricCardProps {
   horizontal?: boolean;
 }
 
+const statusColors: Record<string, string> = {
+  good: 'var(--success)',
+  average: 'var(--warning)',
+  warning: 'var(--warning)',
+};
+
 export function MetricCard({
   title,
   value,
@@ -49,140 +56,64 @@ export function MetricCard({
     return () => observer.disconnect();
   }, [animationDelay]);
 
-  const statusColors: Record<string, string> = {
-    good: '#5ee6a0',
-    average: '#f2c94c',
-    warning: '#f2c94c',
-  };
+  const reveal = {
+    opacity: isVisible ? 1 : 0,
+    transform: isVisible ? 'translateY(0)' : 'translateY(12px)',
+    transition: 'all 0.5s ease',
+  } as const;
+
+  const footer = (
+    <div className="s-stat-foot">
+      <span
+        onClick={onClick}
+        style={{ cursor: onClick ? 'pointer' : 'default' }}
+      >
+        {statusText && status ? (
+          <b style={{ color: statusColors[status], fontWeight: 600 }}>{statusText}</b>
+        ) : null}{' '}
+        {subtitle ?? 'Details'}
+      </span>
+      {onClick ? (
+        <button className="s-icon-btn !h-6 !w-6" onClick={onClick} title="Details">
+          <ChevronRight size={11} />
+        </button>
+      ) : null}
+    </div>
+  );
 
-  // Horizontal layout for cards like Active User
   if (horizontal) {
     return (
-      <div
-        ref={cardRef}
-        className={`panel ${className}`}
-        style={{
-          display: 'flex',
-          flexDirection: 'row',
-          padding: 0,
-          overflow: 'hidden',
-          opacity: isVisible ? 1 : 0,
-          transform: isVisible ? 'translateY(0)' : 'translateY(12px)',
-          transition: 'all 0.5s ease',
-        }}
-      >
-        <div style={{
-          flex: 1,
-          padding: '20px 18px 18px 20px',
-          display: 'flex',
-          flexDirection: 'column',
-        }}>
-          <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 12 }}>
-            <div className="card-icon">{icon}</div>
-            <span style={{ fontSize: 14, fontWeight: 600, color: '#e8e9f0' }}>{title}</span>
+      <div ref={cardRef} className={`s-stat ${className}`} style={{ ...reveal, display: 'flex' }}>
+        <div className="flex-1 px-4 pt-4 pb-2 flex flex-col">
+          <div className="flex items-center gap-2.5">
+            <span className="s-ibox">{icon}</span>
+            <span className="text-[11.5px] font-medium text-[var(--text-secondary)]">{title}</span>
           </div>
-          <div style={{
-            fontSize: 36,
-            fontWeight: 900,
-            letterSpacing: '-1.5px',
-            lineHeight: 1,
-            color: '#e8e9f0',
-          }}>
+          <div className="mt-4 font-headline text-[30px] font-bold leading-none tracking-[-0.025em] text-[var(--text-primary)]">
             {value}
           </div>
-          {subtitle && (
-            <div style={{ fontSize: 12, color: '#6b6e7d', marginTop: 4 }}>{subtitle}</div>
-          )}
-          {details && <div style={{ marginTop: 12 }}>{details}</div>}
-          <div style={{
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'space-between',
-            marginTop: 'auto',
-            paddingTop: 14,
-          }}>
-            <span
-              style={{ fontSize: 13, color: '#6b6e7d', fontWeight: 500, cursor: 'pointer' }}
-              onClick={onClick}
-            >
-              Details
-            </span>
-            <div className="arrow-btn" onClick={onClick}>
-              <svg viewBox="0 0 24 24" fill="none" stroke="white" strokeWidth={2.5} strokeLinecap="round" strokeLinejoin="round">
-                <polyline points="9 18 15 12 9 6" />
-              </svg>
-            </div>
-          </div>
+          {details ? <div className="mt-3">{details}</div> : null}
+          <div className="mt-auto">{footer}</div>
         </div>
-        {chart && (
-          <div style={{
-            width: '50%',
-            padding: '16px 14px 46px 0',
-            display: 'flex',
-            alignItems: 'flex-end',
-          }}>
-            {chart}
-          </div>
-        )}
+        {chart ? (
+          <div className="w-1/2 flex items-end pr-3 pb-10 pt-3">{chart}</div>
+        ) : null}
       </div>
     );
   }
 
-  // Standard vertical card layout - matching self.html exactly
   return (
-    <div
-      ref={cardRef}
-      className={`panel ${className}`}
-      style={{
-        display: 'flex',
-        flexDirection: 'column',
-        padding: 20,
-        opacity: isVisible ? 1 : 0,
-        transform: isVisible ? 'translateY(0)' : 'translateY(12px)',
-        transition: 'all 0.5s ease',
-      }}
-    >
-      <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 12 }}>
-        <div className="card-icon">{icon}</div>
-        <span style={{ fontSize: 14, fontWeight: 600, color: '#e8e9f0' }}>{title}</span>
+    <div ref={cardRef} className={`s-stat ${className}`} style={reveal}>
+      <div className="flex items-center gap-2.5 px-4 pt-4">
+        <span className="s-ibox">{icon}</span>
+        <span className="text-[11.5px] font-medium text-[var(--text-secondary)]">{title}</span>
       </div>
-
-      <div style={{
-        fontSize: 38,
-        fontWeight: 900,
-        letterSpacing: '-1.5px',
-        lineHeight: 1,
-        color: '#e8e9f0',
-      }}>
+      <div className="px-4 mt-4 font-headline text-[32px] font-bold leading-none tracking-[-0.025em] text-[var(--text-primary)]">
         {value}
       </div>
-
-      {(subtitle || statusText) && (
-        <div style={{ fontSize: 12, color: '#6b6e7d', marginTop: 4 }}>
-          {statusText && status && (
-            <span style={{ color: statusColors[status], fontWeight: 700 }}>{statusText}</span>
-          )}{' '}
-          {subtitle}
-        </div>
-      )}
-
-      {chart && <div style={{ marginTop: 12, marginBottom: 6 }}>{chart}</div>}
-
-      {details && <div style={{ marginTop: 16 }}>{details}</div>}
-
-      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', paddingTop: 4, marginTop: 'auto' }}>
-        <span
-          onClick={onClick}
-          style={{ fontSize: 13, color: '#6b6e7d', fontWeight: 500, cursor: 'pointer' }}
-        >
-          Details
-        </span>
-        <div className="arrow-btn" onClick={onClick}>
-          <svg viewBox="0 0 24 24" fill="none" stroke="white" strokeWidth={2.5} strokeLinecap="round" strokeLinejoin="round">
-            <polyline points="9 18 15 12 9 6" />
-          </svg>
-        </div>
-      </div>
+      {chart ? <div className="px-4 mt-3">{chart}</div> : null}
+      {details ? <div className="px-4 mt-3">{details}</div> : null}
+      <div className="mt-4">{footer}</div>
     </div>
   );
 }
diff --git a/app/frontend/src/shared/components/StatusBadge.tsx b/app/frontend/src/shared/components/StatusBadge.tsx
index 9f87a2b..e6f05f6 100644
--- a/app/frontend/src/shared/components/StatusBadge.tsx
+++ b/app/frontend/src/shared/components/StatusBadge.tsx
@@ -1,4 +1,5 @@
 import { Check, X, Loader2, Box, HelpCircle, type LucideIcon } from 'lucide-react';
+import type { PillTone } from './sentry-utils';
 
 type ServiceStatus = 'running' | 'building' | 'failed' | 'stopped' | 'unknown';
 
@@ -12,43 +13,29 @@ interface StatusBadgeProps {
 
 const statusConfig: Record<
   ServiceStatus,
-  { color: string; bg: string; Icon: LucideIcon; label: string; animate?: boolean; glow?: string }
+  { tone: PillTone; Icon: LucideIcon; label: string; animate?: boolean }
 > = {
-  running: {
-    color: 'var(--success)',
-    bg: 'var(--success-soft)',
-    Icon: Check,
-    label: 'Active',
-    animate: true,
-    glow: 'rgba(61, 214, 140, 0.4)',
-  },
-  building: {
-    color: 'var(--warning)',
-    bg: 'var(--warning-soft)',
-    Icon: Loader2,
-    label: 'Building',
-    animate: true,
-    glow: 'rgba(255, 112, 67, 0.4)',
-  },
-  failed: {
-    color: 'var(--error)',
-    bg: 'var(--error-soft)',
-    Icon: X,
-    label: 'Failed',
-    glow: 'rgba(255, 107, 91, 0.4)',
-  },
-  stopped: {
-    color: 'var(--text-muted)',
-    bg: 'var(--surface-muted)',
-    Icon: Box,
-    label: 'Stopped',
-  },
-  unknown: {
-    color: 'var(--text-muted)',
-    bg: 'var(--surface-muted)',
-    Icon: HelpCircle,
-    label: 'Unknown',
-  },
+  running: { tone: 'ok', Icon: Check, label: 'Active' },
+  building: { tone: 'warn', Icon: Loader2, label: 'Building', animate: true },
+  failed: { tone: 'err', Icon: X, label: 'Failed' },
+  stopped: { tone: 'off', Icon: Box, label: 'Stopped' },
+  unknown: { tone: 'off', Icon: HelpCircle, label: 'Unknown' },
+};
+
+const TONE_CLS: Record<PillTone, string> = {
+  ok: 'text-[var(--success)] bg-[var(--success-soft)] border-[color-mix(in_srgb,var(--success)_16%,transparent)]',
+  warn: 'text-[var(--warning)] bg-[var(--warning-soft)] border-[color-mix(in_srgb,var(--warning)_16%,transparent)]',
+  err: 'text-[var(--error)] bg-[var(--error-soft)] border-[color-mix(in_srgb,var(--error)_16%,transparent)]',
+  info: 'text-[var(--info)] bg-[var(--info-soft)] border-[color-mix(in_srgb,var(--info)_16%,transparent)]',
+  off: 'text-[var(--text-tertiary)] bg-[var(--tint-06)] border-[var(--border-subtle)]',
+};
+
+const TONE_DOT: Record<PillTone, string> = {
+  ok: 'var(--success)',
+  warn: 'var(--warning)',
+  err: 'var(--error)',
+  info: 'var(--info)',
+  off: 'var(--text-tertiary)',
 };
 
 export function StatusBadge({
@@ -62,36 +49,26 @@ export function StatusBadge({
   const { Icon } = config;
 
   const sizeClasses = {
-    sm: 'px-2 py-0.5 text-[10px] gap-1.5',
-    md: 'px-2.5 py-1 text-xs gap-1.5',
-    lg: 'px-3 py-1.5 text-sm gap-2',
+    sm: 'px-2 py-[2px] text-[10px] gap-1.5',
+    md: 'px-2 py-[3.5px] text-[10.5px] gap-1.5',
+    lg: 'px-2.5 py-1 text-[11.5px] gap-1.5',
   };
 
-  const iconSizes = {
-    sm: 10,
-    md: 12,
-    lg: 14,
-  };
+  const iconSizes = { sm: 10, md: 11, lg: 12 };
 
   return (
     <div
-      className={`inline-flex items-center rounded-full font-bold uppercase tracking-wider ring-1 ring-inset transition-all duration-200 ${sizeClasses[size]} ${className}`}
-      style={{ 
-        background: config.bg, 
-        color: config.color, 
-        borderColor: `${config.color}20`,
-        boxShadow: status === 'running' && pulse ? `0 0 12px ${config.glow}` : 'none',
-      }}
+      className={`inline-flex items-center rounded-[5px] border font-medium transition-colors ${sizeClasses[size]} ${TONE_CLS[config.tone]} ${className}`}
     >
       {status === 'running' && pulse && (
         <span
           className="w-1.5 h-1.5 rounded-full live-pulse"
-          style={{ background: config.color, boxShadow: `0 0 6px ${config.color}` }}
+          style={{ background: TONE_DOT[config.tone] }}
         />
       )}
       <Icon
         size={iconSizes[size]}
-        className={config.animate && status === 'building' ? 'animate-spin' : ''}
+        className={config.animate ? 'animate-spin' : ''}
       />
       {showLabel && <span>{config.label}</span>}
     </div>
@@ -106,27 +83,19 @@ interface LiveIndicatorProps {
 
 export function LiveIndicator({ isLive, label, size = 'md' }: LiveIndicatorProps) {
   const sizeClasses = {
-    sm: 'px-2 py-0.5 text-[10px] gap-1.5',
-    md: 'px-2.5 py-1 text-xs gap-2',
-    lg: 'px-3 py-1.5 text-sm gap-2',
+    sm: 'px-2 py-[2px] text-[10px] gap-1.5',
+    md: 'px-2 py-[3.5px] text-[10.5px] gap-1.5',
+    lg: 'px-2.5 py-1 text-[11.5px] gap-1.5',
   };
+  const tone: PillTone = isLive ? 'ok' : 'off';
 
   return (
-    <div 
-      className={`inline-flex items-center rounded-full font-bold uppercase tracking-wider ring-1 ring-inset transition-all duration-300 ${sizeClasses[size]}`}
-      style={{
-        background: isLive ? 'var(--success-soft)' : 'var(--surface-muted)',
-        color: isLive ? 'var(--success)' : 'var(--text-muted)',
-        borderColor: isLive ? 'rgba(61, 214, 140, 0.2)' : 'rgba(255, 255, 255, 0.05)',
-        boxShadow: isLive ? '0 0 12px rgba(61, 214, 140, 0.3)' : 'none',
-      }}
+    <div
+      className={`inline-flex items-center rounded-[5px] border font-medium transition-colors ${sizeClasses[size]} ${TONE_CLS[tone]}`}
     >
       <span
         className={`w-1.5 h-1.5 rounded-full ${isLive ? 'live-pulse' : ''}`}
-        style={{ 
-          background: isLive ? 'var(--success)' : 'var(--text-muted)',
-          boxShadow: isLive ? '0 0 6px var(--success)' : 'none',
-        }}
+        style={{ background: TONE_DOT[tone] }}
       />
       {label || (isLive ? 'Active' : 'Stopped')}
     </div>
diff --git a/app/frontend/src/shared/components/index.ts b/app/frontend/src/shared/components/index.ts
index b90007e..7f3d2c3 100644
--- a/app/frontend/src/shared/components/index.ts
+++ b/app/frontend/src/shared/components/index.ts
@@ -12,3 +12,4 @@ export { useToast } from '../hooks/use-toast';
 export type { ToastType, ToastContextValue } from '../hooks/use-toast';
 export * from './BrandWordmark';
 export * from './FilterBar';
+export * from './sentry';
diff --git a/app/frontend/src/shared/components/sentry-utils.ts b/app/frontend/src/shared/components/sentry-utils.ts
new file mode 100644
index 0000000..ee7ab33
--- /dev/null
+++ b/app/frontend/src/shared/components/sentry-utils.ts
@@ -0,0 +1,18 @@
+/* Non-component helpers for the Sentry kit — kept out of sentry.tsx so the
+   component file stays fast-refresh clean. */
+
+export type PillTone = 'ok' | 'warn' | 'err' | 'off' | 'info';
+
+export function statusTone(status: string): PillTone {
+  const s = status.toLowerCase();
+  if (['running', 'healthy', 'online', 'active', 'deployed', 'succeeded', 'success', 'live'].includes(s)) return 'ok';
+  if (['degraded', 'warning', 'building', 'deploying', 'pending', 'scheduled', 'queued', 'sleeping'].includes(s)) return 'warn';
+  if (['failed', 'critical', 'error', 'offline', 'stopped'].includes(s)) return s === 'stopped' || s === 'offline' ? 'off' : 'err';
+  return 'info';
+}
+
+/* CSS var color helper for charts. */
+export function cssVar(name: string, fallback = ''): string {
+  if (typeof window === 'undefined') return fallback;
+  return getComputedStyle(document.documentElement).getPropertyValue(name).trim() || fallback;
+}
diff --git a/app/frontend/src/shared/components/sentry.tsx b/app/frontend/src/shared/components/sentry.tsx
new file mode 100644
index 0000000..951a625
--- /dev/null
+++ b/app/frontend/src/shared/components/sentry.tsx
@@ -0,0 +1,372 @@
+import { useState, type ReactNode } from 'react';
+import { ChevronDown, MoreHorizontal } from 'lucide-react';
+import type { PillTone } from './sentry-utils';
+
+export type { PillTone };
+
+/* ============================================================
+   Sentry kit — React bindings for the 23-sentry.html language.
+   Every page composes these; no page invents its own chrome.
+   ============================================================ */
+
+export function Ibox({ children }: { children: ReactNode }) {
+  return <span className="s-ibox">{children}</span>;
+}
+
+/* ---------- buttons ---------- */
+
+type BtnProps = {
+  children: ReactNode;
+  onClick?: () => void;
+  disabled?: boolean;
+  title?: string;
+  className?: string;
+  type?: 'button' | 'submit';
+};
+
+export function GhostBtn({ children, onClick, disabled, title, className = '', type = 'button' }: BtnProps) {
+  return (
+    <button type={type} className={`s-btn-accent ${className}`} onClick={onClick} disabled={disabled} title={title}>
+      {children}
+    </button>
+  );
+}
+
+export function QuietBtn({ children, onClick, disabled, title, className = '', type = 'button' }: BtnProps) {
+  return (
+    <button type={type} className={`s-btn-quiet ${className}`} onClick={onClick} disabled={disabled} title={title}>
+      {children}
+    </button>
+  );
+}
+
+export function IconBtn({ children, onClick, disabled, title, className = '', type = 'button' }: BtnProps) {
+  return (
+    <button type={type} className={`s-icon-btn ${className}`} onClick={onClick} disabled={disabled} title={title}>
+      {children}
+    </button>
+  );
+}
+
+/* Filter/sort chip with trailing chevron — the `.sel` in sentry. */
+export function SelectChip({ children, onClick, title, icon }: BtnProps & { icon?: ReactNode }) {
+  return (
+    <button className="s-chip" onClick={onClick} title={title}>
+      {icon}
+      {children}
+      <ChevronDown size={10} style={{ opacity: 0.55 }} />
+    </button>
+  );
+}
+
+/* Segmented icon buttons — chart-type switchers. */
+export function Seg({ options, value, onChange }: {
+  options: { key: string; icon: ReactNode; title?: string }[];
+  value: string;
+  onChange: (key: string) => void;
+}) {
+  return (
+    <span className="s-seg">
+      {options.map((o) => (
+        <button
+          key={o.key}
+          className={o.key === value ? 'on' : ''}
+          onClick={() => onChange(o.key)}
+          title={o.title}
+        >
+          {o.icon}
+        </button>
+      ))}
+    </span>
+  );
+}
+
+/* ---------- stat card ---------- */
+
+export function SStat({ icon, label, value, unit, foot, delta, extra, onMenu }: {
+  icon: ReactNode;
+  label: string;
+  value: ReactNode;
+  unit?: string;
+  foot: ReactNode;
+  delta?: { dir: 'up' | 'down'; text: string };
+  extra?: ReactNode;
+  onMenu?: () => void;
+}) {
+  return (
+    <div className="s-stat">
+      <div className="flex items-center gap-2.5 px-4 pt-4">
+        <Ibox>{icon}</Ibox>
+        <span className="text-[11.5px] font-medium text-[var(--text-secondary)] whitespace-nowrap">{label}</span>
+        <button
+          className="ml-auto text-[var(--text-tertiary)] hover:text-[var(--text-primary)] leading-none"
+          onClick={onMenu}
+          title="More"
+        >
+          <MoreHorizontal size={14} />
+        </button>
+      </div>
+      <div className="flex items-baseline gap-1.5 px-4 mt-4">
+        <span className="font-headline text-[34px] font-bold leading-none tracking-[-0.025em] text-[var(--text-primary)]">
+          {value}
+        </span>
+        {unit && <span className="text-[12px] font-medium text-[var(--text-tertiary)]">{unit}</span>}
+      </div>
+      {extra && <div className="px-4 mt-3">{extra}</div>}
+      <div className="s-stat-foot mt-3.5">
+        <span>{foot}</span>
+        {delta && <SDelta dir={delta.dir}>{delta.text}</SDelta>}
+      </div>
+    </div>
+  );
+}
+
+export function SDelta({ dir, children }: { dir: 'up' | 'down'; children: ReactNode }) {
+  return (
+    <span className={`s-delta ${dir}`}>
+      {dir === 'up' ? '▲' : '▼'}{children}
+    </span>
+  );
+}
+
+/* ---------- card ---------- */
+
+export function SCard({ icon, title, accent, trail, children, pad = true, className = '' }: {
+  icon?: ReactNode;
+  title?: ReactNode;
+  accent?: ReactNode;
+  trail?: ReactNode;
+  children: ReactNode;
+  pad?: boolean;
+  className?: string;
+}) {
+  return (
+    <div className={`s-card ${className}`}>
+      {(title !== undefined || icon) && (
+        <div className="s-cardhead">
+          {icon && <Ibox>{icon}</Ibox>}
+          <span className="s-t">{title}{accent && <> <span className="s-ta">{accent}</span></>}</span>
+          {trail && <span className="s-trail">{trail}</span>}
+        </div>
+      )}
+      <div className={pad ? 'px-4 pb-4' : ''}>{children}</div>
+    </div>
+  );
+}
+
+/* ---------- ticks / bars ---------- */
+
+export function Ticks({ pct, count = 56, warn = false }: { pct: number; count?: number; warn?: boolean }) {
+  const on = Math.round((Math.max(0, Math.min(100, pct)) / 100) * count);
+  return (
+    <span className="s-ticks" role="img" aria-label={`${pct}%`}>
+      {Array.from({ length: count }, (_, i) => (
+        <i key={i} className={i < on ? (warn ? 'warn' : 'on') : ''} />
+      ))}
+    </span>
+  );
+}
+
+/* Ascending mini bar glyph used inside table metric cells. */
+export function MiniBars({ tone = 'var(--accent-primary)' }: { tone?: string }) {
+  return (
+    <span className="inline-flex items-end gap-[1.5px] h-3" aria-hidden>
+      {[9, 5, 12, 7].map((h, i) => (
+        <i key={i} className="w-[2.5px] rounded-[0.5px]" style={{ height: h, background: tone }} />
+      ))}
+    </span>
+  );
+}
+
+/* ---------- status pill ---------- */
+
+const PILL_CLS: Record<PillTone, string> = {
+  ok: 'text-[var(--success)] bg-[var(--success-soft)] border-[color-mix(in_srgb,var(--success)_16%,transparent)]',
+  warn: 'text-[var(--warning)] bg-[var(--warning-soft)] border-[color-mix(in_srgb,var(--warning)_16%,transparent)]',
+  err: 'text-[var(--error)] bg-[var(--error-soft)] border-[color-mix(in_srgb,var(--error)_16%,transparent)]',
+  info: 'text-[var(--info)] bg-[var(--info-soft)] border-[color-mix(in_srgb,var(--info)_16%,transparent)]',
+  off: 'text-[var(--text-tertiary)] bg-[var(--tint-06)] border-[var(--border-subtle)]',
+};
+
+export function SPill({ tone, children }: { tone: PillTone; children: ReactNode }) {
+  return (
+    <span className={`inline-block text-[10.5px] font-medium rounded-[5px] px-2 py-[3.5px] border ${PILL_CLS[tone]}`}>
+      {children}
+    </span>
+  );
+}
+
+/* ---------- inset callout ---------- */
+
+export function SAnomaly({ icon, title, items }: { icon?: ReactNode; title: ReactNode; items: ReactNode[] }) {
+  return (
+    <div className="s-inset">
+      <div className="flex items-center gap-2 pb-2 mb-2 border-b border-[var(--border-subtle)] text-[11.5px] text-[var(--text-secondary)]">
+        {icon}
+        <span>{title}</span>
+      </div>
+      {items.map((it, i) => (
+        <div key={i} className="s-anomaly-item">{it}</div>
+      ))}
+    </div>
+  );
+}
+
+/* ---------- data table (inset header bar, sortable) ---------- */
+
+export type SCol<T> = {
+  key: string;
+  label: ReactNode;
+  width?: string;
+  sortable?: boolean;
+  sortValue?: (row: T) => string | number;
+  render: (row: T) => ReactNode;
+};
+
+const CARET = (
+  <svg viewBox="0 0 7 10" width="7" height="10" className="shrink-0">
+    <path d="M3.5 .8 5.8 3.6H1.2zM3.5 9.2 1.2 6.4h4.6z" fill="currentColor" opacity="0.45" />
+  </svg>
+);
+
+export function STable<T extends { id?: string | number }>({ cols, rows, rowKey, selectable, onRowClick }: {
+  cols: SCol<T>[];
+  rows: T[];
+  rowKey?: (row: T, i: number) => string | number;
+  selectable?: boolean;
+  onRowClick?: (row: T) => void;
+}) {
+  const [sortKey, setSortKey] = useState<string | null>(null);
+  const [sortDir, setSortDir] = useState<1 | -1>(1);
+  const [checked, setChecked] = useState<Set<number>>(new Set());
+
+  const allCols: SCol<T>[] = selectable
+    ? [{ key: '$sel', label: '', width: '30px', render: () => null }, ...cols]
+    : cols;
+  const template = allCols.map((c) => c.width ?? '1fr').join(' ');
+
+  const sorted = [...rows];
+  const sc = cols.find((c) => c.key === sortKey);
+  if (sc?.sortValue) {
+    sorted.sort((a, b) => {
+      const x = sc.sortValue!(a); const y = sc.sortValue!(b);
+      return (x > y ? 1 : x < y ? -1 : 0) * sortDir;
+    });
+  }
+
+  const toggleAll = () =>
+    setChecked(checked.size === rows.length ? new Set() : new Set(rows.map((_, i) => i)));
+
+  return (
+    <div className="s-dt pb-2.5">
+      <div className="s-dt-head" style={{ gridTemplateColumns: template }}>
+        {allCols.map((c) =>
+          c.key === '$sel' ? (
+            <span key="$sel" className="s-dt-h">
+              <span className={`s-ck ${checked.size === rows.length && rows.length > 0 ? 'on' : ''}`} onClick={toggleAll} />
+            </span>
+          ) : (
+            <span
+              key={c.key}
+              className={`s-dt-h ${c.sortable !== false ? 'sortable' : ''} ${sortKey === c.key ? 'on' : ''}`}
+              onClick={() => {
+                if (c.sortable === false) return;
+                setSortDir(sortKey === c.key ? (sortDir === 1 ? -1 : 1) : 1);
+                setSortKey(c.key);
+              }}
+            >
+              {c.label}{c.sortable !== false && CARET}
+            </span>
+          ),
+        )}
+      </div>
+      {sorted.map((row, i) => {
+        const key = rowKey ? rowKey(row, i) : row.id ?? i;
+        const ri = rows.indexOf(row);
+        return (
+          <div
+            key={key}
+            className={`s-dt-row ${onRowClick ? 'clickable' : ''}`}
+            style={{ gridTemplateColumns: template }}
+            onClick={() => onRowClick?.(row)}
+          >
+            {allCols.map((c) =>
+              c.key === '$sel' ? (
+                <span key="$sel">
+                  <span
+                    className={`s-ck ${checked.has(ri) ? 'on' : ''}`}
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      setChecked((prev) => {
+                        const n = new Set(prev);
+                        if (n.has(ri)) n.delete(ri); else n.add(ri);
+                        return n;
+                      });
+                    }}
+                  />
+                </span>
+              ) : (
+                <span key={c.key} className="min-w-0">{c.render(row)}</span>
+              ),
+            )}
+          </div>
+        );
+      })}
+    </div>
+  );
+}
+
+/* ---------- page header (Welcome back … + actions) ---------- */
+
+export function SPageHead({ title, titleAccent, sub, subAccent, actions }: {
+  title: ReactNode;
+  titleAccent?: ReactNode;
+  sub?: ReactNode;
+  subAccent?: ReactNode;
+  actions?: ReactNode;
+}) {
+  return (
+    <div className="flex items-center gap-4 mb-5 flex-wrap">
+      <div>
+        <h1 className="font-headline text-[24px] font-bold tracking-[-0.02em] text-[var(--text-primary)]">
+          {title}{titleAccent && <> <em className="not-italic text-[var(--accent-primary)]">{titleAccent}</em></>}
+        </h1>
+        {sub && (
+          <div className="text-[12px] text-[var(--text-tertiary)] mt-[3px]">
+            {sub}{subAccent && <> <b className="text-[var(--accent-primary)] font-semibold">{subAccent}</b></>}
+          </div>
+        )}
+      </div>
+      {actions && <div className="ml-auto flex items-center gap-2.5">{actions}</div>}
+    </div>
+  );
+}
+
+/* Section label — small caps with accent square. */
+export function SSection({ children, right }: { children: ReactNode; right?: ReactNode }) {
+  return (
+    <div className="flex items-center justify-between mb-3 mt-1">
+      <div className="flex items-center gap-2 text-[10.5px] font-medium uppercase tracking-[0.1em] text-[var(--text-tertiary)]">
+        <span className="w-[5px] h-[5px] rounded-[1px] bg-[var(--accent-primary)]" />
+        {children}
+      </div>
+      {right && <span className="v-mono text-[10.5px] text-[var(--text-muted)]">{right}</span>}
+    </div>
+  );
+}
+
+/* Legend row for charts. */
+export function SLegend({ items }: { items: { color: string; label: string }[] }) {
+  return (
+    <div className="flex gap-5 px-4 pb-2.5 pt-0.5 text-[11.5px] font-medium text-[var(--text-secondary)]">
+      {items.map((it) => (
+        <span key={it.label}>
+          <i className="inline-block w-[7px] h-[7px] rounded-[1.5px] mr-2" style={{ background: it.color }} />
+          {it.label}
+        </span>
+      ))}
+    </div>
+  );
+}
+
+