From 6f3bf2f6b66f8437854a20c14847ff1a114f633c Mon Sep 17 00:00:00 2001
From: Cody Seibert <webdevcody@gmail.com>
Date: Tue, 9 Dec 2025 18:51:06 -0500
Subject: [PATCH] feat: add new themes and improve UI components

- Introduced multiple new themes: retro, dracula, nord, monokai, tokyonight, solarized, gruvbox, catppuccin, onedark, and synthwave.
- Updated global CSS to support new themes and added custom variants for theme-specific styles.
- Enhanced layout and sidebar components with improved styling and responsiveness.
- Refactored button and slider components for better visual consistency and added an animated outline variant.
- Improved various views (e.g., settings, welcome, context) with updated styles and better user experience.

This update enhances the overall aesthetic and usability of the application, providing users with more customization options.
---
 .automaker/context/gemini.md                  |   70 +
 app/src/app/globals.css                       | 1129 ++++++++++++++++-
 app/src/app/layout.tsx                        |    2 +-
 app/src/app/page.tsx                          |   41 +-
 app/src/components/layout/sidebar.tsx         |   58 +-
 app/src/components/ui/button.tsx              |   55 +-
 app/src/components/ui/slider.tsx              |    6 +-
 app/src/components/views/agent-tools-view.tsx |    2 +-
 app/src/components/views/agent-view.tsx       |    7 +-
 app/src/components/views/auto-mode-log.tsx    |   31 +-
 app/src/components/views/board-view.tsx       |  589 +++++----
 app/src/components/views/context-view.tsx     |   62 +-
 app/src/components/views/interview-view.tsx   |    4 +-
 app/src/components/views/kanban-card.tsx      |   10 +-
 app/src/components/views/kanban-column.tsx    |    6 +-
 app/src/components/views/settings-view.tsx    |  309 ++++-
 app/src/components/views/spec-view.tsx        |   11 +-
 app/src/components/views/welcome-view.tsx     |  225 ++--
 app/src/store/app-store.ts                    |   95 +-
 19 files changed, 2212 insertions(+), 500 deletions(-)
 create mode 100644 .automaker/context/gemini.md

diff --git a/.automaker/context/gemini.md b/.automaker/context/gemini.md
new file mode 100644
index 00000000..4ef2912a
--- /dev/null
+++ b/.automaker/context/gemini.md
@@ -0,0 +1,70 @@
+You are a very strong reasoner and planner. Use these critical instructions to structure your plans, thoughts, and responses.
+
+Before taking any action (either tool calls or responses to the user), you must proactively, methodically, and independently plan and reason about:
+
+1. Logical dependencies and constraints:
+
+Analyze the intended action against the following factors. Resolve conflicts in order of importance:
+
+1.1) Policy-based rules, mandatory prerequisites, and constraints.
+1.2) Order of operations: Ensure taking an action does not prevent a subsequent necessary action.
+ 1.2.1) The user may request actions in a random order, but you may need to reorder operations to maximize successful completion of the task.
+1.3) Other prerequisites (information and/or actions needed).
+1.4) Explicit user constraints or preferences.
+
+2. Risk assessment:
+
+What are the consequences of taking the action? Will the new state cause any future issues?
+
+2.1) For exploratory tasks (like searches), missing optional parameters is a LOW risk.
+Prefer calling the tool with the available information over asking the user, unless your Rule 1 (Logical Dependencies) reasoning determines that optional information is required for a later step in your plan.
+
+3. Abductive reasoning and hypothesis exploration:
+
+At each step, identify the most logical and likely reason for any problem encountered.
+
+3.1) Look beyond immediate or obvious causes. The most likely reason may not be the simplest and may require deeper inference.
+3.2) Hypotheses may require additional research. Each hypothesis may take multiple steps to test.
+3.3) Prioritize hypotheses based on likelihood, but do not discard less likely ones prematurely. A low-probability event may still be the root cause.
+
+4. Outcome evaluation and adaptability:
+
+Does the previous observation require any changes to your plan?
+
+4.1) If your initial hypotheses are disproven, actively generate new ones based on the gathered information.
+
+5. Information availability:
+
+Incorporate all applicable and alternative sources of information, including:
+
+5.1) Using available tools and their capabilities
+5.2) All policies, rules, checklists, and constraints
+5.3) Previous observations and conversation history
+5.4) Information only available by asking the user
+
+6. Precision and Grounding:
+
+Ensure your reasoning is extremely precise and relevant to each exact ongoing situation.
+
+6.1) Verify your claims by quoting the exact applicable information (including policies) when referring to them.
+
+7. Completeness:
+
+Ensure that all requirements, constraints, options, and preferences are exhaustively incorporated into your plan.
+
+7.1) Resolve conflicts using the order of importance in #1.
+7.2) Avoid premature conclusions: There may be multiple relevant options for a given situation.
+ 7.2.1) To check for whether an option is relevant, reason about all information sources from #5.
+ 7.2.2) You may need to consult the user to even know whether something is applicable. Do not assume it is not applicable without checking.
+7.3) Review applicable sources of information from #5 to confirm which are relevant to the current state.
+
+8. Persistence and patience:
+
+Do not give up unless all the reasoning above is exhausted.
+
+8.1) Don't be dissuaded by time taken or user frustration.
+8.2) This persistence must be intelligent: On transient errors (e.g. please try again), you must retry unless an explicit retry limit (e.g., max x tries) has been reached. If such a limit is hit, you must stop. On other errors, you must change your strategy or arguments, not repeat the same failed call.
+
+9. Inhibit your response:
+
+Only take an action after all the above reasoning is completed. Once you've taken an action, you cannot take it back.
diff --git a/app/src/app/globals.css b/app/src/app/globals.css
index 83a7a25a..af2f97c0 100644
--- a/app/src/app/globals.css
+++ b/app/src/app/globals.css
@@ -2,6 +2,16 @@
 @import "tw-animate-css";
 
 @custom-variant dark (&:is(.dark *));
+@custom-variant retro (&:is(.retro *));
+@custom-variant dracula (&:is(.dracula *));
+@custom-variant nord (&:is(.nord *));
+@custom-variant monokai (&:is(.monokai *));
+@custom-variant tokyonight (&:is(.tokyonight *));
+@custom-variant solarized (&:is(.solarized *));
+@custom-variant gruvbox (&:is(.gruvbox *));
+@custom-variant catppuccin (&:is(.catppuccin *));
+@custom-variant onedark (&:is(.onedark *));
+@custom-variant synthwave (&:is(.synthwave *));
 
 @theme inline {
   --color-background: var(--background);
@@ -62,6 +72,7 @@
 }
 
 :root {
+  /* Default to light mode */
   --radius: 0.625rem;
   --background: oklch(1 0 0);
   --foreground: oklch(0.145 0 0);
@@ -94,6 +105,57 @@
   --sidebar-accent-foreground: oklch(0.205 0 0);
   --sidebar-border: oklch(0.922 0 0);
   --sidebar-ring: oklch(0.708 0 0);
+  --background-50: oklch(1 0 0 / 0.5);
+  --background-80: oklch(1 0 0 / 0.8);
+  --foreground-secondary: oklch(0.4 0 0);
+  --foreground-muted: oklch(0.556 0 0);
+  --border-glass: oklch(0.145 0 0 / 0.1);
+  --brand-400: oklch(0.6 0.22 265);
+  --brand-500: oklch(0.55 0.25 265);
+  --brand-600: oklch(0.5 0.28 270);
+}
+
+.light {
+  /* Explicit light mode - same as root but ensures it overrides any dark defaults */
+  --background: oklch(1 0 0); /* White */
+  --background-50: oklch(1 0 0 / 0.5);
+  --background-80: oklch(1 0 0 / 0.8);
+  --foreground: oklch(0.145 0 0); /* Dark text */
+  --foreground-secondary: oklch(0.4 0 0);
+  --foreground-muted: oklch(0.556 0 0);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.145 0 0);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.145 0 0);
+  --primary: oklch(0.55 0.25 265);
+  --primary-foreground: oklch(1 0 0);
+  --brand-400: oklch(0.6 0.22 265);
+  --brand-500: oklch(0.55 0.25 265);
+  --brand-600: oklch(0.5 0.28 270);
+  --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.95 0 0);
+  --accent-foreground: oklch(0.205 0 0);
+  --destructive: oklch(0.577 0.245 27.325);
+  --border: oklch(0.922 0 0);
+  --border-glass: oklch(0.145 0 0 / 0.1);
+  --input: oklch(1 0 0);
+  --ring: oklch(0.55 0.25 265);
+  --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.98 0 0);
+  --sidebar-foreground: oklch(0.145 0 0);
+  --sidebar-primary: oklch(0.55 0.25 265);
+  --sidebar-primary-foreground: oklch(1 0 0);
+  --sidebar-accent: oklch(0.95 0 0);
+  --sidebar-accent-foreground: oklch(0.205 0 0);
+  --sidebar-border: oklch(0.9 0 0);
+  --sidebar-ring: oklch(0.55 0.25 265);
 }
 
 .dark {
@@ -153,34 +215,634 @@
   --sidebar-ring: oklch(0.55 0.25 265);
 }
 
