diff --git a/app/dashboard/events/page.tsx b/app/dashboard/events/page.tsx
index da1f8ce..b725d77 100644
--- a/app/dashboard/events/page.tsx
+++ b/app/dashboard/events/page.tsx
@@ -44,7 +44,7 @@ export default async function DashboardEventsPage() {
   ]);
 
   return (
-    <section className="space-y-4">
+    <section className="space-y-8">
       <DashboardPageHeader
         eyebrow="Events"
         title="Delivery events"
diff --git a/app/dashboard/nodes/page.tsx b/app/dashboard/nodes/page.tsx
index 3a24639..83155e8 100644
--- a/app/dashboard/nodes/page.tsx
+++ b/app/dashboard/nodes/page.tsx
@@ -30,11 +30,11 @@ export default async function DashboardNodesPage() {
     .orderBy(desc(nodes.createdAt));
 
   return (
-    <section className="space-y-4">
+    <section className="space-y-8">
       <DashboardPageHeader
         eyebrow="Nodes"
         title="Connected nodes"
-        description="Register and monitor private OpenClaw nodes that pull events from the queue."
+        description="Register and monitor private nodes that receive events from the queue."
       />
 
       <NodesClient
diff --git a/app/dashboard/page.tsx b/app/dashboard/page.tsx
index f755eb1..6be7390 100644
--- a/app/dashboard/page.tsx
+++ b/app/dashboard/page.tsx
@@ -75,7 +75,7 @@ export default async function DashboardPage() {
   }));
 
   return (
-    <section className="space-y-8">
+    <section className="space-y-10">
       <DashboardPageHeader eyebrow="Overview" title={intro.title} description={intro.description} />
 
       {intro.cta ? (
@@ -99,7 +99,7 @@ export default async function DashboardPage() {
       ) : null}
 
       <div className="flex min-w-0 flex-col gap-6">
-        <Card size="sm" className="min-w-0">
+        <Card size="sm" className="min-w-0 bg-card/55">
           <CardHeader>
             <CardTitle>Events over time</CardTitle>
             <CardDescription>
diff --git a/app/dashboard/routes/page.tsx b/app/dashboard/routes/page.tsx
index c06408f..6cec81e 100644
--- a/app/dashboard/routes/page.tsx
+++ b/app/dashboard/routes/page.tsx
@@ -38,7 +38,7 @@ export default async function DashboardRoutesPage() {
   ]);
 
   return (
-    <section className="space-y-4">
+    <section className="space-y-8">
       <DashboardPageHeader
         eyebrow="Routes"
         title="Webhook routes"
diff --git a/app/globals.css b/app/globals.css
index b5d7b20..3cf6d7d 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -69,79 +69,79 @@ a {
 }
 
 :root {
-  --brand-page: oklch(0.13 0.022 52);
-  --brand-accent: oklch(0.72 0.17 45);
-  --brand-accent-muted: oklch(0.72 0.12 50 / 0.35);
-  --background: oklch(1 0 0);
-  --foreground: oklch(0.145 0 0);
-  --card: oklch(1 0 0);
-  --card-foreground: oklch(0.145 0 0);
-  --popover: oklch(1 0 0);
-  --popover-foreground: oklch(0.145 0 0);
-  --primary: oklch(0.205 0 0);
-  --primary-foreground: oklch(0.985 0 0);
-  --secondary: oklch(0.97 0 0);
-  --secondary-foreground: oklch(0.205 0 0);
-  --muted: oklch(0.97 0 0);
-  --muted-foreground: oklch(0.556 0 0);
-  --accent: oklch(0.97 0 0);
-  --accent-foreground: oklch(0.205 0 0);
-  --destructive: oklch(0.577 0.245 27.325);
-  --border: oklch(0.922 0 0);
-  --input: oklch(0.922 0 0);
-  --ring: oklch(0.708 0 0);
-  --chart-1: oklch(0.87 0 0);
-  --chart-2: oklch(0.556 0 0);
-  --chart-3: oklch(0.439 0 0);
-  --chart-4: oklch(0.371 0 0);
-  --chart-5: oklch(0.269 0 0);
-  --radius: 0.625rem;
-  --sidebar: oklch(0.985 0 0);
-  --sidebar-foreground: oklch(0.145 0 0);
-  --sidebar-primary: oklch(0.205 0 0);
-  --sidebar-primary-foreground: oklch(0.985 0 0);
-  --sidebar-accent: oklch(0.97 0 0);
-  --sidebar-accent-foreground: oklch(0.205 0 0);
-  --sidebar-border: oklch(0.922 0 0);
-  --sidebar-ring: oklch(0.708 0 0);
+  --brand-page: oklch(0.12 0.03 250);
+  --brand-accent: oklch(0.78 0.15 205);
+  --brand-accent-muted: oklch(0.78 0.12 205 / 0.32);
+  --background: oklch(0.985 0.006 235);
+  --foreground: oklch(0.16 0.035 250);
+  --card: oklch(0.96 0.012 235);
+  --card-foreground: oklch(0.16 0.035 250);
+  --popover: oklch(0.985 0.006 235);
+  --popover-foreground: oklch(0.16 0.035 250);
+  --primary: oklch(0.56 0.14 205);
+  --primary-foreground: oklch(0.985 0.006 235);
+  --secondary: oklch(0.91 0.02 235);
+  --secondary-foreground: oklch(0.18 0.035 250);
+  --muted: oklch(0.91 0.02 235);
+  --muted-foreground: oklch(0.48 0.04 245);
+  --accent: oklch(0.9 0.04 205);
+  --accent-foreground: oklch(0.18 0.035 250);
+  --destructive: oklch(0.58 0.22 25);
+  --border: oklch(0.82 0.03 235);
+  --input: oklch(0.82 0.03 235);
+  --ring: oklch(0.65 0.13 205);
+  --chart-1: oklch(0.7 0.13 205);
+  --chart-2: oklch(0.58 0.11 225);
+  --chart-3: oklch(0.48 0.08 240);
+  --chart-4: oklch(0.38 0.07 250);
+  --chart-5: oklch(0.28 0.06 255);
+  --radius: 0.75rem;
+  --sidebar: oklch(0.96 0.012 235);
+  --sidebar-foreground: oklch(0.16 0.035 250);
+  --sidebar-primary: oklch(0.56 0.14 205);
+  --sidebar-primary-foreground: oklch(0.985 0.006 235);
+  --sidebar-accent: oklch(0.91 0.02 235);
+  --sidebar-accent-foreground: oklch(0.18 0.035 250);
+  --sidebar-border: oklch(0.82 0.03 235);
+  --sidebar-ring: oklch(0.65 0.13 205);
 }
 
-/* OpenClaw-adjacent: warm dark surfaces + coral accent (derived from openclaw.ai / docs palette) */
+/* clawproxy: dark navy surfaces with a single cyan accent. */
 .dark {
-  --brand-page: oklch(0.13 0.022 52);
-  --brand-accent: oklch(0.72 0.17 45);
-  --brand-accent-muted: oklch(0.72 0.12 50 / 0.35);
-  --background: oklch(0.14 0.02 50);
-  --foreground: oklch(0.96 0.012 90);
-  --card: oklch(0.19 0.024 48);
-  --card-foreground: oklch(0.96 0.012 90);
-  --popover: oklch(0.19 0.024 48);
-  --popover-foreground: oklch(0.96 0.012 90);
-  --primary: oklch(0.72 0.17 45);
-  --primary-foreground: oklch(0.16 0.028 50);
-  --secondary: oklch(0.26 0.03 48);
-  --secondary-foreground: oklch(0.96 0.012 90);
-  --muted: oklch(0.24 0.022 48);
-  --muted-foreground: oklch(0.72 0.04 75);
-  --accent: oklch(0.3 0.045 46);
-  --accent-foreground: oklch(0.96 0.012 90);
-  --destructive: oklch(0.63 0.22 25);
-  --border: oklch(1 0 0 / 12%);
-  --input: oklch(1 0 0 / 14%);
-  --ring: oklch(0.72 0.14 50);
-  --chart-1: oklch(0.72 0.17 45);
-  --chart-2: oklch(0.55 0.08 55);
-  --chart-3: oklch(0.45 0.06 50);
-  --chart-4: oklch(0.35 0.04 48);
-  --chart-5: oklch(0.28 0.03 48);
-  --sidebar: oklch(0.19 0.024 48);
-  --sidebar-foreground: oklch(0.96 0.012 90);
-  --sidebar-primary: oklch(0.72 0.17 45);
-  --sidebar-primary-foreground: oklch(0.16 0.028 50);
-  --sidebar-accent: oklch(0.26 0.03 48);
-  --sidebar-accent-foreground: oklch(0.96 0.012 90);
-  --sidebar-border: oklch(1 0 0 / 12%);
-  --sidebar-ring: oklch(0.72 0.14 50);
+  --brand-page: oklch(0.12 0.03 250);
+  --brand-accent: oklch(0.78 0.15 205);
+  --brand-accent-muted: oklch(0.78 0.12 205 / 0.32);
+  --background: oklch(0.145 0.035 250);
+  --foreground: oklch(0.96 0.012 220);
+  --card: oklch(0.19 0.04 250);
+  --card-foreground: oklch(0.96 0.012 220);
+  --popover: oklch(0.19 0.04 250);
+  --popover-foreground: oklch(0.96 0.012 220);
+  --primary: oklch(0.78 0.15 205);
+  --primary-foreground: oklch(0.105 0.03 250);
+  --secondary: oklch(0.25 0.045 250);
+  --secondary-foreground: oklch(0.96 0.012 220);
+  --muted: oklch(0.24 0.04 250);
+  --muted-foreground: oklch(0.72 0.04 225);
+  --accent: oklch(0.28 0.06 240);
+  --accent-foreground: oklch(0.96 0.012 220);
+  --destructive: oklch(0.64 0.22 25);
+  --border: oklch(1 0 0 / 13%);
+  --input: oklch(1 0 0 / 15%);
+  --ring: oklch(0.78 0.12 205);
+  --chart-1: oklch(0.78 0.15 205);
+  --chart-2: oklch(0.62 0.11 220);
+  --chart-3: oklch(0.5 0.08 235);
+  --chart-4: oklch(0.38 0.06 250);
+  --chart-5: oklch(0.29 0.05 255);
+  --sidebar: oklch(0.17 0.038 250);
+  --sidebar-foreground: oklch(0.96 0.012 220);
+  --sidebar-primary: oklch(0.78 0.15 205);
+  --sidebar-primary-foreground: oklch(0.105 0.03 250);
+  --sidebar-accent: oklch(0.25 0.045 250);
+  --sidebar-accent-foreground: oklch(0.96 0.012 220);
+  --sidebar-border: oklch(1 0 0 / 13%);
+  --sidebar-ring: oklch(0.78 0.12 205);
 }
 
 @layer base {
diff --git a/app/page.tsx b/app/page.tsx
index 1ee60d1..74c8e19 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -1,3 +1,5 @@
+import Link from 'next/link';
+
 import { ArchitectureDiagram } from '@/components/app/architecture-diagram';
 import { Button } from '@/components/ui/button';
 
@@ -12,7 +14,7 @@ const comparisonPoints = [
   {
     title: 'No tunnel dependency',
     description:
-      'clawproxy runs as a standalone service. Your node connects outbound — no tunnel daemon to keep alive on the receiving end.',
+      'clawproxy runs as a standalone service. Your node connects outbound, so there is no tunnel daemon to babysit on the receiving end.',
   },
   {
     title: 'Events survive restarts',
@@ -30,40 +32,55 @@ const featureCards = [
   {
     title: 'Never miss a webhook',
     description:
-      'Inbound events are persisted before delivery, so temporary downtime or sleeping nodes do not turn into dropped requests.',
+      'Inbound events are persisted before delivery, so sleeping nodes and deploy restarts do not turn into dropped requests.',
   },
   {
     title: 'Keep your node private',
     description:
-      'clawproxy is designed for deployments behind NAT, residential routers, and private LANs that can only make outbound connections.',
+      'Designed for hosts behind NAT, residential routers, private LANs, and agent boxes that should only call outbound.',
   },
   {
     title: 'Live WebSocket delivery',
     description:
-      'Your node opens a persistent WebSocket connection and receives events the instant they arrive — no polling delay. HTTP pull is always available as a fallback.',
+      'Your node opens a persistent WebSocket connection and receives events when they arrive. Authenticated HTTP pull remains available as fallback.',
   },
   {
     title: 'Built for operators',
     description:
-      'Manage routes, inspect recent traffic, debug failures, and understand delivery state from one lightweight dashboard.',
+      'Manage routes, inspect recent traffic, retry failures, and understand delivery state from one lightweight dashboard.',
   },
 ];
 
-const steps = [
+const routeFlow = [
   {
-    title: 'Expose a public route',
+    label: 'Expose a public route',
     description:
-      'Create a route in clawproxy and point GitHub, Stripe, Slack, or any provider at the generated URL.',
+      'Create a clawproxy route and point GitHub, Stripe, Slack, or any webhook provider at the generated URL.',
   },
   {
-    title: 'Queue every inbound event',
+    label: 'Queue every inbound event',
     description:
-      'Each request is validated, accepted, and stored durably before your private node ever touches it.',
+      'Each request is validated, accepted, and stored durably before your private node touches it.',
   },
   {
-    title: 'Deliver in real-time or on demand',
+    label: 'Deliver in real time or on demand',
     description:
-      'Your node receives events instantly over a persistent WebSocket connection, or falls back to authenticated HTTP polling — whichever fits your setup.',
+      'Your node receives events instantly over WebSocket, or falls back to authenticated HTTP polling when that fits better.',
+  },
+];
+
+const relayEvents = [
+  {
+    label: 'Ingress accepted',
+    detail: 'GitHub webhook saved before delivery',
+  },
+  {
+    label: 'Node connected',
+    detail: 'Outbound WebSocket is ready',
+  },
+  {
+    label: 'Awaiting ack',
+    detail: 'Event stays queued until confirmed',
   },
 ];
 
@@ -71,278 +88,201 @@ export const dynamic = 'force-dynamic';
 
 export default function Home() {
   return (
-    <main className="text-foreground bg-brand-page min-h-screen overflow-hidden">
+    <main className="relative min-h-screen overflow-x-hidden bg-brand-page text-foreground">
       <div
-        className="absolute inset-0 -z-10"
+        className="pointer-events-none absolute inset-0 -z-10"
         style={{
           background: `
-            radial-gradient(circle at top left, color-mix(in oklab, var(--color-brand-accent) 22%, transparent), transparent 32%),
-            radial-gradient(circle at top right, color-mix(in oklab, var(--color-brand-accent-muted) 90%, transparent), transparent 36%),
-            linear-gradient(180deg, var(--color-brand-page), var(--color-card), var(--color-brand-page))
+            radial-gradient(circle at 12% 0%, color-mix(in oklab, var(--color-brand-accent) 24%, transparent), transparent 32%),
+            radial-gradient(circle at 88% 14%, color-mix(in oklab, var(--color-brand-accent-muted) 70%, transparent), transparent 34%),
+            linear-gradient(180deg, var(--color-brand-page), var(--color-background) 42%, var(--color-brand-page))
           `,
         }}
       />
-      <div className="bg-brand-accent-muted absolute top-24 left-1/2 -z-10 h-[28rem] w-[28rem] -translate-x-1/2 rounded-full blur-3xl" />
+      <div className="pointer-events-none fixed inset-0 -z-10 bg-[linear-gradient(rgba(255,255,255,0.025)_1px,transparent_1px),linear-gradient(90deg,rgba(255,255,255,0.025)_1px,transparent_1px)] bg-[size:44px_44px] opacity-40" />
 
-      <section className="mx-auto flex w-full max-w-7xl flex-col px-6 pb-24 pt-8 sm:px-10 lg:px-12">
-        <header className="flex items-center justify-between gap-4 py-4">
-          <div>
-            <p className="text-brand-accent text-sm font-semibold tracking-[0.32em] uppercase">
+      <section className="mx-auto flex w-full max-w-7xl flex-col px-5 pb-20 pt-6 sm:px-8 lg:px-10">
+        <header className="flex h-16 items-center justify-between gap-4 border-b border-border/70">
+          <Link href="/" className="flex items-baseline gap-3">
+            <span className="font-mono text-[0.78rem] font-semibold tracking-[0.28em] text-brand-accent uppercase">
               clawproxy
-            </p>
-            <p className="text-muted-foreground mt-1 text-sm">
-              Public webhook ingress for private agent nodes — Hermes Agent, OpenClaw, or your
-              own client
-            </p>
-          </div>
+            </span>
+            <span className="hidden text-sm text-muted-foreground md:inline">
+              Public webhook ingress for private agent nodes
+            </span>
+          </Link>
 
-          <div className="flex items-center gap-3">
+          <nav className="flex items-center gap-2 sm:gap-3" aria-label="Primary navigation">
             <a
               href="https://github.com/ericdahl-dev/clawproxy-hermes"
-              className="border-border text-foreground/85 hover:bg-muted/50 hidden rounded-full border px-4 py-2 text-sm transition sm:inline-flex"
+              className="hidden rounded-full border border-border/80 px-4 py-2 text-sm text-foreground/85 transition hover:border-brand-accent/60 hover:text-foreground sm:inline-flex"
             >
               Hermes Agent plugin
             </a>
-            <Button
-              asChild
-              size="lg"
-              className="rounded-full px-5 shadow-md shadow-black/20"
-            >
-              <a href="/dashboard">Dashboard</a>
+            <Button asChild size="lg" className="rounded-full px-5 font-semibold">
+              <Link href="/dashboard">Dashboard</Link>
             </Button>
-          </div>
+          </nav>
         </header>
 
-        <section className="grid items-center gap-16 py-16 lg:grid-cols-[1.05fr_0.95fr] lg:py-24">
-          <div className="max-w-3xl">
-            <div className="border-brand-accent/25 bg-brand-accent/10 text-brand-accent inline-flex items-center rounded-full border px-4 py-2 text-sm font-medium shadow-lg shadow-black/25 backdrop-blur">
+        <section className="grid min-h-[calc(100dvh-5rem)] items-center gap-8 py-9 lg:grid-cols-[1.02fr_0.98fr] lg:py-10">
+          <div className="max-w-4xl">
+            <p className="max-w-xl font-mono text-xs font-semibold tracking-[0.18em] text-brand-accent uppercase">
               The purpose-built alternative to ngrok and Cloudflare Tunnels
-            </div>
+            </p>
 
-            <h1 className="mt-8 text-5xl font-semibold leading-[1.02] text-balance sm:text-6xl lg:text-7xl">
+            <h1 className="mt-6 max-w-5xl text-5xl font-semibold leading-[0.98] tracking-[-0.055em] text-balance sm:text-6xl lg:text-7xl">
               Webhooks for private nodes.
             </h1>
 
-            <p className="text-muted-foreground mt-6 max-w-2xl text-lg leading-8 sm:text-xl">
-              Accept webhook traffic from the public internet, store it durably,
-              and deliver it to your private node instantly over WebSocket — or
-              via authenticated outbound pull. No public node exposure required.
+            <p className="mt-6 max-w-2xl text-lg leading-8 text-muted-foreground sm:text-xl">
+              Accept public webhook traffic, store it durably, and deliver it to private nodes over outbound WebSocket or pull.
             </p>
 
-            <div className="mt-10 flex flex-wrap gap-4">
-              <Button
-                asChild
-                size="lg"
-                className="rounded-full px-6 py-3 text-sm font-semibold shadow-md shadow-black/20"
-              >
-                <a href="/dashboard">Get started</a>
+            <div className="mt-8 flex flex-wrap gap-4">
+              <Button asChild size="lg" className="rounded-full px-6 py-3 text-sm font-semibold">
+                <Link href="/dashboard">Open dashboard</Link>
               </Button>
               <Button
                 asChild
                 variant="outline"
                 size="lg"
-                className="rounded-full border-border/80 bg-card/30 px-6 py-3 text-sm font-semibold backdrop-blur"
+                className="rounded-full border-border/90 bg-background/30 px-6 py-3 text-sm font-semibold backdrop-blur"
               >
                 <a href="#how-it-works">See how it works</a>
               </Button>
             </div>
 
-            <div className="mt-10 flex flex-wrap gap-3">
+            <div className="mt-8 grid max-w-2xl grid-cols-2 gap-px overflow-hidden rounded-3xl border border-border/80 bg-border/80 sm:grid-cols-4">
               {proofPoints.map((item) => (
-                <span
-                  key={item}
-                  className="border-border text-muted-foreground rounded-full border bg-card/40 px-4 py-2 text-sm"
-                >
+                <div key={item} className="bg-card/70 px-4 py-3 text-sm text-muted-foreground">
                   {item}
-                </span>
+                </div>
               ))}
             </div>
+
+            <p className="mt-5 max-w-2xl text-sm leading-6 text-muted-foreground">
+              Works with Hermes Agent, OpenClaw, and any client that can receive events from an authenticated outbound connection.
+            </p>
           </div>
 
-          <div className="relative">
-            <div className="from-brand-accent/20 to-chart-2/15 absolute inset-0 rounded-[2rem] bg-gradient-to-br via-transparent blur-2xl" />
-            <div className="border-border bg-card/50 relative rounded-[2rem] border p-4 shadow-2xl shadow-black/30 backdrop-blur-xl md:p-6">
-              <div className="border-border bg-card/95 rounded-[1.6rem] border p-5">
-                <div className="border-border flex items-center justify-between gap-4 border-b pb-4">
+          <div className="relative w-full max-w-[34rem] lg:justify-self-end">
+            <div className="absolute -inset-8 rounded-[3rem] bg-brand-accent/10 blur-3xl" />
+            <div className="relative overflow-hidden rounded-[2rem] border border-border/80 bg-card/80 shadow-2xl shadow-black/40 backdrop-blur-xl">
+              <div className="border-b border-border/70 p-4">
+                <div className="flex items-start justify-between gap-5">
                   <div>
-                    <p className="text-brand-accent text-xs font-semibold tracking-[0.28em] uppercase">
-                      Live flow
-                    </p>
-                    <h2 className="mt-2 text-xl font-semibold">From provider to private node</h2>
-                  </div>
-                  <div className="rounded-full border border-emerald-400/20 bg-emerald-400/10 px-3 py-1 text-xs font-medium text-emerald-300">
-                    Healthy
+                    <p className="font-mono text-xs text-muted-foreground">route</p>
+                    <p className="mt-1.5 font-mono text-sm text-brand-accent">/r/github-to-lab</p>
                   </div>
+                  <p className="rounded-full border border-brand-accent/35 bg-brand-accent/10 px-3 py-1 font-mono text-[11px] text-brand-accent">
+                    live
+                  </p>
                 </div>
+              </div>
 
-                <div className="mt-5 space-y-4">
-                  {[
-                    {
-                      title: 'GitHub / Stripe / Slack',
-                      body: 'Webhook hits your public clawproxy route.',
-                    },
-                    {
-                      title: 'Ingress accepted',
-                      body: 'Validated and saved safely until delivery to your node.',
-                    },
-                    {
-                      title: 'Live push or pull',
-                      body: 'Event is pushed instantly over WebSocket, or fetched by the node on its next poll.',
-                    },
-                    {
-                      title: 'Ack complete',
-                      body: 'Processed events are acknowledged and marked delivered.',
-                    },
-                  ].map((item, index) => (
-                    <div
-                      key={item.title}
-                      className="border-border bg-card/60 flex gap-4 rounded-2xl border p-4"
-                    >
-                      <div className="bg-primary text-primary-foreground flex h-10 w-10 shrink-0 items-center justify-center rounded-full font-semibold">
-                        {index + 1}
-                      </div>
-                      <div>
-                        <h3 className="font-medium">{item.title}</h3>
-                        <p className="text-muted-foreground mt-1 text-sm leading-6">{item.body}</p>
-                      </div>
-                    </div>
-                  ))}
+              <div className="p-4">
+                <div className="rounded-[1.5rem] border border-brand-accent/25 bg-brand-accent/10 p-4">
+                  <p className="font-mono text-xs text-brand-accent">delivery state</p>
+                  <h2 className="mt-2.5 text-2xl font-semibold tracking-[-0.04em]">Stored until your node confirms.</h2>
+                  <p className="mt-2 text-sm leading-6 text-muted-foreground">
+                    Public providers get a stable endpoint. Private nodes keep control over when work is complete.
+                  </p>
                 </div>
 
-                <div className="mt-5 grid gap-3 sm:grid-cols-3">
-                  <div className="border-border bg-card/50 rounded-2xl border p-4">
-                    <p className="text-muted-foreground text-xs tracking-[0.24em] uppercase">Mode</p>
-                    <p className="mt-2 text-lg font-semibold">Push + Pull</p>
-                  </div>
-                  <div className="border-border bg-card/50 rounded-2xl border p-4">
-                    <p className="text-muted-foreground text-xs tracking-[0.24em] uppercase">Storage</p>
-                    <p className="mt-2 text-lg font-semibold">Safe until delivery</p>
-                  </div>
-                  <div className="border-border bg-card/50 rounded-2xl border p-4">
-                    <p className="text-muted-foreground text-xs tracking-[0.24em] uppercase">Ideal for</p>
-                    <p className="mt-2 text-lg font-semibold">NAT + LAN</p>
-                  </div>
+                <div className="mt-3 grid grid-cols-3 gap-px overflow-hidden rounded-2xl border border-border/70 bg-border/70">
+                  {relayEvents.map((event, index) => (
+                    <div key={event.label} className="bg-background/45 p-3">
+                      <p className="font-mono text-[11px] text-muted-foreground">
+                        {String(index + 1).padStart(2, '0')}
+                      </p>
+                      <p className="mt-3 text-sm font-semibold leading-5">{event.label}</p>
+                    </div>
+                  ))}
                 </div>
               </div>
             </div>
           </div>
         </section>
 
-        <section className="border-border grid gap-6 border-t py-14 md:grid-cols-2 xl:grid-cols-4">
-          {featureCards.map((feature) => (
-            <article
-              key={feature.title}
-              className="border-border bg-card/40 rounded-[1.75rem] border p-6 backdrop-blur"
-            >
-              <h2 className="text-xl font-semibold">{feature.title}</h2>
-              <p className="text-muted-foreground mt-3 text-sm leading-7">{feature.description}</p>
+        <section className="grid gap-px overflow-hidden rounded-[2rem] border border-border/80 bg-border/80 md:grid-cols-2 xl:grid-cols-4">
+          {featureCards.map((feature, index) => (
+            <article key={feature.title} className="bg-card/60 p-7 backdrop-blur">
+              <p className="font-mono text-xs text-brand-accent">{String(index + 1).padStart(2, '0')}</p>
+              <h2 className="mt-5 text-2xl font-semibold tracking-[-0.03em]">{feature.title}</h2>
+              <p className="mt-4 text-sm leading-7 text-muted-foreground">{feature.description}</p>
             </article>
           ))}
         </section>
 
-        <section className="border-border border-t py-14">
-          <div className="mb-10">
-            <p className="text-brand-accent text-sm font-semibold tracking-[0.32em] uppercase">
+        <section className="grid gap-10 border-b border-border/70 py-20 lg:grid-cols-[0.78fr_1.22fr] lg:py-28">
+          <div>
+            <h2 className="max-w-lg text-4xl font-semibold tracking-[-0.045em] sm:text-5xl">
               Coming from ngrok or Cloudflare Tunnels?
-            </p>
-            <h2 className="mt-4 text-3xl font-semibold sm:text-4xl">
-              Purpose-built for webhook delivery — not general tunneling.
             </h2>
-            <p className="text-muted-foreground mt-4 max-w-2xl text-base leading-7">
-              ngrok and Cloudflare Tunnels are excellent general-purpose tools, but clawproxy is
-              laser-focused on one job: durable webhook ingress and private node delivery without
-              keeping a tunnel daemon running.
+            <p className="mt-5 max-w-xl text-base leading-7 text-muted-foreground">
+              ngrok and Cloudflare Tunnels are excellent general-purpose tools, but clawproxy is focused on durable webhook ingress and private node delivery.
             </p>
           </div>
 
-          <div className="grid gap-6 md:grid-cols-3">
+          <div className="grid gap-4 md:grid-cols-3 lg:gap-0 lg:divide-x lg:divide-border/80">
             {comparisonPoints.map((point) => (
-              <article
-                key={point.title}
-                className="border-border bg-card/40 rounded-[1.75rem] border p-6 backdrop-blur"
-              >
-                <h3 className="text-xl font-semibold">{point.title}</h3>
-                <p className="text-muted-foreground mt-3 text-sm leading-7">{point.description}</p>
+              <article key={point.title} className="rounded-3xl border border-border/80 bg-card/45 p-6 lg:rounded-none lg:border-0 lg:bg-transparent">
+                <h3 className="text-xl font-semibold tracking-[-0.02em]">{point.title}</h3>
+                <p className="mt-4 text-sm leading-7 text-muted-foreground">{point.description}</p>
               </article>
             ))}
           </div>
         </section>
 
-        <section
-          id="how-it-works"
-          className="grid gap-10 py-10 lg:grid-cols-[0.85fr_1.15fr] lg:py-16"
-        >
-          <div>
-            <p className="text-brand-accent text-sm font-semibold tracking-[0.32em] uppercase">
-              How it works
-            </p>
-            <h2 className="mt-4 text-3xl font-semibold sm:text-4xl">
+        <section id="how-it-works" className="grid gap-10 py-20 lg:grid-cols-[0.9fr_1.1fr] lg:py-28">
+          <div className="max-w-xl">
+            <h2 className="text-4xl font-semibold tracking-[-0.045em] sm:text-5xl">
               Keep the webhook path public and the node private.
             </h2>
-            <p className="text-muted-foreground mt-4 max-w-xl text-base leading-7">
-              clawproxy is deliberately focused: it receives inbound webhook
-              traffic on the public internet and hands it off to private
-              agent nodes through authenticated outbound requests.
+            <p className="mt-5 text-base leading-7 text-muted-foreground">
+              clawproxy receives inbound webhook traffic on the public internet and hands it to private agent nodes through authenticated outbound requests.
             </p>
           </div>
 
-          <div className="grid gap-4">
-            {steps.map((step, index) => (
-              <div
-                key={step.title}
-                className="border-border bg-card/40 flex items-start gap-4 rounded-[1.75rem] border p-5"
-              >
-                <div className="border-border bg-muted/50 text-brand-accent flex h-11 w-11 shrink-0 items-center justify-center rounded-full border text-sm font-semibold">
-                  0{index + 1}
-                </div>
-                <div>
-                  <h3 className="text-lg font-semibold">{step.title}</h3>
-                  <p className="text-muted-foreground mt-2 text-sm leading-7">{step.description}</p>
-                </div>
-              </div>
+          <div className="space-y-4">
+            {routeFlow.map((step) => (
+              <article key={step.label} className="rounded-3xl border border-border/80 bg-card/50 p-6 backdrop-blur">
+                <h3 className="text-xl font-semibold tracking-[-0.02em]">{step.label}</h3>
+                <p className="mt-3 text-sm leading-7 text-muted-foreground">{step.description}</p>
+              </article>
             ))}
           </div>
         </section>
 
-        <section className="py-6 lg:py-10">
+        <section className="py-4 lg:py-8">
           <ArchitectureDiagram />
         </section>
 
-        <section className="py-8">
-          <div className="border-brand-accent/20 from-brand-accent/12 via-card/50 to-chart-2/12 rounded-[2rem] border bg-gradient-to-r p-8 backdrop-blur">
-            <p className="text-brand-accent text-sm font-semibold tracking-[0.32em] uppercase">
-              Ready to route inbound events?
-            </p>
-            <div className="mt-4 flex flex-col gap-6 lg:flex-row lg:items-end lg:justify-between">
+        <section className="py-16 lg:py-24">
+          <div className="rounded-[2rem] border border-brand-accent/25 bg-brand-accent/10 p-8 backdrop-blur md:p-10">
+            <div className="flex flex-col gap-8 lg:flex-row lg:items-end lg:justify-between">
               <div className="max-w-2xl">
-                <h2 className="text-3xl font-semibold sm:text-4xl">
+                <h2 className="text-4xl font-semibold tracking-[-0.045em] sm:text-5xl">
                   Public ingress on one side. Secure outbound delivery on the other.
                 </h2>
-                <p className="text-muted-foreground mt-4 text-base leading-7">
-                  Built for the very common reality that your software can call out,
-                  but should not be exposed directly to the internet.
+                <p className="mt-5 text-base leading-7 text-muted-foreground">
+                  Built for the common reality that your software can call out, but should not be exposed directly to the internet.
                 </p>
-                <p className="text-muted-foreground mt-3 text-sm">clawproxy.io</p>
+                <p className="mt-4 font-mono text-sm text-brand-accent">clawproxy.io</p>
               </div>
 
               <div className="flex flex-wrap gap-4">
-                <Button
-                  asChild
-                  variant="secondary"
-                  size="lg"
-                  className="rounded-full px-6 py-3 text-sm font-semibold"
-                >
-                  <a href="/dashboard">Open dashboard</a>
+                <Button asChild size="lg" className="rounded-full px-6 py-3 text-sm font-semibold">
+                  <Link href="/dashboard">Open dashboard</Link>
                 </Button>
                 <Button
                   asChild
                   variant="outline"
                   size="lg"
-                  className="rounded-full border-border px-6 py-3 text-sm font-semibold"
+                  className="rounded-full border-border bg-background/30 px-6 py-3 text-sm font-semibold backdrop-blur"
                 >
-                  <a href="https://github.com/ericdahl-dev/clawproxy-hermes">
-                    Hermes Agent plugin
-                  </a>
+                  <a href="https://github.com/ericdahl-dev/clawproxy-hermes">Hermes Agent plugin</a>
                 </Button>
               </div>
             </div>
@@ -350,13 +290,10 @@ export default function Home() {
         </section>
       </section>
 
-      <footer className="border-border/40 border-t py-6 text-center">
-        <p className="text-muted-foreground text-sm">
+      <footer className="border-t border-border/60 py-6 text-center">
+        <p className="text-sm text-muted-foreground">
           made by{' '}
-          <a
-            href="https://ericdahl.dev"
-            className="hover:text-foreground underline transition-colors"
-          >
+          <a href="https://ericdahl.dev" className="underline transition-colors hover:text-foreground">
             ericdahl.dev
           </a>
         </p>
diff --git a/components/app/architecture-diagram.tsx b/components/app/architecture-diagram.tsx
index a4bf4c6..fdbd26f 100644
--- a/components/app/architecture-diagram.tsx
+++ b/components/app/architecture-diagram.tsx
@@ -13,10 +13,10 @@ function NodeBox({
 }) {
   return (
     <div
-      className={`flex flex-1 flex-col rounded-2xl border p-5 ${
+      className={`flex flex-1 flex-col rounded-3xl border p-5 ${
         accent
-          ? 'border-brand-accent/35 bg-card/50 ring-1 ring-brand-accent/15'
-          : 'border-border bg-card/40'
+          ? 'border-brand-accent/35 bg-card/55 ring-1 ring-brand-accent/15'
+          : 'border-border bg-card/35'
       }`}
     >
       <div className="mb-4 flex items-start justify-between gap-2">
@@ -29,7 +29,7 @@ function NodeBox({
           <p className="mt-1 text-xs text-muted-foreground">{sublabel}</p>
         </div>
         {badge && (
-          <span className="shrink-0 rounded-full border border-border bg-muted/40 px-2.5 py-1 text-[10px] font-medium text-muted-foreground">
+          <span className="shrink-0 rounded-full border border-brand-accent/30 bg-brand-accent/10 px-2.5 py-1 font-mono text-[10px] font-medium text-brand-accent">
             {badge}
           </span>
         )}
@@ -38,7 +38,7 @@ function NodeBox({
         {items.map((item) => (
           <li
             key={item}
-            className="border-border bg-card/60 flex items-center gap-2 rounded-xl border px-3 py-2 text-sm"
+            className="border-border bg-background/35 flex items-center gap-2 rounded-2xl border px-3 py-2 text-sm"
           >
             {item}
           </li>
@@ -132,16 +132,16 @@ function ArrowDown({ label }: { label: string }) {
 export function ArchitectureDiagram() {
   return (
     <div
-      className="border-border bg-card/20 rounded-[2rem] border p-6 backdrop-blur md:p-8"
+      className="border-border bg-card/35 rounded-[2rem] border p-6 backdrop-blur md:p-8"
       role="img"
-      aria-label="Architecture diagram: webhook providers send events to clawproxy, which queues them for secure outbound delivery to a private OpenClaw node"
+      aria-label="Architecture diagram: webhook providers send events to clawproxy, which queues them for secure outbound delivery to a private node"
     >
       <div className="mb-6">
-        <p className="text-brand-accent text-xs font-semibold tracking-[0.32em] uppercase">
+        <p className="text-brand-accent font-mono text-xs font-semibold tracking-[0.2em] uppercase">
           System overview
         </p>
         <p className="text-muted-foreground mt-1 text-sm">
-          Webhook events travel from the public internet to your private node — without exposing a single port.
+          Webhook events travel from the public internet to your private node without exposing a single port.
         </p>
       </div>
 
@@ -169,12 +169,12 @@ export function ArchitectureDiagram() {
           label="OpenClaw node"
           sublabel="Your private network"
           items={['Polls for new events', 'Processes locally', 'Acknowledges delivery']}
-          badge="🔒 Never exposed"
+          badge="Never exposed"
         />
       </div>
 
       <p className="text-muted-foreground mt-5 text-center text-xs">
-        Your node always initiates the connection outbound — no open ports or firewall rules required.
+        Your node always initiates the connection outbound. No open ports or firewall rules required.
       </p>
     </div>
   );
diff --git a/components/app/dashboard-app-sidebar.tsx b/components/app/dashboard-app-sidebar.tsx
index e0f6416..8f2b91d 100644
--- a/components/app/dashboard-app-sidebar.tsx
+++ b/components/app/dashboard-app-sidebar.tsx
@@ -54,27 +54,31 @@ export function DashboardAppSidebar({ userEmail }: DashboardAppSidebarProps) {
   const { signOut, busy, error } = useSignOut();
 
   return (
-    <Sidebar collapsible="icon" variant="inset">
-      <SidebarHeader className="border-sidebar-border border-b">
+    <Sidebar collapsible="icon" variant="inset" className="[&_[data-sidebar=sidebar-inner]]:border [&_[data-sidebar=sidebar-inner]]:border-sidebar-border/80 [&_[data-sidebar=sidebar-inner]]:bg-sidebar/85 [&_[data-sidebar=sidebar-inner]]:shadow-2xl [&_[data-sidebar=sidebar-inner]]:shadow-black/25 [&_[data-sidebar=sidebar-inner]]:backdrop-blur-xl">
+      <SidebarHeader className="border-sidebar-border/80 border-b p-3">
         <SidebarMenu>
           <SidebarMenuItem>
-            <SidebarMenuButton size="lg" asChild>
+            <SidebarMenuButton size="lg" asChild className="rounded-2xl hover:bg-sidebar-accent/70 data-active:bg-sidebar-accent/70">
               <Link href="/dashboard">
-                <span className="bg-sidebar-primary text-sidebar-primary-foreground flex size-8 items-center justify-center rounded-md text-sm font-semibold">
+                <span className="flex size-9 items-center justify-center rounded-2xl border border-sidebar-primary/30 bg-sidebar-primary/15 font-mono text-sm font-semibold text-sidebar-primary shadow-lg shadow-black/20">
                   cp
                 </span>
-                <span className="truncate font-semibold">clawproxy</span>
+                <span className="truncate font-mono text-[0.78rem] font-semibold uppercase tracking-[0.2em] text-sidebar-primary">
+                  clawproxy
+                </span>
               </Link>
             </SidebarMenuButton>
           </SidebarMenuItem>
         </SidebarMenu>
       </SidebarHeader>
 
-      <SidebarContent>
+      <SidebarContent className="px-1 py-3">
         <SidebarGroup>
-          <SidebarGroupLabel>Dashboard</SidebarGroupLabel>
+          <SidebarGroupLabel className="font-mono text-[0.68rem] uppercase tracking-[0.18em] text-sidebar-foreground/55">
+            Dashboard
+          </SidebarGroupLabel>
           <SidebarGroupContent>
-            <SidebarMenu>
+            <SidebarMenu className="gap-1">
               {navigation.map((item) => {
                 const isActive =
                   item.href === '/dashboard'
@@ -84,9 +88,14 @@ export function DashboardAppSidebar({ userEmail }: DashboardAppSidebarProps) {
 
                 return (
                   <SidebarMenuItem key={item.href}>
-                    <SidebarMenuButton asChild isActive={isActive} tooltip={item.label}>
+                    <SidebarMenuButton
+                      asChild
+                      isActive={isActive}
+                      tooltip={item.label}
+                      className="rounded-2xl text-sidebar-foreground/75 hover:bg-sidebar-accent/70 hover:text-sidebar-foreground data-active:border data-active:border-sidebar-primary/25 data-active:bg-sidebar-primary/12 data-active:text-sidebar-primary data-active:shadow-lg data-active:shadow-black/15"
+                    >
                       <Link href={item.href}>
-                        <Icon />
+                        <Icon className="stroke-[1.75]" />
                         <span>{item.label}</span>
                       </Link>
                     </SidebarMenuButton>
@@ -98,17 +107,17 @@ export function DashboardAppSidebar({ userEmail }: DashboardAppSidebarProps) {
         </SidebarGroup>
       </SidebarContent>
 
-      <SidebarFooter className="border-sidebar-border border-t">
+      <SidebarFooter className="border-sidebar-border/80 border-t p-3">
         <SidebarMenu>
           <SidebarMenuItem>
             <DropdownMenu>
               <DropdownMenuTrigger asChild>
                 <SidebarMenuButton
                   size="lg"
-                  className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
+                  className="rounded-2xl border border-sidebar-border/70 bg-background/25 data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
                 >
                   <Avatar className="size-8 rounded-lg">
-                    <AvatarFallback className="rounded-lg text-xs">
+                    <AvatarFallback className="rounded-lg bg-sidebar-primary/15 font-mono text-xs text-sidebar-primary">
                       {emailInitials(userEmail)}
                     </AvatarFallback>
                   </Avatar>
diff --git a/components/app/dashboard-metric-cards.tsx b/components/app/dashboard-metric-cards.tsx
index 0a86a60..cd9fbee 100644
--- a/components/app/dashboard-metric-cards.tsx
+++ b/components/app/dashboard-metric-cards.tsx
@@ -38,13 +38,17 @@ function MetricCard({
   valueClassName?: string;
 }) {
   return (
-    <Card size="sm">
+    <Card size="sm" className="bg-card/55">
       <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-        <CardTitle className="text-muted-foreground text-sm font-medium">{title}</CardTitle>
-        <Icon className="text-muted-foreground size-4 shrink-0" aria-hidden />
+        <CardTitle className="text-muted-foreground font-mono text-xs font-medium tracking-[0.12em] uppercase">
+          {title}
+        </CardTitle>
+        <Icon className="size-4 shrink-0 text-brand-accent" aria-hidden />
       </CardHeader>
       <CardContent className="pt-0">
-        <div className={cn('text-2xl font-semibold tabular-nums', valueClassName)}>{value}</div>
+        <div className={cn('text-3xl font-semibold tracking-[-0.04em] tabular-nums', valueClassName)}>
+          {value}
+        </div>
         <CardDescription className="mt-1 text-xs leading-snug">{description}</CardDescription>
       </CardContent>
     </Card>
@@ -65,7 +69,7 @@ export function DashboardMetricCards({
   return (
     <div className="space-y-4">
       <div>
-        <h2 className="text-lg font-semibold">Event metrics</h2>
+        <h2 className="text-2xl font-semibold tracking-[-0.035em]">Event metrics</h2>
         <p className="text-muted-foreground mt-1 text-sm">
           Snapshot of webhook events stored for your account.
         </p>
diff --git a/components/app/dashboard-page-header.tsx b/components/app/dashboard-page-header.tsx
index a08b961..922d267 100644
--- a/components/app/dashboard-page-header.tsx
+++ b/components/app/dashboard-page-header.tsx
@@ -6,12 +6,14 @@ type Props = {
 
 export function DashboardPageHeader({ eyebrow, title, description }: Props) {
   return (
-    <div>
-      <p className="text-brand-accent text-sm font-semibold tracking-[0.32em] uppercase">
+    <div className="rounded-[2rem] border border-border/80 bg-card/35 p-6 shadow-xl shadow-black/15 backdrop-blur md:p-7">
+      <p className="font-mono text-xs font-semibold tracking-[0.18em] text-brand-accent uppercase">
         {eyebrow}
       </p>
-      <h2 className="mt-3 text-3xl font-semibold">{title}</h2>
-      <p className="text-muted-foreground mt-3 max-w-2xl text-base leading-7">{description}</p>
+      <h2 className="mt-4 max-w-4xl text-4xl font-semibold tracking-[-0.045em] text-balance sm:text-5xl">
+        {title}
+      </h2>
+      <p className="mt-4 max-w-2xl text-base leading-7 text-muted-foreground">{description}</p>
     </div>
   );
 }
diff --git a/components/app/dashboard-recent-events.tsx b/components/app/dashboard-recent-events.tsx
index c1f0757..5f4eb33 100644
--- a/components/app/dashboard-recent-events.tsx
+++ b/components/app/dashboard-recent-events.tsx
@@ -20,13 +20,18 @@ type Props = {
 
 export function DashboardRecentEvents({ events: rows }: Props) {
   return (
-    <Card size="sm">
+    <Card size="sm" className="bg-card/55">
       <CardHeader className="flex flex-row flex-wrap items-start justify-between gap-2 space-y-0">
         <div>
           <CardTitle className="text-base">Recent events</CardTitle>
           <CardDescription>Latest webhook deliveries across your nodes.</CardDescription>
         </div>
-        <Button variant="outline" size="sm" asChild>
+        <Button
+          variant="outline"
+          size="sm"
+          asChild
+          className="rounded-full border-border/80 bg-background/30 px-4"
+        >
           <Link href="/dashboard/events">View all</Link>
         </Button>
       </CardHeader>
@@ -39,7 +44,7 @@ export function DashboardRecentEvents({ events: rows }: Props) {
           <div className="overflow-x-auto">
             <table className="w-full text-sm">
               <thead>
-                <tr className="border-border/50 bg-muted/30 border-y">
+                <tr className="border-border/60 bg-background/35 border-y">
                   <th className="text-muted-foreground px-4 py-2 text-left text-xs font-medium">
                     Status
                   </th>
@@ -61,10 +66,10 @@ export function DashboardRecentEvents({ events: rows }: Props) {
                       <EventStatusBadge status={event.status} />
                     </td>
                     <td className="max-w-[140px] truncate px-4 py-2.5 font-medium">
-                      {event.nodeName ?? '—'}
+                      {event.nodeName ?? 'None'}
                     </td>
                     <td className="text-muted-foreground max-w-[120px] truncate px-4 py-2.5 font-mono text-xs">
-                      {event.contentType ?? '—'}
+                      {event.contentType ?? 'None'}
                     </td>
                     <td className="text-muted-foreground px-4 py-2.5 text-right tabular-nums">
                       {formatRelativeTime(event.receivedAt)}
diff --git a/components/app/dashboard-relay-summary.tsx b/components/app/dashboard-relay-summary.tsx
index ce1a425..e97e797 100644
--- a/components/app/dashboard-relay-summary.tsx
+++ b/components/app/dashboard-relay-summary.tsx
@@ -1,4 +1,4 @@
-import { ArrowRightLeft, RadioTower, ShieldCheck, Sparkles } from 'lucide-react';
+import { ArrowRightLeft, RadioTower, ShieldCheck } from 'lucide-react';
 
 import { Card, CardContent } from '@/components/ui/card';
 
@@ -22,15 +22,17 @@ const summaryItems = [
 
 export function DashboardRelaySummary() {
   return (
-    <Card size="sm" className="overflow-hidden border-brand-accent/20 bg-gradient-to-br from-brand-accent/10 via-background to-background">
+    <Card
+      size="sm"
+      className="overflow-hidden border-brand-accent/25 bg-brand-accent/10 shadow-2xl shadow-black/25"
+    >
       <CardContent className="p-0">
         <div className="grid gap-0 lg:grid-cols-[1.35fr_0.95fr]">
           <div className="p-5 md:p-6">
-            <div className="inline-flex items-center gap-2 rounded-full border border-brand-accent/20 bg-brand-accent/10 px-3 py-1 text-xs font-medium text-brand-accent">
-              <Sparkles className="size-3.5" aria-hidden />
+            <div className="inline-flex items-center rounded-full border border-brand-accent/30 bg-brand-accent/10 px-3 py-1 font-mono text-xs font-medium text-brand-accent">
               Live relay console
             </div>
-            <h3 className="mt-4 max-w-2xl text-2xl font-semibold tracking-tight">
+            <h3 className="mt-5 max-w-2xl text-3xl font-semibold tracking-[-0.04em]">
               Public webhooks on one side, Hermes Agent and OpenClaw on the other.
             </h3>
             <p className="text-muted-foreground mt-3 max-w-2xl text-sm leading-6">
@@ -38,22 +40,22 @@ export function DashboardRelaySummary() {
               reachable, and failed deliveries can be pushed back into motion quickly.
             </p>
             <div className="mt-4 flex flex-wrap gap-2 text-xs">
-              <span className="border-border/70 bg-background/80 rounded-full border px-3 py-1 font-medium">
+              <span className="border-border/70 bg-background/45 rounded-full border px-3 py-1 font-medium">
                 Secure ingress
               </span>
-              <span className="border-border/70 bg-background/80 rounded-full border px-3 py-1 font-medium">
+              <span className="border-border/70 bg-background/45 rounded-full border px-3 py-1 font-medium">
                 Lease + ack delivery
               </span>
-              <span className="border-border/70 bg-background/80 rounded-full border px-3 py-1 font-medium">
+              <span className="border-border/70 bg-background/45 rounded-full border px-3 py-1 font-medium">
                 WebSocket first
               </span>
-              <span className="border-border/70 bg-background/80 rounded-full border px-3 py-1 font-medium">
+              <span className="border-border/70 bg-background/45 rounded-full border px-3 py-1 font-medium">
                 HTTP fallback
               </span>
             </div>
           </div>
 
-          <div className="border-border/60 bg-background/70 border-t p-5 md:p-6 lg:border-t-0 lg:border-l">
+          <div className="border-border/70 bg-background/35 border-t p-5 md:p-6 lg:border-t-0 lg:border-l">
             <div className="grid gap-3 sm:grid-cols-3 lg:grid-cols-1">
               {summaryItems.map((item) => {
                 const Icon = item.icon;
@@ -61,10 +63,10 @@ export function DashboardRelaySummary() {
                 return (
                   <div
                     key={item.title}
-                    className="border-border/60 bg-card/70 rounded-2xl border p-3 shadow-sm"
+                    className="rounded-3xl border border-border/70 bg-card/55 p-4 shadow-lg shadow-black/10"
                   >
                     <div className="flex items-start gap-3">
-                      <div className="bg-brand-accent/10 text-brand-accent flex size-8 shrink-0 items-center justify-center rounded-xl border border-brand-accent/15">
+                      <div className="flex size-9 shrink-0 items-center justify-center rounded-2xl border border-brand-accent/25 bg-brand-accent/10 text-brand-accent">
                         <Icon className="size-4" aria-hidden />
                       </div>
                       <div>
diff --git a/components/app/dashboard-shell.tsx b/components/app/dashboard-shell.tsx
index f210db1..88f9372 100644
--- a/components/app/dashboard-shell.tsx
+++ b/components/app/dashboard-shell.tsx
@@ -20,14 +20,26 @@ export function DashboardShell({ userEmail, children }: DashboardShellProps) {
   return (
     <SidebarProvider>
       <DashboardAppSidebar userEmail={userEmail} />
-      <SidebarInset className="bg-background min-h-svh">
-        <header className="bg-background/80 flex h-14 shrink-0 items-center gap-2 border-b px-4 backdrop-blur md:px-6">
-          <SidebarTrigger />
-          <Separator orientation="vertical" className="mr-2 data-[orientation=vertical]:h-4" />
+      <SidebarInset className="relative min-h-svh overflow-hidden bg-brand-page">
+        <div
+          className="pointer-events-none absolute inset-0 -z-10"
+          style={{
+            background: `
+              radial-gradient(circle at 78% 0%, color-mix(in oklab, var(--color-brand-accent) 16%, transparent), transparent 28%),
+              radial-gradient(circle at 12% 18%, color-mix(in oklab, var(--color-brand-accent-muted) 55%, transparent), transparent 32%),
+              linear-gradient(180deg, var(--color-brand-page), var(--color-background) 48%, var(--color-brand-page))
+            `,
+          }}
+        />
+        <div className="pointer-events-none absolute inset-0 -z-10 bg-[linear-gradient(rgba(255,255,255,0.025)_1px,transparent_1px),linear-gradient(90deg,rgba(255,255,255,0.025)_1px,transparent_1px)] bg-[size:44px_44px] opacity-35" />
+
+        <header className="flex h-16 shrink-0 items-center gap-3 border-b border-border/70 bg-brand-page/70 px-4 backdrop-blur-xl md:px-6">
+          <SidebarTrigger className="rounded-full border border-border/80 bg-background/30 text-muted-foreground hover:border-brand-accent/60 hover:text-foreground" />
+          <Separator orientation="vertical" className="mr-1 bg-border/70 data-[orientation=vertical]:h-5" />
           <DashboardBreadcrumb />
         </header>
-        <div className="flex flex-1 flex-col p-4 md:p-6">
-          <div className="mx-auto flex w-full max-w-7xl flex-col gap-4">{children}</div>
+        <div className="flex flex-1 flex-col p-4 md:p-8">
+          <div className="mx-auto flex w-full max-w-7xl flex-col gap-6">{children}</div>
         </div>
       </SidebarInset>
     </SidebarProvider>
diff --git a/components/ui/card.tsx b/components/ui/card.tsx
index d594968..bdcf8e3 100644
--- a/components/ui/card.tsx
+++ b/components/ui/card.tsx
@@ -12,7 +12,7 @@ function Card({
       data-slot="card"
       data-size={size}
       className={cn(
-        "group/card flex flex-col gap-4 overflow-hidden rounded-xl bg-card py-4 text-sm text-card-foreground ring-1 ring-foreground/10 has-data-[slot=card-footer]:pb-0 has-[>img:first-child]:pt-0 data-[size=sm]:gap-3 data-[size=sm]:py-3 data-[size=sm]:has-data-[slot=card-footer]:pb-0 *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl",
+        "group/card flex flex-col gap-4 overflow-hidden rounded-3xl border border-border/80 bg-card/70 py-4 text-sm text-card-foreground shadow-xl shadow-black/20 backdrop-blur ring-1 ring-white/5 has-data-[slot=card-footer]:pb-0 has-[>img:first-child]:pt-0 data-[size=sm]:gap-3 data-[size=sm]:py-3 data-[size=sm]:has-data-[slot=card-footer]:pb-0 *:[img:first-child]:rounded-t-3xl *:[img:last-child]:rounded-b-3xl",
         className
       )}
       {...props}
@@ -25,7 +25,7 @@ function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
     <div
       data-slot="card-header"
       className={cn(
-        "group/card-header @container/card-header grid auto-rows-min items-start gap-1 rounded-t-xl px-4 group-data-[size=sm]/card:px-3 has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto] [.border-b]:pb-4 group-data-[size=sm]/card:[.border-b]:pb-3",
+        "group/card-header @container/card-header grid auto-rows-min items-start gap-1 rounded-t-3xl px-5 group-data-[size=sm]/card:px-4 has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto] [.border-b]:pb-4 group-data-[size=sm]/card:[.border-b]:pb-3",
         className
       )}
       {...props}
@@ -38,7 +38,7 @@ function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
     <div
       data-slot="card-title"
       className={cn(
-        "font-heading text-base leading-snug font-medium group-data-[size=sm]/card:text-sm",
+        "font-heading text-base leading-snug font-semibold tracking-[-0.02em] group-data-[size=sm]/card:text-sm",
         className
       )}
       {...props}
@@ -73,7 +73,7 @@ function CardContent({ className, ...props }: React.ComponentProps<"div">) {
   return (
     <div
       data-slot="card-content"
-      className={cn("px-4 group-data-[size=sm]/card:px-3", className)}
+      className={cn("px-5 group-data-[size=sm]/card:px-4", className)}
       {...props}
     />
   )
@@ -84,7 +84,7 @@ function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
     <div
       data-slot="card-footer"
       className={cn(
-        "flex items-center rounded-b-xl border-t bg-muted/50 p-4 group-data-[size=sm]/card:p-3",
+        "flex items-center rounded-b-3xl border-t border-border/70 bg-background/35 p-4 group-data-[size=sm]/card:p-3",
         className
       )}
       {...props}