From 8ab779b23cb9f4ae1e2031e381ea779a5282f14d Mon Sep 17 00:00:00 2001
From: monte <hairs-immense4n@icloud.com>
Date: Tue, 2 Jun 2026 19:41:06 +0200
Subject: [PATCH 1/2] Implement guard proxy management flow

---
 src/frontend/components.json                  |  20 +
 src/frontend/package.json                     |   8 +-
 src/frontend/pnpm-lock.yaml                   | 491 ++++++++++++++++++
 src/frontend/src/components/layout/NavBar.tsx | 100 ++--
 .../src/components/shared/DataTable.tsx       |  71 +--
 .../src/components/shared/EmptyState.tsx      |  10 +-
 .../src/components/shared/ErrorState.tsx      |  10 +-
 .../src/components/shared/LoadingState.tsx    |  10 +-
 src/frontend/src/components/shared/Modal.tsx  |  38 +-
 .../src/components/shared/PageHeader.tsx      |   6 +-
 .../src/components/shared/PagePlaceholder.tsx |   4 +-
 .../src/components/shared/SectionCard.tsx     |  24 +-
 .../src/components/shared/StatCard.tsx        |  30 +-
 .../src/components/shared/StatusBadge.tsx     |  20 +-
 src/frontend/src/components/ui/alert.tsx      |  36 ++
 src/frontend/src/components/ui/badge.tsx      |  33 ++
 src/frontend/src/components/ui/button.tsx     |  58 +++
 src/frontend/src/components/ui/card.tsx       |  71 +++
 src/frontend/src/components/ui/checkbox.tsx   |  21 +
 src/frontend/src/components/ui/dialog.tsx     |  93 ++++
 src/frontend/src/components/ui/input.tsx      |  20 +
 src/frontend/src/components/ui/label.tsx      |  16 +
 src/frontend/src/components/ui/select.tsx     |  22 +
 src/frontend/src/components/ui/table.tsx      |  73 +++
 .../src/features/auth/AuthPendingState.tsx    |   8 +-
 .../src/features/logs/LogDetailModal.tsx      |  15 +-
 .../features/policies/DeletePolicyDialog.tsx  |  23 +-
 .../src/features/policies/PolicyFormModal.tsx |  69 +--
 .../features/runtime/ApplyConfigButton.tsx    |  14 +-
 .../features/runtime/RuntimeStatusCard.tsx    |  11 +-
 .../src/features/vhosts/DeleteVHostDialog.tsx |  23 +-
 .../src/features/vhosts/VHostFormModal.tsx    |  60 +--
 src/frontend/src/layouts/AppLayout.tsx        |   2 +-
 src/frontend/src/lib/utils.ts                 |   6 +
 .../src/pages/dashboard/DashboardPage.tsx     |  30 +-
 src/frontend/src/pages/login/LoginPage.tsx    | 107 ++--
 src/frontend/src/pages/logs/LogsPage.test.tsx |  36 +-
 src/frontend/src/pages/logs/LogsPage.tsx      | 294 +++++++++--
 .../src/pages/not-found/NotFoundPage.tsx      |   9 +-
 .../src/pages/policies/PoliciesPage.tsx       |  28 +-
 .../src/pages/policies/PolicyDetailPage.tsx   |  21 +-
 src/frontend/src/pages/vhosts/VHostsPage.tsx  |  32 +-
 src/frontend/src/styles/globals.css           | 328 ++++--------
 src/frontend/tests/darkreader-css.test.mjs    |  13 +-
 44 files changed, 1741 insertions(+), 673 deletions(-)
 create mode 100644 src/frontend/components.json
 create mode 100644 src/frontend/src/components/ui/alert.tsx
 create mode 100644 src/frontend/src/components/ui/badge.tsx
 create mode 100644 src/frontend/src/components/ui/button.tsx
 create mode 100644 src/frontend/src/components/ui/card.tsx
 create mode 100644 src/frontend/src/components/ui/checkbox.tsx
 create mode 100644 src/frontend/src/components/ui/dialog.tsx
 create mode 100644 src/frontend/src/components/ui/input.tsx
 create mode 100644 src/frontend/src/components/ui/label.tsx
 create mode 100644 src/frontend/src/components/ui/select.tsx
 create mode 100644 src/frontend/src/components/ui/table.tsx
 create mode 100644 src/frontend/src/lib/utils.ts

