diff --git a/app/services/auth.py b/app/services/auth.py
new file mode 100644
index 0000000..e69de29
diff --git a/frontend/public/reference.png b/frontend/public/reference.png
new file mode 100644
index 0000000..b0b2ca6
Binary files /dev/null and b/frontend/public/reference.png differ
diff --git a/frontend/src/app/clients/[clientId]/page.tsx b/frontend/src/app/clients/[clientId]/page.tsx
new file mode 100644
index 0000000..6fa2f43
--- /dev/null
+++ b/frontend/src/app/clients/[clientId]/page.tsx
@@ -0,0 +1,2 @@
+import { ClientDetailPage } from "@/features/dashboard/pages";
+export default async function Page({ params }: { params: Promise<{ clientId: string }> }) { return <ClientDetailPage clientId={(await params).clientId} />; }
diff --git a/frontend/src/app/clients/page.tsx b/frontend/src/app/clients/page.tsx
new file mode 100644
index 0000000..732c489
--- /dev/null
+++ b/frontend/src/app/clients/page.tsx
@@ -0,0 +1,2 @@
+import { ClientsPage } from "@/features/dashboard/pages";
+export default function Page() { return <ClientsPage />; }
diff --git a/frontend/src/app/dashboard.css b/frontend/src/app/dashboard.css
new file mode 100644
index 0000000..bc5961d
--- /dev/null
+++ b/frontend/src/app/dashboard.css
@@ -0,0 +1,18 @@
+.dashboard-content { max-width: 1160px; margin: 0 auto; padding: 32px 28px 40px; }
+.dashboard-header { margin-bottom: 22px; }.dashboard-header-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; }.dashboard-header h1 { color: var(--text-primary); font-size: 21px; font-weight: 620; letter-spacing: -.03em; }.dashboard-header p { max-width: 640px; margin-top: 7px; color: var(--text-secondary); font-size: 12px; }.dashboard-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 7px; }.breadcrumbs { display: flex; align-items: center; gap: 7px; margin-bottom: 15px; color: var(--text-muted); font-size: 11px; }.breadcrumbs span { display: inline-flex; align-items: center; gap: 7px; }.breadcrumbs a { color: var(--accent); }.breadcrumbs strong { color: var(--text-secondary); font-weight: 500; }
+.dashboard-panel { min-width: 0; margin-top: 12px; overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); }.dashboard-panel-title { display: flex; align-items: center; justify-content: space-between; min-height: 44px; padding: 0 14px; border-bottom: 1px solid var(--border-subtle); }.dashboard-panel-title h2 { color: var(--text-primary); font-size: 12px; font-weight: 620; }.dashboard-panel-title a { color: var(--accent); font-size: 11px; }
+.dash-stat-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }.dash-stat-strip > div { display: grid; gap: 4px; min-width: 0; padding: 13px 14px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface-raised); }.dash-stat-strip span, .dash-stat-strip small { color: var(--text-secondary); font-size: 11px; }.dash-stat-strip strong { color: var(--text-primary); font-size: 21px; font-weight: 620; letter-spacing: -.03em; }.dash-stat-strip small { color: var(--text-muted); }
+.dash-status { display: inline-flex; align-items: center; gap: 5px; width: fit-content; padding: 3px 6px; border-radius: var(--radius-sm); font-size: 10px; line-height: 1.2; white-space: nowrap; }.dash-status > span { width: 5px; height: 5px; border-radius: 50%; }.dash-status-good { color: var(--success); background: #2dd4a314; }.dash-status-good > span { background: var(--success); }.dash-status-warn { color: var(--warning); background: #d99a3217; }.dash-status-warn > span { background: var(--warning); }.dash-status-bad { color: var(--danger); background: #e0525217; }.dash-status-bad > span { background: var(--danger); }.dash-status-neutral { color: var(--text-secondary); background: #9aa4aa14; }.dash-status-neutral > span { background: var(--text-secondary); }
+.data-table-wrap { overflow-x: auto; }.data-table { width: 100%; border-collapse: collapse; min-width: 720px; }.data-table th { padding: 10px 14px; color: var(--text-muted); border-bottom: 1px solid var(--border-subtle); font-size: 10px; font-weight: 500; text-align: left; white-space: nowrap; }.data-table td { padding: 12px 14px; border-bottom: 1px solid var(--border-subtle); color: var(--text-secondary); font-size: 11px; vertical-align: middle; }.data-table tr:last-child td { border-bottom: 0; }.data-table tbody tr:hover td { background: var(--surface-hover); }.data-table a { color: var(--accent); }.data-table strong { display: block; color: var(--text-primary); font-weight: 550; }.data-table small { display: block; margin-top: 3px; color: var(--text-muted); font-size: 10px; }.mono { font-family: var(--mono); }
+.dash-button { display: inline-flex; align-items: center; gap: 5px; min-height: 29px; padding: 0 9px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-raised); color: var(--text-secondary); font-size: 11px; }.dash-button:hover { background: var(--surface-hover); color: var(--text-primary); }.filter-chip { display: inline-flex; align-items: center; min-height: 29px; padding: 0 9px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-raised); color: var(--text-secondary); font-size: 11px; }
+.empty-state { display: grid; justify-items: center; gap: 7px; padding: 42px 20px; color: var(--text-muted); text-align: center; }.empty-state svg { color: var(--success); }.empty-state strong { color: var(--text-secondary); font-size: 12px; font-weight: 550; }.empty-state p { max-width: 360px; font-size: 11px; }
+.loading-state { display: flex; justify-content: center; gap: 5px; padding: 80px 0; }.loading-state span { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); opacity: .45; }
+.detail-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, .7fr); gap: 12px; align-items: start; }.detail-stack { display: grid; gap: 12px; }.detail-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 4px 14px; }.detail-fields > div { padding: 10px 0; border-bottom: 1px solid var(--border-subtle); }.detail-fields > div:nth-last-child(-n+2) { border-bottom: 0; }.detail-fields dt { color: var(--text-muted); font-size: 10px; }.detail-fields dd { margin-top: 4px; color: var(--text-primary); font-size: 12px; }.detail-fields .mono { font-size: 11px; }.entity-link { color: var(--accent); }.entity-title { display: flex; align-items: center; gap: 9px; }.entity-title h1 { color: var(--text-primary); font-size: 21px; font-weight: 620; }.entity-subtitle { margin-top: 6px; color: var(--text-secondary); font-size: 12px; }
+.evidence-timeline { display: grid; gap: 0; margin: 0; padding: 14px; list-style: none; }.evidence-timeline li { position: relative; display: flex; gap: 10px; min-height: 52px; }.evidence-timeline li:not(:last-child)::before { position: absolute; top: 23px; bottom: 0; left: 10px; width: 1px; background: var(--border); content: ""; }.timeline-icon { z-index: 1; display: grid; place-items: center; width: 21px; height: 21px; flex: 0 0 21px; border: 1px solid var(--border); border-radius: 50%; background: var(--surface-raised); }.timeline-good { color: var(--success); }.timeline-warn { color: var(--warning); }.evidence-timeline strong { display: block; color: var(--text-primary); font-size: 11px; font-weight: 550; }.evidence-timeline time { display: block; margin-top: 2px; color: var(--text-muted); font: 10px var(--mono); }.evidence-timeline p { margin-top: 3px; color: var(--text-secondary); font-size: 10px; }
+.code-block { overflow: hidden; margin: 12px 14px; border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); }.code-block-title { padding: 8px 10px; border-bottom: 1px solid var(--border-subtle); color: var(--text-muted); font-size: 10px; }.code-block pre { overflow: auto; padding: 12px; color: var(--text-secondary); font: 10px/1.6 var(--mono); white-space: pre-wrap; }
+.split-panels { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }.split-panels > .dashboard-panel { margin-top: 12px; }.inline-list { display: grid; }.inline-list > a, .inline-list > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 45px; padding: 0 14px; border-bottom: 1px solid var(--border-subtle); }.inline-list > :last-child { border-bottom: 0; }.inline-list strong { color: var(--text-primary); font-size: 11px; font-weight: 550; }.inline-list small { display: block; margin-top: 2px; color: var(--text-muted); font-size: 10px; }.inline-list a:hover { background: var(--surface-hover); }
+.attempt-list { display: grid; }.attempt-row { display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; align-items: center; gap: 10px; min-height: 53px; padding: 0 14px; border-bottom: 1px solid var(--border-subtle); }.attempt-row:last-child { border-bottom: 0; }.attempt-number { color: var(--text-muted); font: 11px var(--mono); }.attempt-row strong { color: var(--text-primary); font-size: 11px; font-weight: 550; }.attempt-row small { display: block; margin-top: 2px; color: var(--text-muted); font: 10px var(--mono); }
+.tabs { display: flex; gap: 16px; margin-top: 17px; border-bottom: 1px solid var(--border); }.tabs a { padding: 0 0 9px; color: var(--text-muted); font-size: 11px; }.tabs a:first-child { color: var(--text-primary); border-bottom: 1px solid var(--accent); }
+.back-link, .attempt-navigation a { display: inline-flex; align-items: center; gap: 6px; color: var(--accent); font-size: 11px; }.attempt-navigation { display: flex; justify-content: space-between; margin: -8px 0 10px; }.failure-window { display: flex; align-items: center; gap: 10px; padding: 24px 16px; color: var(--text-muted); font: 10px var(--mono); }.failure-window > div { position: relative; display: flex; align-items: center; justify-content: space-between; width: 100%; height: 3px; background: var(--border); }.failure-window i { position: relative; width: 9px; height: 9px; margin-left: 28%; border-radius: 50%; background: var(--danger); box-shadow: 0 0 0 4px #e052521b; }.failure-window i.recovery { margin: 0 20% 0 0; background: var(--success); box-shadow: 0 0 0 4px #2dd4a31b; }.failure-window b { position: absolute; top: 14px; left: 21%; color: var(--danger); font: 9px var(--sans); white-space: nowrap; }.failure-window b.recovery-label { right: 8%; left: auto; color: var(--success); text-align: right; }.timing-bars { display: grid; gap: 10px; padding: 16px 14px; }.timing-bars span { display: grid; grid-template-columns: 70px 1fr; align-items: center; color: var(--text-muted); font: 10px var(--mono); }.timing-bars i { display: block; height: 7px; background: var(--accent); }.report-number { padding: 20px 14px 10px; color: var(--text-primary); font-size: 27px; font-weight: 620; letter-spacing: -.04em; }.report-number small { display: block; margin-top: 5px; color: var(--text-muted); font-size: 10px; font-weight: 400; letter-spacing: 0; }.report-bars { display: flex; align-items: end; gap: 8px; height: 94px; padding: 8px 14px 14px; border-top: 1px solid var(--border-subtle); }.report-bars i { flex: 1; min-height: 8px; background: var(--accent); opacity: .75; }.report-summary { display: grid; gap: 12px; padding: 20px 14px; color: var(--text-secondary); font-size: 11px; }.report-summary span { display: flex; align-items: center; gap: 7px; }.report-summary svg { color: var(--success); }.settings-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }.settings-grid .dashboard-panel { margin-top: 0; }
+@media (max-width: 900px) { .dashboard-content { padding-inline: 18px; }.detail-grid, .split-panels { grid-template-columns: 1fr; }.dash-stat-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
+@media (max-width: 720px) { .dashboard-content { padding: 26px 14px 34px; }.dashboard-header-row { align-items: flex-start; flex-direction: column; }.dashboard-actions { justify-content: flex-start; }.dash-stat-strip, .settings-grid { grid-template-columns: 1fr; }.detail-fields { grid-template-columns: 1fr; }.detail-fields > div:nth-last-child(-n+2) { border-bottom: 1px solid var(--border-subtle); }.detail-fields > div:last-child { border-bottom: 0; }.attempt-row { grid-template-columns: 34px minmax(0, 1fr); }.attempt-row .dash-status { grid-column: 2; justify-self: start; }.breadcrumbs { overflow-x: auto; white-space: nowrap; }.failure-window { padding-inline: 8px; }.failure-window b { left: 10%; }.failure-window b.recovery-label { right: 0; } }
diff --git a/frontend/src/app/deliveries/[deliveryId]/attempts/[attemptId]/page.tsx b/frontend/src/app/deliveries/[deliveryId]/attempts/[attemptId]/page.tsx
new file mode 100644
index 0000000..f2a966e
--- /dev/null
+++ b/frontend/src/app/deliveries/[deliveryId]/attempts/[attemptId]/page.tsx
@@ -0,0 +1,2 @@
+import { AttemptDetailPage } from "@/features/dashboard/pages";
+export default async function Page({ params }: { params: Promise<{ deliveryId: string; attemptId: string }> }) { const resolved = await params; return <AttemptDetailPage deliveryId={resolved.deliveryId} attemptId={resolved.attemptId} />; }
diff --git a/frontend/src/app/deliveries/[deliveryId]/page.tsx b/frontend/src/app/deliveries/[deliveryId]/page.tsx
new file mode 100644
index 0000000..d34d530
--- /dev/null
+++ b/frontend/src/app/deliveries/[deliveryId]/page.tsx
@@ -0,0 +1,2 @@
+import { DeliveryDetailPage } from "@/features/dashboard/pages";
+export default async function Page({ params }: { params: Promise<{ deliveryId: string }> }) { return <DeliveryDetailPage deliveryId={(await params).deliveryId} />; }
diff --git a/frontend/src/app/deliveries/page.tsx b/frontend/src/app/deliveries/page.tsx
new file mode 100644
index 0000000..db1ec65
--- /dev/null
+++ b/frontend/src/app/deliveries/page.tsx
@@ -0,0 +1,2 @@
+import { DeliveriesPage } from "@/features/dashboard/pages";
+export default function Page() { return <DeliveriesPage />; }
diff --git a/frontend/src/app/globals.css b/frontend/src/app/globals.css
index 25f6729..1efa6d0 100644
--- a/frontend/src/app/globals.css
+++ b/frontend/src/app/globals.css
@@ -1,20 +1,34 @@
 :root {
   color-scheme: dark;
-  --base: #101215;
-  --surface: #171a1e;
-  --raised: #1e2227;
-  --hover: #25292f;
-  --line: #2b3037;
-  --line-subtle: #22262c;
-  --text: #eef0f3;
-  --soft: #bec4cd;
-  --muted: #929ca9;
-  --accent: #ff956e;
-  --accent-dim: #31231f;
-  --green: #83d9b0;
-  --red: #ff989f;
-  --amber: #eac281;
-  --blue: #91bdff;
+  --base: #090d10;
+  --surface: #0e1519;
+  --raised: #121b20;
+  --hover: #121b20;
+  --line: #253036;
+  --line-subtle: #1b252a;
+  --text: #e6eaed;
+  --soft: #9aa4aa;
+  --muted: #69757c;
+  --accent: #6c8cff;
+  --accent-dim: #1d2946;
+  --green: #2dd4a3;
+  --red: #e05252;
+  --amber: #d99a32;
+  --blue: #6c8cff;
+  --bg: var(--base);
+  --sidebar: #0b1319;
+  --surface-raised: var(--raised);
+  --surface-hover: var(--hover);
+  --border: var(--line);
+  --border-subtle: var(--line-subtle);
+  --text-primary: var(--text);
+  --text-secondary: var(--soft);
+  --text-muted: var(--muted);
+  --success: var(--green);
+  --warning: var(--amber);
+  --danger: var(--red);
+  --radius-sm: 4px;
+  --radius-md: 6px;
   --mono: "Geist Mono Variable", ui-monospace, monospace;
   --sans: "Geist Variable", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
 }
diff --git a/frontend/src/app/incidents/[incidentId]/page.tsx b/frontend/src/app/incidents/[incidentId]/page.tsx
new file mode 100644
index 0000000..b29e6e9
--- /dev/null
+++ b/frontend/src/app/incidents/[incidentId]/page.tsx
@@ -0,0 +1,2 @@
+import { IncidentDetailPage } from "@/features/dashboard/pages";
+export default async function Page({ params }: { params: Promise<{ incidentId: string }> }) { return <IncidentDetailPage incidentId={(await params).incidentId} />; }
diff --git a/frontend/src/app/incidents/page.tsx b/frontend/src/app/incidents/page.tsx
new file mode 100644
index 0000000..ceb26cf
--- /dev/null
+++ b/frontend/src/app/incidents/page.tsx
@@ -0,0 +1,2 @@
+import { IncidentsPage } from "@/features/dashboard/pages";
+export default function Page() { return <IncidentsPage />; }
diff --git a/frontend/src/app/layout.tsx b/frontend/src/app/layout.tsx
index c377843..46e01f9 100644
--- a/frontend/src/app/layout.tsx
+++ b/frontend/src/app/layout.tsx
@@ -2,11 +2,11 @@ import type { Metadata } from "next";
 import "@fontsource-variable/geist";
 import "@fontsource-variable/geist-mono";
 import "./globals.css";
-import "@/features/desk/desk.css";
+import "./dashboard.css";
 
 export const metadata: Metadata = {
-  title: "Investigation desk · Ackvia",
-  description: "Captured submissions. Delivery evidence. Recovery in context.",
+  title: "Overview · Ackvia",
+  description: "Portfolio lead reliability at a glance.",
 };
 
 export default function RootLayout({ children }: LayoutProps<"/">) {
diff --git a/frontend/src/app/leads/[leadId]/page.tsx b/frontend/src/app/leads/[leadId]/page.tsx
new file mode 100644
index 0000000..e7ec023
--- /dev/null
+++ b/frontend/src/app/leads/[leadId]/page.tsx
@@ -0,0 +1,2 @@
+import { LeadDetailPage } from "@/features/dashboard/pages";
+export default async function Page({ params }: { params: Promise<{ leadId: string }> }) { return <LeadDetailPage leadId={(await params).leadId} />; }
diff --git a/frontend/src/app/leads/page.tsx b/frontend/src/app/leads/page.tsx
new file mode 100644
index 0000000..662b71a
--- /dev/null
+++ b/frontend/src/app/leads/page.tsx
@@ -0,0 +1,2 @@
+import { LeadsPage } from "@/features/dashboard/pages";
+export default function Page() { return <LeadsPage />; }
diff --git a/frontend/src/app/loading.tsx b/frontend/src/app/loading.tsx
index 9e5d444..f3e20e2 100644
--- a/frontend/src/app/loading.tsx
+++ b/frontend/src/app/loading.tsx
@@ -1 +1,7 @@
-export { DeskLoading as default } from "@/features/desk/desk-loading";
+import "./overview.css";
+import { AppShell } from "@/components/app-shell";
+import { DashboardPage, LoadingState } from "@/components/dashboard-ui";
+
+export default function Loading() {
+  return <AppShell><DashboardPage><LoadingState /></DashboardPage></AppShell>;
+}
diff --git a/frontend/src/app/monitoring/page.tsx b/frontend/src/app/monitoring/page.tsx
new file mode 100644
index 0000000..0d61001
--- /dev/null
+++ b/frontend/src/app/monitoring/page.tsx
@@ -0,0 +1,2 @@
+import { MonitoringPage } from "@/features/dashboard/pages";
+export default function Page() { return <MonitoringPage />; }
diff --git a/frontend/src/app/overview.css b/frontend/src/app/overview.css
new file mode 100644
index 0000000..eebe875
--- /dev/null
+++ b/frontend/src/app/overview.css
@@ -0,0 +1,80 @@
+.overview-shell { min-height: 100vh; display: flex; background: #0b1116; color: #e8edf2; }
+.overview-sidebar { position: fixed; inset: 0 auto 0 0; width: 220px; display: flex; flex-direction: column; padding: 22px 12px 14px; background: #0b1319; border-right: 1px solid #26313a; }
+.overview-brand { display: flex; align-items: center; gap: 9px; padding: 0 10px 27px; font-size: 15px; font-weight: 650; letter-spacing: -.02em; }
+.overview-mark { position: relative; width: 17px; height: 18px; display: inline-block; }
+.overview-mark span { position: absolute; width: 4px; height: 15px; border-radius: 4px; transform: rotate(28deg); }
+.overview-mark span:first-child { left: 1px; top: 2px; background: #f18bcd; }.overview-mark span:nth-child(2) { left: 7px; top: 0; background: #81aaff; }.overview-mark span:last-child { right: 0; top: 3px; background: #77d4b1; }
+.overview-nav { display: grid; gap: 3px; }.nav-item { display: flex; align-items: center; gap: 10px; min-height: 32px; padding: 0 10px; color: #9ba8b5; border-radius: 5px; font-size: 12px; }.nav-item:hover { color: #e8edf2; background: #16212a; }.nav-item-active { color: #edf3f8; background: #1b355d; }.nav-item b { margin-left: auto; display: grid; place-items: center; width: 16px; height: 16px; border-radius: 4px; background: #f04d5e; color: white; font-size: 10px; }
+.sidebar-bottom { margin-top: auto; display: grid; gap: 14px; }.workspace-switcher { display: flex; align-items: center; gap: 9px; padding: 9px 8px; background: none; border-top: 1px solid #26313a; color: #dce4eb; text-align: left; }.workspace-switcher > svg { margin-left: auto; color: #81909d; }.avatar, .top-avatar { display: grid; place-items: center; border-radius: 50%; background: #7196dc; color: white; font-size: 10px; font-weight: 700; }.avatar { width: 24px; height: 24px; }.workspace-copy { display: grid; gap: 1px; }.workspace-copy strong { font-size: 11px; font-weight: 550; }.workspace-copy small { color: #8794a0; font-size: 10px; }
+.overview-main { width: calc(100% - 220px); margin-left: 220px; min-width: 0; }.overview-topbar { position: relative; height: 62px; display: flex; align-items: center; justify-content: space-between; padding: 0 28px; border-bottom: 1px solid #26313a; }.search-trigger, .agency-button, .filter-button { display: flex; align-items: center; gap: 9px; border: 1px solid #25323c; border-radius: 5px; background: #101a21; color: #9daab5; }.search-trigger { width: 268px; height: 28px; padding: 0 9px; font-size: 11px; text-align: left; }.search-trigger svg { color: #a5b4c2; }.search-trigger kbd { margin-left: auto; padding: 2px 5px; border: 1px solid #2b3944; border-radius: 3px; color: #8e9aa6; font-size: 10px; }.topbar-actions { display: flex; align-items: center; gap: 14px; }.icon-button { position: relative; display: grid; place-items: center; width: 25px; height: 25px; background: none; color: #c0cad2; }.notification i { position: absolute; top: 3px; right: 2px; width: 4px; height: 4px; border-radius: 50%; background: #79d1af; }.top-avatar { width: 24px; height: 24px; }.agency-button { height: 28px; padding: 0 9px; color: #c7d0d8; font-size: 10px; }.search-popover { position: absolute; z-index: 5; top: 48px; left: 28px; width: 320px; display: flex; gap: 8px; padding: 12px; border: 1px solid #32414c; border-radius: 6px; background: #121c23; box-shadow: 0 16px 30px #0005; color: #8897a4; font-size: 11px; }
+.overview-content { max-width: 1160px; margin: 0 auto; padding: 37px 28px 28px; }.page-header { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 22px; }.page-header h1 { font-size: 20px; line-height: 1.1; letter-spacing: -.03em; font-weight: 620; }.portfolio-status { display: flex; align-items: center; gap: 7px; margin-top: 7px; color: #a5b1bb; font-size: 12px; }.pulse-dot, .footer-dot { width: 7px; height: 7px; border-radius: 50%; background: #53d4a1; box-shadow: 0 0 0 3px #53d4a11c; }.header-filters { display: flex; gap: 7px; }.filter-button { height: 29px; padding: 0 9px; font-size: 10px; color: #c5ced7; }.filter-button svg { color: #8393a1; }
+.metric-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }.metric { position: relative; min-height: 79px; padding: 13px 14px; border: 1px solid #26343d; border-radius: 6px; background: #111c23; }.metric span { display: block; color: #a1adb7; font-size: 11px; }.metric strong { display: block; margin-top: 4px; font-size: 22px; font-weight: 620; letter-spacing: -.04em; }.metric em { position: absolute; right: 12px; bottom: 14px; font-style: normal; font-size: 10px; }.trend-positive { color: #52d5a4; }.metric-attention { border-color: #33404a; }.trend-attention { color: #e5a35f; }
+.attention-panel { display: flex; align-items: center; gap: 12px; min-height: 70px; margin-top: 10px; padding: 13px 15px; border: 1px solid #4b382b; border-radius: 6px; background: #171b1e; }.attention-icon { display: grid; place-items: center; width: 29px; height: 29px; border-radius: 50%; color: #edb15b; background: #edb15b18; }.attention-copy { flex: 1; min-width: 0; }.attention-title { display: flex; align-items: center; gap: 9px; }.attention-title h2 { font-size: 12px; font-weight: 620; }.attention-copy p { display: flex; align-items: center; gap: 12px; margin-top: 5px; font-size: 11px; }.attention-copy p span { color: #8997a3; }.attention-copy p b { color: #d4dce2; font-weight: 450; }.attention-time { display: grid; justify-items: end; gap: 6px; color: #84919d; font-size: 10px; }.attention-time a, .panel-heading a { display: flex; align-items: center; gap: 2px; color: #82adff; }
+.visual-grid, .lower-grid { display: grid; grid-template-columns: 1.35fr 1fr; gap: 10px; margin-top: 10px; }.lower-grid { grid-template-columns: 1.35fr 1fr; }.panel { min-width: 0; border: 1px solid #26343d; border-radius: 6px; background: #111b22; overflow: hidden; }.panel-heading { display: flex; align-items: center; justify-content: space-between; min-height: 43px; padding: 0 13px; border-bottom: 1px solid #26343d; }.panel-heading h2 { font-size: 12px; font-weight: 620; }.panel-heading a { font-size: 10px; }.chart-meta { display: flex; align-items: baseline; gap: 7px; padding: 12px 13px 0; color: #8795a1; font-size: 10px; }.chart-meta strong { color: #d8e0e6; font-size: 14px; font-weight: 600; }.line-chart { position: relative; height: 172px; padding: 8px 12px 29px 42px; }.line-chart::before { content: ""; position: absolute; inset: 10px 12px 29px 42px; background: repeating-linear-gradient(to bottom, #2a3740 0 1px, transparent 1px 32px); opacity: .7; }.line-chart svg { position: relative; width: 100%; height: 130px; overflow: visible; }.chart-area { fill: url(#chart-fill); }.chart-line { fill: none; stroke: #75a4ff; stroke-width: 2; vector-effect: non-scaling-stroke; }.y-labels { position: absolute; z-index: 1; left: 13px; top: 3px; bottom: 32px; display: flex; flex-direction: column; justify-content: space-between; color: #778692; font: 9px var(--mono); }.x-labels { position: absolute; left: 42px; right: 12px; bottom: 7px; display: flex; justify-content: space-between; color: #778692; font: 9px var(--mono); }.delivery-body { display: flex; align-items: center; justify-content: center; gap: 30px; min-height: 192px; padding: 10px 20px; }.donut { display: grid; place-items: center; width: 116px; height: 116px; border-radius: 50%; background: conic-gradient(#45d5a3 0 97.4%, #e0a549 97.4% 98.8%, #ed6d73 98.8% 99.7%, #718297 99.7%); }.donut::before { content: ""; position: absolute; width: 88px; height: 88px; border-radius: 50%; background: #111b22; }.donut > div { position: relative; display: grid; justify-items: center; }.donut strong { font-size: 16px; }.donut span { color: #8795a1; font-size: 10px; }.legend { display: grid; gap: 10px; min-width: 138px; list-style: none; padding: 0; }.legend li { display: grid; grid-template-columns: 9px 1fr auto; align-items: center; gap: 7px; color: #b4bfc8; font-size: 10px; }.legend i { width: 8px; height: 8px; border-radius: 50%; }.legend b { color: #dce4e9; font-weight: 500; }.legend-green { background: #45d5a3; }.legend-amber { background: #e0a549; }.legend-red { background: #ed6d73; }.legend-slate { background: #718297; }
+.activity-list, .site-list { display: grid; }.activity-row, .site-row { display: flex; align-items: center; min-height: 45px; padding: 0 13px; border-bottom: 1px solid #202c34; font-size: 10px; }.activity-row:last-child, .site-row:last-child { border-bottom: 0; }.activity-row:hover, .site-row:hover { background: #17232b; }.event-icon { display: grid; place-items: center; width: 20px; height: 20px; margin-right: 9px; border-radius: 50%; }.event-good { color: #56d5a7; background: #56d5a71c; }.event-warn { color: #ecb05b; background: #ecb05b1c; }.event-bad { color: #ef7077; background: #ef70771c; }.activity-row time { width: 39px; color: #7d8b96; font: 10px var(--mono); }.event-copy { display: grid; gap: 1px; flex: 1; min-width: 0; }.event-copy strong { color: #cdd6dc; font-size: 10px; font-weight: 530; }.event-copy small { overflow: hidden; color: #7f8d98; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }.status { display: inline-flex; align-items: center; gap: 5px; width: fit-content; padding: 3px 6px; border-radius: 4px; font-size: 9px; white-space: nowrap; }.status-dot { width: 5px; height: 5px; border-radius: 50%; }.status-good { color: #54d3a4; background: #54d3a414; }.status-good .status-dot { background: #54d3a4; }.status-warn { color: #edb15b; background: #edb15b16; }.status-warn .status-dot { background: #edb15b; }.status-bad { color: #ef7077; background: #ef707716; }.status-bad .status-dot { background: #ef7077; }.status-neutral { color: #a8b3bd; background: #a8b3bd16; }.site-row { min-height: 42px; }.site-icon { display: grid; place-items: center; width: 23px; height: 23px; margin-right: 9px; border-radius: 4px; color: #a5b7c7; background: #24323c; }.site-copy { display: grid; gap: 1px; flex: 1; min-width: 0; }.site-copy strong { font-weight: 530; }.site-copy small { color: #7f8c97; font: 9px var(--mono); }.site-leads { margin-right: 12px; color: #778792; font: 9px var(--mono); }.overview-footer { display: flex; justify-content: space-between; padding: 17px 1px 0; color: #6f7d88; font-size: 10px; }.overview-footer span:first-child { display: flex; align-items: center; gap: 7px; }.footer-dot { width: 5px; height: 5px; box-shadow: none; }
+.site-rate { margin-right: 12px; color: #778792; font: 9px var(--mono); }
+
+/* Keep secondary values in flow before the dashboard becomes cramped. */
+@media (max-width: 1120px) {
+    .metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+    .metric { min-width: 0; }
+    .metric em { position: static; display: block; margin-top: 5px; line-height: 1.3; }
+}
+
+/* Give the two visual panels and lower lists useful reading width on tablets. */
+@media (max-width: 1100px) {
+    .overview-sidebar { width: 188px; }
+    .overview-main { width: calc(100% - 188px); margin-left: 188px; }
+    .overview-content { padding-inline: 18px; }
+    .visual-grid, .lower-grid { grid-template-columns: 1fr; }
+    .delivery-body { min-height: 176px; }
+    .site-row { min-width: 0; }
+}
+
+@media (max-width: 900px) {
+    .overview-topbar { padding-inline: 18px; }
+    .header-filters .filter-button:last-child { display: none; }
+}
+
+@media (max-width: 720px) {
+    .overview-sidebar { position: static; width: 56px; padding: 18px 8px; }
+    .overview-brand { padding: 0 10px 24px; }
+    .overview-brand > span:last-child, .nav-item span, .nav-item b, .sidebar-bottom .nav-item, .workspace-copy, .workspace-switcher > svg { display: none; }
+    .nav-item, .workspace-switcher { justify-content: center; }
+    .nav-item { padding-inline: 0; }
+    .workspace-switcher { padding-inline: 0; }
+    .overview-main { width: calc(100% - 56px); margin-left: 0; }
+    .overview-topbar { padding: 0 15px; }
+    .search-trigger { width: 150px; }
+    .topbar-actions { gap: 8px; }
+    .agency-button { display: none; }
+    .overview-content { padding: 26px 14px; }
+    .page-header { gap: 15px; flex-direction: column; }
+    .metric-grid { grid-template-columns: 1fr; }
+    .metric strong { font-size: 21px; }
+    .delivery-body { flex-direction: column; gap: 18px; min-height: 250px; padding-block: 18px; }
+    .donut { flex: 0 0 116px; }
+    .legend { width: min(100%, 220px); min-width: 0; }
+    .site-row { padding-inline: 11px; }
+    .site-copy { min-width: 0; }
+    .site-copy strong, .site-copy small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+    .site-leads, .site-rate { display: none; }
+    .overview-footer { padding-bottom: 10px; }
+}
+
+/* Structural dividers stay visible without making each row feel boxed in. */
+.activity-row, .site-row { border-bottom-color: #1c272d; }
+
+/* Shared semantic palette for the Overview shell. */
+.overview-shell { background: var(--bg); color: var(--text-primary); }
+.overview-sidebar { background: var(--sidebar); border-color: var(--border); }
+.overview-main, .panel, .metric { border-color: var(--border); }
+.panel, .metric { background: var(--surface); }
+.overview-nav .nav-item:hover, .activity-row:hover, .site-row:hover { background: var(--surface-hover); }
+.overview-sidebar, .panel-heading, .overview-topbar { border-color: var(--border-subtle); }
+.overview-brand, .page-header h1, .panel-heading h2, .metric strong { color: var(--text-primary); }
+.portfolio-status, .metric span, .chart-meta, .site-leads, .site-rate { color: var(--text-secondary); }
+.pulse-dot, .footer-dot { background: var(--success); }
+.trend-positive, .status-good { color: var(--success); }
+.trend-attention, .status-warn { color: var(--warning); }
+.status-bad { color: var(--danger); }
diff --git a/frontend/src/app/overview/page.tsx b/frontend/src/app/overview/page.tsx
new file mode 100644
index 0000000..196d609
--- /dev/null
+++ b/frontend/src/app/overview/page.tsx
@@ -0,0 +1,6 @@
+import "../overview.css";
+import { Overview } from "@/features/overview/overview";
+
+export default function OverviewPage() {
+  return <Overview />;
+}
diff --git a/frontend/src/app/page.tsx b/frontend/src/app/page.tsx
index 5e2ad89..2d0fb1d 100644
--- a/frontend/src/app/page.tsx
+++ b/frontend/src/app/page.tsx
@@ -1,6 +1,5 @@
-import { loadDesk } from "@/features/desk/load";
-import { Desk } from "@/features/desk/desk";
+import { redirect } from "next/navigation";
 
-export default async function Page({ searchParams }: PageProps<"/">) {
-  return <Desk snapshot={await loadDesk(await searchParams)} />;
+export default function Page() {
+  redirect("/overview");
 }
diff --git a/frontend/src/app/reports/page.tsx b/frontend/src/app/reports/page.tsx
new file mode 100644
index 0000000..362c244
--- /dev/null
+++ b/frontend/src/app/reports/page.tsx
@@ -0,0 +1,2 @@
+import { ReportsPage } from "@/features/dashboard/pages";
+export default function Page() { return <ReportsPage />; }
diff --git a/frontend/src/app/settings/page.tsx b/frontend/src/app/settings/page.tsx
new file mode 100644
index 0000000..79993db
--- /dev/null
+++ b/frontend/src/app/settings/page.tsx
@@ -0,0 +1,2 @@
+import { SettingsPage } from "@/features/dashboard/pages";
+export default function Page() { return <SettingsPage />; }
diff --git a/frontend/src/app/sites/[siteId]/page.tsx b/frontend/src/app/sites/[siteId]/page.tsx
new file mode 100644
index 0000000..342ed5a
--- /dev/null
+++ b/frontend/src/app/sites/[siteId]/page.tsx
@@ -0,0 +1,2 @@
+import { SiteDetailPage } from "@/features/dashboard/pages";
+export default async function Page({ params }: { params: Promise<{ siteId: string }> }) { return <SiteDetailPage siteId={(await params).siteId} />; }
diff --git a/frontend/src/app/sites/page.tsx b/frontend/src/app/sites/page.tsx
new file mode 100644
index 0000000..e45188a
--- /dev/null
+++ b/frontend/src/app/sites/page.tsx
@@ -0,0 +1,2 @@
+import { SitesPage } from "@/features/dashboard/pages";
+export default function Page() { return <SitesPage />; }
diff --git a/frontend/src/components/app-shell.tsx b/frontend/src/components/app-shell.tsx
new file mode 100644
index 0000000..7062a72
--- /dev/null
+++ b/frontend/src/components/app-shell.tsx
@@ -0,0 +1,12 @@
+import type { ReactNode } from "react";
+import { Sidebar } from "./sidebar";
+import { TopBar } from "./top-bar";
+
+export function AppShell({ children }: { children: ReactNode }) {
+  return (
+    <div className="overview-shell">
+      <Sidebar />
+      <main className="overview-main"><TopBar />{children}</main>
+    </div>
+  );
+}
diff --git a/frontend/src/components/dashboard-ui.tsx b/frontend/src/components/dashboard-ui.tsx
new file mode 100644
index 0000000..cb2ff3a
--- /dev/null
+++ b/frontend/src/components/dashboard-ui.tsx
@@ -0,0 +1,67 @@
+import type { ReactNode } from "react";
+import Link from "next/link";
+import { ChevronRight, CircleAlert, CircleCheck, CircleHelp } from "lucide-react";
+import type { HealthStatus, StatusTone } from "@/lib/mock-data";
+
+const healthTone: Record<HealthStatus, StatusTone> = { Healthy: "good", Attention: "warn", Down: "bad", Unknown: "neutral" };
+
+export function DashboardPage({ children }: { children: ReactNode }) {
+  return <div className="dashboard-content">{children}</div>;
+}
+
+export function Breadcrumbs({ items }: { items: { label: string; href?: string }[] }) {
+  return <nav className="breadcrumbs" aria-label="Breadcrumb">{items.map((item, index) => <span key={`${item.label}-${index}`}>{index > 0 && <ChevronRight size={12} />}{item.href ? <Link href={item.href}>{item.label}</Link> : <strong>{item.label}</strong>}</span>)}</nav>;
+}
+
+export function PageHeader({ title, description, actions, breadcrumbs }: { title: string; description?: string; actions?: ReactNode; breadcrumbs?: { label: string; href?: string }[] }) {
+  return <header className="dashboard-header">{breadcrumbs && <Breadcrumbs items={breadcrumbs} />}<div className="dashboard-header-row"><div><h1>{title}</h1>{description && <p>{description}</p>}</div>{actions && <div className="dashboard-actions">{actions}</div>}</div></header>;
+}
+
+export function Panel({ children, className = "" }: { children: ReactNode; className?: string }) {
+  return <section className={`dashboard-panel ${className}`}>{children}</section>;
+}
+
+export function PanelTitle({ title, action }: { title: string; action?: ReactNode }) {
+  return <div className="dashboard-panel-title"><h2>{title}</h2>{action}</div>;
+}
+
+export function StatusBadge({ label, tone, status }: { label?: string; tone?: StatusTone; status?: HealthStatus }) {
+  const resolvedTone = status ? healthTone[status] : tone ?? "neutral";
+  return <span className={`dash-status dash-status-${resolvedTone}`}><span />{label ?? status}</span>;
+}
+
+export function HealthBadge({ status }: { status: HealthStatus }) {
+  return <StatusBadge status={status} />;
+}
+
+export function StatStrip({ items }: { items: { label: string; value: string; detail?: string }[] }) {
+  return <div className="dash-stat-strip">{items.map((item) => <div key={item.label}><span>{item.label}</span><strong>{item.value}</strong>{item.detail && <small>{item.detail}</small>}</div>)}</div>;
+}
+
+export function DataTable({ headers, children, empty }: { headers: string[]; children?: ReactNode; empty?: ReactNode }) {
+  return <div className="data-table-wrap"><table className="data-table"><thead><tr>{headers.map((header) => <th key={header}>{header}</th>)}</tr></thead><tbody>{children ?? <tr><td colSpan={headers.length}>{empty}</td></tr>}</tbody></table></div>;
+}
+
+export function EmptyState({ title, description }: { title: string; description?: string }) {
+  return <div className="empty-state"><CircleHelp size={18} /><strong>{title}</strong>{description && <p>{description}</p>}</div>;
+}
+
+export function LoadingState() {
+  return <div className="loading-state" role="status" aria-label="Loading"><span /><span /><span /></div>;
+}
+
+export function DetailFields({ fields }: { fields: { label: string; value: ReactNode; mono?: boolean }[] }) {
+  return <dl className="detail-fields">{fields.map((field) => <div key={field.label}><dt>{field.label}</dt><dd className={field.mono ? "mono" : ""}>{field.value}</dd></div>)}</dl>;
+}
+
+export function Timeline({ items }: { items: { label: string; time: string; detail?: string; tone?: StatusTone }[] }) {
+  return <ol className="evidence-timeline">{items.map((item) => <li key={`${item.label}-${item.time}`}><span className={`timeline-icon timeline-${item.tone ?? "good"}`}>{item.tone === "warn" ? <CircleAlert size={13} /> : <CircleCheck size={13} />}</span><div><strong>{item.label}</strong><time>{item.time}</time>{item.detail && <p>{item.detail}</p>}</div></li>)}</ol>;
+}
+
+export function CodeBlock({ title, children }: { title: string; children: ReactNode }) {
+  return <div className="code-block"><div className="code-block-title">{title}</div><pre>{children}</pre></div>;
+}
+
+export function LinkButton({ href, children }: { href: string; children: ReactNode }) {
+  return <Link className="dash-button" href={href}>{children}<ChevronRight size={13} /></Link>;
+}
diff --git a/frontend/src/components/sidebar.tsx b/frontend/src/components/sidebar.tsx
new file mode 100644
index 0000000..7cd5318
--- /dev/null
+++ b/frontend/src/components/sidebar.tsx
@@ -0,0 +1,57 @@
+"use client";
+
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+import {
+  Activity,
+  ChevronDown,
+  CircleAlert,
+  FileText,
+  Globe2,
+  LayoutGrid,
+  ListChecks,
+  Settings,
+  Users,
+  Zap,
+} from "lucide-react";
+
+type NavigationItem = {
+  label: string;
+  href: string;
+  icon: typeof LayoutGrid;
+  badge?: string;
+};
+
+const navigation: NavigationItem[] = [
+  { label: "Overview", href: "/overview", icon: LayoutGrid },
+  { label: "Clients", href: "/clients", icon: Users },
+  { label: "Sites", href: "/sites", icon: Globe2 },
+  { label: "Leads", href: "/leads", icon: Zap },
+  { label: "Incidents", href: "/incidents", icon: CircleAlert, badge: "1" },
+  { label: "Deliveries", href: "/deliveries", icon: ListChecks },
+  { label: "Monitoring", href: "/monitoring", icon: Activity },
+  { label: "Reports", href: "/reports", icon: FileText },
+];
+
+function BrandMark() {
+  return <span className="overview-mark" aria-hidden="true"><span /><span /><span /></span>;
+}
+
+export function Sidebar() {
+  const pathname = usePathname();
+
+  return <aside className="overview-sidebar">
+    <Link className="overview-brand" href="/overview"><BrandMark /><span>Ackvia</span></Link>
+    <nav className="overview-nav" aria-label="Primary navigation">
+      {navigation.map(({ label, href, icon: Icon, badge }) => <Link className={`nav-item ${pathname === href || pathname.startsWith(`${href}/`) ? "nav-item-active" : ""}`} href={href} key={label}>
+        <Icon size={15} strokeWidth={1.7} /><span>{label}</span>{badge && <b>{badge}</b>}
+      </Link>)}
+    </nav>
+    <div className="sidebar-bottom">
+      <Link className={`nav-item ${pathname === "/settings" || pathname.startsWith("/settings/") ? "nav-item-active" : ""}`} href="/settings"><Settings size={15} strokeWidth={1.7} /><span>Settings</span></Link>
+      <button className="workspace-switcher" type="button">
+        <span className="avatar">RT</span><span className="workspace-copy"><strong>Rostyslav</strong><small>Acme Agency</small></span><ChevronDown size={13} />
+      </button>
+    </div>
+  </aside>;
+}
diff --git a/frontend/src/components/top-bar.tsx b/frontend/src/components/top-bar.tsx
new file mode 100644
index 0000000..5c82974
--- /dev/null
+++ b/frontend/src/components/top-bar.tsx
@@ -0,0 +1,16 @@
+"use client";
+
+import { useState } from "react";
+import { Bell, ChevronDown, LifeBuoy, Search } from "lucide-react";
+
+export function TopBar() {
+  const [searchOpen, setSearchOpen] = useState(false);
+
+  return <header className="overview-topbar">
+    <button className="search-trigger" type="button" onClick={() => setSearchOpen((open) => !open)} aria-expanded={searchOpen}>
+      <Search size={15} /><span>Search...</span><kbd>Ctrl K</kbd>
+    </button>
+    <div className="topbar-actions"><button className="icon-button" aria-label="Help"><LifeBuoy size={16} /></button><button className="icon-button notification" aria-label="Notifications"><Bell size={16} /><i /></button><span className="top-avatar">RT</span><button className="agency-button" type="button">Acme Agency<ChevronDown size={13} /></button></div>
+    {searchOpen && <div className="search-popover" role="status"><Search size={14} /><span>Search clients, sites, leads...</span></div>}
+  </header>;
+}
diff --git a/frontend/src/features/dashboard/pages.tsx b/frontend/src/features/dashboard/pages.tsx
new file mode 100644
index 0000000..337599b
--- /dev/null
+++ b/frontend/src/features/dashboard/pages.tsx
@@ -0,0 +1,104 @@
+import Link from "next/link";
+import { ArrowLeft, CheckCircle2, RefreshCw, Webhook } from "lucide-react";
+import { AppShell } from "@/components/app-shell";
+import { CodeBlock, DashboardPage, DataTable, DetailFields, EmptyState, HealthBadge, Panel, PanelTitle, PageHeader, StatStrip, StatusBadge, Timeline } from "@/components/dashboard-ui";
+import { attempts, clients, deliveries, getClientForSite, getDeliveryForAttempt, getMockAttempt, getMockClient, getMockDelivery, getMockIncident, getMockLead, getMockLeadPath, getMockSite, incidents, leadPaths, leads, sites } from "@/lib/mock-data";
+
+const deliveryTone = { Pending: "neutral", Processing: "warn", "Awaiting retry": "warn", Delivered: "good", Failed: "bad", Unknown: "neutral" } as const;
+const attemptTone = { Succeeded: "good", "Retryable failure": "warn", "Permanent failure": "bad", "Unknown result": "neutral" } as const;
+const incidentTone = { Investigating: "bad", Recovering: "warn", "Resolved automatically": "good" } as const;
+
+function ShellPage({ children }: { children: React.ReactNode }) { return <AppShell><DashboardPage>{children}</DashboardPage></AppShell>; }
+function DeliveryBadge({ state }: { state: keyof typeof deliveryTone }) { return <StatusBadge label={state} tone={deliveryTone[state]} />; }
+function AttemptBadge({ result }: { result: keyof typeof attemptTone }) { return <StatusBadge label={result} tone={attemptTone[result]} />; }
+
+export function ClientsPage() {
+  return <ShellPage><PageHeader title="Clients" description="Portfolio-level visibility across the agency workspace." /><DataTable headers={["Client", "Sites", "Lead paths", "Captured leads", "Delivery rate", "Incidents", "Health", "Last activity"]}>{clients.map((client) => <tr key={client.id}><td><Link href={`/clients/${client.id}`}><strong>{client.name}</strong></Link></td><td>{client.siteIds.length}</td><td>{client.leadPathCount}</td><td>{client.leads}</td><td>{client.deliveryRate}</td><td>{client.incidents}</td><td><HealthBadge status={client.health} /></td><td className="mono">{client.lastActivity}</td></tr>)}</DataTable></ShellPage>;
+}
+
+export function ClientDetailPage({ clientId }: { clientId: string }) {
+  const client = getMockClient(clientId);
+  if (!client) return <ShellPage><EmptyState title="Client not found" description="This mock client ID does not exist." /></ShellPage>;
+  const clientSites = sites.filter((site) => site.clientId === client.id);
+  const clientLeads = leads.filter((lead) => lead.clientId === client.id);
+  return <ShellPage><PageHeader title={client.name} description="Client-level lead reliability and delivery health." breadcrumbs={[{ label: "Clients", href: "/clients" }, { label: client.name }]} actions={<HealthBadge status={client.health} />} /><StatStrip items={[{ label: "Sites", value: String(client.siteIds.length) }, { label: "Lead paths", value: String(client.leadPathCount) }, { label: "Captured leads", value: String(client.leads) }, { label: "Delivery rate", value: client.deliveryRate }, { label: "Active incidents", value: String(client.incidents) }]} /><div className="split-panels"><Panel><PanelTitle title="Sites" /><div className="inline-list">{clientSites.map((site) => <Link href={`/sites/${site.id}`} key={site.id}><span><strong>{site.name}</strong><small>{site.domain}</small></span><HealthBadge status={site.health} /></Link>)}</div></Panel><Panel><PanelTitle title="Active incidents" />{client.incidents ? <div className="inline-list"><Link href="/incidents/incident-keller-crm"><span><strong>CRM Webhook delivery failures</strong><small>Started 08:43:03 · 31 affected leads</small></span><StatusBadge label="Resolved automatically" tone="good" /></Link></div> : <EmptyState title="No active incidents" />}</Panel></div><Panel><PanelTitle title="Recent leads" /><DataTable headers={["Lead", "Captured", "Site / path", "Capture state", "Deliveries"]}>{clientLeads.map((lead) => <tr key={lead.id}><td><Link href={`/leads/${lead.id}`}><strong>{lead.id}</strong></Link><small>{lead.customerName}</small></td><td className="mono">{lead.capturedAt}</td><td>{getMockSite(lead.siteId)?.domain}<small>{getMockLeadPath(lead.leadPathId)?.name}</small></td><td><StatusBadge label={lead.state} tone="good" /></td><td>{lead.deliveryIds.length} destinations</td></tr>)}</DataTable></Panel></ShellPage>;
+}
+
+export function SitesPage() {
+  return <ShellPage><PageHeader title="Sites" description="Portfolio sites and the lead paths they protect." /><DataTable headers={["Site", "Client", "Lead paths", "Leads", "Delivery rate", "Health", "Last activity"]}>{sites.map((site) => <tr key={site.id}><td><Link href={`/sites/${site.id}`}><strong>{site.domain}</strong></Link><small>{site.name}</small></td><td><Link href={`/clients/${site.clientId}`}>{getMockClient(site.clientId)?.name}</Link></td><td>{site.leadPathIds.length}</td><td>{site.leads}</td><td>{site.deliveryRate}</td><td><HealthBadge status={site.health} /></td><td className="mono">{site.lastActivity}</td></tr>)}</DataTable></ShellPage>;
+}
+
+export function SiteDetailPage({ siteId }: { siteId: string }) {
+  const site = getMockSite(siteId);
+  if (!site) return <ShellPage><EmptyState title="Site not found" description="This mock site ID does not exist." /></ShellPage>;
+  const client = getClientForSite(site.id);
+  const pathItems = leadPaths.filter((path) => path.siteId === site.id);
+  const siteLeads = leads.filter((lead) => lead.siteId === site.id);
+  return <ShellPage><PageHeader title={site.domain} description={site.name} breadcrumbs={[{ label: "Sites", href: "/sites" }, { label: site.domain }]} actions={<HealthBadge status={site.health} />} /><StatStrip items={[{ label: "Client", value: client?.name ?? "Unknown" }, { label: "Lead paths", value: String(site.leadPathIds.length) }, { label: "Captured leads", value: String(site.leads) }, { label: "Delivery rate", value: site.deliveryRate }]} /><Panel><PanelTitle title="Lead paths" /><DataTable headers={["Lead path", "Status", "Recent leads", "Destinations", "Delivery health", "Last event"]}>{pathItems.map((path) => <tr key={path.id}><td><strong>{path.name}</strong><small className="mono">{path.id}</small></td><td><HealthBadge status={path.status} /></td><td>{path.recentLeads}</td><td>{path.destinations.join(" · ")}</td><td>{path.deliveryHealth}</td><td className="mono">{path.lastEvent}</td></tr>)}</DataTable></Panel><Panel><PanelTitle title="Recent leads" />{siteLeads.length ? <DataTable headers={["Lead", "Customer", "Captured", "State"]}>{siteLeads.map((lead) => <tr key={lead.id}><td><Link href={`/leads/${lead.id}`}><strong>{lead.id}</strong></Link></td><td>{lead.customerName}</td><td className="mono">{lead.capturedAt}</td><td><StatusBadge label={lead.state} tone="good" /></td></tr>)}</DataTable> : <EmptyState title="No leads captured yet" />}</Panel></ShellPage>;
+}
+
+function leadDeliverySummary(leadId: string) {
+  const items = deliveries.filter((delivery) => delivery.leadId === leadId);
+  const delivered = items.filter((item) => item.state === "Delivered").length;
+  const pending = items.filter((item) => item.state === "Awaiting retry").length;
+  return `${delivered} delivered${pending ? ` · ${pending} awaiting retry` : ""}`;
+}
+
+export function LeadsPage() {
+  return <ShellPage><PageHeader title="Leads" description="Captured leads and independent destination delivery outcomes." /><DataTable headers={["Lead", "Captured", "Client", "Site / lead path", "Destinations", "Delivery summary"]}>{leads.map((lead) => <tr key={lead.id}><td><Link href={`/leads/${lead.id}`}><strong>{lead.id}</strong></Link><small>{lead.customerName}</small></td><td className="mono">{lead.capturedAt}</td><td>{getMockClient(lead.clientId)?.name}</td><td>{getMockSite(lead.siteId)?.domain}<small>{getMockLeadPath(lead.leadPathId)?.name}</small></td><td>{lead.deliveryIds.length}</td><td>{leadDeliverySummary(lead.id)}</td></tr>)}</DataTable></ShellPage>;
+}
+
+export function LeadDetailPage({ leadId }: { leadId: string }) {
+  const lead = getMockLead(leadId);
+  if (!lead) return <ShellPage><EmptyState title="Lead not found" description="This mock lead ID does not exist." /></ShellPage>;
+  const site = getMockSite(lead.siteId);
+  const deliveriesForLead = deliveries.filter((delivery) => lead.deliveryIds.includes(delivery.id));
+  return <ShellPage><PageHeader title={lead.id} description={`${site?.name} / ${getMockLeadPath(lead.leadPathId)?.name}`} breadcrumbs={[{ label: "Leads", href: "/leads" }, { label: lead.id }]} actions={<StatusBadge label="Captured safely" tone="good" />} /><div className="detail-grid"><div className="detail-stack"><Panel><PanelTitle title="Lead information" /><DetailFields fields={[{ label: "Customer", value: lead.customerName }, { label: "Email", value: lead.email }, { label: "Phone", value: lead.phone, mono: true }, { label: "Captured", value: lead.capturedAt, mono: true }, { label: "Site", value: site ? <Link className="entity-link" href={`/sites/${site.id}`}>{site.domain}</Link> : "Unknown" }, { label: "Lead path", value: getMockLeadPath(lead.leadPathId)?.name ?? "Unknown" }, { label: "Capture state", value: <StatusBadge label="Captured safely" tone="good" /> }, { label: "Message", value: lead.message }]} /><CodeBlock title="Raw payload">{JSON.stringify({ name: lead.customerName, email: lead.email, phone: lead.phone, message: lead.message }, null, 2)}</CodeBlock></Panel><Panel><PanelTitle title="Lead lifecycle" /><Timeline items={[{ label: "Captured", time: "08:42:31", detail: "Received from kellersolar.com" }, { label: "Durably stored", time: "08:42:31", detail: "Saved to database" }]} /></Panel></div><div className="detail-stack"><Panel><PanelTitle title="Independent deliveries" />{deliveriesForLead.map((delivery) => <Link className="attempt-row" href={`/deliveries/${delivery.id}`} key={delivery.id}><span className="site-icon"><Webhook size={14} /></span><span><strong>{delivery.destination}</strong><small>{delivery.attemptIds.length} attempt{delivery.attemptIds.length === 1 ? "" : "s"}</small></span><DeliveryBadge state={delivery.state} /></Link>)}</Panel><Panel><PanelTitle title="Delivery evidence" /><Timeline items={deliveriesForLead.map((delivery) => ({ label: `${delivery.destination} · ${delivery.state}`, time: delivery.deliveredAt ?? delivery.createdAt, tone: delivery.state === "Delivered" ? "good" : "warn" }))} /></Panel></div></div></ShellPage>;
+}
+
+export function IncidentsPage() {
+  return <ShellPage><PageHeader title="Incidents" description="Operational problems affecting destinations, paths, and leads." /><DataTable headers={["Incident", "Status", "Client / site", "Destination", "Started", "Duration", "Affected leads"]}>{incidents.map((incident) => <tr key={incident.id}><td><Link href={`/incidents/${incident.id}`}><strong>{incident.title}</strong></Link></td><td><StatusBadge label={incident.state} tone={incidentTone[incident.state]} /></td><td>{getMockClient(incident.clientId)?.name}<small>{getMockSite(incident.siteId)?.domain}</small></td><td>{incident.destination}</td><td className="mono">{incident.startedAt}</td><td>{incident.duration}</td><td>{incident.affectedLeads}</td></tr>)}</DataTable></ShellPage>;
+}
+
+export function IncidentDetailPage({ incidentId }: { incidentId: string }) {
+  const incident = getMockIncident(incidentId);
+  if (!incident) return <ShellPage><EmptyState title="Incident not found" description="This mock incident ID does not exist." /></ShellPage>;
+  const site = getMockSite(incident.siteId);
+  return <ShellPage><PageHeader title={incident.title} description="Multiple delivery attempts failed with connection errors and HTTP 503 responses." breadcrumbs={[{ label: "Incidents", href: "/incidents" }, { label: incident.id }]} actions={<StatusBadge label={incident.state} tone="good" />} /><StatStrip items={[{ label: "Started", value: "08:43:03" }, { label: "Resolved", value: "08:50:03" }, { label: "Duration", value: incident.duration }, { label: "Affected leads", value: String(incident.affectedLeads) }, { label: "Peak failure rate", value: incident.peakFailureRate }]} /><div className="detail-grid"><div className="detail-stack"><Panel><PanelTitle title="Incident lifecycle" /><Timeline items={[{ label: "Detected", time: "08:43:03", detail: "Increased failure rate (62%)" }, { label: "Incident opened", time: "08:43:03", detail: "Automatic detection started" }, { label: "Automatic retries running", time: "08:43:03 — 08:50:03", detail: "Multiple attempts failed" }, { label: "Recovery detected", time: "08:50:03", detail: "Successful delivery received" }, { label: "Resolved automatically", time: "08:50:03", detail: "Successful delivery recovered" }]} /></Panel><Panel><PanelTitle title="Failure window" /><div className="failure-window"><span>08:35</span><div><i /><b>Incident opened<br />08:43:03</b><i className="recovery" /><b className="recovery-label">Recovery<br />08:50:03</b></div><span>08:55</span></div></Panel></div><div className="detail-stack"><Panel><PanelTitle title="Incident scope" /><DetailFields fields={[{ label: "Affected destination", value: incident.destination }, { label: "Affected site", value: site ? <Link className="entity-link" href={`/sites/${site.id}`}>{site.domain}</Link> : "Unknown" }, { label: "Client", value: getMockClient(incident.clientId)?.name }, { label: "Affected leads", value: incident.affectedLeads }, { label: "Peak failure rate", value: incident.peakFailureRate }]} /></Panel><Panel><PanelTitle title="Error patterns" /><div className="inline-list"><div><span><strong>Connection timeout</strong><small>18 failures · 58%</small></span><StatusBadge label="Retryable" tone="warn" /></div><div><span><strong>HTTP 503 Service Unavailable</strong><small>11 failures · 35%</small></span><StatusBadge label="Retryable" tone="warn" /></div></div></Panel></div></div><Panel><PanelTitle title="Recent affected deliveries" /><DataTable headers={["Delivery", "Lead", "Attempt", "Error", "Status"]}>{incident.attemptIds.map((attemptId) => { const attempt = getMockAttempt(attemptId); const delivery = attempt ? getMockDelivery(attempt.deliveryId) : undefined; return attempt && delivery ? <tr key={attempt.id}><td><Link href={`/deliveries/${delivery.id}`}>{delivery.destination}</Link></td><td><Link href={`/leads/${delivery.leadId}`}>{delivery.leadId}</Link></td><td><Link href={`/deliveries/${delivery.id}/attempts/${attempt.id}`}>#{attempt.number}</Link></td><td>{attempt.providerMessage}</td><td><AttemptBadge result={attempt.result} /></td></tr> : null; })}</DataTable></Panel></ShellPage>;
+}
+
+export function DeliveriesPage() {
+  return <ShellPage><PageHeader title="Deliveries" description="Independent destination delivery records and recovery state." /><DataTable headers={["Delivery", "Lead", "Destination", "Status", "Attempts", "Last attempt", "Next retry", "Last error"]}>{deliveries.map((delivery) => { const lastAttempt = getMockAttempt(delivery.attemptIds.at(-1) ?? ""); return <tr key={delivery.id}><td><Link href={`/deliveries/${delivery.id}`}><strong>{delivery.id}</strong></Link><small>{delivery.createdAt}</small></td><td><Link href={`/leads/${delivery.leadId}`}>{delivery.leadId}</Link></td><td>{delivery.destination}</td><td><DeliveryBadge state={delivery.state} /></td><td>{delivery.attemptIds.length}</td><td className="mono">{lastAttempt?.finishedAt ?? "—"}</td><td className="mono">{delivery.nextRetry ?? "—"}</td><td>{delivery.lastError ?? "—"}</td></tr>; })}</DataTable></ShellPage>;
+}
+
+export function DeliveryDetailPage({ deliveryId }: { deliveryId: string }) {
+  const delivery = getMockDelivery(deliveryId);
+  if (!delivery) return <ShellPage><EmptyState title="Delivery not found" description="This mock delivery ID does not exist." /></ShellPage>;
+  const lead = getMockLead(delivery.leadId);
+  const items = attempts.filter((attempt) => delivery.attemptIds.includes(attempt.id));
+  return <ShellPage><PageHeader title={delivery.destination} description={`Delivery for ${delivery.leadId}`} breadcrumbs={[{ label: "Leads", href: "/leads" }, { label: delivery.leadId, href: `/leads/${delivery.leadId}` }, { label: delivery.destination }]} actions={<DeliveryBadge state={delivery.state} />} /><StatStrip items={[{ label: "Lead", value: delivery.leadId }, { label: "Created", value: delivery.createdAt }, { label: "Delivered", value: delivery.deliveredAt ?? "—" }, { label: "Attempts", value: String(items.length) }]} /><div className="detail-grid"><div className="detail-stack"><Panel><PanelTitle title="Attempt history" /><div className="attempt-list">{items.map((attempt) => <Link className="attempt-row" href={`/deliveries/${delivery.id}/attempts/${attempt.id}`} key={attempt.id}><span className="attempt-number">#{attempt.number}</span><span><strong>{attempt.result}</strong><small>{attempt.startedAt} · {attempt.providerStatus}</small></span><AttemptBadge result={attempt.result} /></Link>)}</div></Panel><Panel><PanelTitle title="Incident relationship" />{delivery.id === "delivery-keller-crm" ? <div className="inline-list"><Link href="/incidents/incident-keller-crm"><span><strong>CRM Webhook delivery failures — Keller Solar</strong><small>Resolved automatically · 08:43:03 — 08:50:03</small></span><StatusBadge label="Resolved" tone="good" /></Link></div> : <EmptyState title="No incident linked" description="This delivery has no associated incident in the mock scenario." />}</Panel></div><div className="detail-stack"><Panel><PanelTitle title="Delivery information" /><DetailFields fields={[{ label: "Lead", value: lead ? <Link className="entity-link" href={`/leads/${lead.id}`}>{lead.id}</Link> : delivery.leadId }, { label: "Destination", value: delivery.destination }, { label: "Status", value: <DeliveryBadge state={delivery.state} /> }, { label: "Created", value: delivery.createdAt, mono: true }, { label: "Delivered", value: delivery.deliveredAt ?? "—", mono: true }, { label: "Last error", value: delivery.lastError ?? "—" }]} /></Panel></div></div></ShellPage>;
+}
+
+export function AttemptDetailPage({ deliveryId, attemptId }: { deliveryId: string; attemptId: string }) {
+  const attempt = getMockAttempt(attemptId);
+  const delivery = attempt ? getDeliveryForAttempt(attempt.id) : getMockDelivery(deliveryId);
+  if (!attempt || !delivery) return <ShellPage><EmptyState title="Attempt not found" description="This mock attempt ID does not exist." /></ShellPage>;
+  const lead = getMockLead(delivery.leadId);
+  const previous = getMockAttempt(delivery.attemptIds[attempt.number - 2] ?? "");
+  const next = getMockAttempt(delivery.attemptIds[attempt.number] ?? "");
+  return <ShellPage><PageHeader title={`${delivery.destination} — Attempt #${attempt.number}`} description={`Technical evidence for ${lead?.id ?? delivery.leadId}`} breadcrumbs={[{ label: "Leads", href: "/leads" }, { label: lead?.id ?? delivery.leadId, href: `/leads/${delivery.leadId}` }, { label: delivery.destination, href: `/deliveries/${delivery.id}` }, { label: `Attempt #${attempt.number}` }]} actions={<AttemptBadge result={attempt.result} />} /><div className="attempt-navigation">{previous ? <Link href={`/deliveries/${delivery.id}/attempts/${previous.id}`}><ArrowLeft size={13} />Attempt #{previous.number}</Link> : <span />} {next && <Link href={`/deliveries/${delivery.id}/attempts/${next.id}`}>Attempt #{next.number}<ChevronRightIcon /></Link>}</div><div className="detail-grid"><div className="detail-stack"><Panel><PanelTitle title="Summary" /><DetailFields fields={[{ label: "Attempt #", value: attempt.number, mono: true }, { label: "Trigger", value: attempt.trigger }, { label: "Started", value: attempt.startedAt, mono: true }, { label: "Finished", value: attempt.finishedAt, mono: true }, { label: "Duration", value: attempt.duration, mono: true }, { label: "Ackvia result", value: <AttemptBadge result={attempt.result} /> }, { label: "Next retry", value: attempt.nextRetry ?? "—", mono: true }]} /></Panel><Panel><PanelTitle title="Error" /><DetailFields fields={[{ label: "Provider response", value: `${attempt.providerStatus} — ${attempt.providerMessage}`, mono: true }, { label: "Category", value: attempt.result === "Succeeded" ? "Success" : "Retryable" }]} /></Panel></div><div className="detail-stack"><Panel><PanelTitle title="Destination" /><DetailFields fields={[{ label: "Delivery", value: <Link className="entity-link" href={`/deliveries/${delivery.id}`}>{delivery.destination}</Link> }, { label: "Lead", value: <Link className="entity-link" href={`/leads/${delivery.leadId}`}>{delivery.leadId}</Link> }, { label: "Endpoint", value: "https://crm.kellersolar.com/api/leads", mono: true }, { label: "Method", value: "POST", mono: true }, { label: "Timeout", value: "10 s", mono: true }]} /></Panel><Panel><PanelTitle title="Timing" /><div className="timing-bars"><span>DNS <i style={{ width: "18%" }} /></span><span>Connect <i style={{ width: "32%" }} /></span><span>TLS <i style={{ width: "48%" }} /></span><span>Request <i style={{ width: "74%" }} /></span><span>Response <i style={{ width: "28%" }} /></span></div></Panel></div></div><div className="split-panels"><Panel><PanelTitle title="Request" /><CodeBlock title="JSON">{JSON.stringify({ name: lead?.customerName, email: lead?.email, message: lead?.message }, null, 2)}</CodeBlock></Panel><Panel><PanelTitle title="Response" /><CodeBlock title={attempt.providerStatus}>{JSON.stringify({ status: attempt.providerStatus, message: attempt.providerMessage }, null, 2)}</CodeBlock></Panel></div></ShellPage>;
+}
+
+function ChevronRightIcon() { return <span aria-hidden="true">→</span>; }
+
+export function MonitoringPage() {
+  return <ShellPage><PageHeader title="Monitoring" description="Ongoing health of lead paths and delivery operations." /><StatStrip items={[{ label: "Healthy lead paths", value: "30 / 31" }, { label: "Retry queue", value: "18" }, { label: "Failure rate", value: "0.2%" }, { label: "Median delivery latency", value: "1.8 s" }]} /><div className="split-panels"><Panel><PanelTitle title="Degraded paths" /><div className="inline-list"><Link href="/sites/keller-solar-site"><span><strong>Keller Solar · Contact Us</strong><small>CRM Webhook · retrying</small></span><StatusBadge label="Attention" tone="warn" /></Link></div></Panel><Panel><PanelTitle title="Destination health" /><div className="inline-list"><div><span><strong>Telegram</strong><small>1,250 delivered</small></span><StatusBadge label="Healthy" tone="good" /></div><div><span><strong>CRM Webhook</strong><small>18 awaiting retry · 13 failed</small></span><StatusBadge label="Degraded" tone="warn" /></div></div></Panel></div><Panel><PanelTitle title="Recent incidents" /><DataTable headers={["Incident", "State", "Duration", "Affected leads"]}>{incidents.map((incident) => <tr key={incident.id}><td><Link href={`/incidents/${incident.id}`}>{incident.title}</Link></td><td><StatusBadge label={incident.state} tone={incidentTone[incident.state]} /></td><td>{incident.duration}</td><td>{incident.affectedLeads}</td></tr>)}</DataTable></Panel></ShellPage>;
+}
+
+export function ReportsPage() {
+  return <ShellPage><PageHeader title="Reports" description="Historical lead reliability evidence across the workspace." /><div className="split-panels"><Panel><PanelTitle title="Captured leads over time" /><div className="report-number">1,284<small>Last 30 days</small></div><div className="report-bars"><i style={{ height: "38%" }} /><i style={{ height: "51%" }} /><i style={{ height: "46%" }} /><i style={{ height: "67%" }} /><i style={{ height: "74%" }} /><i style={{ height: "91%" }} /><i style={{ height: "82%" }} /></div></Panel><Panel><PanelTitle title="Delivery success rate" /><div className="report-number">99.8%<small>+0.3 pp vs previous 30d</small></div><div className="report-summary"><span><CheckCircle2 size={15} />1,401 delivered</span><span><RefreshCw size={15} />31 recovered or retrying</span></div></Panel></div><Panel><PanelTitle title="Portfolio breakdown" /><DataTable headers={["Client", "Captured leads", "Delivery rate", "Incidents"]}>{clients.map((client) => <tr key={client.id}><td><Link href={`/clients/${client.id}`}>{client.name}</Link></td><td>{client.leads}</td><td>{client.deliveryRate}</td><td>{client.incidents}</td></tr>)}</DataTable></Panel></ShellPage>;
+}
+
+export function SettingsPage() {
+  return <ShellPage><PageHeader title="Settings" description="Workspace preferences for the Ackvia dashboard." /><div className="settings-grid"><Panel><PanelTitle title="Workspace" /><DetailFields fields={[{ label: "Workspace", value: "Acme Agency" }, { label: "Owner", value: "Rostyslav" }, { label: "Timezone", value: "Europe/Kyiv" }]} /></Panel><Panel><PanelTitle title="Appearance" /><DetailFields fields={[{ label: "Theme", value: "Dark" }, { label: "Density", value: "Compact" }]} /></Panel><Panel><PanelTitle title="Notifications" /><DetailFields fields={[{ label: "Incident notifications", value: <StatusBadge label="Enabled" tone="good" /> }, { label: "Delivery recovery", value: <StatusBadge label="Enabled" tone="good" /> }]} /></Panel></div></ShellPage>;
+}
diff --git a/frontend/src/features/overview/components.tsx b/frontend/src/features/overview/components.tsx
new file mode 100644
index 0000000..6bcbb32
--- /dev/null
+++ b/frontend/src/features/overview/components.tsx
@@ -0,0 +1,40 @@
+import type { ReactNode } from "react";
+import Link from "next/link";
+import { ChevronRight, CircleAlert, CircleCheck, Globe2, Webhook } from "lucide-react";
+import type { ActivityEvent, SiteHealth, SiteStatus, StatusTone } from "./mock-data";
+
+const siteStatusTone = {
+  Healthy: "good",
+  Attention: "warn",
+  Down: "bad",
+  Unknown: "neutral",
+} satisfies Record<SiteStatus, StatusTone>;
+
+function activityHref(event: ActivityEvent) {
+  const routes = { lead: "/leads", delivery: "/deliveries", incident: "/incidents" } as const;
+  return `${routes[event.target.type]}/${event.target.id}`;
+}
+
+export function Panel({ children, className = "" }: { children: ReactNode; className?: string }) {
+  return <section className={`panel ${className}`}>{children}</section>;
+}
+
+export function PanelHeading({ title, linkLabel, href }: { title: string; linkLabel?: string; href?: string }) {
+  return <div className="panel-heading"><h2>{title}</h2>{linkLabel && href && <Link href={href}>{linkLabel}<ChevronRight size={13} /></Link>}</div>;
+}
+
+export function StatusBadge({ children, tone = "good" }: { children: ReactNode; tone?: StatusTone }) {
+  return <span className={`status status-${tone}`}><span className="status-dot" />{children}</span>;
+}
+
+export function Metric({ label, value, detail, tone = "positive" }: { label: string; value: string; detail?: string; tone?: "positive" | "attention" }) {
+  return <div className={`metric ${tone === "attention" ? "metric-attention" : ""}`}><span>{label}</span><strong>{value}</strong>{detail && <em className={tone === "attention" ? "trend-attention" : "trend-positive"}>{detail}</em>}</div>;
+}
+
+export function ActivityFeed({ events }: { events: ActivityEvent[] }) {
+  return <div className="activity-list">{events.map((event) => <Link className="activity-row" href={activityHref(event)} key={`${event.time}-${event.title}`}><span className={`event-icon event-${event.tone}`} aria-label={event.category}>{event.category === "incident" ? <CircleAlert size={13} /> : event.category === "delivery" ? <Webhook size={13} /> : <CircleCheck size={13} />}</span><time>{event.time}</time><span className="event-copy"><strong>{event.title}</strong><small>{event.detail}</small></span><StatusBadge tone={event.tone}>{event.status}</StatusBadge></Link>)}</div>;
+}
+
+export function SiteHealthList({ sites }: { sites: SiteHealth[] }) {
+  return <div className="site-list">{sites.map((site) => <Link className="site-row" href={`/sites/${site.id}`} key={site.name}><span className="site-icon"><Globe2 size={14} /></span><span className="site-copy"><strong>{site.name}</strong><small>{site.domain}</small></span><span className="site-leads">{site.leads} leads</span><span className="site-rate">{site.deliveryRate}</span><StatusBadge tone={siteStatusTone[site.status]}>{site.status}</StatusBadge></Link>)}</div>;
+}
diff --git a/frontend/src/features/overview/mock-data.ts b/frontend/src/features/overview/mock-data.ts
new file mode 100644
index 0000000..ce3acf6
--- /dev/null
+++ b/frontend/src/features/overview/mock-data.ts
@@ -0,0 +1,9 @@
+import { activities, deliveryBreakdown, sites } from "@/lib/mock-data";
+
+export type { SiteStatus, StatusTone } from "@/lib/mock-data";
+export type ActivityEvent = (typeof activities)[number];
+export type SiteHealth = { id: string; name: string; domain: string; leads: string; deliveryRate: string; status: "Healthy" | "Attention" | "Down" | "Unknown" };
+
+export { deliveryBreakdown };
+export const activityEvents = activities;
+export const siteHealth: SiteHealth[] = sites.map((site) => ({ id: site.id, name: site.name, domain: site.domain, leads: site.leads.toLocaleString(), deliveryRate: site.deliveryRate, status: site.health }));
diff --git a/frontend/src/features/overview/overview.tsx b/frontend/src/features/overview/overview.tsx
new file mode 100644
index 0000000..310635a
--- /dev/null
+++ b/frontend/src/features/overview/overview.tsx
@@ -0,0 +1,31 @@
+import Link from "next/link";
+import { ChevronDown, CircleAlert } from "lucide-react";
+import { AppShell } from "@/components/app-shell";
+import { ActivityFeed, Metric, Panel, PanelHeading, SiteHealthList, StatusBadge } from "./components";
+import { activityEvents, deliveryBreakdown, siteHealth } from "./mock-data";
+
+function LeadActivityChart() {
+  return <Panel className="activity-chart"><PanelHeading title="Lead activity" /><div className="chart-meta"><span>Captured leads</span><strong>1,284</strong></div><div className="line-chart"><div className="y-labels"><span>100</span><span>75</span><span>50</span><span>25</span><span>0</span></div><svg viewBox="0 0 620 160" preserveAspectRatio="none" role="img" aria-label="Captured lead volume over the last 30 days"><defs><linearGradient id="chart-fill" x1="0" x2="0" y1="0" y2="1"><stop offset="0" stopColor="#6e9cff" stopOpacity=".2" /><stop offset="1" stopColor="#6e9cff" stopOpacity="0" /></linearGradient></defs><path className="chart-area" d="M0 123 L25 111 L50 118 L75 101 L100 106 L125 94 L150 96 L175 82 L200 84 L225 70 L250 60 L275 72 L300 57 L325 62 L350 47 L375 48 L400 35 L425 42 L450 31 L475 35 L500 20 L525 27 L550 13 L575 23 L620 20 L620 160 L0 160Z" /><path className="chart-line" d="M0 123 L25 111 L50 118 L75 101 L100 106 L125 94 L150 96 L175 82 L200 84 L225 70 L250 60 L275 72 L300 57 L325 62 L350 47 L375 48 L400 35 L425 42 L450 31 L475 35 L500 20 L525 27 L550 13 L575 23 L620 20" /></svg><div className="x-labels"><span>Aug 20</span><span>Aug 27</span><span>Sep 3</span><span>Sep 10</span><span>Sep 17</span></div></div></Panel>;
+}
+
+function DeliveryHealth() {
+  const total = deliveryBreakdown.reduce((sum, item) => sum + item.value, 0);
+  const toneColors = { good: "#45d5a3", warn: "#e0a549", bad: "#ed6d73", neutral: "#718297" } as const;
+  const segments = deliveryBreakdown.reduce<{ values: string[]; end: number }>(({ values, end }, item) => {
+    const nextEnd = end + (item.value / total) * 100;
+    return { values: [...values, `${toneColors[item.tone]} ${end}% ${nextEnd}%`], end: nextEnd };
+  }, { values: [], end: 0 }).values;
+
+  return <Panel className="delivery-panel"><PanelHeading title="Delivery health" /><div className="delivery-body"><div className="donut" style={{ background: `conic-gradient(${segments.join(", ")})` }}><div><strong>{total.toLocaleString()}</strong><span>Total deliveries</span></div></div><ul className="legend">{deliveryBreakdown.map((item) => <li key={item.label}><i className={`legend-${item.tone}`} /><span>{item.label}</span><b>{item.value.toLocaleString()}</b></li>)}</ul></div></Panel>;
+}
+
+export function Overview() {
+  return <AppShell><div className="overview-content">
+    <header className="page-header"><div><h1>Overview</h1><p className="portfolio-status"><span className="pulse-dot" />30 of 31 lead paths operational</p></div><div className="header-filters"><button className="filter-button" type="button">Last 30 days<ChevronDown size={13} /></button><button className="filter-button" type="button">All clients<ChevronDown size={13} /></button><button className="filter-button" type="button">All sites<ChevronDown size={13} /></button></div></header>
+    <section className="metric-grid" aria-label="Portfolio metrics"><Metric label="Captured leads" value="1,284" detail="+12% vs previous 30d" /><Metric label="Protected sites" value="24" /><Metric label="Delivery rate" value="99.8%" detail="+0.3 pp" /><Metric label="Active incidents" value="1" detail="Needs attention" tone="attention" /></section>
+    <section className="attention-panel"><div className="attention-icon"><CircleAlert size={16} /></div><div className="attention-copy"><div className="attention-title"><h2>Needs attention</h2><StatusBadge tone="warn">Awaiting retry</StatusBadge></div><p><strong>Keller Solar</strong><span>kellersolar.com</span><b>CRM Webhook delivery failing</b></p></div><div className="attention-time"><span>Started 12 min ago</span><Link href="/incidents/incident-keller-crm">View incident <ChevronDown size={13} /></Link></div></section>
+    <div className="visual-grid"><LeadActivityChart /><DeliveryHealth /></div>
+    <div className="lower-grid"><Panel className="activity-panel"><PanelHeading title="Recent activity" linkLabel="View all" href="/leads" /><ActivityFeed events={activityEvents} /></Panel><Panel className="sites-panel"><PanelHeading title="Site health" linkLabel="View all" href="/sites" /><SiteHealthList sites={siteHealth} /></Panel></div>
+    <footer className="overview-footer"><span><span className="footer-dot" />All systems monitored</span><span>Last updated just now</span></footer>
+  </div></AppShell>;
+}
diff --git a/frontend/src/lib/mock-data.ts b/frontend/src/lib/mock-data.ts
new file mode 100644
index 0000000..69240af
--- /dev/null
+++ b/frontend/src/lib/mock-data.ts
@@ -0,0 +1,94 @@
+export type StatusTone = "good" | "warn" | "bad" | "neutral";
+export type HealthStatus = "Healthy" | "Attention" | "Down" | "Unknown";
+export type SiteStatus = HealthStatus;
+export type LeadState = "Captured safely" | "Stored";
+export type DeliveryState = "Pending" | "Processing" | "Awaiting retry" | "Delivered" | "Failed" | "Unknown";
+export type AttemptResult = "Succeeded" | "Retryable failure" | "Permanent failure" | "Unknown result";
+export type IncidentState = "Investigating" | "Recovering" | "Resolved automatically";
+
+export type Client = { id: string; name: string; siteIds: string[]; leadPathCount: number; leads: number; deliveryRate: string; incidents: number; health: HealthStatus; lastActivity: string };
+export type Site = { id: string; clientId: string; name: string; domain: string; leadPathIds: string[]; leads: number; deliveryRate: string; health: HealthStatus; lastActivity: string };
+export type LeadPath = { id: string; siteId: string; name: string; status: HealthStatus; recentLeads: number; destinations: string[]; deliveryHealth: string; lastEvent: string };
+export type Lead = { id: string; clientId: string; siteId: string; leadPathId: string; customerName: string; email: string; phone: string; message: string; capturedAt: string; state: LeadState; deliveryIds: string[] };
+export type Delivery = { id: string; leadId: string; destination: string; state: DeliveryState; attemptIds: string[]; createdAt: string; deliveredAt?: string; nextRetry?: string; lastError?: string };
+export type Attempt = { id: string; deliveryId: string; number: number; result: AttemptResult; trigger: string; startedAt: string; finishedAt: string; duration: string; providerStatus: string; providerMessage: string; nextRetry?: string };
+export type Incident = { id: string; clientId: string; siteId: string; destination: string; title: string; state: IncidentState; startedAt: string; resolvedAt?: string; duration: string; affectedLeads: number; peakFailureRate: string; attemptIds: string[] };
+export type Activity = { id: string; time: string; title: string; detail: string; status: string; tone: "good" | "warn" | "bad"; category: "capture" | "delivery" | "incident"; target: { type: "lead" | "delivery" | "incident"; id: string } };
+
+export const clients: Client[] = [
+  { id: "keller-solar", name: "Keller Solar", siteIds: ["keller-solar-site"], leadPathCount: 2, leads: 48, deliveryRate: "96.2%", incidents: 1, health: "Attention", lastActivity: "08:50" },
+  { id: "northwind-dental", name: "Northwind Dental", siteIds: ["northwind-main", "northwind-ortho"], leadPathCount: 3, leads: 142, deliveryRate: "100%", incidents: 0, health: "Healthy", lastActivity: "08:31" },
+  { id: "smith-realty", name: "Smith Realty", siteIds: ["smith-realty-site"], leadPathCount: 2, leads: 87, deliveryRate: "99.8%", incidents: 0, health: "Healthy", lastActivity: "Yesterday" },
+  { id: "pizza-roma", name: "Pizza Roma", siteIds: ["pizza-roma-site"], leadPathCount: 1, leads: 24, deliveryRate: "100%", incidents: 0, health: "Healthy", lastActivity: "Yesterday" },
+  { id: "old-mill-studio", name: "Old Mill Studio", siteIds: ["old-mill-site"], leadPathCount: 1, leads: 31, deliveryRate: "99.7%", incidents: 0, health: "Healthy", lastActivity: "2 days ago" },
+];
+
+export const sites: Site[] = [
+  { id: "keller-solar-site", clientId: "keller-solar", name: "Keller Solar", domain: "kellersolar.com", leadPathIds: ["keller-contact", "keller-quote"], leads: 48, deliveryRate: "96.2%", health: "Attention", lastActivity: "08:50" },
+  { id: "northwind-main", clientId: "northwind-dental", name: "Northwind Dental", domain: "northwinddental.com", leadPathIds: ["northwind-contact", "northwind-booking"], leads: 142, deliveryRate: "100%", health: "Healthy", lastActivity: "08:31" },
+  { id: "smith-realty-site", clientId: "smith-realty", name: "Smith Realty", domain: "smithrealty.com", leadPathIds: ["smith-contact", "smith-viewing"], leads: 87, deliveryRate: "99.8%", health: "Healthy", lastActivity: "Yesterday" },
+  { id: "pizza-roma-site", clientId: "pizza-roma", name: "Pizza Roma", domain: "pizzaroma.com", leadPathIds: ["pizza-contact"], leads: 24, deliveryRate: "100%", health: "Healthy", lastActivity: "Yesterday" },
+  { id: "old-mill-site", clientId: "old-mill-studio", name: "Old Mill Studio", domain: "oldmillstudio.com", leadPathIds: ["old-mill-contact"], leads: 31, deliveryRate: "99.7%", health: "Healthy", lastActivity: "2 days ago" },
+];
+
+export const leadPaths: LeadPath[] = [
+  { id: "keller-contact", siteId: "keller-solar-site", name: "Contact Us", status: "Attention", recentLeads: 31, destinations: ["Telegram", "CRM Webhook"], deliveryHealth: "96.2%", lastEvent: "08:50" },
+  { id: "keller-quote", siteId: "keller-solar-site", name: "Quote Request", status: "Healthy", recentLeads: 17, destinations: ["Telegram", "CRM Webhook"], deliveryHealth: "100%", lastEvent: "Yesterday" },
+  { id: "northwind-contact", siteId: "northwind-main", name: "Contact Us", status: "Healthy", recentLeads: 84, destinations: ["CRM Webhook", "Email"], deliveryHealth: "100%", lastEvent: "08:31" },
+  { id: "northwind-booking", siteId: "northwind-main", name: "Book an Appointment", status: "Healthy", recentLeads: 58, destinations: ["CRM Webhook"], deliveryHealth: "100%", lastEvent: "Yesterday" },
+  { id: "smith-contact", siteId: "smith-realty-site", name: "Contact Us", status: "Healthy", recentLeads: 52, destinations: ["CRM Webhook"], deliveryHealth: "100%", lastEvent: "Yesterday" },
+  { id: "smith-viewing", siteId: "smith-realty-site", name: "Book a Viewing", status: "Healthy", recentLeads: 35, destinations: ["CRM Webhook"], deliveryHealth: "99.7%", lastEvent: "Yesterday" },
+  { id: "pizza-contact", siteId: "pizza-roma-site", name: "Contact Us", status: "Healthy", recentLeads: 24, destinations: ["Email"], deliveryHealth: "100%", lastEvent: "Yesterday" },
+  { id: "old-mill-contact", siteId: "old-mill-site", name: "Project Enquiry", status: "Healthy", recentLeads: 31, destinations: ["CRM Webhook"], deliveryHealth: "99.7%", lastEvent: "2 days ago" },
+];
+
+export const leads: Lead[] = [{ id: "LD-2026-001245", clientId: "keller-solar", siteId: "keller-solar-site", leadPathId: "keller-contact", customerName: "Sarah Mitchell", email: "sarah@example.com", phone: "+49 151 23456789", message: "Hi, I'm interested in getting a quote for a solar panel installation for our house. Please contact me regarding the options and pricing. Thank you!", capturedAt: "Sep 20, 2026 — 08:42:31", state: "Captured safely", deliveryIds: ["delivery-telegram-001245", "delivery-keller-crm"] }];
+
+export const deliveries: Delivery[] = [
+  { id: "delivery-telegram-001245", leadId: "LD-2026-001245", destination: "Telegram", state: "Delivered", attemptIds: ["attempt-telegram-1"], createdAt: "08:42:31", deliveredAt: "08:42:32" },
+  { id: "delivery-keller-crm", leadId: "LD-2026-001245", destination: "CRM Webhook", state: "Delivered", attemptIds: ["attempt-crm-1", "attempt-crm-2", "attempt-crm-3", "attempt-crm-4"], createdAt: "08:42:31", deliveredAt: "08:50:03" },
+  { id: "delivery-northwind-001", leadId: "lead-northwind-0831", destination: "CRM Webhook", state: "Delivered", attemptIds: ["attempt-northwind-1"], createdAt: "08:31:02", deliveredAt: "08:31:03" },
+  { id: "delivery-smith-001", leadId: "lead-smith-001", destination: "CRM Webhook", state: "Awaiting retry", attemptIds: ["attempt-smith-1"], createdAt: "Yesterday 14:22", nextRetry: "In 4 minutes", lastError: "Connection timeout" },
+  { id: "delivery-pizza-001", leadId: "lead-pizza-001", destination: "Email", state: "Failed", attemptIds: ["attempt-pizza-1"], createdAt: "Yesterday 11:04", lastError: "Mailbox unavailable" },
+];
+
+export const attempts: Attempt[] = [
+  { id: "attempt-telegram-1", deliveryId: "delivery-telegram-001245", number: 1, result: "Succeeded", trigger: "Initial delivery", startedAt: "08:42:32", finishedAt: "08:42:32", duration: "0.8 s", providerStatus: "HTTP 200", providerMessage: "Message accepted" },
+  { id: "attempt-crm-1", deliveryId: "delivery-keller-crm", number: 1, result: "Retryable failure", trigger: "Initial delivery", startedAt: "08:42:33", finishedAt: "08:42:38", duration: "5.02 s", providerStatus: "Timeout", providerMessage: "Connection timeout", nextRetry: "08:43:03" },
+  { id: "attempt-crm-2", deliveryId: "delivery-keller-crm", number: 2, result: "Retryable failure", trigger: "Automatic retry", startedAt: "08:43:03", finishedAt: "08:43:08", duration: "5.02 s", providerStatus: "Timeout", providerMessage: "Connection timeout", nextRetry: "08:45:03" },
+  { id: "attempt-crm-3", deliveryId: "delivery-keller-crm", number: 3, result: "Retryable failure", trigger: "Automatic retry", startedAt: "08:45:03", finishedAt: "08:45:08", duration: "5.02 s", providerStatus: "HTTP 503", providerMessage: "Service Unavailable", nextRetry: "08:50:03" },
+  { id: "attempt-crm-4", deliveryId: "delivery-keller-crm", number: 4, result: "Succeeded", trigger: "Automatic retry", startedAt: "08:50:03", finishedAt: "08:50:03", duration: "2.3 s", providerStatus: "HTTP 200", providerMessage: "Lead accepted" },
+  { id: "attempt-northwind-1", deliveryId: "delivery-northwind-001", number: 1, result: "Succeeded", trigger: "Initial delivery", startedAt: "08:31:03", finishedAt: "08:31:03", duration: "1.1 s", providerStatus: "HTTP 200", providerMessage: "Lead accepted" },
+  { id: "attempt-smith-1", deliveryId: "delivery-smith-001", number: 1, result: "Retryable failure", trigger: "Initial delivery", startedAt: "Yesterday 14:22", finishedAt: "Yesterday 14:22", duration: "5.0 s", providerStatus: "Timeout", providerMessage: "Connection timeout", nextRetry: "In 4 minutes" },
+  { id: "attempt-pizza-1", deliveryId: "delivery-pizza-001", number: 1, result: "Permanent failure", trigger: "Initial delivery", startedAt: "Yesterday 11:04", finishedAt: "Yesterday 11:04", duration: "1.4 s", providerStatus: "HTTP 550", providerMessage: "Mailbox unavailable" },
+];
+
+export const incidents: Incident[] = [{ id: "incident-keller-crm", clientId: "keller-solar", siteId: "keller-solar-site", destination: "CRM Webhook", title: "CRM Webhook delivery failures — Keller Solar", state: "Resolved automatically", startedAt: "Sep 20, 2026 — 08:43:03", resolvedAt: "Sep 20, 2026 — 08:50:03", duration: "7 minutes", affectedLeads: 31, peakFailureRate: "62%", attemptIds: ["attempt-crm-1", "attempt-crm-2", "attempt-crm-3", "attempt-crm-4"] }];
+
+export const activities: Activity[] = [
+  { id: "activity-1", time: "08:50", title: "CRM Webhook recovered", detail: "Keller Solar", status: "Delivered", tone: "good", category: "delivery", target: { type: "delivery", id: "delivery-keller-crm" } },
+  { id: "activity-2", time: "08:45", title: "Retry scheduled", detail: "Keller Solar", status: "Awaiting retry", tone: "warn", category: "delivery", target: { type: "delivery", id: "delivery-keller-crm" } },
+  { id: "activity-3", time: "08:43", title: "Incident opened", detail: "Keller Solar · CRM Webhook", status: "Investigating", tone: "bad", category: "incident", target: { type: "incident", id: "incident-keller-crm" } },
+  { id: "activity-4", time: "08:42", title: "Lead captured", detail: "Keller Solar", status: "Captured safely", tone: "good", category: "capture", target: { type: "lead", id: "LD-2026-001245" } },
+  { id: "activity-5", time: "08:31", title: "Lead captured", detail: "Northwind Dental", status: "Captured safely", tone: "good", category: "capture", target: { type: "lead", id: "lead-northwind-0831" } },
+];
+
+export const deliveryBreakdown = [
+  { label: "Delivered", value: 1401, tone: "good" as const },
+  { label: "Awaiting retry", value: 18, tone: "warn" as const },
+  { label: "Failed", value: 13, tone: "bad" as const },
+  { label: "Unknown", value: 4, tone: "neutral" as const },
+];
+
+export const getMockClient = (id: string) => clients.find((item) => item.id === id);
+export const getMockSite = (id: string) => sites.find((item) => item.id === id);
+export const getMockLeadPath = (id: string) => leadPaths.find((item) => item.id === id);
+export const getMockLead = (id: string) => leads.find((item) => item.id === id);
+export const getMockDelivery = (id: string) => deliveries.find((item) => item.id === id);
+export const getMockAttempt = (id: string) => attempts.find((item) => item.id === id);
+export const getMockIncident = (id: string) => incidents.find((item) => item.id === id);
+
+export function getClientForSite(siteId: string) { const site = getMockSite(siteId); return site ? getMockClient(site.clientId) : undefined; }
+export function getSiteForLead(leadId: string) { const lead = getMockLead(leadId); return lead ? getMockSite(lead.siteId) : undefined; }
+export function getLeadForDelivery(deliveryId: string) { const delivery = getMockDelivery(deliveryId); return delivery ? getMockLead(delivery.leadId) : undefined; }
+export function getDeliveryForAttempt(attemptId: string) { const attempt = getMockAttempt(attemptId); return attempt ? getMockDelivery(attempt.deliveryId) : undefined; }