+.retro {
+  /* Retro / Cyberpunk Theme */
+  --background: oklch(0 0 0); /* Pure Black */
+  --background-50: oklch(0 0 0 / 0.5);
+  --background-80: oklch(0 0 0 / 0.8);
+
+  /* Neon Green Text */
+  --foreground: oklch(0.85 0.25 145); /* Neon Green */
+  --foreground-secondary: oklch(0.7 0.2 145);
+  --foreground-muted: oklch(0.5 0.15 145);
+
+  /* Hard Edges */
+  --radius: 0px;
+
+  /* UI Elements */
+  --card: oklch(0 0 0); /* Black card */
+  --card-foreground: oklch(0.85 0.25 145);
+  --popover: oklch(0.05 0.05 145);
+  --popover-foreground: oklch(0.85 0.25 145);
+
+  --primary: oklch(0.85 0.25 145); /* Neon Green */
+  --primary-foreground: oklch(0 0 0); /* Black text on green */
+
+  --brand-400: oklch(0.85 0.25 145);
+  --brand-500: oklch(0.85 0.25 145);
+  --brand-600: oklch(0.75 0.25 145);
+
+  --secondary: oklch(0.1 0.1 145); /* Dark Green bg */
+  --secondary-foreground: oklch(0.85 0.25 145);
+
+  --muted: oklch(0.1 0.05 145);
+  --muted-foreground: oklch(0.5 0.15 145);
+
+  --accent: oklch(0.2 0.2 145); /* Brighter green accent */
+  --accent-foreground: oklch(0.85 0.25 145);
+
+  --destructive: oklch(0.6 0.25 25); /* Keep red for destructive */
+
+  --border: oklch(0.3 0.15 145); /* Visible Green Border */
+  --border-glass: oklch(0.85 0.25 145 / 0.3);
+
+  --input: oklch(0.1 0.1 145);
+  --ring: oklch(0.85 0.25 145);
+
+  /* Charts - various neons */
+  --chart-1: oklch(0.85 0.25 145); /* Green */
+  --chart-2: oklch(0.8 0.25 300); /* Purple Neon */
+  --chart-3: oklch(0.8 0.25 200); /* Cyan Neon */
+  --chart-4: oklch(0.8 0.25 60); /* Yellow Neon */
+  --chart-5: oklch(0.8 0.25 20); /* Red Neon */
+
+  /* Sidebar */
+  --sidebar: oklch(0 0 0);
+  --sidebar-foreground: oklch(0.85 0.25 145);
+  --sidebar-primary: oklch(0.85 0.25 145);
+  --sidebar-primary-foreground: oklch(0 0 0);
+  --sidebar-accent: oklch(0.1 0.1 145);
+  --sidebar-accent-foreground: oklch(0.85 0.25 145);
+  --sidebar-border: oklch(0.3 0.15 145);
+  --sidebar-ring: oklch(0.85 0.25 145);
+
+  /* Fonts */
+  --font-sans: var(--font-geist-mono); /* Force Mono everywhere */
+}
+
+/* ========================================
+   DRACULA THEME
+   Inspired by the popular Dracula VS Code theme
+   ======================================== */
+.dracula {
+  --background: oklch(0.18 0.02 280); /* #282a36 */
+  --background-50: oklch(0.18 0.02 280 / 0.5);
+  --background-80: oklch(0.18 0.02 280 / 0.8);
+
+  --foreground: oklch(0.95 0.01 280); /* #f8f8f2 */
+  --foreground-secondary: oklch(0.7 0.05 280);
+  --foreground-muted: oklch(0.55 0.08 280); /* #6272a4 */
+
+  --card: oklch(0.22 0.02 280); /* #44475a */
+  --card-foreground: oklch(0.95 0.01 280);
+  --popover: oklch(0.2 0.02 280);
+  --popover-foreground: oklch(0.95 0.01 280);
+
+  --primary: oklch(0.7 0.2 320); /* #bd93f9 purple */
+  --primary-foreground: oklch(0.18 0.02 280);
+
+  --brand-400: oklch(0.75 0.2 320);
+  --brand-500: oklch(0.7 0.2 320); /* #bd93f9 */
+  --brand-600: oklch(0.65 0.22 320);
+
+  --secondary: oklch(0.28 0.03 280); /* #44475a */
+  --secondary-foreground: oklch(0.95 0.01 280);
+
+  --muted: oklch(0.28 0.03 280);
+  --muted-foreground: oklch(0.55 0.08 280); /* #6272a4 */
+
+  --accent: oklch(0.32 0.04 280);
+  --accent-foreground: oklch(0.95 0.01 280);
+
+  --destructive: oklch(0.65 0.25 15); /* #ff5555 */
+
+  --border: oklch(0.35 0.05 280);
+  --border-glass: oklch(0.7 0.2 320 / 0.3);
+
+  --input: oklch(0.22 0.02 280);
+  --ring: oklch(0.7 0.2 320);
+
+  --chart-1: oklch(0.7 0.2 320); /* Purple */
+  --chart-2: oklch(0.75 0.2 180); /* Cyan #8be9fd */
+  --chart-3: oklch(0.8 0.2 130); /* Green #50fa7b */
+  --chart-4: oklch(0.7 0.25 350); /* Pink #ff79c6 */
+  --chart-5: oklch(0.85 0.2 90); /* Yellow #f1fa8c */
+
+  --sidebar: oklch(0.16 0.02 280);
+  --sidebar-foreground: oklch(0.95 0.01 280);
+  --sidebar-primary: oklch(0.7 0.2 320);
+  --sidebar-primary-foreground: oklch(0.18 0.02 280);
+  --sidebar-accent: oklch(0.28 0.03 280);
+  --sidebar-accent-foreground: oklch(0.95 0.01 280);
+  --sidebar-border: oklch(0.35 0.05 280);
+  --sidebar-ring: oklch(0.7 0.2 320);
+}
+
+/* ========================================
+   NORD THEME
+   Inspired by the Arctic, north-bluish color palette
+   ======================================== */
+.nord {
+  --background: oklch(0.23 0.02 240); /* #2e3440 */
+  --background-50: oklch(0.23 0.02 240 / 0.5);
+  --background-80: oklch(0.23 0.02 240 / 0.8);
+
+  --foreground: oklch(0.9 0.01 230); /* #eceff4 */
+  --foreground-secondary: oklch(0.75 0.02 230); /* #d8dee9 */
+  --foreground-muted: oklch(0.6 0.03 230); /* #4c566a */
+
+  --card: oklch(0.27 0.02 240); /* #3b4252 */
+  --card-foreground: oklch(0.9 0.01 230);
+  --popover: oklch(0.25 0.02 240);
+  --popover-foreground: oklch(0.9 0.01 230);
+
+  --primary: oklch(0.7 0.12 220); /* #88c0d0 frost */
+  --primary-foreground: oklch(0.23 0.02 240);
+
+  --brand-400: oklch(0.75 0.12 220);
+  --brand-500: oklch(0.7 0.12 220); /* #88c0d0 */
+  --brand-600: oklch(0.65 0.14 220); /* #81a1c1 */
+
+  --secondary: oklch(0.31 0.02 240); /* #434c5e */
+  --secondary-foreground: oklch(0.9 0.01 230);
+
+  --muted: oklch(0.31 0.02 240);
+  --muted-foreground: oklch(0.55 0.03 230);
+
+  --accent: oklch(0.35 0.03 240); /* #4c566a */
+  --accent-foreground: oklch(0.9 0.01 230);
+
+  --destructive: oklch(0.65 0.2 15); /* #bf616a */
+
+  --border: oklch(0.35 0.03 240);
+  --border-glass: oklch(0.7 0.12 220 / 0.3);
+
+  --input: oklch(0.27 0.02 240);
+  --ring: oklch(0.7 0.12 220);
+
+  --chart-1: oklch(0.7 0.12 220); /* Frost blue */
+  --chart-2: oklch(0.65 0.14 220); /* #81a1c1 */
+  --chart-3: oklch(0.7 0.15 140); /* #a3be8c green */
+  --chart-4: oklch(0.7 0.2 320); /* #b48ead purple */
+  --chart-5: oklch(0.75 0.15 70); /* #ebcb8b yellow */
+
+  --sidebar: oklch(0.21 0.02 240);
+  --sidebar-foreground: oklch(0.9 0.01 230);
+  --sidebar-primary: oklch(0.7 0.12 220);
+  --sidebar-primary-foreground: oklch(0.23 0.02 240);
+  --sidebar-accent: oklch(0.31 0.02 240);
+  --sidebar-accent-foreground: oklch(0.9 0.01 230);
+  --sidebar-border: oklch(0.35 0.03 240);
+  --sidebar-ring: oklch(0.7 0.12 220);
+}
+
+/* ========================================
+   MONOKAI THEME
+   The classic Monokai color scheme
+   ======================================== */
+.monokai {
+  --background: oklch(0.17 0.01 90); /* #272822 */
+  --background-50: oklch(0.17 0.01 90 / 0.5);
+  --background-80: oklch(0.17 0.01 90 / 0.8);
+
+  --foreground: oklch(0.95 0.02 100); /* #f8f8f2 */
+  --foreground-secondary: oklch(0.8 0.02 100);
+  --foreground-muted: oklch(0.55 0.04 100); /* #75715e */
+
+  --card: oklch(0.22 0.01 90); /* #3e3d32 */
+  --card-foreground: oklch(0.95 0.02 100);
+  --popover: oklch(0.2 0.01 90);
+  --popover-foreground: oklch(0.95 0.02 100);
+
+  --primary: oklch(0.8 0.2 350); /* #f92672 pink */
+  --primary-foreground: oklch(0.17 0.01 90);
+
+  --brand-400: oklch(0.85 0.2 350);
+  --brand-500: oklch(0.8 0.2 350); /* #f92672 */
+  --brand-600: oklch(0.75 0.22 350);
+
+  --secondary: oklch(0.25 0.02 90);
+  --secondary-foreground: oklch(0.95 0.02 100);
+
+  --muted: oklch(0.25 0.02 90);
+  --muted-foreground: oklch(0.55 0.04 100);
+
+  --accent: oklch(0.3 0.02 90);
+  --accent-foreground: oklch(0.95 0.02 100);
+
+  --destructive: oklch(0.65 0.25 15); /* red */
+
+  --border: oklch(0.35 0.03 90);
+  --border-glass: oklch(0.8 0.2 350 / 0.3);
+
+  --input: oklch(0.22 0.01 90);
+  --ring: oklch(0.8 0.2 350);
+
+  --chart-1: oklch(0.8 0.2 350); /* Pink #f92672 */
+  --chart-2: oklch(0.85 0.2 90); /* Yellow #e6db74 */
+  --chart-3: oklch(0.8 0.2 140); /* Green #a6e22e */
+  --chart-4: oklch(0.75 0.2 200); /* Cyan #66d9ef */
+  --chart-5: oklch(0.75 0.2 30); /* Orange #fd971f */
+
+  --sidebar: oklch(0.15 0.01 90);
+  --sidebar-foreground: oklch(0.95 0.02 100);
+  --sidebar-primary: oklch(0.8 0.2 350);
+  --sidebar-primary-foreground: oklch(0.17 0.01 90);
+  --sidebar-accent: oklch(0.25 0.02 90);
+  --sidebar-accent-foreground: oklch(0.95 0.02 100);
+  --sidebar-border: oklch(0.35 0.03 90);
+  --sidebar-ring: oklch(0.8 0.2 350);
+}
+
+/* ========================================
+   TOKYO NIGHT THEME
+   A clean dark theme celebrating Tokyo at night
+   ======================================== */
+.tokyonight {
+  --background: oklch(0.16 0.03 260); /* #1a1b26 */
+  --background-50: oklch(0.16 0.03 260 / 0.5);
+  --background-80: oklch(0.16 0.03 260 / 0.8);
+
+  --foreground: oklch(0.85 0.02 250); /* #a9b1d6 */
+  --foreground-secondary: oklch(0.7 0.03 250);
+  --foreground-muted: oklch(0.5 0.04 250); /* #565f89 */
+
+  --card: oklch(0.2 0.03 260); /* #24283b */
+  --card-foreground: oklch(0.85 0.02 250);
+  --popover: oklch(0.18 0.03 260);
+  --popover-foreground: oklch(0.85 0.02 250);
+
+  --primary: oklch(0.7 0.18 280); /* #7aa2f7 blue */
+  --primary-foreground: oklch(0.16 0.03 260);
+
+  --brand-400: oklch(0.75 0.18 280);
+  --brand-500: oklch(0.7 0.18 280); /* #7aa2f7 */
+  --brand-600: oklch(0.65 0.2 280); /* #7dcfff */
+
+  --secondary: oklch(0.24 0.03 260); /* #292e42 */
+  --secondary-foreground: oklch(0.85 0.02 250);
+
+  --muted: oklch(0.24 0.03 260);
+  --muted-foreground: oklch(0.5 0.04 250);
+
+  --accent: oklch(0.28 0.04 260);
+  --accent-foreground: oklch(0.85 0.02 250);
+
+  --destructive: oklch(0.65 0.2 15); /* #f7768e */
+
+  --border: oklch(0.32 0.04 260);
+  --border-glass: oklch(0.7 0.18 280 / 0.3);
+
+  --input: oklch(0.2 0.03 260);
+  --ring: oklch(0.7 0.18 280);
+
+  --chart-1: oklch(0.7 0.18 280); /* Blue #7aa2f7 */
+  --chart-2: oklch(0.75 0.18 200); /* Cyan #7dcfff */
+  --chart-3: oklch(0.75 0.18 140); /* Green #9ece6a */
+  --chart-4: oklch(0.7 0.2 320); /* Magenta #bb9af7 */
+  --chart-5: oklch(0.8 0.18 70); /* Yellow #e0af68 */
+
+  --sidebar: oklch(0.14 0.03 260);
+  --sidebar-foreground: oklch(0.85 0.02 250);
+  --sidebar-primary: oklch(0.7 0.18 280);
+  --sidebar-primary-foreground: oklch(0.16 0.03 260);
+  --sidebar-accent: oklch(0.24 0.03 260);
+  --sidebar-accent-foreground: oklch(0.85 0.02 250);
+  --sidebar-border: oklch(0.32 0.04 260);
+  --sidebar-ring: oklch(0.7 0.18 280);
+}
+
+/* ========================================
+   SOLARIZED DARK THEME
+   The classic color scheme by Ethan Schoonover
+   ======================================== */
+.solarized {
+  --background: oklch(0.2 0.02 230); /* #002b36 base03 */
+  --background-50: oklch(0.2 0.02 230 / 0.5);
+  --background-80: oklch(0.2 0.02 230 / 0.8);
+
+  --foreground: oklch(0.75 0.02 90); /* #839496 base0 */
+  --foreground-secondary: oklch(0.6 0.03 200); /* #657b83 base00 */
+  --foreground-muted: oklch(0.5 0.04 200); /* #586e75 base01 */
+
+  --card: oklch(0.23 0.02 230); /* #073642 base02 */
+  --card-foreground: oklch(0.75 0.02 90);
+  --popover: oklch(0.22 0.02 230);
+  --popover-foreground: oklch(0.75 0.02 90);
+
+  --primary: oklch(0.65 0.15 220); /* #268bd2 blue */
+  --primary-foreground: oklch(0.2 0.02 230);
+
+  --brand-400: oklch(0.7 0.15 220);
+  --brand-500: oklch(0.65 0.15 220); /* #268bd2 */
+  --brand-600: oklch(0.6 0.17 220);
+
+  --secondary: oklch(0.25 0.02 230);
+  --secondary-foreground: oklch(0.75 0.02 90);
+
+  --muted: oklch(0.25 0.02 230);
+  --muted-foreground: oklch(0.5 0.04 200);
+
+  --accent: oklch(0.28 0.03 230);
+  --accent-foreground: oklch(0.75 0.02 90);
+
+  --destructive: oklch(0.55 0.2 25); /* #dc322f red */
+
+  --border: oklch(0.35 0.03 230);
+  --border-glass: oklch(0.65 0.15 220 / 0.3);
+
+  --input: oklch(0.23 0.02 230);
+  --ring: oklch(0.65 0.15 220);
+
+  --chart-1: oklch(0.65 0.15 220); /* Blue */
+  --chart-2: oklch(0.6 0.18 180); /* Cyan #2aa198 */
+  --chart-3: oklch(0.65 0.2 140); /* Green #859900 */
+  --chart-4: oklch(0.7 0.18 55); /* Yellow #b58900 */
+  --chart-5: oklch(0.6 0.2 30); /* Orange #cb4b16 */
+
+  --sidebar: oklch(0.18 0.02 230);
+  --sidebar-foreground: oklch(0.75 0.02 90);
+  --sidebar-primary: oklch(0.65 0.15 220);
+  --sidebar-primary-foreground: oklch(0.2 0.02 230);
+  --sidebar-accent: oklch(0.25 0.02 230);
+  --sidebar-accent-foreground: oklch(0.75 0.02 90);
+  --sidebar-border: oklch(0.35 0.03 230);
+  --sidebar-ring: oklch(0.65 0.15 220);
+}
+
+/* ========================================
+   GRUVBOX THEME
+   Retro groove color scheme
+   ======================================== */
+.gruvbox {
+  --background: oklch(0.18 0.02 60); /* #282828 bg */
+  --background-50: oklch(0.18 0.02 60 / 0.5);
+  --background-80: oklch(0.18 0.02 60 / 0.8);
+
+  --foreground: oklch(0.85 0.05 85); /* #ebdbb2 fg */
+  --foreground-secondary: oklch(0.7 0.04 85); /* #d5c4a1 */
+  --foreground-muted: oklch(0.55 0.04 85); /* #928374 */
+
+  --card: oklch(0.22 0.02 60); /* #3c3836 bg1 */
+  --card-foreground: oklch(0.85 0.05 85);
+  --popover: oklch(0.2 0.02 60);
+  --popover-foreground: oklch(0.85 0.05 85);
+
+  --primary: oklch(0.7 0.18 55); /* #fabd2f yellow */
+  --primary-foreground: oklch(0.18 0.02 60);
+
+  --brand-400: oklch(0.75 0.18 55);
+  --brand-500: oklch(0.7 0.18 55); /* Yellow */
+  --brand-600: oklch(0.65 0.2 55);
+
+  --secondary: oklch(0.26 0.02 60); /* #504945 bg2 */
+  --secondary-foreground: oklch(0.85 0.05 85);
+
+  --muted: oklch(0.26 0.02 60);
+  --muted-foreground: oklch(0.55 0.04 85);
+
+  --accent: oklch(0.3 0.03 60);
+  --accent-foreground: oklch(0.85 0.05 85);
+
+  --destructive: oklch(0.55 0.22 25); /* #fb4934 red */
+
+  --border: oklch(0.35 0.03 60);
+  --border-glass: oklch(0.7 0.18 55 / 0.3);
+
+  --input: oklch(0.22 0.02 60);
+  --ring: oklch(0.7 0.18 55);
+
+  --chart-1: oklch(0.7 0.18 55); /* Yellow */
+  --chart-2: oklch(0.65 0.2 140); /* Green #b8bb26 */
+  --chart-3: oklch(0.7 0.15 200); /* Aqua #8ec07c */
+  --chart-4: oklch(0.6 0.2 30); /* Orange #fe8019 */
+  --chart-5: oklch(0.6 0.2 320); /* Purple #d3869b */
+
+  --sidebar: oklch(0.16 0.02 60);
+  --sidebar-foreground: oklch(0.85 0.05 85);
+  --sidebar-primary: oklch(0.7 0.18 55);
+  --sidebar-primary-foreground: oklch(0.18 0.02 60);
+  --sidebar-accent: oklch(0.26 0.02 60);
+  --sidebar-accent-foreground: oklch(0.85 0.05 85);
+  --sidebar-border: oklch(0.35 0.03 60);
+  --sidebar-ring: oklch(0.7 0.18 55);
+}
+
+/* ========================================
+   CATPPUCCIN MOCHA THEME
+   Soothing pastel theme for the high-spirited
+   ======================================== */
+.catppuccin {
+  --background: oklch(0.18 0.02 260); /* #1e1e2e base */
+  --background-50: oklch(0.18 0.02 260 / 0.5);
+  --background-80: oklch(0.18 0.02 260 / 0.8);
+
+  --foreground: oklch(0.9 0.01 280); /* #cdd6f4 text */
+  --foreground-secondary: oklch(0.75 0.02 280); /* #bac2de subtext1 */
+  --foreground-muted: oklch(0.6 0.03 280); /* #a6adc8 subtext0 */
+
+  --card: oklch(0.22 0.02 260); /* #313244 surface0 */
+  --card-foreground: oklch(0.9 0.01 280);
+  --popover: oklch(0.2 0.02 260);
+  --popover-foreground: oklch(0.9 0.01 280);
+
+  --primary: oklch(0.75 0.15 280); /* #cba6f7 mauve */
+  --primary-foreground: oklch(0.18 0.02 260);
+
+  --brand-400: oklch(0.8 0.15 280);
+  --brand-500: oklch(0.75 0.15 280); /* Mauve */
+  --brand-600: oklch(0.7 0.17 280);
+
+  --secondary: oklch(0.26 0.02 260); /* #45475a surface1 */
+  --secondary-foreground: oklch(0.9 0.01 280);
+
+  --muted: oklch(0.26 0.02 260);
+  --muted-foreground: oklch(0.6 0.03 280);
+
+  --accent: oklch(0.3 0.03 260); /* #585b70 surface2 */
+  --accent-foreground: oklch(0.9 0.01 280);
+
+  --destructive: oklch(0.65 0.2 15); /* #f38ba8 red */
+
+  --border: oklch(0.35 0.03 260);
+  --border-glass: oklch(0.75 0.15 280 / 0.3);
+
+  --input: oklch(0.22 0.02 260);
+  --ring: oklch(0.75 0.15 280);
+
+  --chart-1: oklch(0.75 0.15 280); /* Mauve */
+  --chart-2: oklch(0.75 0.15 220); /* Blue #89b4fa */
+  --chart-3: oklch(0.8 0.15 160); /* Green #a6e3a1 */
+  --chart-4: oklch(0.8 0.15 350); /* Pink #f5c2e7 */
+  --chart-5: oklch(0.85 0.12 90); /* Yellow #f9e2af */
+
+  --sidebar: oklch(0.16 0.02 260); /* #181825 mantle */
+  --sidebar-foreground: oklch(0.9 0.01 280);
+  --sidebar-primary: oklch(0.75 0.15 280);
+  --sidebar-primary-foreground: oklch(0.18 0.02 260);
+  --sidebar-accent: oklch(0.26 0.02 260);
+  --sidebar-accent-foreground: oklch(0.9 0.01 280);
+  --sidebar-border: oklch(0.35 0.03 260);
+  --sidebar-ring: oklch(0.75 0.15 280);
+}
+
+/* ========================================
+   ONE DARK THEME
+   Atom's iconic One Dark theme
+   ======================================== */
+.onedark {
+  --background: oklch(0.19 0.01 250); /* #282c34 */
+  --background-50: oklch(0.19 0.01 250 / 0.5);
+  --background-80: oklch(0.19 0.01 250 / 0.8);
+
+  --foreground: oklch(0.85 0.02 240); /* #abb2bf */
+  --foreground-secondary: oklch(0.7 0.02 240);
+  --foreground-muted: oklch(0.5 0.03 240); /* #5c6370 */
+
+  --card: oklch(0.23 0.01 250); /* #21252b */
+  --card-foreground: oklch(0.85 0.02 240);
+  --popover: oklch(0.21 0.01 250);
+  --popover-foreground: oklch(0.85 0.02 240);
+
+  --primary: oklch(0.7 0.18 230); /* #61afef blue */
+  --primary-foreground: oklch(0.19 0.01 250);
+
+  --brand-400: oklch(0.75 0.18 230);
+  --brand-500: oklch(0.7 0.18 230); /* Blue */
+  --brand-600: oklch(0.65 0.2 230);
+
+  --secondary: oklch(0.25 0.01 250);
+  --secondary-foreground: oklch(0.85 0.02 240);
+
+  --muted: oklch(0.25 0.01 250);
+  --muted-foreground: oklch(0.5 0.03 240);
+
+  --accent: oklch(0.28 0.02 250);
+  --accent-foreground: oklch(0.85 0.02 240);
+
+  --destructive: oklch(0.6 0.2 20); /* #e06c75 red */
+
+  --border: oklch(0.35 0.02 250);
+  --border-glass: oklch(0.7 0.18 230 / 0.3);
+
+  --input: oklch(0.23 0.01 250);
+  --ring: oklch(0.7 0.18 230);
+
+  --chart-1: oklch(0.7 0.18 230); /* Blue */
+  --chart-2: oklch(0.75 0.15 320); /* Magenta #c678dd */
+  --chart-3: oklch(0.75 0.18 150); /* Green #98c379 */
+  --chart-4: oklch(0.8 0.15 80); /* Yellow #e5c07b */
+  --chart-5: oklch(0.7 0.15 180); /* Cyan #56b6c2 */
+
+  --sidebar: oklch(0.17 0.01 250);
+  --sidebar-foreground: oklch(0.85 0.02 240);
+  --sidebar-primary: oklch(0.7 0.18 230);
+  --sidebar-primary-foreground: oklch(0.19 0.01 250);
+  --sidebar-accent: oklch(0.25 0.01 250);
+  --sidebar-accent-foreground: oklch(0.85 0.02 240);
+  --sidebar-border: oklch(0.35 0.02 250);
+  --sidebar-ring: oklch(0.7 0.18 230);
+}
+
+/* ========================================
+   SYNTHWAVE '84 THEME
+   Neon dreams of the 80s
+   ======================================== */
+.synthwave {
+  --background: oklch(0.15 0.05 290); /* #262335 */
+  --background-50: oklch(0.15 0.05 290 / 0.5);
+  --background-80: oklch(0.15 0.05 290 / 0.8);
+
+  --foreground: oklch(0.95 0.02 320); /* #ffffff with warm tint */
+  --foreground-secondary: oklch(0.75 0.05 320);
+  --foreground-muted: oklch(0.55 0.08 290);
+
+  --card: oklch(0.2 0.06 290); /* #34294f */
+  --card-foreground: oklch(0.95 0.02 320);
+  --popover: oklch(0.18 0.05 290);
+  --popover-foreground: oklch(0.95 0.02 320);
+
+  --primary: oklch(0.7 0.28 350); /* #f97e72 hot pink */
+  --primary-foreground: oklch(0.15 0.05 290);
+
+  --brand-400: oklch(0.75 0.28 350);
+  --brand-500: oklch(0.7 0.28 350); /* Hot pink */
+  --brand-600: oklch(0.65 0.3 350);
+
+  --secondary: oklch(0.25 0.07 290);
+  --secondary-foreground: oklch(0.95 0.02 320);
+
+  --muted: oklch(0.25 0.07 290);
+  --muted-foreground: oklch(0.55 0.08 290);
+
+  --accent: oklch(0.3 0.08 290);
+  --accent-foreground: oklch(0.95 0.02 320);
+
+  --destructive: oklch(0.6 0.25 15);
+
+  --border: oklch(0.4 0.1 290);
+  --border-glass: oklch(0.7 0.28 350 / 0.3);
+
+  --input: oklch(0.2 0.06 290);
+  --ring: oklch(0.7 0.28 350);
+
+  --chart-1: oklch(0.7 0.28 350); /* Hot pink */
+  --chart-2: oklch(0.8 0.25 200); /* Cyan #72f1b8 */
+  --chart-3: oklch(0.85 0.2 60); /* Yellow #fede5d */
+  --chart-4: oklch(0.7 0.25 280); /* Purple #ff7edb */
+  --chart-5: oklch(0.7 0.2 30); /* Orange #f97e72 */
+
+  --sidebar: oklch(0.13 0.05 290);
+  --sidebar-foreground: oklch(0.95 0.02 320);
+  --sidebar-primary: oklch(0.7 0.28 350);
+  --sidebar-primary-foreground: oklch(0.15 0.05 290);
+  --sidebar-accent: oklch(0.25 0.07 290);
+  --sidebar-accent-foreground: oklch(0.95 0.02 320);
+  --sidebar-border: oklch(0.4 0.1 290);
+  --sidebar-ring: oklch(0.7 0.28 350);
+}
+
 @layer base {
   * {
     @apply border-border outline-ring/50;
   }
+  html {
+    @apply bg-background;
+  }
   body {
     @apply bg-background text-foreground;
+    background-color: var(--background);
   }
 }
 