diff --git a/src/frontend/components.json b/src/frontend/components.json
new file mode 100644
index 0000000..bf2e7c4
--- /dev/null
+++ b/src/frontend/components.json
@@ -0,0 +1,20 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "new-york",
+  "rsc": false,
+  "tsx": true,
+  "tailwind": {
+    "config": "",
+    "css": "src/styles/globals.css",
+    "baseColor": "slate",
+    "cssVariables": true
+  },
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  },
+  "iconLibrary": "lucide"
+}
diff --git a/src/frontend/package.json b/src/frontend/package.json
index 4a6f018..0a05e39 100644
--- a/src/frontend/package.json
+++ b/src/frontend/package.json
@@ -13,9 +13,15 @@
     "lint": "eslint ."
   },
   "dependencies": {
+    "@radix-ui/react-dialog": "^1.1.15",
+    "@radix-ui/react-slot": "^1.2.4",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "lucide-react": "^1.17.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "react-router-dom": "^6.30.1"
+    "react-router-dom": "^6.30.1",
+    "tailwind-merge": "^3.6.0"
   },
   "devDependencies": {
     "@eslint/js": "^9.24.0",
diff --git a/src/frontend/pnpm-lock.yaml b/src/frontend/pnpm-lock.yaml
index da895e9..3477061 100644
--- a/src/frontend/pnpm-lock.yaml
+++ b/src/frontend/pnpm-lock.yaml
@@ -8,6 +8,21 @@ importers:
 
   .:
     dependencies:
+      '@radix-ui/react-dialog':
+        specifier: ^1.1.15
+        version: 1.1.15(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-slot':
+        specifier: ^1.2.4
+        version: 1.2.4(@types/react@18.3.28)(react@18.3.1)
+      class-variance-authority:
+        specifier: ^0.7.1
+        version: 0.7.1
+      clsx:
+        specifier: ^2.1.1
+        version: 2.1.1
+      lucide-react:
+        specifier: ^1.17.0
+        version: 1.17.0(react@18.3.1)
       react:
         specifier: ^18.3.1
         version: 18.3.1
@@ -17,6 +32,9 @@ importers:
       react-router-dom:
         specifier: ^6.30.1
         version: 6.30.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      tailwind-merge:
+        specifier: ^3.6.0
+        version: 3.6.0
     devDependencies:
       '@eslint/js':
         specifier: ^9.24.0
@@ -425,6 +443,186 @@ packages:
   '@jridgewell/trace-mapping@0.3.31':
     resolution: {integrity: sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw==}
 
+  '@radix-ui/primitive@1.1.3':
+    resolution: {integrity: sha512-JTF99U/6XIjCBo0wqkU5sK10glYe27MRRsfwoiq5zzOEZLHU3A3KCMa5X/azekYRCJ0HlwI0crAXS/5dEHTzDg==}
+
+  '@radix-ui/react-compose-refs@1.1.2':
+    resolution: {integrity: sha512-z4eqJvfiNnFMHIIvXP3CY57y2WJs5g2v3X0zm9mEJkrkNv4rDxu+sg9Jh8EkXyeqBkB7SOcboo9dMVqhyrACIg==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-context@1.1.2':
+    resolution: {integrity: sha512-jCi/QKUM2r1Ju5a3J64TH2A5SpKAgh0LpknyqdQ4m6DCV0xJ2HG1xARRwNGPQfi1SLdLWZ1OJz6F4OMBBNiGJA==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-dialog@1.1.15':
+    resolution: {integrity: sha512-TCglVRtzlffRNxRMEyR36DGBLJpeusFcgMVD9PZEzAKnUs1lKCgX5u9BmC2Yg+LL9MgZDugFFs1Vl+Jp4t/PGw==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-dismissable-layer@1.1.11':
+    resolution: {integrity: sha512-Nqcp+t5cTB8BinFkZgXiMJniQH0PsUt2k51FUhbdfeKvc4ACcG2uQniY/8+h1Yv6Kza4Q7lD7PQV0z0oicE0Mg==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-focus-guards@1.1.3':
+    resolution: {integrity: sha512-0rFg/Rj2Q62NCm62jZw0QX7a3sz6QCQU0LpZdNrJX8byRGaGVTqbrW9jAoIAHyMQqsNpeZ81YgSizOt5WXq0Pw==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-focus-scope@1.1.7':
+    resolution: {integrity: sha512-t2ODlkXBQyn7jkl6TNaw/MtVEVvIGelJDCG41Okq/KwUsJBwQ4XVZsHAVUkK4mBv3ewiAS3PGuUWuY2BoK4ZUw==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-id@1.1.1':
+    resolution: {integrity: sha512-kGkGegYIdQsOb4XjsfM97rXsiHaBwco+hFI66oO4s9LU+PLAC5oJ7khdOVFxkhsmlbpUqDAvXw11CluXP+jkHg==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-portal@1.1.9':
+    resolution: {integrity: sha512-bpIxvq03if6UNwXZ+HTK71JLh4APvnXntDc6XOX8UVq4XQOVl7lwok0AvIl+b8zgCw3fSaVTZMpAPPagXbKmHQ==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-presence@1.1.5':
+    resolution: {integrity: sha512-/jfEwNDdQVBCNvjkGit4h6pMOzq8bHkopq458dPt2lMjx+eBQUohZNG9A7DtO/O5ukSbxuaNGXMjHicgwy6rQQ==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-primitive@2.1.3':
+    resolution: {integrity: sha512-m9gTwRkhy2lvCPe6QJp4d3G1TYEUHn/FzJUtq9MjH46an1wJU+GdoGC5VLof8RX8Ft/DlpshApkhswDLZzHIcQ==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-slot@1.2.3':
+    resolution: {integrity: sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-slot@1.2.4':
+    resolution: {integrity: sha512-Jl+bCv8HxKnlTLVrcDE8zTMJ09R9/ukw4qBs/oZClOfoQk/cOTbDn+NceXfV7j09YPVQUryJPHurafcSg6EVKA==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-use-callback-ref@1.1.1':
+    resolution: {integrity: sha512-FkBMwD+qbGQeMu1cOHnuGB6x4yzPjho8ap5WtbEJ26umhgqVXbhekKUQO+hZEL1vU92a3wHwdp0HAcqAUF5iDg==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-use-controllable-state@1.2.2':
+    resolution: {integrity: sha512-BjasUjixPFdS+NKkypcyyN5Pmg83Olst0+c6vGov0diwTEo6mgdqVR6hxcEgFuh4QrAs7Rc+9KuGJ9TVCj0Zzg==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-use-effect-event@0.0.2':
+    resolution: {integrity: sha512-Qp8WbZOBe+blgpuUT+lw2xheLP8q0oatc9UpmiemEICxGvFLYmHm9QowVZGHtJlGbS6A6yJ3iViad/2cVjnOiA==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-use-escape-keydown@1.1.1':
+    resolution: {integrity: sha512-Il0+boE7w/XebUHyBjroE+DbByORGR9KKmITzbR7MyQ4akpORYP/ZmbhAr0DG7RmmBqoOnZdy2QlvajJ2QA59g==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-use-layout-effect@1.1.1':
+    resolution: {integrity: sha512-RbJRS4UWQFkzHTTwVymMTUv8EqYhOp8dOOviLj2ugtTiXRaRQS7GLGxZTLL1jWhMeoSCf5zmcZkqTl9IiYfXcQ==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
   '@remix-run/router@1.23.2':
     resolution: {integrity: sha512-Ic6m2U/rMjTkhERIa/0ZtXJP17QUi2CbWE7cqx4J58M8aA3QTfW+2UlQ4psvTX9IO1RfNVhK3pcpdjej7L+t2w==}
     engines: {node: '>=14.0.0'}
@@ -860,6 +1058,10 @@ packages:
   argparse@2.0.1:
     resolution: {integrity: sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==}
 
+  aria-hidden@1.2.6:
+    resolution: {integrity: sha512-ik3ZgC9dY/lYVVM++OISsaYDeg1tb0VtP5uL3ouh1koGOaUMDPpbFIei4JkFimWUFPn90sbMNMXQAIVOlnYKJA==}
+    engines: {node: '>=10'}
+
   aria-query@5.3.0:
     resolution: {integrity: sha512-b0P0sZPKtyu8HkeRAfCq0IfURZK+SuwMjY1UXGBU27wpAiTwQAIlq56IbIO+ytk/JjS1fMR14ee5WBBfKi5J6A==}
 
@@ -918,6 +1120,13 @@ packages:
     resolution: {integrity: sha512-PAJdDJusoxnwm1VwW07VWwUN1sl7smmC3OKggvndJFadxxDRyFJBX/ggnu/KE4kQAB7a3Dp8f/YXC1FlUprWmA==}
     engines: {node: '>= 16'}
 
+  class-variance-authority@0.7.1:
+    resolution: {integrity: sha512-Ka+9Trutv7G8M6WT6SeiRWz792K5qEqIGEGzXKhAE6xOWAY6pPH8U+9IY3oCMv6kqTmLsv7Xh/2w2RigkePMsg==}
+
+  clsx@2.1.1:
+    resolution: {integrity: sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==}
+    engines: {node: '>=6'}
+
   color-convert@2.0.1:
     resolution: {integrity: sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==}
     engines: {node: '>=7.0.0'}
@@ -976,6 +1185,9 @@ packages:
     resolution: {integrity: sha512-Btj2BOOO83o3WyH59e8MgXsxEQVcarkUOpEYrubB0urwnN10yQ364rsiByU11nZlqWYZm05i/of7io4mzihBtQ==}
     engines: {node: '>=8'}
 
+  detect-node-es@1.1.0:
+    resolution: {integrity: sha512-ypdmJU/TbBby2Dxibuv7ZLW3Bs1QEmM7nHjEANfohJLvE0XVujisn1qPJcZxg+qDucsr+bP6fLD1rPS3AhJ7EQ==}
+
   dom-accessibility-api@0.5.16:
     resolution: {integrity: sha512-X7BJ2yElsnOJ30pZF4uIIDfBEVgF4XEBxL9Bxhy6dnrm5hkzqmsWHGTiHqRiITNhMyFLyAiWndIJP7Z1NTteDg==}
 
@@ -1115,6 +1327,10 @@ packages:
     resolution: {integrity: sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==}
     engines: {node: '>=6.9.0'}
 
+  get-nonce@1.0.1:
+    resolution: {integrity: sha512-FJhYRoDaiatfEkUK8HKlicmu/3SGFD51q3itKDGoSTysQJBnfOcxU5GxnhE1E6soB76MbT0MBtnKJuXyAx+96Q==}
+    engines: {node: '>=6'}
+
   glob-parent@6.0.2:
     resolution: {integrity: sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==}
     engines: {node: '>=10.13.0'}
@@ -1327,6 +1543,11 @@ packages:
   lru-cache@5.1.1:
     resolution: {integrity: sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==}
 
+  lucide-react@1.17.0:
+    resolution: {integrity: sha512-9FA9evdox/JQL5PT57fdA1x/yg8T7knJ98+zjTL3UfKza6pflQUUh3XtaQIHKvnsJw1lmsEyHVlt5jchYxOQ5w==}
+    peerDependencies:
+      react: ^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0
+
   lz-string@1.5.0:
     resolution: {integrity: sha512-h5bgJWpxJNswbU7qCrV0tIKQCaS3blPDrqKWx+QxzuzL1zGUzij9XCWLrSLsJPu5t+eWA/ycetzYAO5IOMcWAQ==}
     hasBin: true
@@ -1431,6 +1652,26 @@ packages:
     resolution: {integrity: sha512-z6F7K9bV85EfseRCp2bzrpyQ0Gkw1uLoCel9XBVWPg/TjRj94SkJzUTGfOa4bs7iJvBWtQG0Wq7wnI0syw3EBQ==}
     engines: {node: '>=0.10.0'}
 
+  react-remove-scroll-bar@2.3.8:
+    resolution: {integrity: sha512-9r+yi9+mgU33AKcj6IbT9oRCO78WriSj6t/cF8DWBZJ9aOGPOTEDvdUDz1FwKim7QXWwmHqtdHnRJfhAxEG46Q==}
+    engines: {node: '>=10'}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  react-remove-scroll@2.7.2:
+    resolution: {integrity: sha512-Iqb9NjCCTt6Hf+vOdNIZGdTiH1QSqr27H/Ek9sv/a97gfueI/5h1s3yRi1nngzMUaOOToin5dI1dXKdXiF+u0Q==}
+    engines: {node: '>=10'}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
   react-router-dom@6.30.3:
     resolution: {integrity: sha512-pxPcv1AczD4vso7G4Z3TKcvlxK7g7TNt3/FNGMhfqyntocvYKj+GCatfigGDjbLozC4baguJ0ReCigoDJXb0ag==}
     engines: {node: '>=14.0.0'}
@@ -1444,6 +1685,16 @@ packages:
     peerDependencies:
       react: '>=16.8'
 
+  react-style-singleton@2.2.3:
+    resolution: {integrity: sha512-b6jSvxvVnyptAiLjbkWLE/lOnR4lfTtDAl+eUC7RZy+QQWc6wRzIV2CE6xBuMmDxc2qIihtDCZD5NPOFl7fRBQ==}
+    engines: {node: '>=10'}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
   react@18.3.1:
     resolution: {integrity: sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==}
     engines: {node: '>=0.10.0'}
@@ -1522,6 +1773,9 @@ packages:
   symbol-tree@3.2.4:
     resolution: {integrity: sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==}
 
+  tailwind-merge@3.6.0:
+    resolution: {integrity: sha512-uxL7qAVQriqRQPAyK3pj66VqskWqoZ37PW94jwOTwNfq/z9oyu1V+eqrZqtR2+fCiXdYOZe/Modt8GtvqNzu+w==}
+
   tailwindcss@4.2.2:
     resolution: {integrity: sha512-KWBIxs1Xb6NoLdMVqhbhgwZf2PGBpPEiwOqgI4pFIYbNTfBXiKYyWoTsXgBQ9WFg/OlhnvHaY+AEpW7wSmFo2Q==}
 
@@ -1572,6 +1826,9 @@ packages:
     peerDependencies:
       typescript: '>=4.8.4'
 
+  tslib@2.8.1:
+    resolution: {integrity: sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==}
+
   type-check@0.4.0:
     resolution: {integrity: sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew==}
     engines: {node: '>= 0.8.0'}
@@ -1600,6 +1857,26 @@ packages:
   uri-js@4.4.1:
     resolution: {integrity: sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==}
 
+  use-callback-ref@1.3.3:
+    resolution: {integrity: sha512-jQL3lRnocaFtu3V00JToYz/4QkNWswxijDaCVNZRiRTO3HQDLsdu1ZtmIUvV4yPp+rvWm5j0y0TG/S61cuijTg==}
+    engines: {node: '>=10'}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  use-sidecar@1.1.3:
+    resolution: {integrity: sha512-Fedw0aZvkhynoPYlA5WXrMCAMm+nSWdZt6lzJQ7Ok8S6Q+VsHmHpRWndVRJ8Be0ZbkfPc5LRYH+5XrzXcEeLRQ==}
+    engines: {node: '>=10'}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
   vite-node@3.2.4:
     resolution: {integrity: sha512-EbKSKh+bh1E1IFxeO0pg1n4dvoOTt0UDiXMd/qn++r98+jPO1xtJilvXldeuQ8giIB5IkpjCgMleHMNEsGH6pg==}
     engines: {node: ^18.0.0 || ^20.0.0 || >=22.0.0}
@@ -2034,6 +2311,156 @@ snapshots:
       '@jridgewell/resolve-uri': 3.1.2
       '@jridgewell/sourcemap-codec': 1.5.5
 
+  '@radix-ui/primitive@1.1.3': {}
+
+  '@radix-ui/react-compose-refs@1.1.2(@types/react@18.3.28)(react@18.3.1)':
+    dependencies:
+      react: 18.3.1
+    optionalDependencies:
+      '@types/react': 18.3.28
+
+  '@radix-ui/react-context@1.1.2(@types/react@18.3.28)(react@18.3.1)':
+    dependencies:
+      react: 18.3.1
+    optionalDependencies:
+      '@types/react': 18.3.28
+
+  '@radix-ui/react-dialog@1.1.15(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.3
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@18.3.28)(react@18.3.1)
+      '@radix-ui/react-context': 1.1.2(@types/react@18.3.28)(react@18.3.1)
+      '@radix-ui/react-dismissable-layer': 1.1.11(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-focus-guards': 1.1.3(@types/react@18.3.28)(react@18.3.1)
+      '@radix-ui/react-focus-scope': 1.1.7(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-id': 1.1.1(@types/react@18.3.28)(react@18.3.1)
+      '@radix-ui/react-portal': 1.1.9(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-presence': 1.1.5(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-slot': 1.2.3(@types/react@18.3.28)(react@18.3.1)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@18.3.28)(react@18.3.1)
+      aria-hidden: 1.2.6
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+      react-remove-scroll: 2.7.2(@types/react@18.3.28)(react@18.3.1)
+    optionalDependencies:
+      '@types/react': 18.3.28
+      '@types/react-dom': 18.3.7(@types/react@18.3.28)
+
+  '@radix-ui/react-dismissable-layer@1.1.11(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.3
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@18.3.28)(react@18.3.1)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@18.3.28)(react@18.3.1)
+      '@radix-ui/react-use-escape-keydown': 1.1.1(@types/react@18.3.28)(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+    optionalDependencies:
+      '@types/react': 18.3.28
+      '@types/react-dom': 18.3.7(@types/react@18.3.28)
+
+  '@radix-ui/react-focus-guards@1.1.3(@types/react@18.3.28)(react@18.3.1)':
+    dependencies:
+      react: 18.3.1
+    optionalDependencies:
+      '@types/react': 18.3.28
+
+  '@radix-ui/react-focus-scope@1.1.7(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@18.3.28)(react@18.3.1)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@18.3.28)(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+    optionalDependencies:
+      '@types/react': 18.3.28
+      '@types/react-dom': 18.3.7(@types/react@18.3.28)
+
+  '@radix-ui/react-id@1.1.1(@types/react@18.3.28)(react@18.3.1)':
+    dependencies:
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@18.3.28)(react@18.3.1)
+      react: 18.3.1
+    optionalDependencies:
+      '@types/react': 18.3.28
+
+  '@radix-ui/react-portal@1.1.9(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@18.3.28)(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+    optionalDependencies:
+      '@types/react': 18.3.28
+      '@types/react-dom': 18.3.7(@types/react@18.3.28)
+
+  '@radix-ui/react-presence@1.1.5(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@18.3.28)(react@18.3.1)
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@18.3.28)(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+    optionalDependencies:
+      '@types/react': 18.3.28
+      '@types/react-dom': 18.3.7(@types/react@18.3.28)
+
+  '@radix-ui/react-primitive@2.1.3(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@radix-ui/react-slot': 1.2.3(@types/react@18.3.28)(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+    optionalDependencies:
+      '@types/react': 18.3.28
+      '@types/react-dom': 18.3.7(@types/react@18.3.28)
+
+  '@radix-ui/react-slot@1.2.3(@types/react@18.3.28)(react@18.3.1)':
+    dependencies:
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@18.3.28)(react@18.3.1)
+      react: 18.3.1
+    optionalDependencies:
+      '@types/react': 18.3.28
+
+  '@radix-ui/react-slot@1.2.4(@types/react@18.3.28)(react@18.3.1)':
+    dependencies:
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@18.3.28)(react@18.3.1)
+      react: 18.3.1
+    optionalDependencies:
+      '@types/react': 18.3.28
+
+  '@radix-ui/react-use-callback-ref@1.1.1(@types/react@18.3.28)(react@18.3.1)':
+    dependencies:
+      react: 18.3.1
+    optionalDependencies:
+      '@types/react': 18.3.28
+
+  '@radix-ui/react-use-controllable-state@1.2.2(@types/react@18.3.28)(react@18.3.1)':
+    dependencies:
+      '@radix-ui/react-use-effect-event': 0.0.2(@types/react@18.3.28)(react@18.3.1)
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@18.3.28)(react@18.3.1)
+      react: 18.3.1
+    optionalDependencies:
+      '@types/react': 18.3.28
+
+  '@radix-ui/react-use-effect-event@0.0.2(@types/react@18.3.28)(react@18.3.1)':
+    dependencies:
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@18.3.28)(react@18.3.1)
+      react: 18.3.1
+    optionalDependencies:
+      '@types/react': 18.3.28
+
+  '@radix-ui/react-use-escape-keydown@1.1.1(@types/react@18.3.28)(react@18.3.1)':
+    dependencies:
+      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@18.3.28)(react@18.3.1)
+      react: 18.3.1
+    optionalDependencies:
+      '@types/react': 18.3.28
+
+  '@radix-ui/react-use-layout-effect@1.1.1(@types/react@18.3.28)(react@18.3.1)':
+    dependencies:
+      react: 18.3.1
+    optionalDependencies:
+      '@types/react': 18.3.28
+
   '@remix-run/router@1.23.2': {}
 
   '@rolldown/pluginutils@1.0.0-beta.27': {}
@@ -2434,6 +2861,10 @@ snapshots:
 
   argparse@2.0.1: {}
 
+  aria-hidden@1.2.6:
+    dependencies:
+      tslib: 2.8.1
+
   aria-query@5.3.0:
     dependencies:
       dequal: 2.0.3
@@ -2486,6 +2917,12 @@ snapshots:
 
   check-error@2.1.3: {}
 
+  class-variance-authority@0.7.1:
+    dependencies:
+      clsx: 2.1.1
+
+  clsx@2.1.1: {}
+
   color-convert@2.0.1:
     dependencies:
       color-name: 1.1.4
@@ -2530,6 +2967,8 @@ snapshots:
 
   detect-libc@2.1.2: {}
 
+  detect-node-es@1.1.0: {}
+
   dom-accessibility-api@0.5.16: {}
 
   dom-accessibility-api@0.6.3: {}
@@ -2693,6 +3132,8 @@ snapshots:
 
   gensync@1.0.0-beta.2: {}
 
+  get-nonce@1.0.1: {}
+
   glob-parent@6.0.2:
     dependencies:
       is-glob: 4.0.3
@@ -2873,6 +3314,10 @@ snapshots:
     dependencies:
       yallist: 3.1.1
 
+  lucide-react@1.17.0(react@18.3.1):
+    dependencies:
+      react: 18.3.1
+
   lz-string@1.5.0: {}
 
   magic-string@0.30.21:
@@ -2962,6 +3407,25 @@ snapshots:
 
   react-refresh@0.17.0: {}
 
+  react-remove-scroll-bar@2.3.8(@types/react@18.3.28)(react@18.3.1):
+    dependencies:
+      react: 18.3.1
+      react-style-singleton: 2.2.3(@types/react@18.3.28)(react@18.3.1)
+      tslib: 2.8.1
+    optionalDependencies:
+      '@types/react': 18.3.28
+
+  react-remove-scroll@2.7.2(@types/react@18.3.28)(react@18.3.1):
+    dependencies:
+      react: 18.3.1
+      react-remove-scroll-bar: 2.3.8(@types/react@18.3.28)(react@18.3.1)
+      react-style-singleton: 2.2.3(@types/react@18.3.28)(react@18.3.1)
+      tslib: 2.8.1
+      use-callback-ref: 1.3.3(@types/react@18.3.28)(react@18.3.1)
+      use-sidecar: 1.1.3(@types/react@18.3.28)(react@18.3.1)
+    optionalDependencies:
+      '@types/react': 18.3.28
+
   react-router-dom@6.30.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
     dependencies:
       '@remix-run/router': 1.23.2
@@ -2974,6 +3438,14 @@ snapshots:
       '@remix-run/router': 1.23.2
       react: 18.3.1
 
+  react-style-singleton@2.2.3(@types/react@18.3.28)(react@18.3.1):
+    dependencies:
+      get-nonce: 1.0.1
+      react: 18.3.1
+      tslib: 2.8.1
+    optionalDependencies:
+      '@types/react': 18.3.28
+
   react@18.3.1:
     dependencies:
       loose-envify: 1.4.0
@@ -3062,6 +3534,8 @@ snapshots:
 
   symbol-tree@3.2.4: {}
 
+  tailwind-merge@3.6.0: {}
+
   tailwindcss@4.2.2: {}
 
   tapable@2.3.2: {}
@@ -3099,6 +3573,8 @@ snapshots:
     dependencies:
       typescript: 5.9.3
 
+  tslib@2.8.1: {}
+
   type-check@0.4.0:
     dependencies:
       prelude-ls: 1.2.1
@@ -3128,6 +3604,21 @@ snapshots:
     dependencies:
       punycode: 2.3.1
 
+  use-callback-ref@1.3.3(@types/react@18.3.28)(react@18.3.1):
+    dependencies:
+      react: 18.3.1
+      tslib: 2.8.1
+    optionalDependencies:
+      '@types/react': 18.3.28
+
+  use-sidecar@1.1.3(@types/react@18.3.28)(react@18.3.1):
+    dependencies:
+      detect-node-es: 1.1.0
+      react: 18.3.1
+      tslib: 2.8.1
+    optionalDependencies:
+      '@types/react': 18.3.28
+
   vite-node@3.2.4(@types/node@24.12.0)(jiti@2.6.1)(lightningcss@1.32.0):
     dependencies:
       cac: 6.7.14
diff --git a/src/frontend/src/components/layout/NavBar.tsx b/src/frontend/src/components/layout/NavBar.tsx
index a5a038e..87576b4 100644
--- a/src/frontend/src/components/layout/NavBar.tsx
+++ b/src/frontend/src/components/layout/NavBar.tsx
@@ -1,15 +1,13 @@
 import { useCallback, useEffect, useState } from "react";
 import { Link, NavLink, useNavigate } from "react-router-dom";
+import { Leaf, LogOut, Menu, Shield, Snowflake, X } from "lucide-react";
 
 import { appRoutes } from "@/app/routes";
-import {
-  CloseIcon,
-  LeafIcon,
-  MenuIcon,
-  SnowflakeIcon,
-} from "@/components/icons";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
 import { useAuth } from "@/hooks/use-auth";
 import { THEMES, type Theme, getThemeStorageKey } from "@/lib/theme";
+import { cn } from "@/lib/utils";
 
 const navigation = [
   { to: appRoutes.dashboard, label: "Dashboard" },
@@ -19,15 +17,15 @@ const navigation = [
 ];
 
 function navLinkClass(isActive: boolean, pill = false) {
-  return [
+  return cn(
     pill
       ? "rounded-[var(--radius-full)] px-3 py-2"
       : "rounded-[var(--radius-md)] px-4 py-2",
     "text-sm font-medium transition-all duration-150",
     isActive
-      ? "nav-link-active bg-accent-soft text-accent"
-      : "text-fg-muted hover:bg-surface-hover hover:text-fg",
-  ].join(" ");
+      ? "nav-link-active bg-primary/10 text-primary"
+      : "text-muted-foreground hover:bg-accent hover:text-accent-foreground",
+  );
 }
 
 function getStoredTheme(): Theme {
@@ -104,8 +102,10 @@ export function NavBar() {
           to={appRoutes.dashboard}
           className="flex items-center gap-2 transition-opacity hover:opacity-80"
         >
-          <span className="inline-block h-2.5 w-2.5 rounded-full bg-accent" />
-          <span className="text-base font-bold tracking-tight text-fg">
+          <span className="flex h-8 w-8 items-center justify-center rounded-md border border-border bg-card text-primary">
+            <Shield className="h-4 w-4" />
+          </span>
+          <span className="text-base font-semibold tracking-normal text-foreground">
             Guard Proxy
           </span>
         </Link>
@@ -123,39 +123,41 @@ export function NavBar() {
         </nav>
 
         <div className="hidden items-center gap-2 md:flex">
-          <button
+          <Button
             type="button"
             onClick={toggleTheme}
-            className="flex h-8 w-8 items-center justify-center rounded-[var(--radius-sm)] text-fg-muted transition hover:bg-surface-hover hover:text-fg"
+            variant="ghost"
+            size="icon"
             aria-label={`Switch to ${theme === "emerald" ? "frost" : "emerald"} theme`}
             title={`Theme: ${theme}`}
           >
-            {theme === "emerald" ? <LeafIcon /> : <SnowflakeIcon />}
-          </button>
+            {theme === "emerald" ? <Leaf /> : <Snowflake />}
+          </Button>
 
-          <span className="badge-accent rounded-[var(--radius-full)] bg-accent-soft px-4 py-1.5 text-sm font-semibold text-accent">
-            Dev Mode
-          </span>
-          <span className="rounded-[var(--radius-full)] bg-surface-hover px-4 py-1.5 text-sm font-semibold text-fg-muted">
+          <Badge>Dev Mode</Badge>
+          <Badge variant="secondary">
             {user?.full_name || user?.email || "No user"}
-          </span>
-          <button
+          </Badge>
+          <Button
             type="button"
             onClick={() => void handleLogout()}
-            className="btn-ghost rounded-[var(--radius-sm)] px-4 py-2.5 text-sm font-semibold"
+            variant="ghost"
           >
+            <LogOut />
             Logout
-          </button>
+          </Button>
         </div>
 
-        <button
+        <Button
           type="button"
           onClick={() => setMobileOpen(true)}
-          className="flex h-9 w-9 items-center justify-center rounded-[var(--radius-sm)] text-fg-muted transition hover:bg-surface-hover hover:text-fg md:hidden"
+          variant="ghost"
+          size="icon"
+          className="md:hidden"
           aria-label="Open menu"
         >
-          <MenuIcon />
-        </button>
+          <Menu />
+        </Button>
       </div>
 
       {mobileOpen && (
@@ -167,20 +169,23 @@ export function NavBar() {
             aria-label="Close menu overlay"
           />
 
-          <nav className="absolute right-0 top-0 flex h-full w-72 flex-col gap-1 border-l border-border bg-surface p-5 shadow-card-lg animate-slide-in">
+          <nav className="fixed right-0 top-0 flex h-dvh w-72 max-w-[calc(100vw-2rem)] flex-col gap-1 border-l border-border bg-card p-5 shadow-lg animate-slide-in">
             <div className="mb-4 flex items-center justify-between">
               <span className="flex items-center gap-2">
-                <span className="inline-block h-2.5 w-2.5 rounded-full bg-accent" />
-                <span className="text-sm font-bold text-fg">Guard Proxy</span>
+                <span className="flex h-8 w-8 items-center justify-center rounded-md border border-border text-primary">
+                  <Shield className="h-4 w-4" />
+                </span>
+                <span className="text-sm font-semibold text-foreground">Guard Proxy</span>
               </span>
-              <button
+              <Button
                 type="button"
                 onClick={() => setMobileOpen(false)}
-                className="flex h-8 w-8 items-center justify-center rounded-[var(--radius-sm)] text-fg-muted transition hover:bg-surface-hover hover:text-fg"
+                variant="ghost"
+                size="icon"
                 aria-label="Close menu"
               >
-                <CloseIcon />
-              </button>
+                <X />
+              </Button>
             </div>
 
             {navigation.map((item) => (
@@ -196,33 +201,34 @@ export function NavBar() {
 
             <div className="my-3 h-px bg-border" />
 
-            <button
+            <Button
               type="button"
               onClick={toggleTheme}
-              className="flex items-center gap-2 rounded-[var(--radius-md)] px-4 py-2 text-sm font-medium text-fg-muted transition hover:bg-surface-hover hover:text-fg"
+              variant="ghost"
+              className="justify-start"
             >
-              {theme === "emerald" ? <LeafIcon /> : <SnowflakeIcon />}
+              {theme === "emerald" ? <Leaf /> : <Snowflake />}
               <span>Theme: {theme}</span>
-            </button>
+            </Button>
 
             <div className="my-3 h-px bg-border" />
 
             <div className="flex flex-wrap gap-2 px-1">
-              <span className="badge-accent rounded-[var(--radius-full)] bg-accent-soft px-4 py-1.5 text-sm font-semibold text-accent">
-                Dev Mode
-              </span>
-              <span className="rounded-[var(--radius-full)] bg-surface-hover px-4 py-1.5 text-sm font-semibold text-fg-muted">
+              <Badge>Dev Mode</Badge>
+              <Badge variant="secondary">
                 {user?.full_name || user?.email || "No user"}
-              </span>
+              </Badge>
             </div>
 
-            <button
+            <Button
               type="button"
               onClick={() => void handleLogout()}
-              className="btn-ghost mt-auto rounded-[var(--radius-md)] px-5 py-2.5 text-base font-semibold"
+              variant="outline"
+              className="mt-auto"
             >
+              <LogOut />
               Logout
-            </button>
+            </Button>
           </nav>
         </div>
       )}
diff --git a/src/frontend/src/components/shared/DataTable.tsx b/src/frontend/src/components/shared/DataTable.tsx
index 0163181..21a390c 100644
--- a/src/frontend/src/components/shared/DataTable.tsx
+++ b/src/frontend/src/components/shared/DataTable.tsx
@@ -1,5 +1,15 @@
 import type { ReactNode } from "react";
 
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import { cn } from "@/lib/utils";
+
 import { EmptyState } from "./EmptyState";
 
 export type DataTableColumn<Row> = {
@@ -35,45 +45,36 @@ export function DataTable<Row>({
   }
 
   return (
-    <div className="overflow-hidden rounded-[var(--radius-lg)] border border-border bg-surface">
-      <div className="overflow-x-auto">
-        <table className="min-w-full border-collapse">
-          <thead className="bg-surface-hover">
-            <tr className="border-b border-border">
+    <div className="overflow-hidden rounded-lg border border-border bg-card">
+      <Table>
+        <TableHeader className="bg-muted/70">
+          <TableRow>
+            {columns.map((column) => (
+              <TableHead
+                key={column.key}
+                className={cn(column.headerClassName)}
+              >
+                {column.header}
+              </TableHead>
+            ))}
+          </TableRow>
+        </TableHeader>
+
+        <TableBody>
+          {rows.map((row) => (
+            <TableRow key={getRowKey(row)}>
               {columns.map((column) => (
-                <th
+                <TableCell
                   key={column.key}
-                  className={`px-4 py-3 text-left text-xs font-semibold uppercase tracking-wide text-fg-muted ${column.headerClassName ?? ""}`.trim()}
+                  className={cn("text-sm text-foreground", column.className)}
                 >
-                  {column.header}
-                </th>
+                  {column.cell(row)}
+                </TableCell>
               ))}
-            </tr>
-          </thead>
-
-          <tbody>
-            {rows.map((row, rowIndex) => (
-              <tr
-                key={getRowKey(row)}
-                className={
-                  rowIndex === rows.length - 1
-                    ? ""
-                    : "border-b border-border-subtle"
-                }
-              >
-                {columns.map((column) => (
-                  <td
-                    key={column.key}
-                    className={`px-4 py-3 align-middle text-sm text-fg ${column.className ?? ""}`.trim()}
-                  >
-                    {column.cell(row)}
-                  </td>
-                ))}
-              </tr>
-            ))}
-          </tbody>
-        </table>
-      </div>
+            </TableRow>
+          ))}
+        </TableBody>
+      </Table>
     </div>
   );
 }
diff --git a/src/frontend/src/components/shared/EmptyState.tsx b/src/frontend/src/components/shared/EmptyState.tsx
index 6308cc2..97cebf8 100644
--- a/src/frontend/src/components/shared/EmptyState.tsx
+++ b/src/frontend/src/components/shared/EmptyState.tsx
@@ -1,5 +1,7 @@
 import type { ReactNode } from "react";
 
+import { Card } from "@/components/ui/card";
+
 type EmptyStateProps = {
   title: string;
   description: string;
@@ -12,12 +14,12 @@ export function EmptyState({
   action,
 }: EmptyStateProps) {
   return (
-    <div className="rounded-[var(--radius-lg)] border border-dashed border-border bg-surface p-8 text-center">
+    <Card className="border-dashed p-8 text-center">
       <div className="mx-auto max-w-xl space-y-3">
-        <h3 className="text-lg font-semibold text-fg">{title}</h3>
-        <p className="text-sm leading-6 text-fg-muted">{description}</p>
+        <h3 className="text-base font-semibold text-foreground">{title}</h3>
+        <p className="text-sm leading-6 text-muted-foreground">{description}</p>
         {action ? <div className="pt-2">{action}</div> : null}
       </div>
-    </div>
+    </Card>
   );
 }
diff --git a/src/frontend/src/components/shared/ErrorState.tsx b/src/frontend/src/components/shared/ErrorState.tsx
index a8372df..df29f0e 100644
--- a/src/frontend/src/components/shared/ErrorState.tsx
+++ b/src/frontend/src/components/shared/ErrorState.tsx
@@ -1,5 +1,7 @@
 import type { ReactNode } from "react";
 
+import { Alert } from "@/components/ui/alert";
+
 type ErrorStateProps = {
   title: string;
   description: string;
@@ -12,12 +14,12 @@ export function ErrorState({
   action,
 }: ErrorStateProps) {
   return (
-    <div className="rounded-[var(--radius-lg)] border border-error/30 bg-error-soft p-6">
+    <Alert variant="destructive" className="p-5">
       <div className="space-y-2">
-        <h3 className="text-lg font-semibold text-error">{title}</h3>
-        <p className="text-sm leading-6 text-fg">{description}</p>
+        <h3 className="text-base font-semibold">{title}</h3>
+        <p className="text-sm leading-6 text-foreground">{description}</p>
         {action ? <div className="pt-2">{action}</div> : null}
       </div>
-    </div>
+    </Alert>
   );
 }
diff --git a/src/frontend/src/components/shared/LoadingState.tsx b/src/frontend/src/components/shared/LoadingState.tsx
index 3e084de..dc4d9ab 100644
--- a/src/frontend/src/components/shared/LoadingState.tsx
+++ b/src/frontend/src/components/shared/LoadingState.tsx
@@ -1,3 +1,5 @@
+import { Card } from "@/components/ui/card";
+
 type LoadingStateProps = {
   label?: string;
 };
@@ -6,11 +8,11 @@ export function LoadingState({
   label = "Loading content...",
 }: LoadingStateProps) {
   return (
-    <div className="rounded-[var(--radius-lg)] border border-border bg-surface p-6">
+    <Card className="p-5">
       <div className="flex items-center gap-3">
-        <span className="h-4 w-4 animate-spin rounded-full border-2 border-border border-t-accent" />
-        <p className="text-sm font-medium text-fg-muted">{label}</p>
+        <span className="h-4 w-4 animate-spin rounded-full border-2 border-border border-t-primary" />
+        <p className="text-sm font-medium text-muted-foreground">{label}</p>
       </div>
-    </div>
+    </Card>
   );
 }
diff --git a/src/frontend/src/components/shared/Modal.tsx b/src/frontend/src/components/shared/Modal.tsx
index 41cf285..64bde3c 100644
--- a/src/frontend/src/components/shared/Modal.tsx
+++ b/src/frontend/src/components/shared/Modal.tsx
@@ -1,4 +1,12 @@
-import { useEffect, type ReactNode } from "react";
+import type { ReactNode } from "react";
+
+import {
+  Dialog,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
 
 type ModalProps = {
   title: string;
@@ -8,27 +16,15 @@ type ModalProps = {
 };
 
 export function Modal({ title, children, footer, onClose }: ModalProps) {
-  useEffect(() => {
-    const onKey = (e: KeyboardEvent) => {
-      if (e.key === "Escape") onClose();
-    };
-    document.addEventListener("keydown", onKey);
-    return () => document.removeEventListener("keydown", onKey);
-  }, [onClose]);
-
   return (
-    <div className="fixed inset-0 z-50" role="dialog" aria-modal="true">
-      <button
-        type="button"
-        className="absolute inset-0 bg-black/60 backdrop-blur-sm"
-        onClick={onClose}
-        aria-label="Close dialog"
-      />
-      <div className="absolute left-1/2 top-1/2 w-full max-w-lg -translate-x-1/2 -translate-y-1/2 rounded-[var(--radius-xl)] border border-border bg-surface p-6 shadow-card-lg">
-        <h2 className="mb-4 text-lg font-bold text-fg">{title}</h2>
+    <Dialog open onOpenChange={(open) => { if (!open) onClose(); }}>
+      <DialogContent aria-describedby={undefined}>
+        <DialogHeader>
+          <DialogTitle>{title}</DialogTitle>
+        </DialogHeader>
         <div className="space-y-4">{children}</div>
-        {footer ? <div className="mt-6 flex justify-end gap-3">{footer}</div> : null}
-      </div>
-    </div>
+        {footer ? <DialogFooter>{footer}</DialogFooter> : null}
+      </DialogContent>
+    </Dialog>
   );
 }
diff --git a/src/frontend/src/components/shared/PageHeader.tsx b/src/frontend/src/components/shared/PageHeader.tsx
index 6178f3b..28c43d0 100644
--- a/src/frontend/src/components/shared/PageHeader.tsx
+++ b/src/frontend/src/components/shared/PageHeader.tsx
@@ -12,13 +12,13 @@ export function PageHeader({
   actions,
 }: PageHeaderProps) {
   return (
-    <header className="flex flex-col gap-4 lg:flex-row lg:items-start lg:justify-between">
+    <header className="flex flex-col gap-4 border-b border-border pb-6 lg:flex-row lg:items-start lg:justify-between">
       <div className="space-y-2">
-        <h1 className="text-3xl font-bold tracking-tight text-fg sm:text-4xl">
+        <h1 className="text-2xl font-semibold tracking-normal text-foreground sm:text-3xl">
           {title}
         </h1>
         {description ? (
-          <p className="max-w-3xl text-base leading-7 text-fg-muted">
+          <p className="max-w-3xl text-sm leading-6 text-muted-foreground">
             {description}
           </p>
         ) : null}
diff --git a/src/frontend/src/components/shared/PagePlaceholder.tsx b/src/frontend/src/components/shared/PagePlaceholder.tsx
index 73476a2..703f8fc 100644
--- a/src/frontend/src/components/shared/PagePlaceholder.tsx
+++ b/src/frontend/src/components/shared/PagePlaceholder.tsx
@@ -28,7 +28,7 @@ export function PagePlaceholder({
           description="Shared placeholder so every route lives inside the same application shell."
           icon={<InfoIcon className="text-accent" />}
         >
-          <p className="text-sm leading-6 text-fg-muted">
+          <p className="text-sm leading-6 text-muted-foreground">
             Replace only the page content without rebuilding layout, navigation,
             or chrome. This helps the team work in parallel without fragmenting
             the app structure.
@@ -38,7 +38,7 @@ export function PagePlaceholder({
         <SectionCard
           title="Next step"
           description="This is the handoff point for the real feature implementation."
-          icon={<ArrowRightIcon className="text-fg-muted" />}
+          icon={<ArrowRightIcon className="text-muted-foreground" />}
         >
           <EmptyState
             title="Feature UI has not been started yet"
diff --git a/src/frontend/src/components/shared/SectionCard.tsx b/src/frontend/src/components/shared/SectionCard.tsx
index c046f96..32670a5 100644
--- a/src/frontend/src/components/shared/SectionCard.tsx
+++ b/src/frontend/src/components/shared/SectionCard.tsx
@@ -1,5 +1,13 @@
 import type { ReactNode } from "react";
 
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+
 type SectionCardProps = {
   title: string;
   description?: string;
@@ -16,27 +24,27 @@ export function SectionCard({
   children,
 }: SectionCardProps) {
   return (
-    <section className="card-gradient shadow-card rounded-[var(--radius-lg)] border border-border p-6">
-      <div className="flex flex-col gap-4 border-b border-border-subtle pb-4 sm:flex-row sm:items-start sm:justify-between">
+    <Card as="section">
+      <CardHeader className="border-b border-border sm:flex-row sm:items-start sm:justify-between">
         <div className="flex items-start gap-3">
           {icon ? (
-            <div className="flex h-10 w-10 items-center justify-center rounded-[var(--radius-md)] bg-accent-soft text-accent">
+            <div className="flex h-9 w-9 items-center justify-center rounded-md bg-primary/10 text-primary">
               {icon}
             </div>
           ) : null}
 
           <div className="space-y-1">
-            <h2 className="text-lg font-semibold text-fg">{title}</h2>
+            <CardTitle>{title}</CardTitle>
             {description ? (
-              <p className="text-sm leading-6 text-fg-muted">{description}</p>
+              <CardDescription>{description}</CardDescription>
             ) : null}
           </div>
         </div>
 
         {actions ? <div className="flex items-center gap-2">{actions}</div> : null}
-      </div>
+      </CardHeader>
 
-      <div className="pt-5">{children}</div>
-    </section>
+      <CardContent className="pt-5">{children}</CardContent>
+    </Card>
   );
 }
diff --git a/src/frontend/src/components/shared/StatCard.tsx b/src/frontend/src/components/shared/StatCard.tsx
index 442c877..460860c 100644
--- a/src/frontend/src/components/shared/StatCard.tsx
+++ b/src/frontend/src/components/shared/StatCard.tsx
@@ -1,5 +1,8 @@
 import type { ReactNode } from "react";
 
+import { Card } from "@/components/ui/card";
+import { cn } from "@/lib/utils";
+
 type StatCardProps = {
   label: string;
   value: string;
@@ -10,11 +13,11 @@ type StatCardProps = {
 };
 
 const toneClassMap = {
-  neutral: "bg-surface-hover text-fg-muted",
-  success: "bg-success-soft text-success",
-  warning: "bg-warning-soft text-warning",
-  error: "bg-error-soft text-error",
-  info: "bg-info-soft text-info",
+  neutral: "bg-muted text-muted-foreground",
+  success: "bg-success/10 text-success",
+  warning: "bg-warning/10 text-warning",
+  error: "bg-destructive/10 text-destructive",
+  info: "bg-info/10 text-info",
 } as const;
 
 export function StatCard({
@@ -26,18 +29,18 @@ export function StatCard({
   isLoading = false,
 }: StatCardProps) {
   return (
-    <article className="shadow-card rounded-[var(--radius-lg)] border border-border bg-surface p-5">
+    <Card as="article" className="p-5">
       <div className="flex items-start justify-between gap-3">
         <div className="space-y-2">
-          <p className="text-sm font-medium text-fg-muted">{label}</p>
+          <p className="text-sm font-medium text-muted-foreground">{label}</p>
           {isLoading ? (
             <div
-              className="h-9 w-16 animate-pulse rounded-[var(--radius-sm)] bg-surface-hover"
+              className="h-9 w-16 animate-pulse rounded-md bg-muted"
               role="status"
               aria-label="Loading"
             />
           ) : (
-            <p className="font-mono text-3xl font-semibold tracking-tight text-fg">
+            <p className="font-mono text-3xl font-semibold tracking-normal text-foreground">
               {value}
             </p>
           )}
@@ -45,14 +48,17 @@ export function StatCard({
 
         {icon ? (
           <div
-            className={`flex h-10 w-10 items-center justify-center rounded-[var(--radius-md)] ${toneClassMap[tone]}`}
+            className={cn(
+              "flex h-9 w-9 items-center justify-center rounded-md",
+              toneClassMap[tone],
+            )}
           >
             {icon}
           </div>
         ) : null}
       </div>
 
-      {hint ? <p className="mt-4 text-sm leading-6 text-fg-muted">{hint}</p> : null}
-    </article>
+      {hint ? <p className="mt-4 text-sm leading-6 text-muted-foreground">{hint}</p> : null}
+    </Card>
   );
 }
diff --git a/src/frontend/src/components/shared/StatusBadge.tsx b/src/frontend/src/components/shared/StatusBadge.tsx
index e5f3c70..4ae3b67 100644
--- a/src/frontend/src/components/shared/StatusBadge.tsx
+++ b/src/frontend/src/components/shared/StatusBadge.tsx
@@ -1,3 +1,5 @@
+import { Badge } from "@/components/ui/badge";
+
 type StatusBadgeTone = "success" | "warning" | "error" | "info" | "neutral";
 
 type StatusBadgeProps = {
@@ -5,12 +7,12 @@ type StatusBadgeProps = {
   tone?: StatusBadgeTone;
 };
 
-const toneClassMap = {
-  success: "bg-success-soft text-success",
-  warning: "bg-warning-soft text-warning",
-  error: "bg-error-soft text-error",
-  info: "bg-info-soft text-info",
-  neutral: "bg-surface-hover text-fg-muted",
+const toneVariantMap = {
+  success: "success",
+  warning: "warning",
+  error: "destructive",
+  info: "default",
+  neutral: "outline",
 } as const;
 
 export function StatusBadge({
@@ -18,11 +20,9 @@ export function StatusBadge({
   tone = "neutral",
 }: StatusBadgeProps) {
   return (
-    <span
-      className={`inline-flex items-center gap-2 rounded-[var(--radius-full)] px-3 py-1 text-xs font-semibold ${toneClassMap[tone]}`}
-    >
+    <Badge variant={toneVariantMap[tone]}>
       <span className="h-1.5 w-1.5 rounded-full bg-current" />
       {label}
-    </span>
+    </Badge>
   );
 }
diff --git a/src/frontend/src/components/ui/alert.tsx b/src/frontend/src/components/ui/alert.tsx
new file mode 100644
index 0000000..84b42c0
--- /dev/null
+++ b/src/frontend/src/components/ui/alert.tsx
@@ -0,0 +1,36 @@
+import { cva, type VariantProps } from "class-variance-authority";
+import * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+const alertVariants = cva("rounded-lg border p-4 text-sm", {
+  variants: {
+    variant: {
+      default: "border-border bg-card text-card-foreground",
+      success: "border-success/30 bg-success/10 text-success",
+      destructive: "border-destructive/30 bg-destructive/10 text-destructive",
+      warning: "border-warning/30 bg-warning/10 text-warning",
+    },
+  },
+  defaultVariants: {
+    variant: "default",
+  },
+});
+
+export interface AlertProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof alertVariants> {}
+
+const Alert = React.forwardRef<HTMLDivElement, AlertProps>(
+  ({ className, variant, ...props }, ref) => (
+    <div
+      ref={ref}
+      role="alert"
+      className={cn(alertVariants({ variant }), className)}
+      {...props}
+    />
+  ),
+);
+Alert.displayName = "Alert";
+
+export { Alert };
diff --git a/src/frontend/src/components/ui/badge.tsx b/src/frontend/src/components/ui/badge.tsx
new file mode 100644
index 0000000..1e19eae
--- /dev/null
+++ b/src/frontend/src/components/ui/badge.tsx
@@ -0,0 +1,33 @@
+import { cva, type VariantProps } from "class-variance-authority";
+import * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+const badgeVariants = cva(
+  "inline-flex items-center gap-1.5 rounded-full border px-2.5 py-0.5 text-xs font-medium transition-colors",
+  {
+    variants: {
+      variant: {
+        default: "border-primary/30 bg-primary/10 text-primary",
+        secondary: "border-border bg-secondary text-secondary-foreground",
+        success: "border-success/30 bg-success/10 text-success",
+        warning: "border-warning/30 bg-warning/10 text-warning",
+        destructive: "border-destructive/30 bg-destructive/10 text-destructive",
+        outline: "border-border text-muted-foreground",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  },
+);
+
+export interface BadgeProps
+  extends React.HTMLAttributes<HTMLSpanElement>,
+    VariantProps<typeof badgeVariants> {}
+
+function Badge({ className, variant, ...props }: BadgeProps) {
+  return <span className={cn(badgeVariants({ variant }), className)} {...props} />;
+}
+
+export { Badge };
diff --git a/src/frontend/src/components/ui/button.tsx b/src/frontend/src/components/ui/button.tsx
new file mode 100644
index 0000000..748bd7e
--- /dev/null
+++ b/src/frontend/src/components/ui/button.tsx
@@ -0,0 +1,58 @@
+import { Slot } from "@radix-ui/react-slot";
+import { cva, type VariantProps } from "class-variance-authority";
+import * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+const buttonVariants = cva(
+  "inline-flex h-9 shrink-0 items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
+  {
+    variants: {
+      variant: {
+        default:
+          "border border-primary/80 bg-primary text-primary-foreground shadow-sm hover:bg-primary/90",
+        destructive:
+          "border border-destructive/50 bg-destructive/10 text-destructive hover:bg-destructive/15",
+        outline:
+          "border border-border bg-background text-foreground shadow-sm hover:bg-accent hover:text-accent-foreground",
+        secondary:
+          "border border-border bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
+        ghost: "text-muted-foreground hover:bg-accent hover:text-accent-foreground",
+        link: "h-auto p-0 text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default: "px-4 py-2",
+        sm: "h-8 rounded-md px-3 text-xs",
+        lg: "h-10 rounded-md px-5",
+        icon: "h-9 w-9 p-0",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  },
+);
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {
+  asChild?: boolean;
+}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : "button";
+
+    return (
+      <Comp
+        ref={ref}
+        className={cn(buttonVariants({ variant, size, className }))}
+        {...props}
+      />
+    );
+  },
+);
+Button.displayName = "Button";
+
+export { Button };
diff --git a/src/frontend/src/components/ui/card.tsx b/src/frontend/src/components/ui/card.tsx
new file mode 100644
index 0000000..6aee981
--- /dev/null
+++ b/src/frontend/src/components/ui/card.tsx
@@ -0,0 +1,71 @@
+import * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+type CardProps = React.ComponentProps<"div"> & {
+  as?: "article" | "div" | "section";
+};
+
+const Card = React.forwardRef<HTMLDivElement, CardProps>(
+  ({ as: Comp = "div", className, ...props }, ref) => (
+    <Comp
+      ref={ref}
+      className={cn(
+        "rounded-lg border border-border bg-card text-card-foreground shadow-sm",
+        className,
+      )}
+      {...props}
+    />
+  ),
+);
+Card.displayName = "Card";
+
+const CardHeader = React.forwardRef<HTMLDivElement, React.ComponentProps<"div">>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn("flex flex-col gap-1.5 p-5", className)} {...props} />
+  ),
+);
+CardHeader.displayName = "CardHeader";
+
+const CardTitle = React.forwardRef<HTMLHeadingElement, React.ComponentProps<"h3">>(
+  ({ className, ...props }, ref) => (
+    <h3
+      ref={ref}
+      className={cn("text-base font-semibold leading-none tracking-normal", className)}
+      {...props}
+    />
+  ),
+);
+CardTitle.displayName = "CardTitle";
+
+const CardDescription = React.forwardRef<
+  HTMLParagraphElement,
+  React.ComponentProps<"p">
+>(({ className, ...props }, ref) => (
+  <p
+    ref={ref}
+    className={cn("text-sm leading-6 text-muted-foreground", className)}
+    {...props}
+  />
+));
+CardDescription.displayName = "CardDescription";
+
+const CardContent = React.forwardRef<HTMLDivElement, React.ComponentProps<"div">>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn("p-5 pt-0", className)} {...props} />
+  ),
+);
+CardContent.displayName = "CardContent";
+
+const CardFooter = React.forwardRef<HTMLDivElement, React.ComponentProps<"div">>(
+  ({ className, ...props }, ref) => (
+    <div
+      ref={ref}
+      className={cn("flex items-center gap-2 p-5 pt-0", className)}
+      {...props}
+    />
+  ),
+);
+CardFooter.displayName = "CardFooter";
+
+export { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle };
diff --git a/src/frontend/src/components/ui/checkbox.tsx b/src/frontend/src/components/ui/checkbox.tsx
new file mode 100644
index 0000000..fce6105
--- /dev/null
+++ b/src/frontend/src/components/ui/checkbox.tsx
@@ -0,0 +1,21 @@
+import * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+const Checkbox = React.forwardRef<
+  HTMLInputElement,
+  Omit<React.ComponentProps<"input">, "type">
+>(({ className, ...props }, ref) => (
+  <input
+    ref={ref}
+    type="checkbox"
+    className={cn(
+      "h-4 w-4 rounded border-border bg-background text-primary accent-primary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+      className,
+    )}
+    {...props}
+  />
+));
+Checkbox.displayName = "Checkbox";
+
+export { Checkbox };
diff --git a/src/frontend/src/components/ui/dialog.tsx b/src/frontend/src/components/ui/dialog.tsx
new file mode 100644
index 0000000..6b1dd2c
--- /dev/null
+++ b/src/frontend/src/components/ui/dialog.tsx
@@ -0,0 +1,93 @@
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import { X } from "lucide-react";
+import * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+const Dialog = DialogPrimitive.Root;
+const DialogTrigger = DialogPrimitive.Trigger;
+const DialogPortal = DialogPrimitive.Portal;
+const DialogClose = DialogPrimitive.Close;
+
+const DialogOverlay = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Overlay
+    ref={ref}
+    className={cn(
+      "fixed inset-0 z-50 bg-black/60 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out",
+      className,
+    )}
+    {...props}
+  />
+));
+DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
+
+const DialogContent = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+  <DialogPortal>
+    <DialogOverlay />
+    <DialogPrimitive.Content
+      ref={ref}
+      aria-describedby={props["aria-describedby"]}
+      className={cn(
+        "fixed left-1/2 top-1/2 z-50 grid w-[calc(100%-2rem)] max-w-lg -translate-x-1/2 -translate-y-1/2 gap-4 rounded-lg border border-border bg-card p-5 text-card-foreground shadow-lg sm:p-6",
+        className,
+      )}
+      {...props}
+    >
+      {children}
+      <DialogPrimitive.Close
+        className="absolute right-4 top-4 rounded-md p-1 text-muted-foreground opacity-70 transition-opacity hover:bg-accent hover:text-accent-foreground hover:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+        aria-label="Close dialog"
+      >
+        <X className="h-4 w-4" />
+      </DialogPrimitive.Close>
+    </DialogPrimitive.Content>
+  </DialogPortal>
+));
+DialogContent.displayName = DialogPrimitive.Content.displayName;
+
+const DialogHeader = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div className={cn("flex flex-col gap-1.5 text-left", className)} {...props} />
+);
+DialogHeader.displayName = "DialogHeader";
+
+const DialogFooter = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn("flex flex-col-reverse gap-2 sm:flex-row sm:justify-end", className)}
+    {...props}
+  />
+);
+DialogFooter.displayName = "DialogFooter";
+
+const DialogTitle = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Title
+    ref={ref}
+    className={cn("text-lg font-semibold leading-none tracking-normal", className)}
+    {...props}
+  />
+));
+DialogTitle.displayName = DialogPrimitive.Title.displayName;
+
+export {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+};
diff --git a/src/frontend/src/components/ui/input.tsx b/src/frontend/src/components/ui/input.tsx
new file mode 100644
index 0000000..3a3e450
--- /dev/null
+++ b/src/frontend/src/components/ui/input.tsx
@@ -0,0 +1,20 @@
+import * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+const Input = React.forwardRef<HTMLInputElement, React.ComponentProps<"input">>(
+  ({ className, type, ...props }, ref) => (
+    <input
+      ref={ref}
+      type={type}
+      className={cn(
+        "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm text-foreground shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground hover:border-border focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
+        className,
+      )}
+      {...props}
+    />
+  ),
+);
+Input.displayName = "Input";
+
+export { Input };
diff --git a/src/frontend/src/components/ui/label.tsx b/src/frontend/src/components/ui/label.tsx
new file mode 100644
index 0000000..b444249
--- /dev/null
+++ b/src/frontend/src/components/ui/label.tsx
@@ -0,0 +1,16 @@
+import * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+const Label = React.forwardRef<HTMLLabelElement, React.ComponentProps<"label">>(
+  ({ className, ...props }, ref) => (
+    <label
+      ref={ref}
+      className={cn("text-sm font-medium text-muted-foreground", className)}
+      {...props}
+    />
+  ),
+);
+Label.displayName = "Label";
+
+export { Label };
diff --git a/src/frontend/src/components/ui/select.tsx b/src/frontend/src/components/ui/select.tsx
new file mode 100644
index 0000000..e1e06fb
--- /dev/null
+++ b/src/frontend/src/components/ui/select.tsx
@@ -0,0 +1,22 @@
+import * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+const Select = React.forwardRef<
+  HTMLSelectElement,
+  React.ComponentProps<"select">
+>(({ className, children, ...props }, ref) => (
+  <select
+    ref={ref}
+    className={cn(
+      "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm text-foreground shadow-sm transition-colors hover:border-border focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
+      className,
+    )}
+    {...props}
+  >
+    {children}
+  </select>
+));
+Select.displayName = "Select";
+
+export { Select };
diff --git a/src/frontend/src/components/ui/table.tsx b/src/frontend/src/components/ui/table.tsx
new file mode 100644
index 0000000..986fad5
--- /dev/null
+++ b/src/frontend/src/components/ui/table.tsx
@@ -0,0 +1,73 @@
+import * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+const Table = React.forwardRef<
+  HTMLTableElement,
+  React.HTMLAttributes<HTMLTableElement>
+>(({ className, ...props }, ref) => (
+  <div className="w-full overflow-auto">
+    <table
+      ref={ref}
+      className={cn("w-full caption-bottom text-sm", className)}
+      {...props}
+    />
+  </div>
+));
+Table.displayName = "Table";
+
+const TableHeader = React.forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+  <thead ref={ref} className={cn("[&_tr]:border-b", className)} {...props} />
+));
+TableHeader.displayName = "TableHeader";
+
+const TableBody = React.forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+  <tbody ref={ref} className={cn("[&_tr:last-child]:border-0", className)} {...props} />
+));
+TableBody.displayName = "TableBody";
+
+const TableRow = React.forwardRef<
+  HTMLTableRowElement,
+  React.HTMLAttributes<HTMLTableRowElement>
+>(({ className, ...props }, ref) => (
+  <tr
+    ref={ref}
+    className={cn(
+      "border-b border-border transition-colors hover:bg-muted/50",
+      className,
+    )}
+    {...props}
+  />
+));
+TableRow.displayName = "TableRow";
+
+const TableHead = React.forwardRef<
+  HTMLTableCellElement,
+  React.ThHTMLAttributes<HTMLTableCellElement>
+>(({ className, ...props }, ref) => (
+  <th
+    ref={ref}
+    className={cn(
+      "h-10 px-4 text-left align-middle text-xs font-medium uppercase text-muted-foreground",
+      className,
+    )}
+    {...props}
+  />
+));
+TableHead.displayName = "TableHead";
+
+const TableCell = React.forwardRef<
+  HTMLTableCellElement,
+  React.TdHTMLAttributes<HTMLTableCellElement>
+>(({ className, ...props }, ref) => (
+  <td ref={ref} className={cn("px-4 py-3 align-middle", className)} {...props} />
+));
+TableCell.displayName = "TableCell";
+
+export { Table, TableBody, TableCell, TableHead, TableHeader, TableRow };
diff --git a/src/frontend/src/features/auth/AuthPendingState.tsx b/src/frontend/src/features/auth/AuthPendingState.tsx
index 7a4f7bc..4409ae0 100644
--- a/src/frontend/src/features/auth/AuthPendingState.tsx
+++ b/src/frontend/src/features/auth/AuthPendingState.tsx
@@ -1,9 +1,11 @@
+import { Card } from "@/components/ui/card";
+
 export function AuthPendingState() {
   return (
-    <main className="grid min-h-screen place-items-center bg-app px-6 py-10 text-fg">
-      <div className="card-gradient shadow-card rounded-[var(--radius-lg)] border border-border px-6 py-5 text-sm text-fg-muted">
+    <main className="grid min-h-screen place-items-center bg-app px-6 py-10 text-foreground">
+      <Card className="px-6 py-5 text-sm text-muted-foreground">
         Checking session...
-      </div>
+      </Card>
     </main>
   );
 }
diff --git a/src/frontend/src/features/logs/LogDetailModal.tsx b/src/frontend/src/features/logs/LogDetailModal.tsx
index c016d8c..bcd9f18 100644
--- a/src/frontend/src/features/logs/LogDetailModal.tsx
+++ b/src/frontend/src/features/logs/LogDetailModal.tsx
@@ -2,6 +2,7 @@ import type { ReactNode } from "react";
 
 import { Modal } from "@/components/shared/Modal";
 import { StatusBadge } from "@/components/shared/StatusBadge";
+import { Button } from "@/components/ui/button";
 
 import type { Log, LogAction, LogSeverity } from "./types";
 
@@ -24,15 +25,15 @@ function severityTone(severity: LogSeverity) {
 
 function Field({ label, children }: { label: string; children: ReactNode }) {
   return (
-    <div className="grid grid-cols-[10rem_1fr] gap-2 py-1.5">
-      <dt className="text-sm font-medium text-fg-muted">{label}</dt>
-      <dd className="text-sm text-fg">{children}</dd>
+    <div className="grid gap-1 py-2 sm:grid-cols-[10rem_1fr] sm:gap-2">
+      <dt className="text-sm font-medium text-muted-foreground">{label}</dt>
+      <dd className="text-sm text-foreground">{children}</dd>
     </div>
   );
 }
 
 function Nullable({ value }: { value: string | number | null | undefined }) {
-  return value !== null && value !== undefined ? <>{value}</> : <span className="text-fg-subtle">—</span>;
+  return value !== null && value !== undefined ? <>{value}</> : <span className="text-muted-foreground">—</span>;
 }
 
 export function LogDetailModal({ log, onClose }: LogDetailModalProps) {
@@ -41,9 +42,9 @@ export function LogDetailModal({ log, onClose }: LogDetailModalProps) {
       title="Event details"
       onClose={onClose}
       footer={
-        <button type="button" onClick={onClose} className="btn-ghost px-4 py-2 text-sm">
+        <Button type="button" onClick={onClose} variant="outline">
           Close
-        </button>
+        </Button>
       }
     >
       <div className="max-h-[60vh] overflow-y-auto">
@@ -92,7 +93,7 @@ export function LogDetailModal({ log, onClose }: LogDetailModalProps) {
           </Field>
           {log.raw_context !== null && (
             <Field label="Raw context">
-              <pre className="overflow-auto rounded-[var(--radius-md)] bg-surface-hover p-2 text-xs">
+              <pre className="overflow-auto rounded-md bg-muted p-3 text-xs text-foreground">
                 {JSON.stringify(log.raw_context, null, 2)}
               </pre>
             </Field>
diff --git a/src/frontend/src/features/policies/DeletePolicyDialog.tsx b/src/frontend/src/features/policies/DeletePolicyDialog.tsx
index 50acede..42699dd 100644
--- a/src/frontend/src/features/policies/DeletePolicyDialog.tsx
+++ b/src/frontend/src/features/policies/DeletePolicyDialog.tsx
@@ -1,6 +1,8 @@
 import { useState } from "react";
 
 import { Modal } from "@/components/shared/Modal";
+import { Alert } from "@/components/ui/alert";
+import { Button } from "@/components/ui/button";
 import { useAuth } from "@/hooks/use-auth";
 import { ApiError } from "@/lib/api-client";
 
@@ -39,32 +41,31 @@ export function DeletePolicyDialog({ policy, onSuccess, onClose }: DeletePolicyD
       onClose={onClose}
       footer={
         <>
-          <button type="button" onClick={onClose} className="btn-ghost px-4 py-2 text-sm">
+          <Button type="button" onClick={onClose} variant="outline">
             Cancel
-          </button>
-          <button
+          </Button>
+          <Button
             type="button"
             disabled={submitting}
             onClick={() => void handleDelete()}
-            className="rounded-[var(--radius-md)] bg-error px-4 py-2 text-sm font-semibold text-white transition hover:opacity-90 disabled:opacity-50"
+            variant="destructive"
           >
             {submitting ? "Deleting…" : "Delete"}
-          </button>
+          </Button>
         </>
       }
     >
       {serverError && (
-        <div
-          role="alert"
+        <Alert
+          variant="destructive"
           aria-live="assertive"
-          className="rounded-[var(--radius-md)] bg-error-soft px-4 py-3 text-sm font-medium text-error"
         >
           {serverError}
-        </div>
+        </Alert>
       )}
-      <p className="text-sm text-fg">
+      <p className="text-sm text-foreground">
         Are you sure you want to delete{" "}
-        <span className="font-semibold text-fg">{policy.name}</span>?
+        <span className="font-semibold text-foreground">{policy.name}</span>?
         This action cannot be undone.
       </p>
     </Modal>
diff --git a/src/frontend/src/features/policies/PolicyFormModal.tsx b/src/frontend/src/features/policies/PolicyFormModal.tsx
index e02ebec..2c8727b 100644
--- a/src/frontend/src/features/policies/PolicyFormModal.tsx
+++ b/src/frontend/src/features/policies/PolicyFormModal.tsx
@@ -1,6 +1,12 @@
 import { type FormEvent, useState } from "react";
 
 import { Modal } from "@/components/shared/Modal";
+import { Alert } from "@/components/ui/alert";
+import { Button } from "@/components/ui/button";
+import { Checkbox } from "@/components/ui/checkbox";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Select } from "@/components/ui/select";
 import { useAuth } from "@/hooks/use-auth";
 import { ApiError } from "@/lib/api-client";
 
@@ -83,118 +89,99 @@ export function PolicyFormModal(props: PolicyFormModalProps) {
       onClose={onClose}
       footer={
         <>
-          <button type="button" onClick={onClose} className="btn-ghost px-4 py-2 text-sm">
+          <Button type="button" onClick={onClose} variant="outline">
             Cancel
-          </button>
-          <button
+          </Button>
+          <Button
             type="submit"
             form="policy-form"
             disabled={submitting}
-            className="btn-primary px-4 py-2 text-sm"
           >
             {submitting ? "Saving…" : props.mode === "create" ? "Create" : "Save"}
-          </button>
+          </Button>
         </>
       }
     >
       <form id="policy-form" onSubmit={(e) => void handleSubmit(e)} className="space-y-4">
         {serverError && (
-          <div
-            role="alert"
+          <Alert
+            variant="destructive"
             aria-live="assertive"
-            className="rounded-[var(--radius-md)] bg-error-soft px-4 py-3 text-sm font-medium text-error"
           >
             {serverError}
-          </div>
+          </Alert>
         )}
 
         <div className="space-y-1.5">
-          <label htmlFor="policy-name" className="block text-sm font-medium text-fg-muted">
-            Name
-          </label>
-          <input
+          <Label htmlFor="policy-name">Name</Label>
+          <Input
             id="policy-name"
             type="text"
             required
             maxLength={255}
             value={name}
             onChange={(e) => setName(e.target.value)}
-            className="input-field"
             placeholder="My WAF policy"
           />
         </div>
 
         <div className="space-y-1.5">
-          <label htmlFor="policy-description" className="block text-sm font-medium text-fg-muted">
-            Description
-          </label>
-          <input
+          <Label htmlFor="policy-description">Description</Label>
+          <Input
             id="policy-description"
             type="text"
             value={description}
             onChange={(e) => setDescription(e.target.value)}
-            className="input-field"
             placeholder="Optional"
           />
         </div>
 
         <div className="space-y-1.5">
-          <label htmlFor="policy-enforcement-mode" className="block text-sm font-medium text-fg-muted">
-            Enforcement mode
-          </label>
-          <select
+          <Label htmlFor="policy-enforcement-mode">Enforcement mode</Label>
+          <Select
             id="policy-enforcement-mode"
             value={enforcementMode}
             onChange={(e) => setEnforcementMode(e.target.value as "block" | "detect_only")}
-            className="input-field"
           >
             <option value="block">Block</option>
             <option value="detect_only">Detect only</option>
-          </select>
+          </Select>
         </div>
 
         <div className="space-y-1.5">
-          <label htmlFor="policy-paranoia-level" className="block text-sm font-medium text-fg-muted">
-            Paranoia level
-          </label>
-          <select
+          <Label htmlFor="policy-paranoia-level">Paranoia level</Label>
+          <Select
             id="policy-paranoia-level"
             value={paranoiaLevel}
             onChange={(e) => setParanoiaLevel(e.target.value)}
-            className="input-field"
           >
             <option value="1">1 — Minimal</option>
             <option value="2">2 — Low</option>
             <option value="3">3 — High</option>
             <option value="4">4 — Maximum</option>
-          </select>
+          </Select>
         </div>
 
         <div className="space-y-1.5">
-          <label htmlFor="policy-inbound-threshold" className="block text-sm font-medium text-fg-muted">
-            Inbound threshold
-          </label>
-          <input
+          <Label htmlFor="policy-inbound-threshold">Inbound threshold</Label>
+          <Input
             id="policy-inbound-threshold"
             type="number"
             required
             min={1}
             value={inboundThreshold}
             onChange={(e) => setInboundThreshold(e.target.value)}
-            className="input-field"
           />
         </div>
 
         {props.mode === "edit" && (
-          <label className="flex cursor-pointer items-center gap-2 text-sm font-medium text-fg-muted">
-            <input
-              type="checkbox"
+          <Label className="flex cursor-pointer items-center gap-2">
+            <Checkbox
               checked={isActive}
               onChange={(e) => setIsActive(e.target.checked)}
-              className="h-4 w-4 accent-accent"
             />
             Active
-          </label>
+          </Label>
         )}
       </form>
     </Modal>
diff --git a/src/frontend/src/features/runtime/ApplyConfigButton.tsx b/src/frontend/src/features/runtime/ApplyConfigButton.tsx
index 3c7a81c..a4ae882 100644
--- a/src/frontend/src/features/runtime/ApplyConfigButton.tsx
+++ b/src/frontend/src/features/runtime/ApplyConfigButton.tsx
@@ -1,5 +1,7 @@
 import { useState } from "react";
+import { UploadCloud } from "lucide-react";
 
+import { Button } from "@/components/ui/button";
 import { useAuth } from "@/hooks/use-auth";
 import { ApiError } from "@/lib/api-client";
 
@@ -48,21 +50,23 @@ export function ApplyConfigButton({
   }
 
   return (
-    <button
+    <Button
       type="button"
       disabled={isApplying}
       onClick={() => void handleClick()}
-      className="inline-flex items-center gap-2 rounded-[var(--radius-md)] bg-accent px-4 py-2 text-sm font-semibold text-white shadow-sm transition-opacity hover:opacity-90 disabled:cursor-not-allowed disabled:opacity-50"
     >
       {isApplying ? (
         <>
-          <span className="h-3.5 w-3.5 animate-spin rounded-full border-2 border-white/40 border-t-white" />
+          <span className="h-3.5 w-3.5 animate-spin rounded-full border-2 border-primary-foreground/40 border-t-primary-foreground" />
           Applying…
         </>
       ) : (
-        "Apply config"
+        <>
+          <UploadCloud />
+          Apply config
+        </>
       )}
-    </button>
+    </Button>
   );
 }
 
diff --git a/src/frontend/src/features/runtime/RuntimeStatusCard.tsx b/src/frontend/src/features/runtime/RuntimeStatusCard.tsx
index 6e0a9d1..e432f5f 100644
--- a/src/frontend/src/features/runtime/RuntimeStatusCard.tsx
+++ b/src/frontend/src/features/runtime/RuntimeStatusCard.tsx
@@ -2,6 +2,7 @@ import { ErrorState } from "@/components/shared/ErrorState";
 import { LoadingState } from "@/components/shared/LoadingState";
 import { SectionCard } from "@/components/shared/SectionCard";
 import { StatusBadge } from "@/components/shared/StatusBadge";
+import { Alert } from "@/components/ui/alert";
 
 import type { DeploymentState, RuntimeStatusResponse } from "./types";
 
@@ -86,9 +87,9 @@ export function RuntimeStatusCard({ status }: RuntimeStatusCardProps) {
               value={formatTimestamp(latest_reload.created_at)}
             />
             {latest_reload.status === "failed" && latest_reload.message ? (
-              <div className="rounded-[var(--radius-md)] border border-error/30 bg-error-soft px-4 py-3 text-sm text-error">
+              <Alert variant="destructive">
                 {latest_reload.message}
-              </div>
+              </Alert>
             ) : null}
           </>
         ) : (
@@ -101,9 +102,9 @@ export function RuntimeStatusCard({ status }: RuntimeStatusCardProps) {
 
 function StatusRow({ label, value }: { label: string; value: string }) {
   return (
-    <div className="flex items-center justify-between gap-3 rounded-[var(--radius-md)] border border-border bg-surface p-4">
-      <span className="text-sm font-medium text-fg">{label}</span>
-      <span className="font-mono text-sm text-fg-muted">{value}</span>
+    <div className="flex items-center justify-between gap-3 rounded-lg border border-border bg-card p-4">
+      <span className="text-sm font-medium text-foreground">{label}</span>
+      <span className="font-mono text-sm text-muted-foreground">{value}</span>
     </div>
   );
 }
diff --git a/src/frontend/src/features/vhosts/DeleteVHostDialog.tsx b/src/frontend/src/features/vhosts/DeleteVHostDialog.tsx
index 35fd0e7..04b7fd4 100644
--- a/src/frontend/src/features/vhosts/DeleteVHostDialog.tsx
+++ b/src/frontend/src/features/vhosts/DeleteVHostDialog.tsx
@@ -1,6 +1,8 @@
 import { useState } from "react";
 
 import { Modal } from "@/components/shared/Modal";
+import { Alert } from "@/components/ui/alert";
+import { Button } from "@/components/ui/button";
 import { useAuth } from "@/hooks/use-auth";
 import { ApiError } from "@/lib/api-client";
 
@@ -39,32 +41,31 @@ export function DeleteVHostDialog({ vhost, onSuccess, onClose }: DeleteVHostDial
       onClose={onClose}
       footer={
         <>
-          <button type="button" onClick={onClose} className="btn-ghost px-4 py-2 text-sm">
+          <Button type="button" onClick={onClose} variant="outline">
             Cancel
-          </button>
-          <button
+          </Button>
+          <Button
             type="button"
             disabled={submitting}
             onClick={() => void handleDelete()}
-            className="rounded-[var(--radius-md)] bg-error px-4 py-2 text-sm font-semibold text-white transition hover:opacity-90 disabled:opacity-50"
+            variant="destructive"
           >
             {submitting ? "Deleting…" : "Delete"}
-          </button>
+          </Button>
         </>
       }
     >
       {serverError && (
-        <div
-          role="alert"
+        <Alert
+          variant="destructive"
           aria-live="assertive"
-          className="rounded-[var(--radius-md)] bg-error-soft px-4 py-3 text-sm font-medium text-error"
         >
           {serverError}
-        </div>
+        </Alert>
       )}
-      <p className="text-sm text-fg">
+      <p className="text-sm text-foreground">
         Are you sure you want to delete{" "}
-        <span className="font-semibold text-fg">{vhost.domain}</span>?
+        <span className="font-semibold text-foreground">{vhost.domain}</span>?
         This action cannot be undone.
       </p>
     </Modal>
diff --git a/src/frontend/src/features/vhosts/VHostFormModal.tsx b/src/frontend/src/features/vhosts/VHostFormModal.tsx
index 7d6f71b..9b98437 100644
--- a/src/frontend/src/features/vhosts/VHostFormModal.tsx
+++ b/src/frontend/src/features/vhosts/VHostFormModal.tsx
@@ -1,6 +1,12 @@
 import { type FormEvent, useState } from "react";
 
 import { Modal } from "@/components/shared/Modal";
+import { Alert } from "@/components/ui/alert";
+import { Button } from "@/components/ui/button";
+import { Checkbox } from "@/components/ui/checkbox";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Select } from "@/components/ui/select";
 import { useAuth } from "@/hooks/use-auth";
 import { ApiError } from "@/lib/api-client";
 
@@ -72,86 +78,72 @@ export function VHostFormModal(props: VHostFormModalProps) {
       onClose={onClose}
       footer={
         <>
-          <button type="button" onClick={onClose} className="btn-ghost px-4 py-2 text-sm">
+          <Button type="button" onClick={onClose} variant="outline">
             Cancel
-          </button>
-          <button
+          </Button>
+          <Button
             type="submit"
             form="vhost-form"
             disabled={submitting}
-            className="btn-primary px-4 py-2 text-sm"
           >
             {submitting ? "Saving…" : props.mode === "create" ? "Create" : "Save"}
-          </button>
+          </Button>
         </>
       }
     >
       <form id="vhost-form" onSubmit={(e) => void handleSubmit(e)} className="space-y-4">
         {serverError && (
-          <div
-            role="alert"
+          <Alert
+            variant="destructive"
             aria-live="assertive"
-            className="rounded-[var(--radius-md)] bg-error-soft px-4 py-3 text-sm font-medium text-error"
           >
             {serverError}
-          </div>
+          </Alert>
         )}
 
         <div className="space-y-1.5">
-          <label htmlFor="vhost-domain" className="block text-sm font-medium text-fg-muted">
-            Domain
-          </label>
-          <input
+          <Label htmlFor="vhost-domain">Domain</Label>
+          <Input
             id="vhost-domain"
             type="text"
             required
             maxLength={255}
             value={domain}
             onChange={(e) => setDomain(e.target.value)}
-            className="input-field"
             placeholder="example.com"
           />
         </div>
 
         <div className="space-y-1.5">
-          <label htmlFor="vhost-backend-url" className="block text-sm font-medium text-fg-muted">
-            Backend URL
-          </label>
-          <input
+          <Label htmlFor="vhost-backend-url">Backend URL</Label>
+          <Input
             id="vhost-backend-url"
             type="url"
             required
             maxLength={512}
             value={backendUrl}
             onChange={(e) => setBackendUrl(e.target.value)}
-            className="input-field"
             placeholder="https://backend.internal"
           />
         </div>
 
         <div className="space-y-1.5">
-          <label htmlFor="vhost-description" className="block text-sm font-medium text-fg-muted">
-            Description
-          </label>
-          <input
+          <Label htmlFor="vhost-description">Description</Label>
+          <Input
             id="vhost-description"
             type="text"
             value={description}
             onChange={(e) => setDescription(e.target.value)}
-            className="input-field"
             placeholder="Optional"
           />
         </div>
 
         <div className="space-y-1.5">
-          <label htmlFor="vhost-policy" className="block text-sm font-medium text-fg-muted">
-            Policy
-          </label>
-          <select
+          <Label htmlFor="vhost-policy">Policy</Label>
+          <Select
             id="vhost-policy"
             value={policyId}
             onChange={(e) => setPolicyId(e.target.value)}
-            className="input-field"
           >
             <option value="">None (default policy)</option>
             {policies.map((p) => (
@@ -159,18 +151,16 @@ export function VHostFormModal(props: VHostFormModalProps) {
                 {p.name}
               </option>
             ))}
-          </select>
+          </Select>
         </div>
 
-        <label className="flex cursor-pointer items-center gap-2 text-sm font-medium text-fg-muted">
-          <input
-            type="checkbox"
+        <Label className="flex cursor-pointer items-center gap-2">
+          <Checkbox
             checked={isActive}
             onChange={(e) => setIsActive(e.target.checked)}
-            className="h-4 w-4 accent-accent"
           />
           Active
-        </label>
+        </Label>
       </form>
     </Modal>
   );
diff --git a/src/frontend/src/layouts/AppLayout.tsx b/src/frontend/src/layouts/AppLayout.tsx
index 476fefd..0b715b8 100644
--- a/src/frontend/src/layouts/AppLayout.tsx
+++ b/src/frontend/src/layouts/AppLayout.tsx
@@ -4,7 +4,7 @@ import { NavBar } from "@/components/layout/NavBar";
 
 export function AppLayout() {
   return (
-    <div className="min-h-screen bg-app text-fg">
+    <div className="min-h-screen bg-app text-foreground">
       <NavBar />
       <main className="mx-auto max-w-7xl px-6 py-8 lg:px-10">
         <Outlet />
diff --git a/src/frontend/src/lib/utils.ts b/src/frontend/src/lib/utils.ts
new file mode 100644
index 0000000..a5ef193
--- /dev/null
+++ b/src/frontend/src/lib/utils.ts
@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}
diff --git a/src/frontend/src/pages/dashboard/DashboardPage.tsx b/src/frontend/src/pages/dashboard/DashboardPage.tsx
index 85be8f0..5d0172f 100644
--- a/src/frontend/src/pages/dashboard/DashboardPage.tsx
+++ b/src/frontend/src/pages/dashboard/DashboardPage.tsx
@@ -6,6 +6,8 @@ import {
   ServerIcon,
   ShieldIcon,
 } from "@/components/icons";
+import { Alert } from "@/components/ui/alert";
+import { Button } from "@/components/ui/button";
 import { PageHeader } from "@/components/shared/PageHeader";
 import { RoleBadge } from "@/components/shared/RoleBadge";
 import { SectionCard } from "@/components/shared/SectionCard";
@@ -42,22 +44,22 @@ export function DashboardPage() {
       />
 
       {applyResult ? (
-        <div
-          className={`flex items-start justify-between gap-4 rounded-[var(--radius-md)] border px-4 py-3 text-sm font-medium ${
-            applyResult.kind === "success"
-              ? "border-success/30 bg-success-soft text-success"
-              : "border-error/30 bg-error-soft text-error"
-          }`}
+        <Alert
+          variant={applyResult.kind === "success" ? "success" : "destructive"}
+          className="flex items-start justify-between gap-4"
         >
           <span>{applyResult.message}</span>
-          <button
+          <Button
             type="button"
             onClick={() => setApplyResult(null)}
-            className="shrink-0 text-current opacity-60 hover:opacity-100"
+            variant="ghost"
+            size="sm"
+            className="h-6 px-2 text-current hover:bg-current/10"
+            aria-label="Dismiss apply result"
           >
-            ✕
-          </button>
-        </div>
+            Close
+          </Button>
+        </Alert>
       ) : null}
 
       <div className="grid gap-5 md:grid-cols-2 xl:grid-cols-4">
@@ -149,12 +151,12 @@ type ActivityRowProps = {
 
 function ActivityRow({ title, description, badge }: ActivityRowProps) {
   return (
-    <div className="flex flex-col gap-3 rounded-[var(--radius-md)] border border-border bg-surface p-4">
+    <div className="flex flex-col gap-3 rounded-lg border border-border bg-card p-4">
       <div className="flex flex-wrap items-center justify-between gap-2">
-        <h3 className="text-sm font-semibold text-fg">{title}</h3>
+        <h3 className="text-sm font-semibold text-foreground">{title}</h3>
         {badge}
       </div>
-      <p className="text-sm leading-6 text-fg-muted">{description}</p>
+      <p className="text-sm leading-6 text-muted-foreground">{description}</p>
     </div>
   );
 }
diff --git a/src/frontend/src/pages/login/LoginPage.tsx b/src/frontend/src/pages/login/LoginPage.tsx
index a7959ef..f6eb110 100644
--- a/src/frontend/src/pages/login/LoginPage.tsx
+++ b/src/frontend/src/pages/login/LoginPage.tsx
@@ -1,8 +1,13 @@
 import { type FormEvent, useState } from "react";
 import { useLocation, useNavigate } from "react-router-dom";
+import { Shield } from "lucide-react";
 
 import { appRoutes } from "@/app/routes";
-import { ShieldIcon } from "@/components/icons";
+import { Alert } from "@/components/ui/alert";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
 import { useAuth } from "@/hooks/use-auth";
 
 export function LoginPage() {
@@ -35,74 +40,64 @@ export function LoginPage() {
   }
 
   return (
-    <main className="grid min-h-screen place-items-center bg-app px-6 py-10 text-fg">
+    <main className="grid min-h-screen place-items-center bg-app px-6 py-10 text-foreground">
       <div className="w-full max-w-md">
         <div className="mb-8 text-center">
-          <div className="mx-auto mb-4 flex h-10 w-10 items-center justify-center rounded-full bg-accent">
-            <ShieldIcon />
+          <div className="mx-auto mb-4 flex h-11 w-11 items-center justify-center rounded-lg border border-border bg-card text-primary shadow-sm">
+            <Shield className="h-5 w-5" />
           </div>
-          <h1 className="text-2xl font-bold tracking-tight text-fg">
+          <h1 className="text-2xl font-semibold tracking-normal text-foreground">
             Guard Proxy
           </h1>
-          <p className="mt-2 text-sm text-fg-muted">
+          <p className="mt-2 text-sm text-muted-foreground">
             Sign in to the admin panel
           </p>
         </div>
 
-        <form
-          onSubmit={handleSubmit}
-          className="card-gradient shadow-card-lg rounded-[var(--radius-xl)] border border-border p-8 space-y-5"
-        >
-          {loginError && (
-            <div
-              role="alert"
-              aria-live="assertive"
-              className="rounded-[var(--radius-md)] bg-error-soft px-4 py-3 text-sm font-medium text-error"
-            >
-              {loginError}
-            </div>
-          )}
+        <Card>
+          <CardHeader>
+            <CardTitle>Admin access</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <form onSubmit={handleSubmit} className="space-y-5">
+              {loginError && (
+                <Alert variant="destructive" aria-live="assertive">
+                  {loginError}
+                </Alert>
+              )}
 
-          <div className="space-y-1.5">
-            <label htmlFor="email" className="block text-sm font-medium text-fg-muted">
-              Email
-            </label>
-            <input
-              id="email"
-              type="email"
-              autoComplete="email"
-              required
-              value={email}
-              onChange={(e) => setEmail(e.target.value)}
-              className="input-field"
-            />
-          </div>
+              <div className="space-y-1.5">
+                <Label htmlFor="email">Email</Label>
+                <Input
+                  id="email"
+                  type="email"
+                  autoComplete="email"
+                  required
+                  value={email}
+                  onChange={(e) => setEmail(e.target.value)}
+                />
+              </div>
 
-          <div className="space-y-1.5">
-            <label htmlFor="password" className="block text-sm font-medium text-fg-muted">
-              Password
-            </label>
-            <input
-              id="password"
-              type="password"
-              autoComplete="current-password"
-              required
-              value={password}
-              onChange={(e) => setPassword(e.target.value)}
-              className="input-field"
-            />
-          </div>
+              <div className="space-y-1.5">
+                <Label htmlFor="password">Password</Label>
+                <Input
+                  id="password"
+                  type="password"
+                  autoComplete="current-password"
+                  required
+                  value={password}
+                  onChange={(e) => setPassword(e.target.value)}
+                />
+              </div>
 
-          <button
-            type="submit"
-            disabled={loading}
-            className="btn-primary w-full px-4 py-2.5 text-sm"
-          >
-            {loading ? "Signing in\u2026" : "Sign in"}
-          </button>
-        </form>
+              <Button type="submit" disabled={loading} className="w-full">
+                {loading ? "Signing in\u2026" : "Sign in"}
+              </Button>
+            </form>
+          </CardContent>
+        </Card>
 
-        <p className="mt-6 text-center text-xs text-fg-subtle">
+        <p className="mt-6 text-center text-xs text-muted-foreground">
           Protected by Guard Proxy WAF
         </p>
       </div>
diff --git a/src/frontend/src/pages/logs/LogsPage.test.tsx b/src/frontend/src/pages/logs/LogsPage.test.tsx
index 0900260..b8bc76c 100644
--- a/src/frontend/src/pages/logs/LogsPage.test.tsx
+++ b/src/frontend/src/pages/logs/LogsPage.test.tsx
@@ -1,4 +1,4 @@
-import { render, screen, waitFor } from "@testing-library/react";
+import { fireEvent, render, screen, waitFor } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import { describe, expect, it, vi } from "vitest";
 
@@ -127,6 +127,40 @@ describe("LogsPage", () => {
     );
   });
 
+  it("applies from and to date/time filters", async () => {
+    vi.mocked(logsApi.listLogs).mockResolvedValue(mockListResponse);
+    vi.mocked(vhostsApi.listPolicies).mockResolvedValue(mockPolicies);
+
+    renderPage();
+    await waitFor(() => expect(screen.getByText("app.example.com")).toBeInTheDocument());
+
+    fireEvent.change(screen.getByLabelText("From date"), {
+      target: { value: "2026-06-01" },
+    });
+    fireEvent.change(screen.getByLabelText("From time"), {
+      target: { value: "08:30" },
+    });
+    fireEvent.change(screen.getByLabelText("To date"), {
+      target: { value: "2026-06-02" },
+    });
+    fireEvent.change(screen.getByLabelText("To time"), {
+      target: { value: "17:45" },
+    });
+    await userEvent.click(screen.getByRole("button", { name: /apply/i }));
+
+    await waitFor(() =>
+      expect(vi.mocked(logsApi.listLogs)).toHaveBeenCalledWith(
+        "test-token",
+        expect.objectContaining({
+          date_from: "2026-06-01T08:30",
+          date_to: "2026-06-02T17:45",
+          page: 1,
+        }),
+        expect.anything(),
+      ),
+    );
+  });
+
   it("clearing filters resets to empty params", async () => {
     vi.mocked(logsApi.listLogs).mockResolvedValue(mockListResponse);
     vi.mocked(vhostsApi.listPolicies).mockResolvedValue(mockPolicies);
diff --git a/src/frontend/src/pages/logs/LogsPage.tsx b/src/frontend/src/pages/logs/LogsPage.tsx
index c8f30c7..673f1f9 100644
--- a/src/frontend/src/pages/logs/LogsPage.tsx
+++ b/src/frontend/src/pages/logs/LogsPage.tsx
@@ -1,4 +1,5 @@
 import { useState } from "react";
+import { CalendarClock } from "lucide-react";
 
 import type { DataTableColumn } from "@/components/shared/DataTable";
 import { DataTable } from "@/components/shared/DataTable";
@@ -7,10 +8,15 @@ import { LoadingState } from "@/components/shared/LoadingState";
 import { PageHeader } from "@/components/shared/PageHeader";
 import { SectionCard } from "@/components/shared/SectionCard";
 import { StatusBadge } from "@/components/shared/StatusBadge";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Select } from "@/components/ui/select";
 import { LogDetailModal } from "@/features/logs/LogDetailModal";
 import { useLogs } from "@/features/logs/use-logs";
 import type { Log, LogAction, LogFilters } from "@/features/logs/types";
 import { EMPTY_FILTERS } from "@/features/logs/types";
+import { cn } from "@/lib/utils";
 
 function actionTone(action: LogAction) {
   if (action === "deny") return "error" as const;
@@ -23,7 +29,7 @@ const columns: DataTableColumn<Log>[] = [
     key: "timestamp",
     header: "Timestamp",
     cell: (row) => (
-      <span className="whitespace-nowrap text-xs text-fg-muted">
+      <span className="whitespace-nowrap text-xs text-muted-foreground">
         {new Date(row.event_at).toLocaleString()}
       </span>
     ),
@@ -65,7 +71,7 @@ const columns: DataTableColumn<Log>[] = [
     key: "rules",
     header: "Top matched rules",
     cell: (row) => {
-      if (row.rule_id === null) return <span className="text-fg-subtle">—</span>;
+      if (row.rule_id === null) return <span className="text-muted-foreground">—</span>;
       const label = row.rule_message
         ? `#${row.rule_id} — ${row.rule_message}`
         : `#${row.rule_id}`;
@@ -78,6 +84,208 @@ const columns: DataTableColumn<Log>[] = [
   },
 ];
 
+type DateRangePreset = {
+  label: string;
+  getRange: (now: Date) => Pick<LogFilters, "date_from" | "date_to">;
+};
+
+const dateRangePresets: DateRangePreset[] = [
+  {
+    label: "1 hour",
+    getRange: (now) => ({
+      date_from: toDateTimeLocal(new Date(now.getTime() - 60 * 60 * 1000)),
+      date_to: toDateTimeLocal(now),
+    }),
+  },
+  {
+    label: "24 hours",
+    getRange: (now) => ({
+      date_from: toDateTimeLocal(new Date(now.getTime() - 24 * 60 * 60 * 1000)),
+      date_to: toDateTimeLocal(now),
+    }),
+  },
+  {
+    label: "7 days",
+    getRange: (now) => ({
+      date_from: toDateTimeLocal(new Date(now.getTime() - 7 * 24 * 60 * 60 * 1000)),
+      date_to: toDateTimeLocal(now),
+    }),
+  },
+  {
+    label: "Today",
+    getRange: (now) => {
+      const start = new Date(now);
+      start.setHours(0, 0, 0, 0);
+      return {
+        date_from: toDateTimeLocal(start),
+        date_to: toDateTimeLocal(now),
+      };
+    },
+  },
+];
+
+function pad(value: number) {
+  return String(value).padStart(2, "0");
+}
+
+function toDateTimeLocal(date: Date) {
+  return [
+    date.getFullYear(),
+    "-",
+    pad(date.getMonth() + 1),
+    "-",
+    pad(date.getDate()),
+    "T",
+    pad(date.getHours()),
+    ":",
+    pad(date.getMinutes()),
+  ].join("");
+}
+
+function splitDateTime(value: string) {
+  const [date = "", time = ""] = value.split("T");
+  return {
+    date,
+    time,
+  };
+}
+
+function combineDateTime(date: string, time: string) {
+  if (!date) return "";
+  return `${date}T${time || "00:00"}`;
+}
+
+type DateTimeRangePickerProps = {
+  value: Pick<LogFilters, "date_from" | "date_to">;
+  onChange: (next: Pick<LogFilters, "date_from" | "date_to">) => void;
+};
+
+function DateTimeRangePicker({ value, onChange }: DateTimeRangePickerProps) {
+  const from = splitDateTime(value.date_from);
+  const to = splitDateTime(value.date_to);
+
+  function update(partial: Partial<Pick<LogFilters, "date_from" | "date_to">>) {
+    onChange({
+      date_from: partial.date_from ?? value.date_from,
+      date_to: partial.date_to ?? value.date_to,
+    });
+  }
+
+  return (
+    <div className="rounded-lg border border-border bg-card p-4">
+      <div className="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
+        <div className="flex items-center gap-2 text-sm font-medium text-foreground">
+          <span className="flex h-8 w-8 items-center justify-center rounded-md bg-primary/10 text-primary">
+            <CalendarClock className="h-4 w-4" />
+          </span>
+          Time range
+        </div>
+
+        <div className="flex flex-wrap gap-2">
+          {dateRangePresets.map((preset) => (
+            <Button
+              key={preset.label}
+              type="button"
+              variant="outline"
+              size="sm"
+              onClick={() => onChange(preset.getRange(new Date()))}
+            >
+              {preset.label}
+            </Button>
+          ))}
+        </div>
+      </div>
+
+      <div className="mt-4 grid gap-4 lg:grid-cols-2">
+        <DateTimeEndpoint
+          label="From"
+          dateId="filter-date-from"
+          timeId="filter-time-from"
+          date={from.date}
+          time={from.time}
+          onDateChange={(date) =>
+            update({ date_from: combineDateTime(date, from.time) })
+          }
+          onTimeChange={(time) =>
+            update({ date_from: combineDateTime(from.date, time) })
+          }
+        />
+
+        <DateTimeEndpoint
+          label="To"
+          dateId="filter-date-to"
+          timeId="filter-time-to"
+          date={to.date}
+          time={to.time}
+          onDateChange={(date) =>
+            update({ date_to: combineDateTime(date, to.time) })
+          }
+          onTimeChange={(time) =>
+            update({ date_to: combineDateTime(to.date, time) })
+          }
+        />
+      </div>
+    </div>
+  );
+}
+
+type DateTimeEndpointProps = {
+  label: "From" | "To";
+  dateId: string;
+  timeId: string;
+  date: string;
+  time: string;
+  onDateChange: (value: string) => void;
+  onTimeChange: (value: string) => void;
+};
+
+function DateTimeEndpoint({
+  label,
+  dateId,
+  timeId,
+  date,
+  time,
+  onDateChange,
+  onTimeChange,
+}: DateTimeEndpointProps) {
+  return (
+    <fieldset className="space-y-2">
+      <legend className="text-sm font-medium text-muted-foreground">
+        {label}
+      </legend>
+      <div className="grid grid-cols-[minmax(0,1fr)_7.5rem] gap-2">
+        <div className="space-y-1.5">
+          <Label htmlFor={dateId} className="sr-only">
+            {label} date
+          </Label>
+          <Input
+            id={dateId}
+            type="date"
+            value={date}
+            onChange={(event) => onDateChange(event.target.value)}
+            aria-label={`${label} date`}
+            className={cn(!date && "text-muted-foreground")}
+          />
+        </div>
+
+        <div className="space-y-1.5">
+          <Label htmlFor={timeId} className="sr-only">
+            {label} time
+          </Label>
+          <Input
+            id={timeId}
+            type="time"
+            value={time}
+            onChange={(event) => onTimeChange(event.target.value)}
+            aria-label={`${label} time`}
+            className={cn(!time && "text-muted-foreground")}
+          />
+        </div>
+      </div>
+    </fieldset>
+  );
+}
+
 export function LogsPage() {
   const { logs, total, page, pageSize, policies, isLoading, error, setPage, applyFilters, refresh } =
     useLogs();
@@ -102,13 +310,14 @@ export function LogsPage() {
       header: "",
       className: "w-px whitespace-nowrap",
       cell: (row) => (
-        <button
+        <Button
           type="button"
           onClick={() => setSelected(row)}
-          className="rounded-[var(--radius-sm)] border border-border bg-surface-hover px-3 py-1.5 text-xs font-semibold text-fg-muted transition hover:text-fg"
+          variant="outline"
+          size="sm"
         >
           View
-        </button>
+        </Button>
       ),
     },
   ];
@@ -123,41 +332,38 @@ export function LogsPage() {
       <SectionCard title="Filters">
         <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
           <div className="space-y-1.5">
-            <label htmlFor="filter-vhost" className="block text-sm font-medium text-fg-muted">VHost</label>
-            <input
+            <Label htmlFor="filter-vhost">VHost</Label>
+            <Input
               id="filter-vhost"
               type="text"
               value={draft.vhost}
               onChange={(e) => setDraft({ ...draft, vhost: e.target.value })}
-              className="input-field"
               placeholder="example.com (exact match)"
             />
           </div>
 
           <div className="space-y-1.5">
-            <label htmlFor="filter-action" className="block text-sm font-medium text-fg-muted">Action</label>
-            <select
+            <Label htmlFor="filter-action">Action</Label>
+            <Select
               id="filter-action"
               value={draft.action}
               onChange={(e) => setDraft({ ...draft, action: e.target.value as LogFilters["action"] })}
-              className="input-field"
             >
               <option value="">All actions</option>
               <option value="allow">Allow</option>
               <option value="deny">Deny</option>
               <option value="monitor">Monitor</option>
-            </select>
+            </Select>
           </div>
 
           <div className="space-y-1.5">
-            <label htmlFor="filter-policy" className="block text-sm font-medium text-fg-muted">Policy</label>
-            <select
+            <Label htmlFor="filter-policy">Policy</Label>
+            <Select
               id="filter-policy"
               value={draft.policy_id ?? ""}
               onChange={(e) =>
                 setDraft({ ...draft, policy_id: e.target.value ? Number(e.target.value) : null })
               }
-              className="input-field"
             >
               <option value="">All policies</option>
               {policies.map((p) => (
@@ -165,39 +371,27 @@ export function LogsPage() {
                   {p.name}
                 </option>
               ))}
-            </select>
-          </div>
-
-          <div className="space-y-1.5">
-            <label htmlFor="filter-date-from" className="block text-sm font-medium text-fg-muted">From</label>
-            <input
-              id="filter-date-from"
-              type="datetime-local"
-              value={draft.date_from}
-              onChange={(e) => setDraft({ ...draft, date_from: e.target.value })}
-              className="input-field"
-            />
+            </Select>
           </div>
+        </div>
 
-          <div className="space-y-1.5">
-            <label htmlFor="filter-date-to" className="block text-sm font-medium text-fg-muted">To</label>
-            <input
-              id="filter-date-to"
-              type="datetime-local"
-              value={draft.date_to}
-              onChange={(e) => setDraft({ ...draft, date_to: e.target.value })}
-              className="input-field"
-            />
-          </div>
+        <div className="mt-4">
+          <DateTimeRangePicker
+            value={{
+              date_from: draft.date_from,
+              date_to: draft.date_to,
+            }}
+            onChange={(range) => setDraft({ ...draft, ...range })}
+          />
         </div>
 
         <div className="mt-4 flex gap-3">
-          <button type="button" onClick={handleApply} className="btn-primary px-4 py-2 text-sm">
+          <Button type="button" onClick={handleApply}>
             Apply
-          </button>
-          <button type="button" onClick={handleClear} className="btn-ghost px-4 py-2 text-sm">
+          </Button>
+          <Button type="button" onClick={handleClear} variant="outline">
             Clear
-          </button>
+          </Button>
         </div>
       </SectionCard>
 
@@ -209,9 +403,9 @@ export function LogsPage() {
             title="Failed to load logs"
             description={error}
             action={
-              <button type="button" onClick={refresh} className="btn-ghost px-4 py-2 text-sm">
+              <Button type="button" onClick={refresh} variant="outline">
                 Retry
-              </button>
+              </Button>
             }
           />
         ) : (
@@ -226,26 +420,26 @@ export function LogsPage() {
 
             {total > 0 && (
               <div className="mt-4 flex items-center justify-between gap-4">
-                <span className="text-sm text-fg-muted">
+                <span className="text-sm text-muted-foreground">
                   Page {page} of {totalPages} · {total} events
                 </span>
                 <div className="flex gap-2">
-                  <button
+                  <Button
                     type="button"
                     onClick={() => setPage(page - 1)}
                     disabled={page <= 1}
-                    className="btn-ghost px-4 py-2 text-sm disabled:opacity-40"
+                    variant="outline"
                   >
                     Prev
-                  </button>
-                  <button
+                  </Button>
+                  <Button
                     type="button"
                     onClick={() => setPage(page + 1)}
                     disabled={page >= totalPages}
-                    className="btn-ghost px-4 py-2 text-sm disabled:opacity-40"
+                    variant="outline"
                   >
                     Next
-                  </button>
+                  </Button>
                 </div>
               </div>
             )}
diff --git a/src/frontend/src/pages/not-found/NotFoundPage.tsx b/src/frontend/src/pages/not-found/NotFoundPage.tsx
index 5f0f38c..196905b 100644
--- a/src/frontend/src/pages/not-found/NotFoundPage.tsx
+++ b/src/frontend/src/pages/not-found/NotFoundPage.tsx
@@ -3,6 +3,7 @@ import { Link } from "react-router-dom";
 import { appRoutes } from "@/app/routes";
 import { EmptyState } from "@/components/shared/EmptyState";
 import { PageHeader } from "@/components/shared/PageHeader";
+import { Button } from "@/components/ui/button";
 import { useAuth } from "@/hooks/use-auth";
 
 export function NotFoundPage() {
@@ -11,7 +12,7 @@ export function NotFoundPage() {
   const label = isAuthenticated ? "Return to dashboard" : "Go to login";
 
   return (
-    <main className="grid min-h-screen place-items-center bg-app px-6 py-10 text-fg">
+    <main className="grid min-h-screen place-items-center bg-app px-6 py-10 text-foreground">
       <section className="w-full max-w-3xl space-y-8">
         <PageHeader
           title="This page does not exist"
@@ -22,9 +23,9 @@ export function NotFoundPage() {
           title="Unknown route"
           description="This catch-all page protects the app from blank screens when someone enters a wrong URL or follows an outdated link."
           action={
-            <Link to={destination} className="btn-primary px-4 py-2.5 text-sm">
-              {label}
-            </Link>
+            <Button asChild>
+              <Link to={destination}>{label}</Link>
+            </Button>
           }
         />
       </section>
diff --git a/src/frontend/src/pages/policies/PoliciesPage.tsx b/src/frontend/src/pages/policies/PoliciesPage.tsx
index 956d26e..333a361 100644
--- a/src/frontend/src/pages/policies/PoliciesPage.tsx
+++ b/src/frontend/src/pages/policies/PoliciesPage.tsx
@@ -8,6 +8,7 @@ import { LoadingState } from "@/components/shared/LoadingState";
 import { PageHeader } from "@/components/shared/PageHeader";
 import { SectionCard } from "@/components/shared/SectionCard";
 import { StatusBadge } from "@/components/shared/StatusBadge";
+import { Button } from "@/components/ui/button";
 import { DeletePolicyDialog } from "@/features/policies/DeletePolicyDialog";
 import { PolicyFormModal } from "@/features/policies/PolicyFormModal";
 import type { Policy } from "@/features/policies/types";
@@ -64,7 +65,7 @@ export function PoliciesPage() {
       key: "thresholds",
       header: "Inbound threshold",
       cell: (row) => (
-        <span className="tabular-nums text-fg-muted">
+        <span className="tabular-nums text-muted-foreground">
           {row.inbound_anomaly_threshold}
         </span>
       ),
@@ -89,22 +90,24 @@ export function PoliciesPage() {
               const assigned = assignedPolicyIds.has(row.id);
               return (
                 <div className="flex items-center gap-2">
-                  <button
+                  <Button
                     type="button"
                     onClick={() => setModal({ type: "edit", policy: row })}
-                    className="rounded-[var(--radius-sm)] border border-border bg-surface-hover px-3 py-1.5 text-xs font-semibold text-fg-muted transition hover:text-fg"
+                    variant="outline"
+                    size="sm"
                   >
                     Edit
-                  </button>
+                  </Button>
                   <span title={assigned ? "Assigned to a virtual host" : undefined}>
-                    <button
+                    <Button
                       type="button"
                       disabled={assigned}
                       onClick={() => setModal({ type: "delete", policy: row })}
-                      className="rounded-[var(--radius-sm)] border border-error/50 px-3 py-1.5 text-xs font-semibold text-error transition hover:border-error hover:bg-error-soft disabled:cursor-not-allowed disabled:opacity-40"
+                      variant="destructive"
+                      size="sm"
                     >
                       Delete
-                    </button>
+                    </Button>
                   </span>
                 </div>
               );
@@ -121,13 +124,12 @@ export function PoliciesPage() {
         description="Manage CRS-based WAF policies and assign them to virtual hosts."
         actions={
           isAdmin ? (
-            <button
+            <Button
               type="button"
               onClick={() => setModal({ type: "create" })}
-              className="btn-primary px-4 py-2 text-sm"
             >
               New policy
-            </button>
+            </Button>
           ) : undefined
         }
       />
@@ -140,13 +142,13 @@ export function PoliciesPage() {
             title="Failed to load policies"
             description={error}
             action={
-              <button
+              <Button
                 type="button"
                 onClick={refresh}
-                className="btn-ghost px-4 py-2 text-sm"
+                variant="outline"
               >
                 Retry
-              </button>
+              </Button>
             }
           />
         ) : (
diff --git a/src/frontend/src/pages/policies/PolicyDetailPage.tsx b/src/frontend/src/pages/policies/PolicyDetailPage.tsx
index 1fad2a6..5eed700 100644
--- a/src/frontend/src/pages/policies/PolicyDetailPage.tsx
+++ b/src/frontend/src/pages/policies/PolicyDetailPage.tsx
@@ -8,6 +8,7 @@ import { LoadingState } from "@/components/shared/LoadingState";
 import { PageHeader } from "@/components/shared/PageHeader";
 import { SectionCard } from "@/components/shared/SectionCard";
 import { StatusBadge } from "@/components/shared/StatusBadge";
+import { Button } from "@/components/ui/button";
 import { getPolicy } from "@/features/policies/api";
 import type { PolicyDetail, RuleOverride } from "@/features/policies/types";
 import { useAuth } from "@/hooks/use-auth";
@@ -69,7 +70,7 @@ export function PolicyDetailPage() {
         row.comment ? (
           <span>{row.comment}</span>
         ) : (
-          <span className="text-fg-subtle">—</span>
+          <span className="text-muted-foreground">—</span>
         ),
     },
   ];
@@ -88,13 +89,13 @@ export function PolicyDetailPage() {
           title="Failed to load policy"
           description={error}
           action={
-            <button
+            <Button
               type="button"
               onClick={load}
-              className="btn-ghost px-4 py-2 text-sm"
+              variant="outline"
             >
               Retry
-            </button>
+            </Button>
           }
         />
       ) : policy ? (
@@ -102,7 +103,7 @@ export function PolicyDetailPage() {
           <SectionCard title="Policy settings" description="Current configuration for this WAF policy.">
             <dl className="grid grid-cols-2 gap-x-8 gap-y-4 text-sm sm:grid-cols-3">
               <div>
-                <dt className="font-medium text-fg-muted">Enforcement mode</dt>
+                <dt className="font-medium text-muted-foreground">Enforcement mode</dt>
                 <dd className="mt-1">
                   <StatusBadge
                     label={policy.enforcement_mode === "block" ? "Block" : "Detect only"}
@@ -111,7 +112,7 @@ export function PolicyDetailPage() {
                 </dd>
               </div>
               <div>
-                <dt className="font-medium text-fg-muted">Status</dt>
+                <dt className="font-medium text-muted-foreground">Status</dt>
                 <dd className="mt-1">
                   <StatusBadge
                     label={policy.is_active ? "Active" : "Inactive"}
@@ -120,12 +121,12 @@ export function PolicyDetailPage() {
                 </dd>
               </div>
               <div>
-                <dt className="font-medium text-fg-muted">Paranoia level</dt>
-                <dd className="mt-1 text-fg">{policy.paranoia_level}</dd>
+                <dt className="font-medium text-muted-foreground">Paranoia level</dt>
+                <dd className="mt-1 text-foreground">{policy.paranoia_level}</dd>
               </div>
               <div>
-                <dt className="font-medium text-fg-muted">Inbound threshold</dt>
-                <dd className="mt-1 text-fg">{policy.inbound_anomaly_threshold}</dd>
+                <dt className="font-medium text-muted-foreground">Inbound threshold</dt>
+                <dd className="mt-1 text-foreground">{policy.inbound_anomaly_threshold}</dd>
               </div>
             </dl>
           </SectionCard>
diff --git a/src/frontend/src/pages/vhosts/VHostsPage.tsx b/src/frontend/src/pages/vhosts/VHostsPage.tsx
index c39d15b..5b09507 100644
--- a/src/frontend/src/pages/vhosts/VHostsPage.tsx
+++ b/src/frontend/src/pages/vhosts/VHostsPage.tsx
@@ -7,6 +7,7 @@ import { LoadingState } from "@/components/shared/LoadingState";
 import { PageHeader } from "@/components/shared/PageHeader";
 import { SectionCard } from "@/components/shared/SectionCard";
 import { StatusBadge } from "@/components/shared/StatusBadge";
+import { Button } from "@/components/ui/button";
 import { DeleteVHostDialog } from "@/features/vhosts/DeleteVHostDialog";
 import { VHostFormModal } from "@/features/vhosts/VHostFormModal";
 import { useVHosts } from "@/features/vhosts/use-vhosts";
@@ -36,8 +37,8 @@ export function VHostsPage() {
       header: "Domain",
       cell: (row) => (
         <div className="space-y-1">
-          <p className="font-medium text-fg">{row.domain}</p>
-          <p className="font-mono text-xs text-fg-subtle">{row.backend_url}</p>
+          <p className="font-medium text-foreground">{row.domain}</p>
+          <p className="font-mono text-xs text-muted-foreground">{row.backend_url}</p>
         </div>
       ),
     },
@@ -47,7 +48,7 @@ export function VHostsPage() {
       cell: (row) =>
         row.policy_id != null
           ? (policyNameById[row.policy_id] ?? `#${row.policy_id}`)
-          : <span className="text-fg-subtle">None</span>,
+          : <span className="text-muted-foreground">None</span>,
     },
     {
       key: "status",
@@ -67,20 +68,22 @@ export function VHostsPage() {
             className: "w-px whitespace-nowrap",
             cell: (row: VHost) => (
               <div className="flex items-center gap-2">
-                <button
+                <Button
                   type="button"
                   onClick={() => setModal({ type: "edit", vhost: row })}
-                  className="rounded-[var(--radius-sm)] border border-border bg-surface-hover px-3 py-1.5 text-xs font-semibold text-fg-muted transition hover:text-fg"
+                  variant="outline"
+                  size="sm"
                 >
                   Edit
-                </button>
-                <button
+                </Button>
+                <Button
                   type="button"
                   onClick={() => setModal({ type: "delete", vhost: row })}
-                  className="rounded-[var(--radius-sm)] border border-error/50 px-3 py-1.5 text-xs font-semibold text-error transition hover:border-error hover:bg-error-soft"
+                  variant="destructive"
+                  size="sm"
                 >
                   Delete
-                </button>
+                </Button>
               </div>
             ),
           } satisfies DataTableColumn<VHost>,
@@ -95,13 +98,12 @@ export function VHostsPage() {
         description="Manage the domains, backend targets, and WAF policies for each virtual host."
         actions={
           isAdmin ? (
-            <button
+            <Button
               type="button"
               onClick={() => setModal({ type: "create" })}
-              className="btn-primary px-4 py-2 text-sm"
             >
               New vhost
-            </button>
+            </Button>
           ) : undefined
         }
       />
@@ -114,13 +116,13 @@ export function VHostsPage() {
             title="Failed to load virtual hosts"
             description={error}
             action={
-              <button
+              <Button
                 type="button"
                 onClick={refresh}
-                className="btn-ghost px-4 py-2 text-sm"
+                variant="outline"
               >
                 Retry
-              </button>
+              </Button>
             }
           />
         ) : (
diff --git a/src/frontend/src/styles/globals.css b/src/frontend/src/styles/globals.css
index 05d11f6..1b08fed 100644
--- a/src/frontend/src/styles/globals.css
+++ b/src/frontend/src/styles/globals.css
@@ -1,82 +1,103 @@
-/* ═══════════════════════════════════════════════════════════
-   Guard Proxy — dual-theme design system
-   Themes: emerald (deep green), frost (cool blue)
-   Switch via data-theme="emerald|frost" on <html>
-   ═══════════════════════════════════════════════════════════ */
-
 @import "tailwindcss";
 
-/* ── Default tokens (emerald) — Tailwind reads these at build ── */
-
 @theme {
-  --color-app-bg: oklch(0.14 0.015 160);
-  --color-surface: oklch(0.22 0.012 158);
-  --color-surface-hover: oklch(0.26 0.014 158);
-  --color-surface-raised: oklch(0.24 0.013 158);
-  --color-border: oklch(0.32 0.012 158);
-  --color-border-subtle: oklch(0.27 0.011 158);
-  --color-fg: oklch(0.96 0.008 90);
-  --color-fg-muted: oklch(0.8 0.01 160);
-  --color-fg-subtle: oklch(0.68 0.01 160);
-  --color-accent: oklch(0.72 0.19 163);
-  --color-accent-hover: oklch(0.78 0.19 163);
-  --color-accent-soft: oklch(0.72 0.19 163 / 0.12);
-  --color-accent-fg: oklch(0.15 0.015 160);
-  --color-success: oklch(0.68 0.19 155);
-  --color-success-soft: oklch(0.68 0.19 155 / 0.20);
-  --color-warning: oklch(0.80 0.16 80);
-  --color-warning-soft: oklch(0.80 0.16 80 / 0.12);
-  --color-error: oklch(0.70 0.19 25);
-  --color-error-soft: oklch(0.70 0.19 25 / 0.12);
-  --color-info: oklch(0.72 0.15 230);
-  --color-info-soft: oklch(0.72 0.15 230 / 0.12);
-  --color-ring: oklch(0.72 0.19 163 / 0.45);
-  --font-sans: "DM Sans", system-ui, -apple-system, sans-serif;
-  --radius-sm: 8px;
-  --radius-md: 12px;
-  --radius-lg: 16px;
-  --radius-xl: 20px;
-  --radius-full: 9999px;
-}
-
-/* ── Frost overrides ── */
-
-[data-theme="frost"] {
-  --color-app-bg: oklch(0.10 0.018 242);
-  --color-surface: oklch(0.14 0.016 242);
-  --color-surface-hover: oklch(0.18 0.015 242);
-  --color-surface-raised: oklch(0.19 0.015 242);
-  --color-border: oklch(0.28 0.016 242);
-  --color-border-subtle: oklch(0.22 0.014 242);
-  --color-fg: oklch(0.95 0.008 242);
-  --color-fg-muted: oklch(0.78 0.014 242);
-  --color-fg-subtle: oklch(0.66 0.012 242);
-  --color-accent: oklch(0.68 0.17 168);
-  --color-accent-hover: oklch(0.74 0.17 168);
-  --color-accent-soft: oklch(0.68 0.17 168 / 0.14);
-  --color-accent-fg: oklch(0.10 0.02 168);
-  --color-success: oklch(0.65 0.19 145);
-  --color-success-soft: oklch(0.65 0.19 145 / 0.20);
-  --color-warning: oklch(0.80 0.18 75);
-  --color-warning-soft: oklch(0.80 0.18 75 / 0.14);
-  --color-error: oklch(0.65 0.22 25);
-  --color-error-soft: oklch(0.65 0.22 25 / 0.14);
-  --color-info: oklch(0.68 0.16 245);
-  --color-info-soft: oklch(0.68 0.16 245 / 0.14);
-  --color-ring: oklch(0.68 0.17 168 / 0.45);
-  --font-sans: "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-success: var(--success);
+  --color-warning: var(--warning);
+  --color-info: var(--info);
+  --color-app-bg: var(--background);
+  --color-surface: var(--card);
+  --color-surface-hover: var(--muted);
+  --color-surface-raised: var(--secondary);
+  --color-border-subtle: var(--border-subtle);
+  --color-fg: var(--foreground);
+  --color-fg-muted: var(--muted-foreground);
+  --color-fg-subtle: var(--subtle-foreground);
+  --color-accent-hover: var(--primary-hover);
+  --color-accent-soft: color-mix(in oklch, var(--primary), transparent 88%);
+  --color-accent-fg: var(--primary-foreground);
+  --color-success-soft: color-mix(in oklch, var(--success), transparent 88%);
+  --color-warning-soft: color-mix(in oklch, var(--warning), transparent 88%);
+  --color-error: var(--destructive);
+  --color-error-soft: color-mix(in oklch, var(--destructive), transparent 88%);
+  --color-info-soft: color-mix(in oklch, var(--info), transparent 88%);
+  --font-sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
   --radius-sm: 4px;
   --radius-md: 6px;
   --radius-lg: 8px;
-  --radius-xl: 10px;
+  --radius-xl: 8px;
   --radius-full: 9999px;
 }
 
-/* ── Base reset ── */
+:root,
+[data-theme="emerald"] {
+  color-scheme: dark;
+  --background: oklch(0.145 0.014 255);
+  --foreground: oklch(0.965 0.006 255);
+  --card: oklch(0.19 0.014 255);
+  --card-foreground: var(--foreground);
+  --primary: oklch(0.71 0.16 163);
+  --primary-hover: oklch(0.77 0.16 163);
+  --primary-foreground: oklch(0.12 0.014 163);
+  --secondary: oklch(0.235 0.016 255);
+  --secondary-foreground: var(--foreground);
+  --muted: oklch(0.255 0.015 255);
+  --muted-foreground: oklch(0.72 0.02 255);
+  --subtle-foreground: oklch(0.62 0.018 255);
+  --accent: oklch(0.255 0.015 255);
+  --accent-foreground: var(--foreground);
+  --destructive: oklch(0.69 0.19 25);
+  --border: oklch(0.315 0.017 255);
+  --border-subtle: oklch(0.265 0.015 255);
+  --input: oklch(0.315 0.017 255);
+  --ring: oklch(0.71 0.16 163 / 0.45);
+  --success: oklch(0.70 0.15 152);
+  --warning: oklch(0.80 0.15 78);
+  --info: oklch(0.72 0.14 235);
+}
+
+[data-theme="frost"] {
+  --background: oklch(0.975 0.006 250);
+  --foreground: oklch(0.18 0.02 255);
+  --card: oklch(1 0 0);
+  --card-foreground: var(--foreground);
+  --primary: oklch(0.48 0.15 162);
+  --primary-hover: oklch(0.43 0.15 162);
+  --primary-foreground: oklch(0.99 0.004 162);
+  --secondary: oklch(0.94 0.01 250);
+  --secondary-foreground: var(--foreground);
+  --muted: oklch(0.925 0.012 250);
+  --muted-foreground: oklch(0.48 0.028 255);
+  --subtle-foreground: oklch(0.58 0.025 255);
+  --accent: oklch(0.91 0.016 250);
+  --accent-foreground: var(--foreground);
+  --destructive: oklch(0.56 0.19 25);
+  --border: oklch(0.84 0.016 250);
+  --border-subtle: oklch(0.90 0.012 250);
+  --input: oklch(0.82 0.016 250);
+  --ring: oklch(0.48 0.15 162 / 0.35);
+  --success: oklch(0.50 0.13 152);
+  --warning: oklch(0.58 0.13 75);
+  --info: oklch(0.48 0.13 235);
+}
 
 @layer base {
   :root {
-    color-scheme: dark;
     font-synthesis: none;
     text-rendering: optimizeLegibility;
     -webkit-font-smoothing: antialiased;
@@ -102,8 +123,8 @@
 
   body {
     min-width: 320px;
-    background-color: var(--color-app-bg);
-    color: var(--color-fg);
+    background-color: var(--background);
+    color: var(--foreground);
     font-family: var(--font-sans);
   }
 
@@ -120,140 +141,21 @@
   }
 
   ::selection {
-    background-color: var(--color-accent-soft);
-    color: var(--color-fg);
+    background-color: color-mix(in oklch, var(--primary), transparent 76%);
+    color: var(--foreground);
   }
 }
 
-/* ── Shared utilities ── */
-
 @layer utilities {
   .bg-app {
-    background-color: var(--color-app-bg);
-  }
-
-  .shadow-card {
-    box-shadow:
-      0 1px 2px oklch(0 0 0 / 0.14),
-      0 10px 24px oklch(0 0 0 / 0.10);
+    background-color: var(--background);
   }
 
-  .shadow-card-lg {
-    box-shadow:
-      0 2px 4px oklch(0 0 0 / 0.16),
-      0 16px 36px oklch(0 0 0 / 0.12);
-  }
-
-  .card-gradient {
-    background-color: color-mix(
-      in oklch,
-      var(--color-surface-raised),
-      var(--color-surface) 55%
-    );
-    background-image: linear-gradient(
-      180deg,
-      oklch(1 0 0 / 0.03) 0%,
-      oklch(1 0 0 / 0) 12%
-    );
-  }
-
-  .btn-primary {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    gap: 0.5rem;
-    background: linear-gradient(180deg, var(--color-accent-hover) 0%, var(--color-accent) 100%);
-    color: var(--color-accent-fg);
-    border: none;
-    border-radius: var(--radius-md);
-    font-weight: 600;
-    cursor: pointer;
-    transition: all 0.15s ease;
-  }
-  .btn-primary:hover {
-    background: var(--color-accent-hover);
-  }
-  .btn-primary:active {
-    transform: translateY(1px);
-    box-shadow: inset 0 1px 3px oklch(0 0 0 / 0.2);
-  }
-  .btn-primary:disabled {
-    opacity: 0.5;
-    cursor: not-allowed;
-  }
-
-
   .nav-surface {
-    background-color: color-mix(in oklch, var(--color-surface), transparent 20%);
-  }
-  .btn-ghost {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    gap: 0.5rem;
-    background-color: transparent;
-    color: var(--color-fg-muted);
-    border: none;
-    border-radius: var(--radius-md);
-    font-weight: 500;
-    cursor: pointer;
-    transition: all 0.15s ease;
-  }
-  .btn-ghost:hover {
-    background-color: var(--color-surface-hover);
-    color: var(--color-fg);
-  }
-
-  .input-field {
-    width: 100%;
-    background-color: var(--color-surface);
-    color: var(--color-fg);
-    border: 1px solid var(--color-border);
-    border-radius: var(--radius-md);
-    padding: 0.625rem 0.875rem;
-    transition: border-color 0.15s ease, box-shadow 0.15s ease;
-  }
-  .input-field::placeholder {
-    color: var(--color-fg-subtle);
-  }
-  .input-field:hover {
-    border-color: var(--color-border-subtle);
-  }
-  .input-field:focus {
-    outline: none;
-    border-color: var(--color-accent);
-    box-shadow: 0 0 0 3px var(--color-ring);
+    background-color: color-mix(in oklch, var(--card), transparent 8%);
   }
 }
 
-/* ── Theme-specific background gradients ── */
-
-[data-theme="emerald"] .bg-app {
-  background-image:
-    radial-gradient(ellipse at 20% 0%, oklch(0.72 0.19 163 / 0.07), transparent 50%),
-    radial-gradient(ellipse at 80% 0%, oklch(0.72 0.15 195 / 0.05), transparent 45%),
-    linear-gradient(
-      180deg,
-      oklch(0.12 0.018 160) 0%,
-      oklch(0.16 0.015 158) 50%,
-      oklch(0.19 0.012 155) 100%
-    );
-}
-
-[data-theme="frost"] .bg-app {
-  background-image:
-    radial-gradient(ellipse at 20% 0%, oklch(0.22 0.06 168 / 0.14), transparent 50%),
-    radial-gradient(ellipse at 80% 0%, oklch(0.20 0.06 242 / 0.10), transparent 45%),
-    linear-gradient(
-      180deg,
-      oklch(0.08 0.020 242) 0%,
-      oklch(0.11 0.018 242) 50%,
-      oklch(0.14 0.016 242) 100%
-    );
-}
-
-/* ── Dark Reader compatibility ── */
-
 html[data-darkreader-mode] .bg-app {
   background-image: none;
 }
@@ -265,41 +167,17 @@ html[data-darkreader-mode] .nav-surface {
   backdrop-filter: none;
 }
 
-html[data-darkreader-mode] .card-gradient {
-  background-color: var(--color-surface-raised);
-  background-image: none;
-}
-
-html[data-darkreader-mode] .placeholder-card {
-  background-color: var(--color-surface-raised);
-  background-image: none;
-}
-
 html[data-darkreader-mode] .nav-link-active {
   background-color: var(--color-accent);
   color: var(--color-accent-fg);
 }
 
-html[data-darkreader-mode] .badge-accent {
-  background-color: var(--color-accent);
-  color: var(--color-accent-fg);
-}
-
-html[data-darkreader-mode] .shadow-card,
-html[data-darkreader-mode] .shadow-card-lg,
-html[data-darkreader-mode] .btn-primary:active,
-html[data-darkreader-mode] .input-field:focus {
-  box-shadow: none;
-}
-
 html[data-darkreader-mode] .backdrop-blur-sm,
 html[data-darkreader-mode] .backdrop-blur-xl {
   -webkit-backdrop-filter: none;
   backdrop-filter: none;
 }
 
-/* ── Animations ── */
-
 @keyframes slide-in-right {
   from {
     transform: translateX(100%);
@@ -317,18 +195,8 @@ html[data-darkreader-mode] .backdrop-blur-xl {
   }
 }
 
-[data-theme="emerald"] .nav-surface {
-  background-image: linear-gradient(
-    180deg,
-    color-mix(in oklch, var(--color-surface-raised), transparent 15%) 0%,
-    color-mix(in oklch, var(--color-surface), transparent 20%) 100%
-  );
-}
-
-[data-theme="frost"] .nav-surface {
-  background-image: linear-gradient(
-    180deg,
-    color-mix(in oklch, var(--color-surface), transparent 15%) 0%,
-    color-mix(in oklch, var(--color-surface), var(--color-app-bg) 35%) 100%
-  );
+@layer utilities {
+  .text-balance {
+    text-wrap: balance;
+  }
 }
diff --git a/src/frontend/tests/darkreader-css.test.mjs b/src/frontend/tests/darkreader-css.test.mjs
index e04fe1f..d920405 100644
--- a/src/frontend/tests/darkreader-css.test.mjs
+++ b/src/frontend/tests/darkreader-css.test.mjs
@@ -8,28 +8,21 @@ const globalsCss = readFileSync(
   "utf8",
 );
 
-test("Dark Reader fallback strips layered background effects", () => {
+test("Dark Reader fallback strips app background effects", () => {
   assert.match(globalsCss, /html\[data-darkreader-mode\] \.bg-app \{/);
-  assert.match(globalsCss, /html\[data-darkreader-mode\] \.card-gradient \{/);
-  assert.match(globalsCss, /html\[data-darkreader-mode\] \.placeholder-card \{/);
   assert.match(globalsCss, /background-image: none;/);
 });
 
-test("Dark Reader fallback disables blur and glow-heavy shadows", () => {
+test("Dark Reader fallback disables navigation blur", () => {
   assert.match(globalsCss, /html\[data-darkreader-mode\] \.nav-surface \{/);
   assert.match(
     globalsCss,
     /html\[data-darkreader-mode\] \.backdrop-blur-sm,\s*html\[data-darkreader-mode\] \.backdrop-blur-xl \{/,
   );
-  assert.match(
-    globalsCss,
-    /html\[data-darkreader-mode\] \.shadow-card,\s*html\[data-darkreader-mode\] \.shadow-card-lg,\s*html\[data-darkreader-mode\] \.btn-primary:active,\s*html\[data-darkreader-mode\] \.input-field:focus \{/,
-  );
 });
 
-test("Dark Reader fallback restores contrast for active nav items and accent badges", () => {
+test("Dark Reader fallback restores contrast for active nav items", () => {
   assert.match(globalsCss, /html\[data-darkreader-mode\] \.nav-link-active \{/);
-  assert.match(globalsCss, /html\[data-darkreader-mode\] \.badge-accent \{/);
   assert.match(globalsCss, /background-color: var\(--color-accent\);/);
   assert.match(globalsCss, /color: var\(--color-accent-fg\);/);
 });

From 58f7d5f2fe7696973b3d6dc6165e7db6cf1daa13 Mon Sep 17 00:00:00 2001
From: monte <hairs-immense4n@icloud.com>
Date: Tue, 2 Jun 2026 19:50:29 +0200
Subject: [PATCH 2/2] Adjust frost theme colors

---
 src/frontend/index.html                       | 2 +-
 src/frontend/src/components/layout/NavBar.tsx | 2 +-
 src/frontend/src/styles/globals.css           | 1 +
 3 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/frontend/index.html b/src/frontend/index.html
index 65a3b0e..0660c7a 100644
--- a/src/frontend/index.html
+++ b/src/frontend/index.html
@@ -24,7 +24,7 @@
             document.documentElement.dataset.theme = s;
             if (s === 'frost') {
               document.querySelector('meta[name="theme-color"]')
-                ?.setAttribute('content', '#141a2e');
+                ?.setAttribute('content', '#f8f9fc');
             }
           }
         } catch(e) {}
diff --git a/src/frontend/src/components/layout/NavBar.tsx b/src/frontend/src/components/layout/NavBar.tsx
index 87576b4..4449f6b 100644
--- a/src/frontend/src/components/layout/NavBar.tsx
+++ b/src/frontend/src/components/layout/NavBar.tsx
@@ -46,7 +46,7 @@ function applyTheme(theme: Theme) {
 
   const meta = document.querySelector('meta[name="theme-color"]');
   if (meta) {
-    meta.setAttribute("content", theme === "frost" ? "#141a2e" : "#1a2e1a");
+    meta.setAttribute("content", theme === "frost" ? "#f8f9fc" : "#1a2e1a");
   }
 
   try {
diff --git a/src/frontend/src/styles/globals.css b/src/frontend/src/styles/globals.css
index 1b08fed..bab1f06 100644
--- a/src/frontend/src/styles/globals.css
+++ b/src/frontend/src/styles/globals.css
@@ -72,6 +72,7 @@
 }
 
 [data-theme="frost"] {
+  color-scheme: light;
   --background: oklch(0.975 0.006 250);
   --foreground: oklch(0.18 0.02 255);
   --card: oklch(1 0 0);