diff --git a/ui/components.json b/ui/components.json
new file mode 100644
index 0000000..0b6231b
--- /dev/null
+++ b/ui/components.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "new-york",
+  "rsc": false,
+  "tsx": true,
+  "tailwind": {
+    "config": "",
+    "css": "src/styles/globals.css",
+    "baseColor": "neutral",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "iconLibrary": "lucide",
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  },
+  "registries": {}
+}
diff --git a/ui/package-lock.json b/ui/package-lock.json
index 6784b9f..b9af1ec 100644
--- a/ui/package-lock.json
+++ b/ui/package-lock.json
@@ -8,38 +8,53 @@
       "name": "autocoder",
       "version": "1.0.0",
       "dependencies": {
-        "@radix-ui/react-dialog": "^1.1.2",
-        "@radix-ui/react-dropdown-menu": "^2.1.2",
-        "@radix-ui/react-tooltip": "^1.1.3",
-        "@tanstack/react-query": "^5.60.0",
+        "@radix-ui/react-checkbox": "^1.3.3",
+        "@radix-ui/react-dialog": "^1.1.15",
+        "@radix-ui/react-dropdown-menu": "^2.1.16",
+        "@radix-ui/react-label": "^2.1.8",
+        "@radix-ui/react-popover": "^1.1.15",
+        "@radix-ui/react-radio-group": "^1.3.8",
+        "@radix-ui/react-scroll-area": "^1.2.10",
+        "@radix-ui/react-select": "^2.2.6",
+        "@radix-ui/react-separator": "^1.1.8",
+        "@radix-ui/react-slot": "^1.2.4",
+        "@radix-ui/react-switch": "^1.2.6",
+        "@radix-ui/react-tabs": "^1.1.13",
+        "@radix-ui/react-toggle": "^1.1.10",
+        "@radix-ui/react-tooltip": "^1.2.8",
+        "@tanstack/react-query": "^5.72.0",
         "@xterm/addon-fit": "^0.11.0",
         "@xterm/addon-web-links": "^0.12.0",
         "@xterm/xterm": "^6.0.0",
         "@xyflow/react": "^12.10.0",
         "canvas-confetti": "^1.9.4",
+        "class-variance-authority": "^0.7.1",
         "clsx": "^2.1.1",
         "dagre": "^0.8.5",
-        "lucide-react": "^0.460.0",
-        "react": "^18.3.1",
-        "react-dom": "^18.3.1"
+        "lucide-react": "^0.475.0",
+        "react": "^19.0.0",
+        "react-dom": "^19.0.0",
+        "tailwind-merge": "^3.4.0"
       },
       "devDependencies": {
-        "@eslint/js": "^9.13.0",
+        "@eslint/js": "^9.19.0",
         "@playwright/test": "^1.57.0",
-        "@tailwindcss/vite": "^4.0.0-beta.4",
+        "@tailwindcss/vite": "^4.1.0",
         "@types/canvas-confetti": "^1.9.0",
         "@types/dagre": "^0.7.53",
-        "@types/react": "^18.3.12",
-        "@types/react-dom": "^18.3.1",
-        "@vitejs/plugin-react": "^4.3.3",
-        "eslint": "^9.13.0",
-        "eslint-plugin-react-hooks": "^5.0.0",
-        "eslint-plugin-react-refresh": "^0.4.14",
-        "globals": "^15.11.0",
-        "tailwindcss": "^4.0.0-beta.4",
-        "typescript": "~5.6.2",
-        "typescript-eslint": "^8.11.0",
-        "vite": "^5.4.10"
+        "@types/node": "^22.12.0",
+        "@types/react": "^19.0.0",
+        "@types/react-dom": "^19.0.0",
+        "@vitejs/plugin-react": "^4.4.0",
+        "eslint": "^9.19.0",
+        "eslint-plugin-react-hooks": "^5.1.0",
+        "eslint-plugin-react-refresh": "^0.4.19",
+        "globals": "^15.14.0",
+        "tailwindcss": "^4.1.0",
+        "tw-animate-css": "^1.4.0",
+        "typescript": "~5.7.3",
+        "typescript-eslint": "^8.23.0",
+        "vite": "^7.3.0"
       }
     },
     "node_modules/@babel/code-frame": {
@@ -325,9 +340,9 @@
       }
     },
     "node_modules/@esbuild/aix-ppc64": {
-      "version": "0.21.5",
-      "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.21.5.tgz",
-      "integrity": "sha512-1SDgH6ZSPTlggy1yI6+Dbkiz8xzpHJEVAlF/AM1tHPLsf5STom9rwtjE4hKAF20FfXXNTFqEYXyJNWh1GiZedQ==",
+      "version": "0.27.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.27.2.tgz",
+      "integrity": "sha512-GZMB+a0mOMZs4MpDbj8RJp4cw+w1WV5NYD6xzgvzUJ5Ek2jerwfO2eADyI6ExDSUED+1X8aMbegahsJi+8mgpw==",
       "cpu": [
         "ppc64"
       ],
@@ -338,13 +353,13 @@
         "aix"
       ],
       "engines": {
-        "node": ">=12"
+        "node": ">=18"
       }
     },
     "node_modules/@esbuild/android-arm": {
-      "version": "0.21.5",
-      "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.21.5.tgz",
-      "integrity": "sha512-vCPvzSjpPHEi1siZdlvAlsPxXl7WbOVUBBAowWug4rJHb68Ox8KualB+1ocNvT5fjv6wpkX6o/iEpbDrf68zcg==",
+      "version": "0.27.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.27.2.tgz",
+      "integrity": "sha512-DVNI8jlPa7Ujbr1yjU2PfUSRtAUZPG9I1RwW4F4xFB1Imiu2on0ADiI/c3td+KmDtVKNbi+nffGDQMfcIMkwIA==",
       "cpu": [
         "arm"
       ],
@@ -355,13 +370,13 @@
         "android"
       ],
       "engines": {
-        "node": ">=12"
+        "node": ">=18"
       }
     },
     "node_modules/@esbuild/android-arm64": {
-      "version": "0.21.5",
-      "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.21.5.tgz",
-      "integrity": "sha512-c0uX9VAUBQ7dTDCjq+wdyGLowMdtR/GoC2U5IYk/7D1H1JYC0qseD7+11iMP2mRLN9RcCMRcjC4YMclCzGwS/A==",
+      "version": "0.27.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.27.2.tgz",
+      "integrity": "sha512-pvz8ZZ7ot/RBphf8fv60ljmaoydPU12VuXHImtAs0XhLLw+EXBi2BLe3OYSBslR4rryHvweW5gmkKFwTiFy6KA==",
       "cpu": [
         "arm64"
       ],
@@ -372,13 +387,13 @@
         "android"
       ],
       "engines": {
-        "node": ">=12"
+        "node": ">=18"
       }
     },
     "node_modules/@esbuild/android-x64": {
-      "version": "0.21.5",
-      "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.21.5.tgz",
-      "integrity": "sha512-D7aPRUUNHRBwHxzxRvp856rjUHRFW1SdQATKXH2hqA0kAZb1hKmi02OpYRacl0TxIGz/ZmXWlbZgjwWYaCakTA==",
+      "version": "0.27.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.27.2.tgz",
+      "integrity": "sha512-z8Ank4Byh4TJJOh4wpz8g2vDy75zFL0TlZlkUkEwYXuPSgX8yzep596n6mT7905kA9uHZsf/o2OJZubl2l3M7A==",
       "cpu": [
         "x64"
       ],
@@ -389,13 +404,13 @@
         "android"
       ],
       "engines": {
-        "node": ">=12"
+        "node": ">=18"
       }
     },
     "node_modules/@esbuild/darwin-arm64": {
-      "version": "0.21.5",
-      "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.21.5.tgz",
-      "integrity": "sha512-DwqXqZyuk5AiWWf3UfLiRDJ5EDd49zg6O9wclZ7kUMv2WRFr4HKjXp/5t8JZ11QbQfUS6/cRCKGwYhtNAY88kQ==",
+      "version": "0.27.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.27.2.tgz",
+      "integrity": "sha512-davCD2Zc80nzDVRwXTcQP/28fiJbcOwvdolL0sOiOsbwBa72kegmVU0Wrh1MYrbuCL98Omp5dVhQFWRKR2ZAlg==",
       "cpu": [
         "arm64"
       ],
@@ -406,13 +421,13 @@
         "darwin"
       ],
       "engines": {
-        "node": ">=12"
+        "node": ">=18"
       }
     },
     "node_modules/@esbuild/darwin-x64": {
-      "version": "0.21.5",
-      "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.21.5.tgz",
-      "integrity": "sha512-se/JjF8NlmKVG4kNIuyWMV/22ZaerB+qaSi5MdrXtd6R08kvs2qCN4C09miupktDitvh8jRFflwGFBQcxZRjbw==",
+      "version": "0.27.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.27.2.tgz",
+      "integrity": "sha512-ZxtijOmlQCBWGwbVmwOF/UCzuGIbUkqB1faQRf5akQmxRJ1ujusWsb3CVfk/9iZKr2L5SMU5wPBi1UWbvL+VQA==",
       "cpu": [
         "x64"
       ],
@@ -423,13 +438,13 @@
         "darwin"
       ],
       "engines": {
-        "node": ">=12"
+        "node": ">=18"
       }
     },
     "node_modules/@esbuild/freebsd-arm64": {
-      "version": "0.21.5",
-      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.21.5.tgz",
-      "integrity": "sha512-5JcRxxRDUJLX8JXp/wcBCy3pENnCgBR9bN6JsY4OmhfUtIHe3ZW0mawA7+RDAcMLrMIZaf03NlQiX9DGyB8h4g==",
+      "version": "0.27.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.27.2.tgz",
+      "integrity": "sha512-lS/9CN+rgqQ9czogxlMcBMGd+l8Q3Nj1MFQwBZJyoEKI50XGxwuzznYdwcav6lpOGv5BqaZXqvBSiB/kJ5op+g==",
       "cpu": [
         "arm64"
       ],
@@ -440,13 +455,13 @@
         "freebsd"
       ],
       "engines": {
-        "node": ">=12"
+        "node": ">=18"
       }
     },
     "node_modules/@esbuild/freebsd-x64": {
-      "version": "0.21.5",
-      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.21.5.tgz",
-      "integrity": "sha512-J95kNBj1zkbMXtHVH29bBriQygMXqoVQOQYA+ISs0/2l3T9/kj42ow2mpqerRBxDJnmkUDCaQT/dfNXWX/ZZCQ==",
+      "version": "0.27.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.27.2.tgz",
+      "integrity": "sha512-tAfqtNYb4YgPnJlEFu4c212HYjQWSO/w/h/lQaBK7RbwGIkBOuNKQI9tqWzx7Wtp7bTPaGC6MJvWI608P3wXYA==",
       "cpu": [
         "x64"
       ],
@@ -457,13 +472,13 @@
         "freebsd"
       ],
       "engines": {
-        "node": ">=12"
+        "node": ">=18"
       }
     },
     "node_modules/@esbuild/linux-arm": {
-      "version": "0.21.5",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.21.5.tgz",
-      "integrity": "sha512-bPb5AHZtbeNGjCKVZ9UGqGwo8EUu4cLq68E95A53KlxAPRmUyYv2D6F0uUI65XisGOL1hBP5mTronbgo+0bFcA==",
+      "version": "0.27.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.27.2.tgz",
+      "integrity": "sha512-vWfq4GaIMP9AIe4yj1ZUW18RDhx6EPQKjwe7n8BbIecFtCQG4CfHGaHuh7fdfq+y3LIA2vGS/o9ZBGVxIDi9hw==",
       "cpu": [
         "arm"
       ],
@@ -474,13 +489,13 @@
         "linux"
       ],
       "engines": {
-        "node": ">=12"
+        "node": ">=18"
       }
     },
     "node_modules/@esbuild/linux-arm64": {
-      "version": "0.21.5",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.21.5.tgz",
-      "integrity": "sha512-ibKvmyYzKsBeX8d8I7MH/TMfWDXBF3db4qM6sy+7re0YXya+K1cem3on9XgdT2EQGMu4hQyZhan7TeQ8XkGp4Q==",
+      "version": "0.27.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.27.2.tgz",
+      "integrity": "sha512-hYxN8pr66NsCCiRFkHUAsxylNOcAQaxSSkHMMjcpx0si13t1LHFphxJZUiGwojB1a/Hd5OiPIqDdXONia6bhTw==",
       "cpu": [
         "arm64"
       ],
@@ -491,13 +506,13 @@
         "linux"
       ],
       "engines": {
-        "node": ">=12"
+        "node": ">=18"
       }
     },
     "node_modules/@esbuild/linux-ia32": {
-      "version": "0.21.5",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.21.5.tgz",
-      "integrity": "sha512-YvjXDqLRqPDl2dvRODYmmhz4rPeVKYvppfGYKSNGdyZkA01046pLWyRKKI3ax8fbJoK5QbxblURkwK/MWY18Tg==",
+      "version": "0.27.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.27.2.tgz",
+      "integrity": "sha512-MJt5BRRSScPDwG2hLelYhAAKh9imjHK5+NE/tvnRLbIqUWa+0E9N4WNMjmp/kXXPHZGqPLxggwVhz7QP8CTR8w==",
       "cpu": [
         "ia32"
       ],
@@ -508,13 +523,13 @@
         "linux"
       ],
       "engines": {
-        "node": ">=12"
+        "node": ">=18"
       }
     },
     "node_modules/@esbuild/linux-loong64": {
-      "version": "0.21.5",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.21.5.tgz",
-      "integrity": "sha512-uHf1BmMG8qEvzdrzAqg2SIG/02+4/DHB6a9Kbya0XDvwDEKCoC8ZRWI5JJvNdUjtciBGFQ5PuBlpEOXQj+JQSg==",
+      "version": "0.27.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.27.2.tgz",
+      "integrity": "sha512-lugyF1atnAT463aO6KPshVCJK5NgRnU4yb3FUumyVz+cGvZbontBgzeGFO1nF+dPueHD367a2ZXe1NtUkAjOtg==",
       "cpu": [
         "loong64"
       ],
@@ -525,13 +540,13 @@
         "linux"
       ],
       "engines": {
-        "node": ">=12"
+        "node": ">=18"
       }
     },
     "node_modules/@esbuild/linux-mips64el": {
-      "version": "0.21.5",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.21.5.tgz",
-      "integrity": "sha512-IajOmO+KJK23bj52dFSNCMsz1QP1DqM6cwLUv3W1QwyxkyIWecfafnI555fvSGqEKwjMXVLokcV5ygHW5b3Jbg==",
+      "version": "0.27.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.27.2.tgz",
+      "integrity": "sha512-nlP2I6ArEBewvJ2gjrrkESEZkB5mIoaTswuqNFRv/WYd+ATtUpe9Y09RnJvgvdag7he0OWgEZWhviS1OTOKixw==",
       "cpu": [
         "mips64el"
       ],
@@ -542,13 +557,13 @@
         "linux"
       ],
       "engines": {
-        "node": ">=12"
+        "node": ">=18"
       }
     },
     "node_modules/@esbuild/linux-ppc64": {
-      "version": "0.21.5",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.21.5.tgz",
-      "integrity": "sha512-1hHV/Z4OEfMwpLO8rp7CvlhBDnjsC3CttJXIhBi+5Aj5r+MBvy4egg7wCbe//hSsT+RvDAG7s81tAvpL2XAE4w==",
+      "version": "0.27.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.27.2.tgz",
+      "integrity": "sha512-C92gnpey7tUQONqg1n6dKVbx3vphKtTHJaNG2Ok9lGwbZil6DrfyecMsp9CrmXGQJmZ7iiVXvvZH6Ml5hL6XdQ==",
       "cpu": [
         "ppc64"
       ],
@@ -559,13 +574,13 @@
         "linux"
       ],
       "engines": {
-        "node": ">=12"
+        "node": ">=18"
       }
     },
     "node_modules/@esbuild/linux-riscv64": {
-      "version": "0.21.5",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.21.5.tgz",
-      "integrity": "sha512-2HdXDMd9GMgTGrPWnJzP2ALSokE/0O5HhTUvWIbD3YdjME8JwvSCnNGBnTThKGEB91OZhzrJ4qIIxk/SBmyDDA==",
+      "version": "0.27.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.27.2.tgz",
+      "integrity": "sha512-B5BOmojNtUyN8AXlK0QJyvjEZkWwy/FKvakkTDCziX95AowLZKR6aCDhG7LeF7uMCXEJqwa8Bejz5LTPYm8AvA==",
       "cpu": [
         "riscv64"
       ],
@@ -576,13 +591,13 @@
         "linux"
       ],
       "engines": {
-        "node": ">=12"
+        "node": ">=18"
       }
     },
     "node_modules/@esbuild/linux-s390x": {
-      "version": "0.21.5",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.21.5.tgz",
-      "integrity": "sha512-zus5sxzqBJD3eXxwvjN1yQkRepANgxE9lgOW2qLnmr8ikMTphkjgXu1HR01K4FJg8h1kEEDAqDcZQtbrRnB41A==",
+      "version": "0.27.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.27.2.tgz",
+      "integrity": "sha512-p4bm9+wsPwup5Z8f4EpfN63qNagQ47Ua2znaqGH6bqLlmJ4bx97Y9JdqxgGZ6Y8xVTixUnEkoKSHcpRlDnNr5w==",
       "cpu": [
         "s390x"
       ],
@@ -593,13 +608,13 @@
         "linux"
       ],
       "engines": {
-        "node": ">=12"
+        "node": ">=18"
       }
     },
     "node_modules/@esbuild/linux-x64": {
-      "version": "0.21.5",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.21.5.tgz",
-      "integrity": "sha512-1rYdTpyv03iycF1+BhzrzQJCdOuAOtaqHTWJZCWvijKD2N5Xu0TtVC8/+1faWqcP9iBCWOmjmhoH94dH82BxPQ==",
+      "version": "0.27.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.27.2.tgz",
+      "integrity": "sha512-uwp2Tip5aPmH+NRUwTcfLb+W32WXjpFejTIOWZFw/v7/KnpCDKG66u4DLcurQpiYTiYwQ9B7KOeMJvLCu/OvbA==",
       "cpu": [
         "x64"
       ],
@@ -610,13 +625,30 @@
         "linux"
       ],
       "engines": {
-        "node": ">=12"
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/netbsd-arm64": {
+      "version": "0.27.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/netbsd-arm64/-/netbsd-arm64-0.27.2.tgz",
+      "integrity": "sha512-Kj6DiBlwXrPsCRDeRvGAUb/LNrBASrfqAIok+xB0LxK8CHqxZ037viF13ugfsIpePH93mX7xfJp97cyDuTZ3cw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "netbsd"
+      ],
+      "engines": {
+        "node": ">=18"
       }
     },
     "node_modules/@esbuild/netbsd-x64": {
-      "version": "0.21.5",
-      "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.21.5.tgz",
-      "integrity": "sha512-Woi2MXzXjMULccIwMnLciyZH4nCIMpWQAs049KEeMvOcNADVxo0UBIQPfSmxB3CWKedngg7sWZdLvLczpe0tLg==",
+      "version": "0.27.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.27.2.tgz",
+      "integrity": "sha512-HwGDZ0VLVBY3Y+Nw0JexZy9o/nUAWq9MlV7cahpaXKW6TOzfVno3y3/M8Ga8u8Yr7GldLOov27xiCnqRZf0tCA==",
       "cpu": [
         "x64"
       ],
@@ -627,13 +659,30 @@
         "netbsd"
       ],
       "engines": {
-        "node": ">=12"
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/openbsd-arm64": {
+      "version": "0.27.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-arm64/-/openbsd-arm64-0.27.2.tgz",
+      "integrity": "sha512-DNIHH2BPQ5551A7oSHD0CKbwIA/Ox7+78/AWkbS5QoRzaqlev2uFayfSxq68EkonB+IKjiuxBFoV8ESJy8bOHA==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "openbsd"
+      ],
+      "engines": {
+        "node": ">=18"
       }
     },
     "node_modules/@esbuild/openbsd-x64": {
-      "version": "0.21.5",
-      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.21.5.tgz",
-      "integrity": "sha512-HLNNw99xsvx12lFBUwoT8EVCsSvRNDVxNpjZ7bPn947b8gJPzeHWyNVhFsaerc0n3TsbOINvRP2byTZ5LKezow==",
+      "version": "0.27.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.27.2.tgz",
+      "integrity": "sha512-/it7w9Nb7+0KFIzjalNJVR5bOzA9Vay+yIPLVHfIQYG/j+j9VTH84aNB8ExGKPU4AzfaEvN9/V4HV+F+vo8OEg==",
       "cpu": [
         "x64"
       ],
@@ -644,13 +693,30 @@
         "openbsd"
       ],
       "engines": {
-        "node": ">=12"
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/openharmony-arm64": {
+      "version": "0.27.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/openharmony-arm64/-/openharmony-arm64-0.27.2.tgz",
+      "integrity": "sha512-LRBbCmiU51IXfeXk59csuX/aSaToeG7w48nMwA6049Y4J4+VbWALAuXcs+qcD04rHDuSCSRKdmY63sruDS5qag==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "openharmony"
+      ],
+      "engines": {
+        "node": ">=18"
       }
     },
     "node_modules/@esbuild/sunos-x64": {
-      "version": "0.21.5",
-      "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.21.5.tgz",
-      "integrity": "sha512-6+gjmFpfy0BHU5Tpptkuh8+uw3mnrvgs+dSPQXQOv3ekbordwnzTVEb4qnIvQcYXq6gzkyTnoZ9dZG+D4garKg==",
+      "version": "0.27.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.27.2.tgz",
+      "integrity": "sha512-kMtx1yqJHTmqaqHPAzKCAkDaKsffmXkPHThSfRwZGyuqyIeBvf08KSsYXl+abf5HDAPMJIPnbBfXvP2ZC2TfHg==",
       "cpu": [
         "x64"
       ],
@@ -661,13 +727,13 @@
         "sunos"
       ],
       "engines": {
-        "node": ">=12"
+        "node": ">=18"
       }
     },
     "node_modules/@esbuild/win32-arm64": {
-      "version": "0.21.5",
-      "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.21.5.tgz",
-      "integrity": "sha512-Z0gOTd75VvXqyq7nsl93zwahcTROgqvuAcYDUr+vOv8uHhNSKROyU961kgtCD1e95IqPKSQKH7tBTslnS3tA8A==",
+      "version": "0.27.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.27.2.tgz",
+      "integrity": "sha512-Yaf78O/B3Kkh+nKABUF++bvJv5Ijoy9AN1ww904rOXZFLWVc5OLOfL56W+C8F9xn5JQZa3UX6m+IktJnIb1Jjg==",
       "cpu": [
         "arm64"
       ],
@@ -678,13 +744,13 @@
         "win32"
       ],
       "engines": {
-        "node": ">=12"
+        "node": ">=18"
       }
     },
     "node_modules/@esbuild/win32-ia32": {
-      "version": "0.21.5",
-      "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.21.5.tgz",
-      "integrity": "sha512-SWXFF1CL2RVNMaVs+BBClwtfZSvDgtL//G/smwAc5oVK/UPu2Gu9tIaRgFmYFFKrmg3SyAjSrElf0TiJ1v8fYA==",
+      "version": "0.27.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.27.2.tgz",
+      "integrity": "sha512-Iuws0kxo4yusk7sw70Xa2E2imZU5HoixzxfGCdxwBdhiDgt9vX9VUCBhqcwY7/uh//78A1hMkkROMJq9l27oLQ==",
       "cpu": [
         "ia32"
       ],
@@ -695,13 +761,13 @@
         "win32"
       ],
       "engines": {
-        "node": ">=12"
+        "node": ">=18"
       }
     },
     "node_modules/@esbuild/win32-x64": {
-      "version": "0.21.5",
-      "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.21.5.tgz",
-      "integrity": "sha512-tQd/1efJuzPC6rCFwEvLtci/xNFcTZknmXs98FYDfGE4wP9ClFV98nyKrzJKVPMhdDnjzLhdUyMX4PsQAPjwIw==",
+      "version": "0.27.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.27.2.tgz",
+      "integrity": "sha512-sRdU18mcKf7F+YgheI/zGf5alZatMUTKj/jNS6l744f9u3WFu4v7twcUI9vu4mknF4Y9aDlblIie0IM+5xxaqQ==",
       "cpu": [
         "x64"
       ],
@@ -712,7 +778,7 @@
         "win32"
       ],
       "engines": {
-        "node": ">=12"
+        "node": ">=18"
       }
     },
     "node_modules/@eslint-community/eslint-utils": {
@@ -1027,6 +1093,12 @@
         "node": ">=18"
       }
     },
+    "node_modules/@radix-ui/number": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/number/-/number-1.1.1.tgz",
+      "integrity": "sha512-MkKCwxlXTgz6CFoJx3pCwn07GKp36+aZyu/u2Ln2VrA5DcdyCZkASEDBTd8x5whTQQL5CiYf4prXKLcgQdv29g==",
+      "license": "MIT"
+    },
     "node_modules/@radix-ui/primitive": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/@radix-ui/primitive/-/primitive-1.1.3.tgz",
@@ -1056,6 +1128,36 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-checkbox": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-checkbox/-/react-checkbox-1.3.3.tgz",
+      "integrity": "sha512-wBbpv+NQftHDdG86Qc0pIyXk5IR3tM8Vd0nWLKDcX8nNn4nXFOFwsKuqw2okA/1D/mpaAkmuyndrPJTYDNZtFw==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.3",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-presence": "1.1.5",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-use-controllable-state": "1.2.2",
+        "@radix-ui/react-use-previous": "1.1.1",
+        "@radix-ui/react-use-size": "1.1.1"
+      },
+      "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
+        }
+      }
+    },
     "node_modules/@radix-ui/react-collection": {
       "version": "1.1.7",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-collection/-/react-collection-1.1.7.tgz",
@@ -1082,6 +1184,24 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-collection/node_modules/@radix-ui/react-slot": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.2.3.tgz",
+      "integrity": "sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.2"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-compose-refs": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-compose-refs/-/react-compose-refs-1.1.2.tgz",
@@ -1148,6 +1268,24 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-dialog/node_modules/@radix-ui/react-slot": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.2.3.tgz",
+      "integrity": "sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.2"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-direction": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-direction/-/react-direction-1.1.1.tgz",
@@ -1277,6 +1415,52 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-label": {
+      "version": "2.1.8",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-label/-/react-label-2.1.8.tgz",
+      "integrity": "sha512-FmXs37I6hSBVDlO4y764TNz1rLgKwjJMQ0EGte6F3Cb3f4bIuHB/iLa/8I9VKkmOy+gNHq8rql3j686ACVV21A==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-primitive": "2.1.4"
+      },
+      "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
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-label/node_modules/@radix-ui/react-primitive": {
+      "version": "2.1.4",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-2.1.4.tgz",
+      "integrity": "sha512-9hQc4+GNVtJAIEPEqlYqW5RiYdrr8ea5XQ0ZOnD6fgru+83kqT15mq2OCcbe8KnjRZl5vF3ks69AKz3kh1jrhg==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-slot": "1.2.4"
+      },
+      "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
+        }
+      }
+    },
     "node_modules/@radix-ui/react-menu": {
       "version": "2.1.16",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-menu/-/react-menu-2.1.16.tgz",
@@ -1317,6 +1501,79 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-menu/node_modules/@radix-ui/react-slot": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.2.3.tgz",
+      "integrity": "sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.2"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-popover": {
+      "version": "1.1.15",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-popover/-/react-popover-1.1.15.tgz",
+      "integrity": "sha512-kr0X2+6Yy/vJzLYJUPCZEc8SfQcf+1COFoAqauJm74umQhta9M7lNJHP7QQS3vkvcGLQUbWpMzwrXYwrYztHKA==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.3",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-dismissable-layer": "1.1.11",
+        "@radix-ui/react-focus-guards": "1.1.3",
+        "@radix-ui/react-focus-scope": "1.1.7",
+        "@radix-ui/react-id": "1.1.1",
+        "@radix-ui/react-popper": "1.2.8",
+        "@radix-ui/react-portal": "1.1.9",
+        "@radix-ui/react-presence": "1.1.5",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-slot": "1.2.3",
+        "@radix-ui/react-use-controllable-state": "1.2.2",
+        "aria-hidden": "^1.2.4",
+        "react-remove-scroll": "^2.6.3"
+      },
+      "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
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-popover/node_modules/@radix-ui/react-slot": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.2.3.tgz",
+      "integrity": "sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.2"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-popper": {
       "version": "1.2.8",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-popper/-/react-popper-1.2.8.tgz",
@@ -1420,6 +1677,56 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-primitive/node_modules/@radix-ui/react-slot": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.2.3.tgz",
+      "integrity": "sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.2"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-radio-group": {
+      "version": "1.3.8",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-radio-group/-/react-radio-group-1.3.8.tgz",
+      "integrity": "sha512-VBKYIYImA5zsxACdisNQ3BjCBfmbGH3kQlnFVqlWU4tXwjy7cGX8ta80BcrO+WJXIn5iBylEH3K6ZTlee//lgQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.3",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-direction": "1.1.1",
+        "@radix-ui/react-presence": "1.1.5",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-roving-focus": "1.1.11",
+        "@radix-ui/react-use-controllable-state": "1.2.2",
+        "@radix-ui/react-use-previous": "1.1.1",
+        "@radix-ui/react-use-size": "1.1.1"
+      },
+      "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
+        }
+      }
+    },
     "node_modules/@radix-ui/react-roving-focus": {
       "version": "1.1.11",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-roving-focus/-/react-roving-focus-1.1.11.tgz",
@@ -1451,7 +1758,81 @@
         }
       }
     },
-    "node_modules/@radix-ui/react-slot": {
+    "node_modules/@radix-ui/react-scroll-area": {
+      "version": "1.2.10",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-scroll-area/-/react-scroll-area-1.2.10.tgz",
+      "integrity": "sha512-tAXIa1g3sM5CGpVT0uIbUx/U3Gs5N8T52IICuCtObaos1S8fzsrPXG5WObkQN3S6NVl6wKgPhAIiBGbWnvc97A==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/number": "1.1.1",
+        "@radix-ui/primitive": "1.1.3",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-direction": "1.1.1",
+        "@radix-ui/react-presence": "1.1.5",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-use-callback-ref": "1.1.1",
+        "@radix-ui/react-use-layout-effect": "1.1.1"
+      },
+      "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
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-select": {
+      "version": "2.2.6",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-select/-/react-select-2.2.6.tgz",
+      "integrity": "sha512-I30RydO+bnn2PQztvo25tswPH+wFBjehVGtmagkU78yMdwTwVf12wnAOF+AeP8S2N8xD+5UPbGhkUfPyvT+mwQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/number": "1.1.1",
+        "@radix-ui/primitive": "1.1.3",
+        "@radix-ui/react-collection": "1.1.7",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-direction": "1.1.1",
+        "@radix-ui/react-dismissable-layer": "1.1.11",
+        "@radix-ui/react-focus-guards": "1.1.3",
+        "@radix-ui/react-focus-scope": "1.1.7",
+        "@radix-ui/react-id": "1.1.1",
+        "@radix-ui/react-popper": "1.2.8",
+        "@radix-ui/react-portal": "1.1.9",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-slot": "1.2.3",
+        "@radix-ui/react-use-callback-ref": "1.1.1",
+        "@radix-ui/react-use-controllable-state": "1.2.2",
+        "@radix-ui/react-use-layout-effect": "1.1.1",
+        "@radix-ui/react-use-previous": "1.1.1",
+        "@radix-ui/react-visually-hidden": "1.2.3",
+        "aria-hidden": "^1.2.4",
+        "react-remove-scroll": "^2.6.3"
+      },
+      "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
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-select/node_modules/@radix-ui/react-slot": {
       "version": "1.2.3",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.2.3.tgz",
       "integrity": "sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A==",
@@ -1469,6 +1850,154 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-separator": {
+      "version": "1.1.8",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-separator/-/react-separator-1.1.8.tgz",
+      "integrity": "sha512-sDvqVY4itsKwwSMEe0jtKgfTh+72Sy3gPmQpjqcQneqQ4PFmr/1I0YA+2/puilhggCe2gJcx5EBAYFkWkdpa5g==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-primitive": "2.1.4"
+      },
+      "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
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-separator/node_modules/@radix-ui/react-primitive": {
+      "version": "2.1.4",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-2.1.4.tgz",
+      "integrity": "sha512-9hQc4+GNVtJAIEPEqlYqW5RiYdrr8ea5XQ0ZOnD6fgru+83kqT15mq2OCcbe8KnjRZl5vF3ks69AKz3kh1jrhg==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-slot": "1.2.4"
+      },
+      "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
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-slot": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.2.4.tgz",
+      "integrity": "sha512-Jl+bCv8HxKnlTLVrcDE8zTMJ09R9/ukw4qBs/oZClOfoQk/cOTbDn+NceXfV7j09YPVQUryJPHurafcSg6EVKA==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.2"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-switch": {
+      "version": "1.2.6",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-switch/-/react-switch-1.2.6.tgz",
+      "integrity": "sha512-bByzr1+ep1zk4VubeEVViV592vu2lHE2BZY5OnzehZqOOgogN80+mNtCqPkhn2gklJqOpxWgPoYTSnhBCqpOXQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.3",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-use-controllable-state": "1.2.2",
+        "@radix-ui/react-use-previous": "1.1.1",
+        "@radix-ui/react-use-size": "1.1.1"
+      },
+      "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
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-tabs": {
+      "version": "1.1.13",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-tabs/-/react-tabs-1.1.13.tgz",
+      "integrity": "sha512-7xdcatg7/U+7+Udyoj2zodtI9H/IIopqo+YOIcZOq1nJwXWBZ9p8xiu5llXlekDbZkca79a/fozEYQXIA4sW6A==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.3",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-direction": "1.1.1",
+        "@radix-ui/react-id": "1.1.1",
+        "@radix-ui/react-presence": "1.1.5",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-roving-focus": "1.1.11",
+        "@radix-ui/react-use-controllable-state": "1.2.2"
+      },
+      "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
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-toggle": {
+      "version": "1.1.10",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-toggle/-/react-toggle-1.1.10.tgz",
+      "integrity": "sha512-lS1odchhFTeZv3xwHH31YPObmJn8gOg7Lq12inrr0+BH/l3Tsq32VfjqH1oh80ARM3mlkfMic15n0kg4sD1poQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.3",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-use-controllable-state": "1.2.2"
+      },
+      "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
+        }
+      }
+    },
     "node_modules/@radix-ui/react-tooltip": {
       "version": "1.2.8",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-tooltip/-/react-tooltip-1.2.8.tgz",
@@ -1503,6 +2032,24 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-tooltip/node_modules/@radix-ui/react-slot": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.2.3.tgz",
+      "integrity": "sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.2"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-use-callback-ref": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-1.1.1.tgz",
@@ -1588,6 +2135,21 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-use-previous": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-previous/-/react-use-previous-1.1.1.tgz",
+      "integrity": "sha512-2dHfToCj/pzca2Ck724OZ5L0EVrr3eHRNsG/b3xQJLA2hZpVCS99bLAX+hm1IHXDEnzU6by5z/5MIY794/a8NQ==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-use-rect": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-use-rect/-/react-use-rect-1.1.1.tgz",
@@ -2448,32 +3010,34 @@
       "dev": true,
       "license": "MIT"
     },
-    "node_modules/@types/prop-types": {
-      "version": "15.7.15",
-      "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.15.tgz",
-      "integrity": "sha512-F6bEyamV9jKGAFBEmlQnesRPGOQqS2+Uwi0Em15xenOxHaf2hv6L8YCVn3rPdPJOiJfPiCnLIRyvwVaqMY3MIw==",
-      "devOptional": true,
-      "license": "MIT"
-    },
-    "node_modules/@types/react": {
-      "version": "18.3.27",
-      "resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.27.tgz",
-      "integrity": "sha512-cisd7gxkzjBKU2GgdYrTdtQx1SORymWyaAFhaxQPK9bYO9ot3Y5OikQRvY0VYQtvwjeQnizCINJAenh/V7MK2w==",
-      "devOptional": true,
+    "node_modules/@types/node": {
+      "version": "22.19.7",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-22.19.7.tgz",
+      "integrity": "sha512-MciR4AKGHWl7xwxkBa6xUGxQJ4VBOmPTF7sL+iGzuahOFaO0jHCsuEfS80pan1ef4gWId1oWOweIhrDEYLuaOw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "undici-types": "~6.21.0"
+      }
+    },
+    "node_modules/@types/react": {
+      "version": "19.2.9",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-19.2.9.tgz",
+      "integrity": "sha512-Lpo8kgb/igvMIPeNV2rsYKTgaORYdO1XGVZ4Qz3akwOj0ySGYMPlQWa8BaLn0G63D1aSaAQ5ldR06wCpChQCjA==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@types/prop-types": "*",
         "csstype": "^3.2.2"
       }
     },
     "node_modules/@types/react-dom": {
-      "version": "18.3.7",
-      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.3.7.tgz",
-      "integrity": "sha512-MEe3UeoENYVFXzoXEWsvcpg6ZvlrFNlOQ7EOsvhI3CfAXwzPfO8Qwuxd40nepsYKqyyVQnTdEfv68q91yLcKrQ==",
-      "devOptional": true,
+      "version": "19.2.3",
+      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-19.2.3.tgz",
+      "integrity": "sha512-jp2L/eY6fn+KgVVQAOqYItbF0VY/YApe5Mz2F0aykSO8gx31bYCZyvSeYxCHKvzHG5eZjc+zyaS5BrBWya2+kQ==",
+      "dev": true,
       "license": "MIT",
       "peerDependencies": {
-        "@types/react": "^18.0.0"
+        "@types/react": "^19.2.0"
       }
     },
     "node_modules/@typescript-eslint/eslint-plugin": {
@@ -3014,6 +3578,18 @@
         "url": "https://github.com/chalk/chalk?sponsor=1"
       }
     },
+    "node_modules/class-variance-authority": {
+      "version": "0.7.1",
+      "resolved": "https://registry.npmjs.org/class-variance-authority/-/class-variance-authority-0.7.1.tgz",
+      "integrity": "sha512-Ka+9Trutv7G8M6WT6SeiRWz792K5qEqIGEGzXKhAE6xOWAY6pPH8U+9IY3oCMv6kqTmLsv7Xh/2w2RigkePMsg==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "clsx": "^2.1.1"
+      },
+      "funding": {
+        "url": "https://polar.sh/cva"
+      }
+    },
     "node_modules/classcat": {
       "version": "5.0.5",
       "resolved": "https://registry.npmjs.org/classcat/-/classcat-5.0.5.tgz",
@@ -3082,7 +3658,7 @@
       "version": "3.2.3",
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.2.3.tgz",
       "integrity": "sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT"
     },
     "node_modules/d3-color": {
@@ -3263,9 +3839,9 @@
       }
     },
     "node_modules/esbuild": {
-      "version": "0.21.5",
-      "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.21.5.tgz",
-      "integrity": "sha512-mg3OPMV4hXywwpoDxu3Qda5xCKQi+vCTZq8S9J/EpkhB2HzKXq4SNFZE3+NK93JYxc8VMSep+lOUSC/RVKaBqw==",
+      "version": "0.27.2",
+      "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.27.2.tgz",
+      "integrity": "sha512-HyNQImnsOC7X9PMNaCIeAm4ISCQXs5a5YasTXVliKv4uuBo1dKrG0A+uQS8M5eXjVMnLg3WgXaKvprHlFJQffw==",
       "dev": true,
       "hasInstallScript": true,
       "license": "MIT",
@@ -3273,32 +3849,35 @@
         "esbuild": "bin/esbuild"
       },
       "engines": {
-        "node": ">=12"
+        "node": ">=18"
       },
       "optionalDependencies": {
-        "@esbuild/aix-ppc64": "0.21.5",
-        "@esbuild/android-arm": "0.21.5",
-        "@esbuild/android-arm64": "0.21.5",
-        "@esbuild/android-x64": "0.21.5",
-        "@esbuild/darwin-arm64": "0.21.5",
-        "@esbuild/darwin-x64": "0.21.5",
-        "@esbuild/freebsd-arm64": "0.21.5",
-        "@esbuild/freebsd-x64": "0.21.5",
-        "@esbuild/linux-arm": "0.21.5",
-        "@esbuild/linux-arm64": "0.21.5",
-        "@esbuild/linux-ia32": "0.21.5",
-        "@esbuild/linux-loong64": "0.21.5",
-        "@esbuild/linux-mips64el": "0.21.5",
-        "@esbuild/linux-ppc64": "0.21.5",
-        "@esbuild/linux-riscv64": "0.21.5",
-        "@esbuild/linux-s390x": "0.21.5",
-        "@esbuild/linux-x64": "0.21.5",
-        "@esbuild/netbsd-x64": "0.21.5",
-        "@esbuild/openbsd-x64": "0.21.5",
-        "@esbuild/sunos-x64": "0.21.5",
-        "@esbuild/win32-arm64": "0.21.5",
-        "@esbuild/win32-ia32": "0.21.5",
-        "@esbuild/win32-x64": "0.21.5"
+        "@esbuild/aix-ppc64": "0.27.2",
+        "@esbuild/android-arm": "0.27.2",
+        "@esbuild/android-arm64": "0.27.2",
+        "@esbuild/android-x64": "0.27.2",
+        "@esbuild/darwin-arm64": "0.27.2",
+        "@esbuild/darwin-x64": "0.27.2",
+        "@esbuild/freebsd-arm64": "0.27.2",
+        "@esbuild/freebsd-x64": "0.27.2",
+        "@esbuild/linux-arm": "0.27.2",
+        "@esbuild/linux-arm64": "0.27.2",
+        "@esbuild/linux-ia32": "0.27.2",
+        "@esbuild/linux-loong64": "0.27.2",
+        "@esbuild/linux-mips64el": "0.27.2",
+        "@esbuild/linux-ppc64": "0.27.2",
+        "@esbuild/linux-riscv64": "0.27.2",
+        "@esbuild/linux-s390x": "0.27.2",
+        "@esbuild/linux-x64": "0.27.2",
+        "@esbuild/netbsd-arm64": "0.27.2",
+        "@esbuild/netbsd-x64": "0.27.2",
+        "@esbuild/openbsd-arm64": "0.27.2",
+        "@esbuild/openbsd-x64": "0.27.2",
+        "@esbuild/openharmony-arm64": "0.27.2",
+        "@esbuild/sunos-x64": "0.27.2",
+        "@esbuild/win32-arm64": "0.27.2",
+        "@esbuild/win32-ia32": "0.27.2",
+        "@esbuild/win32-x64": "0.27.2"
       }
     },
     "node_modules/escalade": {
@@ -3758,6 +4337,7 @@
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
       "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==",
+      "dev": true,
       "license": "MIT"
     },
     "node_modules/js-yaml": {
@@ -4134,18 +4714,6 @@
       "dev": true,
       "license": "MIT"
     },
-    "node_modules/loose-envify": {
-      "version": "1.4.0",
-      "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
-      "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==",
-      "license": "MIT",
-      "dependencies": {
-        "js-tokens": "^3.0.0 || ^4.0.0"
-      },
-      "bin": {
-        "loose-envify": "cli.js"
-      }
-    },
     "node_modules/lru-cache": {
       "version": "5.1.1",
       "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-5.1.1.tgz",
@@ -4157,12 +4725,12 @@
       }
     },
     "node_modules/lucide-react": {
-      "version": "0.460.0",
-      "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.460.0.tgz",
-      "integrity": "sha512-BVtq/DykVeIvRTJvRAgCsOwaGL8Un3Bxh8MbDxMhEWlZay3T4IpEKDEpwt5KZ0KJMHzgm6jrltxlT5eXOWXDHg==",
+      "version": "0.475.0",
+      "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.475.0.tgz",
+      "integrity": "sha512-NJzvVu1HwFVeZ+Gwq2q00KygM1aBhy/ZrhY9FsAgJtpB+E4R7uxRk9M2iKvHa6/vNxZydIB59htha4c2vvwvVg==",
       "license": "ISC",
       "peerDependencies": {
-        "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0-rc"
+        "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0"
       }
     },
     "node_modules/magic-string": {
@@ -4425,28 +4993,24 @@
       }
     },
     "node_modules/react": {
-      "version": "18.3.1",
-      "resolved": "https://registry.npmjs.org/react/-/react-18.3.1.tgz",
-      "integrity": "sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==",
+      "version": "19.2.3",
+      "resolved": "https://registry.npmjs.org/react/-/react-19.2.3.tgz",
+      "integrity": "sha512-Ku/hhYbVjOQnXDZFv2+RibmLFGwFdeeKHFcOTlrt7xplBnya5OGn/hIRDsqDiSUcfORsDC7MPxwork8jBwsIWA==",
       "license": "MIT",
-      "dependencies": {
-        "loose-envify": "^1.1.0"
-      },
       "engines": {
         "node": ">=0.10.0"
       }
     },
     "node_modules/react-dom": {
-      "version": "18.3.1",
-      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz",
-      "integrity": "sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==",
+      "version": "19.2.3",
+      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.2.3.tgz",
+      "integrity": "sha512-yELu4WmLPw5Mr/lmeEpox5rw3RETacE++JgHqQzd2dg+YbJuat3jH4ingc+WPZhxaoFzdv9y33G+F7Nl5O0GBg==",
       "license": "MIT",
       "dependencies": {
-        "loose-envify": "^1.1.0",
-        "scheduler": "^0.23.2"
+        "scheduler": "^0.27.0"
       },
       "peerDependencies": {
-        "react": "^18.3.1"
+        "react": "^19.2.3"
       }
     },
     "node_modules/react-refresh": {
@@ -4581,13 +5145,10 @@
       }
     },
     "node_modules/scheduler": {
-      "version": "0.23.2",
-      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.2.tgz",
-      "integrity": "sha512-UOShsPwz7NrMUqhR6t0hWjFduvOzbtv7toDH1/hIrfRNIDBnnBWd0CwJTGvTpngVlmwGCdP9/Zl/tVrDqcuYzQ==",
-      "license": "MIT",
-      "dependencies": {
-        "loose-envify": "^1.1.0"
-      }
+      "version": "0.27.0",
+      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.27.0.tgz",
+      "integrity": "sha512-eNv+WrVbKu1f3vbYJT/xtiF5syA5HPIMtf9IgY/nKg0sWqzAUEvqY/xm7OcZc/qafLx/iO9FgOmeSAp4v5ti/Q==",
+      "license": "MIT"
     },
     "node_modules/semver": {
       "version": "6.3.1",
@@ -4658,6 +5219,16 @@
         "node": ">=8"
       }
     },
+    "node_modules/tailwind-merge": {
+      "version": "3.4.0",
+      "resolved": "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-3.4.0.tgz",
+      "integrity": "sha512-uSaO4gnW+b3Y2aWoWfFpX62vn2sR3skfhbjsEnaBI81WD1wBLlHZe5sWf0AqjksNdYTbGBEd0UasQMT3SNV15g==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/dcastil"
+      }
+    },
     "node_modules/tailwindcss": {
       "version": "4.1.18",
       "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.1.18.tgz",
@@ -4715,6 +5286,16 @@
       "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
       "license": "0BSD"
     },
+    "node_modules/tw-animate-css": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/tw-animate-css/-/tw-animate-css-1.4.0.tgz",
+      "integrity": "sha512-7bziOlRqH0hJx80h/3mbicLW7o8qLsH5+RaLR2t+OHM3D0JlWGODQKQ4cxbK7WlvmUxpcj6Kgu6EKqjrGFe3QQ==",
+      "dev": true,
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/Wombosvideo"
+      }
+    },
     "node_modules/type-check": {
       "version": "0.4.0",
       "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz",
@@ -4729,9 +5310,9 @@
       }
     },
     "node_modules/typescript": {
-      "version": "5.6.3",
-      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.6.3.tgz",
-      "integrity": "sha512-hjcS1mhfuyi4WW8IWtjP7brDrG2cuDZukyrYrSauoXGNgx0S7zceP07adYkJycEr56BOUTNPzbInooiN3fn1qw==",
+      "version": "5.7.3",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.7.3.tgz",
+      "integrity": "sha512-84MVSjMEHP+FQRPy3pX9sTVV/INIex71s9TL2Gm5FG/WG1SqXeKyZ0k7/blY/4FdOzI12CBy1vGc4og/eus0fw==",
       "dev": true,
       "license": "Apache-2.0",
       "bin": {
@@ -4766,6 +5347,13 @@
         "typescript": ">=4.8.4 <6.0.0"
       }
     },
+    "node_modules/undici-types": {
+      "version": "6.21.0",
+      "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-6.21.0.tgz",
+      "integrity": "sha512-iwDZqg0QAGrg9Rav5H4n0M64c3mkR59cJ6wQp+7C4nI0gsmExaedaYLNO44eT4AtBBwjbTiGPMlt2Md0T9H9JQ==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/update-browserslist-db": {
       "version": "1.2.3",
       "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.2.3.tgz",
@@ -4860,21 +5448,24 @@
       }
     },
     "node_modules/vite": {
-      "version": "5.4.21",
-      "resolved": "https://registry.npmjs.org/vite/-/vite-5.4.21.tgz",
-      "integrity": "sha512-o5a9xKjbtuhY6Bi5S3+HvbRERmouabWbyUcpXXUA1u+GNUKoROi9byOJ8M0nHbHYHkYICiMlqxkg1KkYmm25Sw==",
+      "version": "7.3.1",
+      "resolved": "https://registry.npmjs.org/vite/-/vite-7.3.1.tgz",
+      "integrity": "sha512-w+N7Hifpc3gRjZ63vYBXA56dvvRlNWRczTdmCBBa+CotUzAPf5b7YMdMR/8CQoeYE5LX3W4wj6RYTgonm1b9DA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "esbuild": "^0.21.3",
-        "postcss": "^8.4.43",
-        "rollup": "^4.20.0"
+        "esbuild": "^0.27.0",
+        "fdir": "^6.5.0",
+        "picomatch": "^4.0.3",
+        "postcss": "^8.5.6",
+        "rollup": "^4.43.0",
+        "tinyglobby": "^0.2.15"
       },
       "bin": {
         "vite": "bin/vite.js"
       },
       "engines": {
-        "node": "^18.0.0 || >=20.0.0"
+        "node": "^20.19.0 || >=22.12.0"
       },
       "funding": {
         "url": "https://github.com/vitejs/vite?sponsor=1"
@@ -4883,19 +5474,25 @@
         "fsevents": "~2.3.3"
       },
       "peerDependencies": {
-        "@types/node": "^18.0.0 || >=20.0.0",
-        "less": "*",
+        "@types/node": "^20.19.0 || >=22.12.0",
+        "jiti": ">=1.21.0",
+        "less": "^4.0.0",
         "lightningcss": "^1.21.0",
-        "sass": "*",
-        "sass-embedded": "*",
-        "stylus": "*",
-        "sugarss": "*",
-        "terser": "^5.4.0"
+        "sass": "^1.70.0",
+        "sass-embedded": "^1.70.0",
+        "stylus": ">=0.54.8",
+        "sugarss": "^5.0.0",
+        "terser": "^5.16.0",
+        "tsx": "^4.8.1",
+        "yaml": "^2.4.2"
       },
       "peerDependenciesMeta": {
         "@types/node": {
           "optional": true
         },
+        "jiti": {
+          "optional": true
+        },
         "less": {
           "optional": true
         },
@@ -4916,6 +5513,12 @@
         },
         "terser": {
           "optional": true
+        },
+        "tsx": {
+          "optional": true
+        },
+        "yaml": {
+          "optional": true
         }
       }
     },
diff --git a/ui/package.json b/ui/package.json
index 6226472..f70b9ca 100644
--- a/ui/package.json
+++ b/ui/package.json
@@ -12,37 +12,52 @@
     "test:e2e:ui": "playwright test --ui"
   },
   "dependencies": {
-    "@radix-ui/react-dialog": "^1.1.2",
-    "@radix-ui/react-dropdown-menu": "^2.1.2",
-    "@radix-ui/react-tooltip": "^1.1.3",
-    "@tanstack/react-query": "^5.60.0",
+    "@radix-ui/react-checkbox": "^1.3.3",
+    "@radix-ui/react-dialog": "^1.1.15",
+    "@radix-ui/react-dropdown-menu": "^2.1.16",
+    "@radix-ui/react-label": "^2.1.8",
+    "@radix-ui/react-popover": "^1.1.15",
+    "@radix-ui/react-radio-group": "^1.3.8",
+    "@radix-ui/react-scroll-area": "^1.2.10",
+    "@radix-ui/react-select": "^2.2.6",
+    "@radix-ui/react-separator": "^1.1.8",
+    "@radix-ui/react-slot": "^1.2.4",
+    "@radix-ui/react-switch": "^1.2.6",
+    "@radix-ui/react-tabs": "^1.1.13",
+    "@radix-ui/react-toggle": "^1.1.10",
+    "@radix-ui/react-tooltip": "^1.2.8",
+    "@tanstack/react-query": "^5.72.0",
     "@xterm/addon-fit": "^0.11.0",
     "@xterm/addon-web-links": "^0.12.0",
     "@xterm/xterm": "^6.0.0",
     "@xyflow/react": "^12.10.0",
     "canvas-confetti": "^1.9.4",
+    "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "dagre": "^0.8.5",
-    "lucide-react": "^0.460.0",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1"
+    "lucide-react": "^0.475.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "tailwind-merge": "^3.4.0"
   },
   "devDependencies": {
-    "@eslint/js": "^9.13.0",
+    "@eslint/js": "^9.19.0",
     "@playwright/test": "^1.57.0",
-    "@tailwindcss/vite": "^4.0.0-beta.4",
+    "@tailwindcss/vite": "^4.1.0",
     "@types/canvas-confetti": "^1.9.0",
     "@types/dagre": "^0.7.53",
-    "@types/react": "^18.3.12",
-    "@types/react-dom": "^18.3.1",
-    "@vitejs/plugin-react": "^4.3.3",
-    "eslint": "^9.13.0",
-    "eslint-plugin-react-hooks": "^5.0.0",
-    "eslint-plugin-react-refresh": "^0.4.14",
-    "globals": "^15.11.0",
-    "tailwindcss": "^4.0.0-beta.4",
-    "typescript": "~5.6.2",
-    "typescript-eslint": "^8.11.0",
-    "vite": "^5.4.10"
+    "@types/node": "^22.12.0",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "@vitejs/plugin-react": "^4.4.0",
+    "eslint": "^9.19.0",
+    "eslint-plugin-react-hooks": "^5.1.0",
+    "eslint-plugin-react-refresh": "^0.4.19",
+    "globals": "^15.14.0",
+    "tailwindcss": "^4.1.0",
+    "tw-animate-css": "^1.4.0",
+    "typescript": "~5.7.3",
+    "typescript-eslint": "^8.23.0",
+    "vite": "^7.3.0"
   }
 }
diff --git a/ui/src/App.tsx b/ui/src/App.tsx
index 0483ab7..5794285 100644
--- a/ui/src/App.tsx
+++ b/ui/src/App.tsx
@@ -27,6 +27,9 @@ import { KeyboardShortcutsHelp } from './components/KeyboardShortcutsHelp'
 import { getDependencyGraph } from './lib/api'
 import { Loader2, Settings, Moon, Sun } from 'lucide-react'
 import type { Feature } from './lib/types'
+import { Button } from '@/components/ui/button'
+import { Card, CardContent } from '@/components/ui/card'
+import { Badge } from '@/components/ui/badge'
 
 const STORAGE_KEY = 'autocoder-selected-project'
 const DARK_MODE_KEY = 'autocoder-dark-mode'
@@ -256,9 +259,9 @@ function App() {
   }
 
   return (
-    <div className="min-h-screen bg-neo-bg">
+    <div className="min-h-screen bg-background">
       {/* Header */}
-      <header className="bg-neo-card text-neo-text border-b-4 border-neo-border">
+      <header className="bg-card text-foreground border-b-2 border-border">
         <div className="max-w-7xl mx-auto px-4 py-4">
           <div className="flex items-center justify-between">
             {/* Logo and Title */}
@@ -289,47 +292,49 @@ function App() {
                     url={wsState.devServerUrl}
                   />
 
-                  <button
+                  <Button
                     onClick={() => setShowSettings(true)}
-                    className="neo-btn text-sm py-2 px-3"
+                    variant="outline"
+                    size="sm"
                     title="Settings (,)"
                     aria-label="Open Settings"
                   >
                     <Settings size={18} />
-                  </button>
+                  </Button>
 
                   {/* Ollama Mode Indicator */}
                   {settings?.ollama_mode && (
                     <div
-                      className="flex items-center gap-1.5 px-2 py-1 bg-white rounded border-2 border-neo-border shadow-neo-sm"
+                      className="flex items-center gap-1.5 px-2 py-1 bg-card rounded border-2 border-border shadow-sm"
                       title="Using Ollama local models (configured via .env)"
                     >
                       <img src="/ollama.png" alt="Ollama" className="w-5 h-5" />
-                      <span className="text-xs font-bold text-neo-text">Ollama</span>
+                      <span className="text-xs font-bold text-foreground">Ollama</span>
                     </div>
                   )}
 
                   {/* GLM Mode Badge */}
                   {settings?.glm_mode && (
-                    <span
-                      className="px-2 py-1 text-xs font-bold bg-[var(--color-neo-glm)] text-white rounded border-2 border-neo-border shadow-neo-sm"
+                    <Badge
+                      className="bg-purple-500 text-white hover:bg-purple-600"
                       title="Using GLM API (configured via .env)"
                     >
                       GLM
-                    </span>
+                    </Badge>
                   )}
                 </>
               )}
 
               {/* Dark mode toggle - always visible */}
-              <button
+              <Button
                 onClick={() => setDarkMode(!darkMode)}
-                className="neo-btn text-sm py-2 px-3"
+                variant="outline"
+                size="sm"
                 title="Toggle dark mode"
                 aria-label="Toggle dark mode"
               >
                 {darkMode ? <Sun size={18} /> : <Moon size={18} />}
-              </button>
+              </Button>
             </div>
           </div>
         </div>
@@ -341,11 +346,11 @@ function App() {
         style={{ paddingBottom: debugOpen ? debugPanelHeight + 32 : undefined }}
       >
         {!selectedProject ? (
-          <div className="neo-empty-state mt-12">
+          <div className="text-center mt-12">
             <h2 className="font-display text-2xl font-bold mb-2">
               Welcome to AutoCoder
             </h2>
-            <p className="text-neo-text-secondary mb-4">
+            <p className="text-muted-foreground mb-4">
               Select a project from the dropdown above or create a new one to get started.
             </p>
           </div>
@@ -381,15 +386,17 @@ function App() {
              features.in_progress.length === 0 &&
              features.done.length === 0 &&
              wsState.agentStatus === 'running' && (
-              <div className="neo-card p-8 text-center">
-                <Loader2 size={32} className="animate-spin mx-auto mb-4 text-neo-progress" />
-                <h3 className="font-display font-bold text-xl mb-2">
-                  Initializing Features...
-                </h3>
-                <p className="text-neo-text-secondary">
-                  The agent is reading your spec and creating features. This may take a moment.
-                </p>
-              </div>
+              <Card className="p-8 text-center">
+                <CardContent className="p-0">
+                  <Loader2 size={32} className="animate-spin mx-auto mb-4 text-primary" />
+                  <h3 className="font-display font-bold text-xl mb-2">
+                    Initializing Features...
+                  </h3>
+                  <p className="text-muted-foreground">
+                    The agent is reading your spec and creating features. This may take a moment.
+                  </p>
+                </CardContent>
+              </Card>
             )}
 
             {/* View Toggle - only show when there are features */}
@@ -411,7 +418,7 @@ function App() {
                 hasSpec={hasSpec}
               />
             ) : (
-              <div className="neo-card overflow-hidden" style={{ height: '600px' }}>
+              <Card className="overflow-hidden" style={{ height: '600px' }}>
                 {graphData ? (
                   <DependencyGraph
                     graphData={graphData}
@@ -420,10 +427,10 @@ function App() {
                   />
                 ) : (
                   <div className="h-full flex items-center justify-center">
-                    <Loader2 size={32} className="animate-spin text-neo-progress" />
+                    <Loader2 size={32} className="animate-spin text-primary" />
                   </div>
                 )}
-              </div>
+              </Card>
             )}
           </div>
         )}
@@ -461,7 +468,7 @@ function App() {
 
       {/* Spec Creation Chat - for creating spec from empty kanban */}
       {showSpecChat && selectedProject && (
-        <div className="fixed inset-0 z-50 bg-[var(--color-neo-bg)]">
+        <div className="fixed inset-0 z-50 bg-background">
           <SpecCreationChat
             projectName={selectedProject}
             onComplete={() => {
@@ -508,14 +515,10 @@ function App() {
       )}
 
       {/* Settings Modal */}
-      {showSettings && (
-        <SettingsModal onClose={() => setShowSettings(false)} />
-      )}
+      <SettingsModal isOpen={showSettings} onClose={() => setShowSettings(false)} />
 
       {/* Keyboard Shortcuts Help */}
-      {showKeyboardHelp && (
-        <KeyboardShortcutsHelp onClose={() => setShowKeyboardHelp(false)} />
-      )}
+      <KeyboardShortcutsHelp isOpen={showKeyboardHelp} onClose={() => setShowKeyboardHelp(false)} />
 
       {/* Celebration Overlay - shows when a feature is completed by an agent */}
       {wsState.celebration && (
diff --git a/ui/src/components/ActivityFeed.tsx b/ui/src/components/ActivityFeed.tsx
index 46a695b..23c64e9 100644
--- a/ui/src/components/ActivityFeed.tsx
+++ b/ui/src/components/ActivityFeed.tsx
@@ -1,6 +1,7 @@
 import { Activity } from 'lucide-react'
 import { AgentAvatar } from './AgentAvatar'
 import type { AgentMascot } from '../lib/types'
+import { Card, CardContent } from '@/components/ui/card'
 
 interface ActivityItem {
   agentName: string
@@ -38,8 +39,8 @@ export function ActivityFeed({ activities, maxItems = 5, showHeader = true }: Ac
     <div>
       {showHeader && (
         <div className="flex items-center gap-2 mb-2">
-          <Activity size={14} className="text-neo-text-secondary" />
-          <span className="text-xs font-bold text-neo-text-secondary uppercase tracking-wide">
+          <Activity size={14} className="text-muted-foreground" />
+          <span className="text-xs font-semibold text-muted-foreground uppercase tracking-wide">
             Recent Activity
           </span>
         </div>
@@ -47,34 +48,36 @@ export function ActivityFeed({ activities, maxItems = 5, showHeader = true }: Ac
 
       <div className="space-y-2">
         {displayedActivities.map((activity) => (
-          <div
+          <Card
             key={`${activity.featureId}-${activity.timestamp}-${activity.thought.slice(0, 20)}`}
-            className="flex items-start gap-2 py-1.5 px-2 rounded bg-[var(--color-neo-bg)] border border-neo-border/20"
+            className="py-1.5"
           >
-            <AgentAvatar
-              name={activity.agentName as AgentMascot}
-              state="working"
-              size="sm"
-            />
-            <div className="flex-1 min-w-0">
-              <div className="flex items-center gap-2">
-                <span className="text-xs font-bold" style={{
-                  color: getMascotColor(activity.agentName as AgentMascot)
-                }}>
-                  {activity.agentName}
-                </span>
-                <span className="text-[10px] text-neo-text-muted">
-                  #{activity.featureId}
-                </span>
-                <span className="text-[10px] text-neo-text-muted ml-auto">
-                  {formatTimestamp(activity.timestamp)}
-                </span>
+            <CardContent className="p-2 flex items-start gap-2">
+              <AgentAvatar
+                name={activity.agentName as AgentMascot}
+                state="working"
+                size="sm"
+              />
+              <div className="flex-1 min-w-0">
+                <div className="flex items-center gap-2">
+                  <span className="text-xs font-semibold" style={{
+                    color: getMascotColor(activity.agentName as AgentMascot)
+                  }}>
+                    {activity.agentName}
+                  </span>
+                  <span className="text-[10px] text-muted-foreground">
+                    #{activity.featureId}
+                  </span>
+                  <span className="text-[10px] text-muted-foreground ml-auto">
+                    {formatTimestamp(activity.timestamp)}
+                  </span>
+                </div>
+                <p className="text-xs text-muted-foreground truncate" title={activity.thought}>
+                  {activity.thought}
+                </p>
               </div>
-              <p className="text-xs text-neo-text-secondary truncate" title={activity.thought}>
-                {activity.thought}
-              </p>
-            </div>
-          </div>
+            </CardContent>
+          </Card>
         ))}
       </div>
     </div>
diff --git a/ui/src/components/AddFeatureForm.tsx b/ui/src/components/AddFeatureForm.tsx
index 834022c..529b801 100644
--- a/ui/src/components/AddFeatureForm.tsx
+++ b/ui/src/components/AddFeatureForm.tsx
@@ -1,6 +1,18 @@
 import { useState, useId } from 'react'
 import { X, Plus, Trash2, Loader2, AlertCircle } from 'lucide-react'
 import { useCreateFeature } from '../hooks/useProjects'
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogFooter,
+} from '@/components/ui/dialog'
+import { Button } from '@/components/ui/button'
+import { Input } from '@/components/ui/input'
+import { Textarea } from '@/components/ui/textarea'
+import { Label } from '@/components/ui/label'
+import { Alert, AlertDescription } from '@/components/ui/alert'
 
 interface Step {
   id: string
@@ -65,149 +77,135 @@ export function AddFeatureForm({ projectName, onClose }: AddFeatureFormProps) {
   const isValid = category.trim() && name.trim() && description.trim()
 
   return (
-    <div className="neo-modal-backdrop" onClick={onClose}>
-      <div
-        className="neo-modal w-full max-w-2xl"
-        onClick={(e) => e.stopPropagation()}
-      >
-        {/* Header */}
-        <div className="flex items-center justify-between p-6 border-b-3 border-[var(--color-neo-border)]">
-          <h2 className="font-display text-2xl font-bold">
-            Add Feature
-          </h2>
-          <button
-            onClick={onClose}
-            className="neo-btn neo-btn-ghost p-2"
-          >
-            <X size={24} />
-          </button>
-        </div>
+    <Dialog open={true} onOpenChange={(open) => !open && onClose()}>
+      <DialogContent className="sm:max-w-2xl">
+        <DialogHeader>
+          <DialogTitle>Add Feature</DialogTitle>
+        </DialogHeader>
 
-        {/* Form */}
-        <form onSubmit={handleSubmit} className="p-6 space-y-4">
+        <form onSubmit={handleSubmit} className="space-y-4">
           {/* Error Message */}
           {error && (
-            <div className="flex items-center gap-3 p-4 bg-[var(--color-neo-error-bg)] text-[var(--color-neo-error-text)] border-3 border-[var(--color-neo-error-border)]">
-              <AlertCircle size={20} />
-              <span>{error}</span>
-              <button
-                type="button"
-                onClick={() => setError(null)}
-                className="ml-auto hover:opacity-70 transition-opacity"
-              >
-                <X size={16} />
-              </button>
-            </div>
+            <Alert variant="destructive">
+              <AlertCircle className="h-4 w-4" />
+              <AlertDescription className="flex items-center justify-between">
+                <span>{error}</span>
+                <Button
+                  type="button"
+                  variant="ghost"
+                  size="icon-xs"
+                  onClick={() => setError(null)}
+                >
+                  <X size={14} />
+                </Button>
+              </AlertDescription>
+            </Alert>
           )}
 
           {/* Category & Priority Row */}
           <div className="flex gap-4">
-            <div className="flex-1">
-              <label className="block font-display font-bold mb-2 uppercase text-sm">
-                Category
-              </label>
-              <input
+            <div className="flex-1 space-y-2">
+              <Label htmlFor="category">Category</Label>
+              <Input
+                id="category"
                 type="text"
                 value={category}
                 onChange={(e) => setCategory(e.target.value)}
                 placeholder="e.g., Authentication, UI, API"
-                className="neo-input"
                 required
               />
             </div>
-            <div className="w-32">
-              <label className="block font-display font-bold mb-2 uppercase text-sm">
-                Priority
-              </label>
-              <input
+            <div className="w-32 space-y-2">
+              <Label htmlFor="priority">Priority</Label>
+              <Input
+                id="priority"
                 type="number"
                 value={priority}
                 onChange={(e) => setPriority(e.target.value)}
                 placeholder="Auto"
                 min="1"
-                className="neo-input"
               />
             </div>
           </div>
 
           {/* Name */}
-          <div>
-            <label className="block font-display font-bold mb-2 uppercase text-sm">
-              Feature Name
-            </label>
-            <input
+          <div className="space-y-2">
+            <Label htmlFor="name">Feature Name</Label>
+            <Input
+              id="name"
               type="text"
               value={name}
               onChange={(e) => setName(e.target.value)}
               placeholder="e.g., User login form"
-              className="neo-input"
               required
             />
           </div>
 
           {/* Description */}
-          <div>
-            <label className="block font-display font-bold mb-2 uppercase text-sm">
-              Description
-            </label>
-            <textarea
+          <div className="space-y-2">
+            <Label htmlFor="description">Description</Label>
+            <Textarea
+              id="description"
               value={description}
               onChange={(e) => setDescription(e.target.value)}
               placeholder="Describe what this feature should do..."
-              className="neo-input min-h-[100px] resize-y"
+              className="min-h-[100px] resize-y"
               required
             />
           </div>
 
           {/* Steps */}
-          <div>
-            <label className="block font-display font-bold mb-2 uppercase text-sm">
-              Test Steps (Optional)
-            </label>
+          <div className="space-y-2">
+            <Label>Test Steps (Optional)</Label>
             <div className="space-y-2">
               {steps.map((step, index) => (
                 <div key={step.id} className="flex gap-2 items-center">
-                  <span
-                    className="w-10 h-10 flex-shrink-0 flex items-center justify-center font-mono font-bold text-sm border-3 border-[var(--color-neo-border)] bg-[var(--color-neo-bg)] text-[var(--color-neo-text-secondary)]"
-                    style={{ boxShadow: 'var(--shadow-neo-sm)' }}
-                  >
+                  <span className="w-10 h-10 flex-shrink-0 flex items-center justify-center font-mono font-semibold text-sm border rounded-md bg-muted text-muted-foreground">
                     {index + 1}
                   </span>
-                  <input
+                  <Input
                     type="text"
                     value={step.value}
                     onChange={(e) => handleStepChange(step.id, e.target.value)}
                     placeholder="Describe this step..."
-                    className="neo-input flex-1"
+                    className="flex-1"
                   />
                   {steps.length > 1 && (
-                    <button
+                    <Button
                       type="button"
+                      variant="ghost"
+                      size="icon"
                       onClick={() => handleRemoveStep(step.id)}
-                      className="neo-btn neo-btn-ghost p-2"
                     >
                       <Trash2 size={18} />
-                    </button>
+                    </Button>
                   )}
                 </div>
               ))}
             </div>
-            <button
+            <Button
               type="button"
+              variant="ghost"
+              size="sm"
               onClick={handleAddStep}
-              className="neo-btn neo-btn-ghost mt-2 text-sm"
             >
               <Plus size={16} />
               Add Step
-            </button>
+            </Button>
           </div>
 
           {/* Actions */}
-          <div className="flex gap-3 pt-4 border-t-3 border-[var(--color-neo-border)]">
-            <button
+          <DialogFooter className="pt-4 border-t">
+            <Button
+              type="button"
+              variant="outline"
+              onClick={onClose}
+            >
+              Cancel
+            </Button>
+            <Button
               type="submit"
               disabled={!isValid || createFeature.isPending}
-              className="neo-btn neo-btn-success flex-1"
             >
               {createFeature.isPending ? (
                 <Loader2 size={18} className="animate-spin" />
@@ -217,17 +215,10 @@ export function AddFeatureForm({ projectName, onClose }: AddFeatureFormProps) {
                   Create Feature
                 </>
               )}
-            </button>
-            <button
-              type="button"
-              onClick={onClose}
-              className="neo-btn neo-btn-ghost"
-            >
-              Cancel
-            </button>
-          </div>
+            </Button>
+          </DialogFooter>
         </form>
-      </div>
-    </div>
+      </DialogContent>
+    </Dialog>
   )
 }
diff --git a/ui/src/components/AgentAvatar.tsx b/ui/src/components/AgentAvatar.tsx
index 8831016..edb36d6 100644
--- a/ui/src/components/AgentAvatar.tsx
+++ b/ui/src/components/AgentAvatar.tsx
@@ -606,7 +606,7 @@ export function AgentAvatar({ name, state, size = 'md', showName = false }: Agen
         <SvgComponent colors={colors} size={svgSize} />
       </div>
       {showName && (
-        <span className={`${font} font-bold text-neo-text`} style={{ color: colors.primary }}>
+        <span className={`${font} font-bold text-foreground`} style={{ color: colors.primary }}>
           {name}
         </span>
       )}
diff --git a/ui/src/components/AgentCard.tsx b/ui/src/components/AgentCard.tsx
index befe63b..9fdff64 100644
--- a/ui/src/components/AgentCard.tsx
+++ b/ui/src/components/AgentCard.tsx
@@ -3,6 +3,9 @@ import { useState } from 'react'
 import { createPortal } from 'react-dom'
 import { AgentAvatar } from './AgentAvatar'
 import type { ActiveAgent, AgentLogEntry, AgentType } from '../lib/types'
+import { Card, CardContent } from '@/components/ui/card'
+import { Button } from '@/components/ui/button'
+import { Badge } from '@/components/ui/badge'
 
 interface AgentCardProps {
   agent: ActiveAgent
@@ -31,22 +34,22 @@ function getStateText(state: ActiveAgent['state']): string {
   }
 }
 
-// Get state color
+// Get state color class
 function getStateColor(state: ActiveAgent['state']): string {
   switch (state) {
     case 'success':
-      return 'text-neo-done'
+      return 'text-primary'
     case 'error':
-      return 'text-neo-pending'  // Yellow - just pivoting, not a real error
+      return 'text-yellow-600'
     case 'struggling':
-      return 'text-orange-500'   // Orange - working hard, being persistent
+      return 'text-orange-500'
     case 'working':
     case 'testing':
-      return 'text-neo-progress'
+      return 'text-primary'
     case 'thinking':
-      return 'text-neo-pending'
+      return 'text-yellow-600'
     default:
-      return 'text-neo-text-secondary'
+      return 'text-muted-foreground'
   }
 }
 
@@ -55,14 +58,13 @@ function getAgentTypeBadge(agentType: AgentType): { label: string; className: st
   if (agentType === 'testing') {
     return {
       label: 'TEST',
-      className: 'bg-purple-100 text-purple-700 border-purple-300',
+      className: 'bg-purple-100 text-purple-700 dark:bg-purple-900/30 dark:text-purple-300',
       icon: FlaskConical,
     }
   }
-  // Default to coding
   return {
     label: 'CODE',
-    className: 'bg-blue-100 text-blue-700 border-blue-300',
+    className: 'bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-300',
     icon: Code,
   }
 }
@@ -74,75 +76,66 @@ export function AgentCard({ agent, onShowLogs }: AgentCardProps) {
   const TypeIcon = typeBadge.icon
 
   return (
-    <div
-      className={`
-        neo-card p-3 min-w-[180px] max-w-[220px]
-        ${isActive ? 'animate-pulse-neo' : ''}
-        transition-all duration-300
-      `}
-    >
-      {/* Agent type badge */}
-      <div className="flex justify-end mb-1">
-        <span
-          className={`
-            inline-flex items-center gap-1 px-1.5 py-0.5 text-[10px] font-bold
-            uppercase tracking-wide rounded border
-            ${typeBadge.className}
-          `}
-        >
-          <TypeIcon size={10} />
-          {typeBadge.label}
-        </span>
-      </div>
+    <Card className={`min-w-[180px] max-w-[220px] py-3 ${isActive ? 'animate-pulse' : ''}`}>
+      <CardContent className="p-3 space-y-2">
+        {/* Agent type badge */}
+        <div className="flex justify-end">
+          <Badge variant="outline" className={`text-[10px] ${typeBadge.className}`}>
+            <TypeIcon size={10} />
+            {typeBadge.label}
+          </Badge>
+        </div>
 
-      {/* Header with avatar and name */}
-      <div className="flex items-center gap-2 mb-2">
-        <AgentAvatar name={agent.agentName} state={agent.state} size="sm" />
-        <div className="flex-1 min-w-0">
-          <div className="font-display font-bold text-sm truncate">
-            {agent.agentName}
+        {/* Header with avatar and name */}
+        <div className="flex items-center gap-2">
+          <AgentAvatar name={agent.agentName} state={agent.state} size="sm" />
+          <div className="flex-1 min-w-0">
+            <div className="font-semibold text-sm truncate">
+              {agent.agentName}
+            </div>
+            <div className={`text-xs ${getStateColor(agent.state)}`}>
+              {getStateText(agent.state)}
+            </div>
           </div>
-          <div className={`text-xs ${getStateColor(agent.state)}`}>
-            {getStateText(agent.state)}
-          </div>
-        </div>
-        {/* Log button */}
-        {hasLogs && onShowLogs && (
-          <button
-            onClick={() => onShowLogs(agent.agentIndex)}
-            className="p-1 hover:bg-neo-bg-secondary rounded transition-colors"
-            title={`View logs (${agent.logs?.length || 0} entries)`}
-          >
-            <ScrollText size={14} className="text-neo-text-secondary" />
-          </button>
-        )}
-      </div>
-
-      {/* Feature info */}
-      <div className="mb-2">
-        <div className="text-xs text-neo-text-secondary mb-0.5">
-          Feature #{agent.featureId}
-        </div>
-        <div className="text-sm font-medium truncate" title={agent.featureName}>
-          {agent.featureName}
-        </div>
-      </div>
-
-      {/* Thought bubble */}
-      {agent.thought && (
-        <div className="relative mt-2 pt-2 border-t-2 border-neo-border/30">
-          <div className="flex items-start gap-1.5">
-            <MessageCircle size={14} className="text-neo-progress shrink-0 mt-0.5" />
-            <p
-              className="text-xs text-neo-text-secondary line-clamp-2 italic"
-              title={agent.thought}
+          {/* Log button */}
+          {hasLogs && onShowLogs && (
+            <Button
+              variant="ghost"
+              size="icon-xs"
+              onClick={() => onShowLogs(agent.agentIndex)}
+              title={`View logs (${agent.logs?.length || 0} entries)`}
             >
-              {agent.thought}
-            </p>
+              <ScrollText size={14} className="text-muted-foreground" />
+            </Button>
+          )}
+        </div>
+
+        {/* Feature info */}
+        <div>
+          <div className="text-xs text-muted-foreground mb-0.5">
+            Feature #{agent.featureId}
+          </div>
+          <div className="text-sm font-medium truncate" title={agent.featureName}>
+            {agent.featureName}
           </div>
         </div>
-      )}
-    </div>
+
+        {/* Thought bubble */}
+        {agent.thought && (
+          <div className="pt-2 border-t border-border/50">
+            <div className="flex items-start gap-1.5">
+              <MessageCircle size={14} className="text-primary shrink-0 mt-0.5" />
+              <p
+                className="text-xs text-muted-foreground line-clamp-2 italic"
+                title={agent.thought}
+              >
+                {agent.thought}
+              </p>
+            </div>
+          </div>
+        )}
+      </CardContent>
+    </Card>
   )
 }
 
@@ -170,91 +163,76 @@ export function AgentLogModal({ agent, logs, onClose }: AgentLogModalProps) {
   const getLogColor = (type: AgentLogEntry['type']) => {
     switch (type) {
       case 'error':
-        return 'text-neo-danger'
+        return 'text-destructive'
       case 'state_change':
-        return 'text-neo-progress'
+        return 'text-primary'
       default:
-        return 'text-neo-text'
+        return 'text-foreground'
     }
   }
 
-  // Use portal to render modal at document body level (avoids overflow:hidden issues)
   return createPortal(
     <div
       className="fixed inset-0 flex items-center justify-center p-4 bg-black/50"
       style={{ zIndex: 9999 }}
       onClick={(e) => {
-        // Close when clicking backdrop
         if (e.target === e.currentTarget) onClose()
       }}
     >
-      <div className="neo-card w-full max-w-4xl max-h-[80vh] flex flex-col bg-neo-bg">
+      <Card className="w-full max-w-4xl max-h-[80vh] flex flex-col py-0">
         {/* Header */}
-        <div className="flex items-center justify-between p-4 border-b-3 border-neo-border">
+        <div className="flex items-center justify-between p-4 border-b">
           <div className="flex items-center gap-3">
             <AgentAvatar name={agent.agentName} state={agent.state} size="sm" />
             <div>
               <div className="flex items-center gap-2">
-                <h2 className="font-display font-bold text-lg">
+                <h2 className="font-semibold text-lg">
                   {agent.agentName} Logs
                 </h2>
-                <span
-                  className={`
-                    inline-flex items-center gap-1 px-1.5 py-0.5 text-[10px] font-bold
-                    uppercase tracking-wide rounded border
-                    ${typeBadge.className}
-                  `}
-                >
+                <Badge variant="outline" className={`text-[10px] ${typeBadge.className}`}>
                   <TypeIcon size={10} />
                   {typeBadge.label}
-                </span>
+                </Badge>
               </div>
-              <p className="text-sm text-neo-text-secondary">
+              <p className="text-sm text-muted-foreground">
                 Feature #{agent.featureId}: {agent.featureName}
               </p>
             </div>
           </div>
           <div className="flex items-center gap-2">
-            <button
-              onClick={handleCopy}
-              className="neo-button neo-button-sm flex items-center gap-1"
-              title="Copy all logs"
-            >
+            <Button variant="outline" size="sm" onClick={handleCopy}>
               {copied ? <Check size={14} /> : <Copy size={14} />}
               {copied ? 'Copied!' : 'Copy'}
-            </button>
-            <button
-              onClick={onClose}
-              className="p-2 hover:bg-neo-bg-secondary rounded transition-colors"
-            >
+            </Button>
+            <Button variant="ghost" size="icon-sm" onClick={onClose}>
               <X size={20} />
-            </button>
+            </Button>
           </div>
         </div>
 
         {/* Log content */}
-        <div className="flex-1 overflow-auto p-4 bg-neo-bg-secondary font-mono text-xs">
-          {logs.length === 0 ? (
-            <p className="text-neo-text-secondary italic">No logs available</p>
-          ) : (
-            <div className="space-y-1">
-              {logs.map((log, idx) => (
+        <div className="flex-1 min-h-0 overflow-y-auto p-4 bg-muted/50">
+          <div className="font-mono text-xs space-y-1">
+            {logs.length === 0 ? (
+              <p className="text-muted-foreground italic">No logs available</p>
+            ) : (
+              logs.map((log, idx) => (
                 <div key={idx} className={`${getLogColor(log.type)} whitespace-pre-wrap break-all`}>
-                  <span className="text-neo-muted">
+                  <span className="text-muted-foreground">
                     [{new Date(log.timestamp).toLocaleTimeString()}]
                   </span>{' '}
                   {log.line}
                 </div>
-              ))}
-            </div>
-          )}
+              ))
+            )}
+          </div>
         </div>
 
         {/* Footer */}
-        <div className="p-3 border-t-2 border-neo-border/30 text-xs text-neo-text-secondary">
+        <div className="p-3 border-t text-xs text-muted-foreground">
           {logs.length} log entries
         </div>
-      </div>
+      </Card>
     </div>,
     document.body
   )
diff --git a/ui/src/components/AgentControl.tsx b/ui/src/components/AgentControl.tsx
index 2b58448..c08a1bd 100644
--- a/ui/src/components/AgentControl.tsx
+++ b/ui/src/components/AgentControl.tsx
@@ -9,6 +9,8 @@ import { useNextScheduledRun } from '../hooks/useSchedules'
 import { formatNextRun, formatEndTime } from '../lib/timeUtils'
 import { ScheduleModal } from './ScheduleModal'
 import type { AgentStatus } from '../lib/types'
+import { Button } from '@/components/ui/button'
+import { Badge } from '@/components/ui/badge'
 
 interface AgentControlProps {
   projectName: string
@@ -30,18 +32,17 @@ export function AgentControl({ projectName, status }: AgentControlProps) {
 
   const isLoading = startAgent.isPending || stopAgent.isPending
   const isRunning = status === 'running' || status === 'paused'
-  const isLoadingStatus = status === 'loading'  // Status unknown, waiting for WebSocket
+  const isLoadingStatus = status === 'loading'
   const isParallel = concurrency > 1
 
   const handleStart = () => startAgent.mutate({
     yoloMode,
     parallelMode: isParallel,
-    maxConcurrency: concurrency,  // Always pass concurrency (1-5)
+    maxConcurrency: concurrency,
     testingAgentRatio: settings?.testing_agent_ratio,
   })
   const handleStop = () => stopAgent.mutate()
 
-  // Simplified: either show Start (when stopped/crashed), Stop (when running/paused), or loading spinner
   const isStopped = status === 'stopped' || status === 'crashed'
 
   return (
@@ -50,7 +51,7 @@ export function AgentControl({ projectName, status }: AgentControlProps) {
         {/* Concurrency slider - visible when stopped */}
         {isStopped && (
           <div className="flex items-center gap-2">
-            <GitBranch size={16} className={isParallel ? 'text-[var(--color-neo-primary)]' : 'text-gray-400'} />
+            <GitBranch size={16} className={isParallel ? 'text-primary' : 'text-muted-foreground'} />
             <input
               type="range"
               min={1}
@@ -58,11 +59,11 @@ export function AgentControl({ projectName, status }: AgentControlProps) {
               value={concurrency}
               onChange={(e) => setConcurrency(Number(e.target.value))}
               disabled={isLoading}
-              className="w-16 h-2 accent-[var(--color-neo-primary)] cursor-pointer"
+              className="w-16 h-2 accent-primary cursor-pointer"
               title={`${concurrency} concurrent agent${concurrency > 1 ? 's' : ''}`}
               aria-label="Set number of concurrent agents"
             />
-            <span className="text-xs font-bold min-w-[1.5rem] text-center">
+            <span className="text-xs font-semibold min-w-[1.5rem] text-center">
               {concurrency}x
             </span>
           </div>
@@ -70,80 +71,71 @@ export function AgentControl({ projectName, status }: AgentControlProps) {
 
         {/* Show concurrency indicator when running with multiple agents */}
         {isRunning && isParallel && (
-          <div className="flex items-center gap-1 text-xs text-[var(--color-neo-primary)] font-bold">
+          <Badge variant="secondary" className="gap-1">
             <GitBranch size={14} />
-            <span>{concurrency}x</span>
-          </div>
+            {concurrency}x
+          </Badge>
         )}
 
         {/* Schedule status display */}
         {nextRun?.is_currently_running && nextRun.next_end && (
-          <div className="flex items-center gap-2 text-sm text-[var(--color-neo-done)] font-bold">
-            <Clock size={16} className="flex-shrink-0" />
-            <span>Running until {formatEndTime(nextRun.next_end)}</span>
-          </div>
+          <Badge variant="default" className="gap-1">
+            <Clock size={14} />
+            Running until {formatEndTime(nextRun.next_end)}
+          </Badge>
         )}
 
         {!nextRun?.is_currently_running && nextRun?.next_start && (
-          <div className="flex items-center gap-2 text-sm text-gray-900 dark:text-white font-bold">
-            <Clock size={16} className="flex-shrink-0" />
-            <span>Next: {formatNextRun(nextRun.next_start)}</span>
-          </div>
+          <Badge variant="secondary" className="gap-1">
+            <Clock size={14} />
+            Next: {formatNextRun(nextRun.next_start)}
+          </Badge>
         )}
 
         {/* Start/Stop button */}
         {isLoadingStatus ? (
-          <button
-            disabled
-            className="neo-btn text-sm py-2 px-3 opacity-50 cursor-not-allowed"
-            title="Loading agent status..."
-            aria-label="Loading agent status"
-          >
+          <Button disabled variant="outline" size="sm">
             <Loader2 size={18} className="animate-spin" />
-          </button>
+          </Button>
         ) : isStopped ? (
-          <button
+          <Button
             onClick={handleStart}
             disabled={isLoading}
-            className={`neo-btn text-sm py-2 px-3 ${
-              yoloMode ? 'neo-btn-yolo' : 'neo-btn-success'
-            }`}
+            variant={yoloMode ? 'secondary' : 'default'}
+            size="sm"
             title={yoloMode ? 'Start Agent (YOLO Mode)' : 'Start Agent'}
-            aria-label={yoloMode ? 'Start Agent in YOLO Mode' : 'Start Agent'}
           >
             {isLoading ? (
               <Loader2 size={18} className="animate-spin" />
             ) : (
               <Play size={18} />
             )}
-          </button>
+          </Button>
         ) : (
-          <button
+          <Button
             onClick={handleStop}
             disabled={isLoading}
-            className={`neo-btn text-sm py-2 px-3 ${
-              yoloMode ? 'neo-btn-yolo' : 'neo-btn-danger'
-            }`}
+            variant="destructive"
+            size="sm"
             title={yoloMode ? 'Stop Agent (YOLO Mode)' : 'Stop Agent'}
-            aria-label={yoloMode ? 'Stop Agent in YOLO Mode' : 'Stop Agent'}
           >
             {isLoading ? (
               <Loader2 size={18} className="animate-spin" />
             ) : (
               <Square size={18} />
             )}
-          </button>
+          </Button>
         )}
 
         {/* Clock button to open schedule modal */}
-        <button
+        <Button
+          variant="outline"
+          size="sm"
           onClick={() => setShowScheduleModal(true)}
-          className="neo-btn text-sm py-2 px-3"
           title="Manage schedules"
-          aria-label="Manage agent schedules"
         >
           <Clock size={18} />
-        </button>
+        </Button>
       </div>
 
       {/* Schedule Modal */}
diff --git a/ui/src/components/AgentMissionControl.tsx b/ui/src/components/AgentMissionControl.tsx
index 9fae801..53203e9 100644
--- a/ui/src/components/AgentMissionControl.tsx
+++ b/ui/src/components/AgentMissionControl.tsx
@@ -4,6 +4,9 @@ import { AgentCard, AgentLogModal } from './AgentCard'
 import { ActivityFeed } from './ActivityFeed'
 import { OrchestratorStatusCard } from './OrchestratorStatusCard'
 import type { ActiveAgent, AgentLogEntry, OrchestratorStatus } from '../lib/types'
+import { Card, CardContent } from '@/components/ui/card'
+import { Badge } from '@/components/ui/badge'
+import { Button } from '@/components/ui/button'
 
 const ACTIVITY_COLLAPSED_KEY = 'autocoder-activity-collapsed'
 
@@ -35,7 +38,6 @@ export function AgentMissionControl({
       return false
     }
   })
-  // State for log modal
   const [selectedAgentForLogs, setSelectedAgentForLogs] = useState<ActiveAgent | null>(null)
 
   const toggleActivityCollapsed = () => {
@@ -54,18 +56,18 @@ export function AgentMissionControl({
   }
 
   return (
-    <div className="neo-card mb-6 overflow-hidden">
+    <Card className="mb-6 overflow-hidden py-0">
       {/* Header */}
       <button
         onClick={() => setIsExpanded(!isExpanded)}
-        className="w-full flex items-center justify-between px-4 py-3 bg-[var(--color-neo-progress)] hover:brightness-105 transition-all"
+        className="w-full flex items-center justify-between px-4 py-3 bg-primary hover:bg-primary/90 transition-colors"
       >
         <div className="flex items-center gap-2">
-          <Rocket size={20} className="text-neo-text-on-bright" />
-          <span className="font-display font-bold text-neo-text-on-bright uppercase tracking-wide">
+          <Rocket size={20} className="text-primary-foreground" />
+          <span className="font-semibold text-primary-foreground uppercase tracking-wide">
             Mission Control
           </span>
-          <span className="neo-badge neo-badge-sm bg-white text-neo-text ml-2">
+          <Badge variant="secondary" className="ml-2">
             {agents.length > 0
               ? `${agents.length} ${agents.length === 1 ? 'agent' : 'agents'} active`
               : orchestratorStatus?.state === 'initializing'
@@ -74,12 +76,12 @@ export function AgentMissionControl({
                   ? 'Complete'
                   : 'Orchestrating'
             }
-          </span>
+          </Badge>
         </div>
         {isExpanded ? (
-          <ChevronUp size={20} className="text-neo-text-on-bright" />
+          <ChevronUp size={20} className="text-primary-foreground" />
         ) : (
-          <ChevronDown size={20} className="text-neo-text-on-bright" />
+          <ChevronDown size={20} className="text-primary-foreground" />
         )}
       </button>
 
@@ -90,7 +92,7 @@ export function AgentMissionControl({
           ${isExpanded ? 'max-h-[600px] opacity-100' : 'max-h-0 opacity-0'}
         `}
       >
-        <div className="p-4">
+        <CardContent className="p-4">
           {/* Orchestrator Status Card */}
           {orchestratorStatus && (
             <OrchestratorStatusCard status={orchestratorStatus} />
@@ -98,7 +100,7 @@ export function AgentMissionControl({
 
           {/* Agent Cards Row */}
           {agents.length > 0 && (
-            <div className="flex gap-4 overflow-x-auto pb-4 scrollbar-thin">
+            <div className="flex gap-4 overflow-x-auto pb-4">
               {agents.map((agent) => (
                 <AgentCard
                   key={`agent-${agent.agentIndex}`}
@@ -116,24 +118,26 @@ export function AgentMissionControl({
 
           {/* Collapsible Activity Feed */}
           {recentActivity.length > 0 && (
-            <div className="mt-4 pt-4 border-t-2 border-neo-border/30">
-              <button
+            <div className="mt-4 pt-4 border-t">
+              <Button
+                variant="ghost"
+                size="sm"
                 onClick={toggleActivityCollapsed}
-                className="flex items-center gap-2 mb-2 hover:opacity-80 transition-opacity"
+                className="gap-2 mb-2 h-auto p-1"
               >
-                <Activity size={14} className="text-neo-text-secondary" />
-                <span className="text-xs font-bold text-neo-text-secondary uppercase tracking-wide">
+                <Activity size={14} className="text-muted-foreground" />
+                <span className="text-xs font-semibold text-muted-foreground uppercase tracking-wide">
                   Recent Activity
                 </span>
-                <span className="text-xs text-neo-muted">
+                <span className="text-xs text-muted-foreground">
                   ({recentActivity.length})
                 </span>
                 {activityCollapsed ? (
-                  <ChevronDown size={14} className="text-neo-text-secondary" />
+                  <ChevronDown size={14} className="text-muted-foreground" />
                 ) : (
-                  <ChevronUp size={14} className="text-neo-text-secondary" />
+                  <ChevronUp size={14} className="text-muted-foreground" />
                 )}
-              </button>
+              </Button>
               <div
                 className={`
                   transition-all duration-200 ease-out overflow-hidden
@@ -144,7 +148,7 @@ export function AgentMissionControl({
               </div>
             </div>
           )}
-        </div>
+        </CardContent>
       </div>
 
       {/* Log Modal */}
@@ -155,6 +159,6 @@ export function AgentMissionControl({
           onClose={() => setSelectedAgentForLogs(null)}
         />
       )}
-    </div>
+    </Card>
   )
 }
diff --git a/ui/src/components/AgentThought.tsx b/ui/src/components/AgentThought.tsx
index 6c8d1be..df24934 100644
--- a/ui/src/components/AgentThought.tsx
+++ b/ui/src/components/AgentThought.tsx
@@ -1,6 +1,7 @@
 import { useMemo, useState, useEffect } from 'react'
 import { Brain, Sparkles } from 'lucide-react'
 import type { AgentStatus } from '../lib/types'
+import { Card } from '@/components/ui/card'
 
 interface AgentThoughtProps {
   logs: Array<{ line: string; timestamp: string }>
@@ -105,38 +106,25 @@ export function AgentThought({ logs, agentStatus }: AgentThoughtProps) {
         ${shouldShow ? 'opacity-100 max-h-20' : 'opacity-0 max-h-0'}
       `}
     >
-      <div
-        className={`
-          relative
-          bg-[var(--color-neo-card)]
-          border-3 border-[var(--color-neo-border)]
-          shadow-[var(--shadow-neo-sm)]
-          px-4 py-3
-          flex items-center gap-3
-          ${isRunning ? 'animate-pulse-neo' : ''}
-        `}
-      >
+      <Card className={`relative px-4 py-3 flex items-center gap-3 ${isRunning ? 'animate-pulse' : ''}`}>
         {/* Brain Icon with subtle glow */}
         <div className="relative shrink-0">
           <Brain
             size={22}
-            className="text-[var(--color-neo-progress)]"
+            className="text-primary"
             strokeWidth={2.5}
           />
           {isRunning && (
             <Sparkles
               size={10}
-              className="absolute -top-1 -right-1 text-[var(--color-neo-pending)] animate-pulse"
+              className="absolute -top-1 -right-1 text-yellow-500 animate-pulse"
             />
           )}
         </div>
 
-        {/* Thought text with fade transition + shimmer effect when running */}
+        {/* Thought text with fade transition */}
         <p
-          className={`
-            font-mono text-sm truncate transition-all duration-150 ease-out
-            ${isRunning ? 'animate-shimmer' : 'text-[var(--color-neo-text)]'}
-          `}
+          className="font-mono text-sm truncate transition-all duration-150 ease-out text-foreground"
           style={{
             opacity: textVisible ? 1 : 0,
             transform: textVisible ? 'translateY(0)' : 'translateY(-4px)',
@@ -147,14 +135,11 @@ export function AgentThought({ logs, agentStatus }: AgentThoughtProps) {
 
         {/* Subtle running indicator bar */}
         {isRunning && (
-          <div className="absolute bottom-0 left-0 right-0 h-0.5 bg-[var(--color-neo-progress)] opacity-50">
-            <div
-              className="h-full bg-[var(--color-neo-progress)] animate-pulse"
-              style={{ width: '100%' }}
-            />
+          <div className="absolute bottom-0 left-0 right-0 h-0.5 bg-primary/50">
+            <div className="h-full bg-primary animate-pulse" style={{ width: '100%' }} />
           </div>
         )}
-      </div>
+      </Card>
     </div>
   )
 }
diff --git a/ui/src/components/AssistantChat.tsx b/ui/src/components/AssistantChat.tsx
index 5dcb303..8f438a1 100644
--- a/ui/src/components/AssistantChat.tsx
+++ b/ui/src/components/AssistantChat.tsx
@@ -12,6 +12,8 @@ import { useAssistantChat } from '../hooks/useAssistantChat'
 import { ChatMessage as ChatMessageComponent } from './ChatMessage'
 import { ConversationHistory } from './ConversationHistory'
 import type { ChatMessage } from '../lib/types'
+import { Button } from '@/components/ui/button'
+import { Textarea } from '@/components/ui/textarea'
 
 interface AssistantChatProps {
   projectName: string
@@ -167,28 +169,28 @@ export function AssistantChat({
   return (
     <div className="flex flex-col h-full">
       {/* Header with actions and connection status */}
-      <div className="flex items-center justify-between px-4 py-2 border-b-2 border-[var(--color-neo-border)] bg-[var(--color-neo-bg)]">
+      <div className="flex items-center justify-between px-4 py-2 border-b border-border bg-background">
         {/* Action buttons */}
         <div className="flex items-center gap-1 relative">
-          <button
+          <Button
+            variant="ghost"
+            size="icon"
             onClick={handleNewChat}
-            className="neo-btn neo-btn-ghost p-1.5 text-[var(--color-neo-text-secondary)] hover:text-[var(--color-neo-text)]"
+            className="h-8 w-8"
             title="New conversation"
             disabled={isLoading}
           >
             <Plus size={16} />
-          </button>
-          <button
+          </Button>
+          <Button
+            variant={showHistory ? 'secondary' : 'ghost'}
+            size="icon"
             onClick={() => setShowHistory(!showHistory)}
-            className={`neo-btn neo-btn-ghost p-1.5 ${
-              showHistory
-                ? 'text-[var(--color-neo-text)] bg-[var(--color-neo-pending)]'
-                : 'text-[var(--color-neo-text-secondary)] hover:text-[var(--color-neo-text)]'
-            }`}
+            className="h-8 w-8"
             title="Conversation history"
           >
             <History size={16} />
-          </button>
+          </Button>
 
           {/* History dropdown */}
           <ConversationHistory
@@ -204,34 +206,34 @@ export function AssistantChat({
         <div className="flex items-center gap-2">
           {connectionStatus === 'connected' ? (
             <>
-              <Wifi size={14} className="text-[var(--color-neo-done)]" />
-              <span className="text-xs text-[var(--color-neo-text-secondary)]">Connected</span>
+              <Wifi size={14} className="text-green-500" />
+              <span className="text-xs text-muted-foreground">Connected</span>
             </>
           ) : connectionStatus === 'connecting' ? (
             <>
-              <Loader2 size={14} className="text-[var(--color-neo-progress)] animate-spin" />
-              <span className="text-xs text-[var(--color-neo-text-secondary)]">Connecting...</span>
+              <Loader2 size={14} className="text-primary animate-spin" />
+              <span className="text-xs text-muted-foreground">Connecting...</span>
             </>
           ) : (
             <>
-              <WifiOff size={14} className="text-[var(--color-neo-danger)]" />
-              <span className="text-xs text-[var(--color-neo-text-secondary)]">Disconnected</span>
+              <WifiOff size={14} className="text-destructive" />
+              <span className="text-xs text-muted-foreground">Disconnected</span>
             </>
           )}
         </div>
       </div>
 
       {/* Messages area */}
-      <div className="flex-1 overflow-y-auto bg-[var(--color-neo-bg)]">
+      <div className="flex-1 overflow-y-auto bg-background">
         {isLoadingConversation ? (
-          <div className="flex items-center justify-center h-full text-[var(--color-neo-text-secondary)] text-sm">
+          <div className="flex items-center justify-center h-full text-muted-foreground text-sm">
             <div className="flex items-center gap-2">
               <Loader2 size={16} className="animate-spin" />
               <span>Loading conversation...</span>
             </div>
           </div>
         ) : displayMessages.length === 0 ? (
-          <div className="flex items-center justify-center h-full text-[var(--color-neo-text-secondary)] text-sm">
+          <div className="flex items-center justify-center h-full text-muted-foreground text-sm">
             {isLoading ? (
               <div className="flex items-center gap-2">
                 <Loader2 size={16} className="animate-spin" />
@@ -253,12 +255,12 @@ export function AssistantChat({
 
       {/* Loading indicator */}
       {isLoading && displayMessages.length > 0 && (
-        <div className="px-4 py-2 border-t-2 border-[var(--color-neo-border)] bg-[var(--color-neo-bg)]">
-          <div className="flex items-center gap-2 text-[var(--color-neo-text-secondary)] text-sm">
+        <div className="px-4 py-2 border-t border-border bg-background">
+          <div className="flex items-center gap-2 text-muted-foreground text-sm">
             <div className="flex gap-1">
-              <span className="w-2 h-2 bg-[var(--color-neo-progress)] rounded-full animate-bounce" style={{ animationDelay: '0ms' }} />
-              <span className="w-2 h-2 bg-[var(--color-neo-progress)] rounded-full animate-bounce" style={{ animationDelay: '150ms' }} />
-              <span className="w-2 h-2 bg-[var(--color-neo-progress)] rounded-full animate-bounce" style={{ animationDelay: '300ms' }} />
+              <span className="w-2 h-2 bg-primary rounded-full animate-bounce" style={{ animationDelay: '0ms' }} />
+              <span className="w-2 h-2 bg-primary rounded-full animate-bounce" style={{ animationDelay: '150ms' }} />
+              <span className="w-2 h-2 bg-primary rounded-full animate-bounce" style={{ animationDelay: '300ms' }} />
             </div>
             <span>Thinking...</span>
           </div>
@@ -266,33 +268,21 @@ export function AssistantChat({
       )}
 
       {/* Input area */}
-      <div className="border-t-3 border-[var(--color-neo-border)] p-4 bg-[var(--color-neo-card)]">
+      <div className="border-t border-border p-4 bg-card">
         <div className="flex gap-2">
-          <textarea
+          <Textarea
             ref={inputRef}
             value={inputValue}
             onChange={(e) => setInputValue(e.target.value)}
             onKeyDown={handleKeyDown}
             placeholder="Ask about the codebase..."
             disabled={isLoading || isLoadingConversation || connectionStatus !== 'connected'}
-            className="
-              flex-1
-              neo-input
-              resize-none
-              min-h-[44px]
-              max-h-[120px]
-              py-2.5
-            "
+            className="flex-1 resize-none min-h-[44px] max-h-[120px]"
             rows={1}
           />
-          <button
+          <Button
             onClick={handleSend}
             disabled={!inputValue.trim() || isLoading || isLoadingConversation || connectionStatus !== 'connected'}
-            className="
-              neo-btn neo-btn-primary
-              px-4
-              disabled:opacity-50 disabled:cursor-not-allowed
-            "
             title="Send message"
           >
             {isLoading ? (
@@ -300,9 +290,9 @@ export function AssistantChat({
             ) : (
               <Send size={18} />
             )}
-          </button>
+          </Button>
         </div>
-        <p className="text-xs text-[var(--color-neo-text-secondary)] mt-2">
+        <p className="text-xs text-muted-foreground mt-2">
           Press Enter to send, Shift+Enter for new line
         </p>
       </div>
diff --git a/ui/src/components/AssistantFAB.tsx b/ui/src/components/AssistantFAB.tsx
index 813c518..3caa290 100644
--- a/ui/src/components/AssistantFAB.tsx
+++ b/ui/src/components/AssistantFAB.tsx
@@ -3,6 +3,7 @@
  */
 
 import { MessageCircle, X } from 'lucide-react'
+import { Button } from '@/components/ui/button'
 
 interface AssistantFABProps {
   onClick: () => void
@@ -11,24 +12,14 @@ interface AssistantFABProps {
 
 export function AssistantFAB({ onClick, isOpen }: AssistantFABProps) {
   return (
-    <button
+    <Button
       onClick={onClick}
-      className={`
-        fixed bottom-6 right-6 z-50
-        w-14 h-14
-        flex items-center justify-center
-        bg-[var(--color-neo-progress)] text-[var(--color-neo-text-on-bright)]
-        border-3 border-[var(--color-neo-border)]
-        shadow-neo-md
-        transition-all duration-200
-        hover:shadow-neo-lg hover:-translate-y-0.5
-        active:shadow-neo-sm active:translate-y-0.5
-        ${isOpen ? 'rotate-0' : ''}
-      `}
+      size="icon"
+      className="fixed bottom-6 right-6 z-50 w-14 h-14 rounded-full shadow-lg hover:shadow-xl transition-all duration-200 hover:-translate-y-0.5 active:translate-y-0.5"
       title={isOpen ? 'Close Assistant (Press A)' : 'Open Assistant (Press A)'}
       aria-label={isOpen ? 'Close Assistant' : 'Open Assistant'}
     >
       {isOpen ? <X size={24} /> : <MessageCircle size={24} />}
-    </button>
+    </Button>
   )
 }
diff --git a/ui/src/components/AssistantPanel.tsx b/ui/src/components/AssistantPanel.tsx
index 5efe624..cb61420 100644
--- a/ui/src/components/AssistantPanel.tsx
+++ b/ui/src/components/AssistantPanel.tsx
@@ -11,6 +11,7 @@ import { X, Bot } from 'lucide-react'
 import { AssistantChat } from './AssistantChat'
 import { useConversation } from '../hooks/useConversations'
 import type { ChatMessage } from '../lib/types'
+import { Button } from '@/components/ui/button'
 
 interface AssistantPanelProps {
   projectName: string
@@ -103,45 +104,37 @@ export function AssistantPanel({ projectName, isOpen, onClose }: AssistantPanelP
         className={`
           fixed right-0 top-0 bottom-0 z-50
           w-[400px] max-w-[90vw]
-          bg-neo-card
-          border-l-4 border-[var(--color-neo-border)]
+          bg-card
+          border-l border-border
           transform transition-transform duration-300 ease-out
-          flex flex-col
+          flex flex-col shadow-xl
           ${isOpen ? 'translate-x-0' : 'translate-x-full'}
         `}
-        style={{ boxShadow: 'var(--shadow-neo-left-lg)' }}
         role="dialog"
         aria-label="Project Assistant"
         aria-hidden={!isOpen}
       >
         {/* Header */}
-        <div className="flex items-center justify-between px-4 py-3 border-b-3 border-neo-border bg-neo-progress">
+        <div className="flex items-center justify-between px-4 py-3 border-b border-border bg-primary text-primary-foreground">
           <div className="flex items-center gap-2">
-            <div
-              className="bg-neo-card border-2 border-neo-border p-1.5"
-              style={{ boxShadow: 'var(--shadow-neo-sm)' }}
-            >
+            <div className="bg-card text-foreground border border-border p-1.5 rounded">
               <Bot size={18} />
             </div>
             <div>
-              <h2 className="font-display font-bold text-neo-text-on-bright">Project Assistant</h2>
-              <p className="text-xs text-neo-text-on-bright opacity-80 font-mono">{projectName}</p>
+              <h2 className="font-semibold">Project Assistant</h2>
+              <p className="text-xs opacity-80 font-mono">{projectName}</p>
             </div>
           </div>
-          <button
+          <Button
+            variant="ghost"
+            size="icon"
             onClick={onClose}
-            className="
-              neo-btn neo-btn-ghost
-              p-2
-              bg-[var(--color-neo-card)] border-[var(--color-neo-border)]
-              hover:bg-[var(--color-neo-bg)]
-              text-[var(--color-neo-text)]
-            "
+            className="text-primary-foreground hover:bg-primary-foreground/20"
             title="Close Assistant (Press A)"
             aria-label="Close Assistant"
           >
             <X size={18} />
-          </button>
+          </Button>
         </div>
 
         {/* Chat area */}
diff --git a/ui/src/components/CelebrationOverlay.tsx b/ui/src/components/CelebrationOverlay.tsx
index 55f9d66..8758e69 100644
--- a/ui/src/components/CelebrationOverlay.tsx
+++ b/ui/src/components/CelebrationOverlay.tsx
@@ -2,6 +2,7 @@ import { useCallback, useEffect, useState } from 'react'
 import { Sparkles, PartyPopper } from 'lucide-react'
 import { AgentAvatar } from './AgentAvatar'
 import type { AgentMascot } from '../lib/types'
+import { Card, CardContent } from '@/components/ui/card'
 
 interface CelebrationOverlayProps {
   agentName: AgentMascot | 'Unknown'
@@ -80,17 +81,18 @@ export function CelebrationOverlay({ agentName, featureName, onComplete }: Celeb
       </div>
 
       {/* Celebration card - click to dismiss */}
-      <button
-        type="button"
+      <Card
         onClick={dismiss}
-        className="neo-card p-6 bg-[var(--color-neo-done)] animate-bounce-in pointer-events-auto cursor-pointer hover:scale-105 transition-transform focus:outline-none focus:ring-2 focus:ring-neo-accent"
+        className="p-6 bg-green-500 border-green-600 animate-bounce-in pointer-events-auto cursor-pointer hover:scale-105 transition-transform focus:outline-none focus:ring-2 focus:ring-primary"
+        role="button"
+        tabIndex={0}
       >
-        <div className="flex flex-col items-center gap-4">
+        <CardContent className="p-0 flex flex-col items-center gap-4">
           {/* Icons */}
           <div className="flex items-center gap-2">
-            <Sparkles size={24} className="text-neo-pending animate-pulse" />
-            <PartyPopper size={28} className="text-neo-accent" />
-            <Sparkles size={24} className="text-neo-pending animate-pulse" />
+            <Sparkles size={24} className="text-yellow-300 animate-pulse" />
+            <PartyPopper size={28} className="text-white" />
+            <Sparkles size={24} className="text-yellow-300 animate-pulse" />
           </div>
 
           {/* Avatar celebrating */}
@@ -98,23 +100,23 @@ export function CelebrationOverlay({ agentName, featureName, onComplete }: Celeb
 
           {/* Message */}
           <div className="text-center">
-            <h3 className="font-display text-lg font-bold text-neo-text-on-bright mb-1">
+            <h3 className="font-display text-lg font-bold text-white mb-1">
               Feature Complete!
             </h3>
-            <p className="text-sm text-neo-text-on-bright/80 max-w-[200px] truncate">
+            <p className="text-sm text-white/80 max-w-[200px] truncate">
               {featureName}
             </p>
-            <p className="text-xs text-neo-text-on-bright/60 mt-2">
+            <p className="text-xs text-white/60 mt-2">
               Great job, {agentName}!
             </p>
           </div>
 
           {/* Dismiss hint */}
-          <p className="text-xs text-neo-text-on-bright/40 mt-1">
+          <p className="text-xs text-white/40 mt-1">
             Click or press Esc to dismiss
           </p>
-        </div>
-      </button>
+        </CardContent>
+      </Card>
     </div>
   )
 }
diff --git a/ui/src/components/ChatMessage.tsx b/ui/src/components/ChatMessage.tsx
index a3417b5..4ca9f10 100644
--- a/ui/src/components/ChatMessage.tsx
+++ b/ui/src/components/ChatMessage.tsx
@@ -2,12 +2,13 @@
  * Chat Message Component
  *
  * Displays a single message in the spec creation chat.
- * Supports user, assistant, and system messages with neobrutalism styling.
+ * Supports user, assistant, and system messages with clean styling.
  */
 
 import { memo } from 'react'
 import { Bot, User, Info } from 'lucide-react'
 import type { ChatMessage as ChatMessageType } from '../lib/types'
+import { Card } from '@/components/ui/card'
 
 interface ChatMessageProps {
   message: ChatMessageType
@@ -25,37 +26,34 @@ export const ChatMessage = memo(function ChatMessage({ message }: ChatMessagePro
     minute: '2-digit',
   })
 
-  // Role-specific styling using CSS variables for theme consistency
+  // Role-specific styling
   const roleConfig = {
     user: {
       icon: User,
-      bgColor: 'bg-[var(--color-neo-pending)]',
-      textColor: 'text-[var(--color-neo-text-on-bright)]',
-      borderColor: 'border-[var(--color-neo-border)]',
+      bgColor: 'bg-primary',
+      textColor: 'text-primary-foreground',
       align: 'justify-end',
       bubbleAlign: 'items-end',
-      iconBg: 'bg-[var(--color-neo-pending)]',
-      shadow: 'var(--shadow-neo-md)',
+      iconBg: 'bg-primary',
+      iconColor: 'text-primary-foreground',
     },
     assistant: {
       icon: Bot,
-      bgColor: 'bg-[var(--color-neo-card)]',
-      textColor: 'text-[var(--color-neo-text)]',
-      borderColor: 'border-[var(--color-neo-border)]',
+      bgColor: 'bg-muted',
+      textColor: 'text-foreground',
       align: 'justify-start',
       bubbleAlign: 'items-start',
-      iconBg: 'bg-[var(--color-neo-progress)]',
-      shadow: 'var(--shadow-neo-md)',
+      iconBg: 'bg-secondary',
+      iconColor: 'text-secondary-foreground',
     },
     system: {
       icon: Info,
-      bgColor: 'bg-[var(--color-neo-done)]',
-      textColor: 'text-[var(--color-neo-text-on-bright)]',
-      borderColor: 'border-[var(--color-neo-border)]',
+      bgColor: 'bg-green-100 dark:bg-green-900/30',
+      textColor: 'text-green-900 dark:text-green-100',
       align: 'justify-center',
       bubbleAlign: 'items-center',
-      iconBg: 'bg-[var(--color-neo-done)]',
-      shadow: 'var(--shadow-neo-sm)',
+      iconBg: 'bg-green-500',
+      iconColor: 'text-white',
     },
   }
 
@@ -66,15 +64,7 @@ export const ChatMessage = memo(function ChatMessage({ message }: ChatMessagePro
   if (role === 'system') {
     return (
       <div className={`flex ${config.align} px-4 py-2`}>
-        <div
-          className={`
-            ${config.bgColor}
-            border-2 ${config.borderColor}
-            px-4 py-2
-            text-sm font-mono text-[var(--color-neo-text-on-bright)]
-          `}
-          style={{ boxShadow: 'var(--shadow-neo-sm)' }}
-        >
+        <div className={`${config.bgColor} border border-border rounded-lg px-4 py-2 text-sm font-mono ${config.textColor}`}>
           <span className="flex items-center gap-2">
             <Icon size={14} />
             {content}
@@ -90,28 +80,12 @@ export const ChatMessage = memo(function ChatMessage({ message }: ChatMessagePro
         {/* Message bubble */}
         <div className="flex items-start gap-2">
           {role === 'assistant' && (
-            <div
-              className={`
-                ${config.iconBg}
-                border-2 border-[var(--color-neo-border)]
-                p-1.5
-                flex-shrink-0
-              `}
-              style={{ boxShadow: 'var(--shadow-neo-sm)' }}
-            >
-              <Icon size={16} className="text-[var(--color-neo-text-on-bright)]" />
+            <div className={`${config.iconBg} p-1.5 rounded flex-shrink-0`}>
+              <Icon size={16} className={config.iconColor} />
             </div>
           )}
 
-          <div
-            className={`
-              ${config.bgColor}
-              border-3 ${config.borderColor}
-              px-4 py-3
-              ${isStreaming ? 'animate-pulse-neo' : ''}
-            `}
-            style={{ boxShadow: config.shadow }}
-          >
+          <Card className={`${config.bgColor} px-4 py-3 border ${isStreaming ? 'animate-pulse' : ''}`}>
             {/* Parse content for basic markdown-like formatting */}
             {content && (
               <div className={`whitespace-pre-wrap text-sm leading-relaxed ${config.textColor}`}>
@@ -152,19 +126,15 @@ export const ChatMessage = memo(function ChatMessage({ message }: ChatMessagePro
             {attachments && attachments.length > 0 && (
               <div className={`flex flex-wrap gap-2 ${content ? 'mt-3' : ''}`}>
                 {attachments.map((attachment) => (
-                  <div
-                    key={attachment.id}
-                    className="border-2 border-[var(--color-neo-border)] p-1 bg-[var(--color-neo-card)]"
-                    style={{ boxShadow: 'var(--shadow-neo-sm)' }}
-                  >
+                  <div key={attachment.id} className="border border-border rounded p-1 bg-card">
                     <img
                       src={attachment.previewUrl}
                       alt={attachment.filename}
-                      className="max-w-48 max-h-48 object-contain cursor-pointer hover:opacity-90 transition-opacity"
+                      className="max-w-48 max-h-48 object-contain cursor-pointer hover:opacity-90 transition-opacity rounded"
                       onClick={() => window.open(attachment.previewUrl, '_blank')}
                       title={`${attachment.filename} (click to enlarge)`}
                     />
-                    <span className="text-xs text-[var(--color-neo-text-secondary)] block mt-1 text-center">
+                    <span className="text-xs text-muted-foreground block mt-1 text-center">
                       {attachment.filename}
                     </span>
                   </div>
@@ -174,27 +144,19 @@ export const ChatMessage = memo(function ChatMessage({ message }: ChatMessagePro
 
             {/* Streaming indicator */}
             {isStreaming && (
-              <span className="inline-block w-2 h-4 bg-[var(--color-neo-accent)] ml-1 animate-pulse" />
+              <span className="inline-block w-2 h-4 bg-primary ml-1 animate-pulse rounded" />
             )}
-          </div>
+          </Card>
 
           {role === 'user' && (
-            <div
-              className={`
-                ${config.iconBg}
-                border-2 border-[var(--color-neo-border)]
-                p-1.5
-                flex-shrink-0
-              `}
-              style={{ boxShadow: 'var(--shadow-neo-sm)' }}
-            >
-              <Icon size={16} className="text-[var(--color-neo-text-on-bright)]" />
+            <div className={`${config.iconBg} p-1.5 rounded flex-shrink-0`}>
+              <Icon size={16} className={config.iconColor} />
             </div>
           )}
         </div>
 
         {/* Timestamp */}
-        <span className="text-xs text-[var(--color-neo-text-secondary)] font-mono px-2">
+        <span className="text-xs text-muted-foreground font-mono px-2">
           {timeString}
         </span>
       </div>
diff --git a/ui/src/components/ConfirmDialog.tsx b/ui/src/components/ConfirmDialog.tsx
index 6e6a2a5..6d04893 100644
--- a/ui/src/components/ConfirmDialog.tsx
+++ b/ui/src/components/ConfirmDialog.tsx
@@ -1,12 +1,21 @@
 /**
  * ConfirmDialog Component
  *
- * A reusable confirmation dialog following the neobrutalism design system.
+ * A reusable confirmation dialog using ShadCN Dialog components.
  * Used to confirm destructive actions like deleting projects.
  */
 
 import type { ReactNode } from 'react'
-import { AlertTriangle, X } from 'lucide-react'
+import { AlertTriangle } from 'lucide-react'
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog'
+import { Button } from '@/components/ui/button'
 
 interface ConfirmDialogProps {
   isOpen: boolean
@@ -31,74 +40,39 @@ export function ConfirmDialog({
   onConfirm,
   onCancel,
 }: ConfirmDialogProps) {
-  if (!isOpen) return null
-
-  const variantColors = {
-    danger: {
-      icon: 'var(--color-neo-danger)',
-      button: 'neo-btn-danger',
-    },
-    warning: {
-      icon: 'var(--color-neo-pending)',
-      button: 'neo-btn-warning',
-    },
-  }
-
-  const colors = variantColors[variant]
-
   return (
-    <div className="neo-modal-backdrop" onClick={onCancel}>
-      <div
-        className="neo-modal w-full max-w-md"
-        onClick={(e) => e.stopPropagation()}
-      >
-        {/* Header */}
-        <div className="flex items-center justify-between p-4 border-b-3 border-[var(--color-neo-border)]">
+    <Dialog open={isOpen} onOpenChange={(open) => !open && onCancel()}>
+      <DialogContent className="sm:max-w-md">
+        <DialogHeader>
           <div className="flex items-center gap-3">
             <div
-              className="p-2 border-2 border-[var(--color-neo-border)]"
-              style={{ boxShadow: 'var(--shadow-neo-sm)', backgroundColor: colors.icon }}
+              className={`p-2 rounded-lg ${
+                variant === 'danger'
+                  ? 'bg-destructive/10 text-destructive'
+                  : 'bg-primary/10 text-primary'
+              }`}
             >
-              <AlertTriangle size={20} className="text-[var(--color-neo-text-on-bright)]" />
+              <AlertTriangle size={20} />
             </div>
-            <h2 className="font-display font-bold text-lg text-[var(--color-neo-text)]">
-              {title}
-            </h2>
+            <DialogTitle>{title}</DialogTitle>
           </div>
-          <button
-            onClick={onCancel}
-            className="neo-btn neo-btn-ghost p-2"
+        </DialogHeader>
+        <DialogDescription asChild>
+          <div className="text-muted-foreground">{message}</div>
+        </DialogDescription>
+        <DialogFooter className="gap-2 sm:gap-0">
+          <Button variant="outline" onClick={onCancel} disabled={isLoading}>
+            {cancelLabel}
+          </Button>
+          <Button
+            variant={variant === 'danger' ? 'destructive' : 'default'}
+            onClick={onConfirm}
             disabled={isLoading}
           >
-            <X size={20} />
-          </button>
-        </div>
-
-        {/* Content */}
-        <div className="p-6">
-          <div className="text-[var(--color-neo-text-secondary)] mb-6">
-            {message}
-          </div>
-
-          {/* Actions */}
-          <div className="flex justify-end gap-3">
-            <button
-              onClick={onCancel}
-              className="neo-btn"
-              disabled={isLoading}
-            >
-              {cancelLabel}
-            </button>
-            <button
-              onClick={onConfirm}
-              className={`neo-btn ${colors.button}`}
-              disabled={isLoading}
-            >
-              {isLoading ? 'Deleting...' : confirmLabel}
-            </button>
-          </div>
-        </div>
-      </div>
-    </div>
+            {isLoading ? 'Deleting...' : confirmLabel}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
   )
 }
diff --git a/ui/src/components/ConversationHistory.tsx b/ui/src/components/ConversationHistory.tsx
index db31c58..cbafe79 100644
--- a/ui/src/components/ConversationHistory.tsx
+++ b/ui/src/components/ConversationHistory.tsx
@@ -10,6 +10,8 @@ import { MessageSquare, Trash2, Loader2, AlertCircle } from 'lucide-react'
 import { useConversations, useDeleteConversation } from '../hooks/useConversations'
 import { ConfirmDialog } from './ConfirmDialog'
 import type { AssistantConversation } from '../lib/types'
+import { Button } from '@/components/ui/button'
+import { Card, CardContent, CardHeader } from '@/components/ui/card'
 
 interface ConversationHistoryProps {
   projectName: string
@@ -116,78 +118,73 @@ export function ConversationHistory({
       />
 
       {/* Dropdown */}
-      <div
-        className="absolute top-full left-0 mt-2 neo-dropdown z-50 w-[320px] max-w-[calc(100vw-2rem)]"
-        style={{ boxShadow: 'var(--shadow-neo)' }}
-      >
+      <Card className="absolute top-full left-0 mt-2 z-50 w-[320px] max-w-[calc(100vw-2rem)] shadow-lg">
         {/* Header */}
-        <div className="px-3 py-2 border-b-2 border-[var(--color-neo-border)] bg-[var(--color-neo-bg)]">
+        <CardHeader className="p-3 border-b border-border">
           <h3 className="font-bold text-sm">Conversation History</h3>
-        </div>
+        </CardHeader>
 
         {/* Content */}
-        {isLoading ? (
-          <div className="p-4 flex items-center justify-center">
-            <Loader2 size={20} className="animate-spin text-[var(--color-neo-text-secondary)]" />
-          </div>
-        ) : !conversations || conversations.length === 0 ? (
-          <div className="p-4 text-center text-[var(--color-neo-text-secondary)] text-sm">
-            No conversations yet
-          </div>
-        ) : (
-          <div className="max-h-[300px] overflow-auto">
-            {conversations.map((conversation) => {
-              const isCurrent = conversation.id === currentConversationId
+        <CardContent className="p-0">
+          {isLoading ? (
+            <div className="p-4 flex items-center justify-center">
+              <Loader2 size={20} className="animate-spin text-muted-foreground" />
+            </div>
+          ) : !conversations || conversations.length === 0 ? (
+            <div className="p-4 text-center text-muted-foreground text-sm">
+              No conversations yet
+            </div>
+          ) : (
+            <div className="max-h-[300px] overflow-y-auto">
+              {conversations.map((conversation) => {
+                const isCurrent = conversation.id === currentConversationId
 
-              return (
-                <div
-                  key={conversation.id}
-                  className={`flex items-center group ${
-                    isCurrent
-                      ? 'bg-[var(--color-neo-pending)] text-[var(--color-neo-text-on-bright)]'
-                      : ''
-                  }`}
-                >
-                  <button
-                    onClick={() => handleSelectConversation(conversation.id)}
-                    className="flex-1 neo-dropdown-item text-left"
-                    disabled={isCurrent}
+                return (
+                  <div
+                    key={conversation.id}
+                    className={`flex items-center group ${
+                      isCurrent ? 'bg-primary/10' : 'hover:bg-muted'
+                    }`}
                   >
-                    <div className="flex items-start gap-2">
-                      <MessageSquare size={16} className="mt-0.5 flex-shrink-0" />
-                      <div className="flex-1 min-w-0">
-                        <div className="font-medium truncate">
-                          {conversation.title || 'Untitled conversation'}
-                        </div>
-                        <div className={`text-xs flex items-center gap-2 ${
-                          isCurrent
-                            ? 'text-[var(--color-neo-text-on-bright)] opacity-80'
-                            : 'text-[var(--color-neo-text-secondary)]'
-                        }`}>
-                          <span>{conversation.message_count} messages</span>
-                          <span>|</span>
-                          <span>{formatRelativeTime(conversation.updated_at)}</span>
+                    <button
+                      onClick={() => handleSelectConversation(conversation.id)}
+                      className="flex-1 px-3 py-2 text-left"
+                      disabled={isCurrent}
+                    >
+                      <div className="flex items-start gap-2">
+                        <MessageSquare size={16} className="mt-0.5 flex-shrink-0 text-muted-foreground" />
+                        <div className="flex-1 min-w-0">
+                          <div className="font-medium truncate text-foreground">
+                            {conversation.title || 'Untitled conversation'}
+                          </div>
+                          <div className="text-xs flex items-center gap-2 text-muted-foreground">
+                            <span>{conversation.message_count} messages</span>
+                            <span>|</span>
+                            <span>{formatRelativeTime(conversation.updated_at)}</span>
+                          </div>
                         </div>
                       </div>
-                    </div>
-                  </button>
-                  <button
-                    onClick={(e) => handleDeleteClick(e, conversation)}
-                    className={`p-2 mr-2 transition-colors rounded ${
-                      isCurrent
-                        ? 'text-[var(--color-neo-text-on-bright)] opacity-60 hover:opacity-100 hover:bg-[var(--color-neo-danger)]/20'
-                        : 'text-[var(--color-neo-text-secondary)] opacity-0 group-hover:opacity-100 hover:text-[var(--color-neo-danger)] hover:bg-[var(--color-neo-danger)]/10'
-                    }`}
-                    title="Delete conversation"
-                  >
-                    <Trash2 size={14} />
-                  </button>
-                </div>
-              )
-            })}
-          </div>
-        )}
-      </div>
+                    </button>
+                    <Button
+                      variant="ghost"
+                      size="icon"
+                      onClick={(e) => handleDeleteClick(e, conversation)}
+                      className={`h-8 w-8 mr-2 ${
+                        isCurrent
+                          ? 'opacity-60 hover:opacity-100'
+                          : 'opacity-0 group-hover:opacity-100'
+                      } hover:text-destructive hover:bg-destructive/10`}
+                      title="Delete conversation"
+                    >
+                      <Trash2 size={14} />
+                    </Button>
+                  </div>
+                )
+              })}
+            </div>
+          )}
+        </CardContent>
+      </Card>
 
       {/* Delete Confirmation Dialog */}
       <ConfirmDialog
@@ -197,7 +194,7 @@ export function ConversationHistory({
           deleteError ? (
             <div className="space-y-3">
               <p>{`Are you sure you want to delete "${conversationToDelete?.title || 'this conversation'}"? This action cannot be undone.`}</p>
-              <div className="flex items-center gap-2 p-2 bg-[var(--color-neo-danger)]/10 border border-[var(--color-neo-danger)] rounded text-sm text-[var(--color-neo-danger)]">
+              <div className="flex items-center gap-2 p-2 bg-destructive/10 border border-destructive rounded text-sm text-destructive">
                 <AlertCircle size={16} className="flex-shrink-0" />
                 <span>{deleteError}</span>
               </div>
diff --git a/ui/src/components/DebugLogViewer.tsx b/ui/src/components/DebugLogViewer.tsx
index 1492d1f..80b6249 100644
--- a/ui/src/components/DebugLogViewer.tsx
+++ b/ui/src/components/DebugLogViewer.tsx
@@ -12,6 +12,8 @@ import { Terminal } from './Terminal'
 import { TerminalTabs } from './TerminalTabs'
 import { listTerminals, createTerminal, renameTerminal, deleteTerminal } from '@/lib/api'
 import type { TerminalInfo } from '@/lib/types'
+import { Button } from '@/components/ui/button'
+import { Badge } from '@/components/ui/badge'
 
 const MIN_HEIGHT = 150
 const MAX_HEIGHT = 600
@@ -273,18 +275,18 @@ export function DebugLogViewer({
     return 'info'
   }
 
-  // Get color class for log level using theme CSS variables
+  // Get color class for log level
   const getLogColor = (level: LogLevel): string => {
     switch (level) {
       case 'error':
-        return 'text-[var(--color-neo-log-error)]'
+        return 'text-red-500'
       case 'warn':
-        return 'text-[var(--color-neo-log-warning)]'
+        return 'text-yellow-500'
       case 'debug':
-        return 'text-[var(--color-neo-log-debug)]'
+        return 'text-blue-400'
       case 'info':
       default:
-        return 'text-[var(--color-neo-log-info)]'
+        return 'text-foreground'
     }
   }
 
@@ -316,89 +318,83 @@ export function DebugLogViewer({
           className="absolute top-0 left-0 right-0 h-2 cursor-ns-resize group flex items-center justify-center -translate-y-1/2 z-50"
           onMouseDown={handleResizeStart}
         >
-          <div className="w-16 h-1.5 bg-[var(--color-neo-border)] rounded-full group-hover:bg-[var(--color-neo-text-secondary)] transition-colors flex items-center justify-center">
-            <GripHorizontal size={12} className="text-[var(--color-neo-text-muted)] group-hover:text-[var(--color-neo-text-secondary)]" />
+          <div className="w-16 h-1.5 bg-border rounded-full group-hover:bg-muted-foreground transition-colors flex items-center justify-center">
+            <GripHorizontal size={12} className="text-muted-foreground group-hover:text-foreground" />
           </div>
         </div>
       )}
 
       {/* Header bar */}
       <div
-        className="flex items-center justify-between h-10 px-4 bg-[var(--color-neo-border)] border-t-3 border-[var(--color-neo-text)]"
+        className="flex items-center justify-between h-10 px-4 bg-muted border-t border-border"
       >
         <div className="flex items-center gap-2">
           {/* Collapse/expand toggle */}
           <button
             onClick={onToggle}
-            className="flex items-center gap-2 hover:bg-[var(--color-neo-hover-subtle)] px-2 py-1 rounded transition-colors cursor-pointer"
+            className="flex items-center gap-2 hover:bg-accent px-2 py-1 rounded transition-colors cursor-pointer"
           >
-            <TerminalIcon size={16} className="text-[var(--color-neo-done)]" />
-            <span className="font-mono text-sm text-[var(--color-neo-bg)] font-bold">
+            <TerminalIcon size={16} className="text-green-500" />
+            <span className="font-mono text-sm text-foreground font-bold">
               Debug
             </span>
-            <span className="px-1.5 py-0.5 text-xs font-mono bg-[var(--color-neo-card)] text-[var(--color-neo-text-muted)] rounded" title="Toggle debug panel">
+            <Badge variant="secondary" className="text-xs font-mono" title="Toggle debug panel">
               D
-            </span>
+            </Badge>
           </button>
 
           {/* Tabs - only visible when open */}
           {isOpen && (
             <div className="flex items-center gap-1 ml-4">
-              <button
+              <Button
+                variant={activeTab === 'agent' ? 'secondary' : 'ghost'}
+                size="sm"
                 onClick={(e) => {
                   e.stopPropagation()
                   setActiveTab('agent')
                 }}
-                className={`flex items-center gap-1.5 px-3 py-1 text-xs font-mono rounded transition-colors ${
-                  activeTab === 'agent'
-                    ? 'bg-[var(--color-neo-card)] text-[var(--color-neo-text)]'
-                    : 'text-[var(--color-neo-text-muted)] hover:text-[var(--color-neo-text)] hover:bg-[var(--color-neo-hover-subtle)]'
-                }`}
+                className="h-7 text-xs font-mono gap-1.5"
               >
                 <Cpu size={12} />
                 Agent
                 {logs.length > 0 && (
-                  <span className="px-1.5 py-0.5 text-[10px] bg-[var(--color-neo-text-secondary)] text-[var(--color-neo-bg)] rounded">
+                  <Badge variant="default" className="h-4 px-1.5 text-[10px]">
                     {logs.length}
-                  </span>
+                  </Badge>
                 )}
-              </button>
-              <button
+              </Button>
+              <Button
+                variant={activeTab === 'devserver' ? 'secondary' : 'ghost'}
+                size="sm"
                 onClick={(e) => {
                   e.stopPropagation()
                   setActiveTab('devserver')
                 }}
-                className={`flex items-center gap-1.5 px-3 py-1 text-xs font-mono rounded transition-colors ${
-                  activeTab === 'devserver'
-                    ? 'bg-[var(--color-neo-card)] text-[var(--color-neo-text)]'
-                    : 'text-[var(--color-neo-text-muted)] hover:text-[var(--color-neo-text)] hover:bg-[var(--color-neo-hover-subtle)]'
-                }`}
+                className="h-7 text-xs font-mono gap-1.5"
               >
                 <Server size={12} />
                 Dev Server
                 {devLogs.length > 0 && (
-                  <span className="px-1.5 py-0.5 text-[10px] bg-[var(--color-neo-text-secondary)] text-[var(--color-neo-bg)] rounded">
+                  <Badge variant="default" className="h-4 px-1.5 text-[10px]">
                     {devLogs.length}
-                  </span>
+                  </Badge>
                 )}
-              </button>
-              <button
+              </Button>
+              <Button
+                variant={activeTab === 'terminal' ? 'secondary' : 'ghost'}
+                size="sm"
                 onClick={(e) => {
                   e.stopPropagation()
                   setActiveTab('terminal')
                 }}
-                className={`flex items-center gap-1.5 px-3 py-1 text-xs font-mono rounded transition-colors ${
-                  activeTab === 'terminal'
-                    ? 'bg-[var(--color-neo-card)] text-[var(--color-neo-text)]'
-                    : 'text-[var(--color-neo-text-muted)] hover:text-[var(--color-neo-text)] hover:bg-[var(--color-neo-hover-subtle)]'
-                }`}
+                className="h-7 text-xs font-mono gap-1.5"
               >
                 <TerminalIcon size={12} />
                 Terminal
-                <span className="px-1.5 py-0.5 text-[10px] bg-[var(--color-neo-text-secondary)] text-[var(--color-neo-text-muted)] rounded" title="Toggle terminal">
+                <Badge variant="outline" className="h-4 px-1.5 text-[10px]" title="Toggle terminal">
                   T
-                </span>
-              </button>
+                </Badge>
+              </Button>
             </div>
           )}
 
@@ -406,14 +402,14 @@ export function DebugLogViewer({
           {isOpen && activeTab !== 'terminal' && (
             <>
               {getCurrentLogCount() > 0 && (
-                <span className="px-2 py-0.5 text-xs font-mono bg-[var(--color-neo-card)] text-[var(--color-neo-text-secondary)] rounded ml-2">
+                <Badge variant="secondary" className="ml-2 font-mono">
                   {getCurrentLogCount()}
-                </span>
+                </Badge>
               )}
               {isAutoScrollPaused() && (
-                <span className="px-2 py-0.5 text-xs font-mono bg-[var(--color-neo-pending)] text-[var(--color-neo-text-on-bright)] rounded">
+                <Badge variant="default" className="bg-yellow-500 text-yellow-950">
                   Paused
-                </span>
+                </Badge>
               )}
             </>
           )}
@@ -422,22 +418,24 @@ export function DebugLogViewer({
         <div className="flex items-center gap-2">
           {/* Clear button - only for log tabs */}
           {isOpen && activeTab !== 'terminal' && (
-            <button
+            <Button
+              variant="ghost"
+              size="icon"
               onClick={(e) => {
                 e.stopPropagation()
                 handleClear()
               }}
-              className="p-1.5 hover:bg-[var(--color-neo-hover-subtle)] rounded transition-colors"
+              className="h-7 w-7"
               title="Clear logs"
             >
-              <Trash2 size={14} className="text-[var(--color-neo-text-muted)]" />
-            </button>
+              <Trash2 size={14} className="text-muted-foreground" />
+            </Button>
           )}
           <div className="p-1">
             {isOpen ? (
-              <ChevronDown size={16} className="text-[var(--color-neo-text-muted)]" />
+              <ChevronDown size={16} className="text-muted-foreground" />
             ) : (
-              <ChevronUp size={16} className="text-[var(--color-neo-text-muted)]" />
+              <ChevronUp size={16} className="text-muted-foreground" />
             )}
           </div>
         </div>
@@ -445,7 +443,7 @@ export function DebugLogViewer({
 
       {/* Content area */}
       {isOpen && (
-        <div className="h-[calc(100%-2.5rem)] bg-[var(--color-neo-border)]">
+        <div className="h-[calc(100%-2.5rem)] bg-card">
           {/* Agent Logs Tab */}
           {activeTab === 'agent' && (
             <div
@@ -454,7 +452,7 @@ export function DebugLogViewer({
               className="h-full overflow-y-auto p-2 font-mono text-sm"
             >
               {logs.length === 0 ? (
-                <div className="flex items-center justify-center h-full text-[var(--color-neo-text-muted)]">
+                <div className="flex items-center justify-center h-full text-muted-foreground">
                   No logs yet. Start the agent to see output.
                 </div>
               ) : (
@@ -467,9 +465,9 @@ export function DebugLogViewer({
                     return (
                       <div
                         key={`${log.timestamp}-${index}`}
-                        className="flex gap-2 hover:bg-[var(--color-neo-hover-subtle)] px-1 py-0.5 rounded"
+                        className="flex gap-2 hover:bg-muted px-1 py-0.5 rounded"
                       >
-                        <span className="text-[var(--color-neo-text-muted)] select-none shrink-0">
+                        <span className="text-muted-foreground select-none shrink-0">
                           {timestamp}
                         </span>
                         <span className={`${colorClass} whitespace-pre-wrap break-all`}>
@@ -491,7 +489,7 @@ export function DebugLogViewer({
               className="h-full overflow-y-auto p-2 font-mono text-sm"
             >
               {devLogs.length === 0 ? (
-                <div className="flex items-center justify-center h-full text-[var(--color-neo-text-muted)]">
+                <div className="flex items-center justify-center h-full text-muted-foreground">
                   No dev server logs yet.
                 </div>
               ) : (
@@ -504,9 +502,9 @@ export function DebugLogViewer({
                     return (
                       <div
                         key={`${log.timestamp}-${index}`}
-                        className="flex gap-2 hover:bg-[var(--color-neo-hover-subtle)] px-1 py-0.5 rounded"
+                        className="flex gap-2 hover:bg-muted px-1 py-0.5 rounded"
                       >
-                        <span className="text-[var(--color-neo-text-muted)] select-none shrink-0">
+                        <span className="text-muted-foreground select-none shrink-0">
                           {timestamp}
                         </span>
                         <span className={`${colorClass} whitespace-pre-wrap break-all`}>
@@ -538,11 +536,11 @@ export function DebugLogViewer({
               {/* Terminal content - render all terminals and show/hide to preserve buffers */}
               <div className="flex-1 min-h-0 relative">
                 {isLoadingTerminals ? (
-                  <div className="h-full flex items-center justify-center text-[var(--color-neo-text-muted)] font-mono text-sm">
+                  <div className="h-full flex items-center justify-center text-muted-foreground font-mono text-sm">
                     Loading terminals...
                   </div>
                 ) : terminals.length === 0 ? (
-                  <div className="h-full flex items-center justify-center text-[var(--color-neo-text-muted)] font-mono text-sm">
+                  <div className="h-full flex items-center justify-center text-muted-foreground font-mono text-sm">
                     No terminal available
                   </div>
                 ) : (
diff --git a/ui/src/components/DependencyBadge.tsx b/ui/src/components/DependencyBadge.tsx
index 48f2e97..143f592 100644
--- a/ui/src/components/DependencyBadge.tsx
+++ b/ui/src/components/DependencyBadge.tsx
@@ -1,5 +1,6 @@
 import { AlertTriangle, GitBranch, Check } from 'lucide-react'
 import type { Feature } from '../lib/types'
+import { Badge } from '@/components/ui/badge'
 
 interface DependencyBadgeProps {
   feature: Feature
@@ -38,14 +39,13 @@ export function DependencyBadge({ feature, allFeatures = [], compact = false }:
   if (compact) {
     // Compact view for card displays
     return (
-      <div
-        className={`
-          inline-flex items-center gap-1 text-xs px-2 py-0.5 rounded-full font-mono
-          ${isBlocked
-            ? 'bg-neo-danger/20 text-neo-danger'
-            : 'bg-neo-neutral-200 text-neo-text-secondary'
-          }
-        `}
+      <Badge
+        variant="outline"
+        className={`gap-1 font-mono text-xs ${
+          isBlocked
+            ? 'bg-destructive/10 text-destructive border-destructive/30'
+            : 'bg-muted text-muted-foreground'
+        }`}
         title={isBlocked
           ? `Blocked by ${blockingCount} ${blockingCount === 1 ? 'dependency' : 'dependencies'}`
           : `${satisfiedCount}/${dependencies.length} dependencies satisfied`
@@ -62,7 +62,7 @@ export function DependencyBadge({ feature, allFeatures = [], compact = false }:
             <span>{satisfiedCount}/{dependencies.length}</span>
           </>
         )}
-      </div>
+      </Badge>
     )
   }
 
@@ -70,15 +70,15 @@ export function DependencyBadge({ feature, allFeatures = [], compact = false }:
   return (
     <div className="flex items-center gap-2">
       {isBlocked ? (
-        <div className="flex items-center gap-1.5 text-sm text-neo-danger">
+        <div className="flex items-center gap-1.5 text-sm text-destructive">
           <AlertTriangle size={14} />
           <span className="font-medium">
             Blocked by {blockingCount} {blockingCount === 1 ? 'dependency' : 'dependencies'}
           </span>
         </div>
       ) : (
-        <div className="flex items-center gap-1.5 text-sm text-neo-text-secondary">
-          <Check size={14} className="text-neo-done" />
+        <div className="flex items-center gap-1.5 text-sm text-muted-foreground">
+          <Check size={14} className="text-primary" />
           <span>
             All {dependencies.length} {dependencies.length === 1 ? 'dependency' : 'dependencies'} satisfied
           </span>
@@ -102,7 +102,7 @@ export function DependencyIndicator({ feature }: { feature: Feature }) {
   if (isBlocked) {
     return (
       <span
-        className="inline-flex items-center justify-center w-5 h-5 rounded-full bg-neo-danger/20 text-neo-danger"
+        className="inline-flex items-center justify-center w-5 h-5 rounded-full bg-destructive/10 text-destructive"
         title={`Blocked by ${feature.blocking_dependencies?.length || 0} dependencies`}
       >
         <AlertTriangle size={12} />
@@ -112,7 +112,7 @@ export function DependencyIndicator({ feature }: { feature: Feature }) {
 
   return (
     <span
-      className="inline-flex items-center justify-center w-5 h-5 rounded-full bg-neo-neutral-200 text-neo-text-secondary"
+      className="inline-flex items-center justify-center w-5 h-5 rounded-full bg-muted text-muted-foreground"
       title={`${dependencies.length} dependencies (all satisfied)`}
     >
       <GitBranch size={12} />
diff --git a/ui/src/components/DependencyGraph.tsx b/ui/src/components/DependencyGraph.tsx
index 689892b..3061548 100644
--- a/ui/src/components/DependencyGraph.tsx
+++ b/ui/src/components/DependencyGraph.tsx
@@ -18,6 +18,8 @@ import dagre from 'dagre'
 import { CheckCircle2, Circle, Loader2, AlertTriangle, RefreshCw } from 'lucide-react'
 import type { DependencyGraph as DependencyGraphData, GraphNode, ActiveAgent, AgentMascot, AgentState } from '../lib/types'
 import { AgentAvatar } from './AgentAvatar'
+import { Button } from '@/components/ui/button'
+import { Card, CardContent } from '@/components/ui/card'
 import '@xyflow/react/dist/style.css'
 
 // Node dimensions
@@ -69,20 +71,17 @@ class GraphErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryStat
   render() {
     if (this.state.hasError) {
       return (
-        <div className="h-full w-full flex items-center justify-center bg-neo-neutral-100">
+        <div className="h-full w-full flex items-center justify-center bg-muted">
           <div className="text-center p-6">
-            <AlertTriangle size={48} className="mx-auto mb-4 text-neo-warning" />
-            <div className="text-neo-text font-bold mb-2">Graph rendering error</div>
-            <div className="text-sm text-neo-text-secondary mb-4">
+            <AlertTriangle size={48} className="mx-auto mb-4 text-yellow-500" />
+            <div className="text-foreground font-bold mb-2">Graph rendering error</div>
+            <div className="text-sm text-muted-foreground mb-4">
               The dependency graph encountered an issue.
             </div>
-            <button
-              onClick={this.handleReset}
-              className="inline-flex items-center gap-2 px-4 py-2 bg-neo-accent text-white rounded border-2 border-neo-border shadow-neo-sm hover:shadow-neo-md transition-all"
-            >
+            <Button onClick={this.handleReset} className="gap-2">
               <RefreshCw size={16} />
               Reload Graph
-            </button>
+            </Button>
           </div>
         </div>
       )
@@ -95,32 +94,39 @@ class GraphErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryStat
 // Custom node component
 function FeatureNode({ data }: { data: GraphNode & { onClick?: () => void; agent?: NodeAgentInfo } }) {
   const statusColors = {
-    pending: 'bg-neo-pending border-neo-border',
-    in_progress: 'bg-neo-progress border-neo-border',
-    done: 'bg-neo-done border-neo-border',
-    blocked: 'bg-neo-danger/20 border-neo-danger',
+    pending: 'bg-yellow-100 border-yellow-300 dark:bg-yellow-900/30 dark:border-yellow-700',
+    in_progress: 'bg-cyan-100 border-cyan-300 dark:bg-cyan-900/30 dark:border-cyan-700',
+    done: 'bg-green-100 border-green-300 dark:bg-green-900/30 dark:border-green-700',
+    blocked: 'bg-red-50 border-red-300 dark:bg-red-900/20 dark:border-red-700',
+  }
+
+  const textColors = {
+    pending: 'text-yellow-900 dark:text-yellow-100',
+    in_progress: 'text-cyan-900 dark:text-cyan-100',
+    done: 'text-green-900 dark:text-green-100',
+    blocked: 'text-red-900 dark:text-red-100',
   }
 
   const StatusIcon = () => {
     switch (data.status) {
       case 'done':
-        return <CheckCircle2 size={16} className="text-neo-text-on-bright" />
+        return <CheckCircle2 size={16} className={textColors[data.status]} />
       case 'in_progress':
-        return <Loader2 size={16} className="text-neo-text-on-bright animate-spin" />
+        return <Loader2 size={16} className={`${textColors[data.status]} animate-spin`} />
       case 'blocked':
-        return <AlertTriangle size={16} className="text-neo-danger" />
+        return <AlertTriangle size={16} className="text-destructive" />
       default:
-        return <Circle size={16} className="text-neo-text-on-bright" />
+        return <Circle size={16} className={textColors[data.status]} />
     }
   }
 
   return (
     <>
-      <Handle type="target" position={Position.Left} className="!bg-neo-border !w-2 !h-2" />
+      <Handle type="target" position={Position.Left} className="!bg-border !w-2 !h-2" />
       <div
         className={`
           px-4 py-3 rounded-lg border-2 cursor-pointer
-          transition-all hover:shadow-neo-md relative
+          transition-all hover:shadow-md relative
           ${statusColors[data.status]}
         `}
         onClick={data.onClick}
@@ -129,31 +135,31 @@ function FeatureNode({ data }: { data: GraphNode & { onClick?: () => void; agent
         {/* Agent avatar badge - positioned at top right */}
         {data.agent && (
           <div className="absolute -top-3 -right-3 z-10">
-            <div className="rounded-full border-2 border-neo-border bg-white shadow-neo-sm">
+            <div className="rounded-full border-2 border-border bg-background shadow-sm">
               <AgentAvatar name={data.agent.name} state={data.agent.state} size="sm" />
             </div>
           </div>
         )}
         <div className="flex items-center gap-2 mb-1">
           <StatusIcon />
-          <span className="text-xs font-mono text-neo-text-on-bright/70">
+          <span className={`text-xs font-mono ${textColors[data.status]} opacity-70`}>
             #{data.priority}
           </span>
           {/* Show agent name inline if present */}
           {data.agent && (
-            <span className="text-xs font-bold text-neo-text-on-bright ml-auto">
+            <span className={`text-xs font-bold ${textColors[data.status]} ml-auto`}>
               {data.agent.name}
             </span>
           )}
         </div>
-        <div className="font-bold text-sm text-neo-text-on-bright truncate" title={data.name}>
+        <div className={`font-bold text-sm ${textColors[data.status]} truncate`} title={data.name}>
           {data.name}
         </div>
-        <div className="text-xs text-neo-text-on-bright/70 truncate" title={data.category}>
+        <div className={`text-xs ${textColors[data.status]} opacity-70 truncate`} title={data.category}>
           {data.category}
         </div>
       </div>
-      <Handle type="source" position={Position.Right} className="!bg-neo-border !w-2 !h-2" />
+      <Handle type="source" position={Position.Right} className="!bg-border !w-2 !h-2" />
     </>
   )
 }
@@ -249,10 +255,10 @@ function DependencyGraphInner({ graphData, onNodeClick, activeAgents = [] }: Dep
       target: String(edge.target),
       type: 'smoothstep',
       animated: false,
-      style: { stroke: 'var(--color-neo-border)', strokeWidth: 2 },
+      style: { stroke: '#a1a1aa', strokeWidth: 2 },
       markerEnd: {
         type: MarkerType.ArrowClosed,
-        color: 'var(--color-neo-border)',
+        color: '#a1a1aa',
       },
     }))
 
@@ -308,22 +314,22 @@ function DependencyGraphInner({ graphData, onNodeClick, activeAgents = [] }: Dep
     const status = (node.data as unknown as GraphNode).status
     switch (status) {
       case 'done':
-        return 'var(--color-neo-done)'
+        return '#22c55e' // green-500
       case 'in_progress':
-        return 'var(--color-neo-progress)'
+        return '#06b6d4' // cyan-500
       case 'blocked':
-        return 'var(--color-neo-danger)'
+        return '#ef4444' // red-500
       default:
-        return 'var(--color-neo-pending)'
+        return '#eab308' // yellow-500
     }
   }, [])
 
   if (graphData.nodes.length === 0) {
     return (
-      <div className="h-full w-full flex items-center justify-center bg-neo-neutral-100">
+      <div className="h-full w-full flex items-center justify-center bg-muted">
         <div className="text-center">
-          <div className="text-neo-text-secondary mb-2">No features to display</div>
-          <div className="text-sm text-neo-text-muted">
+          <div className="text-muted-foreground mb-2">No features to display</div>
+          <div className="text-sm text-muted-foreground/70">
             Create features to see the dependency graph
           </div>
         </div>
@@ -332,57 +338,49 @@ function DependencyGraphInner({ graphData, onNodeClick, activeAgents = [] }: Dep
   }
 
   return (
-    <div className="h-full w-full relative bg-neo-neutral-50">
+    <div className="h-full w-full relative bg-background">
       {/* Layout toggle */}
       <div className="absolute top-4 left-4 z-10 flex gap-2">
-        <button
+        <Button
+          variant={direction === 'LR' ? 'default' : 'outline'}
+          size="sm"
           onClick={() => onLayout('LR')}
-          className={`
-            px-3 py-1.5 text-sm font-medium rounded border-2 border-neo-border transition-all
-            ${direction === 'LR'
-              ? 'bg-neo-accent text-white shadow-neo-sm'
-              : 'bg-white text-neo-text hover:bg-neo-neutral-100'
-            }
-          `}
         >
           Horizontal
-        </button>
-        <button
+        </Button>
+        <Button
+          variant={direction === 'TB' ? 'default' : 'outline'}
+          size="sm"
           onClick={() => onLayout('TB')}
-          className={`
-            px-3 py-1.5 text-sm font-medium rounded border-2 border-neo-border transition-all
-            ${direction === 'TB'
-              ? 'bg-neo-accent text-white shadow-neo-sm'
-              : 'bg-white text-neo-text hover:bg-neo-neutral-100'
-            }
-          `}
         >
           Vertical
-        </button>
+        </Button>
       </div>
 
       {/* Legend */}
-      <div className="absolute top-4 right-4 z-10 bg-white border-2 border-neo-border rounded-lg p-3 shadow-neo-sm">
-        <div className="text-xs font-bold mb-2">Status</div>
-        <div className="space-y-1.5">
-          <div className="flex items-center gap-2 text-xs">
-            <div className="w-3 h-3 rounded bg-neo-pending border border-neo-border" />
-            <span>Pending</span>
+      <Card className="absolute top-4 right-4 z-10">
+        <CardContent className="p-3">
+          <div className="text-xs font-bold mb-2">Status</div>
+          <div className="space-y-1.5">
+            <div className="flex items-center gap-2 text-xs">
+              <div className="w-3 h-3 rounded bg-yellow-400 border border-yellow-500" />
+              <span>Pending</span>
+            </div>
+            <div className="flex items-center gap-2 text-xs">
+              <div className="w-3 h-3 rounded bg-cyan-400 border border-cyan-500" />
+              <span>In Progress</span>
+            </div>
+            <div className="flex items-center gap-2 text-xs">
+              <div className="w-3 h-3 rounded bg-green-400 border border-green-500" />
+              <span>Done</span>
+            </div>
+            <div className="flex items-center gap-2 text-xs">
+              <div className="w-3 h-3 rounded bg-red-100 border border-red-400" />
+              <span>Blocked</span>
+            </div>
           </div>
-          <div className="flex items-center gap-2 text-xs">
-            <div className="w-3 h-3 rounded bg-neo-progress border border-neo-border" />
-            <span>In Progress</span>
-          </div>
-          <div className="flex items-center gap-2 text-xs">
-            <div className="w-3 h-3 rounded bg-neo-done border border-neo-border" />
-            <span>Done</span>
-          </div>
-          <div className="flex items-center gap-2 text-xs">
-            <div className="w-3 h-3 rounded bg-neo-danger/20 border border-neo-danger" />
-            <span>Blocked</span>
-          </div>
-        </div>
-      </div>
+        </CardContent>
+      </Card>
 
       <ReactFlow
         nodes={nodes}
@@ -397,14 +395,14 @@ function DependencyGraphInner({ graphData, onNodeClick, activeAgents = [] }: Dep
         minZoom={0.1}
         maxZoom={2}
       >
-        <Background color="var(--color-neo-neutral-300)" gap={20} size={1} />
+        <Background color="#d4d4d8" gap={20} size={1} />
         <Controls
-          className="!bg-white !border-2 !border-neo-border !rounded-lg !shadow-neo-sm"
+          className="!bg-card !border !border-border !rounded-lg !shadow-sm"
           showInteractive={false}
         />
         <MiniMap
           nodeColor={nodeColor}
-          className="!bg-white !border-2 !border-neo-border !rounded-lg !shadow-neo-sm"
+          className="!bg-card !border !border-border !rounded-lg !shadow-sm"
           maskColor="rgba(0, 0, 0, 0.1)"
         />
       </ReactFlow>
diff --git a/ui/src/components/DevServerControl.tsx b/ui/src/components/DevServerControl.tsx
index a6182c5..188e875 100644
--- a/ui/src/components/DevServerControl.tsx
+++ b/ui/src/components/DevServerControl.tsx
@@ -2,6 +2,7 @@ import { Globe, Square, Loader2, ExternalLink, AlertTriangle } from 'lucide-reac
 import { useMutation, useQueryClient } from '@tanstack/react-query'
 import type { DevServerStatus } from '../lib/types'
 import { startDevServer, stopDevServer } from '../lib/api'
+import { Button } from '@/components/ui/button'
 
 // Re-export DevServerStatus from lib/types for consumers that import from here
 export type { DevServerStatus }
@@ -86,14 +87,11 @@ export function DevServerControl({ projectName, status, url }: DevServerControlP
   return (
     <div className="flex items-center gap-2">
       {isStopped ? (
-        <button
+        <Button
           onClick={handleStart}
           disabled={isLoading}
-          className="neo-btn text-sm py-2 px-3"
-          style={isCrashed ? {
-            backgroundColor: 'var(--color-neo-danger)',
-            color: 'var(--color-neo-text-on-bright)',
-          } : undefined}
+          variant={isCrashed ? "destructive" : "outline"}
+          size="sm"
           title={isCrashed ? "Dev Server Crashed - Click to Restart" : "Start Dev Server"}
           aria-label={isCrashed ? "Restart Dev Server (crashed)" : "Start Dev Server"}
         >
@@ -104,16 +102,13 @@ export function DevServerControl({ projectName, status, url }: DevServerControlP
           ) : (
             <Globe size={18} />
           )}
-        </button>
+        </Button>
       ) : (
-        <button
+        <Button
           onClick={handleStop}
           disabled={isLoading}
-          className="neo-btn text-sm py-2 px-3"
-          style={{
-            backgroundColor: 'var(--color-neo-progress)',
-            color: 'var(--color-neo-text-on-bright)',
-          }}
+          size="sm"
+          className="bg-primary text-primary-foreground hover:bg-primary/90"
           title="Stop Dev Server"
           aria-label="Stop Dev Server"
         >
@@ -122,31 +117,31 @@ export function DevServerControl({ projectName, status, url }: DevServerControlP
           ) : (
             <Square size={18} />
           )}
-        </button>
+        </Button>
       )}
 
       {/* Show URL as clickable link when server is running */}
       {isRunning && url && (
-        <a
-          href={url}
-          target="_blank"
-          rel="noopener noreferrer"
-          className="neo-btn text-sm py-2 px-3 gap-1"
-          style={{
-            backgroundColor: 'var(--color-neo-progress)',
-            color: 'var(--color-neo-text-on-bright)',
-            textDecoration: 'none',
-          }}
-          title={`Open ${url} in new tab`}
+        <Button
+          asChild
+          size="sm"
+          className="bg-primary text-primary-foreground hover:bg-primary/90 gap-1"
         >
-          <span className="font-mono text-xs">{url}</span>
-          <ExternalLink size={14} />
-        </a>
+          <a
+            href={url}
+            target="_blank"
+            rel="noopener noreferrer"
+            title={`Open ${url} in new tab`}
+          >
+            <span className="font-mono text-xs">{url}</span>
+            <ExternalLink size={14} />
+          </a>
+        </Button>
       )}
 
       {/* Error display */}
       {(startDevServerMutation.error || stopDevServerMutation.error) && (
-        <span className="text-xs font-mono text-[var(--color-neo-danger)] ml-2">
+        <span className="text-xs font-mono text-destructive ml-2">
           {String((startDevServerMutation.error || stopDevServerMutation.error)?.message || 'Operation failed')}
         </span>
       )}
diff --git a/ui/src/components/EditFeatureForm.tsx b/ui/src/components/EditFeatureForm.tsx
index 6fcf4a3..1095f0d 100644
--- a/ui/src/components/EditFeatureForm.tsx
+++ b/ui/src/components/EditFeatureForm.tsx
@@ -2,6 +2,18 @@ import { useState, useId } from 'react'
 import { X, Save, Plus, Trash2, Loader2, AlertCircle } from 'lucide-react'
 import { useUpdateFeature } from '../hooks/useProjects'
 import type { Feature } from '../lib/types'
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogFooter,
+} from '@/components/ui/dialog'
+import { Button } from '@/components/ui/button'
+import { Input } from '@/components/ui/input'
+import { Textarea } from '@/components/ui/textarea'
+import { Label } from '@/components/ui/label'
+import { Alert, AlertDescription } from '@/components/ui/alert'
 
 interface Step {
   id: string
@@ -83,149 +95,135 @@ export function EditFeatureForm({ feature, projectName, onClose, onSaved }: Edit
     JSON.stringify(currentSteps) !== JSON.stringify(feature.steps)
 
   return (
-    <div className="neo-modal-backdrop" onClick={onClose}>
-      <div
-        className="neo-modal w-full max-w-2xl"
-        onClick={(e) => e.stopPropagation()}
-      >
-        {/* Header */}
-        <div className="flex items-center justify-between p-6 border-b-3 border-[var(--color-neo-border)]">
-          <h2 className="font-display text-2xl font-bold">
-            Edit Feature
-          </h2>
-          <button
-            onClick={onClose}
-            className="neo-btn neo-btn-ghost p-2"
-          >
-            <X size={24} />
-          </button>
-        </div>
+    <Dialog open={true} onOpenChange={(open) => !open && onClose()}>
+      <DialogContent className="sm:max-w-2xl">
+        <DialogHeader>
+          <DialogTitle>Edit Feature</DialogTitle>
+        </DialogHeader>
 
-        {/* Form */}
-        <form onSubmit={handleSubmit} className="p-6 space-y-4">
+        <form onSubmit={handleSubmit} className="space-y-4">
           {/* Error Message */}
           {error && (
-            <div className="flex items-center gap-3 p-4 bg-[var(--color-neo-error-bg)] text-[var(--color-neo-error-text)] border-3 border-[var(--color-neo-error-border)]">
-              <AlertCircle size={20} />
-              <span>{error}</span>
-              <button
-                type="button"
-                onClick={() => setError(null)}
-                className="ml-auto hover:opacity-70 transition-opacity"
-              >
-                <X size={16} />
-              </button>
-            </div>
+            <Alert variant="destructive">
+              <AlertCircle className="h-4 w-4" />
+              <AlertDescription className="flex items-center justify-between">
+                <span>{error}</span>
+                <Button
+                  type="button"
+                  variant="ghost"
+                  size="icon-xs"
+                  onClick={() => setError(null)}
+                >
+                  <X size={14} />
+                </Button>
+              </AlertDescription>
+            </Alert>
           )}
 
           {/* Category & Priority Row */}
           <div className="flex gap-4">
-            <div className="flex-1">
-              <label className="block font-display font-bold mb-2 uppercase text-sm">
-                Category
-              </label>
-              <input
+            <div className="flex-1 space-y-2">
+              <Label htmlFor="category">Category</Label>
+              <Input
+                id="category"
                 type="text"
                 value={category}
                 onChange={(e) => setCategory(e.target.value)}
                 placeholder="e.g., Authentication, UI, API"
-                className="neo-input"
                 required
               />
             </div>
-            <div className="w-32">
-              <label className="block font-display font-bold mb-2 uppercase text-sm">
-                Priority
-              </label>
-              <input
+            <div className="w-32 space-y-2">
+              <Label htmlFor="priority">Priority</Label>
+              <Input
+                id="priority"
                 type="number"
                 value={priority}
                 onChange={(e) => setPriority(e.target.value)}
                 min="1"
-                className="neo-input"
                 required
               />
             </div>
           </div>
 
           {/* Name */}
-          <div>
-            <label className="block font-display font-bold mb-2 uppercase text-sm">
-              Feature Name
-            </label>
-            <input
+          <div className="space-y-2">
+            <Label htmlFor="name">Feature Name</Label>
+            <Input
+              id="name"
               type="text"
               value={name}
               onChange={(e) => setName(e.target.value)}
               placeholder="e.g., User login form"
-              className="neo-input"
               required
             />
           </div>
 
           {/* Description */}
-          <div>
-            <label className="block font-display font-bold mb-2 uppercase text-sm">
-              Description
-            </label>
-            <textarea
+          <div className="space-y-2">
+            <Label htmlFor="description">Description</Label>
+            <Textarea
+              id="description"
               value={description}
               onChange={(e) => setDescription(e.target.value)}
               placeholder="Describe what this feature should do..."
-              className="neo-input min-h-[100px] resize-y"
+              className="min-h-[100px] resize-y"
               required
             />
           </div>
 
           {/* Steps */}
-          <div>
-            <label className="block font-display font-bold mb-2 uppercase text-sm">
-              Test Steps
-            </label>
+          <div className="space-y-2">
+            <Label>Test Steps</Label>
             <div className="space-y-2">
               {steps.map((step, index) => (
                 <div key={step.id} className="flex gap-2 items-center">
-                  <span
-                    className="w-10 h-10 flex-shrink-0 flex items-center justify-center font-mono font-bold text-sm border-3 border-[var(--color-neo-border)] bg-[var(--color-neo-bg)] text-[var(--color-neo-text-secondary)]"
-                    style={{ boxShadow: 'var(--shadow-neo-sm)' }}
-                  >
+                  <span className="w-10 h-10 flex-shrink-0 flex items-center justify-center font-mono font-semibold text-sm border rounded-md bg-muted text-muted-foreground">
                     {index + 1}
                   </span>
-                  <input
+                  <Input
                     type="text"
                     value={step.value}
                     onChange={(e) => handleStepChange(step.id, e.target.value)}
                     placeholder="Describe this step..."
-                    className="neo-input flex-1"
+                    className="flex-1"
                   />
                   {steps.length > 1 && (
-                    <button
+                    <Button
                       type="button"
+                      variant="ghost"
+                      size="icon"
                       onClick={() => handleRemoveStep(step.id)}
-                      className="neo-btn neo-btn-ghost p-2"
                     >
                       <Trash2 size={18} />
-                    </button>
+                    </Button>
                   )}
                 </div>
               ))}
             </div>
-            <button
+            <Button
               type="button"
+              variant="ghost"
+              size="sm"
               onClick={handleAddStep}
-              className="neo-btn neo-btn-ghost mt-2 text-sm"
             >
               <Plus size={16} />
               Add Step
-            </button>
+            </Button>
           </div>
 
           {/* Actions */}
-          <div className="flex gap-3 pt-4 border-t-3 border-[var(--color-neo-border)]">
-            <button
+          <DialogFooter className="pt-4 border-t">
+            <Button
+              type="button"
+              variant="outline"
+              onClick={onClose}
+            >
+              Cancel
+            </Button>
+            <Button
               type="submit"
               disabled={!isValid || !hasChanges || updateFeature.isPending}
-              className="neo-btn neo-btn-success flex-1"
             >
               {updateFeature.isPending ? (
                 <Loader2 size={18} className="animate-spin" />
@@ -235,17 +233,10 @@ export function EditFeatureForm({ feature, projectName, onClose, onSaved }: Edit
                   Save Changes
                 </>
               )}
-            </button>
-            <button
-              type="button"
-              onClick={onClose}
-              className="neo-btn neo-btn-ghost"
-            >
-              Cancel
-            </button>
-          </div>
+            </Button>
+          </DialogFooter>
         </form>
-      </div>
-    </div>
+      </DialogContent>
+    </Dialog>
   )
 }
diff --git a/ui/src/components/ExpandProjectChat.tsx b/ui/src/components/ExpandProjectChat.tsx
index 372d629..52926cb 100644
--- a/ui/src/components/ExpandProjectChat.tsx
+++ b/ui/src/components/ExpandProjectChat.tsx
@@ -11,6 +11,10 @@ import { useExpandChat } from '../hooks/useExpandChat'
 import { ChatMessage } from './ChatMessage'
 import { TypingIndicator } from './TypingIndicator'
 import type { ImageAttachment } from '../lib/types'
+import { Button } from '@/components/ui/button'
+import { Input } from '@/components/ui/input'
+import { Card, CardContent } from '@/components/ui/card'
+import { Alert, AlertDescription } from '@/components/ui/alert'
 
 // Image upload validation constants
 const MAX_FILE_SIZE = 5 * 1024 * 1024 // 5 MB
@@ -152,28 +156,28 @@ export function ExpandProjectChat({
     switch (connectionStatus) {
       case 'connected':
         return (
-          <span className="flex items-center gap-1 text-xs text-neo-done">
+          <span className="flex items-center gap-1 text-xs text-green-500">
             <Wifi size={12} />
             Connected
           </span>
         )
       case 'connecting':
         return (
-          <span className="flex items-center gap-1 text-xs text-neo-pending">
+          <span className="flex items-center gap-1 text-xs text-yellow-500">
             <Wifi size={12} className="animate-pulse" />
             Connecting...
           </span>
         )
       case 'error':
         return (
-          <span className="flex items-center gap-1 text-xs text-neo-danger">
+          <span className="flex items-center gap-1 text-xs text-destructive">
             <WifiOff size={12} />
             Error
           </span>
         )
       default:
         return (
-          <span className="flex items-center gap-1 text-xs text-neo-text-secondary">
+          <span className="flex items-center gap-1 text-xs text-muted-foreground">
             <WifiOff size={12} />
             Disconnected
           </span>
@@ -182,16 +186,16 @@ export function ExpandProjectChat({
   }
 
   return (
-    <div className="flex flex-col h-full bg-neo-bg">
+    <div className="flex flex-col h-full bg-background">
       {/* Header */}
-      <div className="flex items-center justify-between p-4 border-b-3 border-neo-border bg-neo-card">
+      <div className="flex items-center justify-between p-4 border-b-2 border-border bg-card">
         <div className="flex items-center gap-3">
-          <h2 className="font-display font-bold text-lg text-neo-text">
+          <h2 className="font-display font-bold text-lg text-foreground">
             Expand Project: {projectName}
           </h2>
           <ConnectionIndicator />
           {featuresCreated > 0 && (
-            <span className="flex items-center gap-1 text-sm text-neo-done font-bold">
+            <span className="flex items-center gap-1 text-sm text-green-500 font-bold">
               <Plus size={14} />
               {featuresCreated} added
             </span>
@@ -200,57 +204,63 @@ export function ExpandProjectChat({
 
         <div className="flex items-center gap-2">
           {isComplete && (
-            <span className="flex items-center gap-1 text-sm text-neo-done font-bold">
+            <span className="flex items-center gap-1 text-sm text-green-500 font-bold">
               <CheckCircle2 size={16} />
               Complete
             </span>
           )}
 
-          <button
+          <Button
             onClick={onCancel}
-            className="neo-btn neo-btn-ghost p-2"
+            variant="ghost"
+            size="icon"
             title="Close"
           >
             <X size={20} />
-          </button>
+          </Button>
         </div>
       </div>
 
       {/* Error banner */}
       {error && (
-        <div className="flex items-center gap-2 p-3 bg-neo-error-bg text-neo-error-text border-b-3 border-neo-error-border">
+        <Alert variant="destructive" className="rounded-none border-x-0 border-t-0">
           <AlertCircle size={16} />
-          <span className="flex-1 text-sm">{error}</span>
-          <button
+          <AlertDescription className="flex-1">{error}</AlertDescription>
+          <Button
             onClick={() => setError(null)}
-            className="p-1 hover:opacity-70 transition-opacity rounded"
+            variant="ghost"
+            size="icon"
+            className="h-6 w-6"
           >
             <X size={14} />
-          </button>
-        </div>
+          </Button>
+        </Alert>
       )}
 
       {/* Messages area */}
       <div className="flex-1 overflow-y-auto py-4">
         {messages.length === 0 && !isLoading && (
           <div className="flex flex-col items-center justify-center h-full text-center p-8">
-            <div className="neo-card p-6 max-w-md">
-              <h3 className="font-display font-bold text-lg mb-2">
-                Starting Project Expansion
-              </h3>
-              <p className="text-sm text-neo-text-secondary">
-                Connecting to Claude to help you add new features to your project...
-              </p>
-              {connectionStatus === 'error' && (
-                <button
-                  onClick={start}
-                  className="neo-btn neo-btn-primary mt-4 text-sm"
-                >
-                  <RotateCcw size={14} />
-                  Retry Connection
-                </button>
-              )}
-            </div>
+            <Card className="p-6 max-w-md">
+              <CardContent className="p-0">
+                <h3 className="font-display font-bold text-lg mb-2">
+                  Starting Project Expansion
+                </h3>
+                <p className="text-sm text-muted-foreground">
+                  Connecting to Claude to help you add new features to your project...
+                </p>
+                {connectionStatus === 'error' && (
+                  <Button
+                    onClick={start}
+                    className="mt-4"
+                    size="sm"
+                  >
+                    <RotateCcw size={14} />
+                    Retry Connection
+                  </Button>
+                )}
+              </CardContent>
+            </Card>
           </div>
         )}
 
@@ -268,7 +278,7 @@ export function ExpandProjectChat({
       {/* Input area */}
       {!isComplete && (
         <div
-          className="p-4 border-t-3 border-neo-border bg-neo-card"
+          className="p-4 border-t-2 border-border bg-card"
           onDrop={handleDrop}
           onDragOver={handleDragOver}
         >
@@ -278,22 +288,21 @@ export function ExpandProjectChat({
               {pendingAttachments.map((attachment) => (
                 <div
                   key={attachment.id}
-                  className="relative group border-2 border-neo-border p-1 bg-neo-card"
-                  style={{ boxShadow: 'var(--shadow-neo-sm)' }}
+                  className="relative group border-2 border-border p-1 bg-card rounded shadow-sm"
                 >
                   <img
                     src={attachment.previewUrl}
                     alt={attachment.filename}
-                    className="w-16 h-16 object-cover"
+                    className="w-16 h-16 object-cover rounded"
                   />
                   <button
                     onClick={() => handleRemoveAttachment(attachment.id)}
-                    className="absolute -top-2 -right-2 bg-neo-danger text-neo-text-on-bright rounded-full p-0.5 border-2 border-neo-border hover:scale-110 transition-transform"
+                    className="absolute -top-2 -right-2 bg-destructive text-destructive-foreground rounded-full p-0.5 border-2 border-border hover:scale-110 transition-transform"
                     title="Remove attachment"
                   >
                     <X size={12} />
                   </button>
-                  <span className="text-xs truncate block max-w-16 mt-1 text-center">
+                  <span className="text-xs truncate block max-w-16 mt-1 text-center text-muted-foreground">
                     {attachment.filename.length > 10
                       ? `${attachment.filename.substring(0, 7)}...`
                       : attachment.filename}
@@ -315,16 +324,17 @@ export function ExpandProjectChat({
             />
 
             {/* Attach button */}
-            <button
+            <Button
               onClick={() => fileInputRef.current?.click()}
               disabled={connectionStatus !== 'connected'}
-              className="neo-btn neo-btn-ghost p-3"
+              variant="ghost"
+              size="icon"
               title="Attach image (JPEG, PNG - max 5MB)"
             >
               <Paperclip size={18} />
-            </button>
+            </Button>
 
-            <input
+            <Input
               ref={inputRef}
               type="text"
               value={input}
@@ -335,24 +345,24 @@ export function ExpandProjectChat({
                   ? 'Add a message with your image(s)...'
                   : 'Describe the features you want to add...'
               }
-              className="neo-input flex-1"
+              className="flex-1"
               disabled={isLoading || connectionStatus !== 'connected'}
             />
-            <button
+            <Button
               onClick={handleSendMessage}
               disabled={
                 (!input.trim() && pendingAttachments.length === 0) ||
                 isLoading ||
                 connectionStatus !== 'connected'
               }
-              className="neo-btn neo-btn-primary px-6"
+              className="px-6"
             >
               <Send size={18} />
-            </button>
+            </Button>
           </div>
 
           {/* Help text */}
-          <p className="text-xs text-neo-text-secondary mt-2">
+          <p className="text-xs text-muted-foreground mt-2">
             Press Enter to send. Drag & drop or click <Paperclip size={12} className="inline" /> to attach images.
           </p>
         </div>
@@ -360,7 +370,7 @@ export function ExpandProjectChat({
 
       {/* Completion footer */}
       {isComplete && (
-        <div className="p-4 border-t-3 border-neo-border bg-neo-done text-neo-text-on-bright">
+        <div className="p-4 border-t-2 border-border bg-green-500 text-white">
           <div className="flex items-center justify-between">
             <div className="flex items-center gap-2">
               <CheckCircle2 size={20} />
@@ -368,12 +378,12 @@ export function ExpandProjectChat({
                 Added {featuresCreated} new feature{featuresCreated !== 1 ? 's' : ''}!
               </span>
             </div>
-            <button
+            <Button
               onClick={() => onComplete(featuresCreated)}
-              className="neo-btn bg-neo-card"
+              variant="secondary"
             >
               Close
-            </button>
+            </Button>
           </div>
         </div>
       )}
diff --git a/ui/src/components/ExpandProjectModal.tsx b/ui/src/components/ExpandProjectModal.tsx
index af0d196..79872b0 100644
--- a/ui/src/components/ExpandProjectModal.tsx
+++ b/ui/src/components/ExpandProjectModal.tsx
@@ -30,7 +30,7 @@ export function ExpandProjectModal({
   }
 
   return (
-    <div className="fixed inset-0 z-50 bg-[var(--color-neo-bg)]">
+    <div className="fixed inset-0 z-50 bg-background">
       <ExpandProjectChat
         projectName={projectName}
         onComplete={handleComplete}
diff --git a/ui/src/components/FeatureCard.tsx b/ui/src/components/FeatureCard.tsx
index 76fb237..1a4d523 100644
--- a/ui/src/components/FeatureCard.tsx
+++ b/ui/src/components/FeatureCard.tsx
@@ -2,26 +2,27 @@ import { CheckCircle2, Circle, Loader2, MessageCircle } from 'lucide-react'
 import type { Feature, ActiveAgent } from '../lib/types'
 import { DependencyBadge } from './DependencyBadge'
 import { AgentAvatar } from './AgentAvatar'
+import { Card, CardContent } from '@/components/ui/card'
+import { Badge } from '@/components/ui/badge'
 
 interface FeatureCardProps {
   feature: Feature
   onClick: () => void
   isInProgress?: boolean
   allFeatures?: Feature[]
-  activeAgent?: ActiveAgent // Agent working on this feature
+  activeAgent?: ActiveAgent
 }
 
-// Generate consistent color for category using CSS variable references
-// These map to the --color-neo-category-* variables defined in globals.css
+// Generate consistent color for category
 function getCategoryColor(category: string): string {
   const colors = [
-    'var(--color-neo-category-pink)',
-    'var(--color-neo-category-cyan)',
-    'var(--color-neo-category-green)',
-    'var(--color-neo-category-yellow)',
-    'var(--color-neo-category-orange)',
-    'var(--color-neo-category-purple)',
-    'var(--color-neo-category-blue)',
+    'bg-pink-500',
+    'bg-cyan-500',
+    'bg-green-500',
+    'bg-yellow-500',
+    'bg-orange-500',
+    'bg-purple-500',
+    'bg-blue-500',
   ]
 
   let hash = 0
@@ -38,86 +39,85 @@ export function FeatureCard({ feature, onClick, isInProgress, allFeatures = [],
   const hasActiveAgent = !!activeAgent
 
   return (
-    <button
+    <Card
       onClick={onClick}
       className={`
-        w-full text-left neo-card p-4 cursor-pointer relative
-        ${isInProgress ? 'animate-pulse-neo' : ''}
-        ${feature.passes ? 'border-neo-done' : ''}
-        ${isBlocked && !feature.passes ? 'border-neo-danger opacity-80' : ''}
-        ${hasActiveAgent ? 'ring-2 ring-neo-progress ring-offset-2' : ''}
+        cursor-pointer transition-all hover:border-primary py-3
+        ${isInProgress ? 'animate-pulse' : ''}
+        ${feature.passes ? 'border-primary/50' : ''}
+        ${isBlocked && !feature.passes ? 'border-destructive/50 opacity-80' : ''}
+        ${hasActiveAgent ? 'ring-2 ring-primary ring-offset-2' : ''}
       `}
     >
-      {/* Header */}
-      <div className="flex items-start justify-between gap-2 mb-2">
-        <div className="flex items-center gap-2">
-          <span
-            className="neo-badge"
-            style={{ backgroundColor: categoryColor, color: 'var(--color-neo-text-on-bright)' }}
-          >
-            {feature.category}
-          </span>
-          <DependencyBadge feature={feature} allFeatures={allFeatures} compact />
-        </div>
-        <span className="font-mono text-sm text-neo-text-secondary">
-          #{feature.priority}
-        </span>
-      </div>
-
-      {/* Name */}
-      <h3 className="font-display font-bold mb-1 line-clamp-2">
-        {feature.name}
-      </h3>
-
-      {/* Description */}
-      <p className="text-sm text-neo-text-secondary line-clamp-2 mb-3">
-        {feature.description}
-      </p>
-
-      {/* Agent working on this feature */}
-      {activeAgent && (
-        <div className="flex items-center gap-2 mb-3 py-2 px-2 rounded bg-[var(--color-neo-progress)]/10 border border-[var(--color-neo-progress)]/30">
-          <AgentAvatar name={activeAgent.agentName} state={activeAgent.state} size="sm" />
-          <div className="flex-1 min-w-0">
-            <div className="text-xs font-bold text-neo-progress">
-              {activeAgent.agentName} is working on this!
-            </div>
-            {activeAgent.thought && (
-              <div className="flex items-center gap-1 mt-0.5">
-                <MessageCircle size={10} className="text-neo-text-secondary shrink-0" />
-                <p className="text-[10px] text-neo-text-secondary truncate italic">
-                  {activeAgent.thought}
-                </p>
-              </div>
-            )}
+      <CardContent className="p-4 space-y-3">
+        {/* Header */}
+        <div className="flex items-start justify-between gap-2">
+          <div className="flex items-center gap-2">
+            <Badge className={`${categoryColor} text-white`}>
+              {feature.category}
+            </Badge>
+            <DependencyBadge feature={feature} allFeatures={allFeatures} compact />
           </div>
+          <span className="font-mono text-sm text-muted-foreground">
+            #{feature.priority}
+          </span>
         </div>
-      )}
 
-      {/* Status */}
-      <div className="flex items-center gap-2 text-sm">
-        {isInProgress ? (
-          <>
-            <Loader2 size={16} className="animate-spin text-neo-progress" />
-            <span className="text-neo-progress font-bold">Processing...</span>
-          </>
-        ) : feature.passes ? (
-          <>
-            <CheckCircle2 size={16} className="text-neo-done" />
-            <span className="text-neo-done font-bold">Complete</span>
-          </>
-        ) : isBlocked ? (
-          <>
-            <Circle size={16} className="text-neo-danger" />
-            <span className="text-neo-danger">Blocked</span>
-          </>
-        ) : (
-          <>
-            <Circle size={16} className="text-neo-text-secondary" />
-            <span className="text-neo-text-secondary">Pending</span>
-          </>
+        {/* Name */}
+        <h3 className="font-semibold line-clamp-2">
+          {feature.name}
+        </h3>
+
+        {/* Description */}
+        <p className="text-sm text-muted-foreground line-clamp-2">
+          {feature.description}
+        </p>
+
+        {/* Agent working on this feature */}
+        {activeAgent && (
+          <div className="flex items-center gap-2 py-2 px-2 rounded-md bg-primary/10 border border-primary/30">
+            <AgentAvatar name={activeAgent.agentName} state={activeAgent.state} size="sm" />
+            <div className="flex-1 min-w-0">
+              <div className="text-xs font-semibold text-primary">
+                {activeAgent.agentName} is working on this!
+              </div>
+              {activeAgent.thought && (
+                <div className="flex items-center gap-1 mt-0.5">
+                  <MessageCircle size={10} className="text-muted-foreground shrink-0" />
+                  <p className="text-[10px] text-muted-foreground truncate italic">
+                    {activeAgent.thought}
+                  </p>
+                </div>
+              )}
+            </div>
+          </div>
         )}
-      </div>
-    </button>
+
+        {/* Status */}
+        <div className="flex items-center gap-2 text-sm">
+          {isInProgress ? (
+            <>
+              <Loader2 size={16} className="animate-spin text-primary" />
+              <span className="text-primary font-medium">Processing...</span>
+            </>
+          ) : feature.passes ? (
+            <>
+              <CheckCircle2 size={16} className="text-primary" />
+              <span className="text-primary font-medium">Complete</span>
+            </>
+          ) : isBlocked ? (
+            <>
+              <Circle size={16} className="text-destructive" />
+              <span className="text-destructive">Blocked</span>
+            </>
+          ) : (
+            <>
+              <Circle size={16} className="text-muted-foreground" />
+              <span className="text-muted-foreground">Pending</span>
+            </>
+          )}
+        </div>
+      </CardContent>
+    </Card>
   )
 }
diff --git a/ui/src/components/FeatureModal.tsx b/ui/src/components/FeatureModal.tsx
index 1853039..25f396f 100644
--- a/ui/src/components/FeatureModal.tsx
+++ b/ui/src/components/FeatureModal.tsx
@@ -3,17 +3,28 @@ import { X, CheckCircle2, Circle, SkipForward, Trash2, Loader2, AlertCircle, Pen
 import { useSkipFeature, useDeleteFeature, useFeatures } from '../hooks/useProjects'
 import { EditFeatureForm } from './EditFeatureForm'
 import type { Feature } from '../lib/types'
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogFooter,
+} from '@/components/ui/dialog'
+import { Button } from '@/components/ui/button'
+import { Badge } from '@/components/ui/badge'
+import { Alert, AlertDescription } from '@/components/ui/alert'
+import { Separator } from '@/components/ui/separator'
 
-// Generate consistent color for category (matches FeatureCard pattern)
+// Generate consistent color for category
 function getCategoryColor(category: string): string {
   const colors = [
-    '#ff006e', // pink (accent)
-    '#00b4d8', // cyan (progress)
-    '#70e000', // green (done)
-    '#ffd60a', // yellow (pending)
-    '#ff5400', // orange (danger)
-    '#8338ec', // purple
-    '#3a86ff', // blue
+    'bg-pink-500',
+    'bg-cyan-500',
+    'bg-green-500',
+    'bg-yellow-500',
+    'bg-orange-500',
+    'bg-purple-500',
+    'bg-blue-500',
   ]
 
   let hash = 0
@@ -90,109 +101,91 @@ export function FeatureModal({ feature, projectName, onClose }: FeatureModalProp
   }
 
   return (
-    <div className="neo-modal-backdrop" onClick={onClose}>
-      <div
-        className="neo-modal w-full max-w-2xl p-0"
-        onClick={(e) => e.stopPropagation()}
-      >
+    <Dialog open={true} onOpenChange={(open) => !open && onClose()}>
+      <DialogContent className="sm:max-w-2xl p-0 gap-0">
         {/* Header */}
-        <div className="flex items-start justify-between p-6 border-b-3 border-[var(--color-neo-border)]">
-          <div>
-            <span
-              className="neo-badge mb-2"
-              style={{ backgroundColor: getCategoryColor(feature.category), color: 'var(--color-neo-text-on-bright)' }}
-            >
+        <DialogHeader className="p-6 pb-4">
+          <div className="flex items-start gap-3">
+            <Badge className={`${getCategoryColor(feature.category)} text-white`}>
               {feature.category}
-            </span>
-            <h2 className="font-display text-2xl font-bold">
-              {feature.name}
-            </h2>
+            </Badge>
           </div>
-          <button
-            onClick={onClose}
-            className="neo-btn neo-btn-ghost p-2"
-          >
-            <X size={24} />
-          </button>
-        </div>
+          <DialogTitle className="text-xl mt-2">{feature.name}</DialogTitle>
+        </DialogHeader>
+
+        <Separator />
 
         {/* Content */}
-        <div className="p-6 space-y-6">
+        <div className="p-6 space-y-6 max-h-[60vh] overflow-y-auto">
           {/* Error Message */}
           {error && (
-            <div className="flex items-center gap-3 p-4 bg-[var(--color-neo-error-bg)] text-[var(--color-neo-error-text)] border-3 border-[var(--color-neo-error-border)]">
-              <AlertCircle size={20} />
-              <span>{error}</span>
-              <button
-                onClick={() => setError(null)}
-                className="ml-auto hover:opacity-70 transition-opacity"
-              >
-                <X size={16} />
-              </button>
-            </div>
+            <Alert variant="destructive">
+              <AlertCircle className="h-4 w-4" />
+              <AlertDescription className="flex items-center justify-between">
+                <span>{error}</span>
+                <Button
+                  variant="ghost"
+                  size="icon-xs"
+                  onClick={() => setError(null)}
+                >
+                  <X size={14} />
+                </Button>
+              </AlertDescription>
+            </Alert>
           )}
 
           {/* Status */}
-          <div className="flex items-center gap-3 p-4 bg-[var(--color-neo-bg)] border-3 border-[var(--color-neo-border)]">
+          <div className="flex items-center gap-3 p-4 bg-muted rounded-lg">
             {feature.passes ? (
               <>
-                <CheckCircle2 size={24} className="text-[var(--color-neo-done)]" />
-                <span className="font-display font-bold text-[var(--color-neo-done)]">
-                  COMPLETE
-                </span>
+                <CheckCircle2 size={24} className="text-primary" />
+                <span className="font-semibold text-primary">COMPLETE</span>
               </>
             ) : (
               <>
-                <Circle size={24} className="text-[var(--color-neo-text-secondary)]" />
-                <span className="font-display font-bold text-[var(--color-neo-text-secondary)]">
-                  PENDING
-                </span>
+                <Circle size={24} className="text-muted-foreground" />
+                <span className="font-semibold text-muted-foreground">PENDING</span>
               </>
             )}
-            <span className="ml-auto font-mono text-sm">
+            <span className="ml-auto font-mono text-sm text-muted-foreground">
               Priority: #{feature.priority}
             </span>
           </div>
 
           {/* Description */}
           <div>
-            <h3 className="font-display font-bold mb-2 uppercase text-sm">
+            <h3 className="font-semibold mb-2 text-sm uppercase tracking-wide text-muted-foreground">
               Description
             </h3>
-            <p className="text-[var(--color-neo-text-secondary)]">
-              {feature.description}
-            </p>
+            <p className="text-foreground">{feature.description}</p>
           </div>
 
           {/* Blocked By Warning */}
           {blockingDeps.length > 0 && (
-            <div className="p-4 bg-[var(--color-neo-warning-bg)] border-3 border-[var(--color-neo-warning-border)]">
-              <h3 className="font-display font-bold mb-2 uppercase text-sm flex items-center gap-2 text-[var(--color-neo-warning-text)]">
-                <AlertTriangle size={16} />
-                Blocked By
-              </h3>
-              <p className="text-sm text-[var(--color-neo-warning-text)] mb-2">
-                This feature cannot start until the following dependencies are complete:
-              </p>
-              <ul className="space-y-1">
-                {blockingDeps.map(dep => (
-                  <li
-                    key={dep.id}
-                    className="flex items-center gap-2 text-sm"
-                  >
-                    <Circle size={14} className="text-[var(--color-neo-warning-text)]" />
-                    <span className="font-mono text-xs text-[var(--color-neo-warning-text)]">#{dep.id}</span>
-                    <span className="text-[var(--color-neo-warning-text)]">{dep.name}</span>
-                  </li>
-                ))}
-              </ul>
-            </div>
+            <Alert variant="destructive" className="border-orange-500 bg-orange-50 dark:bg-orange-950/20">
+              <AlertTriangle className="h-4 w-4 text-orange-600" />
+              <AlertDescription>
+                <h4 className="font-semibold mb-1 text-orange-700 dark:text-orange-400">Blocked By</h4>
+                <p className="text-sm text-orange-600 dark:text-orange-300 mb-2">
+                  This feature cannot start until the following dependencies are complete:
+                </p>
+                <ul className="space-y-1">
+                  {blockingDeps.map(dep => (
+                    <li key={dep.id} className="flex items-center gap-2 text-sm text-orange-600 dark:text-orange-300">
+                      <Circle size={14} />
+                      <span className="font-mono text-xs">#{dep.id}</span>
+                      <span>{dep.name}</span>
+                    </li>
+                  ))}
+                </ul>
+              </AlertDescription>
+            </Alert>
           )}
 
           {/* Dependencies */}
           {dependencies.length > 0 && (
             <div>
-              <h3 className="font-display font-bold mb-2 uppercase text-sm flex items-center gap-2">
+              <h3 className="font-semibold mb-2 text-sm uppercase tracking-wide text-muted-foreground flex items-center gap-2">
                 <Link2 size={16} />
                 Depends On
               </h3>
@@ -200,15 +193,15 @@ export function FeatureModal({ feature, projectName, onClose }: FeatureModalProp
                 {dependencies.map(dep => (
                   <li
                     key={dep.id}
-                    className="flex items-center gap-2 p-2 bg-[var(--color-neo-bg)] border-2 border-[var(--color-neo-border)]"
+                    className="flex items-center gap-2 p-2 bg-muted rounded-md text-sm"
                   >
                     {dep.passes ? (
-                      <CheckCircle2 size={16} className="text-[var(--color-neo-done)]" />
+                      <CheckCircle2 size={16} className="text-primary" />
                     ) : (
-                      <Circle size={16} className="text-[var(--color-neo-text-secondary)]" />
+                      <Circle size={16} className="text-muted-foreground" />
                     )}
-                    <span className="font-mono text-xs text-[var(--color-neo-text-secondary)]">#{dep.id}</span>
-                    <span className={dep.passes ? 'text-[var(--color-neo-done)]' : ''}>{dep.name}</span>
+                    <span className="font-mono text-xs text-muted-foreground">#{dep.id}</span>
+                    <span className={dep.passes ? 'text-primary' : ''}>{dep.name}</span>
                   </li>
                 ))}
               </ul>
@@ -218,14 +211,14 @@ export function FeatureModal({ feature, projectName, onClose }: FeatureModalProp
           {/* Steps */}
           {feature.steps.length > 0 && (
             <div>
-              <h3 className="font-display font-bold mb-2 uppercase text-sm">
+              <h3 className="font-semibold mb-2 text-sm uppercase tracking-wide text-muted-foreground">
                 Test Steps
               </h3>
               <ol className="list-decimal list-inside space-y-2">
                 {feature.steps.map((step, index) => (
                   <li
                     key={index}
-                    className="p-3 bg-[var(--color-neo-bg)] border-3 border-[var(--color-neo-border)]"
+                    className="p-3 bg-muted rounded-md text-sm"
                   >
                     {step}
                   </li>
@@ -237,69 +230,76 @@ export function FeatureModal({ feature, projectName, onClose }: FeatureModalProp
 
         {/* Actions */}
         {!feature.passes && (
-          <div className="p-6 border-t-3 border-[var(--color-neo-border)] bg-[var(--color-neo-bg)]">
-            {showDeleteConfirm ? (
-              <div className="space-y-4">
-                <p className="font-bold text-center">
-                  Are you sure you want to delete this feature?
-                </p>
-                <div className="flex gap-3">
-                  <button
-                    onClick={handleDelete}
-                    disabled={deleteFeature.isPending}
-                    className="neo-btn neo-btn-danger flex-1"
+          <>
+            <Separator />
+            <DialogFooter className="p-4 bg-muted/50">
+              {showDeleteConfirm ? (
+                <div className="w-full space-y-4">
+                  <p className="font-medium text-center">
+                    Are you sure you want to delete this feature?
+                  </p>
+                  <div className="flex gap-3">
+                    <Button
+                      variant="destructive"
+                      onClick={handleDelete}
+                      disabled={deleteFeature.isPending}
+                      className="flex-1"
+                    >
+                      {deleteFeature.isPending ? (
+                        <Loader2 size={18} className="animate-spin" />
+                      ) : (
+                        'Yes, Delete'
+                      )}
+                    </Button>
+                    <Button
+                      variant="outline"
+                      onClick={() => setShowDeleteConfirm(false)}
+                      disabled={deleteFeature.isPending}
+                      className="flex-1"
+                    >
+                      Cancel
+                    </Button>
+                  </div>
+                </div>
+              ) : (
+                <div className="flex gap-3 w-full">
+                  <Button
+                    onClick={() => setShowEdit(true)}
+                    disabled={skipFeature.isPending}
+                    className="flex-1"
                   >
-                    {deleteFeature.isPending ? (
+                    <Pencil size={18} />
+                    Edit
+                  </Button>
+                  <Button
+                    variant="secondary"
+                    onClick={handleSkip}
+                    disabled={skipFeature.isPending}
+                    className="flex-1"
+                  >
+                    {skipFeature.isPending ? (
                       <Loader2 size={18} className="animate-spin" />
                     ) : (
-                      'Yes, Delete'
+                      <>
+                        <SkipForward size={18} />
+                        Skip
+                      </>
                     )}
-                  </button>
-                  <button
-                    onClick={() => setShowDeleteConfirm(false)}
-                    disabled={deleteFeature.isPending}
-                    className="neo-btn neo-btn-ghost flex-1"
+                  </Button>
+                  <Button
+                    variant="destructive"
+                    size="icon"
+                    onClick={() => setShowDeleteConfirm(true)}
+                    disabled={skipFeature.isPending}
                   >
-                    Cancel
-                  </button>
+                    <Trash2 size={18} />
+                  </Button>
                 </div>
-              </div>
-            ) : (
-              <div className="flex gap-3">
-                <button
-                  onClick={() => setShowEdit(true)}
-                  disabled={skipFeature.isPending}
-                  className="neo-btn neo-btn-primary flex-1"
-                >
-                  <Pencil size={18} />
-                  Edit
-                </button>
-                <button
-                  onClick={handleSkip}
-                  disabled={skipFeature.isPending}
-                  className="neo-btn neo-btn-warning flex-1"
-                >
-                  {skipFeature.isPending ? (
-                    <Loader2 size={18} className="animate-spin" />
-                  ) : (
-                    <>
-                      <SkipForward size={18} />
-                      Skip
-                    </>
-                  )}
-                </button>
-                <button
-                  onClick={() => setShowDeleteConfirm(true)}
-                  disabled={skipFeature.isPending}
-                  className="neo-btn neo-btn-danger"
-                >
-                  <Trash2 size={18} />
-                </button>
-              </div>
-            )}
-          </div>
+              )}
+            </DialogFooter>
+          </>
         )}
-      </div>
-    </div>
+      </DialogContent>
+    </Dialog>
   )
 }
diff --git a/ui/src/components/FolderBrowser.tsx b/ui/src/components/FolderBrowser.tsx
index f302681..c3e998a 100644
--- a/ui/src/components/FolderBrowser.tsx
+++ b/ui/src/components/FolderBrowser.tsx
@@ -19,6 +19,9 @@ import {
 } from 'lucide-react'
 import * as api from '../lib/api'
 import type { DirectoryEntry, DriveInfo } from '../lib/types'
+import { Button } from '@/components/ui/button'
+import { Input } from '@/components/ui/input'
+import { Card, CardContent } from '@/components/ui/card'
 
 interface FolderBrowserProps {
   onSelect: (path: string) => void
@@ -139,37 +142,36 @@ export function FolderBrowser({ onSelect, onCancel, initialPath }: FolderBrowser
   return (
     <div className="flex flex-col h-full max-h-[70vh]">
       {/* Header with breadcrumb navigation */}
-      <div className="flex-shrink-0 p-4 border-b-3 border-[var(--color-neo-border)] bg-[var(--color-neo-card)]">
+      <div className="flex-shrink-0 p-4 border-b bg-card">
         <div className="flex items-center gap-2 mb-3">
-          <Folder size={20} className="text-[var(--color-neo-progress)]" />
-          <span className="font-bold text-[var(--color-neo-text)]">Select Project Folder</span>
+          <Folder size={20} className="text-primary" />
+          <span className="font-semibold">Select Project Folder</span>
         </div>
 
         {/* Breadcrumb navigation */}
         <div className="flex items-center gap-1 flex-wrap text-sm">
           {directoryData?.parent_path && (
-            <button
+            <Button
+              variant="ghost"
+              size="icon-sm"
               onClick={handleNavigateUp}
-              className="neo-btn neo-btn-ghost p-1"
               title="Go up"
             >
               <ArrowLeft size={16} />
-            </button>
+            </Button>
           )}
 
           {breadcrumbs.map((crumb, index) => (
             <div key={crumb.path} className="flex items-center">
-              {index > 0 && <ChevronRight size={14} className="text-[var(--color-neo-text-muted)] mx-1" />}
-              <button
+              {index > 0 && <ChevronRight size={14} className="text-muted-foreground mx-1" />}
+              <Button
+                variant="ghost"
+                size="sm"
                 onClick={() => handleNavigate(crumb.path)}
-                className={`
-                  px-2 py-1 rounded text-[var(--color-neo-text)]
-                  hover:bg-[var(--color-neo-bg)]
-                  ${index === breadcrumbs.length - 1 ? 'font-bold' : ''}
-                `}
+                className={index === breadcrumbs.length - 1 ? 'font-semibold' : ''}
               >
                 {crumb.name}
-              </button>
+              </Button>
             </div>
           ))}
         </div>
@@ -177,162 +179,161 @@ export function FolderBrowser({ onSelect, onCancel, initialPath }: FolderBrowser
 
       {/* Drive selector (Windows only) */}
       {directoryData?.drives && directoryData.drives.length > 0 && (
-        <div className="flex-shrink-0 p-3 border-b-3 border-[var(--color-neo-border)] bg-[var(--color-neo-bg)]">
+        <div className="flex-shrink-0 p-3 border-b bg-muted/50">
           <div className="flex items-center gap-2 flex-wrap">
-            <span className="text-sm font-medium text-[var(--color-neo-text-secondary)]">Drives:</span>
+            <span className="text-sm font-medium text-muted-foreground">Drives:</span>
             {directoryData.drives.map((drive) => (
-              <button
+              <Button
                 key={drive.letter}
+                variant={currentPath?.startsWith(drive.letter) ? 'default' : 'outline'}
+                size="sm"
                 onClick={() => handleDriveSelect(drive)}
-                className={`
-                  neo-btn neo-btn-ghost py-1 px-2 text-sm
-                  flex items-center gap-1
-                  ${currentPath?.startsWith(drive.letter) ? 'bg-[var(--color-neo-progress)] text-[var(--color-neo-text-on-bright)]' : ''}
-                `}
               >
                 <HardDrive size={14} />
                 {drive.letter}: {drive.label && `(${drive.label})`}
-              </button>
+              </Button>
             ))}
           </div>
         </div>
       )}
 
       {/* Directory listing */}
-      <div className="flex-1 overflow-y-auto p-2 bg-[var(--color-neo-card)]">
-        {isLoading ? (
-          <div className="flex items-center justify-center p-8">
-            <Loader2 size={24} className="animate-spin text-[var(--color-neo-progress)]" />
-          </div>
-        ) : error ? (
-          <div className="p-4 text-center">
-            <AlertCircle size={32} className="mx-auto mb-2 text-[var(--color-neo-danger)]" />
-            <p className="text-[var(--color-neo-danger)]">
-              {error instanceof Error ? error.message : 'Failed to load directory'}
-            </p>
-            <button onClick={() => refetch()} className="neo-btn neo-btn-ghost mt-2">
-              Retry
-            </button>
-          </div>
-        ) : (
-          <div className="grid grid-cols-1 gap-1">
-            {/* Directory entries - only show directories */}
-            {directoryData?.entries
-              .filter((entry) => entry.is_directory)
-              .map((entry) => (
-                <button
-                  key={entry.path}
-                  onClick={() => handleEntryClick(entry)}
-                  onDoubleClick={() => handleNavigate(entry.path)}
-                  className={`
-                    w-full text-left p-2 rounded
-                    flex items-center gap-2
-                    hover:bg-[var(--color-neo-bg)]
-                    border-2 border-transparent
-                    text-[var(--color-neo-text)]
-                    ${selectedPath === entry.path ? 'bg-[var(--color-neo-progress)] bg-opacity-10 border-[var(--color-neo-progress)]' : ''}
-                  `}
-                >
-                  {selectedPath === entry.path ? (
-                    <FolderOpen size={18} className="text-[var(--color-neo-progress)] flex-shrink-0" />
-                  ) : (
-                    <Folder size={18} className="text-[var(--color-neo-pending)] flex-shrink-0" />
-                  )}
-                  <span className="truncate flex-1 text-[var(--color-neo-text)]">{entry.name}</span>
-                  {entry.has_children && (
-                    <ChevronRight size={14} className="ml-auto text-[var(--color-neo-text-muted)] flex-shrink-0" />
-                  )}
-                </button>
-              ))}
-
-            {/* Empty state */}
-            {directoryData?.entries.filter((e) => e.is_directory).length === 0 && (
-              <div className="p-4 text-center text-[var(--color-neo-text-secondary)]">
-                <Folder size={32} className="mx-auto mb-2 opacity-50" />
-                <p>No subfolders</p>
-                <p className="text-sm">You can create a new folder or select this directory.</p>
-              </div>
-            )}
-          </div>
-        )}
-
-        {/* New folder creation */}
-        {isCreatingFolder && (
-          <div className="mt-2 p-3 bg-[var(--color-neo-bg)] border-2 border-[var(--color-neo-border)] rounded">
-            <div className="flex items-center gap-2">
-              <FolderPlus size={18} className="text-[var(--color-neo-progress)]" />
-              <input
-                type="text"
-                value={newFolderName}
-                onChange={(e) => setNewFolderName(e.target.value)}
-                placeholder="New folder name"
-                className="neo-input flex-1 py-1"
-                autoFocus
-                onKeyDown={(e) => {
-                  if (e.key === 'Enter') handleCreateFolder()
-                  if (e.key === 'Escape') {
-                    setIsCreatingFolder(false)
-                    setNewFolderName('')
-                    setCreateError(null)
-                  }
-                }}
-              />
-              <button onClick={handleCreateFolder} className="neo-btn neo-btn-primary py-1 px-3">
-                Create
-              </button>
-              <button
-                onClick={() => {
-                  setIsCreatingFolder(false)
-                  setNewFolderName('')
-                  setCreateError(null)
-                }}
-                className="neo-btn neo-btn-ghost py-1 px-2"
-              >
-                Cancel
-              </button>
+      <div className="flex-1 min-h-0 overflow-y-auto bg-card">
+        <div className="p-2">
+          {isLoading ? (
+            <div className="flex items-center justify-center p-8">
+              <Loader2 size={24} className="animate-spin text-primary" />
             </div>
-            {createError && (
-              <p className="text-sm text-[var(--color-neo-danger)] mt-1">{createError}</p>
-            )}
-          </div>
-        )}
+          ) : error ? (
+            <div className="p-4 text-center">
+              <AlertCircle size={32} className="mx-auto mb-2 text-destructive" />
+              <p className="text-destructive">
+                {error instanceof Error ? error.message : 'Failed to load directory'}
+              </p>
+              <Button variant="outline" size="sm" onClick={() => refetch()} className="mt-2">
+                Retry
+              </Button>
+            </div>
+          ) : (
+            <div className="grid grid-cols-1 gap-1">
+              {/* Directory entries - only show directories */}
+              {directoryData?.entries
+                .filter((entry) => entry.is_directory)
+                .map((entry) => (
+                  <button
+                    key={entry.path}
+                    onClick={() => handleEntryClick(entry)}
+                    onDoubleClick={() => handleNavigate(entry.path)}
+                    className={`
+                      w-full text-left p-2 rounded-md
+                      flex items-center gap-2
+                      hover:bg-muted
+                      border-2 border-transparent transition-colors
+                      ${selectedPath === entry.path ? 'bg-primary/10 border-primary' : ''}
+                    `}
+                  >
+                    {selectedPath === entry.path ? (
+                      <FolderOpen size={18} className="text-primary flex-shrink-0" />
+                    ) : (
+                      <Folder size={18} className="text-muted-foreground flex-shrink-0" />
+                    )}
+                    <span className="truncate flex-1">{entry.name}</span>
+                    {entry.has_children && (
+                      <ChevronRight size={14} className="ml-auto text-muted-foreground flex-shrink-0" />
+                    )}
+                  </button>
+                ))}
+
+              {/* Empty state */}
+              {directoryData?.entries.filter((e) => e.is_directory).length === 0 && (
+                <div className="p-4 text-center text-muted-foreground">
+                  <Folder size={32} className="mx-auto mb-2 opacity-50" />
+                  <p>No subfolders</p>
+                  <p className="text-sm">You can create a new folder or select this directory.</p>
+                </div>
+              )}
+            </div>
+          )}
+
+          {/* New folder creation */}
+          {isCreatingFolder && (
+            <Card className="mt-2">
+              <CardContent className="p-3">
+                <div className="flex items-center gap-2">
+                  <FolderPlus size={18} className="text-primary" />
+                  <Input
+                    type="text"
+                    value={newFolderName}
+                    onChange={(e) => setNewFolderName(e.target.value)}
+                    placeholder="New folder name"
+                    className="flex-1"
+                    autoFocus
+                    onKeyDown={(e) => {
+                      if (e.key === 'Enter') handleCreateFolder()
+                      if (e.key === 'Escape') {
+                        setIsCreatingFolder(false)
+                        setNewFolderName('')
+                        setCreateError(null)
+                      }
+                    }}
+                  />
+                  <Button onClick={handleCreateFolder} size="sm">
+                    Create
+                  </Button>
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    onClick={() => {
+                      setIsCreatingFolder(false)
+                      setNewFolderName('')
+                      setCreateError(null)
+                    }}
+                  >
+                    Cancel
+                  </Button>
+                </div>
+                {createError && (
+                  <p className="text-sm text-destructive mt-1">{createError}</p>
+                )}
+              </CardContent>
+            </Card>
+          )}
+        </div>
       </div>
 
       {/* Footer with selected path and actions */}
-      <div className="flex-shrink-0 p-4 border-t-3 border-[var(--color-neo-border)] bg-[var(--color-neo-card)]">
+      <div className="flex-shrink-0 p-4 border-t bg-card">
         {/* Selected path display */}
-        <div className="mb-3 p-2 bg-[var(--color-neo-bg)] rounded border-2 border-[var(--color-neo-border)]">
-          <div className="text-xs text-[var(--color-neo-text-secondary)] mb-1">Selected path:</div>
-          <div className="font-mono text-sm truncate text-[var(--color-neo-text)]">{selectedPath || 'No folder selected'}</div>
-          {selectedPath && (
-            <div className="text-xs text-[var(--color-neo-text-secondary)] mt-2 italic">
-              This folder will contain all project files
-            </div>
-          )}
-        </div>
+        <Card className="mb-3">
+          <CardContent className="p-2">
+            <div className="text-xs text-muted-foreground mb-1">Selected path:</div>
+            <div className="font-mono text-sm truncate">{selectedPath || 'No folder selected'}</div>
+            {selectedPath && (
+              <div className="text-xs text-muted-foreground mt-2 italic">
+                This folder will contain all project files
+              </div>
+            )}
+          </CardContent>
+        </Card>
 
         {/* Actions */}
         <div className="flex items-center justify-between">
-          <button
+          <Button
+            variant="outline"
             onClick={() => setIsCreatingFolder(true)}
-            className="neo-btn neo-btn-ghost"
             disabled={isCreatingFolder}
           >
             <FolderPlus size={16} />
             New Folder
-          </button>
+          </Button>
 
           <div className="flex items-center gap-2">
-            <button onClick={onCancel} className="neo-btn neo-btn-ghost">
+            <Button variant="outline" onClick={onCancel}>
               Cancel
-            </button>
-            <button
-              onClick={handleSelect}
-              className="neo-btn neo-btn-primary"
-              disabled={!selectedPath}
-            >
+            </Button>
+            <Button onClick={handleSelect} disabled={!selectedPath}>
               Select This Folder
-            </button>
+            </Button>
           </div>
         </div>
       </div>
diff --git a/ui/src/components/KanbanBoard.tsx b/ui/src/components/KanbanBoard.tsx
index 430b13d..207ac58 100644
--- a/ui/src/components/KanbanBoard.tsx
+++ b/ui/src/components/KanbanBoard.tsx
@@ -1,5 +1,6 @@
 import { KanbanColumn } from './KanbanColumn'
 import type { Feature, FeatureListResponse, ActiveAgent } from '../lib/types'
+import { Card, CardContent } from '@/components/ui/card'
 
 interface KanbanBoardProps {
   features: FeatureListResponse | undefined
@@ -7,8 +8,8 @@ interface KanbanBoardProps {
   onAddFeature?: () => void
   onExpandProject?: () => void
   activeAgents?: ActiveAgent[]
-  onCreateSpec?: () => void  // Callback to start spec creation
-  hasSpec?: boolean          // Whether the project has a spec
+  onCreateSpec?: () => void
+  hasSpec?: boolean
 }
 
 export function KanbanBoard({ features, onFeatureClick, onAddFeature, onExpandProject, activeAgents = [], onCreateSpec, hasSpec = true }: KanbanBoardProps) {
@@ -23,14 +24,16 @@ export function KanbanBoard({ features, onFeatureClick, onAddFeature, onExpandPr
     return (
       <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
         {['Pending', 'In Progress', 'Done'].map(title => (
-          <div key={title} className="neo-card p-4">
-            <div className="h-8 bg-[var(--color-neo-bg)] animate-pulse mb-4" />
-            <div className="space-y-3">
-              {[1, 2, 3].map(i => (
-                <div key={i} className="h-24 bg-[var(--color-neo-bg)] animate-pulse" />
-              ))}
-            </div>
-          </div>
+          <Card key={title} className="py-4">
+            <CardContent className="p-4">
+              <div className="h-8 bg-muted animate-pulse rounded mb-4" />
+              <div className="space-y-3">
+                {[1, 2, 3].map(i => (
+                  <div key={i} className="h-24 bg-muted animate-pulse rounded" />
+                ))}
+              </div>
+            </CardContent>
+          </Card>
         ))}
       </div>
     )
diff --git a/ui/src/components/KanbanColumn.tsx b/ui/src/components/KanbanColumn.tsx
index 191ac5a..9ab8902 100644
--- a/ui/src/components/KanbanColumn.tsx
+++ b/ui/src/components/KanbanColumn.tsx
@@ -1,26 +1,29 @@
 import { FeatureCard } from './FeatureCard'
 import { Plus, Sparkles, Wand2 } from 'lucide-react'
 import type { Feature, ActiveAgent } from '../lib/types'
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
+import { Button } from '@/components/ui/button'
+import { Badge } from '@/components/ui/badge'
 
 interface KanbanColumnProps {
   title: string
   count: number
   features: Feature[]
-  allFeatures?: Feature[]  // For dependency status calculation
-  activeAgents?: ActiveAgent[]  // Active agents for showing which agent is working on a feature
+  allFeatures?: Feature[]
+  activeAgents?: ActiveAgent[]
   color: 'pending' | 'progress' | 'done'
   onFeatureClick: (feature: Feature) => void
   onAddFeature?: () => void
   onExpandProject?: () => void
   showExpandButton?: boolean
-  onCreateSpec?: () => void  // Callback to start spec creation
-  showCreateSpec?: boolean   // Show "Create Spec" button when project has no spec
+  onCreateSpec?: () => void
+  showCreateSpec?: boolean
 }
 
 const colorMap = {
-  pending: 'kanban-header-pending',
-  progress: 'kanban-header-progress',
-  done: 'kanban-header-done',
+  pending: 'border-t-4 border-t-muted',
+  progress: 'border-t-4 border-t-primary',
+  done: 'border-t-4 border-t-primary',
 }
 
 export function KanbanColumn({
@@ -41,81 +44,78 @@ export function KanbanColumn({
   const agentByFeatureId = new Map(
     activeAgents.map(agent => [agent.featureId, agent])
   )
-  return (
-    <div
-      className={`neo-card overflow-hidden kanban-column ${colorMap[color]}`}
-    >
-      {/* Header */}
-      <div
-        className="kanban-header px-4 py-3 border-b border-[var(--color-neo-border)]"
-      >
-        <div className="flex items-center justify-between">
-          <h2 className="font-display text-lg font-semibold flex items-center gap-2 text-[var(--color-neo-text)]">
-            {title}
-            <span className="neo-badge bg-[var(--color-neo-neutral-100)] text-[var(--color-neo-text-secondary)]">{count}</span>
-          </h2>
-          {(onAddFeature || onExpandProject) && (
-            <div className="flex items-center gap-2">
-              {onAddFeature && (
-                <button
-                  onClick={onAddFeature}
-                  className="neo-btn neo-btn-primary text-sm py-1.5 px-2"
-                  title="Add new feature (N)"
-                >
-                  <Plus size={16} />
-                </button>
-              )}
-              {onExpandProject && showExpandButton && (
-                <button
-                  onClick={onExpandProject}
-                  className="neo-btn bg-[var(--color-neo-progress)] text-[var(--color-neo-text-on-bright)] text-sm py-1.5 px-2"
-                  title="Expand project with AI (E)"
-                >
-                  <Sparkles size={16} />
-                </button>
-              )}
-            </div>
-          )}
-        </div>
-      </div>
 
-      {/* Cards */}
-      <div className="p-4 space-y-3 max-h-[600px] overflow-y-auto bg-[var(--color-neo-bg)]">
-        {features.length === 0 ? (
-          <div className="text-center py-8 text-[var(--color-neo-text-secondary)]">
-            {showCreateSpec && onCreateSpec ? (
-              <div className="space-y-4">
-                <p>No spec created yet</p>
-                <button
-                  onClick={onCreateSpec}
-                  className="neo-btn neo-btn-primary inline-flex items-center gap-2"
-                >
-                  <Wand2 size={18} />
-                  Create Spec with AI
-                </button>
-              </div>
-            ) : (
-              'No features'
+  return (
+    <Card className={`overflow-hidden ${colorMap[color]} py-0`}>
+      {/* Header */}
+      <CardHeader className="px-4 py-3 border-b flex-row items-center justify-between space-y-0">
+        <CardTitle className="text-lg font-semibold flex items-center gap-2">
+          {title}
+          <Badge variant="secondary">{count}</Badge>
+        </CardTitle>
+        {(onAddFeature || onExpandProject) && (
+          <div className="flex items-center gap-2">
+            {onAddFeature && (
+              <Button
+                onClick={onAddFeature}
+                size="icon-sm"
+                title="Add new feature (N)"
+              >
+                <Plus size={16} />
+              </Button>
+            )}
+            {onExpandProject && showExpandButton && (
+              <Button
+                onClick={onExpandProject}
+                size="icon-sm"
+                variant="secondary"
+                title="Expand project with AI (E)"
+              >
+                <Sparkles size={16} />
+              </Button>
             )}
           </div>
-        ) : (
-          features.map((feature, index) => (
-            <div
-              key={feature.id}
-              className="animate-slide-in"
-              style={{ animationDelay: `${index * 50}ms` }}
-            >
-              <FeatureCard
-                feature={feature}
-                onClick={() => onFeatureClick(feature)}
-                isInProgress={color === 'progress'}
-                allFeatures={allFeatures}
-                activeAgent={agentByFeatureId.get(feature.id)}
-              />
-            </div>
-          ))
         )}
-      </div>
-    </div>
+      </CardHeader>
+
+      {/* Cards */}
+      <CardContent className="p-0">
+        <div className="h-[600px] overflow-y-auto">
+          <div className="p-4 space-y-3">
+            {features.length === 0 ? (
+              <div className="text-center py-8 text-muted-foreground">
+                {showCreateSpec && onCreateSpec ? (
+                  <div className="space-y-4">
+                    <p>No spec created yet</p>
+                    <Button onClick={onCreateSpec}>
+                      <Wand2 size={18} />
+                      Create Spec with AI
+                    </Button>
+                  </div>
+                ) : (
+                  'No features'
+                )}
+              </div>
+            ) : (
+              features.map((feature, index) => (
+                <div
+                  key={feature.id}
+                  className="animate-slide-in"
+                  style={{ animationDelay: `${index * 50}ms` }}
+                >
+                  <FeatureCard
+                    feature={feature}
+                    onClick={() => onFeatureClick(feature)}
+                    isInProgress={color === 'progress'}
+                    allFeatures={allFeatures}
+                    activeAgent={agentByFeatureId.get(feature.id)}
+                  />
+                </div>
+              ))
+            )}
+          </div>
+        </div>
+      </CardContent>
+    </Card>
   )
 }
diff --git a/ui/src/components/KeyboardShortcutsHelp.tsx b/ui/src/components/KeyboardShortcutsHelp.tsx
index 107b4ba..8ead81f 100644
--- a/ui/src/components/KeyboardShortcutsHelp.tsx
+++ b/ui/src/components/KeyboardShortcutsHelp.tsx
@@ -1,5 +1,12 @@
 import { useEffect, useCallback } from 'react'
-import { X, Keyboard } from 'lucide-react'
+import { Keyboard } from 'lucide-react'
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog'
+import { Badge } from '@/components/ui/badge'
 
 interface Shortcut {
   key: string
@@ -20,10 +27,11 @@ const shortcuts: Shortcut[] = [
 ]
 
 interface KeyboardShortcutsHelpProps {
+  isOpen: boolean
   onClose: () => void
 }
 
-export function KeyboardShortcutsHelp({ onClose }: KeyboardShortcutsHelpProps) {
+export function KeyboardShortcutsHelp({ isOpen, onClose }: KeyboardShortcutsHelpProps) {
   const handleKeyDown = useCallback(
     (e: KeyboardEvent) => {
       if (e.key === 'Escape' || e.key === '?') {
@@ -35,59 +43,49 @@ export function KeyboardShortcutsHelp({ onClose }: KeyboardShortcutsHelpProps) {
   )
 
   useEffect(() => {
-    window.addEventListener('keydown', handleKeyDown)
-    return () => window.removeEventListener('keydown', handleKeyDown)
-  }, [handleKeyDown])
+    if (isOpen) {
+      window.addEventListener('keydown', handleKeyDown)
+      return () => window.removeEventListener('keydown', handleKeyDown)
+    }
+  }, [isOpen, handleKeyDown])
 
   return (
-    <div
-      className="fixed inset-0 z-50 flex items-center justify-center bg-black/50"
-      onClick={onClose}
-    >
-      <div
-        className="neo-card p-6 max-w-md w-full mx-4"
-        onClick={(e) => e.stopPropagation()}
-      >
-        {/* Header */}
-        <div className="flex items-center justify-between mb-6">
-          <div className="flex items-center gap-2">
-            <Keyboard size={20} className="text-neo-accent" />
-            <h2 className="font-display text-lg font-bold">Keyboard Shortcuts</h2>
-          </div>
-          <button
-            onClick={onClose}
-            className="neo-btn p-1.5"
-            aria-label="Close"
-          >
-            <X size={16} />
-          </button>
-        </div>
+    <Dialog open={isOpen} onOpenChange={(open) => !open && onClose()}>
+      <DialogContent className="sm:max-w-md">
+        <DialogHeader>
+          <DialogTitle className="flex items-center gap-2">
+            <Keyboard size={20} className="text-primary" />
+            Keyboard Shortcuts
+          </DialogTitle>
+        </DialogHeader>
 
         {/* Shortcuts list */}
-        <ul className="space-y-2">
+        <ul className="space-y-1">
           {shortcuts.map((shortcut) => (
             <li
               key={shortcut.key}
-              className="flex items-center justify-between py-2 border-b border-neo-border/30 last:border-0"
+              className="flex items-center justify-between py-2 border-b border-border/50 last:border-0"
             >
-              <div className="flex items-center gap-2">
-                <kbd className="px-2 py-1 text-sm font-mono bg-neo-bg rounded border border-neo-border shadow-neo-sm min-w-[2rem] text-center">
+              <div className="flex items-center gap-3">
+                <kbd className="px-2 py-1 text-xs font-mono bg-muted rounded border border-border min-w-[2rem] text-center">
                   {shortcut.key}
                 </kbd>
-                <span className="text-neo-text">{shortcut.description}</span>
+                <span className="text-sm">{shortcut.description}</span>
               </div>
               {shortcut.context && (
-                <span className="text-xs text-neo-muted">{shortcut.context}</span>
+                <Badge variant="secondary" className="text-xs">
+                  {shortcut.context}
+                </Badge>
               )}
             </li>
           ))}
         </ul>
 
         {/* Footer */}
-        <p className="text-xs text-neo-muted text-center mt-6">
+        <p className="text-xs text-muted-foreground text-center pt-2">
           Press ? or Esc to close
         </p>
-      </div>
-    </div>
+      </DialogContent>
+    </Dialog>
   )
 }
diff --git a/ui/src/components/NewProjectModal.tsx b/ui/src/components/NewProjectModal.tsx
index 5edbc39..38e567f 100644
--- a/ui/src/components/NewProjectModal.tsx
+++ b/ui/src/components/NewProjectModal.tsx
@@ -10,11 +10,25 @@
  */
 
 import { useState } from 'react'
-import { X, Bot, FileEdit, ArrowRight, ArrowLeft, Loader2, CheckCircle2, Folder } from 'lucide-react'
+import { Bot, FileEdit, ArrowRight, ArrowLeft, Loader2, CheckCircle2, Folder } from 'lucide-react'
 import { useCreateProject } from '../hooks/useProjects'
 import { SpecCreationChat } from './SpecCreationChat'
 import { FolderBrowser } from './FolderBrowser'
 import { startAgent } from '../lib/api'
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogDescription,
+  DialogFooter,
+} from '@/components/ui/dialog'
+import { Button } from '@/components/ui/button'
+import { Input } from '@/components/ui/input'
+import { Label } from '@/components/ui/label'
+import { Alert, AlertDescription } from '@/components/ui/alert'
+import { Badge } from '@/components/ui/badge'
+import { Card, CardContent } from '@/components/ui/card'
 
 type InitializerStatus = 'idle' | 'starting' | 'error'
 
@@ -75,7 +89,7 @@ export function NewProjectModal({
   }
 
   const handleFolderSelect = (path: string) => {
-    setProjectPath(path)  // Use selected path directly - no subfolder creation
+    setProjectPath(path)
     changeStep('method')
   }
 
@@ -189,7 +203,7 @@ export function NewProjectModal({
   // Full-screen chat view
   if (step === 'chat') {
     return (
-      <div className="fixed inset-0 z-50 bg-[var(--color-neo-bg)]">
+      <div className="fixed inset-0 z-50 bg-background">
         <SpecCreationChat
           projectName={projectName.trim()}
           onComplete={handleSpecComplete}
@@ -206,31 +220,20 @@ export function NewProjectModal({
   // Folder step uses larger modal
   if (step === 'folder') {
     return (
-      <div className="neo-modal-backdrop" onClick={handleClose}>
-        <div
-          className="neo-modal w-full max-w-3xl max-h-[85vh] flex flex-col"
-          onClick={(e) => e.stopPropagation()}
-        >
+      <Dialog open={true} onOpenChange={(open) => !open && handleClose()}>
+        <DialogContent className="sm:max-w-3xl max-h-[85vh] flex flex-col p-0">
           {/* Header */}
-          <div className="flex items-center justify-between p-4 border-b-3 border-[var(--color-neo-border)]">
+          <DialogHeader className="p-6 pb-4 border-b">
             <div className="flex items-center gap-3">
-              <Folder size={24} className="text-[var(--color-neo-progress)]" />
+              <Folder size={24} className="text-primary" />
               <div>
-                <h2 className="font-display font-bold text-xl text-[var(--color-neo-text)]">
-                  Select Project Location
-                </h2>
-                <p className="text-sm text-[var(--color-neo-text-secondary)]">
-                  Select the folder to use for project <span className="font-bold font-mono">{projectName}</span>. Create a new folder or choose an existing one.
-                </p>
+                <DialogTitle>Select Project Location</DialogTitle>
+                <DialogDescription>
+                  Select the folder to use for project <span className="font-semibold font-mono">{projectName}</span>. Create a new folder or choose an existing one.
+                </DialogDescription>
               </div>
             </div>
-            <button
-              onClick={handleClose}
-              className="neo-btn neo-btn-ghost p-2"
-            >
-              <X size={20} />
-            </button>
-          </div>
+          </DialogHeader>
 
           {/* Folder Browser */}
           <div className="flex-1 overflow-hidden">
@@ -239,193 +242,151 @@ export function NewProjectModal({
               onCancel={handleFolderCancel}
             />
           </div>
-        </div>
-      </div>
+        </DialogContent>
+      </Dialog>
     )
   }
 
   return (
-    <div className="neo-modal-backdrop" onClick={handleClose}>
-      <div
-        className="neo-modal w-full max-w-lg"
-        onClick={(e) => e.stopPropagation()}
-      >
-        {/* Header */}
-        <div className="flex items-center justify-between p-4 border-b-3 border-[var(--color-neo-border)]">
-          <h2 className="font-display font-bold text-xl text-[var(--color-neo-text)]">
+    <Dialog open={true} onOpenChange={(open) => !open && handleClose()}>
+      <DialogContent className="sm:max-w-lg">
+        <DialogHeader>
+          <DialogTitle>
             {step === 'name' && 'Create New Project'}
             {step === 'method' && 'Choose Setup Method'}
             {step === 'complete' && 'Project Created!'}
-          </h2>
-          <button
-            onClick={handleClose}
-            className="neo-btn neo-btn-ghost p-2"
-          >
-            <X size={20} />
-          </button>
-        </div>
+          </DialogTitle>
+        </DialogHeader>
 
-        {/* Content */}
-        <div className="p-6">
-          {/* Step 1: Project Name */}
-          {step === 'name' && (
-            <form onSubmit={handleNameSubmit}>
-              <div className="mb-6">
-                <label className="block font-bold mb-2 text-[var(--color-neo-text)]">
-                  Project Name
-                </label>
-                <input
-                  type="text"
-                  value={projectName}
-                  onChange={(e) => setProjectName(e.target.value)}
-                  placeholder="my-awesome-app"
-                  className="neo-input"
-                  pattern="^[a-zA-Z0-9_-]+$"
-                  autoFocus
-                />
-                <p className="text-sm text-[var(--color-neo-text-secondary)] mt-2">
-                  Use letters, numbers, hyphens, and underscores only.
-                </p>
-              </div>
-
-              {error && (
-                <div className="mb-4 p-3 bg-[var(--color-neo-error-bg)] text-[var(--color-neo-error-text)] text-sm border-3 border-[var(--color-neo-error-border)]">
-                  {error}
-                </div>
-              )}
-
-              <div className="flex justify-end">
-                <button
-                  type="submit"
-                  className="neo-btn neo-btn-primary"
-                  disabled={!projectName.trim()}
-                >
-                  Next
-                  <ArrowRight size={16} />
-                </button>
-              </div>
-            </form>
-          )}
-
-          {/* Step 2: Spec Method */}
-          {step === 'method' && (
-            <div>
-              <p className="text-[var(--color-neo-text-secondary)] mb-6">
-                How would you like to define your project?
+        {/* Step 1: Project Name */}
+        {step === 'name' && (
+          <form onSubmit={handleNameSubmit} className="space-y-4">
+            <div className="space-y-2">
+              <Label htmlFor="project-name">Project Name</Label>
+              <Input
+                id="project-name"
+                type="text"
+                value={projectName}
+                onChange={(e) => setProjectName(e.target.value)}
+                placeholder="my-awesome-app"
+                pattern="^[a-zA-Z0-9_-]+$"
+                autoFocus
+              />
+              <p className="text-sm text-muted-foreground">
+                Use letters, numbers, hyphens, and underscores only.
               </p>
+            </div>
 
-              <div className="space-y-4">
-                {/* Claude option */}
-                <button
-                  onClick={() => handleMethodSelect('claude')}
-                  disabled={createProject.isPending}
-                  className="
-                    w-full text-left p-4
-                    hover:translate-x-[-2px] hover:translate-y-[-2px]
-                    transition-all duration-150
-                    disabled:opacity-50 disabled:cursor-not-allowed
-                    neo-card
-                  "
-                >
+            {error && (
+              <Alert variant="destructive">
+                <AlertDescription>{error}</AlertDescription>
+              </Alert>
+            )}
+
+            <DialogFooter>
+              <Button type="submit" disabled={!projectName.trim()}>
+                Next
+                <ArrowRight size={16} />
+              </Button>
+            </DialogFooter>
+          </form>
+        )}
+
+        {/* Step 2: Spec Method */}
+        {step === 'method' && (
+          <div className="space-y-4">
+            <DialogDescription>
+              How would you like to define your project?
+            </DialogDescription>
+
+            <div className="space-y-3">
+              {/* Claude option */}
+              <Card
+                className="cursor-pointer hover:border-primary transition-colors"
+                onClick={() => !createProject.isPending && handleMethodSelect('claude')}
+              >
+                <CardContent className="p-4">
                   <div className="flex items-start gap-4">
-                    <div
-                      className="p-2 bg-[var(--color-neo-progress)] border-2 border-[var(--color-neo-border)]"
-                      style={{ boxShadow: 'var(--shadow-neo-sm)' }}
-                    >
-                      <Bot size={24} className="text-[var(--color-neo-text-on-bright)]" />
+                    <div className="p-2 bg-primary/10 rounded-lg">
+                      <Bot size={24} className="text-primary" />
                     </div>
                     <div className="flex-1">
                       <div className="flex items-center gap-2">
-                        <span className="font-bold text-lg text-[var(--color-neo-text)]">Create with Claude</span>
-                        <span className="neo-badge bg-[var(--color-neo-done)] text-[var(--color-neo-text-on-bright)] text-xs">
-                          Recommended
-                        </span>
+                        <span className="font-semibold">Create with Claude</span>
+                        <Badge>Recommended</Badge>
                       </div>
-                      <p className="text-sm text-[var(--color-neo-text-secondary)] mt-1">
+                      <p className="text-sm text-muted-foreground mt-1">
                         Interactive conversation to define features and generate your app specification automatically.
                       </p>
                     </div>
                   </div>
-                </button>
+                </CardContent>
+              </Card>
 
-                {/* Manual option */}
-                <button
-                  onClick={() => handleMethodSelect('manual')}
-                  disabled={createProject.isPending}
-                  className="
-                    w-full text-left p-4
-                    hover:translate-x-[-2px] hover:translate-y-[-2px]
-                    transition-all duration-150
-                    disabled:opacity-50 disabled:cursor-not-allowed
-                    neo-card
-                  "
-                >
+              {/* Manual option */}
+              <Card
+                className="cursor-pointer hover:border-primary transition-colors"
+                onClick={() => !createProject.isPending && handleMethodSelect('manual')}
+              >
+                <CardContent className="p-4">
                   <div className="flex items-start gap-4">
-                    <div
-                      className="p-2 bg-[var(--color-neo-pending)] border-2 border-[var(--color-neo-border)]"
-                      style={{ boxShadow: 'var(--shadow-neo-sm)' }}
-                    >
-                      <FileEdit size={24} className="text-[var(--color-neo-text-on-bright)]" />
+                    <div className="p-2 bg-secondary rounded-lg">
+                      <FileEdit size={24} className="text-secondary-foreground" />
                     </div>
                     <div className="flex-1">
-                      <span className="font-bold text-lg text-[var(--color-neo-text)]">Edit Templates Manually</span>
-                      <p className="text-sm text-[var(--color-neo-text-secondary)] mt-1">
+                      <span className="font-semibold">Edit Templates Manually</span>
+                      <p className="text-sm text-muted-foreground mt-1">
                         Edit the template files directly. Best for developers who want full control.
                       </p>
                     </div>
                   </div>
-                </button>
-              </div>
-
-              {error && (
-                <div className="mt-4 p-3 bg-[var(--color-neo-error-bg)] text-[var(--color-neo-error-text)] text-sm border-3 border-[var(--color-neo-error-border)]">
-                  {error}
-                </div>
-              )}
-
-              {createProject.isPending && (
-                <div className="mt-4 flex items-center justify-center gap-2 text-[var(--color-neo-text-secondary)]">
-                  <Loader2 size={16} className="animate-spin" />
-                  <span>Creating project...</span>
-                </div>
-              )}
-
-              <div className="flex justify-start mt-6">
-                <button
-                  onClick={handleBack}
-                  className="neo-btn neo-btn-ghost"
-                  disabled={createProject.isPending}
-                >
-                  <ArrowLeft size={16} />
-                  Back
-                </button>
-              </div>
+                </CardContent>
+              </Card>
             </div>
-          )}
 
-          {/* Step 3: Complete */}
-          {step === 'complete' && (
-            <div className="text-center py-8">
-              <div
-                className="inline-flex items-center justify-center w-16 h-16 bg-[var(--color-neo-done)] border-3 border-[var(--color-neo-border)] mb-4"
-                style={{ boxShadow: 'var(--shadow-neo-md)' }}
-              >
-                <CheckCircle2 size={32} className="text-[var(--color-neo-text-on-bright)]" />
-              </div>
-              <h3 className="font-display font-bold text-xl mb-2">
-                {projectName}
-              </h3>
-              <p className="text-[var(--color-neo-text-secondary)]">
-                Your project has been created successfully!
-              </p>
-              <div className="mt-4 flex items-center justify-center gap-2">
+            {error && (
+              <Alert variant="destructive">
+                <AlertDescription>{error}</AlertDescription>
+              </Alert>
+            )}
+
+            {createProject.isPending && (
+              <div className="flex items-center justify-center gap-2 text-muted-foreground">
                 <Loader2 size={16} className="animate-spin" />
-                <span className="text-sm">Redirecting...</span>
+                <span>Creating project...</span>
               </div>
+            )}
+
+            <DialogFooter className="sm:justify-start">
+              <Button
+                variant="ghost"
+                onClick={handleBack}
+                disabled={createProject.isPending}
+              >
+                <ArrowLeft size={16} />
+                Back
+              </Button>
+            </DialogFooter>
+          </div>
+        )}
+
+        {/* Step 3: Complete */}
+        {step === 'complete' && (
+          <div className="text-center py-8">
+            <div className="inline-flex items-center justify-center w-16 h-16 bg-primary/10 rounded-full mb-4">
+              <CheckCircle2 size={32} className="text-primary" />
             </div>
-          )}
-        </div>
-      </div>
-    </div>
+            <h3 className="font-semibold text-xl mb-2">{projectName}</h3>
+            <p className="text-muted-foreground">
+              Your project has been created successfully!
+            </p>
+            <div className="mt-4 flex items-center justify-center gap-2">
+              <Loader2 size={16} className="animate-spin" />
+              <span className="text-sm text-muted-foreground">Redirecting...</span>
+            </div>
+          </div>
+        )}
+      </DialogContent>
+    </Dialog>
   )
 }
diff --git a/ui/src/components/OrchestratorStatusCard.tsx b/ui/src/components/OrchestratorStatusCard.tsx
index 90db078..7ad8b24 100644
--- a/ui/src/components/OrchestratorStatusCard.tsx
+++ b/ui/src/components/OrchestratorStatusCard.tsx
@@ -2,6 +2,9 @@ import { useState } from 'react'
 import { ChevronDown, ChevronUp, Code, FlaskConical, Clock, Lock, Sparkles } from 'lucide-react'
 import { OrchestratorAvatar } from './OrchestratorAvatar'
 import type { OrchestratorStatus, OrchestratorState } from '../lib/types'
+import { Card, CardContent } from '@/components/ui/card'
+import { Button } from '@/components/ui/button'
+import { Badge } from '@/components/ui/badge'
 
 interface OrchestratorStatusCardProps {
   status: OrchestratorStatus
@@ -31,16 +34,16 @@ function getStateText(state: OrchestratorState): string {
 function getStateColor(state: OrchestratorState): string {
   switch (state) {
     case 'complete':
-      return 'text-neo-done'
+      return 'text-primary'
     case 'spawning':
-      return 'text-[#7C3AED]'  // Violet
+      return 'text-violet-600 dark:text-violet-400'
     case 'scheduling':
     case 'monitoring':
-      return 'text-neo-progress'
+      return 'text-primary'
     case 'initializing':
-      return 'text-neo-pending'
+      return 'text-yellow-600 dark:text-yellow-400'
     default:
-      return 'text-neo-text-secondary'
+      return 'text-muted-foreground'
   }
 }
 
@@ -62,91 +65,95 @@ export function OrchestratorStatusCard({ status }: OrchestratorStatusCardProps)
   const [showEvents, setShowEvents] = useState(false)
 
   return (
-    <div className="neo-card p-4 bg-gradient-to-r from-[#EDE9FE] to-[#F3E8FF] border-[#7C3AED]/30 mb-4">
-      <div className="flex items-start gap-4">
-        {/* Avatar */}
-        <OrchestratorAvatar state={status.state} size="md" />
+    <Card className="mb-4 bg-gradient-to-r from-violet-50 to-purple-50 dark:from-violet-950/30 dark:to-purple-950/30 border-violet-200 dark:border-violet-800/50 py-4">
+      <CardContent className="p-4">
+        <div className="flex items-start gap-4">
+          {/* Avatar */}
+          <OrchestratorAvatar state={status.state} size="md" />
 
-        {/* Main content */}
-        <div className="flex-1 min-w-0">
-          {/* Header row */}
-          <div className="flex items-center gap-2 mb-1">
-            <span className="font-display font-bold text-lg text-[#7C3AED]">
-              Maestro
-            </span>
-            <span className={`text-sm font-medium ${getStateColor(status.state)}`}>
-              {getStateText(status.state)}
-            </span>
+          {/* Main content */}
+          <div className="flex-1 min-w-0">
+            {/* Header row */}
+            <div className="flex items-center gap-2 mb-1">
+              <span className="font-semibold text-lg text-violet-700 dark:text-violet-300">
+                Maestro
+              </span>
+              <span className={`text-sm font-medium ${getStateColor(status.state)}`}>
+                {getStateText(status.state)}
+              </span>
+            </div>
+
+            {/* Current message */}
+            <p className="text-sm text-foreground mb-3 line-clamp-2">
+              {status.message}
+            </p>
+
+            {/* Status badges row */}
+            <div className="flex flex-wrap items-center gap-2">
+              {/* Coding agents badge */}
+              <Badge variant="outline" className="bg-blue-100 text-blue-700 border-blue-300 dark:bg-blue-900/30 dark:text-blue-300 dark:border-blue-700">
+                <Code size={12} />
+                Coding: {status.codingAgents}
+              </Badge>
+
+              {/* Testing agents badge */}
+              <Badge variant="outline" className="bg-purple-100 text-purple-700 border-purple-300 dark:bg-purple-900/30 dark:text-purple-300 dark:border-purple-700">
+                <FlaskConical size={12} />
+                Testing: {status.testingAgents}
+              </Badge>
+
+              {/* Ready queue badge */}
+              <Badge variant="outline" className="bg-green-100 text-green-700 border-green-300 dark:bg-green-900/30 dark:text-green-300 dark:border-green-700">
+                <Clock size={12} />
+                Ready: {status.readyCount}
+              </Badge>
+
+              {/* Blocked badge (only show if > 0) */}
+              {status.blockedCount > 0 && (
+                <Badge variant="outline" className="bg-amber-100 text-amber-700 border-amber-300 dark:bg-amber-900/30 dark:text-amber-300 dark:border-amber-700">
+                  <Lock size={12} />
+                  Blocked: {status.blockedCount}
+                </Badge>
+              )}
+            </div>
           </div>
 
-          {/* Current message */}
-          <p className="text-sm text-neo-text mb-3 line-clamp-2">
-            {status.message}
-          </p>
-
-          {/* Status badges row */}
-          <div className="flex flex-wrap items-center gap-2">
-            {/* Coding agents badge */}
-            <div className="inline-flex items-center gap-1.5 px-2 py-1 bg-blue-100 text-blue-700 rounded border border-blue-300 text-xs font-bold">
-              <Code size={12} />
-              <span>Coding: {status.codingAgents}</span>
-            </div>
-
-            {/* Testing agents badge */}
-            <div className="inline-flex items-center gap-1.5 px-2 py-1 bg-purple-100 text-purple-700 rounded border border-purple-300 text-xs font-bold">
-              <FlaskConical size={12} />
-              <span>Testing: {status.testingAgents}</span>
-            </div>
-
-            {/* Ready queue badge */}
-            <div className="inline-flex items-center gap-1.5 px-2 py-1 bg-green-100 text-green-700 rounded border border-green-300 text-xs font-bold">
-              <Clock size={12} />
-              <span>Ready: {status.readyCount}</span>
-            </div>
-
-            {/* Blocked badge (only show if > 0) */}
-            {status.blockedCount > 0 && (
-              <div className="inline-flex items-center gap-1.5 px-2 py-1 bg-amber-100 text-amber-700 rounded border border-amber-300 text-xs font-bold">
-                <Lock size={12} />
-                <span>Blocked: {status.blockedCount}</span>
-              </div>
-            )}
-          </div>
+          {/* Recent events toggle */}
+          {status.recentEvents.length > 0 && (
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={() => setShowEvents(!showEvents)}
+              className="text-violet-600 dark:text-violet-400 hover:bg-violet-100 dark:hover:bg-violet-900/30"
+            >
+              <Sparkles size={12} />
+              Activity
+              {showEvents ? <ChevronUp size={14} /> : <ChevronDown size={14} />}
+            </Button>
+          )}
         </div>
 
-        {/* Recent events toggle */}
-        {status.recentEvents.length > 0 && (
-          <button
-            onClick={() => setShowEvents(!showEvents)}
-            className="flex items-center gap-1 px-2 py-1 text-xs font-medium text-[#7C3AED] hover:bg-[#7C3AED]/10 rounded transition-colors"
-          >
-            <Sparkles size={12} />
-            <span>Activity</span>
-            {showEvents ? <ChevronUp size={14} /> : <ChevronDown size={14} />}
-          </button>
+        {/* Collapsible recent events */}
+        {showEvents && status.recentEvents.length > 0 && (
+          <div className="mt-3 pt-3 border-t border-violet-200 dark:border-violet-800/50">
+            <div className="space-y-1.5">
+              {status.recentEvents.map((event, idx) => (
+                <div
+                  key={`${event.timestamp}-${idx}`}
+                  className="flex items-start gap-2 text-xs"
+                >
+                  <span className="text-violet-500 dark:text-violet-400 shrink-0 font-mono">
+                    {formatRelativeTime(event.timestamp)}
+                  </span>
+                  <span className="text-foreground">
+                    {event.message}
+                  </span>
+                </div>
+              ))}
+            </div>
+          </div>
         )}
-      </div>
-
-      {/* Collapsible recent events */}
-      {showEvents && status.recentEvents.length > 0 && (
-        <div className="mt-3 pt-3 border-t border-[#7C3AED]/20">
-          <div className="space-y-1.5">
-            {status.recentEvents.map((event, idx) => (
-              <div
-                key={`${event.timestamp}-${idx}`}
-                className="flex items-start gap-2 text-xs"
-              >
-                <span className="text-[#A78BFA] shrink-0 font-mono">
-                  {formatRelativeTime(event.timestamp)}
-                </span>
-                <span className="text-neo-text">
-                  {event.message}
-                </span>
-              </div>
-            ))}
-          </div>
-        </div>
-      )}
-    </div>
+      </CardContent>
+    </Card>
   )
 }
diff --git a/ui/src/components/ProgressDashboard.tsx b/ui/src/components/ProgressDashboard.tsx
index c5034b0..7b935db 100644
--- a/ui/src/components/ProgressDashboard.tsx
+++ b/ui/src/components/ProgressDashboard.tsx
@@ -1,4 +1,6 @@
 import { Wifi, WifiOff } from 'lucide-react'
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
+import { Badge } from '@/components/ui/badge'
 
 interface ProgressDashboardProps {
   passing: number
@@ -14,66 +16,68 @@ export function ProgressDashboard({
   isConnected,
 }: ProgressDashboardProps) {
   return (
-    <div className="neo-card p-6">
-      <div className="flex items-center justify-between mb-4">
-        <h2 className="font-display text-xl font-bold uppercase">
+    <Card>
+      <CardHeader className="flex-row items-center justify-between space-y-0 pb-4">
+        <CardTitle className="text-xl uppercase tracking-wide">
           Progress
-        </h2>
-        <div className="flex items-center gap-2">
+        </CardTitle>
+        <Badge variant={isConnected ? 'default' : 'destructive'} className="gap-1">
           {isConnected ? (
             <>
-              <Wifi size={16} className="text-[var(--color-neo-done)]" />
-              <span className="text-sm text-[var(--color-neo-done)]">Live</span>
+              <Wifi size={14} />
+              Live
             </>
           ) : (
             <>
-              <WifiOff size={16} className="text-[var(--color-neo-danger)]" />
-              <span className="text-sm text-[var(--color-neo-danger)]">Offline</span>
+              <WifiOff size={14} />
+              Offline
             </>
           )}
-        </div>
-      </div>
+        </Badge>
+      </CardHeader>
 
-      {/* Large Percentage */}
-      <div className="text-center mb-6">
-        <span className="inline-flex items-baseline">
-          <span className="font-display text-6xl font-bold">
-            {percentage.toFixed(1)}
-          </span>
-          <span className="font-display text-3xl font-bold text-[var(--color-neo-text-secondary)]">
-            %
-          </span>
-        </span>
-      </div>
-
-      {/* Progress Bar */}
-      <div className="neo-progress mb-4">
-        <div
-          className="neo-progress-fill"
-          style={{ width: `${percentage}%` }}
-        />
-      </div>
-
-      {/* Stats */}
-      <div className="flex justify-center gap-8 text-center">
-        <div>
-          <span className="font-mono text-3xl font-bold text-[var(--color-neo-done)]">
-            {passing}
-          </span>
-          <span className="block text-sm text-[var(--color-neo-text-secondary)] uppercase">
-            Passing
+      <CardContent>
+        {/* Large Percentage */}
+        <div className="text-center mb-6">
+          <span className="inline-flex items-baseline">
+            <span className="text-6xl font-bold tabular-nums">
+              {percentage.toFixed(1)}
+            </span>
+            <span className="text-3xl font-semibold text-muted-foreground">
+              %
+            </span>
           </span>
         </div>
-        <div className="text-4xl text-[var(--color-neo-text-secondary)]">/</div>
-        <div>
-          <span className="font-mono text-3xl font-bold">
-            {total}
-          </span>
-          <span className="block text-sm text-[var(--color-neo-text-secondary)] uppercase">
-            Total
-          </span>
+
+        {/* Progress Bar */}
+        <div className="h-3 bg-muted rounded-full overflow-hidden mb-6">
+          <div
+            className="h-full bg-primary rounded-full transition-all duration-500 ease-out"
+            style={{ width: `${percentage}%` }}
+          />
         </div>
-      </div>
-    </div>
+
+        {/* Stats */}
+        <div className="flex justify-center gap-8 text-center">
+          <div>
+            <span className="font-mono text-3xl font-bold text-primary">
+              {passing}
+            </span>
+            <span className="block text-sm text-muted-foreground uppercase">
+              Passing
+            </span>
+          </div>
+          <div className="text-4xl text-muted-foreground">/</div>
+          <div>
+            <span className="font-mono text-3xl font-bold">
+              {total}
+            </span>
+            <span className="block text-sm text-muted-foreground uppercase">
+              Total
+            </span>
+          </div>
+        </div>
+      </CardContent>
+    </Card>
   )
 }
diff --git a/ui/src/components/ProjectSelector.tsx b/ui/src/components/ProjectSelector.tsx
index 1435586..f7ef356 100644
--- a/ui/src/components/ProjectSelector.tsx
+++ b/ui/src/components/ProjectSelector.tsx
@@ -4,6 +4,15 @@ import type { ProjectSummary } from '../lib/types'
 import { NewProjectModal } from './NewProjectModal'
 import { ConfirmDialog } from './ConfirmDialog'
 import { useDeleteProject } from '../hooks/useProjects'
+import { Button } from '@/components/ui/button'
+import { Badge } from '@/components/ui/badge'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu'
 
 interface ProjectSelectorProps {
   projects: ProjectSummary[]
@@ -32,8 +41,8 @@ export function ProjectSelector({
   }
 
   const handleDeleteClick = (e: React.MouseEvent, projectName: string) => {
-    // Prevent the click from selecting the project
     e.stopPropagation()
+    e.preventDefault()
     setProjectToDelete(projectName)
   }
 
@@ -42,13 +51,11 @@ export function ProjectSelector({
 
     try {
       await deleteProject.mutateAsync(projectToDelete)
-      // If the deleted project was selected, clear the selection
       if (selectedProject === projectToDelete) {
         onSelectProject(null)
       }
       setProjectToDelete(null)
     } catch (error) {
-      // Error is handled by the mutation, just close the dialog
       console.error('Failed to delete project:', error)
       setProjectToDelete(null)
     }
@@ -62,106 +69,86 @@ export function ProjectSelector({
 
   return (
     <div className="relative">
-      {/* Dropdown Trigger */}
-      <button
-        onClick={() => setIsOpen(!isOpen)}
-        className="neo-btn bg-[var(--color-neo-card)] text-[var(--color-neo-text)] min-w-[200px] justify-between"
-        disabled={isLoading}
-      >
-        {isLoading ? (
-          <Loader2 size={18} className="animate-spin" />
-        ) : selectedProject ? (
-          <>
-            <span className="flex items-center gap-2">
-              <FolderOpen size={18} />
-              {selectedProject}
-            </span>
-            {selectedProjectData && selectedProjectData.stats.total > 0 && (
-              <span className="neo-badge bg-[var(--color-neo-done)] ml-2">
-                {selectedProjectData.stats.percentage}%
-              </span>
-            )}
-          </>
-        ) : (
-          <span className="text-[var(--color-neo-text-secondary)]">
-            Select Project
-          </span>
-        )}
-        <ChevronDown size={18} className={`transition-transform ${isOpen ? 'rotate-180' : ''}`} />
-      </button>
-
-      {/* Dropdown Menu */}
-      {isOpen && (
-        <>
-          {/* Backdrop */}
-          <div
-            className="fixed inset-0 z-40"
-            onClick={() => setIsOpen(false)}
-          />
-
-          {/* Menu */}
-          <div className="absolute top-full left-0 mt-2 w-full neo-dropdown z-50 min-w-[280px]">
-            {projects.length > 0 ? (
-              <div className="max-h-[300px] overflow-auto">
-                {projects.map(project => (
-                  <div
-                    key={project.name}
-                    className={`flex items-center ${
-                      project.name === selectedProject
-                        ? 'bg-[var(--color-neo-pending)] text-[var(--color-neo-text-on-bright)]'
-                        : ''
-                    }`}
-                  >
-                    <button
-                      onClick={() => {
-                        onSelectProject(project.name)
-                        setIsOpen(false)
-                      }}
-                      className="flex-1 neo-dropdown-item flex items-center justify-between"
-                    >
-                      <span className="flex items-center gap-2">
-                        <FolderOpen size={16} />
-                        {project.name}
-                      </span>
-                      {project.stats.total > 0 && (
-                        <span className="text-sm font-mono">
-                          {project.stats.passing}/{project.stats.total}
-                        </span>
-                      )}
-                    </button>
-                    <button
-                      onClick={(e) => handleDeleteClick(e, project.name)}
-                      className="p-2 mr-2 text-[var(--color-neo-text-secondary)] hover:text-[var(--color-neo-danger)] hover:bg-[var(--color-neo-danger)]/10 transition-colors rounded"
-                      title={`Delete ${project.name}`}
-                    >
-                      <Trash2 size={16} />
-                    </button>
-                  </div>
-                ))}
-              </div>
+      <DropdownMenu open={isOpen} onOpenChange={setIsOpen}>
+        <DropdownMenuTrigger asChild>
+          <Button
+            variant="outline"
+            className="min-w-[200px] justify-between"
+            disabled={isLoading}
+          >
+            {isLoading ? (
+              <Loader2 size={18} className="animate-spin" />
+            ) : selectedProject ? (
+              <>
+                <span className="flex items-center gap-2">
+                  <FolderOpen size={18} />
+                  {selectedProject}
+                </span>
+                {selectedProjectData && selectedProjectData.stats.total > 0 && (
+                  <Badge className="ml-2">{selectedProjectData.stats.percentage}%</Badge>
+                )}
+              </>
             ) : (
-              <div className="p-4 text-center text-[var(--color-neo-text-secondary)]">
-                No projects yet
-              </div>
+              <span className="text-muted-foreground">Select Project</span>
             )}
+            <ChevronDown size={18} className={`transition-transform ${isOpen ? 'rotate-180' : ''}`} />
+          </Button>
+        </DropdownMenuTrigger>
 
-            {/* Divider */}
-            <div className="border-t-3 border-[var(--color-neo-border)]" />
+        <DropdownMenuContent align="start" className="w-[280px] p-0 flex flex-col">
+          {projects.length > 0 ? (
+            <div className="max-h-[300px] overflow-y-auto p-1">
+              {projects.map(project => (
+                <DropdownMenuItem
+                  key={project.name}
+                  className={`flex items-center justify-between cursor-pointer ${
+                    project.name === selectedProject ? 'bg-primary/10' : ''
+                  }`}
+                  onSelect={() => {
+                    onSelectProject(project.name)
+                  }}
+                >
+                  <span className="flex items-center gap-2 flex-1">
+                    <FolderOpen size={16} />
+                    {project.name}
+                    {project.stats.total > 0 && (
+                      <span className="text-sm font-mono text-muted-foreground ml-auto">
+                        {project.stats.passing}/{project.stats.total}
+                      </span>
+                    )}
+                  </span>
+                  <Button
+                    variant="ghost"
+                    size="icon-xs"
+                    onClick={(e) => handleDeleteClick(e, project.name)}
+                    className="text-muted-foreground hover:text-destructive"
+                  >
+                    <Trash2 size={14} />
+                  </Button>
+                </DropdownMenuItem>
+              ))}
+            </div>
+          ) : (
+            <div className="p-4 text-center text-muted-foreground">
+              No projects yet
+            </div>
+          )}
 
-            {/* Create New */}
-            <button
-              onClick={() => {
+          <DropdownMenuSeparator className="my-0" />
+
+          <div className="p-1">
+            <DropdownMenuItem
+              onSelect={() => {
                 setShowNewProjectModal(true)
-                setIsOpen(false)
               }}
-              className="w-full neo-dropdown-item flex items-center gap-2 font-bold"
+              className="cursor-pointer font-semibold"
             >
               <Plus size={16} />
               New Project
-            </button>
+            </DropdownMenuItem>
           </div>
-        </>
-      )}
+        </DropdownMenuContent>
+      </DropdownMenu>
 
       {/* New Project Modal */}
       <NewProjectModal
diff --git a/ui/src/components/QuestionOptions.tsx b/ui/src/components/QuestionOptions.tsx
index d81fbaf..122f5bc 100644
--- a/ui/src/components/QuestionOptions.tsx
+++ b/ui/src/components/QuestionOptions.tsx
@@ -2,12 +2,16 @@
  * Question Options Component
  *
  * Renders structured questions from AskUserQuestion tool.
- * Shows clickable option buttons in neobrutalism style.
+ * Shows clickable option buttons.
  */
 
 import { useState } from 'react'
 import { Check } from 'lucide-react'
 import type { SpecQuestion } from '../lib/types'
+import { Button } from '@/components/ui/button'
+import { Input } from '@/components/ui/input'
+import { Card, CardContent } from '@/components/ui/card'
+import { Badge } from '@/components/ui/badge'
 
 interface QuestionOptionsProps {
   questions: SpecQuestion[]
@@ -91,165 +95,126 @@ export function QuestionOptions({
   return (
     <div className="space-y-6 p-4">
       {questions.map((q, questionIdx) => (
-        <div
-          key={questionIdx}
-          className="neo-card p-4 bg-[var(--color-neo-card)]"
-        >
-          {/* Question header */}
-          <div className="flex items-center gap-3 mb-4">
-            <span className="neo-badge bg-[var(--color-neo-accent)] text-[var(--color-neo-text-on-bright)]">
-              {q.header}
-            </span>
-            <span className="font-bold text-[var(--color-neo-text)]">
-              {q.question}
-            </span>
-            {q.multiSelect && (
-              <span className="text-xs text-[var(--color-neo-text-secondary)] font-mono">
-                (select multiple)
+        <Card key={questionIdx}>
+          <CardContent className="p-4">
+            {/* Question header */}
+            <div className="flex items-center gap-3 mb-4">
+              <Badge>{q.header}</Badge>
+              <span className="font-bold text-foreground">
+                {q.question}
               </span>
-            )}
-          </div>
-
-          {/* Options grid */}
-          <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
-            {q.options.map((opt, optIdx) => {
-              const isSelected = isOptionSelected(questionIdx, opt.label, q.multiSelect)
-
-              return (
-                <button
-                  key={optIdx}
-                  onClick={() => handleOptionClick(questionIdx, opt.label, q.multiSelect)}
-                  disabled={disabled}
-                  className={`
-                    text-left p-4
-                    border-3 border-[var(--color-neo-border)]
-                    transition-all duration-150
-                    ${
-                      isSelected
-                        ? 'bg-[var(--color-neo-pending)] translate-x-[1px] translate-y-[1px]'
-                        : 'bg-[var(--color-neo-card)] hover:translate-x-[-1px] hover:translate-y-[-1px]'
-                    }
-                    disabled:opacity-50 disabled:cursor-not-allowed
-                  `}
-                  style={{
-                    boxShadow: isSelected ? 'var(--shadow-neo-sm)' : 'var(--shadow-neo-md)',
-                  }}
-                  onMouseEnter={(e) => {
-                    if (!isSelected && !disabled) {
-                      e.currentTarget.style.boxShadow = 'var(--shadow-neo-lg)'
-                    }
-                  }}
-                  onMouseLeave={(e) => {
-                    if (!isSelected && !disabled) {
-                      e.currentTarget.style.boxShadow = 'var(--shadow-neo-md)'
-                    }
-                  }}
-                >
-                  <div className="flex items-start gap-2">
-                    {/* Checkbox/Radio indicator */}
-                    <div
-                      className={`
-                        w-5 h-5 flex-shrink-0 mt-0.5
-                        border-2 border-[var(--color-neo-border)]
-                        flex items-center justify-center
-                        ${q.multiSelect ? '' : 'rounded-full'}
-                        ${isSelected ? 'bg-[var(--color-neo-done)]' : 'bg-[var(--color-neo-card)]'}
-                      `}
-                    >
-                      {isSelected && <Check size={12} strokeWidth={3} />}
-                    </div>
-
-                    <div className="flex-1">
-                      <div className="font-bold text-[var(--color-neo-text)]">
-                        {opt.label}
-                      </div>
-                      <div className="text-sm text-[var(--color-neo-text-secondary)] mt-1">
-                        {opt.description}
-                      </div>
-                    </div>
-                  </div>
-                </button>
-              )
-            })}
-
-            {/* "Other" option */}
-            <button
-              onClick={() => handleOptionClick(questionIdx, 'Other', q.multiSelect)}
-              disabled={disabled}
-              className={`
-                text-left p-4
-                border-3 border-[var(--color-neo-border)]
-                transition-all duration-150
-                ${
-                  showCustomInput[String(questionIdx)]
-                    ? 'bg-[var(--color-neo-pending)] translate-x-[1px] translate-y-[1px]'
-                    : 'bg-[var(--color-neo-card)] hover:translate-x-[-1px] hover:translate-y-[-1px]'
-                }
-                disabled:opacity-50 disabled:cursor-not-allowed
-              `}
-              style={{
-                boxShadow: showCustomInput[String(questionIdx)] ? 'var(--shadow-neo-sm)' : 'var(--shadow-neo-md)',
-              }}
-              onMouseEnter={(e) => {
-                if (!showCustomInput[String(questionIdx)] && !disabled) {
-                  e.currentTarget.style.boxShadow = 'var(--shadow-neo-lg)'
-                }
-              }}
-              onMouseLeave={(e) => {
-                if (!showCustomInput[String(questionIdx)] && !disabled) {
-                  e.currentTarget.style.boxShadow = 'var(--shadow-neo-md)'
-                }
-              }}
-            >
-              <div className="flex items-start gap-2">
-                <div
-                  className={`
-                    w-5 h-5 flex-shrink-0 mt-0.5
-                    border-2 border-[var(--color-neo-border)]
-                    flex items-center justify-center
-                    ${q.multiSelect ? '' : 'rounded-full'}
-                    ${showCustomInput[String(questionIdx)] ? 'bg-[var(--color-neo-done)]' : 'bg-[var(--color-neo-card)]'}
-                  `}
-                >
-                  {showCustomInput[String(questionIdx)] && <Check size={12} strokeWidth={3} />}
-                </div>
-
-                <div className="flex-1">
-                  <div className="font-bold text-[var(--color-neo-text)]">Other</div>
-                  <div className="text-sm text-[var(--color-neo-text-secondary)] mt-1">
-                    Provide a custom answer
-                  </div>
-                </div>
-              </div>
-            </button>
-          </div>
-
-          {/* Custom input field */}
-          {showCustomInput[String(questionIdx)] && (
-            <div className="mt-4">
-              <input
-                type="text"
-                value={customInputs[String(questionIdx)] || ''}
-                onChange={(e) => handleCustomInputChange(questionIdx, e.target.value)}
-                placeholder="Type your answer..."
-                className="neo-input"
-                autoFocus
-                disabled={disabled}
-              />
+              {q.multiSelect && (
+                <span className="text-xs text-muted-foreground font-mono">
+                  (select multiple)
+                </span>
+              )}
             </div>
-          )}
-        </div>
+
+            {/* Options grid */}
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
+              {q.options.map((opt, optIdx) => {
+                const isSelected = isOptionSelected(questionIdx, opt.label, q.multiSelect)
+
+                return (
+                  <button
+                    key={optIdx}
+                    onClick={() => handleOptionClick(questionIdx, opt.label, q.multiSelect)}
+                    disabled={disabled}
+                    className={`
+                      text-left p-4 rounded-lg border-2 transition-all duration-150
+                      ${
+                        isSelected
+                          ? 'bg-primary/10 border-primary'
+                          : 'bg-card border-border hover:border-primary/50 hover:bg-muted'
+                      }
+                      disabled:opacity-50 disabled:cursor-not-allowed
+                    `}
+                  >
+                    <div className="flex items-start gap-2">
+                      {/* Checkbox/Radio indicator */}
+                      <div
+                        className={`
+                          w-5 h-5 flex-shrink-0 mt-0.5 border-2 flex items-center justify-center
+                          ${q.multiSelect ? 'rounded' : 'rounded-full'}
+                          ${isSelected ? 'bg-primary border-primary text-primary-foreground' : 'border-border bg-background'}
+                        `}
+                      >
+                        {isSelected && <Check size={12} strokeWidth={3} />}
+                      </div>
+
+                      <div className="flex-1">
+                        <div className="font-bold text-foreground">
+                          {opt.label}
+                        </div>
+                        <div className="text-sm text-muted-foreground mt-1">
+                          {opt.description}
+                        </div>
+                      </div>
+                    </div>
+                  </button>
+                )
+              })}
+
+              {/* "Other" option */}
+              <button
+                onClick={() => handleOptionClick(questionIdx, 'Other', q.multiSelect)}
+                disabled={disabled}
+                className={`
+                  text-left p-4 rounded-lg border-2 transition-all duration-150
+                  ${
+                    showCustomInput[String(questionIdx)]
+                      ? 'bg-primary/10 border-primary'
+                      : 'bg-card border-border hover:border-primary/50 hover:bg-muted'
+                  }
+                  disabled:opacity-50 disabled:cursor-not-allowed
+                `}
+              >
+                <div className="flex items-start gap-2">
+                  <div
+                    className={`
+                      w-5 h-5 flex-shrink-0 mt-0.5 border-2 flex items-center justify-center
+                      ${q.multiSelect ? 'rounded' : 'rounded-full'}
+                      ${showCustomInput[String(questionIdx)] ? 'bg-primary border-primary text-primary-foreground' : 'border-border bg-background'}
+                    `}
+                  >
+                    {showCustomInput[String(questionIdx)] && <Check size={12} strokeWidth={3} />}
+                  </div>
+
+                  <div className="flex-1">
+                    <div className="font-bold text-foreground">Other</div>
+                    <div className="text-sm text-muted-foreground mt-1">
+                      Provide a custom answer
+                    </div>
+                  </div>
+                </div>
+              </button>
+            </div>
+
+            {/* Custom input field */}
+            {showCustomInput[String(questionIdx)] && (
+              <div className="mt-4">
+                <Input
+                  type="text"
+                  value={customInputs[String(questionIdx)] || ''}
+                  onChange={(e) => handleCustomInputChange(questionIdx, e.target.value)}
+                  placeholder="Type your answer..."
+                  autoFocus
+                  disabled={disabled}
+                />
+              </div>
+            )}
+          </CardContent>
+        </Card>
       ))}
 
       {/* Submit button */}
       <div className="flex justify-end">
-        <button
+        <Button
           onClick={handleSubmit}
           disabled={disabled || !allQuestionsAnswered}
-          className="neo-btn neo-btn-primary"
         >
           Continue
-        </button>
+        </Button>
       </div>
     </div>
   )
diff --git a/ui/src/components/ScheduleModal.tsx b/ui/src/components/ScheduleModal.tsx
index 8c412a5..0adbdc7 100644
--- a/ui/src/components/ScheduleModal.tsx
+++ b/ui/src/components/ScheduleModal.tsx
@@ -2,11 +2,10 @@
  * Schedule Modal Component
  *
  * Modal for managing agent schedules (create, edit, delete).
- * Follows neobrutalism design patterns from SettingsModal.
  */
 
 import { useState, useEffect, useRef } from 'react'
-import { Clock, GitBranch, Trash2, X } from 'lucide-react'
+import { Clock, GitBranch, Trash2 } from 'lucide-react'
 import {
   useSchedules,
   useCreateSchedule,
@@ -23,6 +22,20 @@ import {
   toggleDay,
 } from '../lib/timeUtils'
 import type { ScheduleCreate } from '../lib/types'
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogFooter,
+} from '@/components/ui/dialog'
+import { Button } from '@/components/ui/button'
+import { Input } from '@/components/ui/input'
+import { Label } from '@/components/ui/label'
+import { Alert, AlertDescription } from '@/components/ui/alert'
+import { Card, CardContent } from '@/components/ui/card'
+import { Checkbox } from '@/components/ui/checkbox'
+import { Separator } from '@/components/ui/separator'
 
 interface ScheduleModalProps {
   projectName: string
@@ -60,38 +73,6 @@ export function ScheduleModal({ projectName, isOpen, onClose }: ScheduleModalPro
     }
   }, [isOpen])
 
-  // Keyboard navigation
-  useEffect(() => {
-    const handleKeyDown = (e: KeyboardEvent) => {
-      if (!isOpen) return
-
-      if (e.key === 'Escape') {
-        onClose()
-      }
-
-      if (e.key === 'Tab' && modalRef.current) {
-        const focusableElements = modalRef.current.querySelectorAll<HTMLElement>(
-          'button, input, select, textarea, [tabindex]:not([tabindex="-1"])'
-        )
-        const firstElement = focusableElements[0]
-        const lastElement = focusableElements[focusableElements.length - 1]
-
-        if (e.shiftKey && document.activeElement === firstElement) {
-          e.preventDefault()
-          lastElement?.focus()
-        } else if (!e.shiftKey && document.activeElement === lastElement) {
-          e.preventDefault()
-          firstElement?.focus()
-        }
-      }
-    }
-
-    document.addEventListener('keydown', handleKeyDown)
-    return () => document.removeEventListener('keydown', handleKeyDown)
-  }, [isOpen, onClose])
-
-  if (!isOpen) return null
-
   const schedules = schedulesData?.schedules || []
 
   const handleCreateSchedule = async () => {
@@ -114,8 +95,6 @@ export function ScheduleModal({ projectName, isOpen, onClose }: ScheduleModalPro
       const { time: utcTime, dayShift } = localToUTCWithDayShift(newSchedule.start_time)
 
       // Adjust days_of_week based on day shift
-      // If UTC is on the next day (dayShift = 1), shift days forward
-      // If UTC is on the previous day (dayShift = -1), shift days backward
       const adjustedDays = adjustDaysForDayShift(newSchedule.days_of_week, dayShift)
 
       const scheduleToCreate = {
@@ -169,287 +148,256 @@ export function ScheduleModal({ projectName, isOpen, onClose }: ScheduleModalPro
   }
 
   return (
-    <div
-      className="neo-modal-backdrop"
-      onClick={(e) => {
-        if (e.target === e.currentTarget) {
-          onClose()
-        }
-      }}
-    >
-      <div ref={modalRef} className="neo-modal p-6" style={{ maxWidth: '650px', maxHeight: '80vh' }}>
+    <Dialog open={isOpen} onOpenChange={(open) => !open && onClose()}>
+      <DialogContent ref={modalRef} className="sm:max-w-[650px] max-h-[80vh] flex flex-col p-0">
         {/* Header */}
-        <div className="flex items-center justify-between mb-6">
-          <div className="flex items-center gap-2">
-            <Clock size={24} className="text-[var(--color-neo-progress)]" />
-            <h2 className="text-xl font-bold text-gray-900 dark:text-white">Agent Schedules</h2>
-          </div>
-          <button
-            ref={firstFocusableRef}
-            onClick={onClose}
-            className="neo-btn neo-btn-ghost p-2"
-            aria-label="Close modal"
-          >
-            <X size={20} />
-          </button>
-        </div>
+        <DialogHeader className="p-6 pb-4">
+          <DialogTitle className="flex items-center gap-2">
+            <Clock size={24} className="text-primary" />
+            Agent Schedules
+          </DialogTitle>
+        </DialogHeader>
 
-        {/* Error display */}
-        {error && (
-          <div className="mb-4 p-3 border-2 border-red-500 bg-red-50 dark:bg-red-900/20 text-red-800 dark:text-red-200 rounded">
-            {error}
-          </div>
-        )}
+        <div className="flex-1 min-h-0 overflow-y-auto px-6">
+          {/* Error display */}
+          {error && (
+            <Alert variant="destructive" className="mb-4">
+              <AlertDescription>{error}</AlertDescription>
+            </Alert>
+          )}
 
-        {/* Loading state */}
-        {isLoading && (
-          <div className="text-center py-8 text-gray-600 dark:text-gray-300">
-            Loading schedules...
-          </div>
-        )}
-
-        {/* Existing schedules */}
-        {!isLoading && schedules.length > 0 && (
-          <div className="space-y-3 mb-6 max-h-[300px] overflow-y-auto">
-            {schedules.map((schedule) => {
-              // Convert UTC time to local and get day shift for display
-              const { time: localTime, dayShift } = utcToLocalWithDayShift(schedule.start_time)
-              const duration = formatDuration(schedule.duration_minutes)
-              // Adjust displayed days: if local is next day (dayShift=1), shift forward
-              // if local is prev day (dayShift=-1), shift backward
-              const displayDays = adjustDaysForDayShift(schedule.days_of_week, dayShift)
-
-              return (
-                <div
-                  key={schedule.id}
-                  className="neo-card p-4 flex items-start justify-between gap-4"
-                >
-                  <div className="flex-1">
-                    {/* Time and duration */}
-                    <div className="flex items-baseline gap-2 mb-2">
-                      <span className="text-lg font-bold text-gray-900 dark:text-white">{localTime}</span>
-                      <span className="text-sm text-gray-600 dark:text-gray-300">
-                        for {duration}
-                      </span>
-                    </div>
-
-                    {/* Days */}
-                    <div className="flex gap-1 mb-2">
-                      {DAYS.map((day) => {
-                        const isActive = isDayActive(displayDays, day.bit)
-                        return (
-                          <span
-                            key={day.label}
-                            className={`text-xs px-2 py-1 rounded border-2 ${
-                              isActive
-                                ? 'border-[var(--color-neo-progress)] bg-[var(--color-neo-progress)] text-white font-bold'
-                                : 'border-gray-300 dark:border-gray-600 text-gray-400 dark:text-gray-500'
-                            }`}
-                          >
-                            {day.label}
-                          </span>
-                        )
-                      })}
-                    </div>
-
-                    {/* Metadata */}
-                    <div className="flex gap-3 text-xs text-gray-600 dark:text-gray-300">
-                      {schedule.yolo_mode && (
-                        <span className="font-bold text-yellow-600">⚡ YOLO mode</span>
-                      )}
-                      <span className="flex items-center gap-1">
-                        <GitBranch size={12} />
-                        {schedule.max_concurrency}x
-                      </span>
-                      {schedule.model && <span>Model: {schedule.model}</span>}
-                      {schedule.crash_count > 0 && (
-                        <span className="text-red-600">Crashes: {schedule.crash_count}</span>
-                      )}
-                    </div>
-                  </div>
-
-                  {/* Actions */}
-                  <div className="flex items-center gap-2">
-                    {/* Enable/disable toggle */}
-                    <button
-                      onClick={() => handleToggleSchedule(schedule.id, schedule.enabled)}
-                      className={`neo-btn neo-btn-ghost px-3 py-1 text-xs font-bold ${
-                        schedule.enabled
-                          ? 'text-[var(--color-neo-done)]'
-                          : 'text-[var(--color-neo-text-secondary)]'
-                      }`}
-                      disabled={toggleSchedule.isPending}
-                    >
-                      {schedule.enabled ? 'Enabled' : 'Disabled'}
-                    </button>
-
-                    {/* Delete button */}
-                    <button
-                      onClick={() => handleDeleteSchedule(schedule.id)}
-                      className="neo-btn neo-btn-ghost p-2 text-red-600 hover:bg-red-50"
-                      disabled={deleteSchedule.isPending}
-                      aria-label="Delete schedule"
-                    >
-                      <Trash2 size={16} />
-                    </button>
-                  </div>
-                </div>
-              )
-            })}
-          </div>
-        )}
-
-        {/* Empty state */}
-        {!isLoading && schedules.length === 0 && (
-          <div className="text-center py-6 text-gray-600 dark:text-gray-300 mb-6">
-            <Clock size={48} className="mx-auto mb-2 opacity-50 text-gray-400 dark:text-gray-500" />
-            <p>No schedules configured yet</p>
-          </div>
-        )}
-
-        {/* Divider */}
-        <div className="border-t-2 border-gray-200 dark:border-gray-700 my-6"></div>
-
-        {/* Add new schedule form */}
-        <div>
-          <h3 className="text-lg font-bold text-gray-900 dark:text-white mb-4">Add New Schedule</h3>
-
-          {/* Time and duration */}
-          <div className="grid grid-cols-2 gap-4 mb-4">
-            <div>
-              <label className="block text-sm font-bold text-gray-700 dark:text-gray-200 mb-2">Start Time (Local)</label>
-              <input
-                type="time"
-                value={newSchedule.start_time}
-                onChange={(e) =>
-                  setNewSchedule((prev) => ({ ...prev, start_time: e.target.value }))
-                }
-                className="neo-input w-full"
-              />
+          {/* Loading state */}
+          {isLoading && (
+            <div className="text-center py-8 text-muted-foreground">
+              Loading schedules...
             </div>
-            <div>
-              <label className="block text-sm font-bold text-gray-700 dark:text-gray-200 mb-2">Duration (minutes)</label>
-              <input
-                type="number"
-                min="1"
-                max="1440"
-                value={newSchedule.duration_minutes}
-                onChange={(e) => {
-                  const parsed = parseInt(e.target.value, 10)
-                  const value = isNaN(parsed) ? 1 : Math.max(1, Math.min(1440, parsed))
-                  setNewSchedule((prev) => ({
-                    ...prev,
-                    duration_minutes: value,
-                  }))
-                }}
-                className="neo-input w-full"
-              />
-              <div className="text-xs text-gray-600 dark:text-gray-400 mt-1">
-                {formatDuration(newSchedule.duration_minutes)}
-              </div>
-            </div>
-          </div>
+          )}
+
+          {/* Existing schedules */}
+          {!isLoading && schedules.length > 0 && (
+            <div className="space-y-3 mb-6">
+              {schedules.map((schedule) => {
+                // Convert UTC time to local and get day shift for display
+                const { time: localTime, dayShift } = utcToLocalWithDayShift(schedule.start_time)
+                const duration = formatDuration(schedule.duration_minutes)
+                const displayDays = adjustDaysForDayShift(schedule.days_of_week, dayShift)
 
-          {/* Days of week */}
-          <div className="mb-4">
-            <label className="block text-sm font-bold text-gray-700 dark:text-gray-200 mb-2">Days</label>
-            <div className="flex gap-2">
-              {DAYS.map((day) => {
-                const isActive = isDayActive(newSchedule.days_of_week, day.bit)
                 return (
-                  <button
-                    key={day.label}
-                    onClick={() => handleToggleDay(day.bit)}
-                    className={`neo-btn px-3 py-2 text-sm ${
-                      isActive
-                        ? 'bg-[var(--color-neo-progress)] text-white border-[var(--color-neo-progress)]'
-                        : 'neo-btn-ghost'
-                    }`}
-                  >
-                    {day.label}
-                  </button>
+                  <Card key={schedule.id}>
+                    <CardContent className="p-4">
+                      <div className="flex items-start justify-between gap-4">
+                        <div className="flex-1">
+                          {/* Time and duration */}
+                          <div className="flex items-baseline gap-2 mb-2">
+                            <span className="text-lg font-semibold">{localTime}</span>
+                            <span className="text-sm text-muted-foreground">
+                              for {duration}
+                            </span>
+                          </div>
+
+                          {/* Days */}
+                          <div className="flex gap-1 mb-2">
+                            {DAYS.map((day) => {
+                              const isActive = isDayActive(displayDays, day.bit)
+                              return (
+                                <span
+                                  key={day.label}
+                                  className={`text-xs px-2 py-1 rounded border ${
+                                    isActive
+                                      ? 'border-primary bg-primary text-primary-foreground font-medium'
+                                      : 'border-border text-muted-foreground'
+                                  }`}
+                                >
+                                  {day.label}
+                                </span>
+                              )
+                            })}
+                          </div>
+
+                          {/* Metadata */}
+                          <div className="flex gap-3 text-xs text-muted-foreground">
+                            {schedule.yolo_mode && (
+                              <span className="font-semibold text-yellow-600">YOLO mode</span>
+                            )}
+                            <span className="flex items-center gap-1">
+                              <GitBranch size={12} />
+                              {schedule.max_concurrency}x
+                            </span>
+                            {schedule.model && <span>Model: {schedule.model}</span>}
+                            {schedule.crash_count > 0 && (
+                              <span className="text-destructive">Crashes: {schedule.crash_count}</span>
+                            )}
+                          </div>
+                        </div>
+
+                        {/* Actions */}
+                        <div className="flex items-center gap-2">
+                          {/* Enable/disable toggle */}
+                          <Button
+                            variant="ghost"
+                            size="sm"
+                            onClick={() => handleToggleSchedule(schedule.id, schedule.enabled)}
+                            disabled={toggleSchedule.isPending}
+                            className={schedule.enabled ? 'text-primary' : 'text-muted-foreground'}
+                          >
+                            {schedule.enabled ? 'Enabled' : 'Disabled'}
+                          </Button>
+
+                          {/* Delete button */}
+                          <Button
+                            variant="ghost"
+                            size="icon-sm"
+                            onClick={() => handleDeleteSchedule(schedule.id)}
+                            disabled={deleteSchedule.isPending}
+                            className="text-destructive hover:text-destructive"
+                          >
+                            <Trash2 size={16} />
+                          </Button>
+                        </div>
+                      </div>
+                    </CardContent>
+                  </Card>
                 )
               })}
             </div>
-          </div>
+          )}
 
-          {/* YOLO mode toggle */}
-          <div className="mb-4">
-            <label className="flex items-center gap-2 cursor-pointer">
-              <input
-                type="checkbox"
+          {/* Empty state */}
+          {!isLoading && schedules.length === 0 && (
+            <div className="text-center py-6 text-muted-foreground mb-6">
+              <Clock size={48} className="mx-auto mb-2 opacity-50" />
+              <p>No schedules configured yet</p>
+            </div>
+          )}
+
+          <Separator className="my-6" />
+
+          {/* Add new schedule form */}
+          <div className="pb-6">
+            <h3 className="text-lg font-semibold mb-4">Add New Schedule</h3>
+
+            {/* Time and duration */}
+            <div className="grid grid-cols-2 gap-4 mb-4">
+              <div className="space-y-2">
+                <Label>Start Time (Local)</Label>
+                <Input
+                  type="time"
+                  value={newSchedule.start_time}
+                  onChange={(e) =>
+                    setNewSchedule((prev) => ({ ...prev, start_time: e.target.value }))
+                  }
+                />
+              </div>
+              <div className="space-y-2">
+                <Label>Duration (minutes)</Label>
+                <Input
+                  type="number"
+                  min="1"
+                  max="1440"
+                  value={newSchedule.duration_minutes}
+                  onChange={(e) => {
+                    const parsed = parseInt(e.target.value, 10)
+                    const value = isNaN(parsed) ? 1 : Math.max(1, Math.min(1440, parsed))
+                    setNewSchedule((prev) => ({
+                      ...prev,
+                      duration_minutes: value,
+                    }))
+                  }}
+                />
+                <p className="text-xs text-muted-foreground">
+                  {formatDuration(newSchedule.duration_minutes)}
+                </p>
+              </div>
+            </div>
+
+            {/* Days of week */}
+            <div className="mb-4 space-y-2">
+              <Label>Days</Label>
+              <div className="flex gap-2">
+                {DAYS.map((day) => {
+                  const isActive = isDayActive(newSchedule.days_of_week, day.bit)
+                  return (
+                    <Button
+                      key={day.label}
+                      variant={isActive ? 'default' : 'outline'}
+                      size="sm"
+                      onClick={() => handleToggleDay(day.bit)}
+                    >
+                      {day.label}
+                    </Button>
+                  )
+                })}
+              </div>
+            </div>
+
+            {/* YOLO mode toggle */}
+            <div className="mb-4 flex items-center space-x-2">
+              <Checkbox
+                id="yolo-mode"
                 checked={newSchedule.yolo_mode}
-                onChange={(e) =>
-                  setNewSchedule((prev) => ({ ...prev, yolo_mode: e.target.checked }))
+                onCheckedChange={(checked) =>
+                  setNewSchedule((prev) => ({ ...prev, yolo_mode: checked === true }))
                 }
-                className="w-4 h-4"
               />
-              <span className="text-sm font-bold text-gray-700 dark:text-gray-200">YOLO Mode (skip testing)</span>
-            </label>
-          </div>
+              <Label htmlFor="yolo-mode" className="font-normal">
+                YOLO Mode (skip testing)
+              </Label>
+            </div>
 
-          {/* Concurrency slider */}
-          <div className="mb-4">
-            <label className="block text-sm font-bold text-gray-700 dark:text-gray-200 mb-2">
-              Concurrent Agents (1-5)
-            </label>
-            <div className="flex items-center gap-3">
-              <GitBranch
-                size={16}
-                className={newSchedule.max_concurrency > 1 ? 'text-[var(--color-neo-primary)]' : 'text-gray-400'}
-              />
-              <input
-                type="range"
-                min={1}
-                max={5}
-                value={newSchedule.max_concurrency}
+            {/* Concurrency slider */}
+            <div className="mb-4 space-y-2">
+              <Label>Concurrent Agents (1-5)</Label>
+              <div className="flex items-center gap-3">
+                <GitBranch
+                  size={16}
+                  className={newSchedule.max_concurrency > 1 ? 'text-primary' : 'text-muted-foreground'}
+                />
+                <input
+                  type="range"
+                  min={1}
+                  max={5}
+                  value={newSchedule.max_concurrency}
+                  onChange={(e) =>
+                    setNewSchedule((prev) => ({ ...prev, max_concurrency: Number(e.target.value) }))
+                  }
+                  className="flex-1 h-2 accent-primary cursor-pointer"
+                />
+                <span className="text-sm font-medium min-w-[2rem] text-center">
+                  {newSchedule.max_concurrency}x
+                </span>
+              </div>
+              <p className="text-xs text-muted-foreground">
+                Run {newSchedule.max_concurrency} agent{newSchedule.max_concurrency > 1 ? 's' : ''} in parallel for faster feature completion
+              </p>
+            </div>
+
+            {/* Model selection (optional) */}
+            <div className="mb-4 space-y-2">
+              <Label>Model (optional, defaults to global setting)</Label>
+              <Input
+                placeholder="e.g., claude-3-5-sonnet-20241022"
+                value={newSchedule.model || ''}
                 onChange={(e) =>
-                  setNewSchedule((prev) => ({ ...prev, max_concurrency: Number(e.target.value) }))
+                  setNewSchedule((prev) => ({ ...prev, model: e.target.value || null }))
                 }
-                className="flex-1 h-2 accent-[var(--color-neo-primary)] cursor-pointer"
-                title={`${newSchedule.max_concurrency} concurrent agent${newSchedule.max_concurrency > 1 ? 's' : ''}`}
-                aria-label="Set number of concurrent agents"
               />
-              <span className="text-sm font-bold min-w-[2rem] text-center text-gray-900 dark:text-white">
-                {newSchedule.max_concurrency}x
-              </span>
             </div>
-            <div className="text-xs text-gray-600 dark:text-gray-400 mt-1">
-              Run {newSchedule.max_concurrency} agent{newSchedule.max_concurrency > 1 ? 's' : ''} in parallel for faster feature completion
-            </div>
-          </div>
-
-          {/* Model selection (optional) */}
-          <div className="mb-6">
-            <label className="block text-sm font-bold text-gray-700 dark:text-gray-200 mb-2">
-              Model (optional, defaults to global setting)
-            </label>
-            <input
-              type="text"
-              placeholder="e.g., claude-3-5-sonnet-20241022"
-              value={newSchedule.model || ''}
-              onChange={(e) =>
-                setNewSchedule((prev) => ({ ...prev, model: e.target.value || null }))
-              }
-              className="neo-input w-full"
-            />
-          </div>
-
-          {/* Actions */}
-          <div className="flex justify-end gap-3">
-            <button onClick={onClose} className="neo-btn neo-btn-ghost">
-              Close
-            </button>
-            <button
-              onClick={handleCreateSchedule}
-              disabled={createSchedule.isPending || newSchedule.days_of_week === 0}
-              className="neo-btn neo-btn-primary"
-            >
-              {createSchedule.isPending ? 'Creating...' : 'Create Schedule'}
-            </button>
           </div>
         </div>
-      </div>
-    </div>
+
+        {/* Actions */}
+        <DialogFooter className="p-6 pt-4 border-t">
+          <Button variant="outline" onClick={onClose}>
+            Close
+          </Button>
+          <Button
+            onClick={handleCreateSchedule}
+            disabled={createSchedule.isPending || newSchedule.days_of_week === 0}
+          >
+            {createSchedule.isPending ? 'Creating...' : 'Create Schedule'}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
   )
 }
diff --git a/ui/src/components/SettingsModal.tsx b/ui/src/components/SettingsModal.tsx
index e516de1..bda9878 100644
--- a/ui/src/components/SettingsModal.tsx
+++ b/ui/src/components/SettingsModal.tsx
@@ -1,62 +1,25 @@
-import { useEffect, useRef } from 'react'
-import { X, Loader2, AlertCircle } from 'lucide-react'
+import { Loader2, AlertCircle } from 'lucide-react'
 import { useSettings, useUpdateSettings, useAvailableModels } from '../hooks/useProjects'
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog'
+import { Switch } from '@/components/ui/switch'
+import { Label } from '@/components/ui/label'
+import { Alert, AlertDescription } from '@/components/ui/alert'
+import { Button } from '@/components/ui/button'
 
 interface SettingsModalProps {
+  isOpen: boolean
   onClose: () => void
 }
 
-export function SettingsModal({ onClose }: SettingsModalProps) {
+export function SettingsModal({ isOpen, onClose }: SettingsModalProps) {
   const { data: settings, isLoading, isError, refetch } = useSettings()
   const { data: modelsData } = useAvailableModels()
   const updateSettings = useUpdateSettings()
-  const modalRef = useRef<HTMLDivElement>(null)
-  const closeButtonRef = useRef<HTMLButtonElement>(null)
-
-  // Focus trap - keep focus within modal
-  useEffect(() => {
-    const modal = modalRef.current
-    if (!modal) return
-
-    // Focus the close button when modal opens
-    closeButtonRef.current?.focus()
-
-    const focusableElements = modal.querySelectorAll<HTMLElement>(
-      'button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])'
-    )
-    const firstElement = focusableElements[0]
-    const lastElement = focusableElements[focusableElements.length - 1]
-
-    const handleTabKey = (e: KeyboardEvent) => {
-      if (e.key !== 'Tab') return
-
-      if (e.shiftKey) {
-        if (document.activeElement === firstElement) {
-          e.preventDefault()
-          lastElement?.focus()
-        }
-      } else {
-        if (document.activeElement === lastElement) {
-          e.preventDefault()
-          firstElement?.focus()
-        }
-      }
-    }
-
-    const handleEscape = (e: KeyboardEvent) => {
-      if (e.key === 'Escape') {
-        onClose()
-      }
-    }
-
-    document.addEventListener('keydown', handleTabKey)
-    document.addEventListener('keydown', handleEscape)
-
-    return () => {
-      document.removeEventListener('keydown', handleTabKey)
-      document.removeEventListener('keydown', handleEscape)
-    }
-  }, [onClose])
 
   const handleYoloToggle = () => {
     if (settings && !updateSettings.isPending) {
@@ -80,36 +43,14 @@ export function SettingsModal({ onClose }: SettingsModalProps) {
   const isSaving = updateSettings.isPending
 
   return (
-    <div
-      className="neo-modal-backdrop"
-      onClick={onClose}
-      role="presentation"
-    >
-      <div
-        ref={modalRef}
-        className="neo-modal w-full max-w-sm p-6"
-        onClick={(e) => e.stopPropagation()}
-        role="dialog"
-        aria-labelledby="settings-title"
-        aria-modal="true"
-      >
-        {/* Header */}
-        <div className="flex items-center justify-between mb-6">
-          <h2 id="settings-title" className="font-display text-xl font-bold">
+    <Dialog open={isOpen} onOpenChange={(open) => !open && onClose()}>
+      <DialogContent className="sm:max-w-sm">
+        <DialogHeader>
+          <DialogTitle className="flex items-center gap-2">
             Settings
-            {isSaving && (
-              <Loader2 className="inline-block ml-2 animate-spin" size={16} />
-            )}
-          </h2>
-          <button
-            ref={closeButtonRef}
-            onClick={onClose}
-            className="neo-btn neo-btn-ghost p-2"
-            aria-label="Close settings"
-          >
-            <X size={20} />
-          </button>
-        </div>
+            {isSaving && <Loader2 className="animate-spin" size={16} />}
+          </DialogTitle>
+        </DialogHeader>
 
         {/* Loading State */}
         {isLoading && (
@@ -121,82 +62,55 @@ export function SettingsModal({ onClose }: SettingsModalProps) {
 
         {/* Error State */}
         {isError && (
-          <div className="p-4 bg-[var(--color-neo-error-bg)] text-[var(--color-neo-error-text)] border-3 border-[var(--color-neo-error-border)] mb-4">
-            <div className="flex items-center gap-2">
-              <AlertCircle size={18} />
-              <span>Failed to load settings</span>
-            </div>
-            <button
-              onClick={() => refetch()}
-              className="mt-2 underline text-sm hover:opacity-70 transition-opacity"
-            >
-              Retry
-            </button>
-          </div>
+          <Alert variant="destructive">
+            <AlertCircle className="h-4 w-4" />
+            <AlertDescription>
+              Failed to load settings
+              <Button
+                variant="link"
+                onClick={() => refetch()}
+                className="ml-2 p-0 h-auto"
+              >
+                Retry
+              </Button>
+            </AlertDescription>
+          </Alert>
         )}
 
         {/* Settings Content */}
         {settings && !isLoading && (
           <div className="space-y-6">
             {/* YOLO Mode Toggle */}
-            <div>
-              <div className="flex items-center justify-between">
-                <div>
-                  <label
-                    id="yolo-label"
-                    className="font-display font-bold text-base"
-                  >
-                    YOLO Mode
-                  </label>
-                  <p className="text-sm text-[var(--color-neo-text-secondary)] mt-1">
-                    Skip testing for rapid prototyping
-                  </p>
-                </div>
-                <button
-                  onClick={handleYoloToggle}
-                  disabled={isSaving}
-                  className={`relative w-14 h-8 rounded-none border-3 border-[var(--color-neo-border)] transition-colors ${
-                    settings.yolo_mode
-                      ? 'bg-[var(--color-neo-pending)]'
-                      : 'bg-[var(--color-neo-card)]'
-                  } ${isSaving ? 'opacity-50 cursor-not-allowed' : ''}`}
-                  role="switch"
-                  aria-checked={settings.yolo_mode}
-                  aria-labelledby="yolo-label"
-                >
-                  <span
-                    className={`absolute top-1 w-5 h-5 bg-[var(--color-neo-border)] transition-transform ${
-                      settings.yolo_mode ? 'left-7' : 'left-1'
-                    }`}
-                  />
-                </button>
+            <div className="flex items-center justify-between">
+              <div className="space-y-0.5">
+                <Label htmlFor="yolo-mode" className="font-medium">
+                  YOLO Mode
+                </Label>
+                <p className="text-sm text-muted-foreground">
+                  Skip testing for rapid prototyping
+                </p>
               </div>
+              <Switch
+                id="yolo-mode"
+                checked={settings.yolo_mode}
+                onCheckedChange={handleYoloToggle}
+                disabled={isSaving}
+              />
             </div>
 
-            {/* Model Selection - Radio Group */}
-            <div>
-              <label
-                id="model-label"
-                className="font-display font-bold text-base block mb-2"
-              >
-                Model
-              </label>
-              <div
-                className="flex border-3 border-[var(--color-neo-border)]"
-                role="radiogroup"
-                aria-labelledby="model-label"
-              >
+            {/* Model Selection */}
+            <div className="space-y-2">
+              <Label className="font-medium">Model</Label>
+              <div className="flex rounded-lg border overflow-hidden">
                 {models.map((model) => (
                   <button
                     key={model.id}
                     onClick={() => handleModelChange(model.id)}
                     disabled={isSaving}
-                    role="radio"
-                    aria-checked={settings.model === model.id}
-                    className={`flex-1 py-3 px-4 font-display font-bold text-sm transition-colors ${
+                    className={`flex-1 py-2 px-3 text-sm font-medium transition-colors ${
                       settings.model === model.id
-                        ? 'bg-[var(--color-neo-accent)] text-[var(--color-neo-text-on-bright)]'
-                        : 'bg-[var(--color-neo-card)] text-[var(--color-neo-text)] hover:bg-[var(--color-neo-hover-subtle)]'
+                        ? 'bg-primary text-primary-foreground'
+                        : 'bg-background text-foreground hover:bg-muted'
                     } ${isSaving ? 'opacity-50 cursor-not-allowed' : ''}`}
                   >
                     {model.name}
@@ -206,32 +120,21 @@ export function SettingsModal({ onClose }: SettingsModalProps) {
             </div>
 
             {/* Regression Agents */}
-            <div>
-              <label
-                id="testing-ratio-label"
-                className="font-display font-bold text-base block mb-1"
-              >
-                Regression Agents
-              </label>
-              <p className="text-sm text-[var(--color-neo-text-secondary)] mb-2">
+            <div className="space-y-2">
+              <Label className="font-medium">Regression Agents</Label>
+              <p className="text-sm text-muted-foreground">
                 Number of regression testing agents (0 = disabled)
               </p>
-              <div
-                className="flex border-3 border-[var(--color-neo-border)]"
-                role="radiogroup"
-                aria-labelledby="testing-ratio-label"
-              >
+              <div className="flex rounded-lg border overflow-hidden">
                 {[0, 1, 2, 3].map((ratio) => (
                   <button
                     key={ratio}
                     onClick={() => handleTestingRatioChange(ratio)}
                     disabled={isSaving}
-                    role="radio"
-                    aria-checked={settings.testing_agent_ratio === ratio}
-                    className={`flex-1 py-2 px-3 font-display font-bold text-sm transition-colors ${
+                    className={`flex-1 py-2 px-3 text-sm font-medium transition-colors ${
                       settings.testing_agent_ratio === ratio
-                        ? 'bg-[var(--color-neo-progress)] text-[var(--color-neo-text)]'
-                        : 'bg-[var(--color-neo-card)] text-[var(--color-neo-text)] hover:bg-[var(--color-neo-hover-subtle)]'
+                        ? 'bg-primary text-primary-foreground'
+                        : 'bg-background text-foreground hover:bg-muted'
                     } ${isSaving ? 'opacity-50 cursor-not-allowed' : ''}`}
                   >
                     {ratio}
@@ -242,13 +145,15 @@ export function SettingsModal({ onClose }: SettingsModalProps) {
 
             {/* Update Error */}
             {updateSettings.isError && (
-              <div className="p-3 bg-[var(--color-neo-error-bg)] border-3 border-[var(--color-neo-error-border)] text-[var(--color-neo-error-text)] text-sm">
-                Failed to save settings. Please try again.
-              </div>
+              <Alert variant="destructive">
+                <AlertDescription>
+                  Failed to save settings. Please try again.
+                </AlertDescription>
+              </Alert>
             )}
           </div>
         )}
-      </div>
-    </div>
+      </DialogContent>
+    </Dialog>
   )
 }
diff --git a/ui/src/components/SetupWizard.tsx b/ui/src/components/SetupWizard.tsx
index 1e954a7..79d009e 100644
--- a/ui/src/components/SetupWizard.tsx
+++ b/ui/src/components/SetupWizard.tsx
@@ -1,6 +1,9 @@
 import { useEffect, useCallback } from 'react'
 import { CheckCircle2, XCircle, Loader2, ExternalLink } from 'lucide-react'
 import { useSetupStatus, useHealthCheck } from '../hooks/useProjects'
+import { Button } from '@/components/ui/button'
+import { Card, CardContent } from '@/components/ui/card'
+import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert'
 
 interface SetupWizardProps {
   onComplete: () => void
@@ -26,98 +29,100 @@ export function SetupWizard({ onComplete }: SetupWizardProps) {
   }, [checkAndComplete])
 
   return (
-    <div className="min-h-screen bg-[var(--color-neo-bg)] flex items-center justify-center p-4">
-      <div className="neo-card w-full max-w-lg p-8">
-        <h1 className="font-display text-3xl font-bold text-center mb-2">
-          Setup Wizard
-        </h1>
-        <p className="text-center text-[var(--color-neo-text-secondary)] mb-8">
-          Let's make sure everything is ready to go
-        </p>
+    <div className="min-h-screen bg-background flex items-center justify-center p-4">
+      <Card className="w-full max-w-lg">
+        <CardContent className="p-8">
+          <h1 className="font-display text-3xl font-bold text-center mb-2">
+            Setup Wizard
+          </h1>
+          <p className="text-center text-muted-foreground mb-8">
+            Let's make sure everything is ready to go
+          </p>
 
-        <div className="space-y-4">
-          {/* API Health */}
-          <SetupItem
-            label="Backend Server"
-            description="FastAPI server is running"
-            status={healthError ? 'error' : isApiHealthy ? 'success' : 'loading'}
-          />
+          <div className="space-y-4">
+            {/* API Health */}
+            <SetupItem
+              label="Backend Server"
+              description="FastAPI server is running"
+              status={healthError ? 'error' : isApiHealthy ? 'success' : 'loading'}
+            />
 
-          {/* Claude CLI */}
-          <SetupItem
-            label="Claude CLI"
-            description="Claude Code CLI is installed"
-            status={
-              setupLoading
-                ? 'loading'
-                : setupError
-                ? 'error'
-                : setupStatus?.claude_cli
-                ? 'success'
-                : 'error'
-            }
-            helpLink="https://docs.anthropic.com/claude/claude-code"
-            helpText="Install Claude Code"
-          />
+            {/* Claude CLI */}
+            <SetupItem
+              label="Claude CLI"
+              description="Claude Code CLI is installed"
+              status={
+                setupLoading
+                  ? 'loading'
+                  : setupError
+                  ? 'error'
+                  : setupStatus?.claude_cli
+                  ? 'success'
+                  : 'error'
+              }
+              helpLink="https://docs.anthropic.com/claude/claude-code"
+              helpText="Install Claude Code"
+            />
 
-          {/* Credentials */}
-          <SetupItem
-            label="Anthropic Credentials"
-            description="API credentials are configured"
-            status={
-              setupLoading
-                ? 'loading'
-                : setupError
-                ? 'error'
-                : setupStatus?.credentials
-                ? 'success'
-                : 'error'
-            }
-            helpLink="https://console.anthropic.com/account/keys"
-            helpText="Get API Key"
-          />
+            {/* Credentials */}
+            <SetupItem
+              label="Anthropic Credentials"
+              description="API credentials are configured"
+              status={
+                setupLoading
+                  ? 'loading'
+                  : setupError
+                  ? 'error'
+                  : setupStatus?.credentials
+                  ? 'success'
+                  : 'error'
+              }
+              helpLink="https://console.anthropic.com/account/keys"
+              helpText="Get API Key"
+            />
 
-          {/* Node.js */}
-          <SetupItem
-            label="Node.js"
-            description="Node.js is installed (for UI dev)"
-            status={
-              setupLoading
-                ? 'loading'
-                : setupError
-                ? 'error'
-                : setupStatus?.node
-                ? 'success'
-                : 'warning'
-            }
-            helpLink="https://nodejs.org"
-            helpText="Install Node.js"
-            optional
-          />
-        </div>
-
-        {/* Continue Button */}
-        {isReady && (
-          <button
-            onClick={onComplete}
-            className="neo-btn neo-btn-success w-full mt-8"
-          >
-            Continue to Dashboard
-          </button>
-        )}
-
-        {/* Error Message */}
-        {(healthError || setupError) && (
-          <div className="mt-6 p-4 bg-[var(--color-neo-error-bg)] text-[var(--color-neo-error-text)] border-3 border-[var(--color-neo-error-border)]">
-            <p className="font-bold mb-2">Setup Error</p>
-            <p className="text-sm">
-              {healthError
-                ? 'Cannot connect to the backend server. Make sure to run start_ui.py first.'
-                : 'Failed to check setup status.'}
-            </p>
+            {/* Node.js */}
+            <SetupItem
+              label="Node.js"
+              description="Node.js is installed (for UI dev)"
+              status={
+                setupLoading
+                  ? 'loading'
+                  : setupError
+                  ? 'error'
+                  : setupStatus?.node
+                  ? 'success'
+                  : 'warning'
+              }
+              helpLink="https://nodejs.org"
+              helpText="Install Node.js"
+              optional
+            />
           </div>
-        )}
-      </div>
+
+          {/* Continue Button */}
+          {isReady && (
+            <Button
+              onClick={onComplete}
+              className="w-full mt-8 bg-green-500 hover:bg-green-600 text-white"
+            >
+              Continue to Dashboard
+            </Button>
+          )}
+
+          {/* Error Message */}
+          {(healthError || setupError) && (
+            <Alert variant="destructive" className="mt-6">
+              <AlertTitle>Setup Error</AlertTitle>
+              <AlertDescription>
+                {healthError
+                  ? 'Cannot connect to the backend server. Make sure to run start_ui.py first.'
+                  : 'Failed to check setup status.'}
+              </AlertDescription>
+            </Alert>
+          )}
+        </CardContent>
+      </Card>
     </div>
   )
 }
@@ -140,31 +145,31 @@ function SetupItem({
   optional,
 }: SetupItemProps) {
   return (
-    <div className="flex items-start gap-4 p-4 bg-[var(--color-neo-bg)] border-3 border-[var(--color-neo-border)]">
+    <div className="flex items-start gap-4 p-4 bg-background border-2 border-border rounded-lg">
       {/* Status Icon */}
       <div className="flex-shrink-0 mt-1">
         {status === 'success' ? (
-          <CheckCircle2 size={24} className="text-[var(--color-neo-done)]" />
+          <CheckCircle2 size={24} className="text-green-500" />
         ) : status === 'error' ? (
-          <XCircle size={24} className="text-[var(--color-neo-danger)]" />
+          <XCircle size={24} className="text-destructive" />
         ) : status === 'warning' ? (
-          <XCircle size={24} className="text-[var(--color-neo-pending)]" />
+          <XCircle size={24} className="text-yellow-500" />
         ) : (
-          <Loader2 size={24} className="animate-spin text-[var(--color-neo-progress)]" />
+          <Loader2 size={24} className="animate-spin text-primary" />
         )}
       </div>
 
       {/* Content */}
       <div className="flex-1">
         <div className="flex items-center gap-2">
-          <span className="font-display font-bold">{label}</span>
+          <span className="font-display font-bold text-foreground">{label}</span>
           {optional && (
-            <span className="text-xs text-[var(--color-neo-text-secondary)]">
+            <span className="text-xs text-muted-foreground">
               (optional)
             </span>
           )}
         </div>
-        <p className="text-sm text-[var(--color-neo-text-secondary)]">
+        <p className="text-sm text-muted-foreground">
           {description}
         </p>
         {(status === 'error' || status === 'warning') && helpLink && (
@@ -172,7 +177,7 @@ function SetupItem({
             href={helpLink}
             target="_blank"
             rel="noopener noreferrer"
-            className="inline-flex items-center gap-1 mt-2 text-sm text-[var(--color-neo-accent)] hover:underline"
+            className="inline-flex items-center gap-1 mt-2 text-sm text-primary hover:underline"
           >
             {helpText} <ExternalLink size={12} />
           </a>
diff --git a/ui/src/components/SpecCreationChat.tsx b/ui/src/components/SpecCreationChat.tsx
index 9a12cc6..1aa804a 100644
--- a/ui/src/components/SpecCreationChat.tsx
+++ b/ui/src/components/SpecCreationChat.tsx
@@ -12,6 +12,10 @@ import { ChatMessage } from './ChatMessage'
 import { QuestionOptions } from './QuestionOptions'
 import { TypingIndicator } from './TypingIndicator'
 import type { ImageAttachment } from '../lib/types'
+import { Button } from '@/components/ui/button'
+import { Textarea } from '@/components/ui/textarea'
+import { Card, CardContent } from '@/components/ui/card'
+import { Alert, AlertDescription } from '@/components/ui/alert'
 
 // Image upload validation constants
 const MAX_FILE_SIZE = 5 * 1024 * 1024 // 5 MB
@@ -193,28 +197,28 @@ export function SpecCreationChat({
     switch (connectionStatus) {
       case 'connected':
         return (
-          <span className="flex items-center gap-1 text-xs text-[var(--color-neo-done)]">
+          <span className="flex items-center gap-1 text-xs text-green-500">
             <Wifi size={12} />
             Connected
           </span>
         )
       case 'connecting':
         return (
-          <span className="flex items-center gap-1 text-xs text-[var(--color-neo-pending)]">
+          <span className="flex items-center gap-1 text-xs text-yellow-500">
             <Wifi size={12} className="animate-pulse" />
             Connecting...
           </span>
         )
       case 'error':
         return (
-          <span className="flex items-center gap-1 text-xs text-[var(--color-neo-danger)]">
+          <span className="flex items-center gap-1 text-xs text-destructive">
             <WifiOff size={12} />
             Error
           </span>
         )
       default:
         return (
-          <span className="flex items-center gap-1 text-xs text-[var(--color-neo-text-secondary)]">
+          <span className="flex items-center gap-1 text-xs text-muted-foreground">
             <WifiOff size={12} />
             Disconnected
           </span>
@@ -223,11 +227,11 @@ export function SpecCreationChat({
   }
 
   return (
-    <div className="flex flex-col h-full bg-[var(--color-neo-bg)]">
+    <div className="flex flex-col h-full bg-background">
       {/* Header */}
-      <div className="flex items-center justify-between p-4 border-b-3 border-[var(--color-neo-border)] bg-[var(--color-neo-card)]">
+      <div className="flex items-center justify-between p-4 border-b-2 border-border bg-card">
         <div className="flex items-center gap-3">
-          <h2 className="font-display font-bold text-lg text-[var(--color-neo-text)]">
+          <h2 className="font-display font-bold text-lg text-foreground">
             Create Spec: {projectName}
           </h2>
           <ConnectionIndicator />
@@ -235,14 +239,14 @@ export function SpecCreationChat({
 
         <div className="flex items-center gap-2">
           {isComplete && (
-            <span className="flex items-center gap-1 text-sm text-[var(--color-neo-done)] font-bold">
+            <span className="flex items-center gap-1 text-sm text-green-500 font-bold">
               <CheckCircle2 size={16} />
               Complete
             </span>
           )}
 
           {/* Load Sample Prompt */}
-          <button
+          <Button
             onClick={() => {
               setInput(SAMPLE_PROMPT)
               // Also resize the textarea to fit content
@@ -251,68 +255,76 @@ export function SpecCreationChat({
                 inputRef.current.style.height = `${Math.min(inputRef.current.scrollHeight, 200)}px`
               }
             }}
-            className="neo-btn neo-btn-ghost text-sm py-2"
+            variant="ghost"
+            size="sm"
             title="Load sample prompt (Simple Todo app)"
           >
             <FileText size={16} />
             Load Sample
-          </button>
+          </Button>
 
           {/* Exit to Project - always visible escape hatch */}
-          <button
+          <Button
             onClick={onExitToProject}
-            className="neo-btn neo-btn-ghost text-sm py-2"
+            variant="ghost"
+            size="sm"
             title="Exit chat and go to project (you can start the agent manually)"
           >
             <ExternalLink size={16} />
             Exit to Project
-          </button>
+          </Button>
 
-          <button
+          <Button
             onClick={onCancel}
-            className="neo-btn neo-btn-ghost p-2"
+            variant="ghost"
+            size="icon"
             title="Cancel"
           >
             <X size={20} />
-          </button>
+          </Button>
         </div>
       </div>
 
       {/* Error banner */}
       {error && (
-        <div className="flex items-center gap-2 p-3 bg-[var(--color-neo-error-bg)] text-[var(--color-neo-error-text)] border-b-3 border-[var(--color-neo-error-border)]">
+        <Alert variant="destructive" className="rounded-none border-x-0 border-t-0">
           <AlertCircle size={16} />
-          <span className="flex-1 text-sm">{error}</span>
-          <button
+          <AlertDescription className="flex-1">{error}</AlertDescription>
+          <Button
             onClick={() => setError(null)}
-            className="p-1 hover:opacity-70 transition-opacity rounded"
+            variant="ghost"
+            size="icon"
+            className="h-6 w-6"
           >
             <X size={14} />
-          </button>
-        </div>
+          </Button>
+        </Alert>
       )}
 
       {/* Messages area */}
       <div className="flex-1 overflow-y-auto py-4">
         {messages.length === 0 && !isLoading && (
           <div className="flex flex-col items-center justify-center h-full text-center p-8">
-            <div className="neo-card p-6 max-w-md">
-              <h3 className="font-display font-bold text-lg mb-2">
-                Starting Spec Creation
-              </h3>
-              <p className="text-sm text-[var(--color-neo-text-secondary)]">
-                Connecting to Claude to help you create your app specification...
-              </p>
-              {connectionStatus === 'error' && (
-                <button
-                  onClick={start}
-                  className="neo-btn neo-btn-primary mt-4 text-sm"
-                >
-                  <RotateCcw size={14} />
-                  Retry Connection
-                </button>
-              )}
-            </div>
+            <Card className="p-6 max-w-md">
+              <CardContent className="p-0">
+                <h3 className="font-display font-bold text-lg mb-2">
+                  Starting Spec Creation
+                </h3>
+                <p className="text-sm text-muted-foreground">
+                  Connecting to Claude to help you create your app specification...
+                </p>
+                {connectionStatus === 'error' && (
+                  <Button
+                    onClick={start}
+                    className="mt-4"
+                    size="sm"
+                  >
+                    <RotateCcw size={14} />
+                    Retry Connection
+                  </Button>
+                )}
+              </CardContent>
+            </Card>
           </div>
         )}
 
@@ -339,7 +351,7 @@ export function SpecCreationChat({
       {/* Input area */}
       {!isComplete && (
         <div
-          className="p-4 border-t-3 border-[var(--color-neo-border)] bg-[var(--color-neo-card)]"
+          className="p-4 border-t-2 border-border bg-card"
           onDrop={handleDrop}
           onDragOver={handleDragOver}
         >
@@ -349,22 +361,21 @@ export function SpecCreationChat({
               {pendingAttachments.map((attachment) => (
                 <div
                   key={attachment.id}
-                  className="relative group border-2 border-[var(--color-neo-border)] p-1 bg-[var(--color-neo-card)]"
-                  style={{ boxShadow: 'var(--shadow-neo-sm)' }}
+                  className="relative group border-2 border-border p-1 bg-card rounded shadow-sm"
                 >
                   <img
                     src={attachment.previewUrl}
                     alt={attachment.filename}
-                    className="w-16 h-16 object-cover"
+                    className="w-16 h-16 object-cover rounded"
                   />
                   <button
                     onClick={() => handleRemoveAttachment(attachment.id)}
-                    className="absolute -top-2 -right-2 bg-[var(--color-neo-danger)] text-[var(--color-neo-text-on-bright)] rounded-full p-0.5 border-2 border-[var(--color-neo-border)] hover:scale-110 transition-transform"
+                    className="absolute -top-2 -right-2 bg-destructive text-destructive-foreground rounded-full p-0.5 border-2 border-border hover:scale-110 transition-transform"
                     title="Remove attachment"
                   >
                     <X size={12} />
                   </button>
-                  <span className="text-xs truncate block max-w-16 mt-1 text-center">
+                  <span className="text-xs truncate block max-w-16 mt-1 text-center text-muted-foreground">
                     {attachment.filename.length > 10
                       ? `${attachment.filename.substring(0, 7)}...`
                       : attachment.filename}
@@ -386,16 +397,17 @@ export function SpecCreationChat({
             />
 
             {/* Attach button */}
-            <button
+            <Button
               onClick={() => fileInputRef.current?.click()}
               disabled={connectionStatus !== 'connected'}
-              className="neo-btn neo-btn-ghost p-3"
+              variant="ghost"
+              size="icon"
               title="Attach image (JPEG, PNG - max 5MB)"
             >
               <Paperclip size={18} />
-            </button>
+            </Button>
 
-            <textarea
+            <Textarea
               ref={inputRef}
               value={input}
               onChange={(e) => {
@@ -412,25 +424,25 @@ export function SpecCreationChat({
                     ? 'Add a message with your image(s)...'
                     : 'Type your response... (or /exit to go to project)'
               }
-              className="neo-input flex-1 resize-none min-h-[46px] max-h-[200px] overflow-y-auto"
+              className="flex-1 resize-none min-h-[46px] max-h-[200px] overflow-y-auto"
               disabled={(isLoading && !currentQuestions) || connectionStatus !== 'connected'}
               rows={1}
             />
-            <button
+            <Button
               onClick={handleSendMessage}
               disabled={
                 (!input.trim() && pendingAttachments.length === 0) ||
                 (isLoading && !currentQuestions) ||
                 connectionStatus !== 'connected'
               }
-              className="neo-btn neo-btn-primary px-6"
+              className="px-6"
             >
               <Send size={18} />
-            </button>
+            </Button>
           </div>
 
           {/* Help text */}
-          <p className="text-xs text-[var(--color-neo-text-secondary)] mt-2">
+          <p className="text-xs text-muted-foreground mt-2">
             Press Enter to send, Shift+Enter for new line. Drag & drop or click <Paperclip size={12} className="inline" /> to attach images (JPEG/PNG, max 5MB).
           </p>
         </div>
@@ -438,64 +450,63 @@ export function SpecCreationChat({
 
       {/* Completion footer */}
       {isComplete && (
-        <div className={`p-4 border-t-3 border-[var(--color-neo-border)] ${
-          initializerStatus === 'error' ? 'bg-[var(--color-neo-danger)]' : 'bg-[var(--color-neo-done)]'
+        <div className={`p-4 border-t-2 border-border ${
+          initializerStatus === 'error' ? 'bg-destructive' : 'bg-green-500'
         }`}>
           <div className="flex items-center justify-between">
             <div className="flex items-center gap-2">
               {initializerStatus === 'starting' ? (
                 <>
-                  <Loader2 size={20} className="animate-spin text-[var(--color-neo-text-on-bright)]" />
-                  <span className="font-bold text-[var(--color-neo-text-on-bright)]">
+                  <Loader2 size={20} className="animate-spin text-white" />
+                  <span className="font-bold text-white">
                     Starting agent{yoloEnabled ? ' (YOLO mode)' : ''}...
                   </span>
                 </>
               ) : initializerStatus === 'error' ? (
                 <>
-                  <AlertCircle size={20} className="text-[var(--color-neo-text-on-bright)]" />
-                  <span className="font-bold text-[var(--color-neo-text-on-bright)]">
+                  <AlertCircle size={20} className="text-white" />
+                  <span className="font-bold text-white">
                     {initializerError || 'Failed to start agent'}
                   </span>
                 </>
               ) : (
                 <>
-                  <CheckCircle2 size={20} className="text-[var(--color-neo-text-on-bright)]" />
-                  <span className="font-bold text-[var(--color-neo-text-on-bright)]">Specification created successfully!</span>
+                  <CheckCircle2 size={20} className="text-white" />
+                  <span className="font-bold text-white">Specification created successfully!</span>
                 </>
               )}
             </div>
             <div className="flex items-center gap-2">
               {initializerStatus === 'error' && onRetryInitializer && (
-                <button
+                <Button
                   onClick={onRetryInitializer}
-                  className="neo-btn bg-[var(--color-neo-card)]"
+                  variant="secondary"
                 >
                   <RotateCcw size={14} />
                   Retry
-                </button>
+                </Button>
               )}
               {initializerStatus === 'idle' && (
                 <>
                   {/* YOLO Mode Toggle */}
-                  <button
+                  <Button
                     onClick={() => setYoloEnabled(!yoloEnabled)}
-                    className={`neo-btn text-sm py-2 px-3 ${
-                      yoloEnabled ? 'neo-btn-warning' : 'bg-[var(--color-neo-card)]'
-                    }`}
+                    variant={yoloEnabled ? "default" : "secondary"}
+                    size="sm"
+                    className={yoloEnabled ? 'bg-yellow-500 hover:bg-yellow-600 text-yellow-900' : ''}
                     title="YOLO Mode: Skip testing for rapid prototyping"
                   >
-                    <Zap size={16} className={yoloEnabled ? 'text-yellow-900' : ''} />
-                    <span className={yoloEnabled ? 'text-yellow-900 font-bold' : ''}>
+                    <Zap size={16} />
+                    <span className={yoloEnabled ? 'font-bold' : ''}>
                       YOLO
                     </span>
-                  </button>
-                  <button
+                  </Button>
+                  <Button
                     onClick={() => onComplete('', yoloEnabled)}
-                    className="neo-btn neo-btn-primary"
                   >
                     Continue to Project
                     <ArrowRight size={16} />
-                  </button>
+                  </Button>
                 </>
               )}
             </div>
diff --git a/ui/src/components/Terminal.tsx b/ui/src/components/Terminal.tsx
index 1d581c3..63f47a2 100644
--- a/ui/src/components/Terminal.tsx
+++ b/ui/src/components/Terminal.tsx
@@ -40,29 +40,29 @@ interface TerminalExitMessage {
 
 type TerminalServerMessage = TerminalOutputMessage | TerminalExitMessage
 
-// Neobrutalism theme colors for xterm
+// Clean terminal theme colors
 const TERMINAL_THEME = {
-  background: '#1a1a1a',
-  foreground: '#ffffff',
-  cursor: '#ff006e', // --color-neo-accent
-  cursorAccent: '#1a1a1a',
-  selectionBackground: 'rgba(255, 0, 110, 0.3)',
+  background: '#09090b', // zinc-950
+  foreground: '#fafafa', // zinc-50
+  cursor: '#3b82f6', // blue-500
+  cursorAccent: '#09090b',
+  selectionBackground: 'rgba(59, 130, 246, 0.3)',
   selectionForeground: '#ffffff',
-  black: '#1a1a1a',
-  red: '#ff5400',
-  green: '#70e000',
-  yellow: '#ffd60a',
-  blue: '#00b4d8',
-  magenta: '#ff006e',
-  cyan: '#00b4d8',
-  white: '#ffffff',
-  brightBlack: '#4a4a4a',
-  brightRed: '#ff7733',
-  brightGreen: '#8fff00',
-  brightYellow: '#ffe44d',
-  brightBlue: '#33c7e6',
-  brightMagenta: '#ff4d94',
-  brightCyan: '#33c7e6',
+  black: '#09090b',
+  red: '#ef4444',
+  green: '#22c55e',
+  yellow: '#eab308',
+  blue: '#3b82f6',
+  magenta: '#a855f7',
+  cyan: '#06b6d4',
+  white: '#fafafa',
+  brightBlack: '#52525b',
+  brightRed: '#f87171',
+  brightGreen: '#4ade80',
+  brightYellow: '#facc15',
+  brightBlue: '#60a5fa',
+  brightMagenta: '#c084fc',
+  brightCyan: '#22d3ee',
   brightWhite: '#ffffff',
 }
 
@@ -552,17 +552,17 @@ export function Terminal({ projectName, terminalId, isActive }: TerminalProps) {
   }, [projectName, terminalId, isActive])
 
   return (
-    <div className="relative h-full w-full bg-[#1a1a1a]">
+    <div className="relative h-full w-full bg-zinc-950">
       {/* Connection status indicator */}
       <div className="absolute top-2 right-2 z-10 flex items-center gap-2">
         <div
           className={`w-2 h-2 rounded-full ${
-            isConnected ? 'bg-neo-done' : 'bg-neo-danger'
+            isConnected ? 'bg-green-500' : 'bg-destructive'
           }`}
           title={isConnected ? 'Connected' : 'Disconnected'}
         />
         {!isConnected && !hasExited && (
-          <span className="text-xs font-mono text-gray-500">Connecting...</span>
+          <span className="text-xs font-mono text-muted-foreground">Connecting...</span>
         )}
         {hasExited && exitCode !== null && (
           <span className="text-xs font-mono text-yellow-500">
diff --git a/ui/src/components/TerminalTabs.tsx b/ui/src/components/TerminalTabs.tsx
index 86059bc..2771dec 100644
--- a/ui/src/components/TerminalTabs.tsx
+++ b/ui/src/components/TerminalTabs.tsx
@@ -8,6 +8,8 @@
 import { useState, useRef, useEffect, useCallback } from 'react'
 import { Plus, X } from 'lucide-react'
 import type { TerminalInfo } from '@/lib/types'
+import { Button } from '@/components/ui/button'
+import { Input } from '@/components/ui/input'
 
 interface TerminalTabsProps {
   terminals: TerminalInfo[]
@@ -154,18 +156,18 @@ export function TerminalTabs({
   )
 
   return (
-    <div className="flex items-center gap-1 px-2 py-1 bg-[#2a2a2a] border-b-2 border-black overflow-x-auto">
+    <div className="flex items-center gap-1 px-2 py-1 bg-zinc-900 border-b border-border overflow-x-auto">
       {/* Terminal tabs */}
       {terminals.map((terminal) => (
         <div
           key={terminal.id}
           className={`
-            group flex items-center gap-1 px-3 py-1 border-2 border-black cursor-pointer
+            group flex items-center gap-1 px-3 py-1 rounded cursor-pointer
             transition-colors duration-100 select-none min-w-0
             ${
               activeTerminalId === terminal.id
-                ? 'bg-neo-progress text-black'
-                : 'bg-[#3a3a3a] text-white hover:bg-[var(--color-neo-hover-subtle)]'
+                ? 'bg-primary text-primary-foreground'
+                : 'bg-zinc-800 text-zinc-300 hover:bg-zinc-700'
             }
           `}
           onClick={() => onSelect(terminal.id)}
@@ -173,14 +175,14 @@ export function TerminalTabs({
           onContextMenu={(e) => handleContextMenu(e, terminal.id)}
         >
           {editingId === terminal.id ? (
-            <input
+            <Input
               ref={inputRef}
               type="text"
               value={editValue}
               onChange={(e) => setEditValue(e.target.value)}
               onBlur={submitEdit}
               onKeyDown={handleKeyDown}
-              className="bg-neo-card text-neo-text px-1 py-0 text-sm font-mono border-2 border-black w-24 outline-none"
+              className="h-6 px-1 py-0 text-sm font-mono w-24"
               onClick={(e) => e.stopPropagation()}
             />
           ) : (
@@ -210,31 +212,33 @@ export function TerminalTabs({
       ))}
 
       {/* Add new terminal button */}
-      <button
+      <Button
+        variant="ghost"
+        size="icon"
         onClick={onCreate}
-        className="flex items-center justify-center w-8 h-8 border-2 border-black bg-[#3a3a3a] text-white hover:bg-[var(--color-neo-hover-subtle)] transition-colors"
+        className="h-8 w-8 bg-zinc-800 text-zinc-300 hover:bg-zinc-700"
         title="New terminal"
       >
         <Plus className="w-4 h-4" />
-      </button>
+      </Button>
 
       {/* Context menu */}
       {contextMenu.visible && (
         <div
           ref={contextMenuRef}
-          className="fixed z-50 bg-neo-card border-2 border-[var(--color-neo-border)] py-1 min-w-[120px]"
-          style={{ left: contextMenu.x, top: contextMenu.y, boxShadow: 'var(--shadow-neo-md)' }}
+          className="fixed z-50 bg-popover border border-border rounded-md py-1 min-w-[120px] shadow-md"
+          style={{ left: contextMenu.x, top: contextMenu.y }}
         >
           <button
             onClick={handleContextMenuRename}
-            className="w-full px-3 py-1 text-left text-sm font-mono hover:bg-neo-progress hover:text-black transition-colors"
+            className="w-full px-3 py-1.5 text-left text-sm font-mono hover:bg-accent transition-colors"
           >
             Rename
           </button>
           {terminals.length > 1 && (
             <button
               onClick={handleContextMenuClose}
-              className="w-full px-3 py-1 text-left text-sm font-mono hover:bg-neo-danger hover:text-white transition-colors"
+              className="w-full px-3 py-1.5 text-left text-sm font-mono text-destructive hover:bg-destructive hover:text-destructive-foreground transition-colors"
             >
               Close
             </button>
diff --git a/ui/src/components/TypingIndicator.tsx b/ui/src/components/TypingIndicator.tsx
index d0ccbe7..5e8b364 100644
--- a/ui/src/components/TypingIndicator.tsx
+++ b/ui/src/components/TypingIndicator.tsx
@@ -2,7 +2,6 @@
  * Typing Indicator Component
  *
  * Shows animated dots to indicate Claude is typing/thinking.
- * Styled in neobrutalism aesthetic.
  */
 
 export function TypingIndicator() {
@@ -10,19 +9,19 @@ export function TypingIndicator() {
     <div className="flex items-center gap-2 p-4">
       <div className="flex items-center gap-1">
         <span
-          className="w-2 h-2 bg-[var(--color-neo-progress)] rounded-full animate-bounce"
+          className="w-2 h-2 bg-primary rounded-full animate-bounce"
           style={{ animationDelay: '0ms' }}
         />
         <span
-          className="w-2 h-2 bg-[var(--color-neo-progress)] rounded-full animate-bounce"
+          className="w-2 h-2 bg-primary rounded-full animate-bounce"
           style={{ animationDelay: '150ms' }}
         />
         <span
-          className="w-2 h-2 bg-[var(--color-neo-progress)] rounded-full animate-bounce"
+          className="w-2 h-2 bg-primary rounded-full animate-bounce"
           style={{ animationDelay: '300ms' }}
         />
       </div>
-      <span className="text-sm font-mono animate-shimmer">
+      <span className="text-sm font-mono text-muted-foreground">
         Claude is thinking...
       </span>
     </div>
diff --git a/ui/src/components/ViewToggle.tsx b/ui/src/components/ViewToggle.tsx
index 4c5e4ce..c20f44b 100644
--- a/ui/src/components/ViewToggle.tsx
+++ b/ui/src/components/ViewToggle.tsx
@@ -1,4 +1,5 @@
 import { LayoutGrid, GitBranch } from 'lucide-react'
+import { Button } from '@/components/ui/button'
 
 export type ViewMode = 'kanban' | 'graph'
 
@@ -12,35 +13,25 @@ interface ViewToggleProps {
  */
 export function ViewToggle({ viewMode, onViewModeChange }: ViewToggleProps) {
   return (
-    <div className="inline-flex rounded-lg border-2 border-neo-border p-1 bg-white shadow-neo-sm">
-      <button
+    <div className="inline-flex rounded-lg border p-1 bg-background">
+      <Button
+        variant={viewMode === 'kanban' ? 'default' : 'ghost'}
+        size="sm"
         onClick={() => onViewModeChange('kanban')}
-        className={`
-          flex items-center gap-1.5 px-3 py-1.5 rounded-md font-medium text-sm transition-all
-          ${viewMode === 'kanban'
-            ? 'bg-neo-accent text-white shadow-neo-sm'
-            : 'text-neo-text hover:bg-neo-neutral-100'
-          }
-        `}
         title="Kanban View"
       >
         <LayoutGrid size={16} />
-        <span>Kanban</span>
-      </button>
-      <button
+        Kanban
+      </Button>
+      <Button
+        variant={viewMode === 'graph' ? 'default' : 'ghost'}
+        size="sm"
         onClick={() => onViewModeChange('graph')}
-        className={`
-          flex items-center gap-1.5 px-3 py-1.5 rounded-md font-medium text-sm transition-all
-          ${viewMode === 'graph'
-            ? 'bg-neo-accent text-white shadow-neo-sm'
-            : 'text-neo-text hover:bg-neo-neutral-100'
-          }
-        `}
         title="Dependency Graph View"
       >
         <GitBranch size={16} />
-        <span>Graph</span>
-      </button>
+        Graph
+      </Button>
     </div>
   )
 }
diff --git a/ui/src/components/ui/alert.tsx b/ui/src/components/ui/alert.tsx
new file mode 100644
index 0000000..1421354
--- /dev/null
+++ b/ui/src/components/ui/alert.tsx
@@ -0,0 +1,66 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const alertVariants = cva(
+  "relative w-full rounded-lg border px-4 py-3 text-sm grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr] has-[>svg]:gap-x-3 gap-y-0.5 items-start [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current",
+  {
+    variants: {
+      variant: {
+        default: "bg-card text-card-foreground",
+        destructive:
+          "text-destructive bg-card [&>svg]:text-current *:data-[slot=alert-description]:text-destructive/90",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+function Alert({
+  className,
+  variant,
+  ...props
+}: React.ComponentProps<"div"> & VariantProps<typeof alertVariants>) {
+  return (
+    <div
+      data-slot="alert"
+      role="alert"
+      className={cn(alertVariants({ variant }), className)}
+      {...props}
+    />
+  )
+}
+
+function AlertTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-title"
+      className={cn(
+        "col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertDescription({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-description"
+      className={cn(
+        "text-muted-foreground col-start-2 grid justify-items-start gap-1 text-sm [&_p]:leading-relaxed",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Alert, AlertTitle, AlertDescription }
diff --git a/ui/src/components/ui/badge.tsx b/ui/src/components/ui/badge.tsx
new file mode 100644
index 0000000..ba40cc1
--- /dev/null
+++ b/ui/src/components/ui/badge.tsx
@@ -0,0 +1,48 @@
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const badgeVariants = cva(
+  "inline-flex items-center justify-center rounded-full border border-transparent px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground [a&]:hover:bg-primary/90",
+        secondary:
+          "bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",
+        destructive:
+          "bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+        outline:
+          "border-border text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
+        ghost: "[a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
+        link: "text-primary underline-offset-4 [a&]:hover:underline",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+function Badge({
+  className,
+  variant = "default",
+  asChild = false,
+  ...props
+}: React.ComponentProps<"span"> &
+  VariantProps<typeof badgeVariants> & { asChild?: boolean }) {
+  const Comp = asChild ? Slot : "span"
+
+  return (
+    <Comp
+      data-slot="badge"
+      data-variant={variant}
+      className={cn(badgeVariants({ variant }), className)}
+      {...props}
+    />
+  )
+}
+
+export { Badge, badgeVariants }
diff --git a/ui/src/components/ui/button.tsx b/ui/src/components/ui/button.tsx
new file mode 100644
index 0000000..915ea2a
--- /dev/null
+++ b/ui/src/components/ui/button.tsx
@@ -0,0 +1,64 @@
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        destructive:
+          "bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+        outline:
+          "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
+        secondary:
+          "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        ghost:
+          "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default: "h-9 px-4 py-2 has-[>svg]:px-3",
+        xs: "h-6 gap-1 rounded-md px-2 text-xs has-[>svg]:px-1.5 [&_svg:not([class*='size-'])]:size-3",
+        sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
+        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
+        icon: "size-9",
+        "icon-xs": "size-6 rounded-md [&_svg:not([class*='size-'])]:size-3",
+        "icon-sm": "size-8",
+        "icon-lg": "size-10",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+function Button({
+  className,
+  variant = "default",
+  size = "default",
+  asChild = false,
+  ...props
+}: React.ComponentProps<"button"> &
+  VariantProps<typeof buttonVariants> & {
+    asChild?: boolean
+  }) {
+  const Comp = asChild ? Slot : "button"
+
+  return (
+    <Comp
+      data-slot="button"
+      data-variant={variant}
+      data-size={size}
+      className={cn(buttonVariants({ variant, size, className }))}
+      {...props}
+    />
+  )
+}
+
+export { Button, buttonVariants }
diff --git a/ui/src/components/ui/card.tsx b/ui/src/components/ui/card.tsx
new file mode 100644
index 0000000..681ad98
--- /dev/null
+++ b/ui/src/components/ui/card.tsx
@@ -0,0 +1,92 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+function Card({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card"
+      className={cn(
+        "bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-header"
+      className={cn(
+        "@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-2 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-title"
+      className={cn("leading-none font-semibold", className)}
+      {...props}
+    />
+  )
+}
+
+function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-description"
+      className={cn("text-muted-foreground text-sm", className)}
+      {...props}
+    />
+  )
+}
+
+function CardAction({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-action"
+      className={cn(
+        "col-start-2 row-span-2 row-start-1 self-start justify-self-end",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardContent({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-content"
+      className={cn("px-6", className)}
+      {...props}
+    />
+  )
+}
+
+function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-footer"
+      className={cn("flex items-center px-6 [.border-t]:pt-6", className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Card,
+  CardHeader,
+  CardFooter,
+  CardTitle,
+  CardAction,
+  CardDescription,
+  CardContent,
+}
diff --git a/ui/src/components/ui/checkbox.tsx b/ui/src/components/ui/checkbox.tsx
new file mode 100644
index 0000000..0e2a6cd
--- /dev/null
+++ b/ui/src/components/ui/checkbox.tsx
@@ -0,0 +1,30 @@
+import * as React from "react"
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox"
+import { CheckIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+function Checkbox({
+  className,
+  ...props
+}: React.ComponentProps<typeof CheckboxPrimitive.Root>) {
+  return (
+    <CheckboxPrimitive.Root
+      data-slot="checkbox"
+      className={cn(
+        "peer border-input dark:bg-input/30 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:data-[state=checked]:bg-primary data-[state=checked]:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive size-4 shrink-0 rounded-[4px] border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
+        className
+      )}
+      {...props}
+    >
+      <CheckboxPrimitive.Indicator
+        data-slot="checkbox-indicator"
+        className="grid place-content-center text-current transition-none"
+      >
+        <CheckIcon className="size-3.5" />
+      </CheckboxPrimitive.Indicator>
+    </CheckboxPrimitive.Root>
+  )
+}
+
+export { Checkbox }
diff --git a/ui/src/components/ui/dialog.tsx b/ui/src/components/ui/dialog.tsx
new file mode 100644
index 0000000..daf6bf4
--- /dev/null
+++ b/ui/src/components/ui/dialog.tsx
@@ -0,0 +1,156 @@
+import * as React from "react"
+import * as DialogPrimitive from "@radix-ui/react-dialog"
+import { XIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+import { Button } from "@/components/ui/button"
+
+function Dialog({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Root>) {
+  return <DialogPrimitive.Root data-slot="dialog" {...props} />
+}
+
+function DialogTrigger({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Trigger>) {
+  return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />
+}
+
+function DialogPortal({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Portal>) {
+  return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />
+}
+
+function DialogClose({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Close>) {
+  return <DialogPrimitive.Close data-slot="dialog-close" {...props} />
+}
+
+function DialogOverlay({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Overlay>) {
+  return (
+    <DialogPrimitive.Overlay
+      data-slot="dialog-overlay"
+      className={cn(
+        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DialogContent({
+  className,
+  children,
+  showCloseButton = true,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Content> & {
+  showCloseButton?: boolean
+}) {
+  return (
+    <DialogPortal data-slot="dialog-portal">
+      <DialogOverlay />
+      <DialogPrimitive.Content
+        data-slot="dialog-content"
+        className={cn(
+          "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 outline-none sm:max-w-lg",
+          className
+        )}
+        {...props}
+      >
+        {children}
+        {showCloseButton && (
+          <DialogPrimitive.Close
+            data-slot="dialog-close"
+            className="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
+          >
+            <XIcon />
+            <span className="sr-only">Close</span>
+          </DialogPrimitive.Close>
+        )}
+      </DialogPrimitive.Content>
+    </DialogPortal>
+  )
+}
+
+function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="dialog-header"
+      className={cn("flex flex-col gap-2 text-center sm:text-left", className)}
+      {...props}
+    />
+  )
+}
+
+function DialogFooter({
+  className,
+  showCloseButton = false,
+  children,
+  ...props
+}: React.ComponentProps<"div"> & {
+  showCloseButton?: boolean
+}) {
+  return (
+    <div
+      data-slot="dialog-footer"
+      className={cn(
+        "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      {showCloseButton && (
+        <DialogPrimitive.Close asChild>
+          <Button variant="outline">Close</Button>
+        </DialogPrimitive.Close>
+      )}
+    </div>
+  )
+}
+
+function DialogTitle({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Title>) {
+  return (
+    <DialogPrimitive.Title
+      data-slot="dialog-title"
+      className={cn("text-lg leading-none font-semibold", className)}
+      {...props}
+    />
+  )
+}
+
+function DialogDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Description>) {
+  return (
+    <DialogPrimitive.Description
+      data-slot="dialog-description"
+      className={cn("text-muted-foreground text-sm", className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogOverlay,
+  DialogPortal,
+  DialogTitle,
+  DialogTrigger,
+}
diff --git a/ui/src/components/ui/dropdown-menu.tsx b/ui/src/components/ui/dropdown-menu.tsx
new file mode 100644
index 0000000..17aeb28
--- /dev/null
+++ b/ui/src/components/ui/dropdown-menu.tsx
@@ -0,0 +1,257 @@
+import * as React from "react"
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu"
+import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+function DropdownMenu({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Root>) {
+  return <DropdownMenuPrimitive.Root data-slot="dropdown-menu" {...props} />
+}
+
+function DropdownMenuPortal({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Portal>) {
+  return (
+    <DropdownMenuPrimitive.Portal data-slot="dropdown-menu-portal" {...props} />
+  )
+}
+
+function DropdownMenuTrigger({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Trigger>) {
+  return (
+    <DropdownMenuPrimitive.Trigger
+      data-slot="dropdown-menu-trigger"
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuContent({
+  className,
+  sideOffset = 4,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Content>) {
+  return (
+    <DropdownMenuPrimitive.Portal>
+      <DropdownMenuPrimitive.Content
+        data-slot="dropdown-menu-content"
+        sideOffset={sideOffset}
+        className={cn(
+          "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md",
+          "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+          className
+        )}
+        {...props}
+      />
+    </DropdownMenuPrimitive.Portal>
+  )
+}
+
+function DropdownMenuGroup({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Group>) {
+  return (
+    <DropdownMenuPrimitive.Group data-slot="dropdown-menu-group" {...props} />
+  )
+}
+
+function DropdownMenuItem({
+  className,
+  inset,
+  variant = "default",
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Item> & {
+  inset?: boolean
+  variant?: "default" | "destructive"
+}) {
+  return (
+    <DropdownMenuPrimitive.Item
+      data-slot="dropdown-menu-item"
+      data-inset={inset}
+      data-variant={variant}
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuCheckboxItem({
+  className,
+  children,
+  checked,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem>) {
+  return (
+    <DropdownMenuPrimitive.CheckboxItem
+      data-slot="dropdown-menu-checkbox-item"
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      checked={checked}
+      {...props}
+    >
+      <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+        <DropdownMenuPrimitive.ItemIndicator>
+          <CheckIcon className="size-4" />
+        </DropdownMenuPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </DropdownMenuPrimitive.CheckboxItem>
+  )
+}
+
+function DropdownMenuRadioGroup({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioGroup>) {
+  return (
+    <DropdownMenuPrimitive.RadioGroup
+      data-slot="dropdown-menu-radio-group"
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuRadioItem({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioItem>) {
+  return (
+    <DropdownMenuPrimitive.RadioItem
+      data-slot="dropdown-menu-radio-item"
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    >
+      <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+        <DropdownMenuPrimitive.ItemIndicator>
+          <CircleIcon className="size-2 fill-current" />
+        </DropdownMenuPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </DropdownMenuPrimitive.RadioItem>
+  )
+}
+
+function DropdownMenuLabel({
+  className,
+  inset,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Label> & {
+  inset?: boolean
+}) {
+  return (
+    <DropdownMenuPrimitive.Label
+      data-slot="dropdown-menu-label"
+      data-inset={inset}
+      className={cn(
+        "px-2 py-1.5 text-sm font-medium data-[inset]:pl-8",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Separator>) {
+  return (
+    <DropdownMenuPrimitive.Separator
+      data-slot="dropdown-menu-separator"
+      className={cn("bg-border -mx-1 my-1 h-px", className)}
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuShortcut({
+  className,
+  ...props
+}: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="dropdown-menu-shortcut"
+      className={cn(
+        "text-muted-foreground ml-auto text-xs tracking-widest",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuSub({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Sub>) {
+  return <DropdownMenuPrimitive.Sub data-slot="dropdown-menu-sub" {...props} />
+}
+
+function DropdownMenuSubTrigger({
+  className,
+  inset,
+  children,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.SubTrigger> & {
+  inset?: boolean
+}) {
+  return (
+    <DropdownMenuPrimitive.SubTrigger
+      data-slot="dropdown-menu-sub-trigger"
+      data-inset={inset}
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <ChevronRightIcon className="ml-auto size-4" />
+    </DropdownMenuPrimitive.SubTrigger>
+  )
+}
+
+function DropdownMenuSubContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.SubContent>) {
+  return (
+    <DropdownMenuPrimitive.SubContent
+      data-slot="dropdown-menu-sub-content"
+      className={cn(
+        "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg",
+        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  DropdownMenu,
+  DropdownMenuPortal,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuLabel,
+  DropdownMenuItem,
+  DropdownMenuCheckboxItem,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuSub,
+  DropdownMenuSubTrigger,
+  DropdownMenuSubContent,
+}
diff --git a/ui/src/components/ui/input.tsx b/ui/src/components/ui/input.tsx
new file mode 100644
index 0000000..8916905
--- /dev/null
+++ b/ui/src/components/ui/input.tsx
@@ -0,0 +1,21 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+function Input({ className, type, ...props }: React.ComponentProps<"input">) {
+  return (
+    <input
+      type={type}
+      data-slot="input"
+      className={cn(
+        "file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+        "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
+        "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Input }
diff --git a/ui/src/components/ui/label.tsx b/ui/src/components/ui/label.tsx
new file mode 100644
index 0000000..ef7133a
--- /dev/null
+++ b/ui/src/components/ui/label.tsx
@@ -0,0 +1,22 @@
+import * as React from "react"
+import * as LabelPrimitive from "@radix-ui/react-label"
+
+import { cn } from "@/lib/utils"
+
+function Label({
+  className,
+  ...props
+}: React.ComponentProps<typeof LabelPrimitive.Root>) {
+  return (
+    <LabelPrimitive.Root
+      data-slot="label"
+      className={cn(
+        "flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Label }
diff --git a/ui/src/components/ui/popover.tsx b/ui/src/components/ui/popover.tsx
new file mode 100644
index 0000000..0df056f
--- /dev/null
+++ b/ui/src/components/ui/popover.tsx
@@ -0,0 +1,87 @@
+import * as React from "react"
+import * as PopoverPrimitive from "@radix-ui/react-popover"
+
+import { cn } from "@/lib/utils"
+
+function Popover({
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Root>) {
+  return <PopoverPrimitive.Root data-slot="popover" {...props} />
+}
+
+function PopoverTrigger({
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Trigger>) {
+  return <PopoverPrimitive.Trigger data-slot="popover-trigger" {...props} />
+}
+
+function PopoverContent({
+  className,
+  align = "center",
+  sideOffset = 4,
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Content>) {
+  return (
+    <PopoverPrimitive.Portal>
+      <PopoverPrimitive.Content
+        data-slot="popover-content"
+        align={align}
+        sideOffset={sideOffset}
+        className={cn(
+          "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-72 origin-(--radix-popover-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden",
+          className
+        )}
+        {...props}
+      />
+    </PopoverPrimitive.Portal>
+  )
+}
+
+function PopoverAnchor({
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Anchor>) {
+  return <PopoverPrimitive.Anchor data-slot="popover-anchor" {...props} />
+}
+
+function PopoverHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="popover-header"
+      className={cn("flex flex-col gap-1 text-sm", className)}
+      {...props}
+    />
+  )
+}
+
+function PopoverTitle({ className, ...props }: React.ComponentProps<"h2">) {
+  return (
+    <div
+      data-slot="popover-title"
+      className={cn("font-medium", className)}
+      {...props}
+    />
+  )
+}
+
+function PopoverDescription({
+  className,
+  ...props
+}: React.ComponentProps<"p">) {
+  return (
+    <p
+      data-slot="popover-description"
+      className={cn("text-muted-foreground", className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Popover,
+  PopoverTrigger,
+  PopoverContent,
+  PopoverAnchor,
+  PopoverHeader,
+  PopoverTitle,
+  PopoverDescription,
+}
diff --git a/ui/src/components/ui/radio-group.tsx b/ui/src/components/ui/radio-group.tsx
new file mode 100644
index 0000000..5e6778c
--- /dev/null
+++ b/ui/src/components/ui/radio-group.tsx
@@ -0,0 +1,45 @@
+"use client"
+
+import * as React from "react"
+import * as RadioGroupPrimitive from "@radix-ui/react-radio-group"
+import { CircleIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+function RadioGroup({
+  className,
+  ...props
+}: React.ComponentProps<typeof RadioGroupPrimitive.Root>) {
+  return (
+    <RadioGroupPrimitive.Root
+      data-slot="radio-group"
+      className={cn("grid gap-3", className)}
+      {...props}
+    />
+  )
+}
+
+function RadioGroupItem({
+  className,
+  ...props
+}: React.ComponentProps<typeof RadioGroupPrimitive.Item>) {
+  return (
+    <RadioGroupPrimitive.Item
+      data-slot="radio-group-item"
+      className={cn(
+        "border-input text-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 aspect-square size-4 shrink-0 rounded-full border shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
+        className
+      )}
+      {...props}
+    >
+      <RadioGroupPrimitive.Indicator
+        data-slot="radio-group-indicator"
+        className="relative flex items-center justify-center"
+      >
+        <CircleIcon className="fill-primary absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2" />
+      </RadioGroupPrimitive.Indicator>
+    </RadioGroupPrimitive.Item>
+  )
+}
+
+export { RadioGroup, RadioGroupItem }
diff --git a/ui/src/components/ui/scroll-area.tsx b/ui/src/components/ui/scroll-area.tsx
new file mode 100644
index 0000000..9376f59
--- /dev/null
+++ b/ui/src/components/ui/scroll-area.tsx
@@ -0,0 +1,56 @@
+import * as React from "react"
+import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area"
+
+import { cn } from "@/lib/utils"
+
+function ScrollArea({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof ScrollAreaPrimitive.Root>) {
+  return (
+    <ScrollAreaPrimitive.Root
+      data-slot="scroll-area"
+      className={cn("relative", className)}
+      {...props}
+    >
+      <ScrollAreaPrimitive.Viewport
+        data-slot="scroll-area-viewport"
+        className="focus-visible:ring-ring/50 size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:outline-1"
+      >
+        {children}
+      </ScrollAreaPrimitive.Viewport>
+      <ScrollBar />
+      <ScrollAreaPrimitive.Corner />
+    </ScrollAreaPrimitive.Root>
+  )
+}
+
+function ScrollBar({
+  className,
+  orientation = "vertical",
+  ...props
+}: React.ComponentProps<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>) {
+  return (
+    <ScrollAreaPrimitive.ScrollAreaScrollbar
+      data-slot="scroll-area-scrollbar"
+      orientation={orientation}
+      className={cn(
+        "flex touch-none p-px transition-colors select-none",
+        orientation === "vertical" &&
+          "h-full w-2.5 border-l border-l-transparent",
+        orientation === "horizontal" &&
+          "h-2.5 flex-col border-t border-t-transparent",
+        className
+      )}
+      {...props}
+    >
+      <ScrollAreaPrimitive.ScrollAreaThumb
+        data-slot="scroll-area-thumb"
+        className="bg-border relative flex-1 rounded-full"
+      />
+    </ScrollAreaPrimitive.ScrollAreaScrollbar>
+  )
+}
+
+export { ScrollArea, ScrollBar }
diff --git a/ui/src/components/ui/select.tsx b/ui/src/components/ui/select.tsx
new file mode 100644
index 0000000..88302a8
--- /dev/null
+++ b/ui/src/components/ui/select.tsx
@@ -0,0 +1,190 @@
+"use client"
+
+import * as React from "react"
+import * as SelectPrimitive from "@radix-ui/react-select"
+import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+function Select({
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Root>) {
+  return <SelectPrimitive.Root data-slot="select" {...props} />
+}
+
+function SelectGroup({
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Group>) {
+  return <SelectPrimitive.Group data-slot="select-group" {...props} />
+}
+
+function SelectValue({
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Value>) {
+  return <SelectPrimitive.Value data-slot="select-value" {...props} />
+}
+
+function SelectTrigger({
+  className,
+  size = "default",
+  children,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Trigger> & {
+  size?: "sm" | "default"
+}) {
+  return (
+    <SelectPrimitive.Trigger
+      data-slot="select-trigger"
+      data-size={size}
+      className={cn(
+        "border-input data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50 flex w-fit items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <SelectPrimitive.Icon asChild>
+        <ChevronDownIcon className="size-4 opacity-50" />
+      </SelectPrimitive.Icon>
+    </SelectPrimitive.Trigger>
+  )
+}
+
+function SelectContent({
+  className,
+  children,
+  position = "item-aligned",
+  align = "center",
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Content>) {
+  return (
+    <SelectPrimitive.Portal>
+      <SelectPrimitive.Content
+        data-slot="select-content"
+        className={cn(
+          "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border shadow-md",
+          position === "popper" &&
+            "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
+          className
+        )}
+        position={position}
+        align={align}
+        {...props}
+      >
+        <SelectScrollUpButton />
+        <SelectPrimitive.Viewport
+          className={cn(
+            "p-1",
+            position === "popper" &&
+              "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)] scroll-my-1"
+          )}
+        >
+          {children}
+        </SelectPrimitive.Viewport>
+        <SelectScrollDownButton />
+      </SelectPrimitive.Content>
+    </SelectPrimitive.Portal>
+  )
+}
+
+function SelectLabel({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Label>) {
+  return (
+    <SelectPrimitive.Label
+      data-slot="select-label"
+      className={cn("text-muted-foreground px-2 py-1.5 text-xs", className)}
+      {...props}
+    />
+  )
+}
+
+function SelectItem({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Item>) {
+  return (
+    <SelectPrimitive.Item
+      data-slot="select-item"
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
+        className
+      )}
+      {...props}
+    >
+      <span
+        data-slot="select-item-indicator"
+        className="absolute right-2 flex size-3.5 items-center justify-center"
+      >
+        <SelectPrimitive.ItemIndicator>
+          <CheckIcon className="size-4" />
+        </SelectPrimitive.ItemIndicator>
+      </span>
+      <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+    </SelectPrimitive.Item>
+  )
+}
+
+function SelectSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Separator>) {
+  return (
+    <SelectPrimitive.Separator
+      data-slot="select-separator"
+      className={cn("bg-border pointer-events-none -mx-1 my-1 h-px", className)}
+      {...props}
+    />
+  )
+}
+
+function SelectScrollUpButton({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.ScrollUpButton>) {
+  return (
+    <SelectPrimitive.ScrollUpButton
+      data-slot="select-scroll-up-button"
+      className={cn(
+        "flex cursor-default items-center justify-center py-1",
+        className
+      )}
+      {...props}
+    >
+      <ChevronUpIcon className="size-4" />
+    </SelectPrimitive.ScrollUpButton>
+  )
+}
+
+function SelectScrollDownButton({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.ScrollDownButton>) {
+  return (
+    <SelectPrimitive.ScrollDownButton
+      data-slot="select-scroll-down-button"
+      className={cn(
+        "flex cursor-default items-center justify-center py-1",
+        className
+      )}
+      {...props}
+    >
+      <ChevronDownIcon className="size-4" />
+    </SelectPrimitive.ScrollDownButton>
+  )
+}
+
+export {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectScrollDownButton,
+  SelectScrollUpButton,
+  SelectSeparator,
+  SelectTrigger,
+  SelectValue,
+}
diff --git a/ui/src/components/ui/separator.tsx b/ui/src/components/ui/separator.tsx
new file mode 100644
index 0000000..275381c
--- /dev/null
+++ b/ui/src/components/ui/separator.tsx
@@ -0,0 +1,28 @@
+"use client"
+
+import * as React from "react"
+import * as SeparatorPrimitive from "@radix-ui/react-separator"
+
+import { cn } from "@/lib/utils"
+
+function Separator({
+  className,
+  orientation = "horizontal",
+  decorative = true,
+  ...props
+}: React.ComponentProps<typeof SeparatorPrimitive.Root>) {
+  return (
+    <SeparatorPrimitive.Root
+      data-slot="separator"
+      decorative={decorative}
+      orientation={orientation}
+      className={cn(
+        "bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Separator }
diff --git a/ui/src/components/ui/switch.tsx b/ui/src/components/ui/switch.tsx
new file mode 100644
index 0000000..f442c2c
--- /dev/null
+++ b/ui/src/components/ui/switch.tsx
@@ -0,0 +1,35 @@
+"use client"
+
+import * as React from "react"
+import * as SwitchPrimitive from "@radix-ui/react-switch"
+
+import { cn } from "@/lib/utils"
+
+function Switch({
+  className,
+  size = "default",
+  ...props
+}: React.ComponentProps<typeof SwitchPrimitive.Root> & {
+  size?: "sm" | "default"
+}) {
+  return (
+    <SwitchPrimitive.Root
+      data-slot="switch"
+      data-size={size}
+      className={cn(
+        "peer data-[state=checked]:bg-primary data-[state=unchecked]:bg-input focus-visible:border-ring focus-visible:ring-ring/50 dark:data-[state=unchecked]:bg-input/80 group/switch inline-flex shrink-0 items-center rounded-full border border-transparent shadow-xs transition-all outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-[1.15rem] data-[size=default]:w-8 data-[size=sm]:h-3.5 data-[size=sm]:w-6",
+        className
+      )}
+      {...props}
+    >
+      <SwitchPrimitive.Thumb
+        data-slot="switch-thumb"
+        className={cn(
+          "bg-background dark:data-[state=unchecked]:bg-foreground dark:data-[state=checked]:bg-primary-foreground pointer-events-none block rounded-full ring-0 transition-transform group-data-[size=default]/switch:size-4 group-data-[size=sm]/switch:size-3 data-[state=checked]:translate-x-[calc(100%-2px)] data-[state=unchecked]:translate-x-0"
+        )}
+      />
+    </SwitchPrimitive.Root>
+  )
+}
+
+export { Switch }
diff --git a/ui/src/components/ui/tabs.tsx b/ui/src/components/ui/tabs.tsx
new file mode 100644
index 0000000..bb946fc
--- /dev/null
+++ b/ui/src/components/ui/tabs.tsx
@@ -0,0 +1,89 @@
+import * as React from "react"
+import * as TabsPrimitive from "@radix-ui/react-tabs"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+function Tabs({
+  className,
+  orientation = "horizontal",
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.Root>) {
+  return (
+    <TabsPrimitive.Root
+      data-slot="tabs"
+      data-orientation={orientation}
+      orientation={orientation}
+      className={cn(
+        "group/tabs flex gap-2 data-[orientation=horizontal]:flex-col",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+const tabsListVariants = cva(
+  "rounded-lg p-[3px] group-data-[orientation=horizontal]/tabs:h-9 data-[variant=line]:rounded-none group/tabs-list text-muted-foreground inline-flex w-fit items-center justify-center group-data-[orientation=vertical]/tabs:h-fit group-data-[orientation=vertical]/tabs:flex-col",
+  {
+    variants: {
+      variant: {
+        default: "bg-muted",
+        line: "gap-1 bg-transparent",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+function TabsList({
+  className,
+  variant = "default",
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.List> &
+  VariantProps<typeof tabsListVariants>) {
+  return (
+    <TabsPrimitive.List
+      data-slot="tabs-list"
+      data-variant={variant}
+      className={cn(tabsListVariants({ variant }), className)}
+      {...props}
+    />
+  )
+}
+
+function TabsTrigger({
+  className,
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.Trigger>) {
+  return (
+    <TabsPrimitive.Trigger
+      data-slot="tabs-trigger"
+      className={cn(
+        "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring text-foreground/60 hover:text-foreground dark:text-muted-foreground dark:hover:text-foreground relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap transition-all group-data-[orientation=vertical]/tabs:w-full group-data-[orientation=vertical]/tabs:justify-start focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 group-data-[variant=default]/tabs-list:data-[state=active]:shadow-sm group-data-[variant=line]/tabs-list:data-[state=active]:shadow-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-[state=active]:bg-transparent dark:group-data-[variant=line]/tabs-list:data-[state=active]:border-transparent dark:group-data-[variant=line]/tabs-list:data-[state=active]:bg-transparent",
+        "data-[state=active]:bg-background dark:data-[state=active]:text-foreground dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 data-[state=active]:text-foreground",
+        "after:bg-foreground after:absolute after:opacity-0 after:transition-opacity group-data-[orientation=horizontal]/tabs:after:inset-x-0 group-data-[orientation=horizontal]/tabs:after:bottom-[-5px] group-data-[orientation=horizontal]/tabs:after:h-0.5 group-data-[orientation=vertical]/tabs:after:inset-y-0 group-data-[orientation=vertical]/tabs:after:-right-1 group-data-[orientation=vertical]/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-[state=active]:after:opacity-100",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TabsContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.Content>) {
+  return (
+    <TabsPrimitive.Content
+      data-slot="tabs-content"
+      className={cn("flex-1 outline-none", className)}
+      {...props}
+    />
+  )
+}
+
+export { Tabs, TabsList, TabsTrigger, TabsContent, tabsListVariants }
diff --git a/ui/src/components/ui/textarea.tsx b/ui/src/components/ui/textarea.tsx
new file mode 100644
index 0000000..7f21b5e
--- /dev/null
+++ b/ui/src/components/ui/textarea.tsx
@@ -0,0 +1,18 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
+  return (
+    <textarea
+      data-slot="textarea"
+      className={cn(
+        "border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 flex field-sizing-content min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Textarea }
diff --git a/ui/src/components/ui/toggle.tsx b/ui/src/components/ui/toggle.tsx
new file mode 100644
index 0000000..94ec8f5
--- /dev/null
+++ b/ui/src/components/ui/toggle.tsx
@@ -0,0 +1,47 @@
+"use client"
+
+import * as React from "react"
+import * as TogglePrimitive from "@radix-ui/react-toggle"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const toggleVariants = cva(
+  "inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium hover:bg-muted hover:text-muted-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] outline-none transition-[color,box-shadow] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive whitespace-nowrap",
+  {
+    variants: {
+      variant: {
+        default: "bg-transparent",
+        outline:
+          "border border-input bg-transparent shadow-xs hover:bg-accent hover:text-accent-foreground",
+      },
+      size: {
+        default: "h-9 px-2 min-w-9",
+        sm: "h-8 px-1.5 min-w-8",
+        lg: "h-10 px-2.5 min-w-10",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+function Toggle({
+  className,
+  variant,
+  size,
+  ...props
+}: React.ComponentProps<typeof TogglePrimitive.Root> &
+  VariantProps<typeof toggleVariants>) {
+  return (
+    <TogglePrimitive.Root
+      data-slot="toggle"
+      className={cn(toggleVariants({ variant, size, className }))}
+      {...props}
+    />
+  )
+}
+
+export { Toggle, toggleVariants }
diff --git a/ui/src/components/ui/tooltip.tsx b/ui/src/components/ui/tooltip.tsx
new file mode 100644
index 0000000..a4e90d4
--- /dev/null
+++ b/ui/src/components/ui/tooltip.tsx
@@ -0,0 +1,61 @@
+"use client"
+
+import * as React from "react"
+import * as TooltipPrimitive from "@radix-ui/react-tooltip"
+
+import { cn } from "@/lib/utils"
+
+function TooltipProvider({
+  delayDuration = 0,
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Provider>) {
+  return (
+    <TooltipPrimitive.Provider
+      data-slot="tooltip-provider"
+      delayDuration={delayDuration}
+      {...props}
+    />
+  )
+}
+
+function Tooltip({
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Root>) {
+  return (
+    <TooltipProvider>
+      <TooltipPrimitive.Root data-slot="tooltip" {...props} />
+    </TooltipProvider>
+  )
+}
+
+function TooltipTrigger({
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {
+  return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />
+}
+
+function TooltipContent({
+  className,
+  sideOffset = 0,
+  children,
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Content>) {
+  return (
+    <TooltipPrimitive.Portal>
+      <TooltipPrimitive.Content
+        data-slot="tooltip-content"
+        sideOffset={sideOffset}
+        className={cn(
+          "bg-foreground text-background animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance",
+          className
+        )}
+        {...props}
+      >
+        {children}
+        <TooltipPrimitive.Arrow className="bg-foreground fill-foreground z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]" />
+      </TooltipPrimitive.Content>
+    </TooltipPrimitive.Portal>
+  )
+}
+
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }
diff --git a/ui/src/lib/utils.ts b/ui/src/lib/utils.ts
new file mode 100644
index 0000000..bd0c391
--- /dev/null
+++ b/ui/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/ui/src/main.tsx b/ui/src/main.tsx
index 0420f66..fa4dad9 100644
--- a/ui/src/main.tsx
+++ b/ui/src/main.tsx
@@ -3,7 +3,7 @@ import { createRoot } from 'react-dom/client'
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import App from './App'
 import './styles/globals.css'
-import './styles/custom-theme.css' // Custom theme overrides (safe from upstream conflicts)
+// Note: Custom theme removed - using shadcn/ui theming instead
 
 const queryClient = new QueryClient({
   defaultOptions: {
diff --git a/ui/src/styles/custom-theme.css b/ui/src/styles/custom-theme.css
deleted file mode 100644
index 7a673b8..0000000
--- a/ui/src/styles/custom-theme.css
+++ /dev/null
@@ -1,436 +0,0 @@
-/*
- * Clean Twitter-Style Theme
- * =========================
- * Based on user's exact design system values
- */
-
-:root {
-  /* Core colors */
-  --color-neo-bg: oklch(1.0000 0 0);
-  --color-neo-card: oklch(0.9784 0.0011 197.1387);
-  --color-neo-text: oklch(0.1884 0.0128 248.5103);
-  --color-neo-text-secondary: oklch(0.1884 0.0128 248.5103);
-  --color-neo-text-muted: oklch(0.5637 0.0078 247.9662);
-  --color-neo-text-on-bright: oklch(1.0000 0 0);
-
-  /* Primary accent - Twitter blue */
-  --color-neo-accent: oklch(0.6723 0.1606 244.9955);
-
-  /* Status colors - all use accent blue except danger */
-  --color-neo-pending: oklch(0.6723 0.1606 244.9955);
-  --color-neo-progress: oklch(0.6723 0.1606 244.9955);
-  --color-neo-done: oklch(0.6723 0.1606 244.9955);
-  --color-neo-danger: oklch(0.6188 0.2376 25.7658);
-
-  /* Borders and neutrals */
-  --color-neo-border: oklch(0.9317 0.0118 231.6594);
-  --color-neo-neutral-50: oklch(0.9809 0.0025 228.7836);
-  --color-neo-neutral-100: oklch(0.9392 0.0166 250.8453);
-  --color-neo-neutral-200: oklch(0.9222 0.0013 286.3737);
-  --color-neo-neutral-300: oklch(0.9317 0.0118 231.6594);
-
-  /* No shadows */
-  --shadow-neo-sm: none;
-  --shadow-neo-md: none;
-  --shadow-neo-lg: none;
-  --shadow-neo-xl: none;
-  --shadow-neo-left: none;
-  --shadow-neo-inset: none;
-
-  /* Typography */
-  --font-neo-sans: Open Sans, sans-serif;
-  --font-neo-mono: Menlo, monospace;
-
-  /* Radius - 1.3rem base */
-  --radius-neo-sm: calc(1.3rem - 4px);
-  --radius-neo-md: calc(1.3rem - 2px);
-  --radius-neo-lg: 1.3rem;
-  --radius-neo-xl: calc(1.3rem + 4px);
-}
-
-.dark {
-  /* Core colors - dark mode (Twitter dark style) */
-  --color-neo-bg: oklch(0.08 0 0);
-  --color-neo-card: oklch(0.16 0.005 250);
-  --color-neo-text: oklch(0.95 0 0);
-  --color-neo-text-secondary: oklch(0.75 0 0);
-  --color-neo-text-muted: oklch(0.55 0 0);
-  --color-neo-text-on-bright: oklch(1.0 0 0);
-
-  /* Primary accent */
-  --color-neo-accent: oklch(0.6692 0.1607 245.0110);
-
-  /* Status colors - all use accent blue except danger */
-  --color-neo-pending: oklch(0.6692 0.1607 245.0110);
-  --color-neo-progress: oklch(0.6692 0.1607 245.0110);
-  --color-neo-done: oklch(0.6692 0.1607 245.0110);
-  --color-neo-danger: oklch(0.6188 0.2376 25.7658);
-
-  /* Borders and neutrals - better contrast */
-  --color-neo-border: oklch(0.30 0 0);
-  --color-neo-neutral-50: oklch(0.20 0 0);
-  --color-neo-neutral-100: oklch(0.25 0.01 250);
-  --color-neo-neutral-200: oklch(0.22 0 0);
-  --color-neo-neutral-300: oklch(0.30 0 0);
-
-  /* No shadows */
-  --shadow-neo-sm: none;
-  --shadow-neo-md: none;
-  --shadow-neo-lg: none;
-  --shadow-neo-xl: none;
-  --shadow-neo-left: none;
-  --shadow-neo-inset: none;
-}
-
-/* ===== GLOBAL OVERRIDES ===== */
-
-* {
-  box-shadow: none !important;
-}
-
-/* ===== CARDS ===== */
-.neo-card,
-[class*="neo-card"] {
-  border: 1px solid var(--color-neo-border) !important;
-  box-shadow: none !important;
-  transform: none !important;
-  border-radius: var(--radius-neo-lg) !important;
-  background-color: var(--color-neo-card) !important;
-}
-
-.neo-card:hover,
-[class*="neo-card"]:hover {
-  transform: none !important;
-  box-shadow: none !important;
-}
-
-/* ===== BUTTONS ===== */
-.neo-btn,
-[class*="neo-btn"],
-button {
-  border-width: 1px !important;
-  box-shadow: none !important;
-  text-transform: none !important;
-  font-weight: 500 !important;
-  transform: none !important;
-  border-radius: var(--radius-neo-lg) !important;
-  font-family: var(--font-neo-sans) !important;
-}
-
-.neo-btn:hover,
-[class*="neo-btn"]:hover,
-button:hover {
-  transform: none !important;
-  box-shadow: none !important;
-}
-
-.neo-btn:active,
-[class*="neo-btn"]:active {
-  transform: none !important;
-}
-
-/* Primary button */
-.neo-btn-primary {
-  background-color: var(--color-neo-accent) !important;
-  border-color: var(--color-neo-accent) !important;
-  color: white !important;
-}
-
-/* Success button - use accent blue instead of green */
-.neo-btn-success {
-  background-color: var(--color-neo-accent) !important;
-  border-color: var(--color-neo-accent) !important;
-  color: white !important;
-}
-
-/* Danger button - subtle red */
-.neo-btn-danger {
-  background-color: var(--color-neo-danger) !important;
-  border-color: var(--color-neo-danger) !important;
-  color: white !important;
-}
-
-/* ===== INPUTS ===== */
-.neo-input,
-.neo-textarea,
-input,
-textarea,
-select {
-  border: 1px solid var(--color-neo-border) !important;
-  box-shadow: none !important;
-  border-radius: var(--radius-neo-md) !important;
-  background-color: var(--color-neo-neutral-50) !important;
-}
-
-.neo-input:focus,
-.neo-textarea:focus,
-input:focus,
-textarea:focus,
-select:focus {
-  box-shadow: none !important;
-  border-color: var(--color-neo-accent) !important;
-  outline: none !important;
-}
-
-/* ===== KEYBOARD ACCESSIBILITY ===== */
-/* Focus-visible styles for keyboard navigation */
-.neo-btn:focus-visible,
-[class*="neo-btn"]:focus-visible,
-button:focus-visible {
-  outline: 2px solid var(--color-neo-accent) !important;
-  outline-offset: 2px !important;
-}
-
-.neo-input:focus-visible,
-.neo-textarea:focus-visible,
-input:focus-visible,
-textarea:focus-visible,
-select:focus-visible {
-  outline: 2px solid var(--color-neo-accent) !important;
-  outline-offset: 2px !important;
-  border-color: var(--color-neo-accent) !important;
-}
-
-a:focus-visible,
-[role="button"]:focus-visible,
-[tabindex]:focus-visible {
-  outline: 2px solid var(--color-neo-accent) !important;
-  outline-offset: 2px !important;
-}
-
-/* ===== BADGES ===== */
-.neo-badge,
-[class*="neo-badge"] {
-  border: 1px solid var(--color-neo-border) !important;
-  box-shadow: none !important;
-  border-radius: var(--radius-neo-lg) !important;
-  font-weight: 500 !important;
-  text-transform: none !important;
-}
-
-/* ===== PROGRESS BAR ===== */
-.neo-progress {
-  border: none !important;
-  box-shadow: none !important;
-  border-radius: var(--radius-neo-lg) !important;
-  background-color: var(--color-neo-neutral-100) !important;
-  overflow: hidden !important;
-  height: 0.75rem !important;
-}
-
-.neo-progress-fill {
-  background-color: var(--color-neo-accent) !important;
-  border-radius: var(--radius-neo-lg) !important;
-}
-
-.neo-progress-fill::after {
-  display: none !important;
-}
-
-/* ===== KANBAN COLUMNS ===== */
-.kanban-column {
-  border: 1px solid var(--color-neo-border) !important;
-  border-radius: var(--radius-neo-lg) !important;
-  overflow: hidden;
-  background-color: var(--color-neo-bg) !important;
-  border-left: none !important;
-}
-
-/* Left accent border on the whole column */
-.kanban-column.kanban-header-pending {
-  border-left: 3px solid var(--color-neo-accent) !important;
-}
-
-.kanban-column.kanban-header-progress {
-  border-left: 3px solid var(--color-neo-accent) !important;
-}
-
-.kanban-column.kanban-header-done {
-  border-left: 3px solid var(--color-neo-accent) !important;
-}
-
-.kanban-header {
-  background-color: var(--color-neo-card) !important;
-  border-bottom: 1px solid var(--color-neo-border) !important;
-  border-left: none !important;
-}
-
-/* ===== MODALS & DROPDOWNS ===== */
-.neo-modal,
-[class*="neo-modal"],
-[role="dialog"] {
-  border: 1px solid var(--color-neo-border) !important;
-  border-radius: var(--radius-neo-xl) !important;
-  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.1) !important;
-}
-
-.neo-dropdown,
-[class*="dropdown"],
-[role="menu"],
-[data-radix-popper-content-wrapper] {
-  border: 1px solid var(--color-neo-border) !important;
-  border-radius: var(--radius-neo-lg) !important;
-  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.08) !important;
-}
-
-/* ===== STATUS BADGES ===== */
-[class*="bg-neo-pending"],
-.bg-\[var\(--color-neo-pending\)\] {
-  background-color: var(--color-neo-neutral-100) !important;
-  color: var(--color-neo-text-secondary) !important;
-}
-
-[class*="bg-neo-progress"],
-.bg-\[var\(--color-neo-progress\)\] {
-  background-color: oklch(0.9392 0.0166 250.8453) !important;
-  color: var(--color-neo-accent) !important;
-}
-
-[class*="bg-neo-done"],
-.bg-\[var\(--color-neo-done\)\] {
-  background-color: oklch(0.9392 0.0166 250.8453) !important;
-  color: var(--color-neo-accent) !important;
-}
-
-/* ===== REMOVE NEO EFFECTS ===== */
-[class*="shadow-neo"],
-[class*="shadow-"] {
-  box-shadow: none !important;
-}
-
-/* Only disable hover transforms, not layout utilities like -translate-x-1/2 */
-[class*="hover:translate"],
-[class*="hover:-translate"] {
-  transform: none !important;
-}
-
-/* ===== TEXT STYLING ===== */
-h1, h2, h3, h4, h5, h6,
-[class*="heading"],
-[class*="title"],
-[class*="font-display"] {
-  text-transform: none !important;
-  font-family: var(--font-neo-sans) !important;
-}
-
-.uppercase {
-  text-transform: none !important;
-}
-
-strong, b,
-[class*="font-bold"],
-[class*="font-black"] {
-  font-weight: 600 !important;
-}
-
-/* ===== SPECIFIC ELEMENT FIXES ===== */
-
-/* Green badges should use accent color */
-[class*="bg-green"],
-[class*="bg-emerald"],
-[class*="bg-lime"] {
-  background-color: oklch(0.9392 0.0166 250.8453) !important;
-  color: var(--color-neo-accent) !important;
-}
-
-/* Category badges */
-[class*="FUNCTIONAL"],
-[class*="functional"] {
-  background-color: oklch(0.9392 0.0166 250.8453) !important;
-  color: var(--color-neo-accent) !important;
-}
-
-/* Live/Status indicators - use accent instead of green */
-.text-\[var\(--color-neo-done\)\] {
-  color: var(--color-neo-accent) !important;
-}
-
-/* Override any remaining borders to be thin */
-[class*="border-3"],
-[class*="border-b-3"] {
-  border-width: 1px !important;
-}
-
-/* ===== DARK MODE SPECIFIC FIXES ===== */
-
-.dark .neo-card,
-.dark [class*="neo-card"] {
-  background-color: var(--color-neo-card) !important;
-  border-color: var(--color-neo-border) !important;
-}
-
-.dark .kanban-column {
-  background-color: var(--color-neo-card) !important;
-}
-
-.dark .kanban-header {
-  background-color: var(--color-neo-neutral-50) !important;
-}
-
-/* Feature cards in dark mode */
-.dark .neo-card .neo-card {
-  background-color: var(--color-neo-neutral-50) !important;
-}
-
-/* Badges in dark mode - lighter background for visibility */
-.dark .neo-badge,
-.dark [class*="neo-badge"] {
-  background-color: var(--color-neo-neutral-100) !important;
-  color: var(--color-neo-text) !important;
-  border-color: var(--color-neo-border) !important;
-}
-
-/* Status badges in dark mode */
-.dark [class*="bg-neo-done"],
-.dark .bg-\[var\(--color-neo-done\)\] {
-  background-color: oklch(0.25 0.05 245) !important;
-  color: var(--color-neo-accent) !important;
-}
-
-.dark [class*="bg-neo-progress"],
-.dark .bg-\[var\(--color-neo-progress\)\] {
-  background-color: oklch(0.25 0.05 245) !important;
-  color: var(--color-neo-accent) !important;
-}
-
-/* Green badges in dark mode */
-.dark [class*="bg-green"],
-.dark [class*="bg-emerald"],
-.dark [class*="bg-lime"] {
-  background-color: oklch(0.25 0.05 245) !important;
-  color: var(--color-neo-accent) !important;
-}
-
-/* Category badges in dark mode */
-.dark [class*="FUNCTIONAL"],
-.dark [class*="functional"] {
-  background-color: oklch(0.25 0.05 245) !important;
-  color: var(--color-neo-accent) !important;
-}
-
-/* Buttons in dark mode - better visibility */
-.dark .neo-btn,
-.dark button {
-  border-color: var(--color-neo-border) !important;
-}
-
-.dark .neo-btn-primary,
-.dark .neo-btn-success {
-  background-color: var(--color-neo-accent) !important;
-  border-color: var(--color-neo-accent) !important;
-  color: white !important;
-}
-
-/* Toggle buttons - fix "Graph" visibility */
-.dark [class*="text-neo-text"] {
-  color: var(--color-neo-text) !important;
-}
-
-/* Inputs in dark mode */
-.dark input,
-.dark textarea,
-.dark select {
-  background-color: var(--color-neo-neutral-50) !important;
-  border-color: var(--color-neo-border) !important;
-  color: var(--color-neo-text) !important;
-}
diff --git a/ui/src/styles/globals.css b/ui/src/styles/globals.css
index e5a2e49..58b2fd3 100644
--- a/ui/src/styles/globals.css
+++ b/ui/src/styles/globals.css
@@ -1,218 +1,180 @@
 @import "tailwindcss";
+@import "tw-animate-css";
 
 /* Enable class-based dark mode in Tailwind v4 */
 @custom-variant dark (&:where(.dark, .dark *));
 
 /* ============================================================================
-   Neobrutalism Design System
+   ShadCN Theme - Clean Twitter-Style Design
    ============================================================================ */
 
-@theme {
-  /* -------------------------------------------------------------------------
-     Colors - Primary palette
-     ------------------------------------------------------------------------- */
-  --color-neo-bg: #fffef5;
-  --color-neo-card: #ffffff;
-  --color-neo-pending: #ffd60a;
-  --color-neo-progress: #00b4d8;
-  --color-neo-done: #70e000;
-  --color-neo-accent: #ff006e;
-  --color-neo-danger: #ff5400;
-  --color-neo-border: #1a1a1a;
-  --color-neo-text: #1a1a1a;
-  --color-neo-text-secondary: #4a4a4a;
-  --color-neo-text-muted: #6b6b6b;
+:root {
+  --radius: 0.625rem;
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.145 0 0);
+  --card: oklch(0.9784 0.0011 197.1387);
+  --card-foreground: oklch(0.145 0 0);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.145 0 0);
+  --primary: oklch(0.6723 0.1606 244.9955);
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.97 0 0);
+  --secondary-foreground: oklch(0.205 0 0);
+  --muted: oklch(0.97 0 0);
+  --muted-foreground: oklch(0.556 0 0);
+  --accent: oklch(0.97 0 0);
+  --accent-foreground: oklch(0.205 0 0);
+  --destructive: oklch(0.6188 0.2376 25.7658);
+  --destructive-foreground: oklch(0.985 0 0);
+  --border: oklch(0.9317 0.0118 231.6594);
+  --input: oklch(0.922 0 0);
+  --ring: oklch(0.6723 0.1606 244.9955);
+  --chart-1: oklch(0.646 0.222 41.116);
+  --chart-2: oklch(0.6 0.118 184.704);
+  --chart-3: oklch(0.398 0.07 227.392);
+  --chart-4: oklch(0.828 0.189 84.429);
+  --chart-5: oklch(0.769 0.188 70.08);
+  --sidebar: oklch(0.985 0 0);
+  --sidebar-foreground: oklch(0.145 0 0);
+  --sidebar-primary: oklch(0.6723 0.1606 244.9955);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.97 0 0);
+  --sidebar-accent-foreground: oklch(0.205 0 0);
+  --sidebar-border: oklch(0.922 0 0);
+  --sidebar-ring: oklch(0.708 0 0);
 
-  /* Dark text for bright backgrounds (always dark regardless of theme) */
-  --color-neo-text-on-bright: #1a1a1a;
+  /* Log level colors (kept for Terminal/Debug components) */
+  --color-log-error: #ef4444;
+  --color-log-warning: #f59e0b;
+  --color-log-info: #3b82f6;
+  --color-log-debug: #6b7280;
+  --color-log-success: #22c55e;
 
-  /* -------------------------------------------------------------------------
-     Colors - Neutral scale
-     ------------------------------------------------------------------------- */
-  --color-neo-neutral-50: #fafafa;
-  --color-neo-neutral-100: #f5f5f5;
-  --color-neo-neutral-200: #e5e5e5;
-  --color-neo-neutral-300: #d4d4d4;
-  --color-neo-neutral-400: #a3a3a3;
-  --color-neo-neutral-500: #737373;
-  --color-neo-neutral-600: #525252;
-  --color-neo-neutral-700: #404040;
-  --color-neo-neutral-800: #262626;
-  --color-neo-neutral-900: #171717;
+  /* Status colors for Kanban */
+  --color-status-pending: oklch(0.9392 0.0166 250.8453);
+  --color-status-progress: oklch(0.85 0.08 245);
+  --color-status-done: oklch(0.85 0.08 245);
 
-  /* -------------------------------------------------------------------------
-     Colors - Semantic states
-     ------------------------------------------------------------------------- */
-  --color-neo-error-bg: #fef2f2;
-  --color-neo-error-border: #fecaca;
-  --color-neo-error-text: #dc2626;
-  --color-neo-error: #dc2626;
-  --color-neo-surface: #ffffff;
+  /* Font stacks */
+  --font-sans: 'Open Sans', -apple-system, BlinkMacSystemFont, sans-serif;
+  --font-mono: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
 
-  /* Hover states */
-  --color-neo-hover-subtle: rgba(0, 0, 0, 0.05);
-
-  /* -------------------------------------------------------------------------
-     Colors - Log levels
-     ------------------------------------------------------------------------- */
-  --color-neo-log-error: #ef4444;
-  --color-neo-log-warning: #f59e0b;
-  --color-neo-log-info: #3b82f6;
-  --color-neo-log-debug: #6b7280;
-  --color-neo-log-success: #22c55e;
-
-  /* GLM/Alternative API badge */
-  --color-neo-glm: #8b5cf6;
-
-  /* Additional semantic colors */
-  --color-neo-category-pink: #ff006e;
-  --color-neo-category-cyan: #00b4d8;
-  --color-neo-category-green: #70e000;
-  --color-neo-category-yellow: #ffd60a;
-  --color-neo-category-orange: #ff5400;
-  --color-neo-category-purple: #8338ec;
-  --color-neo-category-blue: #3a86ff;
-
-  /* -------------------------------------------------------------------------
-     Typography - Font stacks with proper fallbacks
-     ------------------------------------------------------------------------- */
-  --font-neo-display: 'Archivo Black', 'Bebas Neue', 'Impact', system-ui, sans-serif;
-  --font-neo-sans: 'Work Sans', 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
-  --font-neo-mono: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
-
-  /* -------------------------------------------------------------------------
-     Shadows - Solid black for light mode
-     ------------------------------------------------------------------------- */
-  --shadow-neo-sm: 2px 2px 0px #1a1a1a;
-  --shadow-neo-md: 4px 4px 0px #1a1a1a;
-  --shadow-neo-lg: 6px 6px 0px #1a1a1a;
-  --shadow-neo-xl: 8px 8px 0px #1a1a1a;
-  --shadow-neo-left: -4px 0px 0px #1a1a1a;
-  --shadow-neo-left-lg: -8px 0px 0px #1a1a1a;
-  --shadow-neo-inset: inset 2px 2px 0 var(--color-neo-border);
-  --shadow-neo-inset-lg: inset 4px 4px 0 var(--color-neo-border);
-
-  /* -------------------------------------------------------------------------
-     Transitions
-     ------------------------------------------------------------------------- */
-  --transition-neo-fast: 0.15s cubic-bezier(0.34, 1.56, 0.64, 1);
-  --transition-neo-normal: 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
-
-  /* Transition timing */
+  /* Transitions */
   --transition-fast: 150ms;
   --transition-normal: 250ms;
-  --transition-slow: 400ms;
-  --transition-slower: 600ms;
-
-  /* Easing functions */
-  --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
   --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
-  --ease-out-back: cubic-bezier(0.34, 1.56, 0.64, 1);
+}
 
-  /* -------------------------------------------------------------------------
-     Spacing scale
-     ------------------------------------------------------------------------- */
-  --space-xs: 0.25rem;
-  --space-sm: 0.5rem;
-  --space-md: 1rem;
-  --space-lg: 1.5rem;
-  --space-xl: 2rem;
-  --space-2xl: 3rem;
+.dark {
+  --background: oklch(0.08 0 0);
+  --foreground: oklch(0.95 0 0);
+  --card: oklch(0.16 0.005 250);
+  --card-foreground: oklch(0.95 0 0);
+  --popover: oklch(0.16 0.005 250);
+  --popover-foreground: oklch(0.95 0 0);
+  --primary: oklch(0.6692 0.1607 245.0110);
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.269 0 0);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.269 0 0);
+  --muted-foreground: oklch(0.708 0 0);
+  --accent: oklch(0.269 0 0);
+  --accent-foreground: oklch(0.985 0 0);
+  --destructive: oklch(0.704 0.191 22.216);
+  --destructive-foreground: oklch(0.985 0 0);
+  --border: oklch(0.30 0 0);
+  --input: oklch(1 0 0 / 15%);
+  --ring: oklch(0.6692 0.1607 245.0110);
+  --chart-1: oklch(0.488 0.243 264.376);
+  --chart-2: oklch(0.696 0.17 162.48);
+  --chart-3: oklch(0.769 0.188 70.08);
+  --chart-4: oklch(0.627 0.265 303.9);
+  --chart-5: oklch(0.645 0.246 16.439);
+  --sidebar: oklch(0.205 0 0);
+  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar-primary: oklch(0.488 0.243 264.376);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.269 0 0);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-border: oklch(1 0 0 / 10%);
+  --sidebar-ring: oklch(0.556 0 0);
 
-  /* -------------------------------------------------------------------------
-     Z-index scale
-     ------------------------------------------------------------------------- */
-  --z-dropdown: 100;
-  --z-sticky: 200;
-  --z-modal-backdrop: 300;
-  --z-modal: 400;
-  --z-tooltip: 500;
-  --z-toast: 600;
+  /* Log level colors for dark mode */
+  --color-log-error: #f87171;
+  --color-log-warning: #fbbf24;
+  --color-log-info: #60a5fa;
+  --color-log-debug: #9ca3af;
+  --color-log-success: #4ade80;
 
-  /* -------------------------------------------------------------------------
-     Border radius tokens
-     ------------------------------------------------------------------------- */
-  --radius-sm: 0.125rem;
-  --radius-md: 0.25rem;
-  --radius-lg: 0.5rem;
-  --radius-full: 9999px;
+  /* Status colors for Kanban - dark mode */
+  --color-status-pending: oklch(0.25 0.02 250);
+  --color-status-progress: oklch(0.25 0.05 245);
+  --color-status-done: oklch(0.25 0.05 245);
+}
+
+/* ShadCN Tailwind v4 Theme Integration */
+@theme inline {
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+  --radius-2xl: calc(var(--radius) + 8px);
+  --radius-3xl: calc(var(--radius) + 12px);
+  --radius-4xl: calc(var(--radius) + 16px);
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-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-destructive-foreground: var(--destructive-foreground);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+  --font-sans: var(--font-sans);
+  --font-mono: var(--font-mono);
 }
 
 /* ============================================================================
-   Base Layer - Foundation styles
+   Base Layer
    ============================================================================ */
 
-/* Dark mode - must be outside @layer to override @theme values */
-.dark {
-  --color-neo-bg: #121212;
-  --color-neo-card: #1e1e1e;
-  --color-neo-pending: #ffca28;
-  --color-neo-progress: #26c6da;
-  --color-neo-done: #66bb6a;
-  --color-neo-accent: #f50057;
-  --color-neo-danger: #ff6e40;
-  --color-neo-border: #e0e0e0;
-  --color-neo-text: #f5f5f5;
-  --color-neo-text-secondary: #b0b0b0;
-  --color-neo-text-muted: #757575;
-
-  /* Dark text for bright backgrounds (unchanged in dark mode) */
-  --color-neo-text-on-bright: #1a1a1a;
-
-  /* Neutral scale for dark mode (inverted) */
-  --color-neo-neutral-50: #171717;
-  --color-neo-neutral-100: #262626;
-  --color-neo-neutral-200: #404040;
-  --color-neo-neutral-300: #525252;
-  --color-neo-neutral-400: #737373;
-  --color-neo-neutral-500: #a3a3a3;
-  --color-neo-neutral-600: #d4d4d4;
-  --color-neo-neutral-700: #e5e5e5;
-  --color-neo-neutral-800: #f5f5f5;
-  --color-neo-neutral-900: #fafafa;
-
-  /* Semantic error states for dark mode */
-  --color-neo-error-bg: rgba(244, 67, 54, 0.15);
-  --color-neo-error-border: rgba(244, 67, 54, 0.4);
-  --color-neo-error-text: #ef5350;
-  --color-neo-error: #ef5350;
-  --color-neo-surface: #1e1e1e;
-
-  /* Hover states */
-  --color-neo-hover-subtle: rgba(255, 255, 255, 0.08);
-
-  /* Log level colors for dark mode - adjusted for dark backgrounds */
-  --color-neo-log-error: #f87171;
-  --color-neo-log-warning: #fbbf24;
-  --color-neo-log-info: #60a5fa;
-  --color-neo-log-debug: #9ca3af;
-  --color-neo-log-success: #4ade80;
-
-  /* GLM/Alternative API badge for dark mode */
-  --color-neo-glm: #a78bfa;
-
-  /* Shadows - lighter for dark mode with subtle glow */
-  --shadow-neo-sm: 2px 2px 0px rgba(224, 224, 224, 0.7);
-  --shadow-neo-md: 4px 4px 0px rgba(224, 224, 224, 0.7);
-  --shadow-neo-lg: 6px 6px 0px rgba(224, 224, 224, 0.7);
-  --shadow-neo-xl: 8px 8px 0px rgba(224, 224, 224, 0.7);
-  --shadow-neo-left: -4px 0px 0px rgba(224, 224, 224, 0.7);
-  --shadow-neo-left-lg: -8px 0px 0px rgba(224, 224, 224, 0.7);
-  --shadow-neo-inset: inset 2px 2px 0 var(--color-neo-border);
-  --shadow-neo-inset-lg: inset 4px 4px 0 var(--color-neo-border);
-}
-
 @layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+
   body {
-    font-family: var(--font-neo-sans);
-    background-color: var(--color-neo-bg);
-    color: var(--color-neo-text);
+    @apply bg-background text-foreground;
+    font-family: var(--font-sans);
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
     text-rendering: optimizeLegibility;
   }
 
-  /* Force form elements to inherit colors properly */
+  /* Form elements inherit colors */
   button,
   input,
   textarea,
@@ -222,420 +184,6 @@
   }
 }
 
-/* ============================================================================
-   Component Layer - Reusable component styles
-   ============================================================================ */
-
-@layer components {
-  /* Cards */
-  .neo-card {
-    background: var(--color-neo-card);
-    border: 3px solid var(--color-neo-border);
-    box-shadow: var(--shadow-neo-md);
-    transition: transform var(--transition-neo-fast), box-shadow var(--transition-neo-fast);
-  }
-
-  .neo-card:hover {
-    transform: translate(-2px, -2px);
-    box-shadow: var(--shadow-neo-lg);
-  }
-
-  /* Card Elevation Variants */
-  .neo-card-elevated {
-    box-shadow: var(--shadow-neo-lg);
-  }
-
-  .neo-card-flat {
-    box-shadow: none;
-    border-width: 2px;
-  }
-
-  .neo-card-sunken {
-    box-shadow: var(--shadow-neo-inset);
-  }
-
-  /* Buttons */
-  .neo-btn {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    gap: 0.5rem;
-    padding: 0.75rem 1.5rem;
-    font-family: var(--font-neo-display);
-    font-weight: 700;
-    font-size: 0.875rem;
-    text-transform: uppercase;
-    letter-spacing: 0.025em;
-    color: var(--color-neo-text);
-    background-color: var(--color-neo-card);
-    border: 3px solid var(--color-neo-border);
-    box-shadow: var(--shadow-neo-md);
-    transition: transform var(--transition-neo-fast), box-shadow var(--transition-neo-fast);
-    cursor: pointer;
-  }
-
-  .neo-btn:hover {
-    transform: translate(-2px, -2px);
-    box-shadow: var(--shadow-neo-lg);
-  }
-
-  .neo-btn:active {
-    transform: translate(2px, 2px);
-    box-shadow: var(--shadow-neo-sm);
-  }
-
-  .neo-btn:disabled {
-    opacity: 0.5;
-    cursor: not-allowed;
-    transform: none !important;
-    box-shadow: var(--shadow-neo-sm) !important;
-  }
-
-  /* Button Size Variants */
-  .neo-btn-sm {
-    padding: 0.375rem 0.75rem;
-    font-size: 0.75rem;
-  }
-
-  .neo-btn-lg {
-    padding: 0.875rem 1.75rem;
-    font-size: 1.125rem;
-  }
-
-  .neo-btn-icon {
-    padding: 0.5rem;
-    aspect-ratio: 1;
-  }
-
-  /* Button Loading State */
-  .neo-btn-loading {
-    position: relative;
-    color: transparent;
-  }
-
-  .neo-btn-loading::after {
-    content: '';
-    position: absolute;
-    inset: 0;
-    margin: auto;
-    width: 1.25rem;
-    height: 1.25rem;
-    border: 2px solid var(--color-neo-border);
-    border-right-color: transparent;
-    border-radius: 50%;
-    animation: spin 0.6s linear infinite;
-  }
-
-  .neo-btn-primary {
-    background-color: #ff006e;
-    color: #ffffff;
-  }
-
-  .neo-btn-success {
-    background-color: #70e000;
-    color: #1a1a1a;
-  }
-
-  .neo-btn-warning {
-    background-color: #ffd60a;
-    color: #1a1a1a;
-  }
-
-  .neo-btn-danger {
-    background-color: #ff5400;
-    color: #ffffff;
-  }
-
-  .neo-btn-ghost {
-    background-color: transparent;
-    color: var(--color-neo-text);
-    box-shadow: none;
-  }
-
-  .neo-btn-ghost:hover {
-    background-color: rgba(128, 128, 128, 0.1);
-    color: var(--color-neo-text);
-    box-shadow: none;
-    transform: none;
-  }
-
-  /* YOLO Mode Button - Animated fire effect for when YOLO mode is enabled */
-  .neo-btn-yolo {
-    position: relative;
-    will-change: transform, filter;
-    background:
-      radial-gradient(ellipse at 20% 80%, rgba(255, 200, 0, 0.4) 0%, transparent 50%),
-      radial-gradient(ellipse at 80% 80%, rgba(255, 150, 0, 0.3) 0%, transparent 50%),
-      radial-gradient(ellipse at 50% 90%, rgba(255, 100, 0, 0.5) 0%, transparent 40%),
-      linear-gradient(
-        0deg,
-        #8b0000 0%,
-        #c43500 20%,
-        #d64500 35%,
-        #ff6a00 55%,
-        #ff8c00 75%,
-        #ffa500 90%,
-        #ffcc00 100%
-      );
-    background-size: 100% 100%, 100% 100%, 100% 100%, 100% 300%;
-    color: #ffffff;
-    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5), 0 0 10px rgba(255, 200, 0, 0.5);
-    animation:
-      fireGlow 0.8s ease-in-out infinite,
-      fireGradient 2s ease-in-out infinite,
-      fireFlicker 0.3s ease-in-out infinite;
-    overflow: visible;
-  }
-
-  .neo-btn-yolo::before {
-    content: '';
-    position: absolute;
-    inset: -2px;
-    background:
-      radial-gradient(circle at 30% 100%, rgba(255, 200, 0, 0.6) 0%, transparent 30%),
-      radial-gradient(circle at 70% 100%, rgba(255, 150, 0, 0.5) 0%, transparent 25%),
-      radial-gradient(circle at 50% 100%, rgba(255, 100, 0, 0.7) 0%, transparent 35%);
-    background-size: 100% 200%;
-    z-index: -1;
-    animation: fireParticles 1.5s ease-in-out infinite;
-    filter: blur(4px);
-    opacity: 0.8;
-  }
-
-  .neo-btn-yolo::after {
-    content: '';
-    position: absolute;
-    top: -4px;
-    left: 10%;
-    right: 10%;
-    height: 8px;
-    background: linear-gradient(90deg,
-      transparent 0%,
-      rgba(255, 220, 0, 0.6) 20%,
-      rgba(255, 255, 200, 0.8) 50%,
-      rgba(255, 220, 0, 0.6) 80%,
-      transparent 100%
-    );
-    filter: blur(3px);
-    animation: fireFlicker 0.4s ease-in-out infinite reverse;
-    opacity: 0.9;
-  }
-
-  .neo-btn-yolo:hover {
-    background:
-      radial-gradient(ellipse at 20% 80%, rgba(255, 220, 0, 0.5) 0%, transparent 50%),
-      radial-gradient(ellipse at 80% 80%, rgba(255, 180, 0, 0.4) 0%, transparent 50%),
-      radial-gradient(ellipse at 50% 90%, rgba(255, 120, 0, 0.6) 0%, transparent 40%),
-      linear-gradient(
-        0deg,
-        #a00000 0%,
-        #d64500 20%,
-        #e65c00 35%,
-        #ff7800 55%,
-        #ff9c00 75%,
-        #ffb700 90%,
-        #ffdd00 100%
-      );
-    background-size: 100% 100%, 100% 100%, 100% 100%, 100% 300%;
-  }
-
-  .neo-btn-yolo:hover::before {
-    opacity: 1;
-    filter: blur(6px);
-  }
-
-  /* Inputs */
-  .neo-input {
-    width: 100%;
-    padding: 0.75rem 1rem;
-    font-family: var(--font-neo-sans);
-    font-size: 1rem;
-    color: var(--color-neo-text);
-    background-color: var(--color-neo-card);
-    border: 3px solid var(--color-neo-border);
-    box-shadow: 3px 3px 0px rgba(128, 128, 128, 0.2);
-    transition: transform var(--transition-neo-fast), box-shadow var(--transition-neo-fast);
-  }
-
-  .neo-input::placeholder {
-    color: var(--color-neo-text-secondary);
-    opacity: 0.7;
-  }
-
-  .neo-input:focus {
-    outline: none;
-    transform: translate(-1px, -1px);
-    box-shadow: var(--shadow-neo-md);
-    border-color: #ff006e;
-  }
-
-  /* Input Variants */
-  .neo-input-error {
-    border-color: var(--color-neo-error);
-    background-color: color-mix(in srgb, var(--color-neo-error) 5%, var(--color-neo-surface));
-  }
-
-  .neo-input:disabled {
-    opacity: 0.6;
-    cursor: not-allowed;
-    background-color: var(--color-neo-neutral-200);
-  }
-
-  .neo-textarea {
-    min-height: 6rem;
-    resize: vertical;
-  }
-
-  /* Badge */
-  .neo-badge {
-    display: inline-flex;
-    align-items: center;
-    padding: 0.25rem 0.75rem;
-    font-family: var(--font-neo-display);
-    font-size: 0.75rem;
-    font-weight: 700;
-    text-transform: uppercase;
-    color: var(--color-neo-text);
-    border: 2px solid var(--color-neo-border);
-  }
-
-  /* Badge Color Variants */
-  .neo-badge-success {
-    background-color: var(--color-neo-done);
-    color: var(--color-neo-text-on-bright);
-  }
-
-  .neo-badge-warning {
-    background-color: var(--color-neo-pending);
-    color: var(--color-neo-text-on-bright);
-  }
-
-  .neo-badge-error {
-    background-color: var(--color-neo-error);
-    color: white;
-  }
-
-  .neo-badge-info {
-    background-color: var(--color-neo-progress);
-    color: var(--color-neo-text-on-bright);
-  }
-
-  /* Badge Size Variants */
-  .neo-badge-sm {
-    padding: 0.125rem 0.375rem;
-    font-size: 0.625rem;
-  }
-
-  .neo-badge-lg {
-    padding: 0.375rem 0.75rem;
-    font-size: 0.875rem;
-  }
-
-  /* Progress Bar */
-  .neo-progress {
-    width: 100%;
-    height: 2rem;
-    background-color: var(--color-neo-card);
-    border: 3px solid var(--color-neo-border);
-    box-shadow: var(--shadow-neo-sm);
-    overflow: hidden;
-  }
-
-  .neo-progress-fill {
-    height: 100%;
-    background-color: var(--color-neo-done);
-    transition: width 0.5s ease-out;
-    position: relative;
-  }
-
-  /* Progress Bar Shimmer Effect */
-  .neo-progress-fill::after {
-    content: '';
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    background: linear-gradient(
-      90deg,
-      transparent 0%,
-      rgba(255,255,255,0.2) 50%,
-      transparent 100%
-    );
-    animation: shimmer 2s infinite;
-  }
-
-  /* Modal */
-  .neo-modal-backdrop {
-    position: fixed;
-    inset: 0;
-    background: rgba(0, 0, 0, 0.6);
-    backdrop-filter: blur(4px);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    z-index: var(--z-modal-backdrop);
-  }
-
-  .neo-modal {
-    background-color: var(--color-neo-card);
-    border: 4px solid var(--color-neo-border);
-    box-shadow: var(--shadow-neo-xl);
-    animation: popIn 0.3s var(--transition-neo-fast);
-    max-width: 90vw;
-    max-height: 90vh;
-    overflow: auto;
-    z-index: var(--z-modal);
-  }
-
-  /* Dropdown */
-  .neo-dropdown {
-    background-color: var(--color-neo-card);
-    border: 3px solid var(--color-neo-border);
-    box-shadow: var(--shadow-neo-lg);
-    z-index: var(--z-dropdown);
-  }
-
-  .neo-dropdown-item {
-    display: block;
-    width: 100%;
-    padding: 0.75rem 1rem;
-    cursor: pointer;
-    color: var(--color-neo-text);
-    background-color: transparent;
-    text-align: left;
-    border: none;
-    font-size: 0.875rem;
-    transition: background-color var(--transition-neo-fast);
-  }
-
-  .neo-dropdown-item:hover {
-    background-color: var(--color-neo-pending);
-    color: #1a1a1a;
-  }
-
-  /* Tooltip - Neobrutalism style with light bg and dark text */
-  .neo-tooltip {
-    background: var(--color-neo-surface);
-    color: var(--color-neo-text);
-    border: 2px solid var(--color-neo-border);
-    box-shadow: var(--shadow-neo-sm);
-    padding: 0.5rem 0.75rem;
-    font-size: 0.75rem;
-    font-weight: 700;
-    text-transform: uppercase;
-    z-index: var(--z-tooltip);
-  }
-
-  /* Empty State */
-  .neo-empty-state {
-    background-color: var(--color-neo-bg);
-    border: 4px dashed var(--color-neo-border);
-    padding: 2rem;
-    text-align: center;
-  }
-}
-
 /* ============================================================================
    Animations
    ============================================================================ */
@@ -643,7 +191,7 @@
 @keyframes popIn {
   from {
     opacity: 0;
-    transform: scale(0.9);
+    transform: scale(0.95);
   }
   to {
     opacity: 1;
@@ -654,7 +202,7 @@
 @keyframes slideIn {
   from {
     opacity: 0;
-    transform: translateX(-20px);
+    transform: translateX(-10px);
   }
   to {
     opacity: 1;
@@ -662,37 +210,34 @@
   }
 }
 
-@keyframes neoPulse {
-  0%, 100% {
-    box-shadow: 6px 6px 0px rgba(0, 180, 216, 0.3);
-  }
-  50% {
-    box-shadow: 6px 6px 0px rgba(0, 180, 216, 0.8);
-  }
-}
-
-@keyframes completePop {
-  0% {
-    transform: scale(0.8);
-  }
-  60% {
-    transform: scale(1.15);
-  }
-  100% {
-    transform: scale(1);
-  }
-}
-
-@keyframes thoughtFade {
-  0% {
+@keyframes slideInUp {
+  from {
     opacity: 0;
-    transform: translateY(-4px);
-    filter: blur(2px);
+    transform: translateY(10px);
   }
-  100% {
+  to {
     opacity: 1;
     transform: translateY(0);
-    filter: blur(0);
+  }
+}
+
+@keyframes slideInDown {
+  from {
+    opacity: 0;
+    transform: translateY(-10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
   }
 }
 
@@ -705,162 +250,6 @@
   }
 }
 
-@keyframes fireGlow {
-  0%, 100% {
-    box-shadow:
-      4px 4px 0 var(--color-neo-border),
-      0 0 10px rgba(255, 100, 0, 0.6),
-      0 0 20px rgba(255, 60, 0, 0.4),
-      0 -5px 15px rgba(255, 200, 0, 0.3),
-      inset 0 -2px 8px rgba(255, 200, 0, 0.2);
-  }
-  25% {
-    box-shadow:
-      4px 4px 0 var(--color-neo-border),
-      0 0 18px rgba(255, 80, 0, 0.7),
-      0 0 35px rgba(255, 40, 0, 0.5),
-      0 -8px 20px rgba(255, 180, 0, 0.4),
-      inset 0 -3px 12px rgba(255, 180, 0, 0.25);
-  }
-  50% {
-    box-shadow:
-      4px 4px 0 var(--color-neo-border),
-      0 0 14px rgba(255, 120, 0, 0.8),
-      0 0 28px rgba(255, 50, 0, 0.6),
-      0 -6px 18px rgba(255, 220, 0, 0.35),
-      inset 0 -2px 10px rgba(255, 220, 0, 0.3);
-  }
-  75% {
-    box-shadow:
-      4px 4px 0 var(--color-neo-border),
-      0 0 22px rgba(255, 70, 0, 0.65),
-      0 0 40px rgba(255, 30, 0, 0.45),
-      0 -10px 25px rgba(255, 160, 0, 0.45),
-      inset 0 -4px 14px rgba(255, 160, 0, 0.2);
-  }
-}
-
-@keyframes fireGradient {
-  0% {
-    background-position: 0% 100%;
-  }
-  25% {
-    background-position: 50% 50%;
-  }
-  50% {
-    background-position: 100% 0%;
-  }
-  75% {
-    background-position: 50% 50%;
-  }
-  100% {
-    background-position: 0% 100%;
-  }
-}
-
-@keyframes fireFlicker {
-  0%, 100% {
-    filter: brightness(1) saturate(1);
-  }
-  25% {
-    filter: brightness(1.1) saturate(1.2);
-  }
-  50% {
-    filter: brightness(0.95) saturate(1.1);
-  }
-  75% {
-    filter: brightness(1.15) saturate(1.15);
-  }
-}
-
-@keyframes fireParticles {
-  0% {
-    background-position: 0% 100%, 50% 100%, 100% 100%;
-  }
-  50% {
-    background-position: 25% 0%, 50% 25%, 75% 0%;
-  }
-  100% {
-    background-position: 0% 100%, 50% 100%, 100% 100%;
-  }
-}
-
-@keyframes slide-in-top {
-  from {
-    opacity: 0;
-    transform: translateY(-20px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-@keyframes slide-in-bottom {
-  from {
-    opacity: 0;
-    transform: translateY(20px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-@keyframes slide-in-left {
-  from {
-    opacity: 0;
-    transform: translateX(-20px);
-  }
-  to {
-    opacity: 1;
-    transform: translateX(0);
-  }
-}
-
-@keyframes bounce-in {
-  0% {
-    opacity: 0;
-    transform: scale(0.3);
-  }
-  50% {
-    transform: scale(1.05);
-  }
-  70% {
-    transform: scale(0.9);
-  }
-  100% {
-    opacity: 1;
-    transform: scale(1);
-  }
-}
-
-@keyframes shake {
-  0%, 100% {
-    transform: translateX(0);
-  }
-  10%, 30%, 50%, 70%, 90% {
-    transform: translateX(-4px);
-  }
-  20%, 40%, 60%, 80% {
-    transform: translateX(4px);
-  }
-}
-
-@keyframes scale-pop {
-  0% {
-    transform: scale(0.95);
-    opacity: 0;
-  }
-  40% {
-    transform: scale(1.02);
-  }
-  100% {
-    transform: scale(1);
-    opacity: 1;
-  }
-}
-
 @keyframes spin {
   from {
     transform: rotate(0deg);
@@ -870,11 +259,16 @@
   }
 }
 
-/* ============================================================================
-   Agent Mascot Animations
-   ============================================================================ */
+@keyframes pulse {
+  0%, 100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.5;
+  }
+}
 
-@keyframes bounce-gentle {
+@keyframes bounce {
   0%, 100% {
     transform: translateY(0);
   }
@@ -883,6 +277,7 @@
   }
 }
 
+/* Agent mascot animations */
 @keyframes thinking {
   0%, 100% {
     transform: translateY(0) scale(1);
@@ -937,7 +332,7 @@
   }
 }
 
-@keyframes shake-gentle {
+@keyframes shake {
   0%, 100% {
     transform: translateX(0);
   }
@@ -960,10 +355,7 @@
   }
 }
 
-/* ============================================================================
-   Orchestrator (Maestro) Animations
-   ============================================================================ */
-
+/* Orchestrator (Maestro) animations */
 @keyframes conducting {
   0%, 100% {
     transform: rotate(-10deg);
@@ -979,7 +371,7 @@
   }
 }
 
-@keyframes baton-tap {
+@keyframes batonTap {
   0%, 100% {
     transform: translateY(0) rotate(0deg);
   }
@@ -994,66 +386,39 @@
   }
 }
 
-@keyframes maestro-idle {
-  0%, 100% {
-    transform: translateY(0);
-  }
-  50% {
-    transform: translateY(-2px);
-  }
-}
-
-@keyframes maestro-complete {
-  0% {
-    transform: scale(1) rotate(0deg);
-  }
-  25% {
-    transform: scale(1.05) rotate(-3deg);
-  }
-  50% {
-    transform: scale(1.1) rotate(0deg);
-  }
-  75% {
-    transform: scale(1.05) rotate(3deg);
-  }
-  100% {
-    transform: scale(1) rotate(0deg);
-  }
-}
-
 /* ============================================================================
-   Utilities Layer
+   Utility Classes
    ============================================================================ */
 
 @layer utilities {
-  .animate-slide-in {
-    animation: slideIn 0.3s ease-out;
-  }
-
   .animate-pop-in {
-    animation: popIn 0.3s var(--transition-neo-fast);
+    animation: popIn 0.2s ease-out;
   }
 
-  .animate-pulse-neo {
-    animation: neoPulse 2s infinite;
+  .animate-slide-in {
+    animation: slideIn 0.2s ease-out;
   }
 
-  .animate-complete {
-    animation: completePop 0.5s var(--transition-neo-fast);
+  .animate-slide-in-up {
+    animation: slideInUp 0.2s ease-out;
   }
 
-  .animate-thought-fade {
-    animation: thoughtFade 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
+  .animate-slide-in-down {
+    animation: slideInDown 0.2s ease-out;
+  }
+
+  .animate-fade-in {
+    animation: fadeIn 0.2s ease-out;
   }
 
   .animate-shimmer {
     background: linear-gradient(
       90deg,
-      var(--color-neo-text) 0%,
-      var(--color-neo-text) 40%,
-      var(--color-neo-progress) 50%,
-      var(--color-neo-text) 60%,
-      var(--color-neo-text) 100%
+      var(--foreground) 0%,
+      var(--foreground) 40%,
+      var(--primary) 50%,
+      var(--foreground) 60%,
+      var(--foreground) 100%
     );
     background-size: 200% 100%;
     background-clip: text;
@@ -1062,71 +427,19 @@
     animation: shimmer 2s ease-in-out infinite;
   }
 
-  /* Slide animations */
-  .animate-slide-in-top {
-    animation: slide-in-top var(--transition-normal) var(--ease-out-back);
+  .animate-spin {
+    animation: spin 1s linear infinite;
   }
 
-  .animate-slide-in-bottom {
-    animation: slide-in-bottom var(--transition-normal) var(--ease-out-back);
+  .animate-pulse {
+    animation: pulse 2s ease-in-out infinite;
   }
 
-  .animate-slide-in-left {
-    animation: slide-in-left var(--transition-normal) var(--ease-out-back);
-  }
-
-  /* Bounce and pop animations */
-  .animate-bounce-in {
-    animation: bounce-in var(--transition-slow) var(--ease-bounce);
-  }
-
-  .animate-scale-pop {
-    animation: scale-pop var(--transition-normal) var(--ease-out-back);
-  }
-
-  /* Error shake animation */
-  .animate-shake {
-    animation: shake 0.5s ease-in-out;
-  }
-
-  /* Stagger delay utilities for sequential animations */
-  .stagger-1 {
-    animation-delay: 50ms;
-  }
-
-  .stagger-2 {
-    animation-delay: 100ms;
-  }
-
-  .stagger-3 {
-    animation-delay: 150ms;
-  }
-
-  .stagger-4 {
-    animation-delay: 200ms;
-  }
-
-  .stagger-5 {
-    animation-delay: 250ms;
-  }
-
-  .font-display {
-    font-family: var(--font-neo-display);
-  }
-
-  .font-sans {
-    font-family: var(--font-neo-sans);
-  }
-
-  .font-mono {
-    font-family: var(--font-neo-mono);
+  .animate-bounce {
+    animation: bounce 2s ease-in-out infinite;
   }
 
   /* Agent mascot animation utilities */
-  .animate-bounce-gentle {
-    animation: bounce-gentle 2s ease-in-out infinite;
-  }
-
   .animate-thinking {
     animation: thinking 1.5s ease-in-out infinite;
   }
@@ -1143,8 +456,8 @@
     animation: celebrate 0.6s ease-in-out;
   }
 
-  .animate-shake-gentle {
-    animation: shake-gentle 0.5s ease-in-out infinite;
+  .animate-shake {
+    animation: shake 0.5s ease-in-out infinite;
   }
 
   .animate-confetti {
@@ -1157,37 +470,52 @@
   }
 
   .animate-baton-tap {
-    animation: baton-tap 0.6s ease-in-out infinite;
+    animation: batonTap 0.6s ease-in-out infinite;
   }
 
   .animate-maestro-idle {
-    animation: maestro-idle 2s ease-in-out infinite;
+    animation: bounce 2s ease-in-out infinite;
   }
 
   .animate-maestro-complete {
-    animation: maestro-complete 0.8s ease-in-out;
+    animation: celebrate 0.8s ease-in-out;
+  }
+
+  /* Stagger delays for sequential animations */
+  .stagger-1 { animation-delay: 50ms; }
+  .stagger-2 { animation-delay: 100ms; }
+  .stagger-3 { animation-delay: 150ms; }
+  .stagger-4 { animation-delay: 200ms; }
+  .stagger-5 { animation-delay: 250ms; }
+
+  /* Font utilities */
+  .font-sans {
+    font-family: var(--font-sans);
+  }
+
+  .font-mono {
+    font-family: var(--font-mono);
   }
 }
 
 /* ============================================================================
-   Scrollbar Styling (outside layers for broad compatibility)
+   Scrollbar Styling
    ============================================================================ */
 
 ::-webkit-scrollbar {
-  width: 12px;
-  height: 12px;
+  width: 8px;
+  height: 8px;
 }
 
 ::-webkit-scrollbar-track {
-  background: var(--color-neo-bg);
-  border: 2px solid var(--color-neo-border);
+  background: transparent;
 }
 
 ::-webkit-scrollbar-thumb {
-  background: var(--color-neo-border);
-  border: 2px solid var(--color-neo-border);
+  background: var(--border);
+  border-radius: var(--radius);
 }
 
 ::-webkit-scrollbar-thumb:hover {
-  background: var(--color-neo-text-secondary);
+  background: var(--muted-foreground);
 }
diff --git a/ui/tsconfig.app.json b/ui/tsconfig.app.json
new file mode 100644
index 0000000..125bb09
--- /dev/null
+++ b/ui/tsconfig.app.json
@@ -0,0 +1,30 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+
+    /* Paths */
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "include": ["src"]
+}
diff --git a/ui/tsconfig.json b/ui/tsconfig.json
index 125bb09..1e17393 100644
--- a/ui/tsconfig.json
+++ b/ui/tsconfig.json
@@ -1,30 +1,17 @@
 {
+  "files": [],
+  "references": [
+    {
+      "path": "./tsconfig.app.json"
+    },
+    {
+      "path": "./tsconfig.node.json"
+    }
+  ],
   "compilerOptions": {
-    "target": "ES2020",
-    "useDefineForClassFields": true,
-    "lib": ["ES2020", "DOM", "DOM.Iterable"],
-    "module": "ESNext",
-    "skipLibCheck": true,
-
-    /* Bundler mode */
-    "moduleResolution": "bundler",
-    "allowImportingTsExtensions": true,
-    "isolatedModules": true,
-    "moduleDetection": "force",
-    "noEmit": true,
-    "jsx": "react-jsx",
-
-    /* Linting */
-    "strict": true,
-    "noUnusedLocals": true,
-    "noUnusedParameters": true,
-    "noFallthroughCasesInSwitch": true,
-
-    /* Paths */
     "baseUrl": ".",
     "paths": {
       "@/*": ["./src/*"]
     }
-  },
-  "include": ["src"]
+  }
 }