-/* Custom scrollbar for dark mode */
-.dark ::-webkit-scrollbar {
+/* Custom scrollbar for dark themes */
+:is(.dark, .retro, .dracula, .nord, .monokai, .tokyonight, .solarized, .gruvbox, .catppuccin, .onedark, .synthwave) ::-webkit-scrollbar {
   width: 8px;
   height: 8px;
 }
 
-.dark ::-webkit-scrollbar-track {
-  background: oklch(0.15 0 0);
+:is(.dark, .retro, .dracula, .nord, .monokai, .tokyonight, .solarized, .gruvbox, .catppuccin, .onedark, .synthwave) ::-webkit-scrollbar-track {
+  background: var(--muted);
 }
 
-.dark ::-webkit-scrollbar-thumb {
+:is(.dark, .retro) ::-webkit-scrollbar-thumb {
   background: oklch(0.3 0 0);
   border-radius: 4px;
 }
 
-.dark ::-webkit-scrollbar-thumb:hover {
+:is(.dark, .retro) ::-webkit-scrollbar-thumb:hover {
   background: oklch(0.4 0 0);
 }
 
+/* Retro Scrollbar override */
+.retro ::-webkit-scrollbar-thumb {
+    background: var(--primary);
+    border-radius: 0;
+}
+.retro ::-webkit-scrollbar-track {
+    background: var(--background);
+}
+
 /* Glass morphism utilities */
 @layer utilities {
   .glass {
@@ -219,11 +881,23 @@
 
   /* Glass morphism background utilities */
   .bg-glass {
-    background: oklch(0.04 0 0 / 0.5);
+    background: var(--card);
+    backdrop-filter: blur(12px);
+    -webkit-backdrop-filter: blur(12px);
   }
 
   .bg-glass-80 {
-    background: oklch(0.04 0 0 / 0.8);
+    background: var(--popover);
+    backdrop-filter: blur(12px);
+    -webkit-backdrop-filter: blur(12px);
+  }
+  
+  .light .bg-glass {
+    background: oklch(1 0 0 / 0.8);
+  }
+  
+  .light .bg-glass-80 {
+    background: oklch(1 0 0 / 0.95);
   }
 
   /* Hover state utilities */
@@ -245,10 +919,449 @@
 
   /* Content area background */
   .content-bg {
+    background: var(--background);
+  }
+  
+  .light .content-bg {
+    background: linear-gradient(135deg, oklch(0.99 0 0), oklch(0.98 0 0), oklch(0.99 0 0));
+  }
+  
+  .dark .content-bg {
     background: linear-gradient(135deg, oklch(0.04 0 0), oklch(0.08 0 0), oklch(0.04 0 0));
   }
 }
 
+/* Retro Overrides for Utilities */
+.retro .glass,
+.retro .glass-subtle,
+.retro .glass-strong,
+.retro .bg-glass,
+.retro .bg-glass-80 {
+    backdrop-filter: none;
+    background: var(--background);
+    border: 1px solid var(--border);
+}
+
+.retro .gradient-brand {
+    background: var(--primary);
+    color: var(--primary-foreground);
+}
+
+.retro .content-bg {
+    background: 
+        linear-gradient(rgba(0, 255, 65, 0.03) 1px, transparent 1px),
+        linear-gradient(90deg, rgba(0, 255, 65, 0.03) 1px, transparent 1px),
+        var(--background);
+    background-size: 20px 20px;
+}
+
+.retro * {
+    border-radius: 0 !important;
+}
+
+/* Animated Outline Button Styles */
+.animated-outline-gradient {
+    /* Default gradient - purple to blue */
+    background: conic-gradient(from 90deg at 50% 50%, #a855f7 0%, #3b82f6 50%, #a855f7 100%);
+}
+
+/* Light mode - deeper purple to blue gradient for better visibility */
+.light .animated-outline-gradient {
+    background: conic-gradient(from 90deg at 50% 50%, #7c3aed 0%, #2563eb 50%, #7c3aed 100%);
+}
+
+.light .animated-outline-inner {
+    background: oklch(100% 0 0) !important;
+    color: #7c3aed !important;
+    border: 1px solid oklch(92% 0 0);
+}
+
+.light [data-slot="button"][class*="animated-outline"]:hover .animated-outline-inner {
+    background: oklch(97% 0.02 270) !important;
+    color: #5b21b6 !important;
+}
+
+/* Dark mode - purple to blue gradient */
+.dark .animated-outline-gradient {
+    background: conic-gradient(from 90deg at 50% 50%, #a855f7 0%, #3b82f6 50%, #a855f7 100%);
+}
+
+.dark .animated-outline-inner {
+    background: oklch(0.15 0 0) !important;
+    color: #c084fc !important;
+}
+
+.dark [data-slot="button"][class*="animated-outline"]:hover .animated-outline-inner {
+    background: oklch(0.2 0.02 270) !important;
+    color: #e9d5ff !important;
+}
+
+/* Retro mode - unique scanline + neon effect */
+.retro .animated-outline-gradient {
+    background: conic-gradient(from 90deg at 50% 50%, #00ff41 0%, #00ffff 25%, #ff00ff 50%, #00ffff 75%, #00ff41 100%);
+    animation: spin 2s linear infinite, retro-glow 1s ease-in-out infinite alternate;
+}
+
+@keyframes retro-glow {
+    from {
+        filter: brightness(1) drop-shadow(0 0 2px #00ff41);
+    }
+    to {
+        filter: brightness(1.2) drop-shadow(0 0 8px #00ff41);
+    }
+}
+
+.retro [data-slot="button"][class*="animated-outline"] {
+    border-radius: 0 !important;
+}
+
+.retro .animated-outline-inner {
+    background: oklch(0 0 0) !important;
+    color: #00ff41 !important;
+    border-radius: 0 !important;
+    text-shadow: 0 0 5px #00ff41;
+    font-family: var(--font-geist-mono), monospace;
+    text-transform: uppercase;
+    letter-spacing: 0.1em;
+}
+
+.retro [data-slot="button"][class*="animated-outline"]:hover .animated-outline-inner {
+    background: oklch(0.1 0.1 145) !important;
+    color: #00ff41 !important;
+    box-shadow: 
+        0 0 10px #00ff41,
+        0 0 20px #00ff41,
+        inset 0 0 10px rgba(0, 255, 65, 0.1);
+    text-shadow: 0 0 10px #00ff41, 0 0 20px #00ff41;
+}
+
+/* Dracula animated-outline - purple/pink */
+.dracula .animated-outline-gradient {
+    background: conic-gradient(from 90deg at 50% 50%, #bd93f9 0%, #ff79c6 50%, #bd93f9 100%);
+}
+
+.dracula .animated-outline-inner {
+    background: oklch(0.18 0.02 280) !important;
+    color: #bd93f9 !important;
+}
+
+.dracula [data-slot="button"][class*="animated-outline"]:hover .animated-outline-inner {
+    background: oklch(0.24 0.03 280) !important;
+    color: #ff79c6 !important;
+}
+
+/* Nord animated-outline - frost blue */
+.nord .animated-outline-gradient {
+    background: conic-gradient(from 90deg at 50% 50%, #88c0d0 0%, #81a1c1 50%, #88c0d0 100%);
+}
+
+.nord .animated-outline-inner {
+    background: oklch(0.23 0.02 240) !important;
+    color: #88c0d0 !important;
+}
+
+.nord [data-slot="button"][class*="animated-outline"]:hover .animated-outline-inner {
+    background: oklch(0.28 0.03 240) !important;
+    color: #8fbcbb !important;
+}
+
+/* Monokai animated-outline - pink/yellow */
+.monokai .animated-outline-gradient {
+    background: conic-gradient(from 90deg at 50% 50%, #f92672 0%, #e6db74 50%, #f92672 100%);
+}
+
+.monokai .animated-outline-inner {
+    background: oklch(0.17 0.01 90) !important;
+    color: #f92672 !important;
+}
+
+.monokai [data-slot="button"][class*="animated-outline"]:hover .animated-outline-inner {
+    background: oklch(0.22 0.02 90) !important;
+    color: #e6db74 !important;
+}
+
+/* Tokyo Night animated-outline - blue/magenta */
+.tokyonight .animated-outline-gradient {
+    background: conic-gradient(from 90deg at 50% 50%, #7aa2f7 0%, #bb9af7 50%, #7aa2f7 100%);
+}
+
+.tokyonight .animated-outline-inner {
+    background: oklch(0.16 0.03 260) !important;
+    color: #7aa2f7 !important;
+}
+
+.tokyonight [data-slot="button"][class*="animated-outline"]:hover .animated-outline-inner {
+    background: oklch(0.22 0.04 260) !important;
+    color: #bb9af7 !important;
+}
+
+/* Solarized animated-outline - blue/cyan */
+.solarized .animated-outline-gradient {
+    background: conic-gradient(from 90deg at 50% 50%, #268bd2 0%, #2aa198 50%, #268bd2 100%);
+}
+
+.solarized .animated-outline-inner {
+    background: oklch(0.2 0.02 230) !important;
+    color: #268bd2 !important;
+}
+
+.solarized [data-slot="button"][class*="animated-outline"]:hover .animated-outline-inner {
+    background: oklch(0.25 0.03 230) !important;
+    color: #2aa198 !important;
+}
+
+/* Gruvbox animated-outline - yellow/orange */
+.gruvbox .animated-outline-gradient {
+    background: conic-gradient(from 90deg at 50% 50%, #fabd2f 0%, #fe8019 50%, #fabd2f 100%);
+}
+
+.gruvbox .animated-outline-inner {
+    background: oklch(0.18 0.02 60) !important;
+    color: #fabd2f !important;
+}
+
+.gruvbox [data-slot="button"][class*="animated-outline"]:hover .animated-outline-inner {
+    background: oklch(0.24 0.03 60) !important;
+    color: #fe8019 !important;
+}
+
+/* Catppuccin animated-outline - mauve/pink */
+.catppuccin .animated-outline-gradient {
+    background: conic-gradient(from 90deg at 50% 50%, #cba6f7 0%, #f5c2e7 50%, #cba6f7 100%);
+}
+
+.catppuccin .animated-outline-inner {
+    background: oklch(0.18 0.02 260) !important;
+    color: #cba6f7 !important;
+}
+
+.catppuccin [data-slot="button"][class*="animated-outline"]:hover .animated-outline-inner {
+    background: oklch(0.24 0.03 260) !important;
+    color: #f5c2e7 !important;
+}
+
+/* One Dark animated-outline - blue/magenta */
+.onedark .animated-outline-gradient {
+    background: conic-gradient(from 90deg at 50% 50%, #61afef 0%, #c678dd 50%, #61afef 100%);
+}
+
+.onedark .animated-outline-inner {
+    background: oklch(0.19 0.01 250) !important;
+    color: #61afef !important;
+}
+
+.onedark [data-slot="button"][class*="animated-outline"]:hover .animated-outline-inner {
+    background: oklch(0.25 0.02 250) !important;
+    color: #c678dd !important;
+}
+
+/* Synthwave animated-outline - hot pink/cyan with glow */
+.synthwave .animated-outline-gradient {
+    background: conic-gradient(from 90deg at 50% 50%, #f97e72 0%, #72f1b8 25%, #ff7edb 50%, #72f1b8 75%, #f97e72 100%);
+    animation: spin 2s linear infinite, synthwave-glow 1.5s ease-in-out infinite alternate;
+}
+
+@keyframes synthwave-glow {
+    from {
+        filter: brightness(1) drop-shadow(0 0 3px #f97e72);
+    }
+    to {
+        filter: brightness(1.3) drop-shadow(0 0 10px #ff7edb);
+    }
+}
+
+.synthwave .animated-outline-inner {
+    background: oklch(0.15 0.05 290) !important;
+    color: #f97e72 !important;
+    text-shadow: 0 0 8px #f97e72;
+}
+
+.synthwave [data-slot="button"][class*="animated-outline"]:hover .animated-outline-inner {
+    background: oklch(0.22 0.07 290) !important;
+    color: #72f1b8 !important;
+    text-shadow: 0 0 12px #72f1b8;
+    box-shadow: 0 0 15px rgba(114, 241, 184, 0.3);
+}
+
+/* Slider Theme Styles */
+.light .slider-track {
+    background: oklch(90% 0 0);
+}
+
+.light .slider-range {
+    background: linear-gradient(to right, #7c3aed, #2563eb);
+}
+
+.light .slider-thumb {
+    background: oklch(100% 0 0);
+    border-color: oklch(80% 0 0);
+}
+
+.dark .slider-track {
+    background: oklch(0.2 0 0);
+}
+
+.dark .slider-range {
+    background: linear-gradient(to right, #a855f7, #3b82f6);
+}
+
+.dark .slider-thumb {
+    background: oklch(0.25 0 0);
+    border-color: oklch(0.4 0 0);
+}
+
+.retro .slider-track {
+    background: oklch(0.15 0.05 145);
+    border: 1px solid #00ff41;
+    border-radius: 0 !important;
+}
+
+.retro .slider-range {
+    background: #00ff41;
+    box-shadow: 0 0 10px #00ff41, 0 0 5px #00ff41;
+    border-radius: 0 !important;
+}
+
+.retro .slider-thumb {
+    background: oklch(0 0 0);
+    border: 2px solid #00ff41;
+    border-radius: 0 !important;
+    box-shadow: 0 0 8px #00ff41;
+}
+
+.retro .slider-thumb:hover {
+    background: oklch(0.1 0.1 145);
+    box-shadow: 0 0 12px #00ff41, 0 0 20px #00ff41;
+}
+
+/* Dracula slider */
+.dracula .slider-track {
+    background: oklch(0.28 0.03 280);
+}
+
+.dracula .slider-range {
+    background: linear-gradient(to right, #bd93f9, #ff79c6);
+}
+
+.dracula .slider-thumb {
+    background: oklch(0.22 0.02 280);
+    border-color: #bd93f9;
+}
+
+/* Nord slider */
+.nord .slider-track {
+    background: oklch(0.31 0.02 240);
+}
+
+.nord .slider-range {
+    background: linear-gradient(to right, #88c0d0, #81a1c1);
+}
+
+.nord .slider-thumb {
+    background: oklch(0.27 0.02 240);
+    border-color: #88c0d0;
+}
+
+/* Monokai slider */
+.monokai .slider-track {
+    background: oklch(0.25 0.02 90);
+}
+
+.monokai .slider-range {
+    background: linear-gradient(to right, #f92672, #fd971f);
+}
+
+.monokai .slider-thumb {
+    background: oklch(0.22 0.01 90);
+    border-color: #f92672;
+}
+
+/* Tokyo Night slider */
+.tokyonight .slider-track {
+    background: oklch(0.24 0.03 260);
+}
+
+.tokyonight .slider-range {
+    background: linear-gradient(to right, #7aa2f7, #bb9af7);
+}
+
+.tokyonight .slider-thumb {
+    background: oklch(0.2 0.03 260);
+    border-color: #7aa2f7;
+}
+
+/* Solarized slider */
+.solarized .slider-track {
+    background: oklch(0.25 0.02 230);
+}
+
+.solarized .slider-range {
+    background: linear-gradient(to right, #268bd2, #2aa198);
+}
+
+.solarized .slider-thumb {
+    background: oklch(0.23 0.02 230);
+    border-color: #268bd2;
+}
+
+/* Gruvbox slider */
+.gruvbox .slider-track {
+    background: oklch(0.26 0.02 60);
+}
+
+.gruvbox .slider-range {
+    background: linear-gradient(to right, #fabd2f, #fe8019);
+}
+
+.gruvbox .slider-thumb {
+    background: oklch(0.22 0.02 60);
+    border-color: #fabd2f;
+}
+
+/* Catppuccin slider */
+.catppuccin .slider-track {
+    background: oklch(0.26 0.02 260);
+}
+
+.catppuccin .slider-range {
+    background: linear-gradient(to right, #cba6f7, #89b4fa);
+}
+
+.catppuccin .slider-thumb {
+    background: oklch(0.22 0.02 260);
+    border-color: #cba6f7;
+}
+
+/* One Dark slider */
+.onedark .slider-track {
+    background: oklch(0.25 0.01 250);
+}
+
+.onedark .slider-range {
+    background: linear-gradient(to right, #61afef, #c678dd);
+}
+
+.onedark .slider-thumb {
+    background: oklch(0.23 0.01 250);
+    border-color: #61afef;
+}
+
+/* Synthwave slider */
+.synthwave .slider-track {
+    background: oklch(0.25 0.07 290);
+}
+
+.synthwave .slider-range {
+    background: linear-gradient(to right, #f97e72, #ff7edb);
+    box-shadow: 0 0 10px #f97e72, 0 0 5px #ff7edb;
+}
+
+.synthwave .slider-thumb {
+    background: oklch(0.2 0.06 290);
+    border-color: #f97e72;
+    box-shadow: 0 0 8px #f97e72;
+}
+
 /* Electron title bar drag region */
 .titlebar-drag-region {
   -webkit-app-region: drag;
diff --git a/app/src/app/layout.tsx b/app/src/app/layout.tsx
index b968ddf9..017418b9 100644
--- a/app/src/app/layout.tsx
+++ b/app/src/app/layout.tsx
@@ -26,7 +26,7 @@ export default function RootLayout({
   return (
     <html lang="en" suppressHydrationWarning>
       <body
-        className={`${geistSans.variable} ${geistMono.variable} antialiased dark`}
+        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
       >
         {children}
         <Toaster richColors position="top-right" />
diff --git a/app/src/app/page.tsx b/app/src/app/page.tsx
index a9691a92..c4ea914c 100644
--- a/app/src/app/page.tsx
+++ b/app/src/app/page.tsx
@@ -41,17 +41,52 @@ export default function Home() {
   // Apply theme class to document
   useEffect(() => {
     const root = document.documentElement;
+    root.classList.remove(
+      "dark",
+      "retro",
+      "light",
+      "dracula",
+      "nord",
+      "monokai",
+      "tokyonight",
+      "solarized",
+      "gruvbox",
+      "catppuccin",
+      "onedark",
+      "synthwave"
+    );
+
     if (theme === "dark") {
       root.classList.add("dark");
+    } else if (theme === "retro") {
+      root.classList.add("retro");
+    } else if (theme === "dracula") {
+      root.classList.add("dracula");
+    } else if (theme === "nord") {
+      root.classList.add("nord");
+    } else if (theme === "monokai") {
+      root.classList.add("monokai");
+    } else if (theme === "tokyonight") {
+      root.classList.add("tokyonight");
+    } else if (theme === "solarized") {
+      root.classList.add("solarized");
+    } else if (theme === "gruvbox") {
+      root.classList.add("gruvbox");
+    } else if (theme === "catppuccin") {
+      root.classList.add("catppuccin");
+    } else if (theme === "onedark") {
+      root.classList.add("onedark");
+    } else if (theme === "synthwave") {
+      root.classList.add("synthwave");
     } else if (theme === "light") {
-      root.classList.remove("dark");
-    } else {
+      root.classList.add("light");
+    } else if (theme === "system") {
       // System theme
       const isDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
       if (isDark) {
         root.classList.add("dark");
       } else {
-        root.classList.remove("dark");
+        root.classList.add("light");
       }
     }
   }, [theme]);
diff --git a/app/src/components/layout/sidebar.tsx b/app/src/components/layout/sidebar.tsx
index 6652a0ec..2e4afeab 100644
--- a/app/src/components/layout/sidebar.tsx
+++ b/app/src/components/layout/sidebar.tsx
@@ -264,7 +264,7 @@ export function Sidebar() {
   return (
     <aside
       className={cn(
-        "flex-shrink-0 border-r border-white/10 bg-zinc-950/50 backdrop-blur-md flex flex-col z-30 transition-all duration-300 relative",
+        "flex-shrink-0 border-r border-sidebar-border bg-sidebar backdrop-blur-md flex flex-col z-30 transition-all duration-300 relative",
         sidebarOpen ? "w-16 lg:w-60" : "w-16"
       )}
       data-testid="sidebar"
@@ -272,7 +272,7 @@ export function Sidebar() {
       {/* Floating Collapse Toggle Button - Desktop only - At border intersection */}
       <button
         onClick={toggleSidebar}
-        className="hidden lg:flex absolute top-[68px] -right-3 z-[9999] group/toggle items-center justify-center w-6 h-6 rounded-full bg-zinc-800 border border-white/10 text-zinc-400 hover:text-white hover:bg-zinc-700 hover:border-white/20 transition-all shadow-lg titlebar-no-drag"
+        className="hidden lg:flex absolute top-[68px] -right-3 z-9999 group/toggle items-center justify-center w-6 h-6 rounded-full bg-sidebar-accent border border-border text-muted-foreground hover:text-foreground hover:bg-accent hover:border-border transition-all shadow-lg titlebar-no-drag"
         data-testid="sidebar-collapse-button"
       >
         {sidebarOpen ? (
@@ -282,12 +282,12 @@ export function Sidebar() {
         )}
         {/* Tooltip */}
         <div
-          className="absolute left-full ml-2 px-2 py-1 bg-zinc-800 text-white text-xs rounded opacity-0 group-hover/toggle:opacity-100 transition-opacity whitespace-nowrap z-50 border border-zinc-700 pointer-events-none"
+          className="absolute left-full ml-2 px-2 py-1 bg-popover text-popover-foreground text-xs rounded opacity-0 group-hover/toggle:opacity-100 transition-opacity whitespace-nowrap z-50 border border-border pointer-events-none"
           data-testid="sidebar-toggle-tooltip"
         >
           {sidebarOpen ? "Collapse sidebar" : "Expand sidebar"}{" "}
           <span
-            className="ml-1 px-1 py-0.5 bg-white/10 rounded text-[10px] font-mono"
+            className="ml-1 px-1 py-0.5 bg-sidebar-accent/10 rounded text-[10px] font-mono"
             data-testid="sidebar-toggle-shortcut"
           >
             {UI_SHORTCUTS.toggleSidebar}
@@ -299,7 +299,7 @@ export function Sidebar() {
         {/* Logo */}
         <div
           className={cn(
-            "h-20 pt-8 flex items-center justify-center border-b border-zinc-800 flex-shrink-0 titlebar-drag-region",
+            "h-20 pt-8 flex items-center justify-center border-b border-sidebar-border shrink-0 titlebar-drag-region",
             sidebarOpen ? "px-3 lg:px-6" : "px-3"
           )}
         >
@@ -308,12 +308,12 @@ export function Sidebar() {
             onClick={() => setCurrentView("welcome")}
             data-testid="logo-button"
           >
-            <div className="relative flex items-center justify-center w-8 h-8 bg-gradient-to-br from-brand-500 to-purple-600 rounded-lg shadow-lg shadow-brand-500/20 group">
-              <Cpu className="text-white w-5 h-5 group-hover:rotate-12 transition-transform" />
+            <div className="relative flex items-center justify-center w-8 h-8 bg-linear-to-br from-brand-500 to-brand-600 rounded-lg shadow-lg shadow-brand-500/20 group">
+              <Cpu className="text-primary-foreground w-5 h-5 group-hover:rotate-12 transition-transform" />
             </div>
             <span
               className={cn(
-                "ml-3 font-bold text-white text-base tracking-tight",
+                "ml-3 font-bold text-sidebar-foreground text-base tracking-tight",
                 sidebarOpen ? "hidden lg:block" : "hidden"
               )}
             >
@@ -327,7 +327,7 @@ export function Sidebar() {
           <div className="flex items-center gap-2 titlebar-no-drag px-2 mt-3">
             <button
               onClick={() => setCurrentView("welcome")}
-              className="group flex items-center justify-center flex-1 px-3 py-2.5 rounded-lg relative overflow-hidden transition-all text-zinc-400 hover:text-white hover:bg-white/5 border border-white/10"
+              className="group flex items-center justify-center flex-1 px-3 py-2.5 rounded-lg relative overflow-hidden transition-all text-muted-foreground hover:text-foreground hover:bg-sidebar-accent/50 border border-sidebar-border"
               title="New Project"
               data-testid="new-project-button"
             >
@@ -338,11 +338,11 @@ export function Sidebar() {
             </button>
             <button
               onClick={handleOpenFolder}
-              className="group flex items-center justify-center flex-1 px-3 py-2.5 rounded-lg relative overflow-hidden transition-all text-zinc-400 hover:text-white hover:bg-white/5 border border-white/10"
+              className="group flex items-center justify-center flex-1 px-3 py-2.5 rounded-lg relative overflow-hidden transition-all text-muted-foreground hover:text-foreground hover:bg-sidebar-accent/50 border border-sidebar-border"
               title={`Open Folder (${ACTION_SHORTCUTS.openProject})`}
               data-testid="open-project-button"
             >
-              <FolderOpen className="w-4 h-4 flex-shrink-0" />
+              <FolderOpen className="w-4 h-4 shrink-0" />
               <span className="ml-2 text-sm font-medium hidden lg:block whitespace-nowrap">
                 Open
               </span>
@@ -362,28 +362,28 @@ export function Sidebar() {
             >
               <DropdownMenuTrigger asChild>
                 <button
-                  className="w-full flex items-center justify-between px-3 py-2.5 rounded-lg bg-white/5 border border-white/10 hover:bg-white/10 transition-all text-white titlebar-no-drag"
+                  className="w-full flex items-center justify-between px-3 py-2.5 rounded-lg bg-sidebar-accent/10 border border-sidebar-border hover:bg-sidebar-accent/20 transition-all text-foreground titlebar-no-drag"
                   data-testid="project-selector"
                 >
                   <div className="flex items-center gap-2 flex-1 min-w-0">
-                    <Folder className="h-4 w-4 text-brand-500 flex-shrink-0" />
+                    <Folder className="h-4 w-4 text-brand-500 shrink-0" />
                     <span className="text-sm font-medium truncate">
                       {currentProject?.name || "Select Project"}
                     </span>
                   </div>
                   <div className="flex items-center gap-1">
                     <span
-                      className="hidden lg:flex items-center justify-center w-5 h-5 text-[10px] font-mono rounded bg-white/5 border border-white/10 text-zinc-500"
+                      className="hidden lg:flex items-center justify-center w-5 h-5 text-[10px] font-mono rounded bg-sidebar-accent/10 border border-sidebar-border text-muted-foreground"
                       data-testid="project-picker-shortcut"
                     >
                       {ACTION_SHORTCUTS.projectPicker}
                     </span>
-                    <ChevronDown className="h-4 w-4 text-zinc-400 flex-shrink-0" />
+                    <ChevronDown className="h-4 w-4 text-muted-foreground shrink-0" />
                   </div>
                 </button>
               </DropdownMenuTrigger>
               <DropdownMenuContent
-                className="w-56 bg-zinc-800 border-zinc-700"
+                className="w-56 bg-popover border-border"
                 align="start"
                 data-testid="project-picker-dropdown"
               >
@@ -394,12 +394,12 @@ export function Sidebar() {
                       setCurrentProject(project);
                       setIsProjectPickerOpen(false);
                     }}
-                    className="flex items-center gap-2 cursor-pointer text-zinc-300 hover:text-white hover:bg-zinc-700/50"
+                    className="flex items-center gap-2 cursor-pointer text-muted-foreground hover:text-foreground hover:bg-accent"
                     data-testid={`project-option-${project.id}`}
                   >
                     {index < 9 && (
                       <span
-                        className="flex items-center justify-center w-5 h-5 text-[10px] font-mono rounded bg-white/5 border border-white/10 text-zinc-400"
+                        className="flex items-center justify-center w-5 h-5 text-[10px] font-mono rounded bg-sidebar-accent/10 border border-sidebar-border text-muted-foreground"
                         data-testid={`project-hotkey-${index + 1}`}
                       >
                         {index + 1}
@@ -422,7 +422,7 @@ export function Sidebar() {
           {!currentProject && sidebarOpen ? (
             // Placeholder when no project is selected (only in expanded state)
             <div className="flex items-center justify-center h-full px-4">
-              <p className="text-zinc-500 text-sm text-center">
+              <p className="text-muted-foreground text-sm text-center">
                 <span className="hidden lg:block">
                   Select or create a project above
                 </span>
@@ -435,13 +435,13 @@ export function Sidebar() {
                 {/* Section Label */}
                 {section.label && sidebarOpen && (
                   <div className="hidden lg:block px-4 mb-2">
-                    <span className="text-[10px] font-semibold text-zinc-500 uppercase tracking-wider">
+                    <span className="text-[10px] font-semibold text-muted-foreground uppercase tracking-wider">
                       {section.label}
                     </span>
                   </div>
                 )}
                 {section.label && !sidebarOpen && (
-                  <div className="h-px bg-zinc-800 mx-2 mb-2"></div>
+                  <div className="h-px bg-sidebar-border mx-2 mb-2"></div>
                 )}
 
                 {/* Nav Items */}
@@ -457,8 +457,8 @@ export function Sidebar() {
                         className={cn(
                           "group flex items-center w-full px-2 lg:px-3 py-2.5 rounded-lg relative overflow-hidden transition-all titlebar-no-drag",
                           isActive
-                            ? "bg-white/5 text-white border border-white/10"
-                            : "text-zinc-400 hover:text-white hover:bg-white/5",
+                            ? "bg-sidebar-accent/50 text-foreground border border-sidebar-border"
+                            : "text-muted-foreground hover:text-foreground hover:bg-sidebar-accent/50",
                           !sidebarOpen && "justify-center"
                         )}
                         title={!sidebarOpen ? item.label : undefined}
@@ -469,7 +469,7 @@ export function Sidebar() {
                         )}
                         <Icon
                           className={cn(
-                            "w-4 h-4 flex-shrink-0 transition-colors",
+                            "w-4 h-4 shrink-0 transition-colors",
                             isActive
                               ? "text-brand-500"
                               : "group-hover:text-brand-400"
@@ -515,7 +515,7 @@ export function Sidebar() {
       </div>
 
       {/* Bottom Section - User / Settings */}
-      <div className="border-t border-zinc-800 bg-zinc-900/50 flex-shrink-0">
+      <div className="border-t border-sidebar-border bg-sidebar-accent/10 shrink-0">
         {/* Settings Link */}
         <div className="p-2">
           <button
@@ -523,8 +523,8 @@ export function Sidebar() {
             className={cn(
               "group flex items-center w-full px-2 lg:px-3 py-2.5 rounded-lg relative overflow-hidden transition-all titlebar-no-drag",
               isActiveRoute("settings")
-                ? "bg-white/5 text-white border border-white/10"
-                : "text-zinc-400 hover:text-white hover:bg-white/5",
+                ? "bg-sidebar-accent/50 text-foreground border border-sidebar-border"
+                : "text-muted-foreground hover:text-foreground hover:bg-sidebar-accent/50",
               sidebarOpen ? "justify-start" : "justify-center"
             )}
             title={!sidebarOpen ? "Settings" : undefined}
@@ -535,7 +535,7 @@ export function Sidebar() {
             )}
             <Settings
               className={cn(
-                "w-4 h-4 flex-shrink-0 transition-colors",
+                "w-4 h-4 shrink-0 transition-colors",
                 isActiveRoute("settings")
                   ? "text-brand-500"
                   : "group-hover:text-brand-400"
@@ -562,7 +562,7 @@ export function Sidebar() {
               </span>
             )}
             {!sidebarOpen && (
-              <span className="absolute left-full ml-2 px-2 py-1 bg-zinc-800 text-white text-xs rounded opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap z-50 border border-zinc-700">
+              <span className="absolute left-full ml-2 px-2 py-1 bg-popover text-popover-foreground text-xs rounded opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap z-50 border border-border">
                 Settings
               </span>
             )}
diff --git a/app/src/components/ui/button.tsx b/app/src/components/ui/button.tsx
index 21409a06..3e9a1ffc 100644
--- a/app/src/components/ui/button.tsx
+++ b/app/src/components/ui/button.tsx
@@ -1,8 +1,8 @@
-import * as React from "react"
-import { Slot } from "@radix-ui/react-slot"
-import { cva, type VariantProps } from "class-variance-authority"
+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"
+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",
@@ -19,6 +19,8 @@ const buttonVariants = cva(
         ghost:
           "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
         link: "text-primary underline-offset-4 hover:underline",
+        "animated-outline":
+          "relative overflow-hidden rounded-xl hover:bg-transparent shadow-none",
       },
       size: {
         default: "h-9 px-4 py-2 has-[>svg]:px-3",
@@ -34,27 +36,60 @@ const buttonVariants = cva(
       size: "default",
     },
   }
-)
+);
 
 function Button({
   className,
   variant,
   size,
   asChild = false,
+  children,
   ...props
 }: React.ComponentProps<"button"> &
   VariantProps<typeof buttonVariants> & {
-    asChild?: boolean
+    asChild?: boolean;
   }) {
-  const Comp = asChild ? Slot : "button"
+  // Special handling for animated-outline variant
+  if (variant === "animated-outline" && !asChild) {
+    return (
+      <button
+        className={cn(
+          buttonVariants({ variant, size }),
+          "p-[1px]", // Force 1px padding for the gradient border
+          className
+        )}
+        data-slot="button"
+        {...props}
+      >
+        {/* Animated rotating gradient border */}
+        <span className="absolute inset-[-1000%] animate-[spin_2s_linear_infinite] animated-outline-gradient" />
+
+        {/* Inner content container */}
+        <span
+          className={cn(
+            "animated-outline-inner inline-flex h-full w-full cursor-pointer items-center justify-center gap-2 rounded-[10px] px-4 py-1 text-sm font-medium backdrop-blur-3xl transition-all",
+            size === "sm" && "px-3 text-xs gap-1.5",
+            size === "lg" && "px-8",
+            size === "icon" && "p-0 gap-0"
+          )}
+        >
+          {children}
+        </span>
+      </button>
+    );
+  }
+
+  const Comp = asChild ? Slot : "button";
 
   return (
     <Comp
       data-slot="button"
       className={cn(buttonVariants({ variant, size, className }))}
       {...props}
-    />
-  )
+    >
+      {children}
+    </Comp>
+  );
 }
 
-export { Button, buttonVariants }
+export { Button, buttonVariants };
diff --git a/app/src/components/ui/slider.tsx b/app/src/components/ui/slider.tsx
index a367c2b6..f68ab802 100644
--- a/app/src/components/ui/slider.tsx
+++ b/app/src/components/ui/slider.tsx
@@ -16,10 +16,10 @@ const Slider = React.forwardRef<
     )}
     {...props}
   >
-    <SliderPrimitive.Track className="relative h-1.5 w-full grow overflow-hidden rounded-full bg-white/10">
-      <SliderPrimitive.Range className="absolute h-full bg-gradient-to-r from-purple-600 to-blue-600" />
+    <SliderPrimitive.Track className="slider-track relative h-1.5 w-full grow overflow-hidden rounded-full bg-muted">
+      <SliderPrimitive.Range className="slider-range absolute h-full bg-primary" />
     </SliderPrimitive.Track>
-    <SliderPrimitive.Thumb className="block h-4 w-4 rounded-full border border-white/20 bg-zinc-800 shadow transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-white/50 disabled:pointer-events-none disabled:opacity-50 hover:bg-zinc-700" />
+    <SliderPrimitive.Thumb className="slider-thumb block h-4 w-4 rounded-full border border-border bg-card shadow transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 hover:bg-accent" />
   </SliderPrimitive.Root>
 ));
 Slider.displayName = SliderPrimitive.Root.displayName;
diff --git a/app/src/components/views/agent-tools-view.tsx b/app/src/components/views/agent-tools-view.tsx
index 1f76d4e7..e08eb762 100644
--- a/app/src/components/views/agent-tools-view.tsx
+++ b/app/src/components/views/agent-tools-view.tsx
@@ -213,7 +213,7 @@ export function AgentToolsView() {
       data-testid="agent-tools-view"
     >
       {/* Header */}
-      <div className="flex items-center gap-3 p-4 border-b border-white/10 bg-zinc-950/50 backdrop-blur-md">
+      <div className="flex items-center gap-3 p-4 border-b border-border bg-glass backdrop-blur-md">
         <Wrench className="w-5 h-5 text-primary" />
         <div>
           <h1 className="text-xl font-bold">Agent Tools</h1>
diff --git a/app/src/components/views/agent-view.tsx b/app/src/components/views/agent-view.tsx
index 514a1200..d75decf6 100644
--- a/app/src/components/views/agent-view.tsx
+++ b/app/src/components/views/agent-view.tsx
@@ -452,7 +452,7 @@ export function AgentView() {
       {/* Chat Area */}
       <div className="flex-1 flex flex-col overflow-hidden">
         {/* Header */}
-        <div className="flex items-center justify-between p-4 border-b border-white/10 bg-zinc-950/50 backdrop-blur-md">
+        <div className="flex items-center justify-between p-4 border-b border-border bg-glass backdrop-blur-md">
           <div className="flex items-center gap-3">
             <Button
               variant="ghost"
@@ -503,7 +503,10 @@ export function AgentView() {
 
         {/* Messages */}
         {!currentSessionId ? (
-          <div className="flex-1 flex items-center justify-center" data-testid="no-session-placeholder">
+          <div
+            className="flex-1 flex items-center justify-center"
+            data-testid="no-session-placeholder"
+          >
             <div className="text-center">
               <Bot className="w-12 h-12 text-muted-foreground mx-auto mb-4 opacity-50" />
               <h2 className="text-lg font-semibold mb-2">
diff --git a/app/src/components/views/auto-mode-log.tsx b/app/src/components/views/auto-mode-log.tsx
index ef9f2093..3fd59055 100644
--- a/app/src/components/views/auto-mode-log.tsx
+++ b/app/src/components/views/auto-mode-log.tsx
@@ -37,11 +37,26 @@ export function AutoModeLog({ onClose }: AutoModeLogProps) {
       case "error":
         return <AlertCircle className="w-4 h-4 text-red-500" />;
       case "planning":
-        return <ClipboardList className="w-4 h-4 text-cyan-500" data-testid="planning-phase-icon" />;
+        return (
+          <ClipboardList
+            className="w-4 h-4 text-cyan-500"
+            data-testid="planning-phase-icon"
+          />
+        );
       case "action":
-        return <Zap className="w-4 h-4 text-orange-500" data-testid="action-phase-icon" />;
+        return (
+          <Zap
+            className="w-4 h-4 text-orange-500"
+            data-testid="action-phase-icon"
+          />
+        );
       case "verification":
-        return <ShieldCheck className="w-4 h-4 text-emerald-500" data-testid="verification-phase-icon" />;
+        return (
+          <ShieldCheck
+            className="w-4 h-4 text-emerald-500"
+            data-testid="verification-phase-icon"
+          />
+        );
     }
   };
 
@@ -80,8 +95,8 @@ export function AutoModeLog({ onClose }: AutoModeLogProps) {
   };
 
   return (
-    <Card className="h-full flex flex-col border-white/10 bg-zinc-950/50 backdrop-blur-sm">
-      <CardHeader className="p-4 border-b border-white/10 flex-shrink-0">
+    <Card className="h-full flex flex-col border-border bg-card backdrop-blur-sm">
+      <CardHeader className="p-4 border-b border-border flex-shrink-0">
         <div className="flex items-center justify-between">
           <div className="flex items-center gap-2">
             <Loader2 className="w-5 h-5 text-purple-500 animate-spin" />
@@ -127,12 +142,14 @@ export function AutoModeLog({ onClose }: AutoModeLogProps) {
                   <div
                     key={activity.id}
                     className={cn(
-                      "p-3 rounded-lg bg-zinc-900/50 border-l-4 hover:bg-zinc-900/70 transition-colors",
+                      "p-3 rounded-lg bg-secondary border-l-4 hover:bg-accent transition-colors",
                       getActivityColor(activity.type)
                     )}
                   >
                     <div className="flex items-start gap-3">
-                      <div className="mt-0.5">{getActivityIcon(activity.type)}</div>
+                      <div className="mt-0.5">
+                        {getActivityIcon(activity.type)}
+                      </div>
                       <div className="flex-1 min-w-0">
                         <div className="flex items-baseline gap-2 mb-1">
                           <span className="text-xs text-muted-foreground">
diff --git a/app/src/components/views/board-view.tsx b/app/src/components/views/board-view.tsx
index 46594c79..9c9b09bf 100644
--- a/app/src/components/views/board-view.tsx
+++ b/app/src/components/views/board-view.tsx
@@ -16,7 +16,12 @@ import {
   SortableContext,
   verticalListSortingStrategy,
 } from "@dnd-kit/sortable";
-import { useAppStore, Feature, FeatureImage, FeatureImagePath } from "@/store/app-store";
+import {
+  useAppStore,
+  Feature,
+  FeatureImage,
+  FeatureImagePath,
+} from "@/store/app-store";
 import { getElectronAPI } from "@/lib/electron";
 import { cn } from "@/lib/utils";
 import {
@@ -31,7 +36,10 @@ import { Label } from "@/components/ui/label";
 import { Textarea } from "@/components/ui/textarea";
 import { CategoryAutocomplete } from "@/components/ui/category-autocomplete";
 import { FeatureImageUpload } from "@/components/ui/feature-image-upload";
-import { DescriptionImageDropZone, FeatureImagePath as DescriptionImagePath } from "@/components/ui/description-image-dropzone";
+import {
+  DescriptionImageDropZone,
+  FeatureImagePath as DescriptionImagePath,
+} from "@/components/ui/description-image-dropzone";
 import {
   Dialog,
   DialogContent,
@@ -44,7 +52,20 @@ import { KanbanColumn } from "./kanban-column";
 import { KanbanCard } from "./kanban-card";
 import { AutoModeLog } from "./auto-mode-log";
 import { AgentOutputModal } from "./agent-output-modal";
-import { Plus, RefreshCw, Play, StopCircle, Loader2, ChevronUp, ChevronDown, Users, Trash2, FastForward, FlaskConical, CheckCircle2 } from "lucide-react";
+import {
+  Plus,
+  RefreshCw,
+  Play,
+  StopCircle,
+  Loader2,
+  ChevronUp,
+  ChevronDown,
+  Users,
+  Trash2,
+  FastForward,
+  FlaskConical,
+  CheckCircle2,
+} from "lucide-react";
 import { toast } from "sonner";
 import { Slider } from "@/components/ui/slider";
 import { Checkbox } from "@/components/ui/checkbox";
@@ -92,8 +113,11 @@ export function BoardView() {
   const [showActivityLog, setShowActivityLog] = useState(false);
   const [showOutputModal, setShowOutputModal] = useState(false);
   const [outputFeature, setOutputFeature] = useState<Feature | null>(null);
-  const [featuresWithContext, setFeaturesWithContext] = useState<Set<string>>(new Set());
-  const [showDeleteAllVerifiedDialog, setShowDeleteAllVerifiedDialog] = useState(false);
+  const [featuresWithContext, setFeaturesWithContext] = useState<Set<string>>(
+    new Set()
+  );
+  const [showDeleteAllVerifiedDialog, setShowDeleteAllVerifiedDialog] =
+    useState(false);
   const [persistedCategories, setPersistedCategories] = useState<string[]>([]);
 
   // Make current project available globally for modal
@@ -125,39 +149,36 @@ export function BoardView() {
   const startNextFeaturesRef = useRef<() => void>(() => {});
 
   // Keyboard shortcuts for this view
-  const boardShortcuts: KeyboardShortcut[] = useMemo(
-    () => {
-      const shortcuts: KeyboardShortcut[] = [
-        {
-          key: ACTION_SHORTCUTS.addFeature,
-          action: () => setShowAddDialog(true),
-          description: "Add new feature",
-        },
-        {
-          key: ACTION_SHORTCUTS.startNext,
-          action: () => startNextFeaturesRef.current(),
-          description: "Start next features from backlog",
-        },
-      ];
+  const boardShortcuts: KeyboardShortcut[] = useMemo(() => {
+    const shortcuts: KeyboardShortcut[] = [
+      {
+        key: ACTION_SHORTCUTS.addFeature,
+        action: () => setShowAddDialog(true),
+        description: "Add new feature",
+      },
+      {
+        key: ACTION_SHORTCUTS.startNext,
+        action: () => startNextFeaturesRef.current(),
+        description: "Start next features from backlog",
+      },
+    ];
 
-      // Add shortcuts for in-progress cards (1-9 and 0 for 10th)
-      inProgressFeaturesForShortcuts.slice(0, 10).forEach((feature, index) => {
-        // Keys 1-9 for first 9 cards, 0 for 10th card
-        const key = index === 9 ? "0" : String(index + 1);
-        shortcuts.push({
-          key,
-          action: () => {
-            setOutputFeature(feature);
-            setShowOutputModal(true);
-          },
-          description: `View output for in-progress card ${index + 1}`,
-        });
+    // Add shortcuts for in-progress cards (1-9 and 0 for 10th)
+    inProgressFeaturesForShortcuts.slice(0, 10).forEach((feature, index) => {
+      // Keys 1-9 for first 9 cards, 0 for 10th card
+      const key = index === 9 ? "0" : String(index + 1);
+      shortcuts.push({
+        key,
+        action: () => {
+          setOutputFeature(feature);
+          setShowOutputModal(true);
+        },
+        description: `View output for in-progress card ${index + 1}`,
       });
+    });
 
-      return shortcuts;
-    },
-    [inProgressFeaturesForShortcuts]
-  );
+    return shortcuts;
+  }, [inProgressFeaturesForShortcuts]);
   useKeyboardShortcuts(boardShortcuts);
 
   // Prevent hydration issues
@@ -207,7 +228,9 @@ export function BoardView() {
 
     // If project switched, clear features first to prevent cross-contamination
     if (previousPath !== null && currentPath !== previousPath) {
-      console.log(`[BoardView] Project switch detected: ${previousPath} -> ${currentPath}, clearing features`);
+      console.log(
+        `[BoardView] Project switch detected: ${previousPath} -> ${currentPath}, clearing features`
+      );
       isSwitchingProjectRef.current = true;
       setFeatures([]);
       setPersistedCategories([]); // Also clear categories
@@ -225,14 +248,12 @@ export function BoardView() {
 
       if (result.success && result.content) {
         const parsed = JSON.parse(result.content);
-        const featuresWithIds = parsed.map(
-          (f: any, index: number) => ({
-            ...f,
-            id: f.id || `feature-${index}-${Date.now()}`,
-            status: f.status || "backlog",
-            startedAt: f.startedAt, // Preserve startedAt timestamp
-          })
-        );
+        const featuresWithIds = parsed.map((f: any, index: number) => ({
+          ...f,
+          id: f.id || `feature-${index}-${Date.now()}`,
+          status: f.status || "backlog",
+          startedAt: f.startedAt, // Preserve startedAt timestamp
+        }));
         setFeatures(featuresWithIds);
       }
     } catch (error) {
@@ -270,33 +291,36 @@ export function BoardView() {
   }, [currentProject]);
 
   // Save a new category to the persisted categories file
-  const saveCategory = useCallback(async (category: string) => {
-    if (!currentProject || !category.trim()) return;
+  const saveCategory = useCallback(
+    async (category: string) => {
+      if (!currentProject || !category.trim()) return;
 
-    try {
-      const api = getElectronAPI();
+      try {
+        const api = getElectronAPI();
 
-      // Read existing categories
-      let categories: string[] = [...persistedCategories];
+        // Read existing categories
+        let categories: string[] = [...persistedCategories];
 
-      // Add new category if it doesn't exist
-      if (!categories.includes(category)) {
-        categories.push(category);
-        categories.sort(); // Keep sorted
+        // Add new category if it doesn't exist
+        if (!categories.includes(category)) {
+          categories.push(category);
+          categories.sort(); // Keep sorted
 
-        // Write back to file
-        await api.writeFile(
-          `${currentProject.path}/.automaker/categories.json`,
-          JSON.stringify(categories, null, 2)
-        );
+          // Write back to file
+          await api.writeFile(
+            `${currentProject.path}/.automaker/categories.json`,
+            JSON.stringify(categories, null, 2)
+          );
 
-        // Update state
-        setPersistedCategories(categories);
+          // Update state
+          setPersistedCategories(categories);
+        }
+      } catch (error) {
+        console.error("Failed to save category:", error);
       }
-    } catch (error) {
-      console.error("Failed to save category:", error);
-    }
-  }, [currentProject, persistedCategories]);
+    },
+    [currentProject, persistedCategories]
+  );
 
   // Auto-show activity log when auto mode starts
   useEffect(() => {
@@ -339,7 +363,10 @@ export function BoardView() {
 
         const status = await api.autoMode.status();
         if (status.success && status.runningFeatures) {
-          console.log("[Board] Syncing running tasks from backend:", status.runningFeatures);
+          console.log(
+            "[Board] Syncing running tasks from backend:",
+            status.runningFeatures
+          );
 
           // Clear existing running tasks and add the actual running ones
           const { clearRunningTasks, addRunningTask } = useAppStore.getState();
@@ -361,7 +388,9 @@ export function BoardView() {
   // Check which features have context files
   useEffect(() => {
     const checkAllContexts = async () => {
-      const inProgressFeatures = features.filter((f) => f.status === "in_progress");
+      const inProgressFeatures = features.filter(
+        (f) => f.status === "in_progress"
+      );
       const contextChecks = await Promise.all(
         inProgressFeatures.map(async (f) => ({
           id: f.id,
@@ -447,7 +476,9 @@ export function BoardView() {
     if (draggedFeature.status !== "backlog") {
       // Only allow dragging in_progress/verified if it's a skipTests feature and not currently running
       if (!draggedFeature.skipTests || isRunningTask) {
-        console.log("[Board] Cannot drag feature - TDD feature or currently running");
+        console.log(
+          "[Board] Cannot drag feature - TDD feature or currently running"
+        );
         return;
       }
     }
@@ -472,10 +503,16 @@ export function BoardView() {
     if (targetStatus === draggedFeature.status) return;
 
     // Check concurrency limit before moving to in_progress (only for backlog -> in_progress and if running agent)
-    if (targetStatus === "in_progress" && draggedFeature.status === "backlog" && !autoMode.canStartNewTask) {
+    if (
+      targetStatus === "in_progress" &&
+      draggedFeature.status === "backlog" &&
+      !autoMode.canStartNewTask
+    ) {
       console.log("[Board] Cannot start new task - at max concurrency limit");
       toast.error("Concurrency limit reached", {
-        description: `You can only have ${autoMode.maxConcurrency} task${autoMode.maxConcurrency > 1 ? "s" : ""} running at a time. Wait for a task to complete or increase the limit.`,
+        description: `You can only have ${autoMode.maxConcurrency} task${
+          autoMode.maxConcurrency > 1 ? "s" : ""
+        } running at a time. Wait for a task to complete or increase the limit.`,
       });
       return;
     }
@@ -485,7 +522,10 @@ export function BoardView() {
       // From backlog
       if (targetStatus === "in_progress") {
         // Update with startedAt timestamp
-        updateFeature(featureId, { status: targetStatus, startedAt: new Date().toISOString() });
+        updateFeature(featureId, {
+          status: targetStatus,
+          startedAt: new Date().toISOString(),
+        });
         console.log("[Board] Feature moved to in_progress, starting agent...");
         await handleRunFeature(draggedFeature);
       } else {
@@ -493,23 +533,41 @@ export function BoardView() {
       }
     } else if (draggedFeature.skipTests) {
       // skipTests feature being moved between in_progress and verified
-      if (targetStatus === "verified" && draggedFeature.status === "in_progress") {
+      if (
+        targetStatus === "verified" &&
+        draggedFeature.status === "in_progress"
+      ) {
         // Manual verify via drag
         moveFeature(featureId, "verified");
         toast.success("Feature verified", {
-          description: `Marked as verified: ${draggedFeature.description.slice(0, 50)}${draggedFeature.description.length > 50 ? "..." : ""}`,
+          description: `Marked as verified: ${draggedFeature.description.slice(
+            0,
+            50
+          )}${draggedFeature.description.length > 50 ? "..." : ""}`,
         });
-      } else if (targetStatus === "in_progress" && draggedFeature.status === "verified") {
+      } else if (
+        targetStatus === "in_progress" &&
+        draggedFeature.status === "verified"
+      ) {
         // Move back to in_progress
-        updateFeature(featureId, { status: "in_progress", startedAt: new Date().toISOString() });
+        updateFeature(featureId, {
+          status: "in_progress",
+          startedAt: new Date().toISOString(),
+        });
         toast.info("Feature moved back", {
-          description: `Moved back to In Progress: ${draggedFeature.description.slice(0, 50)}${draggedFeature.description.length > 50 ? "..." : ""}`,
+          description: `Moved back to In Progress: ${draggedFeature.description.slice(
+            0,
+            50
+          )}${draggedFeature.description.length > 50 ? "..." : ""}`,
         });
       } else if (targetStatus === "backlog") {
         // Allow moving skipTests cards back to backlog
         moveFeature(featureId, "backlog");
         toast.info("Feature moved to backlog", {
-          description: `Moved to Backlog: ${draggedFeature.description.slice(0, 50)}${draggedFeature.description.length > 50 ? "..." : ""}`,
+          description: `Moved to Backlog: ${draggedFeature.description.slice(
+            0,
+            50
+          )}${draggedFeature.description.length > 50 ? "..." : ""}`,
         });
       }
     }
@@ -528,7 +586,14 @@ export function BoardView() {
     });
     // Persist the category
     saveCategory(category);
-    setNewFeature({ category: "", description: "", steps: [""], images: [], imagePaths: [], skipTests: false });
+    setNewFeature({
+      category: "",
+      description: "",
+      steps: [""],
+      images: [],
+      imagePaths: [],
+      skipTests: false,
+    });
     setShowAddDialog(false);
   };
 
@@ -560,7 +625,10 @@ export function BoardView() {
       try {
         await autoMode.stopFeature(featureId);
         toast.success("Agent stopped", {
-          description: `Stopped and deleted: ${feature.description.slice(0, 50)}${feature.description.length > 50 ? "..." : ""}`,
+          description: `Stopped and deleted: ${feature.description.slice(
+            0,
+            50
+          )}${feature.description.length > 50 ? "..." : ""}`,
         });
       } catch (error) {
         console.error("[Board] Error stopping feature before delete:", error);
@@ -609,7 +677,10 @@ export function BoardView() {
   const handleVerifyFeature = async (feature: Feature) => {
     if (!currentProject) return;
 
-    console.log("[Board] Verifying feature:", { id: feature.id, description: feature.description });
+    console.log("[Board] Verifying feature:", {
+      id: feature.id,
+      description: feature.description,
+    });
 
     try {
       const api = getElectronAPI();
@@ -641,7 +712,10 @@ export function BoardView() {
   const handleResumeFeature = async (feature: Feature) => {
     if (!currentProject) return;
 
-    console.log("[Board] Resuming feature:", { id: feature.id, description: feature.description });
+    console.log("[Board] Resuming feature:", {
+      id: feature.id,
+      description: feature.description,
+    });
 
     try {
       const api = getElectronAPI();
@@ -672,19 +746,33 @@ export function BoardView() {
 
   // Manual verification handler for skipTests features
   const handleManualVerify = (feature: Feature) => {
-    console.log("[Board] Manually verifying feature:", { id: feature.id, description: feature.description });
+    console.log("[Board] Manually verifying feature:", {
+      id: feature.id,
+      description: feature.description,
+    });
     moveFeature(feature.id, "verified");
     toast.success("Feature verified", {
-      description: `Marked as verified: ${feature.description.slice(0, 50)}${feature.description.length > 50 ? "..." : ""}`,
+      description: `Marked as verified: ${feature.description.slice(0, 50)}${
+        feature.description.length > 50 ? "..." : ""
+      }`,
     });
   };
 
   // Move feature back to in_progress from verified (for skipTests features)
   const handleMoveBackToInProgress = (feature: Feature) => {
-    console.log("[Board] Moving feature back to in_progress:", { id: feature.id, description: feature.description });
-    updateFeature(feature.id, { status: "in_progress", startedAt: new Date().toISOString() });
+    console.log("[Board] Moving feature back to in_progress:", {
+      id: feature.id,
+      description: feature.description,
+    });
+    updateFeature(feature.id, {
+      status: "in_progress",
+      startedAt: new Date().toISOString(),
+    });
     toast.info("Feature moved back", {
-      description: `Moved back to In Progress: ${feature.description.slice(0, 50)}${feature.description.length > 50 ? "..." : ""}`,
+      description: `Moved back to In Progress: ${feature.description.slice(
+        0,
+        50
+      )}${feature.description.length > 50 ? "..." : ""}`,
     });
   };
 
@@ -727,28 +815,31 @@ export function BoardView() {
   };
 
   // Handle number key press when output modal is open
-  const handleOutputModalNumberKeyPress = useCallback((key: string) => {
-    // Convert key to index: 1-9 -> 0-8, 0 -> 9
-    const index = key === "0" ? 9 : parseInt(key, 10) - 1;
+  const handleOutputModalNumberKeyPress = useCallback(
+    (key: string) => {
+      // Convert key to index: 1-9 -> 0-8, 0 -> 9
+      const index = key === "0" ? 9 : parseInt(key, 10) - 1;
 
-    // Get the feature at that index from in-progress features
-    const targetFeature = inProgressFeaturesForShortcuts[index];
+      // Get the feature at that index from in-progress features
+      const targetFeature = inProgressFeaturesForShortcuts[index];
 
-    if (!targetFeature) {
-      // No feature at this index, do nothing
-      return;
-    }
+      if (!targetFeature) {
+        // No feature at this index, do nothing
+        return;
+      }
 
-    // If pressing the same number key as the currently open feature, close the modal
-    if (targetFeature.id === outputFeature?.id) {
-      setShowOutputModal(false);
-    }
-    // If pressing a different number key, switch to that feature's output
-    else {
-      setOutputFeature(targetFeature);
-      // Modal stays open, just showing different content
-    }
-  }, [inProgressFeaturesForShortcuts, outputFeature?.id]);
+      // If pressing the same number key as the currently open feature, close the modal
+      if (targetFeature.id === outputFeature?.id) {
+        setShowOutputModal(false);
+      }
+      // If pressing a different number key, switch to that feature's output
+      else {
+        setOutputFeature(targetFeature);
+        // Modal stays open, just showing different content
+      }
+    },
+    [inProgressFeaturesForShortcuts, outputFeature?.id]
+  );
 
   const handleForceStopFeature = async (feature: Feature) => {
     try {
@@ -756,12 +847,15 @@ export function BoardView() {
       // Move the feature back to backlog status after stopping
       moveFeature(feature.id, "backlog");
       toast.success("Agent stopped", {
-        description: `Stopped working on: ${feature.description.slice(0, 50)}${feature.description.length > 50 ? "..." : ""}`,
+        description: `Stopped working on: ${feature.description.slice(0, 50)}${
+          feature.description.length > 50 ? "..." : ""
+        }`,
       });
     } catch (error) {
       console.error("[Board] Error stopping feature:", error);
       toast.error("Failed to stop agent", {
-        description: error instanceof Error ? error.message : "An error occurred",
+        description:
+          error instanceof Error ? error.message : "An error occurred",
       });
     }
   };
@@ -773,7 +867,9 @@ export function BoardView() {
 
     if (availableSlots <= 0) {
       toast.error("Concurrency limit reached", {
-        description: `You can only have ${maxConcurrency} task${maxConcurrency > 1 ? "s" : ""} running at a time. Wait for a task to complete or increase the limit.`,
+        description: `You can only have ${maxConcurrency} task${
+          maxConcurrency > 1 ? "s" : ""
+        } running at a time. Wait for a task to complete or increase the limit.`,
       });
       return;
     }
@@ -789,14 +885,28 @@ export function BoardView() {
 
     for (const feature of featuresToStart) {
       // Update the feature status with startedAt timestamp
-      updateFeature(feature.id, { status: "in_progress", startedAt: new Date().toISOString() });
+      updateFeature(feature.id, {
+        status: "in_progress",
+        startedAt: new Date().toISOString(),
+      });
       // Start the agent for this feature
       await handleRunFeature(feature);
     }
 
-    toast.success(`Started ${featuresToStart.length} feature${featuresToStart.length > 1 ? "s" : ""}`, {
-      description: featuresToStart.map((f) => f.description.slice(0, 30) + (f.description.length > 30 ? "..." : "")).join(", "),
-    });
+    toast.success(
+      `Started ${featuresToStart.length} feature${
+        featuresToStart.length > 1 ? "s" : ""
+      }`,
+      {
+        description: featuresToStart
+          .map(
+            (f) =>
+              f.description.slice(0, 30) +
+              (f.description.length > 30 ? "..." : "")
+          )
+          .join(", "),
+      }
+    );
   }, [features, maxConcurrency, runningAutoTasks.length, updateFeature]);
 
   // Update ref when handleStartNextFeatures changes
@@ -832,7 +942,7 @@ export function BoardView() {
       data-testid="board-view"
     >
       {/* Header */}
-      <div className="flex items-center justify-between p-4 border-b border-white/10 bg-zinc-950/50 backdrop-blur-md">
+      <div className="flex items-center justify-between p-4 border-b border-border bg-glass backdrop-blur-md">
         <div>
           <h1 className="text-xl font-bold">Kanban Board</h1>
           <p className="text-sm text-muted-foreground">{currentProject.name}</p>
@@ -841,10 +951,10 @@ export function BoardView() {
           {/* Concurrency Slider - only show after mount to prevent hydration issues */}
           {isMounted && (
             <div
-              className="flex items-center gap-2 px-3 py-1.5 rounded-lg bg-white/5 border border-white/10"
+              className="flex items-center gap-2 px-3 py-1.5 rounded-lg bg-secondary border border-border"
               data-testid="concurrency-slider-container"
             >
-              <Users className="w-4 h-4 text-zinc-400" />
+              <Users className="w-4 h-4 text-muted-foreground" />
               <Slider
                 value={[maxConcurrency]}
                 onValueChange={(value) => setMaxConcurrency(value[0])}
@@ -855,7 +965,7 @@ export function BoardView() {
                 data-testid="concurrency-slider"
               />
               <span
-                className="text-sm text-zinc-400 min-w-[2ch] text-center"
+                className="text-sm text-muted-foreground min-w-[2ch] text-center"
                 data-testid="concurrency-value"
               >
                 {maxConcurrency}
@@ -878,11 +988,10 @@ export function BoardView() {
                 </Button>
               ) : (
                 <Button
-                  variant="default"
+                  variant="secondary"
                   size="sm"
                   onClick={() => autoMode.start()}
                   data-testid="start-auto-mode"
-                  className="bg-gradient-to-r from-purple-600 to-blue-600 hover:from-purple-700 hover:to-blue-700"
                 >
                   <Play className="w-4 h-4 mr-2" />
                   Auto Mode
@@ -928,110 +1037,117 @@ export function BoardView() {
       {/* Main Content Area */}
       <div className="flex-1 flex overflow-hidden">
         {/* Kanban Columns */}
-        <div className={cn(
-          "flex-1 overflow-x-auto p-4",
-          showActivityLog && "transition-all"
-        )}>
-        <DndContext
-          sensors={sensors}
-          collisionDetection={collisionDetectionStrategy}
-          onDragStart={handleDragStart}
-          onDragEnd={handleDragEnd}
+        <div
+          className={cn(
+            "flex-1 overflow-x-auto p-4",
+            showActivityLog && "transition-all"
+          )}
         >
-          <div className="flex gap-4 h-full min-w-max">
-            {COLUMNS.map((column) => {
-              const columnFeatures = getColumnFeatures(column.id);
-              return (
-                <KanbanColumn
-                  key={column.id}
-                  id={column.id}
-                  title={column.title}
-                  color={column.color}
-                  count={columnFeatures.length}
-                  isDoubleWidth={column.id === "in_progress"}
-                  headerAction={
-                    column.id === "verified" && columnFeatures.length > 0 ? (
-                      <Button
-                        variant="ghost"
-                        size="sm"
-                        className="h-6 px-2 text-xs text-destructive hover:text-destructive hover:bg-destructive/10"
-                        onClick={() => setShowDeleteAllVerifiedDialog(true)}
-                        data-testid="delete-all-verified-button"
-                      >
-                        <Trash2 className="w-3 h-3 mr-1" />
-                        Delete All
-                      </Button>
-                    ) : column.id === "backlog" && columnFeatures.length > 0 ? (
-                      <Button
-                        variant="ghost"
-                        size="sm"
-                        className="h-6 px-2 text-xs text-primary hover:text-primary hover:bg-primary/10"
-                        onClick={handleStartNextFeatures}
-                        data-testid="start-next-button"
-                      >
-                        <FastForward className="w-3 h-3 mr-1" />
-                        Start Next
-                        <span className="ml-1 px-1 py-0.5 text-[9px] font-mono rounded bg-white/10 border border-white/20">
-                          {ACTION_SHORTCUTS.startNext}
-                        </span>
-                      </Button>
-                    ) : undefined
-                  }
-                >
-                  <SortableContext
-                    items={columnFeatures.map((f) => f.id)}
-                    strategy={verticalListSortingStrategy}
+          <DndContext
+            sensors={sensors}
+            collisionDetection={collisionDetectionStrategy}
+            onDragStart={handleDragStart}
+            onDragEnd={handleDragEnd}
+          >
+            <div className="flex gap-4 h-full min-w-max">
+              {COLUMNS.map((column) => {
+                const columnFeatures = getColumnFeatures(column.id);
+                return (
+                  <KanbanColumn
+                    key={column.id}
+                    id={column.id}
+                    title={column.title}
+                    color={column.color}
+                    count={columnFeatures.length}
+                    isDoubleWidth={column.id === "in_progress"}
+                    headerAction={
+                      column.id === "verified" && columnFeatures.length > 0 ? (
+                        <Button
+                          variant="ghost"
+                          size="sm"
+                          className="h-6 px-2 text-xs text-destructive hover:text-destructive hover:bg-destructive/10"
+                          onClick={() => setShowDeleteAllVerifiedDialog(true)}
+                          data-testid="delete-all-verified-button"
+                        >
+                          <Trash2 className="w-3 h-3 mr-1" />
+                          Delete All
+                        </Button>
+                      ) : column.id === "backlog" &&
+                        columnFeatures.length > 0 ? (
+                        <Button
+                          variant="ghost"
+                          size="sm"
+                          className="h-6 px-2 text-xs text-primary hover:text-primary hover:bg-primary/10"
+                          onClick={handleStartNextFeatures}
+                          data-testid="start-next-button"
+                        >
+                          <FastForward className="w-3 h-3 mr-1" />
+                          Start Next
+                          <span className="ml-1 px-1 py-0.5 text-[9px] font-mono rounded bg-white/10 border border-white/20">
+                            {ACTION_SHORTCUTS.startNext}
+                          </span>
+                        </Button>
+                      ) : undefined
+                    }
                   >
-                    {columnFeatures.map((feature, index) => {
-                      // Calculate shortcut key for in-progress cards (first 10 get 1-9, 0)
-                      let shortcutKey: string | undefined;
-                      if (column.id === "in_progress" && index < 10) {
-                        shortcutKey = index === 9 ? "0" : String(index + 1);
-                      }
-                      return (
-                        <KanbanCard
-                          key={feature.id}
-                          feature={feature}
-                          onEdit={() => setEditingFeature(feature)}
-                          onDelete={() => handleDeleteFeature(feature.id)}
-                          onViewOutput={() => handleViewOutput(feature)}
-                          onVerify={() => handleVerifyFeature(feature)}
-                          onResume={() => handleResumeFeature(feature)}
-                          onForceStop={() => handleForceStopFeature(feature)}
-                          onManualVerify={() => handleManualVerify(feature)}
-                          onMoveBackToInProgress={() => handleMoveBackToInProgress(feature)}
-                          hasContext={featuresWithContext.has(feature.id)}
-                          isCurrentAutoTask={runningAutoTasks.includes(feature.id)}
-                          shortcutKey={shortcutKey}
-                        />
-                      );
-                    })}
-                  </SortableContext>
-                </KanbanColumn>
-              );
-            })}
-          </div>
+                    <SortableContext
+                      items={columnFeatures.map((f) => f.id)}
+                      strategy={verticalListSortingStrategy}
+                    >
+                      {columnFeatures.map((feature, index) => {
+                        // Calculate shortcut key for in-progress cards (first 10 get 1-9, 0)
+                        let shortcutKey: string | undefined;
+                        if (column.id === "in_progress" && index < 10) {
+                          shortcutKey = index === 9 ? "0" : String(index + 1);
+                        }
+                        return (
+                          <KanbanCard
+                            key={feature.id}
+                            feature={feature}
+                            onEdit={() => setEditingFeature(feature)}
+                            onDelete={() => handleDeleteFeature(feature.id)}
+                            onViewOutput={() => handleViewOutput(feature)}
+                            onVerify={() => handleVerifyFeature(feature)}
+                            onResume={() => handleResumeFeature(feature)}
+                            onForceStop={() => handleForceStopFeature(feature)}
+                            onManualVerify={() => handleManualVerify(feature)}
+                            onMoveBackToInProgress={() =>
+                              handleMoveBackToInProgress(feature)
+                            }
+                            hasContext={featuresWithContext.has(feature.id)}
+                            isCurrentAutoTask={runningAutoTasks.includes(
+                              feature.id
+                            )}
+                            shortcutKey={shortcutKey}
+                          />
+                        );
+                      })}
+                    </SortableContext>
+                  </KanbanColumn>
+                );
+              })}
+            </div>
 
-          <DragOverlay>
-            {activeFeature && (
-              <Card className="w-72 opacity-90 rotate-3 shadow-xl">
-                <CardHeader className="p-3">
-                  <CardTitle className="text-sm">
-                    {activeFeature.description}
-                  </CardTitle>
-                  <CardDescription className="text-xs">
-                    {activeFeature.category}
-                  </CardDescription>
-                </CardHeader>
-              </Card>
-            )}
-          </DragOverlay>
-        </DndContext>
+            <DragOverlay>
+              {activeFeature && (
+                <Card className="w-72 opacity-90 rotate-3 shadow-xl">
+                  <CardHeader className="p-3">
+                    <CardTitle className="text-sm">
+                      {activeFeature.description}
+                    </CardTitle>
+                    <CardDescription className="text-xs">
+                      {activeFeature.category}
+                    </CardDescription>
+                  </CardHeader>
+                </Card>
+              )}
+            </DragOverlay>
+          </DndContext>
         </div>
 
         {/* Activity Log Panel */}
         {showActivityLog && (
-          <div className="w-96 border-l border-white/10 flex-shrink-0">
+          <div className="w-96 border-l border-border flex-shrink-0">
             <AutoModeLog onClose={() => setShowActivityLog(false)} />
           </div>
         )}
@@ -1042,7 +1158,11 @@ export function BoardView() {
         <DialogContent
           data-testid="add-feature-dialog"
           onKeyDown={(e) => {
-            if ((e.metaKey || e.ctrlKey) && e.key === "Enter" && newFeature.description) {
+            if (
+              (e.metaKey || e.ctrlKey) &&
+              e.key === "Enter" &&
+              newFeature.description
+            ) {
               e.preventDefault();
               handleAddFeature();
             }
@@ -1128,7 +1248,8 @@ export function BoardView() {
               </div>
             </div>
             <p className="text-xs text-muted-foreground">
-              When enabled, this feature will require manual verification instead of automated TDD.
+              When enabled, this feature will require manual verification
+              instead of automated TDD.
             </p>
           </div>
           <DialogFooter>
@@ -1227,19 +1348,26 @@ export function BoardView() {
                   id="edit-skip-tests"
                   checked={editingFeature.skipTests ?? false}
                   onCheckedChange={(checked) =>
-                    setEditingFeature({ ...editingFeature, skipTests: checked === true })
+                    setEditingFeature({
+                      ...editingFeature,
+                      skipTests: checked === true,
+                    })
                   }
                   data-testid="edit-skip-tests-checkbox"
                 />
                 <div className="flex items-center gap-2">
-                  <Label htmlFor="edit-skip-tests" className="text-sm cursor-pointer">
+                  <Label
+                    htmlFor="edit-skip-tests"
+                    className="text-sm cursor-pointer"
+                  >
                     Skip automated testing
                   </Label>
                   <FlaskConical className="w-3.5 h-3.5 text-muted-foreground" />
                 </div>
               </div>
               <p className="text-xs text-muted-foreground">
-                When enabled, this feature will require manual verification instead of automated TDD.
+                When enabled, this feature will require manual verification
+                instead of automated TDD.
               </p>
             </div>
           )}
@@ -1267,21 +1395,29 @@ export function BoardView() {
       />
 
       {/* Delete All Verified Dialog */}
-      <Dialog open={showDeleteAllVerifiedDialog} onOpenChange={setShowDeleteAllVerifiedDialog}>
+      <Dialog
+        open={showDeleteAllVerifiedDialog}
+        onOpenChange={setShowDeleteAllVerifiedDialog}
+      >
         <DialogContent data-testid="delete-all-verified-dialog">
           <DialogHeader>
             <DialogTitle>Delete All Verified Features</DialogTitle>
             <DialogDescription>
-              Are you sure you want to delete all verified features? This action cannot be undone.
+              Are you sure you want to delete all verified features? This action
+              cannot be undone.
               {getColumnFeatures("verified").length > 0 && (
                 <span className="block mt-2 text-yellow-500">
-                  {getColumnFeatures("verified").length} feature(s) will be deleted.
+                  {getColumnFeatures("verified").length} feature(s) will be
+                  deleted.
                 </span>
               )}
             </DialogDescription>
           </DialogHeader>
           <DialogFooter>
-            <Button variant="ghost" onClick={() => setShowDeleteAllVerifiedDialog(false)}>
+            <Button
+              variant="ghost"
+              onClick={() => setShowDeleteAllVerifiedDialog(false)}
+            >
               Cancel
             </Button>
             <Button
@@ -1297,7 +1433,10 @@ export function BoardView() {
                     try {
                       await autoMode.stopFeature(feature.id);
                     } catch (error) {
-                      console.error("[Board] Error stopping feature before delete:", error);
+                      console.error(
+                        "[Board] Error stopping feature before delete:",
+                        error
+                      );
                     }
                   }
 
diff --git a/app/src/components/views/context-view.tsx b/app/src/components/views/context-view.tsx
index 22be14b3..8b1b484d 100644
--- a/app/src/components/views/context-view.tsx
+++ b/app/src/components/views/context-view.tsx
@@ -53,7 +53,9 @@ export function ContextView() {
   const [isDeleteDialogOpen, setIsDeleteDialogOpen] = useState(false);
   const [newFileName, setNewFileName] = useState("");
   const [newFileType, setNewFileType] = useState<"text" | "image">("text");
-  const [uploadedImageData, setUploadedImageData] = useState<string | null>(null);
+  const [uploadedImageData, setUploadedImageData] = useState<string | null>(
+    null
+  );
   const [newFileContent, setNewFileContent] = useState("");
   const [isDropHovering, setIsDropHovering] = useState(false);
 
@@ -78,7 +80,15 @@ export function ContextView() {
 
   // Determine if a file is an image based on extension
   const isImageFile = (filename: string): boolean => {
-    const imageExtensions = [".png", ".jpg", ".jpeg", ".gif", ".webp", ".svg", ".bmp"];
+    const imageExtensions = [
+      ".png",
+      ".jpg",
+      ".jpeg",
+      ".gif",
+      ".webp",
+      ".svg",
+      ".bmp",
+    ];
     const ext = filename.toLowerCase().substring(filename.lastIndexOf("."));
     return imageExtensions.includes(ext);
   };
@@ -270,7 +280,9 @@ export function ContextView() {
   };
 
   // Handle drag and drop for .txt and .md files in the add context dialog textarea
-  const handleTextAreaDrop = async (e: React.DragEvent<HTMLTextAreaElement>) => {
+  const handleTextAreaDrop = async (
+    e: React.DragEvent<HTMLTextAreaElement>
+  ) => {
     e.preventDefault();
     e.stopPropagation();
     setIsDropHovering(false);
@@ -282,8 +294,8 @@ export function ContextView() {
     const fileName = file.name.toLowerCase();
 
     // Only accept .txt and .md files
-    if (!fileName.endsWith('.txt') && !fileName.endsWith('.md')) {
-      console.warn('Only .txt and .md files are supported for drag and drop');
+    if (!fileName.endsWith(".txt") && !fileName.endsWith(".md")) {
+      console.warn("Only .txt and .md files are supported for drag and drop");
       return;
     }
 
@@ -340,7 +352,7 @@ export function ContextView() {
       data-testid="context-view"
     >
       {/* Header */}
-      <div className="flex items-center justify-between p-4 border-b border-white/10 bg-zinc-950/50 backdrop-blur-md">
+      <div className="flex items-center justify-between p-4 border-b border-border bg-glass backdrop-blur-md">
         <div className="flex items-center gap-3">
           <BookOpen className="w-5 h-5 text-muted-foreground" />
           <div>
@@ -381,7 +393,10 @@ export function ContextView() {
               Context Files ({contextFiles.length})
             </h2>
           </div>
-          <div className="flex-1 overflow-y-auto p-2" data-testid="context-file-list">
+          <div
+            className="flex-1 overflow-y-auto p-2"
+            data-testid="context-file-list"
+          >
             {contextFiles.length === 0 ? (
               <div className="flex flex-col items-center justify-center h-full text-center p-4">
                 <Upload className="w-8 h-8 text-zinc-500 mb-2" />
@@ -430,7 +445,9 @@ export function ContextView() {
                   ) : (
                     <FileText className="w-4 h-4 text-zinc-400" />
                   )}
-                  <span className="text-sm font-medium">{selectedFile.name}</span>
+                  <span className="text-sm font-medium">
+                    {selectedFile.name}
+                  </span>
                 </div>
                 <div className="flex gap-2">
                   {selectedFile.type === "text" && (
@@ -487,9 +504,7 @@ export function ContextView() {
             <div className="flex-1 flex items-center justify-center">
               <div className="text-center">
                 <File className="w-12 h-12 text-zinc-600 mx-auto mb-3" />
-                <p className="text-zinc-500">
-                  Select a file to view or edit
-                </p>
+                <p className="text-zinc-500">Select a file to view or edit</p>
                 <p className="text-zinc-600 text-sm mt-1">
                   Or drop files here to add them
                 </p>
@@ -536,7 +551,9 @@ export function ContextView() {
                 id="filename"
                 value={newFileName}
                 onChange={(e) => setNewFileName(e.target.value)}
-                placeholder={newFileType === "text" ? "context.md" : "image.png"}
+                placeholder={
+                  newFileType === "text" ? "context.md" : "image.png"
+                }
                 data-testid="new-file-name"
               />
             </div>
@@ -569,7 +586,9 @@ export function ContextView() {
                     <div className="absolute inset-0 flex items-center justify-center bg-brand-500/20 rounded-lg pointer-events-none">
                       <div className="flex flex-col items-center text-brand-400">
                         <Upload className="w-8 h-8 mb-2" />
-                        <span className="text-sm font-medium">Drop .txt or .md file here</span>
+                        <span className="text-sm font-medium">
+                          Drop .txt or .md file here
+                        </span>
                       </div>
                     </div>
                   )}
@@ -606,7 +625,9 @@ export function ContextView() {
                       <Upload className="w-8 h-8 text-zinc-500 mb-2" />
                     )}
                     <span className="text-sm text-zinc-400">
-                      {uploadedImageData ? "Click to change" : "Click to upload"}
+                      {uploadedImageData
+                        ? "Click to change"
+                        : "Click to upload"}
                     </span>
                   </label>
                 </div>
@@ -628,7 +649,10 @@ export function ContextView() {
             </Button>
             <Button
               onClick={handleAddFile}
-              disabled={!newFileName.trim() || (newFileType === "image" && !uploadedImageData)}
+              disabled={
+                !newFileName.trim() ||
+                (newFileType === "image" && !uploadedImageData)
+              }
               data-testid="confirm-add-file"
             >
               Add File
@@ -643,11 +667,15 @@ export function ContextView() {
           <DialogHeader>
             <DialogTitle>Delete Context File</DialogTitle>
             <DialogDescription>
-              Are you sure you want to delete "{selectedFile?.name}"? This action cannot be undone.
+              Are you sure you want to delete "{selectedFile?.name}"? This
+              action cannot be undone.
             </DialogDescription>
           </DialogHeader>
           <DialogFooter>
-            <Button variant="outline" onClick={() => setIsDeleteDialogOpen(false)}>
+            <Button
+              variant="outline"
+              onClick={() => setIsDeleteDialogOpen(false)}
+            >
               Cancel
             </Button>
             <Button
diff --git a/app/src/components/views/interview-view.tsx b/app/src/components/views/interview-view.tsx
index 6d74d4a3..331c1e37 100644
--- a/app/src/components/views/interview-view.tsx
+++ b/app/src/components/views/interview-view.tsx
@@ -357,7 +357,7 @@ export function InterviewView() {
       data-testid="interview-view"
     >
       {/* Header */}
-      <div className="flex items-center justify-between p-4 border-b border-white/10 bg-zinc-950/50 backdrop-blur-md">
+      <div className="flex items-center justify-between p-4 border-b border-border bg-glass backdrop-blur-md">
         <div className="flex items-center gap-3">
           <Button
             variant="ghost"
@@ -545,7 +545,7 @@ export function InterviewView() {
                   <Button
                     onClick={handleCreateProject}
                     disabled={!projectName || !projectPath || isGenerating}
-                    className="w-full bg-gradient-to-r from-brand-500 to-purple-600 hover:from-brand-600 hover:to-purple-700 text-white border-0"
+                    className="w-full bg-linear-to-r from-brand-500 to-brand-600 hover:from-brand-600 hover:to-brand-600 text-primary-foreground border-0"
                     data-testid="interview-create-project"
                   >
                     {isGenerating ? (
diff --git a/app/src/components/views/kanban-card.tsx b/app/src/components/views/kanban-card.tsx
index da3c16ff..3ae7219a 100644
--- a/app/src/components/views/kanban-card.tsx
+++ b/app/src/components/views/kanban-card.tsx
@@ -87,8 +87,7 @@ export function KanbanCard({
   // - skipTests items can be dragged even when in_progress or verified (unless currently running)
   // - Non-skipTests (TDD) items in progress or verified cannot be dragged
   const isDraggable =
-    feature.status === "backlog" ||
-    (feature.skipTests && !isCurrentAutoTask);
+    feature.status === "backlog" || (feature.skipTests && !isCurrentAutoTask);
   const {
     attributes,
     listeners,
@@ -111,7 +110,7 @@ export function KanbanCard({
       ref={setNodeRef}
       style={style}
       className={cn(
-        "cursor-grab active:cursor-grabbing transition-all backdrop-blur-sm border-white/10 relative",
+        "cursor-grab active:cursor-grabbing transition-all backdrop-blur-sm border-border relative",
         isDragging && "opacity-50 scale-105 shadow-lg",
         isCurrentAutoTask &&
           "border-purple-500 border-2 shadow-purple-500/50 shadow-lg animate-pulse"
@@ -122,7 +121,7 @@ export function KanbanCard({
       {/* Shortcut key badge for in-progress cards */}
       {shortcutKey && (
         <div
-          className="absolute top-2 left-2 px-1.5 py-0.5 text-[10px] font-mono rounded bg-white/10 border border-white/20 text-zinc-300 z-10"
+          className="absolute top-2 left-2 px-1.5 py-0.5 text-[10px] font-mono rounded bg-muted border border-border text-muted-foreground z-10"
           data-testid={`shortcut-key-${feature.id}`}
         >
           {shortcutKey}
@@ -399,7 +398,8 @@ export function KanbanCard({
           <DialogHeader>
             <DialogTitle>Delete Feature</DialogTitle>
             <DialogDescription>
-              Are you sure you want to delete this feature? This action cannot be undone.
+              Are you sure you want to delete this feature? This action cannot
+              be undone.
             </DialogDescription>
           </DialogHeader>
           <DialogFooter>
diff --git a/app/src/components/views/kanban-column.tsx b/app/src/components/views/kanban-column.tsx
index 629c38e0..93755e44 100644
--- a/app/src/components/views/kanban-column.tsx
+++ b/app/src/components/views/kanban-column.tsx
@@ -29,14 +29,14 @@ export function KanbanColumn({
     <div
       ref={setNodeRef}
       className={cn(
-        "flex flex-col h-full rounded-lg bg-zinc-900/50 backdrop-blur-sm border border-white/5 transition-colors",
+        "flex flex-col h-full rounded-lg bg-card backdrop-blur-sm border border-border transition-colors",
         isDoubleWidth ? "w-[37rem]" : "w-72",
-        isOver && "bg-zinc-800/50"
+        isOver && "bg-accent"
       )}
       data-testid={`kanban-column-${id}`}
     >
       {/* Column Header */}
-      <div className="flex items-center gap-2 p-3 border-b border-white/5">
+      <div className="flex items-center gap-2 p-3 border-b border-border">
         <div className={cn("w-3 h-3 rounded-full", color)} />
         <h3 className="font-medium text-sm flex-1">{title}</h3>
         {headerAction}
diff --git a/app/src/components/views/settings-view.tsx b/app/src/components/views/settings-view.tsx
index 295cbd42..968096ab 100644
--- a/app/src/components/views/settings-view.tsx
+++ b/app/src/components/views/settings-view.tsx
@@ -5,20 +5,55 @@ import { useAppStore } from "@/store/app-store";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
-import { Settings, Key, Eye, EyeOff, CheckCircle2, AlertCircle, Loader2, Zap, Sun, Moon, Palette } from "lucide-react";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import {
+  Settings,
+  Key,
+  Eye,
+  EyeOff,
+  CheckCircle2,
+  AlertCircle,
+  Loader2,
+  Zap,
+  Sun,
+  Moon,
+  Palette,
+  Terminal,
+  Ghost,
+  Snowflake,
+  Flame,
+  Sparkles,
+  Eclipse,
+  Trees,
+  Cat,
+  Atom,
+  Radio,
+} from "lucide-react";
 
 export function SettingsView() {
-  const { apiKeys, setApiKeys, setCurrentView, theme, setTheme } = useAppStore();
+  const { apiKeys, setApiKeys, setCurrentView, theme, setTheme } =
+    useAppStore();
   const [anthropicKey, setAnthropicKey] = useState(apiKeys.anthropic);
   const [googleKey, setGoogleKey] = useState(apiKeys.google);
   const [showAnthropicKey, setShowAnthropicKey] = useState(false);
   const [showGoogleKey, setShowGoogleKey] = useState(false);
   const [saved, setSaved] = useState(false);
   const [testingConnection, setTestingConnection] = useState(false);
-  const [testResult, setTestResult] = useState<{ success: boolean; message: string } | null>(null);
+  const [testResult, setTestResult] = useState<{
+    success: boolean;
+    message: string;
+  } | null>(null);
   const [testingGeminiConnection, setTestingGeminiConnection] = useState(false);
-  const [geminiTestResult, setGeminiTestResult] = useState<{ success: boolean; message: string } | null>(null);
+  const [geminiTestResult, setGeminiTestResult] = useState<{
+    success: boolean;
+    message: string;
+  } | null>(null);
 
   useEffect(() => {
     setAnthropicKey(apiKeys.anthropic);
@@ -41,12 +76,21 @@ export function SettingsView() {
       const data = await response.json();
 
       if (response.ok && data.success) {
-        setTestResult({ success: true, message: data.message || "Connection successful! Claude responded." });
+        setTestResult({
+          success: true,
+          message: data.message || "Connection successful! Claude responded.",
+        });
       } else {
-        setTestResult({ success: false, message: data.error || "Failed to connect to Claude API." });
+        setTestResult({
+          success: false,
+          message: data.error || "Failed to connect to Claude API.",
+        });
       }
     } catch (error) {
-      setTestResult({ success: false, message: "Network error. Please check your connection." });
+      setTestResult({
+        success: false,
+        message: "Network error. Please check your connection.",
+      });
     } finally {
       setTestingConnection(false);
     }
@@ -68,12 +112,21 @@ export function SettingsView() {
       const data = await response.json();
 
       if (response.ok && data.success) {
-        setGeminiTestResult({ success: true, message: data.message || "Connection successful! Gemini responded." });
+        setGeminiTestResult({
+          success: true,
+          message: data.message || "Connection successful! Gemini responded.",
+        });
       } else {
-        setGeminiTestResult({ success: false, message: data.error || "Failed to connect to Gemini API." });
+        setGeminiTestResult({
+          success: false,
+          message: data.error || "Failed to connect to Gemini API.",
+        });
       }
     } catch (error) {
-      setGeminiTestResult({ success: false, message: "Network error. Please check your connection." });
+      setGeminiTestResult({
+        success: false,
+        message: "Network error. Please check your connection.",
+      });
     } finally {
       setTestingGeminiConnection(false);
     }
@@ -89,17 +142,22 @@ export function SettingsView() {
   };
 
   return (
-    <div className="flex-1 flex flex-col overflow-hidden content-bg" data-testid="settings-view">
+    <div
+      className="flex-1 flex flex-col overflow-hidden content-bg"
+      data-testid="settings-view"
+    >
       {/* Header Section */}
-      <div className="flex-shrink-0 border-b border-white/10 bg-zinc-950/50 backdrop-blur-md">
+      <div className="shrink-0 border-b border-border bg-glass backdrop-blur-md">
         <div className="px-8 py-6">
           <div className="flex items-center gap-3">
-            <div className="w-10 h-10 rounded-xl bg-gradient-to-br from-brand-500 to-purple-600 shadow-lg shadow-brand-500/20 flex items-center justify-center">
-              <Settings className="w-5 h-5 text-white" />
+            <div className="w-10 h-10 rounded-xl bg-linear-to-br from-brand-500 to-brand-600 shadow-lg shadow-brand-500/20 flex items-center justify-center">
+              <Settings className="w-5 h-5 text-primary-foreground" />
             </div>
             <div>
-              <h1 className="text-2xl font-bold text-white">Settings</h1>
-              <p className="text-sm text-zinc-400">Configure your API keys and preferences</p>
+              <h1 className="text-2xl font-bold text-foreground">Settings</h1>
+              <p className="text-sm text-muted-foreground">
+                Configure your API keys and preferences
+              </p>
             </div>
           </div>
         </div>
@@ -109,25 +167,28 @@ export function SettingsView() {
       <div className="flex-1 overflow-y-auto p-8">
         <div className="max-w-4xl mx-auto space-y-6">
           {/* API Keys Section */}
-          <div className="rounded-xl border border-white/10 bg-zinc-900/50 backdrop-blur-md overflow-hidden">
-            <div className="p-6 border-b border-white/10">
+          <div className="rounded-xl border border-border bg-card backdrop-blur-md overflow-hidden">
+            <div className="p-6 border-b border-border">
               <div className="flex items-center gap-2 mb-2">
                 <Key className="w-5 h-5 text-brand-500" />
-                <h2 className="text-lg font-semibold text-white">API Keys</h2>
+                <h2 className="text-lg font-semibold text-foreground">
+                  API Keys
+                </h2>
               </div>
-              <p className="text-sm text-zinc-400">
-                Configure your AI provider API keys. Keys are stored locally in your browser.
+              <p className="text-sm text-muted-foreground">
+                Configure your AI provider API keys. Keys are stored locally in
+                your browser.
               </p>
             </div>
             <div className="p-6 space-y-6">
               {/* Claude/Anthropic API Key */}
               <div className="space-y-3">
                 <div className="flex items-center gap-2">
-                  <Label htmlFor="anthropic-key" className="text-zinc-300">
+                  <Label htmlFor="anthropic-key" className="text-foreground">
                     Anthropic API Key (Claude)
                   </Label>
                   {apiKeys.anthropic && (
-                    <CheckCircle2 className="w-4 h-4 text-green-500" />
+                    <CheckCircle2 className="w-4 h-4 text-brand-500" />
                   )}
                 </div>
                 <div className="flex gap-2">
@@ -138,14 +199,14 @@ export function SettingsView() {
                       value={anthropicKey}
                       onChange={(e) => setAnthropicKey(e.target.value)}
                       placeholder="sk-ant-..."
-                      className="pr-10 bg-zinc-950/50 border-white/10 text-white placeholder:text-zinc-500"
+                      className="pr-10 bg-input border-border text-foreground placeholder:text-muted-foreground"
                       data-testid="anthropic-api-key-input"
                     />
                     <Button
                       type="button"
                       variant="ghost"
                       size="icon"
-                      className="absolute right-0 top-0 h-full px-3 text-zinc-400 hover:text-white hover:bg-transparent"
+                      className="absolute right-0 top-0 h-full px-3 text-muted-foreground hover:text-foreground hover:bg-transparent"
                       onClick={() => setShowAnthropicKey(!showAnthropicKey)}
                       data-testid="toggle-anthropic-visibility"
                     >
@@ -161,7 +222,7 @@ export function SettingsView() {
                     variant="secondary"
                     onClick={handleTestConnection}
                     disabled={!anthropicKey || testingConnection}
-                    className="bg-white/5 hover:bg-white/10 text-white border border-white/10"
+                    className="bg-secondary hover:bg-accent text-secondary-foreground border border-border"
                     data-testid="test-claude-connection"
                   >
                     {testingConnection ? (
@@ -187,14 +248,15 @@ export function SettingsView() {
                   >
                     console.anthropic.com
                   </a>
-                  . Alternatively, the CLAUDE_CODE_OAUTH_TOKEN environment variable can be used.
+                  . Alternatively, the CLAUDE_CODE_OAUTH_TOKEN environment
+                  variable can be used.
                 </p>
                 {testResult && (
                   <div
                     className={`flex items-center gap-2 p-3 rounded-lg ${
                       testResult.success
-                        ? 'bg-green-500/10 border border-green-500/20 text-green-400'
-                        : 'bg-red-500/10 border border-red-500/20 text-red-400'
+                        ? "bg-green-500/10 border border-green-500/20 text-green-400"
+                        : "bg-red-500/10 border border-red-500/20 text-red-400"
                     }`}
                     data-testid="test-connection-result"
                   >
@@ -203,7 +265,12 @@ export function SettingsView() {
                     ) : (
                       <AlertCircle className="w-4 h-4" />
                     )}
-                    <span className="text-sm" data-testid="test-connection-message">{testResult.message}</span>
+                    <span
+                      className="text-sm"
+                      data-testid="test-connection-message"
+                    >
+                      {testResult.message}
+                    </span>
                   </div>
                 )}
               </div>
@@ -211,11 +278,11 @@ export function SettingsView() {
               {/* Google API Key */}
               <div className="space-y-3">
                 <div className="flex items-center gap-2">
-                  <Label htmlFor="google-key" className="text-zinc-300">
+                  <Label htmlFor="google-key" className="text-foreground">
                     Google API Key (Gemini)
                   </Label>
                   {apiKeys.google && (
-                    <CheckCircle2 className="w-4 h-4 text-green-500" />
+                    <CheckCircle2 className="w-4 h-4 text-brand-500" />
                   )}
                 </div>
                 <div className="flex gap-2">
@@ -226,14 +293,14 @@ export function SettingsView() {
                       value={googleKey}
                       onChange={(e) => setGoogleKey(e.target.value)}
                       placeholder="AIza..."
-                      className="pr-10 bg-zinc-950/50 border-white/10 text-white placeholder:text-zinc-500"
+                      className="pr-10 bg-input border-border text-foreground placeholder:text-muted-foreground"
                       data-testid="google-api-key-input"
                     />
                     <Button
                       type="button"
                       variant="ghost"
                       size="icon"
-                      className="absolute right-0 top-0 h-full px-3 text-zinc-400 hover:text-white hover:bg-transparent"
+                      className="absolute right-0 top-0 h-full px-3 text-muted-foreground hover:text-foreground hover:bg-transparent"
                       onClick={() => setShowGoogleKey(!showGoogleKey)}
                       data-testid="toggle-google-visibility"
                     >
@@ -249,7 +316,7 @@ export function SettingsView() {
                     variant="secondary"
                     onClick={handleTestGeminiConnection}
                     disabled={!googleKey || testingGeminiConnection}
-                    className="bg-white/5 hover:bg-white/10 text-white border border-white/10"
+                    className="bg-secondary hover:bg-accent text-secondary-foreground border border-border"
                     data-testid="test-gemini-connection"
                   >
                     {testingGeminiConnection ? (
@@ -266,7 +333,8 @@ export function SettingsView() {
                   </Button>
                 </div>
                 <p className="text-xs text-zinc-500">
-                  Used for Gemini AI features (including image/design prompts). Get your key at{" "}
+                  Used for Gemini AI features (including image/design prompts).
+                  Get your key at{" "}
                   <a
                     href="https://makersuite.google.com/app/apikey"
                     target="_blank"
@@ -280,8 +348,8 @@ export function SettingsView() {
                   <div
                     className={`flex items-center gap-2 p-3 rounded-lg ${
                       geminiTestResult.success
-                        ? 'bg-green-500/10 border border-green-500/20 text-green-400'
-                        : 'bg-red-500/10 border border-red-500/20 text-red-400'
+                        ? "bg-green-500/10 border border-green-500/20 text-green-400"
+                        : "bg-red-500/10 border border-red-500/20 text-red-400"
                     }`}
                     data-testid="gemini-test-connection-result"
                   >
@@ -290,7 +358,12 @@ export function SettingsView() {
                     ) : (
                       <AlertCircle className="w-4 h-4" />
                     )}
-                    <span className="text-sm" data-testid="gemini-test-connection-message">{geminiTestResult.message}</span>
+                    <span
+                      className="text-sm"
+                      data-testid="gemini-test-connection-message"
+                    >
+                      {geminiTestResult.message}
+                    </span>
                   </div>
                 )}
               </div>
@@ -301,8 +374,8 @@ export function SettingsView() {
                 <div className="text-sm">
                   <p className="font-medium text-yellow-500">Security Notice</p>
                   <p className="text-yellow-500/80 text-xs mt-1">
-                    API keys are stored in your browser's local storage. Never share your API keys
-                    or commit them to version control.
+                    API keys are stored in your browser's local storage. Never
+                    share your API keys or commit them to version control.
                   </p>
                 </div>
               </div>
@@ -310,43 +383,165 @@ export function SettingsView() {
           </div>
 
           {/* Appearance Section */}
-          <div className="rounded-xl border border-white/10 bg-zinc-900/50 backdrop-blur-md overflow-hidden">
-            <div className="p-6 border-b border-white/10">
+          <div className="rounded-xl border border-border bg-card backdrop-blur-md overflow-hidden">
+            <div className="p-6 border-b border-border">
               <div className="flex items-center gap-2 mb-2">
                 <Palette className="w-5 h-5 text-brand-500" />
-                <h2 className="text-lg font-semibold text-white">Appearance</h2>
+                <h2 className="text-lg font-semibold text-foreground">
+                  Appearance
+                </h2>
               </div>
-              <p className="text-sm text-zinc-400">
+              <p className="text-sm text-muted-foreground">
                 Customize the look and feel of your application.
               </p>
             </div>
             <div className="p-6 space-y-4">
               <div className="space-y-3">
-                <Label className="text-zinc-300">Theme</Label>
-                <div className="flex gap-3">
+                <Label className="text-foreground">Theme</Label>
+                <div className="grid grid-cols-2 md:grid-cols-4 gap-3">
                   <button
                     onClick={() => setTheme("dark")}
-                    className={`flex-1 flex items-center justify-center gap-2 px-4 py-3 rounded-lg border transition-all ${
+                    className={`flex items-center justify-center gap-2 px-3 py-3 rounded-lg border transition-all ${
                       theme === "dark"
-                        ? "bg-white/5 border-brand-500 text-white"
-                        : "bg-zinc-950/50 border-white/10 text-zinc-400 hover:text-white hover:bg-white/5"
+                        ? "bg-accent border-brand-500 text-foreground"
+                        : "bg-input border-border text-muted-foreground hover:text-foreground hover:bg-accent"
                     }`}
                     data-testid="dark-mode-button"
                   >
                     <Moon className="w-4 h-4" />
-                    <span className="font-medium text-sm">Dark Mode</span>
+                    <span className="font-medium text-sm">Dark</span>
                   </button>
                   <button
                     onClick={() => setTheme("light")}
-                    className={`flex-1 flex items-center justify-center gap-2 px-4 py-3 rounded-lg border transition-all ${
+                    className={`flex items-center justify-center gap-2 px-3 py-3 rounded-lg border transition-all ${
                       theme === "light"
-                        ? "bg-white/5 border-brand-500 text-white"
-                        : "bg-zinc-950/50 border-white/10 text-zinc-400 hover:text-white hover:bg-white/5"
+                        ? "bg-accent border-brand-500 text-foreground"
+                        : "bg-input border-border text-muted-foreground hover:text-foreground hover:bg-accent"
                     }`}
                     data-testid="light-mode-button"
                   >
                     <Sun className="w-4 h-4" />
-                    <span className="font-medium text-sm">Light Mode</span>
+                    <span className="font-medium text-sm">Light</span>
+                  </button>
+                  <button
+                    onClick={() => setTheme("retro")}
+                    className={`flex items-center justify-center gap-2 px-3 py-3 rounded-lg border transition-all ${
+                      theme === "retro"
+                        ? "bg-accent border-brand-500 text-foreground"
+                        : "bg-input border-border text-muted-foreground hover:text-foreground hover:bg-accent"
+                    }`}
+                    data-testid="retro-mode-button"
+                  >
+                    <Terminal className="w-4 h-4" />
+                    <span className="font-medium text-sm">Retro</span>
+                  </button>
+                  <button
+                    onClick={() => setTheme("dracula")}
+                    className={`flex items-center justify-center gap-2 px-3 py-3 rounded-lg border transition-all ${
+                      theme === "dracula"
+                        ? "bg-accent border-brand-500 text-foreground"
+                        : "bg-input border-border text-muted-foreground hover:text-foreground hover:bg-accent"
+                    }`}
+                    data-testid="dracula-mode-button"
+                  >
+                    <Ghost className="w-4 h-4" />
+                    <span className="font-medium text-sm">Dracula</span>
+                  </button>
+                  <button
+                    onClick={() => setTheme("nord")}
+                    className={`flex items-center justify-center gap-2 px-3 py-3 rounded-lg border transition-all ${
+                      theme === "nord"
+                        ? "bg-accent border-brand-500 text-foreground"
+                        : "bg-input border-border text-muted-foreground hover:text-foreground hover:bg-accent"
+                    }`}
+                    data-testid="nord-mode-button"
+                  >
+                    <Snowflake className="w-4 h-4" />
+                    <span className="font-medium text-sm">Nord</span>
+                  </button>
+                  <button
+                    onClick={() => setTheme("monokai")}
+                    className={`flex items-center justify-center gap-2 px-3 py-3 rounded-lg border transition-all ${
+                      theme === "monokai"
+                        ? "bg-accent border-brand-500 text-foreground"
+                        : "bg-input border-border text-muted-foreground hover:text-foreground hover:bg-accent"
+                    }`}
+                    data-testid="monokai-mode-button"
+                  >
+                    <Flame className="w-4 h-4" />
+                    <span className="font-medium text-sm">Monokai</span>
+                  </button>
+                  <button
+                    onClick={() => setTheme("tokyonight")}
+                    className={`flex items-center justify-center gap-2 px-3 py-3 rounded-lg border transition-all ${
+                      theme === "tokyonight"
+                        ? "bg-accent border-brand-500 text-foreground"
+                        : "bg-input border-border text-muted-foreground hover:text-foreground hover:bg-accent"
+                    }`}
+                    data-testid="tokyonight-mode-button"
+                  >
+                    <Sparkles className="w-4 h-4" />
+                    <span className="font-medium text-sm">Tokyo Night</span>
+                  </button>
+                  <button
+                    onClick={() => setTheme("solarized")}
+                    className={`flex items-center justify-center gap-2 px-3 py-3 rounded-lg border transition-all ${
+                      theme === "solarized"
+                        ? "bg-accent border-brand-500 text-foreground"
+                        : "bg-input border-border text-muted-foreground hover:text-foreground hover:bg-accent"
+                    }`}
+                    data-testid="solarized-mode-button"
+                  >
+                    <Eclipse className="w-4 h-4" />
+                    <span className="font-medium text-sm">Solarized</span>
+                  </button>
+                  <button
+                    onClick={() => setTheme("gruvbox")}
+                    className={`flex items-center justify-center gap-2 px-3 py-3 rounded-lg border transition-all ${
+                      theme === "gruvbox"
+                        ? "bg-accent border-brand-500 text-foreground"
+                        : "bg-input border-border text-muted-foreground hover:text-foreground hover:bg-accent"
+                    }`}
+                    data-testid="gruvbox-mode-button"
+                  >
+                    <Trees className="w-4 h-4" />
+                    <span className="font-medium text-sm">Gruvbox</span>
+                  </button>
+                  <button
+                    onClick={() => setTheme("catppuccin")}
+                    className={`flex items-center justify-center gap-2 px-3 py-3 rounded-lg border transition-all ${
+                      theme === "catppuccin"
+                        ? "bg-accent border-brand-500 text-foreground"
+                        : "bg-input border-border text-muted-foreground hover:text-foreground hover:bg-accent"
+                    }`}
+                    data-testid="catppuccin-mode-button"
+                  >
+                    <Cat className="w-4 h-4" />
+                    <span className="font-medium text-sm">Catppuccin</span>
+                  </button>
+                  <button
+                    onClick={() => setTheme("onedark")}
+                    className={`flex items-center justify-center gap-2 px-3 py-3 rounded-lg border transition-all ${
+                      theme === "onedark"
+                        ? "bg-accent border-brand-500 text-foreground"
+                        : "bg-input border-border text-muted-foreground hover:text-foreground hover:bg-accent"
+                    }`}
+                    data-testid="onedark-mode-button"
+                  >
+                    <Atom className="w-4 h-4" />
+                    <span className="font-medium text-sm">One Dark</span>
+                  </button>
+                  <button
+                    onClick={() => setTheme("synthwave")}
+                    className={`flex items-center justify-center gap-2 px-3 py-3 rounded-lg border transition-all ${
+                      theme === "synthwave"
+                        ? "bg-accent border-brand-500 text-foreground"
+                        : "bg-input border-border text-muted-foreground hover:text-foreground hover:bg-accent"
+                    }`}
+                    data-testid="synthwave-mode-button"
+                  >
+                    <Radio className="w-4 h-4" />
+                    <span className="font-medium text-sm">Synthwave</span>
                   </button>
                 </div>
               </div>
@@ -358,7 +553,7 @@ export function SettingsView() {
             <Button
               onClick={handleSave}
               data-testid="save-settings"
-              className="min-w-[120px] bg-gradient-to-r from-brand-500 to-purple-600 hover:from-brand-600 hover:to-purple-700 text-white border-0"
+              className="min-w-[120px] bg-linear-to-r from-brand-500 to-brand-600 hover:from-brand-600 hover:to-brand-600 text-primary-foreground border-0"
             >
               {saved ? (
                 <>
diff --git a/app/src/components/views/spec-view.tsx b/app/src/components/views/spec-view.tsx
index d080daff..211214ab 100644
--- a/app/src/components/views/spec-view.tsx
+++ b/app/src/components/views/spec-view.tsx
@@ -20,7 +20,9 @@ export function SpecView() {
     setIsLoading(true);
     try {
       const api = getElectronAPI();
-      const result = await api.readFile(`${currentProject.path}/.automaker/app_spec.txt`);
+      const result = await api.readFile(
+        `${currentProject.path}/.automaker/app_spec.txt`
+      );
 
       if (result.success && result.content) {
         setAppSpec(result.content);
@@ -44,7 +46,10 @@ export function SpecView() {
     setIsSaving(true);
     try {
       const api = getElectronAPI();
-      await api.writeFile(`${currentProject.path}/.automaker/app_spec.txt`, appSpec);
+      await api.writeFile(
+        `${currentProject.path}/.automaker/app_spec.txt`,
+        appSpec
+      );
       setHasChanges(false);
     } catch (error) {
       console.error("Failed to save spec:", error);
@@ -86,7 +91,7 @@ export function SpecView() {
       data-testid="spec-view"
     >
       {/* Header */}
-      <div className="flex items-center justify-between p-4 border-b border-white/10 bg-zinc-950/50 backdrop-blur-md">
+      <div className="flex items-center justify-between p-4 border-b border-border bg-glass backdrop-blur-md">
         <div className="flex items-center gap-3">
           <FileText className="w-5 h-5 text-muted-foreground" />
           <div>
diff --git a/app/src/components/views/welcome-view.tsx b/app/src/components/views/welcome-view.tsx
index 5c643c73..2cf26ea4 100644
--- a/app/src/components/views/welcome-view.tsx
+++ b/app/src/components/views/welcome-view.tsx
@@ -91,59 +91,65 @@ export function WelcomeView() {
   /**
    * Initialize project and optionally kick off project analysis agent
    */
-  const initializeAndOpenProject = useCallback(async (path: string, name: string) => {
-    setIsOpening(true);
-    try {
-      // Initialize the .automaker directory structure
-      const initResult = await initializeProject(path);
+  const initializeAndOpenProject = useCallback(
+    async (path: string, name: string) => {
+      setIsOpening(true);
+      try {
+        // Initialize the .automaker directory structure
+        const initResult = await initializeProject(path);
 
-      if (!initResult.success) {
-        toast.error("Failed to initialize project", {
-          description: initResult.error || "Unknown error occurred",
+        if (!initResult.success) {
+          toast.error("Failed to initialize project", {
+            description: initResult.error || "Unknown error occurred",
+          });
+          return;
+        }
+
+        const project = {
+          id: `project-${Date.now()}`,
+          name,
+          path,
+          lastOpened: new Date().toISOString(),
+        };
+
+        addProject(project);
+        setCurrentProject(project);
+
+        // Show initialization dialog if files were created
+        if (initResult.createdFiles && initResult.createdFiles.length > 0) {
+          setInitStatus({
+            isNewProject: initResult.isNewProject,
+            createdFiles: initResult.createdFiles,
+            projectName: name,
+            projectPath: path,
+          });
+          setShowInitDialog(true);
+
+          // Kick off agent to analyze the project and update app_spec.txt
+          console.log(
+            "[Welcome] Project initialized, created files:",
+            initResult.createdFiles
+          );
+          console.log("[Welcome] Kicking off project analysis agent...");
+
+          // Start analysis in background (don't await, let it run async)
+          analyzeProject(path);
+        } else {
+          toast.success("Project opened", {
+            description: `Opened ${name}`,
+          });
+        }
+      } catch (error) {
+        console.error("[Welcome] Failed to open project:", error);
+        toast.error("Failed to open project", {
+          description: error instanceof Error ? error.message : "Unknown error",
         });
-        return;
+      } finally {
+        setIsOpening(false);
       }
-
-      const project = {
-        id: `project-${Date.now()}`,
-        name,
-        path,
-        lastOpened: new Date().toISOString(),
-      };
-
-      addProject(project);
-      setCurrentProject(project);
-
-      // Show initialization dialog if files were created
-      if (initResult.createdFiles && initResult.createdFiles.length > 0) {
-        setInitStatus({
-          isNewProject: initResult.isNewProject,
-          createdFiles: initResult.createdFiles,
-          projectName: name,
-          projectPath: path,
-        });
-        setShowInitDialog(true);
-
-        // Kick off agent to analyze the project and update app_spec.txt
-        console.log("[Welcome] Project initialized, created files:", initResult.createdFiles);
-        console.log("[Welcome] Kicking off project analysis agent...");
-
-        // Start analysis in background (don't await, let it run async)
-        analyzeProject(path);
-      } else {
-        toast.success("Project opened", {
-          description: `Opened ${name}`,
-        });
-      }
-    } catch (error) {
-      console.error("[Welcome] Failed to open project:", error);
-      toast.error("Failed to open project", {
-        description: error instanceof Error ? error.message : "Unknown error",
-      });
-    } finally {
-      setIsOpening(false);
-    }
-  }, [addProject, setCurrentProject, analyzeProject]);
+    },
+    [addProject, setCurrentProject, analyzeProject]
+  );
 
   const handleOpenProject = useCallback(async () => {
     const api = getElectronAPI();
@@ -159,9 +165,12 @@ export function WelcomeView() {
   /**
    * Handle clicking on a recent project
    */
-  const handleRecentProjectClick = useCallback(async (project: { id: string; name: string; path: string }) => {
-    await initializeAndOpenProject(project.path, project.name);
-  }, [initializeAndOpenProject]);
+  const handleRecentProjectClick = useCallback(
+    async (project: { id: string; name: string; path: string }) => {
+      await initializeAndOpenProject(project.path, project.name);
+    },
+    [initializeAndOpenProject]
+  );
 
   const handleNewProject = () => {
     setNewProjectName("");
@@ -272,17 +281,17 @@ export function WelcomeView() {
   return (
     <div className="flex-1 flex flex-col content-bg" data-testid="welcome-view">
       {/* Header Section */}
-      <div className="flex-shrink-0 border-b border-white/10 bg-zinc-950/50 backdrop-blur-md">
+      <div className="flex-shrink-0 border-b border-border bg-glass backdrop-blur-md">
         <div className="px-8 py-6">
           <div className="flex items-center gap-3 mb-2">
-            <div className="w-10 h-10 rounded-xl bg-gradient-to-br from-brand-500 to-purple-600 shadow-lg shadow-brand-500/20 flex items-center justify-center">
-              <Cpu className="w-5 h-5 text-white" />
+            <div className="w-10 h-10 rounded-xl bg-linear-to-br from-brand-500 to-brand-600 shadow-lg shadow-brand-500/20 flex items-center justify-center">
+              <Cpu className="w-5 h-5 text-primary-foreground" />
             </div>
             <div>
-              <h1 className="text-2xl font-bold text-white">
+              <h1 className="text-2xl font-bold text-foreground">
                 Welcome to Automaker
               </h1>
-              <p className="text-sm text-zinc-400">
+              <p className="text-sm text-muted-foreground">
                 Your autonomous AI development studio
               </p>
             </div>
@@ -296,20 +305,20 @@ export function WelcomeView() {
           {/* Quick Actions */}
           <div className="grid grid-cols-1 md:grid-cols-2 gap-6 mb-12">
             <div
-              className="group relative overflow-hidden rounded-xl border border-white/10 bg-zinc-900/50 backdrop-blur-md hover:bg-zinc-900/70 hover:border-white/20 transition-all duration-200"
+              className="group relative overflow-hidden rounded-xl border border-border bg-card backdrop-blur-md hover:bg-card/70 hover:border-border-glass transition-all duration-200"
               data-testid="new-project-card"
             >
               <div className="absolute inset-0 bg-gradient-to-br from-brand-500/5 to-purple-600/5 opacity-0 group-hover:opacity-100 transition-opacity"></div>
               <div className="relative p-6">
                 <div className="flex items-start gap-4 mb-4">
-                  <div className="w-12 h-12 rounded-lg bg-gradient-to-br from-brand-500 to-purple-600 shadow-lg shadow-brand-500/20 flex items-center justify-center group-hover:scale-110 transition-transform">
+                  <div className="w-12 h-12 rounded-lg bg-linear-to-br from-brand-500 to-brand-600 shadow-lg shadow-brand-500/20 flex items-center justify-center group-hover:scale-110 transition-transform">
                     <Plus className="w-6 h-6 text-white" />
                   </div>
                   <div className="flex-1">
-                    <h3 className="text-lg font-semibold text-white mb-1">
+                    <h3 className="text-lg font-semibold text-foreground mb-1">
                       New Project
                     </h3>
-                    <p className="text-sm text-zinc-400">
+                    <p className="text-sm text-muted-foreground">
                       Create a new project from scratch with AI-powered
                       development
                     </p>
@@ -318,7 +327,7 @@ export function WelcomeView() {
                 <DropdownMenu>
                   <DropdownMenuTrigger asChild>
                     <Button
-                      className="w-full bg-gradient-to-r from-brand-500 to-purple-600 hover:from-brand-600 hover:to-purple-700 text-white border-0"
+                      className="w-full bg-linear-to-r from-brand-500 to-brand-600 hover:from-brand-600 hover:to-brand-600 text-primary-foreground border-0"
                       data-testid="create-new-project"
                     >
                       <Plus className="w-4 h-4 mr-2" />
@@ -347,28 +356,28 @@ export function WelcomeView() {
             </div>
 
             <div
-              className="group relative overflow-hidden rounded-xl border border-white/10 bg-zinc-900/50 backdrop-blur-md hover:bg-zinc-900/70 hover:border-white/20 transition-all duration-200 cursor-pointer"
+              className="group relative overflow-hidden rounded-xl border border-border bg-card backdrop-blur-md hover:bg-card/70 hover:border-border-glass transition-all duration-200 cursor-pointer"
               onClick={handleOpenProject}
               data-testid="open-project-card"
             >
               <div className="absolute inset-0 bg-gradient-to-br from-blue-500/5 to-cyan-600/5 opacity-0 group-hover:opacity-100 transition-opacity"></div>
               <div className="relative p-6">
                 <div className="flex items-start gap-4 mb-4">
-                  <div className="w-12 h-12 rounded-lg bg-zinc-800 border border-white/10 flex items-center justify-center group-hover:scale-110 transition-transform">
-                    <FolderOpen className="w-6 h-6 text-zinc-400 group-hover:text-white transition-colors" />
+                  <div className="w-12 h-12 rounded-lg bg-muted border border-border flex items-center justify-center group-hover:scale-110 transition-transform">
+                    <FolderOpen className="w-6 h-6 text-muted-foreground group-hover:text-foreground transition-colors" />
                   </div>
                   <div className="flex-1">
-                    <h3 className="text-lg font-semibold text-white mb-1">
+                    <h3 className="text-lg font-semibold text-foreground mb-1">
                       Open Project
                     </h3>
-                    <p className="text-sm text-zinc-400">
+                    <p className="text-sm text-muted-foreground">
                       Open an existing project folder to continue working
                     </p>
                   </div>
                 </div>
                 <Button
                   variant="secondary"
-                  className="w-full bg-white/5 hover:bg-white/10 text-white border border-white/10 hover:border-white/20"
+                  className="w-full bg-secondary hover:bg-secondary/80 text-foreground border border-border hover:border-border-glass"
                   data-testid="open-existing-project"
                 >
                   <FolderOpen className="w-4 h-4 mr-2" />
@@ -382,8 +391,8 @@ export function WelcomeView() {
           {recentProjects.length > 0 && (
             <div>
               <div className="flex items-center gap-2 mb-4">
-                <Clock className="w-5 h-5 text-zinc-400" />
-                <h2 className="text-lg font-semibold text-white">
+                <Clock className="w-5 h-5 text-muted-foreground" />
+                <h2 className="text-lg font-semibold text-foreground">
                   Recent Projects
                 </h2>
               </div>
@@ -391,25 +400,25 @@ export function WelcomeView() {
                 {recentProjects.map((project) => (
                   <div
                     key={project.id}
-                    className="group relative overflow-hidden rounded-xl border border-white/10 bg-zinc-900/50 backdrop-blur-md hover:bg-zinc-900/70 hover:border-brand-500/50 transition-all duration-200 cursor-pointer"
+                    className="group relative overflow-hidden rounded-xl border border-border bg-card backdrop-blur-md hover:bg-card/70 hover:border-brand-500/50 transition-all duration-200 cursor-pointer"
                     onClick={() => handleRecentProjectClick(project)}
                     data-testid={`recent-project-${project.id}`}
                   >
                     <div className="absolute inset-0 bg-gradient-to-br from-brand-500/0 to-purple-600/0 group-hover:from-brand-500/5 group-hover:to-purple-600/5 transition-all"></div>
                     <div className="relative p-4">
                       <div className="flex items-start gap-3">
-                        <div className="w-10 h-10 rounded-lg bg-zinc-800 border border-white/10 flex items-center justify-center group-hover:border-brand-500/50 transition-colors">
-                          <Folder className="w-5 h-5 text-zinc-400 group-hover:text-brand-500 transition-colors" />
+                        <div className="w-10 h-10 rounded-lg bg-muted border border-border flex items-center justify-center group-hover:border-brand-500/50 transition-colors">
+                          <Folder className="w-5 h-5 text-muted-foreground group-hover:text-brand-500 transition-colors" />
                         </div>
                         <div className="flex-1 min-w-0">
-                          <p className="font-medium text-white truncate group-hover:text-brand-500 transition-colors">
+                          <p className="font-medium text-foreground truncate group-hover:text-brand-500 transition-colors">
                             {project.name}
                           </p>
-                          <p className="text-xs text-zinc-500 truncate mt-0.5">
+                          <p className="text-xs text-muted-foreground/70 truncate mt-0.5">
                             {project.path}
                           </p>
                           {project.lastOpened && (
-                            <p className="text-xs text-zinc-600 mt-1">
+                            <p className="text-xs text-muted-foreground mt-1">
                               {new Date(
                                 project.lastOpened
                               ).toLocaleDateString()}
@@ -427,10 +436,10 @@ export function WelcomeView() {
           {/* Empty State for No Projects */}
           {recentProjects.length === 0 && (
             <div className="flex flex-col items-center justify-center py-12 text-center">
-              <div className="w-16 h-16 rounded-2xl bg-zinc-900/50 border border-white/10 flex items-center justify-center mb-4">
-                <Sparkles className="w-8 h-8 text-zinc-600" />
+              <div className="w-16 h-16 rounded-2xl bg-muted border border-border flex items-center justify-center mb-4">
+                <Sparkles className="w-8 h-8 text-muted-foreground" />
               </div>
-              <h3 className="text-lg font-semibold text-white mb-2">
+              <h3 className="text-lg font-semibold text-foreground mb-2">
                 No projects yet
               </h3>
               <p className="text-sm text-zinc-400 max-w-md">
@@ -447,18 +456,20 @@ export function WelcomeView() {
         onOpenChange={setShowNewProjectDialog}
       >
         <DialogContent
-          className="bg-zinc-900 border-white/10"
+          className="bg-card border-border"
           data-testid="new-project-dialog"
         >
           <DialogHeader>
-            <DialogTitle className="text-white">Create New Project</DialogTitle>
-            <DialogDescription className="text-zinc-400">
+            <DialogTitle className="text-foreground">
+              Create New Project
+            </DialogTitle>
+            <DialogDescription className="text-muted-foreground">
               Set up a new project directory with initial configuration files.
             </DialogDescription>
           </DialogHeader>
           <div className="space-y-4 py-4">
             <div className="space-y-2">
-              <Label htmlFor="project-name" className="text-zinc-300">
+              <Label htmlFor="project-name" className="text-foreground">
                 Project Name
               </Label>
               <Input
@@ -466,12 +477,12 @@ export function WelcomeView() {
                 placeholder="my-awesome-project"
                 value={newProjectName}
                 onChange={(e) => setNewProjectName(e.target.value)}
-                className="bg-zinc-950/50 border-white/10 text-white placeholder:text-zinc-500"
+                className="bg-input border-border text-foreground placeholder:text-muted-foreground"
                 data-testid="project-name-input"
               />
             </div>
             <div className="space-y-2">
-              <Label htmlFor="project-path" className="text-zinc-300">
+              <Label htmlFor="project-path" className="text-foreground">
                 Parent Directory
               </Label>
               <div className="flex gap-2">
@@ -480,13 +491,13 @@ export function WelcomeView() {
                   placeholder="/path/to/projects"
                   value={newProjectPath}
                   onChange={(e) => setNewProjectPath(e.target.value)}
-                  className="flex-1 bg-zinc-950/50 border-white/10 text-white placeholder:text-zinc-500"
+                  className="flex-1 bg-input border-border text-foreground placeholder:text-muted-foreground"
                   data-testid="project-path-input"
                 />
                 <Button
                   variant="secondary"
                   onClick={handleSelectDirectory}
-                  className="bg-white/5 hover:bg-white/10 text-white border border-white/10"
+                  className="bg-secondary hover:bg-secondary/80 text-foreground border border-border"
                   data-testid="browse-directory"
                 >
                   Browse
@@ -498,14 +509,14 @@ export function WelcomeView() {
             <Button
               variant="ghost"
               onClick={() => setShowNewProjectDialog(false)}
-              className="text-zinc-400 hover:text-white hover:bg-white/5"
+              className="text-muted-foreground hover:text-foreground hover:bg-accent"
             >
               Cancel
             </Button>
             <Button
               onClick={handleCreateProject}
               disabled={!newProjectName || !newProjectPath || isCreating}
-              className="bg-gradient-to-r from-brand-500 to-purple-600 hover:from-brand-600 hover:to-purple-700 text-white border-0"
+              className="bg-gradient-to-r from-brand-500 to-brand-600 hover:from-brand-600 hover:to-brand-600 text-white border-0"
               data-testid="confirm-create-project"
             >
               {isCreating ? "Creating..." : "Create Project"}
@@ -517,15 +528,17 @@ export function WelcomeView() {
       {/* Project Initialization Dialog */}
       <Dialog open={showInitDialog} onOpenChange={setShowInitDialog}>
         <DialogContent
-          className="bg-zinc-900 border-white/10"
+          className="bg-card border-border"
           data-testid="project-init-dialog"
         >
           <DialogHeader>
-            <DialogTitle className="text-white flex items-center gap-2">
+            <DialogTitle className="text-foreground flex items-center gap-2">
               <Sparkles className="w-5 h-5 text-brand-500" />
-              {initStatus?.isNewProject ? "Project Initialized" : "Project Updated"}
+              {initStatus?.isNewProject
+                ? "Project Initialized"
+                : "Project Updated"}
             </DialogTitle>
-            <DialogDescription className="text-zinc-400">
+            <DialogDescription className="text-muted-foreground">
               {initStatus?.isNewProject
                 ? `Created .automaker directory structure for ${initStatus?.projectName}`
                 : `Updated missing files in .automaker for ${initStatus?.projectName}`}
@@ -533,15 +546,17 @@ export function WelcomeView() {
           </DialogHeader>
           <div className="py-4">
             <div className="space-y-2">
-              <p className="text-sm text-zinc-300 font-medium">Created files:</p>
+              <p className="text-sm text-foreground font-medium">
+                Created files:
+              </p>
               <ul className="space-y-1.5">
                 {initStatus?.createdFiles.map((file) => (
                   <li
                     key={file}
-                    className="flex items-center gap-2 text-sm text-zinc-400"
+                    className="flex items-center gap-2 text-sm text-muted-foreground"
                   >
                     <div className="w-1.5 h-1.5 rounded-full bg-green-500" />
-                    <code className="text-xs bg-zinc-800 px-2 py-0.5 rounded">
+                    <code className="text-xs bg-muted px-2 py-0.5 rounded">
                       {file}
                     </code>
                   </li>
@@ -550,7 +565,7 @@ export function WelcomeView() {
             </div>
 
             {initStatus?.isNewProject && (
-              <div className="mt-4 p-3 rounded-lg bg-zinc-800/50 border border-white/5">
+              <div className="mt-4 p-3 rounded-lg bg-muted/50 border border-border-glass">
                 {isAnalyzing ? (
                   <div className="flex items-center gap-2">
                     <Loader2 className="w-4 h-4 text-brand-500 animate-spin" />
@@ -559,9 +574,9 @@ export function WelcomeView() {
                     </p>
                   </div>
                 ) : (
-                  <p className="text-sm text-zinc-400">
+                  <p className="text-sm text-muted-foreground">
                     <span className="text-brand-400">Tip:</span> Edit the{" "}
-                    <code className="text-xs bg-zinc-800 px-1.5 py-0.5 rounded">
+                    <code className="text-xs bg-muted px-1.5 py-0.5 rounded">
                       app_spec.txt
                     </code>{" "}
                     file to describe your project. The AI agent will use this to
@@ -574,7 +589,7 @@ export function WelcomeView() {
           <DialogFooter>
             <Button
               onClick={() => setShowInitDialog(false)}
-              className="bg-gradient-to-r from-brand-500 to-purple-600 hover:from-brand-600 hover:to-purple-700 text-white border-0"
+              className="bg-gradient-to-r from-brand-500 to-brand-600 hover:from-brand-600 hover:to-brand-600 text-white border-0"
               data-testid="close-init-dialog"
             >
               Get Started
@@ -586,12 +601,14 @@ export function WelcomeView() {
       {/* Loading overlay when opening project */}
       {isOpening && (
         <div
-          className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm"
+          className="fixed inset-0 z-50 flex items-center justify-center bg-background/80 backdrop-blur-sm"
           data-testid="project-opening-overlay"
         >
-          <div className="flex flex-col items-center gap-3 p-6 rounded-xl bg-zinc-900 border border-white/10">
+          <div className="flex flex-col items-center gap-3 p-6 rounded-xl bg-card border border-border">
             <Loader2 className="w-8 h-8 text-brand-500 animate-spin" />
-            <p className="text-white font-medium">Initializing project...</p>
+            <p className="text-foreground font-medium">
+              Initializing project...
+            </p>
           </div>
         </div>
       )}
diff --git a/app/src/store/app-store.ts b/app/src/store/app-store.ts
index d30b4871..94fe84ce 100644
--- a/app/src/store/app-store.ts
+++ b/app/src/store/app-store.ts
@@ -2,8 +2,29 @@ import { create } from "zustand";
 import { persist } from "zustand/middleware";
 import type { Project } from "@/lib/electron";
 
-export type ViewMode = "welcome" | "spec" | "board" | "agent" | "settings" | "tools" | "interview" | "context";
-export type ThemeMode = "light" | "dark" | "system";
+export type ViewMode =
+  | "welcome"
+  | "spec"
+  | "board"
+  | "agent"
+  | "settings"
+  | "tools"
+  | "interview"
+  | "context";
+export type ThemeMode =
+  | "light"
+  | "dark"
+  | "system"
+  | "retro"
+  | "dracula"
+  | "nord"
+  | "monokai"
+  | "tokyonight"
+  | "solarized"
+  | "gruvbox"
+  | "catppuccin"
+  | "onedark"
+  | "synthwave";
 
 export interface ApiKeys {
   anthropic: string;
@@ -103,7 +124,15 @@ export interface AutoModeActivity {
   id: string;
   featureId: string;
   timestamp: Date;
-  type: "start" | "progress" | "tool" | "complete" | "error" | "planning" | "action" | "verification";
+  type:
+    | "start"
+    | "progress"
+    | "tool"
+    | "complete"
+    | "error"
+    | "planning"
+    | "action"
+    | "verification";
   message: string;
   tool?: string;
   passes?: boolean;
@@ -157,7 +186,9 @@ export interface AppActions {
   addRunningTask: (taskId: string) => void;
   removeRunningTask: (taskId: string) => void;
   clearRunningTasks: () => void;
-  addAutoModeActivity: (activity: Omit<AutoModeActivity, "id" | "timestamp">) => void;
+  addAutoModeActivity: (
+    activity: Omit<AutoModeActivity, "id" | "timestamp">
+  ) => void;
   clearAutoModeActivity: () => void;
   setMaxConcurrency: (max: number) => void;
 
@@ -200,11 +231,17 @@ export const useAppStore = create<AppState & AppActions>()(
         const existing = projects.findIndex((p) => p.path === project.path);
         if (existing >= 0) {
           const updated = [...projects];
-          updated[existing] = { ...project, lastOpened: new Date().toISOString() };
+          updated[existing] = {
+            ...project,
+            lastOpened: new Date().toISOString(),
+          };
           set({ projects: updated });
         } else {
           set({
-            projects: [...projects, { ...project, lastOpened: new Date().toISOString() }],
+            projects: [
+              ...projects,
+              { ...project, lastOpened: new Date().toISOString() },
+            ],
           });
         }
       },
@@ -242,7 +279,9 @@ export const useAppStore = create<AppState & AppActions>()(
       },
 
       addFeature: (feature) => {
-        const id = `feature-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
+        const id = `feature-${Date.now()}-${Math.random()
+          .toString(36)
+          .substr(2, 9)}`;
         set({ features: [...get().features, { ...feature, id }] });
       },
 
@@ -277,14 +316,19 @@ export const useAppStore = create<AppState & AppActions>()(
         const now = new Date();
         const session: ChatSession = {
           id: `chat-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`,
-          title: title || `Chat ${new Date().toLocaleDateString()} ${new Date().toLocaleTimeString()}`,
+          title:
+            title ||
+            `Chat ${new Date().toLocaleDateString()} ${new Date().toLocaleTimeString()}`,
           projectId: currentProject.id,
-          messages: [{
-            id: "welcome",
-            role: "assistant",
-            content: "Hello! I'm the Automaker Agent. I can help you build software autonomously. What would you like to create today?",
-            timestamp: now,
-          }],
+          messages: [
+            {
+              id: "welcome",
+              role: "assistant",
+              content:
+                "Hello! I'm the Automaker Agent. I can help you build software autonomously. What would you like to create today?",
+              timestamp: now,
+            },
+          ],
           createdAt: now,
           updatedAt: now,
           archived: false,
@@ -311,14 +355,18 @@ export const useAppStore = create<AppState & AppActions>()(
         const currentSession = get().currentChatSession;
         if (currentSession && currentSession.id === sessionId) {
           set({
-            currentChatSession: { ...currentSession, ...updates, updatedAt: new Date() }
+            currentChatSession: {
+              ...currentSession,
+              ...updates,
+              updatedAt: new Date(),
+            },
           });
         }
       },
 
       addMessageToSession: (sessionId, message) => {
         const sessions = get().chatSessions;
-        const sessionIndex = sessions.findIndex(s => s.id === sessionId);
+        const sessionIndex = sessions.findIndex((s) => s.id === sessionId);
 
         if (sessionIndex >= 0) {
           const updatedSessions = [...sessions];
@@ -334,7 +382,7 @@ export const useAppStore = create<AppState & AppActions>()(
           const currentSession = get().currentChatSession;
           if (currentSession && currentSession.id === sessionId) {
             set({
-              currentChatSession: updatedSessions[sessionIndex]
+              currentChatSession: updatedSessions[sessionIndex],
             });
           }
         }
@@ -356,7 +404,8 @@ export const useAppStore = create<AppState & AppActions>()(
         const currentSession = get().currentChatSession;
         set({
           chatSessions: get().chatSessions.filter((s) => s.id !== sessionId),
-          currentChatSession: currentSession?.id === sessionId ? null : currentSession,
+          currentChatSession:
+            currentSession?.id === sessionId ? null : currentSession,
         });
       },
 
@@ -375,13 +424,19 @@ export const useAppStore = create<AppState & AppActions>()(
       },
 
       removeRunningTask: (taskId) => {
-        set({ runningAutoTasks: get().runningAutoTasks.filter(id => id !== taskId) });
+        set({
+          runningAutoTasks: get().runningAutoTasks.filter(
+            (id) => id !== taskId
+          ),
+        });
       },
 
       clearRunningTasks: () => set({ runningAutoTasks: [] }),
 
       addAutoModeActivity: (activity) => {
-        const id = `activity-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
+        const id = `activity-${Date.now()}-${Math.random()
+          .toString(36)
+          .substr(2, 9)}`;
         const newActivity: AutoModeActivity = {
           ...activity,
           id,