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/electron/auto-mode-service.js b/app/electron/auto-mode-service.js
index a39ba88f..412973d9 100644
--- a/app/electron/auto-mode-service.js
+++ b/app/electron/auto-mode-service.js
@@ -32,7 +32,7 @@ class AutoModeService {
       query: null,
       projectPath: null,
       sendToRenderer: null,
-      isActive: () => this.runningFeatures.has(featureId)
+      isActive: () => this.runningFeatures.has(featureId),
     };
     return context;
   }
@@ -126,7 +126,11 @@ class AutoModeService {
       console.log(`[AutoMode] Running feature: ${feature.description}`);
 
       // Update feature status to in_progress
-      await featureLoader.updateFeatureStatus(featureId, "in_progress", projectPath);
+      await featureLoader.updateFeatureStatus(
+        featureId,
+        "in_progress",
+        projectPath
+      );
 
       sendToRenderer({
         type: "auto_mode_feature_start",
@@ -135,7 +139,12 @@ class AutoModeService {
       });
 
       // Implement the feature
-      const result = await featureExecutor.implementFeature(feature, projectPath, sendToRenderer, execution);
+      const result = await featureExecutor.implementFeature(
+        feature,
+        projectPath,
+        sendToRenderer,
+        execution
+      );
 
       // Update feature status based on result
       // For skipTests features, go to waiting_approval on success instead of verified
@@ -145,7 +154,11 @@ class AutoModeService {
       } else {
         newStatus = "backlog";
       }
-      await featureLoader.updateFeatureStatus(feature.id, newStatus, projectPath);
+      await featureLoader.updateFeatureStatus(
+        feature.id,
+        newStatus,
+        projectPath
+      );
 
       // Delete context file only if verified (not for waiting_approval)
       if (newStatus === "verified") {
@@ -214,11 +227,20 @@ class AutoModeService {
       });
 
       // Verify the feature by running tests
-      const result = await featureVerifier.verifyFeatureTests(feature, projectPath, sendToRenderer, execution);
+      const result = await featureVerifier.verifyFeatureTests(
+        feature,
+        projectPath,
+        sendToRenderer,
+        execution
+      );
 
       // Update feature status based on result
       const newStatus = result.passes ? "verified" : "in_progress";
-      await featureLoader.updateFeatureStatus(featureId, newStatus, projectPath);
+      await featureLoader.updateFeatureStatus(
+        featureId,
+        newStatus,
+        projectPath
+      );
 
       // Delete context file if verified
       if (newStatus === "verified") {
@@ -287,10 +309,19 @@ class AutoModeService {
       });
 
       // Read existing context
-      const previousContext = await contextManager.readContextFile(projectPath, featureId);
+      const previousContext = await contextManager.readContextFile(
+        projectPath,
+        featureId
+      );
 
       // Resume implementation with context
-      const result = await featureExecutor.resumeFeatureWithContext(feature, projectPath, sendToRenderer, previousContext, execution);
+      const result = await featureExecutor.resumeFeatureWithContext(
+        feature,
+        projectPath,
+        sendToRenderer,
+        previousContext,
+        execution
+      );
 
       // If the agent ends early without finishing, automatically re-run
       let attempts = 0;
@@ -304,11 +335,16 @@ class AutoModeService {
 
         if (updatedFeature && updatedFeature.status === "in_progress") {
           attempts++;
-          console.log(`[AutoMode] Feature ended early, auto-retrying (attempt ${attempts}/${maxAttempts})...`);
+          console.log(
+            `[AutoMode] Feature ended early, auto-retrying (attempt ${attempts}/${maxAttempts})...`
+          );
 
           // Update context file with retry message
-          await contextManager.writeToContextFile(projectPath, featureId,
-            `\n\n🔄 Auto-retry #${attempts} - Continuing implementation...\n\n`);
+          await contextManager.writeToContextFile(
+            projectPath,
+            featureId,
+            `\n\n🔄 Auto-retry #${attempts} - Continuing implementation...\n\n`
+          );
 
           sendToRenderer({
             type: "auto_mode_progress",
@@ -317,10 +353,19 @@ class AutoModeService {
           });
 
           // Read updated context
-          const retryContext = await contextManager.readContextFile(projectPath, featureId);
+          const retryContext = await contextManager.readContextFile(
+            projectPath,
+            featureId
+          );
 
           // Resume again with full context
-          finalResult = await featureExecutor.resumeFeatureWithContext(feature, projectPath, sendToRenderer, retryContext, execution);
+          finalResult = await featureExecutor.resumeFeatureWithContext(
+            feature,
+            projectPath,
+            sendToRenderer,
+            retryContext,
+            execution
+          );
         } else {
           break;
         }
@@ -334,7 +379,11 @@ class AutoModeService {
       } else {
         newStatus = "in_progress";
       }
-      await featureLoader.updateFeatureStatus(featureId, newStatus, projectPath);
+      await featureLoader.updateFeatureStatus(
+        featureId,
+        newStatus,
+        projectPath
+      );
 
       // Delete context file only if verified (not for waiting_approval)
       if (newStatus === "verified") {
@@ -389,7 +438,9 @@ class AutoModeService {
 
         // Skip if this feature is already running (via manual trigger)
         if (this.runningFeatures.has(currentFeatureId)) {
-          console.log(`[AutoMode] Skipping ${currentFeatureId} - already running`);
+          console.log(
+            `[AutoMode] Skipping ${currentFeatureId} - already running`
+          );
           await this.sleep(3000);
           continue;
         }
@@ -409,7 +460,12 @@ class AutoModeService {
         this.runningFeatures.set(currentFeatureId, execution);
 
         // Implement the feature
-        const result = await featureExecutor.implementFeature(nextFeature, projectPath, sendToRenderer, execution);
+        const result = await featureExecutor.implementFeature(
+          nextFeature,
+          projectPath,
+          sendToRenderer,
+          execution
+        );
 
         // Update feature status based on result
         // For skipTests features, go to waiting_approval on success instead of verified
@@ -419,7 +475,11 @@ class AutoModeService {
         } else {
           newStatus = "backlog";
         }
-        await featureLoader.updateFeatureStatus(nextFeature.id, newStatus, projectPath);
+        await featureLoader.updateFeatureStatus(
+          nextFeature.id,
+          newStatus,
+          projectPath
+        );
 
         // Delete context file only if verified (not for waiting_approval)
         if (newStatus === "verified") {
@@ -495,7 +555,12 @@ class AutoModeService {
       });
 
       // Perform the analysis
-      const result = await projectAnalyzer.runProjectAnalysis(projectPath, analysisId, sendToRenderer, execution);
+      const result = await projectAnalyzer.runProjectAnalysis(
+        projectPath,
+        analysisId,
+        sendToRenderer,
+        execution
+      );
 
       sendToRenderer({
         type: "auto_mode_feature_complete",
@@ -543,13 +608,21 @@ class AutoModeService {
    * Follow-up on a feature with additional prompt
    * This continues work on a feature that's in waiting_approval status
    */
-  async followUpFeature({ projectPath, featureId, prompt, imagePaths, sendToRenderer }) {
+  async followUpFeature({
+    projectPath,
+    featureId,
+    prompt,
+    imagePaths,
+    sendToRenderer,
+  }) {
     // Check if this feature is already running
     if (this.runningFeatures.has(featureId)) {
       throw new Error(`Feature ${featureId} is already running`);
     }
 
-    console.log(`[AutoMode] Follow-up on feature: ${featureId} with prompt: ${prompt}`);
+    console.log(
+      `[AutoMode] Follow-up on feature: ${featureId} with prompt: ${prompt}`
+    );
 
     // Register this feature as running
     const execution = this.createExecutionContext(featureId);
@@ -559,7 +632,14 @@ class AutoModeService {
 
     // Start the async work in the background (don't await)
     // This allows the API to return immediately so the modal can close
-    this.runFollowUpWork({ projectPath, featureId, prompt, imagePaths, sendToRenderer, execution }).catch((error) => {
+    this.runFollowUpWork({
+      projectPath,
+      featureId,
+      prompt,
+      imagePaths,
+      sendToRenderer,
+      execution,
+    }).catch((error) => {
       console.error("[AutoMode] Follow-up work error:", error);
       this.runningFeatures.delete(featureId);
     });
@@ -571,7 +651,14 @@ class AutoModeService {
   /**
    * Internal method to run follow-up work asynchronously
    */
-  async runFollowUpWork({ projectPath, featureId, prompt, imagePaths, sendToRenderer, execution }) {
+  async runFollowUpWork({
+    projectPath,
+    featureId,
+    prompt,
+    imagePaths,
+    sendToRenderer,
+    execution,
+  }) {
     try {
       // Load features
       const features = await featureLoader.loadFeatures(projectPath);
@@ -584,7 +671,11 @@ class AutoModeService {
       console.log(`[AutoMode] Following up on feature: ${feature.description}`);
 
       // Update status to in_progress
-      await featureLoader.updateFeatureStatus(featureId, "in_progress", projectPath);
+      await featureLoader.updateFeatureStatus(
+        featureId,
+        "in_progress",
+        projectPath
+      );
 
       sendToRenderer({
         type: "auto_mode_feature_start",
@@ -593,11 +684,18 @@ class AutoModeService {
       });
 
       // Read existing context and append follow-up prompt
-      const previousContext = await contextManager.readContextFile(projectPath, featureId);
+      const previousContext = await contextManager.readContextFile(
+        projectPath,
+        featureId
+      );
 
       // Append follow-up prompt to context
       const followUpContext = `${previousContext}\n\n## Follow-up Instructions\n\n${prompt}`;
-      await contextManager.writeToContextFile(projectPath, featureId, `\n\n## Follow-up Instructions\n\n${prompt}`);
+      await contextManager.writeToContextFile(
+        projectPath,
+        featureId,
+        `\n\n## Follow-up Instructions\n\n${prompt}`
+      );
 
       // Resume implementation with follow-up context and optional images
       const result = await featureExecutor.resumeFeatureWithContext(
@@ -610,10 +708,16 @@ class AutoModeService {
 
       // For skipTests features, go to waiting_approval on success instead of verified
       const newStatus = result.passes
-        ? (feature.skipTests ? "waiting_approval" : "verified")
+        ? feature.skipTests
+          ? "waiting_approval"
+          : "verified"
         : "in_progress";
 
-      await featureLoader.updateFeatureStatus(feature.id, newStatus, projectPath);
+      await featureLoader.updateFeatureStatus(
+        feature.id,
+        newStatus,
+        projectPath
+      );
 
       // Delete context file if verified (only for non-skipTests)
       if (newStatus === "verified") {
@@ -674,10 +778,19 @@ class AutoModeService {
       });
 
       // Run git commit via the agent
-      const commitResult = await featureExecutor.commitChangesOnly(feature, projectPath, sendToRenderer, execution);
+      const commitResult = await featureExecutor.commitChangesOnly(
+        feature,
+        projectPath,
+        sendToRenderer,
+        execution
+      );
 
       // Update status to verified
-      await featureLoader.updateFeatureStatus(featureId, "verified", projectPath);
+      await featureLoader.updateFeatureStatus(
+        featureId,
+        "verified",
+        projectPath
+      );
 
       // Delete context file
       await contextManager.deleteContextFile(projectPath, featureId);
diff --git a/app/electron/services/prompt-builder.js b/app/electron/services/prompt-builder.js
index 4ec4c257..cd75ac36 100644
--- a/app/electron/services/prompt-builder.js
+++ b/app/electron/services/prompt-builder.js
@@ -25,17 +25,25 @@ ${feature.steps.map((step, i) => `${i + 1}. ${step}`).join("\n")}
 
 1. Read the project files to understand the current codebase structure
 2. Implement the feature according to the description and steps
-${feature.skipTests
-  ? "3. Test the implementation manually (no automated tests needed for skipTests features)"
-  : "3. Write Playwright tests to verify the feature works correctly\n4. Run the tests and ensure they pass\n5. **DELETE the test file(s) you created** - tests are only for immediate verification"}
-${feature.skipTests ? "4" : "6"}. **CRITICAL: Use the UpdateFeatureStatus tool to mark this feature as verified** - DO NOT manually edit .automaker/feature_list.json
-${feature.skipTests
-  ? "5. **DO NOT commit changes** - the user will review and commit manually"
-  : "7. Commit your changes with git"}
+${
+  feature.skipTests
+    ? "3. Test the implementation manually (no automated tests needed for skipTests features)"
+    : "3. Write Playwright tests to verify the feature works correctly\n4. Run the tests and ensure they pass\n5. **DELETE the test file(s) you created** - tests are only for immediate verification"
+}
+${
+  feature.skipTests ? "4" : "6"
+}. **CRITICAL: Use the UpdateFeatureStatus tool to mark this feature as verified** - DO NOT manually edit .automaker/feature_list.json
+${
+  feature.skipTests
+    ? "5. **DO NOT commit changes** - the user will review and commit manually"
+    : "7. Commit your changes with git"
+}
 
 **IMPORTANT - Updating Feature Status:**
 
-When you have completed the feature${feature.skipTests ? "" : " and all tests pass"}, you MUST use the \`mcp__automaker-tools__UpdateFeatureStatus\` tool to update the feature status:
+When you have completed the feature${
+      feature.skipTests ? "" : " and all tests pass"
+    }, you MUST use the \`mcp__automaker-tools__UpdateFeatureStatus\` tool to update the feature status:
 - Call the tool with: featureId="${feature.id}" and status="verified"
 - **You can also include a summary parameter** to describe what was done: summary="Brief summary of changes"
 - **DO NOT manually edit the .automaker/feature_list.json file** - this can cause race conditions
@@ -51,7 +59,9 @@ When calling UpdateFeatureStatus, you MUST include a summary parameter that desc
 
 Example:
 \`\`\`
-UpdateFeatureStatus(featureId="${feature.id}", status="verified", summary="Added dark mode toggle to settings. Modified: settings.tsx, theme-provider.tsx. Created new useTheme hook.")
+UpdateFeatureStatus(featureId="${
+      feature.id
+    }", status="verified", summary="Added dark mode toggle to settings. Modified: settings.tsx, theme-provider.tsx. Created new useTheme hook.")
 \`\`\`
 
 The summary will be displayed on the Kanban card so the user can see what was done without checking the code.
@@ -61,14 +71,18 @@ The summary will be displayed on the Kanban card so the user can see what was do
 - Focus ONLY on implementing this specific feature
 - Write clean, production-quality code
 - Add proper error handling
-${feature.skipTests
-  ? "- Skip automated testing (skipTests=true) - user will manually verify"
-  : "- Write comprehensive Playwright tests\n- Ensure all existing tests still pass\n- Mark the feature as passing only when all tests are green\n- **CRITICAL: Delete test files after verification** - tests accumulate and become brittle"}
+${
+  feature.skipTests
+    ? "- Skip automated testing (skipTests=true) - user will manually verify"
+    : "- Write comprehensive Playwright tests\n- Ensure all existing tests still pass\n- Mark the feature as passing only when all tests are green\n- **CRITICAL: Delete test files after verification** - tests accumulate and become brittle"
+}
 - **CRITICAL: Use UpdateFeatureStatus tool instead of editing feature_list.json directly**
 - **CRITICAL: Always include a summary when marking feature as verified**
-${feature.skipTests
-  ? "- **DO NOT commit changes** - user will review and commit manually"
-  : "- Make a git commit when complete"}
+${
+  feature.skipTests
+    ? "- **DO NOT commit changes** - user will review and commit manually"
+    : "- Make a git commit when complete"
+}
 
 **Testing Utilities (CRITICAL):**
 
@@ -119,9 +133,10 @@ ${feature.steps.map((step, i) => `${i + 1}. ${step}`).join("\n")}
 
 1. Read the project files to understand the current implementation
 2. If the feature is not fully implemented, continue implementing it
-${feature.skipTests
-  ? "3. Test the implementation manually (no automated tests needed for skipTests features)"
-  : `3. Write or update Playwright tests to verify the feature works correctly
+${
+  feature.skipTests
+    ? "3. Test the implementation manually (no automated tests needed for skipTests features)"
+    : `3. Write or update Playwright tests to verify the feature works correctly
 4. Run the Playwright tests: npx playwright test tests/[feature-name].spec.ts
 5. Check if all tests pass
 6. **If ANY tests fail:**
@@ -131,15 +146,22 @@ ${feature.skipTests
    - Re-run the tests to verify the fixes
    - **REPEAT this process until ALL tests pass**
 7. **If ALL tests pass:**
-   - **DELETE the test file(s) for this feature** - tests are only for immediate verification`}
-${feature.skipTests ? "4" : "8"}. **CRITICAL: Use the UpdateFeatureStatus tool to mark this feature as verified** - DO NOT manually edit .automaker/feature_list.json
-${feature.skipTests
-  ? "5. **DO NOT commit changes** - the user will review and commit manually"
-  : "9. Explain what was implemented/fixed and that all tests passed\n10. Commit your changes with git"}
+   - **DELETE the test file(s) for this feature** - tests are only for immediate verification`
+}
+${
+  feature.skipTests ? "4" : "8"
+}. **CRITICAL: Use the UpdateFeatureStatus tool to mark this feature as verified** - DO NOT manually edit .automaker/feature_list.json
+${
+  feature.skipTests
+    ? "5. **DO NOT commit changes** - the user will review and commit manually"
+    : "9. Explain what was implemented/fixed and that all tests passed\n10. Commit your changes with git"
+}
 
 **IMPORTANT - Updating Feature Status:**
 
-When you have completed the feature${feature.skipTests ? "" : " and all tests pass"}, you MUST use the \`mcp__automaker-tools__UpdateFeatureStatus\` tool to update the feature status:
+When you have completed the feature${
+      feature.skipTests ? "" : " and all tests pass"
+    }, you MUST use the \`mcp__automaker-tools__UpdateFeatureStatus\` tool to update the feature status:
 - Call the tool with: featureId="${feature.id}" and status="verified"
 - **You can also include a summary parameter** to describe what was done: summary="Brief summary of changes"
 - **DO NOT manually edit the .automaker/feature_list.json file** - this can cause race conditions
@@ -155,7 +177,9 @@ When calling UpdateFeatureStatus, you MUST include a summary parameter that desc
 
 Example:
 \`\`\`
-UpdateFeatureStatus(featureId="${feature.id}", status="verified", summary="Added dark mode toggle to settings. Modified: settings.tsx, theme-provider.tsx. Created new useTheme hook.")
+UpdateFeatureStatus(featureId="${
+      feature.id
+    }", status="verified", summary="Added dark mode toggle to settings. Modified: settings.tsx, theme-provider.tsx. Created new useTheme hook.")
 \`\`\`
 
 The summary will be displayed on the Kanban card so the user can see what was done without checking the code.
@@ -173,9 +197,11 @@ rm tests/[feature-name].spec.ts
 \`\`\`
 
 **Important:**
-${feature.skipTests
-  ? "- Skip automated testing (skipTests=true) - user will manually verify\n- **DO NOT commit changes** - user will review and commit manually"
-  : "- **CONTINUE IMPLEMENTING until all tests pass** - don't stop at the first failure\n- Only mark as verified if Playwright tests pass\n- **CRITICAL: Delete test files after they pass** - tests should not accumulate\n- Update test utilities if functionality changed\n- Make a git commit when the feature is complete\n- Be thorough and persistent in fixing issues"}
+${
+  feature.skipTests
+    ? "- Skip automated testing (skipTests=true) - user will manually verify\n- **DO NOT commit changes** - user will review and commit manually"
+    : "- **CONTINUE IMPLEMENTING until all tests pass** - don't stop at the first failure\n- Only mark as verified if Playwright tests pass\n- **CRITICAL: Delete test files after they pass** - tests should not accumulate\n- Update test utilities if functionality changed\n- Make a git commit when the feature is complete\n- Be thorough and persistent in fixing issues"
+}
 - **CRITICAL: Use UpdateFeatureStatus tool instead of editing feature_list.json directly**
 - **CRITICAL: Always include a summary when marking feature as verified**
 
@@ -211,17 +237,25 @@ Continue where you left off and complete the feature implementation:
 
 1. Review the previous work context above to understand what has been done
 2. Continue implementing the feature according to the description and steps
-${feature.skipTests
-  ? "3. Test the implementation manually (no automated tests needed for skipTests features)"
-  : "3. Write Playwright tests to verify the feature works correctly (if not already done)\n4. Run the tests and ensure they pass\n5. **DELETE the test file(s) you created** - tests are only for immediate verification"}
-${feature.skipTests ? "4" : "6"}. **CRITICAL: Use the UpdateFeatureStatus tool to mark this feature as verified** - DO NOT manually edit .automaker/feature_list.json
-${feature.skipTests
-  ? "5. **DO NOT commit changes** - the user will review and commit manually"
-  : "7. Commit your changes with git"}
+${
+  feature.skipTests
+    ? "3. Test the implementation manually (no automated tests needed for skipTests features)"
+    : "3. Write Playwright tests to verify the feature works correctly (if not already done)\n4. Run the tests and ensure they pass\n5. **DELETE the test file(s) you created** - tests are only for immediate verification"
+}
+${
+  feature.skipTests ? "4" : "6"
+}. **CRITICAL: Use the UpdateFeatureStatus tool to mark this feature as verified** - DO NOT manually edit .automaker/feature_list.json
+${
+  feature.skipTests
+    ? "5. **DO NOT commit changes** - the user will review and commit manually"
+    : "7. Commit your changes with git"
+}
 
 **IMPORTANT - Updating Feature Status:**
 
-When you have completed the feature${feature.skipTests ? "" : " and all tests pass"}, you MUST use the \`mcp__automaker-tools__UpdateFeatureStatus\` tool to update the feature status:
+When you have completed the feature${
+      feature.skipTests ? "" : " and all tests pass"
+    }, you MUST use the \`mcp__automaker-tools__UpdateFeatureStatus\` tool to update the feature status:
 - Call the tool with: featureId="${feature.id}" and status="verified"
 - **You can also include a summary parameter** to describe what was done: summary="Brief summary of changes"
 - **DO NOT manually edit the .automaker/feature_list.json file** - this can cause race conditions
@@ -237,7 +271,9 @@ When calling UpdateFeatureStatus, you MUST include a summary parameter that desc
 
 Example:
 \`\`\`
-UpdateFeatureStatus(featureId="${feature.id}", status="verified", summary="Added dark mode toggle to settings. Modified: settings.tsx, theme-provider.tsx. Created new useTheme hook.")
+UpdateFeatureStatus(featureId="${
+      feature.id
+    }", status="verified", summary="Added dark mode toggle to settings. Modified: settings.tsx, theme-provider.tsx. Created new useTheme hook.")
 \`\`\`
 
 The summary will be displayed on the Kanban card so the user can see what was done without checking the code.
@@ -247,14 +283,18 @@ The summary will be displayed on the Kanban card so the user can see what was do
 - Review what was already done in the previous context
 - Don't redo work that's already complete - continue from where it left off
 - Focus on completing any remaining tasks
-${feature.skipTests
-  ? "- Skip automated testing (skipTests=true) - user will manually verify"
-  : "- Write comprehensive Playwright tests if not already done\n- Ensure all tests pass before marking as verified\n- **CRITICAL: Delete test files after verification**"}
+${
+  feature.skipTests
+    ? "- Skip automated testing (skipTests=true) - user will manually verify"
+    : "- Write comprehensive Playwright tests if not already done\n- Ensure all tests pass before marking as verified\n- **CRITICAL: Delete test files after verification**"
+}
 - **CRITICAL: Use UpdateFeatureStatus tool instead of editing feature_list.json directly**
 - **CRITICAL: Always include a summary when marking feature as verified**
-${feature.skipTests
-  ? "- **DO NOT commit changes** - user will review and commit manually"
-  : "- Make a git commit when complete"}
+${
+  feature.skipTests
+    ? "- **DO NOT commit changes** - user will review and commit manually"
+    : "- Make a git commit when complete"
+}
 
 Begin by assessing what's been done and what remains to be completed.`;
   }
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/analysis-view.tsx b/app/src/components/views/analysis-view.tsx
new file mode 100644
index 00000000..4a4d3005
--- /dev/null
+++ b/app/src/components/views/analysis-view.tsx
@@ -0,0 +1,1119 @@
+"use client";
+
+import { useCallback, useState } from "react";
+import { useAppStore, FileTreeNode, ProjectAnalysis } from "@/store/app-store";
+import { getElectronAPI } from "@/lib/electron";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+import {
+  Folder,
+  FolderOpen,
+  File,
+  ChevronRight,
+  ChevronDown,
+  Search,
+  RefreshCw,
+  BarChart3,
+  FileCode,
+  Loader2,
+  FileText,
+  CheckCircle,
+  AlertCircle,
+  ListChecks,
+} from "lucide-react";
+import { cn } from "@/lib/utils";
+
+const IGNORE_PATTERNS = [
+  "node_modules",
+  ".git",
+  ".next",
+  "dist",
+  "build",
+  ".DS_Store",
+  "*.log",
+  ".cache",
+  "coverage",
+  "__pycache__",
+  ".pytest_cache",
+  ".venv",
+  "venv",
+  ".env",
+];
+
+const shouldIgnore = (name: string) => {
+  return IGNORE_PATTERNS.some((pattern) => {
+    if (pattern.startsWith("*")) {
+      return name.endsWith(pattern.slice(1));
+    }
+    return name === pattern;
+  });
+};
+
+const getExtension = (filename: string): string => {
+  const parts = filename.split(".");
+  return parts.length > 1 ? parts.pop() || "" : "";
+};
+
+export function AnalysisView() {
+  const {
+    currentProject,
+    projectAnalysis,
+    isAnalyzing,
+    setProjectAnalysis,
+    setIsAnalyzing,
+    clearAnalysis,
+  } = useAppStore();
+
+  const [expandedFolders, setExpandedFolders] = useState<Set<string>>(
+    new Set()
+  );
+  const [isGeneratingSpec, setIsGeneratingSpec] = useState(false);
+  const [specGenerated, setSpecGenerated] = useState(false);
+  const [specError, setSpecError] = useState<string | null>(null);
+  const [isGeneratingFeatureList, setIsGeneratingFeatureList] = useState(false);
+  const [featureListGenerated, setFeatureListGenerated] = useState(false);
+  const [featureListError, setFeatureListError] = useState<string | null>(null);
+
+  // Recursively scan directory
+  const scanDirectory = useCallback(
+    async (path: string, depth: number = 0): Promise<FileTreeNode[]> => {
+      if (depth > 10) return []; // Prevent infinite recursion
+
+      const api = getElectronAPI();
+      try {
+        const result = await api.readdir(path);
+        if (!result.success || !result.entries) return [];
+
+        const nodes: FileTreeNode[] = [];
+        const entries = result.entries.filter((e) => !shouldIgnore(e.name));
+
+        for (const entry of entries) {
+          const fullPath = `${path}/${entry.name}`;
+          const node: FileTreeNode = {
+            name: entry.name,
+            path: fullPath,
+            isDirectory: entry.isDirectory,
+            extension: entry.isFile ? getExtension(entry.name) : undefined,
+          };
+
+          if (entry.isDirectory) {
+            // Recursively scan subdirectories
+            node.children = await scanDirectory(fullPath, depth + 1);
+          }
+
+          nodes.push(node);
+        }
+
+        // Sort: directories first, then files alphabetically
+        nodes.sort((a, b) => {
+          if (a.isDirectory && !b.isDirectory) return -1;
+          if (!a.isDirectory && b.isDirectory) return 1;
+          return a.name.localeCompare(b.name);
+        });
+
+        return nodes;
+      } catch (error) {
+        console.error("Failed to scan directory:", path, error);
+        return [];
+      }
+    },
+    []
+  );
+
+  // Count files and directories
+  const countNodes = (
+    nodes: FileTreeNode[]
+  ): { files: number; dirs: number; byExt: Record<string, number> } => {
+    let files = 0;
+    let dirs = 0;
+    const byExt: Record<string, number> = {};
+
+    const traverse = (items: FileTreeNode[]) => {
+      for (const item of items) {
+        if (item.isDirectory) {
+          dirs++;
+          if (item.children) traverse(item.children);
+        } else {
+          files++;
+          if (item.extension) {
+            byExt[item.extension] = (byExt[item.extension] || 0) + 1;
+          } else {
+            byExt["(no extension)"] = (byExt["(no extension)"] || 0) + 1;
+          }
+        }
+      }
+    };
+
+    traverse(nodes);
+    return { files, dirs, byExt };
+  };
+
+  // Run the analysis
+  const runAnalysis = useCallback(async () => {
+    if (!currentProject) return;
+
+    setIsAnalyzing(true);
+    clearAnalysis();
+
+    try {
+      const fileTree = await scanDirectory(currentProject.path);
+      const counts = countNodes(fileTree);
+
+      const analysis: ProjectAnalysis = {
+        fileTree,
+        totalFiles: counts.files,
+        totalDirectories: counts.dirs,
+        filesByExtension: counts.byExt,
+        analyzedAt: new Date().toISOString(),
+      };
+
+      setProjectAnalysis(analysis);
+    } catch (error) {
+      console.error("Analysis failed:", error);
+    } finally {
+      setIsAnalyzing(false);
+    }
+  }, [
+    currentProject,
+    setIsAnalyzing,
+    clearAnalysis,
+    scanDirectory,
+    setProjectAnalysis,
+  ]);
+
+  // Generate app_spec.txt from analysis
+  const generateSpec = useCallback(async () => {
+    if (!currentProject || !projectAnalysis) return;
+
+    setIsGeneratingSpec(true);
+    setSpecError(null);
+    setSpecGenerated(false);
+
+    try {
+      const api = getElectronAPI();
+
+      // Read key files to understand the project better
+      const fileContents: Record<string, string> = {};
+      const keyFiles = ["package.json", "README.md", "tsconfig.json"];
+
+      // Collect file paths from analysis
+      const collectFilePaths = (
+        nodes: FileTreeNode[],
+        maxDepth: number = 3,
+        currentDepth: number = 0
+      ): string[] => {
+        const paths: string[] = [];
+        for (const node of nodes) {
+          if (!node.isDirectory) {
+            paths.push(node.path);
+          } else if (node.children && currentDepth < maxDepth) {
+            paths.push(
+              ...collectFilePaths(node.children, maxDepth, currentDepth + 1)
+            );
+          }
+        }
+        return paths;
+      };
+
+      const allFilePaths = collectFilePaths(projectAnalysis.fileTree);
+
+      // Try to read key configuration files
+      for (const keyFile of keyFiles) {
+        const filePath = `${currentProject.path}/${keyFile}`;
+        const exists = await api.exists(filePath);
+        if (exists) {
+          const result = await api.readFile(filePath);
+          if (result.success && result.content) {
+            fileContents[keyFile] = result.content;
+          }
+        }
+      }
+
+      // Detect project type and tech stack
+      const detectTechStack = () => {
+        const stack: string[] = [];
+        const extensions = projectAnalysis.filesByExtension;
+
+        // Check package.json for dependencies
+        if (fileContents["package.json"]) {
+          try {
+            const pkg = JSON.parse(fileContents["package.json"]);
+            if (pkg.dependencies?.react || pkg.dependencies?.["react-dom"])
+              stack.push("React");
+            if (pkg.dependencies?.next) stack.push("Next.js");
+            if (pkg.dependencies?.vue) stack.push("Vue");
+            if (pkg.dependencies?.angular) stack.push("Angular");
+            if (pkg.dependencies?.express) stack.push("Express");
+            if (pkg.dependencies?.electron) stack.push("Electron");
+            if (pkg.devDependencies?.typescript || pkg.dependencies?.typescript)
+              stack.push("TypeScript");
+            if (
+              pkg.devDependencies?.tailwindcss ||
+              pkg.dependencies?.tailwindcss
+            )
+              stack.push("Tailwind CSS");
+            if (pkg.devDependencies?.playwright || pkg.dependencies?.playwright)
+              stack.push("Playwright");
+            if (pkg.devDependencies?.jest || pkg.dependencies?.jest)
+              stack.push("Jest");
+          } catch {
+            // Ignore JSON parse errors
+          }
+        }
+
+        // Detect by file extensions
+        if (extensions["ts"] || extensions["tsx"]) stack.push("TypeScript");
+        if (extensions["py"]) stack.push("Python");
+        if (extensions["go"]) stack.push("Go");
+        if (extensions["rs"]) stack.push("Rust");
+        if (extensions["java"]) stack.push("Java");
+        if (extensions["css"] || extensions["scss"] || extensions["sass"])
+          stack.push("CSS/SCSS");
+
+        // Remove duplicates
+        return [...new Set(stack)];
+      };
+
+      // Get project name from package.json or folder name
+      const getProjectName = () => {
+        if (fileContents["package.json"]) {
+          try {
+            const pkg = JSON.parse(fileContents["package.json"]);
+            if (pkg.name) return pkg.name;
+          } catch {
+            // Ignore JSON parse errors
+          }
+        }
+        // Fall back to folder name
+        return currentProject.name;
+      };
+
+      // Get project description from package.json or README
+      const getProjectDescription = () => {
+        if (fileContents["package.json"]) {
+          try {
+            const pkg = JSON.parse(fileContents["package.json"]);
+            if (pkg.description) return pkg.description;
+          } catch {
+            // Ignore JSON parse errors
+          }
+        }
+        if (fileContents["README.md"]) {
+          // Extract first paragraph from README
+          const lines = fileContents["README.md"].split("\n");
+          for (const line of lines) {
+            const trimmed = line.trim();
+            if (
+              trimmed &&
+              !trimmed.startsWith("#") &&
+              !trimmed.startsWith("!") &&
+              trimmed.length > 20
+            ) {
+              return trimmed.substring(0, 200);
+            }
+          }
+        }
+        return "A software project";
+      };
+
+      // Group files by directory for structure analysis
+      const analyzeStructure = () => {
+        const structure: string[] = [];
+        const topLevelDirs = projectAnalysis.fileTree
+          .filter((n) => n.isDirectory)
+          .map((n) => n.name);
+
+        for (const dir of topLevelDirs) {
+          structure.push(`      <directory name="${dir}" />`);
+        }
+        return structure.join("\n");
+      };
+
+      const projectName = getProjectName();
+      const description = getProjectDescription();
+      const techStack = detectTechStack();
+
+      // Generate the spec content
+      const specContent = `<project_specification>
+  <project_name>${projectName}</project_name>
+
+  <overview>
+    ${description}
+  </overview>
+
+  <technology_stack>
+    <languages>
+${Object.entries(projectAnalysis.filesByExtension)
+  .filter(([ext]) =>
+    ["ts", "tsx", "js", "jsx", "py", "go", "rs", "java", "cpp", "c"].includes(
+      ext
+    )
+  )
+  .sort((a, b) => b[1] - a[1])
+  .slice(0, 5)
+  .map(([ext, count]) => `      <language ext=".${ext}" count="${count}" />`)
+  .join("\n")}
+    </languages>
+    <frameworks>
+${techStack.map((tech) => `      <framework>${tech}</framework>`).join("\n")}
+    </frameworks>
+  </technology_stack>
+
+  <project_structure>
+    <total_files>${projectAnalysis.totalFiles}</total_files>
+    <total_directories>${projectAnalysis.totalDirectories}</total_directories>
+    <top_level_structure>
+${analyzeStructure()}
+    </top_level_structure>
+  </project_structure>
+
+  <file_breakdown>
+${Object.entries(projectAnalysis.filesByExtension)
+  .sort((a, b) => b[1] - a[1])
+  .slice(0, 10)
+  .map(
+    ([ext, count]) =>
+      `    <extension type="${
+        ext.startsWith("(") ? ext : "." + ext
+      }" count="${count}" />`
+  )
+  .join("\n")}
+  </file_breakdown>
+
+  <analyzed_at>${projectAnalysis.analyzedAt}</analyzed_at>
+</project_specification>
+`;
+
+      // Write the spec file
+      const specPath = `${currentProject.path}/app_spec.txt`;
+      const writeResult = await api.writeFile(specPath, specContent);
+
+      if (writeResult.success) {
+        setSpecGenerated(true);
+      } else {
+        setSpecError(writeResult.error || "Failed to write spec file");
+      }
+    } catch (error) {
+      console.error("Failed to generate spec:", error);
+      setSpecError(
+        error instanceof Error ? error.message : "Failed to generate spec"
+      );
+    } finally {
+      setIsGeneratingSpec(false);
+    }
+  }, [currentProject, projectAnalysis]);
+
+  // Generate .automaker/feature_list.json from analysis
+  const generateFeatureList = useCallback(async () => {
+    if (!currentProject || !projectAnalysis) return;
+
+    setIsGeneratingFeatureList(true);
+    setFeatureListError(null);
+    setFeatureListGenerated(false);
+
+    try {
+      const api = getElectronAPI();
+
+      // Read key files to understand the project
+      const fileContents: Record<string, string> = {};
+      const keyFiles = ["package.json", "README.md"];
+
+      // Try to read key configuration files
+      for (const keyFile of keyFiles) {
+        const filePath = `${currentProject.path}/${keyFile}`;
+        const exists = await api.exists(filePath);
+        if (exists) {
+          const result = await api.readFile(filePath);
+          if (result.success && result.content) {
+            fileContents[keyFile] = result.content;
+          }
+        }
+      }
+
+      // Collect file paths from analysis
+      const collectFilePaths = (nodes: FileTreeNode[]): string[] => {
+        const paths: string[] = [];
+        for (const node of nodes) {
+          if (!node.isDirectory) {
+            paths.push(node.path);
+          } else if (node.children) {
+            paths.push(...collectFilePaths(node.children));
+          }
+        }
+        return paths;
+      };
+
+      const allFilePaths = collectFilePaths(projectAnalysis.fileTree);
+
+      // Analyze directories and files to detect features
+      interface DetectedFeature {
+        category: string;
+        description: string;
+        steps: string[];
+        passes: boolean;
+      }
+
+      const detectedFeatures: DetectedFeature[] = [];
+
+      // Detect features based on project structure and files
+      const detectFeatures = () => {
+        const extensions = projectAnalysis.filesByExtension;
+        const topLevelDirs = projectAnalysis.fileTree
+          .filter((n) => n.isDirectory)
+          .map((n) => n.name.toLowerCase());
+        const topLevelFiles = projectAnalysis.fileTree
+          .filter((n) => !n.isDirectory)
+          .map((n) => n.name.toLowerCase());
+
+        // Check for test directories and files
+        const hasTests =
+          topLevelDirs.includes("tests") ||
+          topLevelDirs.includes("test") ||
+          topLevelDirs.includes("__tests__") ||
+          allFilePaths.some(
+            (p) => p.includes(".spec.") || p.includes(".test.")
+          );
+
+        if (hasTests) {
+          detectedFeatures.push({
+            category: "Testing",
+            description: "Automated test suite",
+            steps: [
+              "Step 1: Tests directory exists",
+              "Step 2: Test files are present",
+              "Step 3: Run test suite",
+            ],
+            passes: true,
+          });
+        }
+
+        // Check for components directory (UI components)
+        const hasComponents =
+          topLevelDirs.includes("components") ||
+          allFilePaths.some((p) => p.toLowerCase().includes("/components/"));
+
+        if (hasComponents) {
+          detectedFeatures.push({
+            category: "UI/Design",
+            description: "Component-based UI architecture",
+            steps: [
+              "Step 1: Components directory exists",
+              "Step 2: UI components are defined",
+              "Step 3: Components are reusable",
+            ],
+            passes: true,
+          });
+        }
+
+        // Check for src directory (organized source code)
+        if (topLevelDirs.includes("src")) {
+          detectedFeatures.push({
+            category: "Project Structure",
+            description: "Organized source code structure",
+            steps: [
+              "Step 1: Source directory exists",
+              "Step 2: Code is properly organized",
+              "Step 3: Follows best practices",
+            ],
+            passes: true,
+          });
+        }
+
+        // Check package.json for dependencies and detect features
+        if (fileContents["package.json"]) {
+          try {
+            const pkg = JSON.parse(fileContents["package.json"]);
+
+            // React/Next.js app detection
+            if (pkg.dependencies?.react || pkg.dependencies?.["react-dom"]) {
+              detectedFeatures.push({
+                category: "Frontend",
+                description: "React-based user interface",
+                steps: [
+                  "Step 1: React is installed",
+                  "Step 2: Components render correctly",
+                  "Step 3: State management works",
+                ],
+                passes: true,
+              });
+            }
+
+            if (pkg.dependencies?.next) {
+              detectedFeatures.push({
+                category: "Framework",
+                description: "Next.js framework integration",
+                steps: [
+                  "Step 1: Next.js is configured",
+                  "Step 2: Pages/routes are defined",
+                  "Step 3: Server-side rendering works",
+                ],
+                passes: true,
+              });
+            }
+
+            // TypeScript support
+            if (
+              pkg.devDependencies?.typescript ||
+              pkg.dependencies?.typescript ||
+              extensions["ts"] ||
+              extensions["tsx"]
+            ) {
+              detectedFeatures.push({
+                category: "Developer Experience",
+                description: "TypeScript type safety",
+                steps: [
+                  "Step 1: TypeScript is configured",
+                  "Step 2: Type definitions exist",
+                  "Step 3: Code compiles without errors",
+                ],
+                passes: true,
+              });
+            }
+
+            // Tailwind CSS
+            if (
+              pkg.devDependencies?.tailwindcss ||
+              pkg.dependencies?.tailwindcss
+            ) {
+              detectedFeatures.push({
+                category: "UI/Design",
+                description: "Tailwind CSS styling",
+                steps: [
+                  "Step 1: Tailwind is configured",
+                  "Step 2: Styles are applied",
+                  "Step 3: Responsive design works",
+                ],
+                passes: true,
+              });
+            }
+
+            // ESLint/Prettier (code quality)
+            if (pkg.devDependencies?.eslint || pkg.devDependencies?.prettier) {
+              detectedFeatures.push({
+                category: "Developer Experience",
+                description: "Code quality tools",
+                steps: [
+                  "Step 1: Linter is configured",
+                  "Step 2: Code passes lint checks",
+                  "Step 3: Formatting is consistent",
+                ],
+                passes: true,
+              });
+            }
+
+            // Electron (desktop app)
+            if (pkg.dependencies?.electron || pkg.devDependencies?.electron) {
+              detectedFeatures.push({
+                category: "Platform",
+                description: "Electron desktop application",
+                steps: [
+                  "Step 1: Electron is configured",
+                  "Step 2: Main process runs",
+                  "Step 3: Renderer process loads",
+                ],
+                passes: true,
+              });
+            }
+
+            // Playwright testing
+            if (
+              pkg.devDependencies?.playwright ||
+              pkg.devDependencies?.["@playwright/test"]
+            ) {
+              detectedFeatures.push({
+                category: "Testing",
+                description: "Playwright end-to-end testing",
+                steps: [
+                  "Step 1: Playwright is configured",
+                  "Step 2: E2E tests are defined",
+                  "Step 3: Tests pass successfully",
+                ],
+                passes: true,
+              });
+            }
+          } catch {
+            // Ignore JSON parse errors
+          }
+        }
+
+        // Check for documentation
+        if (
+          topLevelFiles.includes("readme.md") ||
+          topLevelDirs.includes("docs")
+        ) {
+          detectedFeatures.push({
+            category: "Documentation",
+            description: "Project documentation",
+            steps: [
+              "Step 1: README exists",
+              "Step 2: Documentation is comprehensive",
+              "Step 3: Setup instructions are clear",
+            ],
+            passes: true,
+          });
+        }
+
+        // Check for CI/CD configuration
+        const hasCICD =
+          topLevelDirs.includes(".github") ||
+          topLevelFiles.includes(".gitlab-ci.yml") ||
+          topLevelFiles.includes(".travis.yml");
+
+        if (hasCICD) {
+          detectedFeatures.push({
+            category: "DevOps",
+            description: "CI/CD pipeline configuration",
+            steps: [
+              "Step 1: CI config exists",
+              "Step 2: Pipeline runs on push",
+              "Step 3: Automated checks pass",
+            ],
+            passes: true,
+          });
+        }
+
+        // Check for API routes (Next.js API or Express)
+        const hasAPIRoutes = allFilePaths.some(
+          (p) =>
+            p.includes("/api/") ||
+            p.includes("/routes/") ||
+            p.includes("/endpoints/")
+        );
+
+        if (hasAPIRoutes) {
+          detectedFeatures.push({
+            category: "Backend",
+            description: "API endpoints",
+            steps: [
+              "Step 1: API routes are defined",
+              "Step 2: Endpoints respond correctly",
+              "Step 3: Error handling is implemented",
+            ],
+            passes: true,
+          });
+        }
+
+        // Check for state management
+        const hasStateManagement = allFilePaths.some(
+          (p) =>
+            p.includes("/store/") ||
+            p.includes("/stores/") ||
+            p.includes("/redux/") ||
+            p.includes("/context/")
+        );
+
+        if (hasStateManagement) {
+          detectedFeatures.push({
+            category: "Architecture",
+            description: "State management system",
+            steps: [
+              "Step 1: Store is configured",
+              "Step 2: State updates correctly",
+              "Step 3: Components access state",
+            ],
+            passes: true,
+          });
+        }
+
+        // Check for configuration files
+        if (
+          topLevelFiles.includes("tsconfig.json") ||
+          topLevelFiles.includes("package.json")
+        ) {
+          detectedFeatures.push({
+            category: "Configuration",
+            description: "Project configuration files",
+            steps: [
+              "Step 1: Config files exist",
+              "Step 2: Configuration is valid",
+              "Step 3: Build process works",
+            ],
+            passes: true,
+          });
+        }
+      };
+
+      detectFeatures();
+
+      // If no features were detected, add a default feature
+      if (detectedFeatures.length === 0) {
+        detectedFeatures.push({
+          category: "Core",
+          description: "Basic project structure",
+          steps: [
+            "Step 1: Project directory exists",
+            "Step 2: Files are present",
+            "Step 3: Project can be loaded",
+          ],
+          passes: true,
+        });
+      }
+
+      // Generate the feature list content
+      const featureListContent = JSON.stringify(detectedFeatures, null, 2);
+
+      // Write the feature list file
+      const featureListPath = `${currentProject.path}/feature_list.json`;
+      const writeResult = await api.writeFile(
+        featureListPath,
+        featureListContent
+      );
+
+      if (writeResult.success) {
+        setFeatureListGenerated(true);
+      } else {
+        setFeatureListError(
+          writeResult.error || "Failed to write feature list file"
+        );
+      }
+    } catch (error) {
+      console.error("Failed to generate feature list:", error);
+      setFeatureListError(
+        error instanceof Error
+          ? error.message
+          : "Failed to generate feature list"
+      );
+    } finally {
+      setIsGeneratingFeatureList(false);
+    }
+  }, [currentProject, projectAnalysis]);
+
+  // Toggle folder expansion
+  const toggleFolder = (path: string) => {
+    const newExpanded = new Set(expandedFolders);
+    if (expandedFolders.has(path)) {
+      newExpanded.delete(path);
+    } else {
+      newExpanded.add(path);
+    }
+    setExpandedFolders(newExpanded);
+  };
+
+  // Render file tree node
+  const renderNode = (node: FileTreeNode, depth: number = 0) => {
+    const isExpanded = expandedFolders.has(node.path);
+
+    return (
+      <div key={node.path} data-testid={`analysis-node-${node.name}`}>
+        <div
+          className={cn(
+            "flex items-center gap-2 py-1 px-2 rounded cursor-pointer hover:bg-muted/50 text-sm"
+          )}
+          style={{ paddingLeft: `${depth * 16 + 8}px` }}
+          onClick={() => {
+            if (node.isDirectory) {
+              toggleFolder(node.path);
+            }
+          }}
+        >
+          {node.isDirectory ? (
+            <>
+              {isExpanded ? (
+                <ChevronDown className="w-4 h-4 text-muted-foreground shrink-0" />
+              ) : (
+                <ChevronRight className="w-4 h-4 text-muted-foreground shrink-0" />
+              )}
+              {isExpanded ? (
+                <FolderOpen className="w-4 h-4 text-primary shrink-0" />
+              ) : (
+                <Folder className="w-4 h-4 text-primary shrink-0" />
+              )}
+            </>
+          ) : (
+            <>
+              <span className="w-4" />
+              <File className="w-4 h-4 text-muted-foreground shrink-0" />
+            </>
+          )}
+          <span className="truncate">{node.name}</span>
+          {node.extension && (
+            <span className="text-xs text-muted-foreground ml-auto">
+              .{node.extension}
+            </span>
+          )}
+        </div>
+        {node.isDirectory && isExpanded && node.children && (
+          <div>
+            {node.children.map((child) => renderNode(child, depth + 1))}
+          </div>
+        )}
+      </div>
+    );
+  };
+
+  if (!currentProject) {
+    return (
+      <div
+        className="flex-1 flex items-center justify-center"
+        data-testid="analysis-view-no-project"
+      >
+        <p className="text-muted-foreground">No project selected</p>
+      </div>
+    );
+  }
+
+  return (
+    <div
+      className="flex-1 flex flex-col overflow-hidden content-bg"
+      data-testid="analysis-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 gap-3">
+          <Search className="w-5 h-5 text-muted-foreground" />
+          <div>
+            <h1 className="text-xl font-bold">Project Analysis</h1>
+            <p className="text-sm text-muted-foreground">
+              {currentProject.name}
+            </p>
+          </div>
+        </div>
+        <Button
+          onClick={runAnalysis}
+          disabled={isAnalyzing}
+          data-testid="analyze-project-button"
+        >
+          {isAnalyzing ? (
+            <>
+              <Loader2 className="w-4 h-4 mr-2 animate-spin" />
+              Analyzing...
+            </>
+          ) : (
+            <>
+              <RefreshCw className="w-4 h-4 mr-2" />
+              Analyze Project
+            </>
+          )}
+        </Button>
+      </div>
+
+      {/* Content */}
+      <div className="flex-1 overflow-hidden p-4">
+        {!projectAnalysis && !isAnalyzing ? (
+          <div className="flex flex-col items-center justify-center h-full text-center">
+            <Search className="w-16 h-16 text-muted-foreground/50 mb-4" />
+            <h2 className="text-lg font-semibold mb-2">No Analysis Yet</h2>
+            <p className="text-sm text-muted-foreground mb-4 max-w-md">
+              Click &quot;Analyze Project&quot; to scan your codebase and get
+              insights about its structure.
+            </p>
+            <Button
+              onClick={runAnalysis}
+              data-testid="analyze-project-button-empty"
+            >
+              <Search className="w-4 h-4 mr-2" />
+              Start Analysis
+            </Button>
+          </div>
+        ) : isAnalyzing ? (
+          <div className="flex flex-col items-center justify-center h-full">
+            <Loader2 className="w-12 h-12 animate-spin text-primary mb-4" />
+            <p className="text-muted-foreground">Scanning project files...</p>
+          </div>
+        ) : projectAnalysis ? (
+          <div className="flex gap-4 h-full overflow-hidden">
+            {/* Stats Panel */}
+            <div className="w-80 shrink-0 overflow-y-auto space-y-4">
+              <Card data-testid="analysis-stats">
+                <CardHeader className="pb-2">
+                  <CardTitle className="text-sm flex items-center gap-2">
+                    <BarChart3 className="w-4 h-4" />
+                    Statistics
+                  </CardTitle>
+                  <CardDescription>
+                    Analyzed{" "}
+                    {new Date(projectAnalysis.analyzedAt).toLocaleString()}
+                  </CardDescription>
+                </CardHeader>
+                <CardContent className="space-y-3">
+                  <div className="flex justify-between">
+                    <span className="text-sm text-muted-foreground">
+                      Total Files
+                    </span>
+                    <span className="font-medium" data-testid="total-files">
+                      {projectAnalysis.totalFiles}
+                    </span>
+                  </div>
+                  <div className="flex justify-between">
+                    <span className="text-sm text-muted-foreground">
+                      Total Directories
+                    </span>
+                    <span
+                      className="font-medium"
+                      data-testid="total-directories"
+                    >
+                      {projectAnalysis.totalDirectories}
+                    </span>
+                  </div>
+                </CardContent>
+              </Card>
+
+              <Card data-testid="files-by-extension">
+                <CardHeader className="pb-2">
+                  <CardTitle className="text-sm flex items-center gap-2">
+                    <FileCode className="w-4 h-4" />
+                    Files by Extension
+                  </CardTitle>
+                </CardHeader>
+                <CardContent>
+                  <div className="space-y-2">
+                    {Object.entries(projectAnalysis.filesByExtension)
+                      .sort((a, b) => b[1] - a[1])
+                      .slice(0, 15)
+                      .map(([ext, count]) => (
+                        <div key={ext} className="flex justify-between text-sm">
+                          <span className="text-muted-foreground font-mono">
+                            {ext.startsWith("(") ? ext : `.${ext}`}
+                          </span>
+                          <span>{count}</span>
+                        </div>
+                      ))}
+                  </div>
+                </CardContent>
+              </Card>
+
+              {/* Generate Spec Card */}
+              <Card data-testid="generate-spec-card">
+                <CardHeader className="pb-2">
+                  <CardTitle className="text-sm flex items-center gap-2">
+                    <FileText className="w-4 h-4" />
+                    Generate Specification
+                  </CardTitle>
+                  <CardDescription>
+                    Create app_spec.txt from analysis
+                  </CardDescription>
+                </CardHeader>
+                <CardContent className="space-y-3">
+                  <p className="text-sm text-muted-foreground">
+                    Generate a project specification file based on the analyzed
+                    codebase structure and detected technologies.
+                  </p>
+                  <Button
+                    onClick={generateSpec}
+                    disabled={isGeneratingSpec}
+                    className="w-full"
+                    data-testid="generate-spec-button"
+                  >
+                    {isGeneratingSpec ? (
+                      <>
+                        <Loader2 className="w-4 h-4 mr-2 animate-spin" />
+                        Generating...
+                      </>
+                    ) : (
+                      <>
+                        <FileText className="w-4 h-4 mr-2" />
+                        Generate Spec
+                      </>
+                    )}
+                  </Button>
+                  {specGenerated && (
+                    <div
+                      className="flex items-center gap-2 text-sm text-green-500"
+                      data-testid="spec-generated-success"
+                    >
+                      <CheckCircle className="w-4 h-4" />
+                      <span>app_spec.txt created successfully!</span>
+                    </div>
+                  )}
+                  {specError && (
+                    <div
+                      className="flex items-center gap-2 text-sm text-red-500"
+                      data-testid="spec-generated-error"
+                    >
+                      <AlertCircle className="w-4 h-4" />
+                      <span>{specError}</span>
+                    </div>
+                  )}
+                </CardContent>
+              </Card>
+
+              {/* Generate Feature List Card */}
+              <Card data-testid="generate-feature-list-card">
+                <CardHeader className="pb-2">
+                  <CardTitle className="text-sm flex items-center gap-2">
+                    <ListChecks className="w-4 h-4" />
+                    Generate Feature List
+                  </CardTitle>
+                  <CardDescription>
+                    Create .automaker/feature_list.json from analysis
+                  </CardDescription>
+                </CardHeader>
+                <CardContent className="space-y-3">
+                  <p className="text-sm text-muted-foreground">
+                    Automatically detect and generate a feature list based on
+                    the analyzed codebase structure, dependencies, and project
+                    configuration.
+                  </p>
+                  <Button
+                    onClick={generateFeatureList}
+                    disabled={isGeneratingFeatureList}
+                    className="w-full"
+                    data-testid="generate-feature-list-button"
+                  >
+                    {isGeneratingFeatureList ? (
+                      <>
+                        <Loader2 className="w-4 h-4 mr-2 animate-spin" />
+                        Generating...
+                      </>
+                    ) : (
+                      <>
+                        <ListChecks className="w-4 h-4 mr-2" />
+                        Generate Feature List
+                      </>
+                    )}
+                  </Button>
+                  {featureListGenerated && (
+                    <div
+                      className="flex items-center gap-2 text-sm text-green-500"
+                      data-testid="feature-list-generated-success"
+                    >
+                      <CheckCircle className="w-4 h-4" />
+                      <span>feature_list.json created successfully!</span>
+                    </div>
+                  )}
+                  {featureListError && (
+                    <div
+                      className="flex items-center gap-2 text-sm text-red-500"
+                      data-testid="feature-list-generated-error"
+                    >
+                      <AlertCircle className="w-4 h-4" />
+                      <span>{featureListError}</span>
+                    </div>
+                  )}
+                </CardContent>
+              </Card>
+            </div>
+
+            {/* File Tree */}
+            <Card className="flex-1 overflow-hidden">
+              <CardHeader className="pb-2 border-b">
+                <CardTitle className="text-sm flex items-center gap-2">
+                  <Folder className="w-4 h-4" />
+                  File Tree
+                </CardTitle>
+                <CardDescription>
+                  {projectAnalysis.totalFiles} files in{" "}
+                  {projectAnalysis.totalDirectories} directories
+                </CardDescription>
+              </CardHeader>
+              <CardContent
+                className="p-0 overflow-y-auto h-full"
+                data-testid="analysis-file-tree"
+              >
+                <div className="p-2">
+                  {projectAnalysis.fileTree.map((node) => renderNode(node))}
+                </div>
+              </CardContent>
+            </Card>
+          </div>
+        ) : null}
+      </div>
+    </div>
+  );
+}
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 45150843..c7d3c80b 100644
--- a/app/src/components/views/board-view.tsx
+++ b/app/src/components/views/board-view.tsx
@@ -16,7 +16,14 @@ import {
   SortableContext,
   verticalListSortingStrategy,
 } from "@dnd-kit/sortable";
-import { useAppStore, Feature, FeatureImage, FeatureImagePath, AgentModel, ThinkingLevel } from "@/store/app-store";
+import {
+  useAppStore,
+  Feature,
+  FeatureImage,
+  FeatureImagePath,
+  AgentModel,
+  ThinkingLevel,
+} from "@/store/app-store";
 import { getElectronAPI } from "@/lib/electron";
 import { cn } from "@/lib/utils";
 import {
@@ -31,7 +38,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 +54,24 @@ 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, MessageSquare, GitCommit, Brain, Zap } from "lucide-react";
+import {
+  Plus,
+  RefreshCw,
+  Play,
+  StopCircle,
+  Loader2,
+  ChevronUp,
+  ChevronDown,
+  Users,
+  Trash2,
+  FastForward,
+  FlaskConical,
+  CheckCircle2,
+  MessageSquare,
+  GitCommit,
+  Brain,
+  Zap,
+} from "lucide-react";
 import { toast } from "sonner";
 import { Slider } from "@/components/ui/slider";
 import { Checkbox } from "@/components/ui/checkbox";
@@ -96,13 +123,18 @@ 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[]>([]);
   const [showFollowUpDialog, setShowFollowUpDialog] = useState(false);
   const [followUpFeature, setFollowUpFeature] = useState<Feature | null>(null);
   const [followUpPrompt, setFollowUpPrompt] = useState("");
-  const [followUpImagePaths, setFollowUpImagePaths] = useState<DescriptionImagePath[]>([]);
+  const [followUpImagePaths, setFollowUpImagePaths] = useState<
+    DescriptionImagePath[]
+  >([]);
 
   // Make current project available globally for modal
   useEffect(() => {
@@ -136,39 +168,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
@@ -218,7 +247,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
@@ -236,14 +267,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) {
@@ -281,33 +310,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(() => {
@@ -350,7 +382,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();
@@ -372,7 +407,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,
@@ -461,7 +498,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;
       }
     }
@@ -486,10 +525,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;
     }
@@ -499,7 +544,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 {
@@ -507,23 +555,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 ? "..." : ""}`,
         });
       }
     }
@@ -544,7 +610,16 @@ export function BoardView() {
     });
     // Persist the category
     saveCategory(category);
-    setNewFeature({ category: "", description: "", steps: [""], images: [], imagePaths: [], skipTests: false, model: "opus", thinkingLevel: "none" });
+    setNewFeature({
+      category: "",
+      description: "",
+      steps: [""],
+      images: [],
+      imagePaths: [],
+      skipTests: false,
+      model: "opus",
+      thinkingLevel: "none",
+    });
     setShowAddDialog(false);
   };
 
@@ -578,7 +653,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);
@@ -627,7 +705,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();
@@ -659,7 +740,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();
@@ -690,25 +774,42 @@ 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 ? "..." : ""}`,
     });
   };
 
   // Open follow-up dialog for waiting_approval features
   const handleOpenFollowUp = (feature: Feature) => {
-    console.log("[Board] Opening follow-up dialog for feature:", { id: feature.id, description: feature.description });
+    console.log("[Board] Opening follow-up dialog for feature:", {
+      id: feature.id,
+      description: feature.description,
+    });
     setFollowUpFeature(feature);
     setFollowUpPrompt("");
     setFollowUpImagePaths([]);
@@ -723,12 +824,12 @@ export function BoardView() {
     const featureId = followUpFeature.id;
     const featureDescription = followUpFeature.description;
     const prompt = followUpPrompt;
-    const imagePaths = followUpImagePaths.map(img => img.path);
+    const imagePaths = followUpImagePaths.map((img) => img.path);
 
     console.log("[Board] Sending follow-up prompt for feature:", {
       id: featureId,
       prompt: prompt,
-      imagePaths: imagePaths
+      imagePaths: imagePaths,
     });
 
     const api = getElectronAPI();
@@ -741,7 +842,10 @@ export function BoardView() {
     }
 
     // Move feature back to in_progress before sending follow-up
-    updateFeature(featureId, { status: "in_progress", startedAt: new Date().toISOString() });
+    updateFeature(featureId, {
+      status: "in_progress",
+      startedAt: new Date().toISOString(),
+    });
 
     // Reset follow-up state immediately (close dialog, clear form)
     setShowFollowUpDialog(false);
@@ -751,30 +855,33 @@ export function BoardView() {
 
     // Show success toast immediately
     toast.success("Follow-up started", {
-      description: `Continuing work on: ${featureDescription.slice(0, 50)}${featureDescription.length > 50 ? "..." : ""}`,
+      description: `Continuing work on: ${featureDescription.slice(0, 50)}${
+        featureDescription.length > 50 ? "..." : ""
+      }`,
     });
 
     // Call the API in the background (don't await - let it run async)
-    api.autoMode.followUpFeature(
-      currentProject.path,
-      featureId,
-      prompt,
-      imagePaths
-    ).catch((error) => {
-      console.error("[Board] Error sending follow-up:", error);
-      toast.error("Failed to send follow-up", {
-        description: error instanceof Error ? error.message : "An error occurred",
+    api.autoMode
+      .followUpFeature(currentProject.path, featureId, prompt, imagePaths)
+      .catch((error) => {
+        console.error("[Board] Error sending follow-up:", error);
+        toast.error("Failed to send follow-up", {
+          description:
+            error instanceof Error ? error.message : "An error occurred",
+        });
+        // Reload features to revert status if there was an error
+        loadFeatures();
       });
-      // Reload features to revert status if there was an error
-      loadFeatures();
-    });
   };
 
   // Handle commit-only for waiting_approval features (marks as verified and commits)
   const handleCommitFeature = async (feature: Feature) => {
     if (!currentProject) return;
 
-    console.log("[Board] Committing feature:", { id: feature.id, description: feature.description });
+    console.log("[Board] Committing feature:", {
+      id: feature.id,
+      description: feature.description,
+    });
 
     try {
       const api = getElectronAPI();
@@ -797,7 +904,10 @@ export function BoardView() {
         // Move to verified status
         moveFeature(feature.id, "verified");
         toast.success("Feature committed", {
-          description: `Committed and verified: ${feature.description.slice(0, 50)}${feature.description.length > 50 ? "..." : ""}`,
+          description: `Committed and verified: ${feature.description.slice(
+            0,
+            50
+          )}${feature.description.length > 50 ? "..." : ""}`,
         });
       } else {
         console.error("[Board] Failed to commit feature:", result.error);
@@ -809,7 +919,8 @@ export function BoardView() {
     } catch (error) {
       console.error("[Board] Error committing feature:", error);
       toast.error("Failed to commit feature", {
-        description: error instanceof Error ? error.message : "An error occurred",
+        description:
+          error instanceof Error ? error.message : "An error occurred",
       });
       await loadFeatures();
     }
@@ -817,10 +928,15 @@ export function BoardView() {
 
   // Move feature to waiting_approval (for skipTests features when agent completes)
   const handleMoveToWaitingApproval = (feature: Feature) => {
-    console.log("[Board] Moving feature to waiting_approval:", { id: feature.id, description: feature.description });
+    console.log("[Board] Moving feature to waiting_approval:", {
+      id: feature.id,
+      description: feature.description,
+    });
     updateFeature(feature.id, { status: "waiting_approval" });
     toast.info("Feature ready for review", {
-      description: `Ready for approval: ${feature.description.slice(0, 50)}${feature.description.length > 50 ? "..." : ""}`,
+      description: `Ready for approval: ${feature.description.slice(0, 50)}${
+        feature.description.length > 50 ? "..." : ""
+      }`,
     });
   };
 
@@ -863,28 +979,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 {
@@ -894,23 +1013,31 @@ export function BoardView() {
       // - If it's a skipTests feature that was in waiting_approval (i.e., during commit operation),
       //   move it back to waiting_approval so user can try commit again or do follow-up
       // - Otherwise, move to backlog
-      const targetStatus = feature.skipTests && feature.status === "waiting_approval"
-        ? "waiting_approval"
-        : "backlog";
+      const targetStatus =
+        feature.skipTests && feature.status === "waiting_approval"
+          ? "waiting_approval"
+          : "backlog";
 
       if (targetStatus !== feature.status) {
         moveFeature(feature.id, targetStatus);
       }
 
       toast.success("Agent stopped", {
-        description: targetStatus === "waiting_approval"
-          ? `Stopped commit - returned to waiting approval: ${feature.description.slice(0, 50)}${feature.description.length > 50 ? "..." : ""}`
-          : `Stopped working on: ${feature.description.slice(0, 50)}${feature.description.length > 50 ? "..." : ""}`,
+        description:
+          targetStatus === "waiting_approval"
+            ? `Stopped commit - returned to waiting approval: ${feature.description.slice(
+                0,
+                50
+              )}${feature.description.length > 50 ? "..." : ""}`
+            : `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",
       });
     }
   };
@@ -922,7 +1049,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;
     }
@@ -938,14 +1067,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
@@ -981,7 +1124,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>
@@ -990,10 +1133,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])}
@@ -1004,7 +1147,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}
@@ -1027,11 +1170,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
@@ -1077,112 +1219,119 @@ 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)}
-                          onFollowUp={() => handleOpenFollowUp(feature)}
-                          onCommit={() => handleCommitFeature(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)
+                            }
+                            onFollowUp={() => handleOpenFollowUp(feature)}
+                            onCommit={() => handleCommitFeature(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>
         )}
@@ -1194,7 +1343,11 @@ export function BoardView() {
           compact={!isMaximized}
           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();
             }
@@ -1280,7 +1433,8 @@ export function BoardView() {
               </div>
             </div>
             <p className="text-xs text-muted-foreground mb-4">
-              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>
 
             {/* Model Selection */}
@@ -1451,19 +1605,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 mb-4">
-                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>
 
               {/* Model Selection */}
@@ -1563,21 +1724,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
@@ -1593,7 +1762,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
+                      );
                     }
                   }
 
@@ -1616,19 +1788,26 @@ export function BoardView() {
       </Dialog>
 
       {/* Follow-Up Prompt Dialog */}
-      <Dialog open={showFollowUpDialog} onOpenChange={(open) => {
-        if (!open) {
-          setShowFollowUpDialog(false);
-          setFollowUpFeature(null);
-          setFollowUpPrompt("");
-          setFollowUpImagePaths([]);
-        }
-      }}>
+      <Dialog
+        open={showFollowUpDialog}
+        onOpenChange={(open) => {
+          if (!open) {
+            setShowFollowUpDialog(false);
+            setFollowUpFeature(null);
+            setFollowUpPrompt("");
+            setFollowUpImagePaths([]);
+          }
+        }}
+      >
         <DialogContent
           compact={!isMaximized}
           data-testid="follow-up-dialog"
           onKeyDown={(e) => {
-            if ((e.metaKey || e.ctrlKey) && e.key === "Enter" && followUpPrompt.trim()) {
+            if (
+              (e.metaKey || e.ctrlKey) &&
+              e.key === "Enter" &&
+              followUpPrompt.trim()
+            ) {
               e.preventDefault();
               handleSendFollowUp();
             }
@@ -1640,7 +1819,8 @@ export function BoardView() {
               Send additional instructions to continue working on this feature.
               {followUpFeature && (
                 <span className="block mt-2 text-primary">
-                  Feature: {followUpFeature.description.slice(0, 100)}{followUpFeature.description.length > 100 ? "..." : ""}
+                  Feature: {followUpFeature.description.slice(0, 100)}
+                  {followUpFeature.description.length > 100 ? "..." : ""}
                 </span>
               )}
             </DialogDescription>
@@ -1657,17 +1837,20 @@ export function BoardView() {
               />
             </div>
             <p className="text-xs text-muted-foreground">
-              The agent will continue from where it left off, using the existing context.
-              You can attach screenshots to help explain the issue.
+              The agent will continue from where it left off, using the existing
+              context. You can attach screenshots to help explain the issue.
             </p>
           </div>
           <DialogFooter>
-            <Button variant="ghost" onClick={() => {
-              setShowFollowUpDialog(false);
-              setFollowUpFeature(null);
-              setFollowUpPrompt("");
-              setFollowUpImagePaths([]);
-            }}>
+            <Button
+              variant="ghost"
+              onClick={() => {
+                setShowFollowUpDialog(false);
+                setFollowUpFeature(null);
+                setFollowUpPrompt("");
+                setFollowUpImagePaths([]);
+              }}
+            >
               Cancel
             </Button>
             <Button
@@ -1677,9 +1860,7 @@ export function BoardView() {
             >
               <MessageSquare className="w-4 h-4 mr-2" />
               Send Follow-Up
-              <span
-                className="ml-2 px-1.5 py-0.5 text-[10px] font-mono rounded bg-white/10 border border-white/20"
-              >
+              <span className="ml-2 px-1.5 py-0.5 text-[10px] font-mono rounded bg-white/10 border border-white/20">
                 ⌘↵
               </span>
             </Button>
diff --git a/app/src/components/views/code-view.tsx b/app/src/components/views/code-view.tsx
new file mode 100644
index 00000000..fcbb74b8
--- /dev/null
+++ b/app/src/components/views/code-view.tsx
@@ -0,0 +1,301 @@
+"use client";
+
+import { useEffect, useState, useCallback } from "react";
+import { useAppStore } from "@/store/app-store";
+import { getElectronAPI } from "@/lib/electron";
+import { Card, CardContent } from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+import {
+  File,
+  Folder,
+  FolderOpen,
+  ChevronRight,
+  ChevronDown,
+  RefreshCw,
+  Code,
+} from "lucide-react";
+import { cn } from "@/lib/utils";
+
+interface FileTreeNode {
+  name: string;
+  path: string;
+  isDirectory: boolean;
+  children?: FileTreeNode[];
+  isExpanded?: boolean;
+}
+
+const IGNORE_PATTERNS = [
+  "node_modules",
+  ".git",
+  ".next",
+  "dist",
+  "build",
+  ".DS_Store",
+  "*.log",
+];
+
+const shouldIgnore = (name: string) => {
+  return IGNORE_PATTERNS.some((pattern) => {
+    if (pattern.startsWith("*")) {
+      return name.endsWith(pattern.slice(1));
+    }
+    return name === pattern;
+  });
+};
+
+export function CodeView() {
+  const { currentProject } = useAppStore();
+  const [fileTree, setFileTree] = useState<FileTreeNode[]>([]);
+  const [selectedFile, setSelectedFile] = useState<string | null>(null);
+  const [fileContent, setFileContent] = useState<string>("");
+  const [isLoading, setIsLoading] = useState(true);
+  const [expandedFolders, setExpandedFolders] = useState<Set<string>>(
+    new Set()
+  );
+
+  // Load directory tree
+  const loadTree = useCallback(async () => {
+    if (!currentProject) return;
+
+    setIsLoading(true);
+    try {
+      const api = getElectronAPI();
+      const result = await api.readdir(currentProject.path);
+
+      if (result.success && result.entries) {
+        const entries = result.entries
+          .filter((e) => !shouldIgnore(e.name))
+          .sort((a, b) => {
+            // Directories first
+            if (a.isDirectory && !b.isDirectory) return -1;
+            if (!a.isDirectory && b.isDirectory) return 1;
+            return a.name.localeCompare(b.name);
+          })
+          .map((e) => ({
+            name: e.name,
+            path: `${currentProject.path}/${e.name}`,
+            isDirectory: e.isDirectory,
+          }));
+
+        setFileTree(entries);
+      }
+    } catch (error) {
+      console.error("Failed to load file tree:", error);
+    } finally {
+      setIsLoading(false);
+    }
+  }, [currentProject]);
+
+  useEffect(() => {
+    loadTree();
+  }, [loadTree]);
+
+  // Load subdirectory
+  const loadSubdirectory = async (path: string): Promise<FileTreeNode[]> => {
+    try {
+      const api = getElectronAPI();
+      const result = await api.readdir(path);
+
+      if (result.success && result.entries) {
+        return result.entries
+          .filter((e) => !shouldIgnore(e.name))
+          .sort((a, b) => {
+            if (a.isDirectory && !b.isDirectory) return -1;
+            if (!a.isDirectory && b.isDirectory) return 1;
+            return a.name.localeCompare(b.name);
+          })
+          .map((e) => ({
+            name: e.name,
+            path: `${path}/${e.name}`,
+            isDirectory: e.isDirectory,
+          }));
+      }
+    } catch (error) {
+      console.error("Failed to load subdirectory:", error);
+    }
+    return [];
+  };
+
+  // Load file content
+  const loadFileContent = async (path: string) => {
+    try {
+      const api = getElectronAPI();
+      const result = await api.readFile(path);
+
+      if (result.success && result.content) {
+        setFileContent(result.content);
+        setSelectedFile(path);
+      }
+    } catch (error) {
+      console.error("Failed to load file:", error);
+    }
+  };
+
+  // Toggle folder expansion
+  const toggleFolder = async (node: FileTreeNode) => {
+    const newExpanded = new Set(expandedFolders);
+
+    if (expandedFolders.has(node.path)) {
+      newExpanded.delete(node.path);
+    } else {
+      newExpanded.add(node.path);
+
+      // Load children if not already loaded
+      if (!node.children) {
+        const children = await loadSubdirectory(node.path);
+        // Update the tree with children
+        const updateTree = (nodes: FileTreeNode[]): FileTreeNode[] => {
+          return nodes.map((n) => {
+            if (n.path === node.path) {
+              return { ...n, children };
+            }
+            if (n.children) {
+              return { ...n, children: updateTree(n.children) };
+            }
+            return n;
+          });
+        };
+        setFileTree(updateTree(fileTree));
+      }
+    }
+
+    setExpandedFolders(newExpanded);
+  };
+
+  // Render file tree node
+  const renderNode = (node: FileTreeNode, depth: number = 0) => {
+    const isExpanded = expandedFolders.has(node.path);
+    const isSelected = selectedFile === node.path;
+
+    return (
+      <div key={node.path}>
+        <div
+          className={cn(
+            "flex items-center gap-2 py-1 px-2 rounded cursor-pointer hover:bg-muted/50",
+            isSelected && "bg-muted"
+          )}
+          style={{ paddingLeft: `${depth * 16 + 8}px` }}
+          onClick={() => {
+            if (node.isDirectory) {
+              toggleFolder(node);
+            } else {
+              loadFileContent(node.path);
+            }
+          }}
+          data-testid={`file-tree-item-${node.name}`}
+        >
+          {node.isDirectory ? (
+            <>
+              {isExpanded ? (
+                <ChevronDown className="w-4 h-4 text-muted-foreground shrink-0" />
+              ) : (
+                <ChevronRight className="w-4 h-4 text-muted-foreground shrink-0" />
+              )}
+              {isExpanded ? (
+                <FolderOpen className="w-4 h-4 text-primary shrink-0" />
+              ) : (
+                <Folder className="w-4 h-4 text-primary shrink-0" />
+              )}
+            </>
+          ) : (
+            <>
+              <span className="w-4" />
+              <File className="w-4 h-4 text-muted-foreground shrink-0" />
+            </>
+          )}
+          <span className="text-sm truncate">{node.name}</span>
+        </div>
+        {node.isDirectory && isExpanded && node.children && (
+          <div>
+            {node.children.map((child) => renderNode(child, depth + 1))}
+          </div>
+        )}
+      </div>
+    );
+  };
+
+  if (!currentProject) {
+    return (
+      <div
+        className="flex-1 flex items-center justify-center"
+        data-testid="code-view-no-project"
+      >
+        <p className="text-muted-foreground">No project selected</p>
+      </div>
+    );
+  }
+
+  if (isLoading) {
+    return (
+      <div
+        className="flex-1 flex items-center justify-center"
+        data-testid="code-view-loading"
+      >
+        <RefreshCw className="w-6 h-6 animate-spin text-muted-foreground" />
+      </div>
+    );
+  }
+
+  return (
+    <div
+      className="flex-1 flex flex-col overflow-hidden content-bg"
+      data-testid="code-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 gap-3">
+          <Code className="w-5 h-5 text-muted-foreground" />
+          <div>
+            <h1 className="text-xl font-bold">Code Explorer</h1>
+            <p className="text-sm text-muted-foreground">
+              {currentProject.name}
+            </p>
+          </div>
+        </div>
+        <Button
+          variant="outline"
+          size="sm"
+          onClick={loadTree}
+          data-testid="refresh-tree"
+        >
+          <RefreshCw className="w-4 h-4 mr-2" />
+          Refresh
+        </Button>
+      </div>
+
+      {/* Split View */}
+      <div className="flex-1 flex overflow-hidden">
+        {/* File Tree */}
+        <div className="w-64 border-r overflow-y-auto" data-testid="file-tree">
+          <div className="p-2">{fileTree.map((node) => renderNode(node))}</div>
+        </div>
+
+        {/* Code Preview */}
+        <div className="flex-1 overflow-hidden">
+          {selectedFile ? (
+            <div className="h-full flex flex-col">
+              <div className="px-4 py-2 border-b bg-muted/30">
+                <p className="text-sm font-mono text-muted-foreground truncate">
+                  {selectedFile.replace(currentProject.path, "")}
+                </p>
+              </div>
+              <Card className="flex-1 m-4 overflow-hidden">
+                <CardContent className="p-0 h-full">
+                  <pre className="p-4 h-full overflow-auto text-sm font-mono whitespace-pre-wrap">
+                    <code data-testid="code-content">{fileContent}</code>
+                  </pre>
+                </CardContent>
+              </Card>
+            </div>
+          ) : (
+            <div className="flex-1 flex items-center justify-center">
+              <p className="text-muted-foreground">
+                Select a file to view its contents
+              </p>
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
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 64c9a459..b4fe1c74 100644
--- a/app/src/components/views/kanban-card.tsx
+++ b/app/src/components/views/kanban-card.tsx
@@ -97,9 +97,13 @@ export function KanbanCard({
   const { kanbanCardDetailLevel } = useAppStore();
 
   // Helper functions to check what should be shown based on detail level
-  const showSteps = kanbanCardDetailLevel === "standard" || kanbanCardDetailLevel === "detailed";
+  const showSteps =
+    kanbanCardDetailLevel === "standard" ||
+    kanbanCardDetailLevel === "detailed";
   const showAgentInfo = kanbanCardDetailLevel === "detailed";
-  const showProgressBar = kanbanCardDetailLevel === "standard" || kanbanCardDetailLevel === "detailed";
+  const showProgressBar =
+    kanbanCardDetailLevel === "standard" ||
+    kanbanCardDetailLevel === "detailed";
 
   // Load context file for in_progress, waiting_approval, and verified features
   useEffect(() => {
@@ -164,8 +168,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,
@@ -188,7 +191,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"
@@ -199,7 +202,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}
@@ -293,19 +296,27 @@ export function KanbanCard({
 
         {/* Agent Info Panel - shows for in_progress, waiting_approval, verified */}
         {/* Standard mode: Only show progress bar */}
-        {showProgressBar && !showAgentInfo && feature.status !== "backlog" && agentInfo && (isCurrentAutoTask || feature.status === "in_progress") && (
-          <div className="mb-3 space-y-1">
-            <div className="w-full h-1.5 bg-zinc-800 rounded-full overflow-hidden">
-              <div
-                className="w-full h-full bg-primary transition-transform duration-500 ease-out origin-left"
-                style={{ transform: `translateX(${agentInfo.progressPercentage - 100}%)` }}
-              />
+        {showProgressBar &&
+          !showAgentInfo &&
+          feature.status !== "backlog" &&
+          agentInfo &&
+          (isCurrentAutoTask || feature.status === "in_progress") && (
+            <div className="mb-3 space-y-1">
+              <div className="w-full h-1.5 bg-zinc-800 rounded-full overflow-hidden">
+                <div
+                  className="w-full h-full bg-primary transition-transform duration-500 ease-out origin-left"
+                  style={{
+                    transform: `translateX(${
+                      agentInfo.progressPercentage - 100
+                    }%)`,
+                  }}
+                />
+              </div>
+              <div className="flex items-center justify-between text-[10px] text-muted-foreground">
+                <span>{Math.round(agentInfo.progressPercentage)}%</span>
+              </div>
             </div>
-            <div className="flex items-center justify-between text-[10px] text-muted-foreground">
-              <span>{Math.round(agentInfo.progressPercentage)}%</span>
-            </div>
-          </div>
-        )}
+          )}
 
         {/* Detailed mode: Show all agent info */}
         {showAgentInfo && feature.status !== "backlog" && agentInfo && (
@@ -314,15 +325,22 @@ export function KanbanCard({
             <div className="flex items-center gap-2 text-xs">
               <div className="flex items-center gap-1 text-cyan-400">
                 <Cpu className="w-3 h-3" />
-                <span className="font-medium">{formatModelName(DEFAULT_MODEL)}</span>
+                <span className="font-medium">
+                  {formatModelName(DEFAULT_MODEL)}
+                </span>
               </div>
               {agentInfo.currentPhase && (
-                <div className={cn(
-                  "px-1.5 py-0.5 rounded text-[10px] font-medium",
-                  agentInfo.currentPhase === "planning" && "bg-blue-500/20 text-blue-400",
-                  agentInfo.currentPhase === "action" && "bg-amber-500/20 text-amber-400",
-                  agentInfo.currentPhase === "verification" && "bg-green-500/20 text-green-400"
-                )}>
+                <div
+                  className={cn(
+                    "px-1.5 py-0.5 rounded text-[10px] font-medium",
+                    agentInfo.currentPhase === "planning" &&
+                      "bg-blue-500/20 text-blue-400",
+                    agentInfo.currentPhase === "action" &&
+                      "bg-amber-500/20 text-amber-400",
+                    agentInfo.currentPhase === "verification" &&
+                      "bg-green-500/20 text-green-400"
+                  )}
+                >
                   {agentInfo.currentPhase}
                 </div>
               )}
@@ -334,7 +352,11 @@ export function KanbanCard({
                 <div className="w-full h-1.5 bg-zinc-800 rounded-full overflow-hidden">
                   <div
                     className="w-full h-full bg-primary transition-transform duration-500 ease-out origin-left"
-                    style={{ transform: `translateX(${agentInfo.progressPercentage - 100}%)` }}
+                    style={{
+                      transform: `translateX(${
+                        agentInfo.progressPercentage - 100
+                      }%)`,
+                    }}
                   />
                 </div>
                 <div className="flex items-center justify-between text-[10px] text-muted-foreground">
@@ -344,7 +366,10 @@ export function KanbanCard({
                       {agentInfo.toolCallCount} tools
                     </span>
                     {agentInfo.lastToolUsed && (
-                      <span className="text-zinc-500 truncate max-w-[80px]" title={agentInfo.lastToolUsed}>
+                      <span
+                        className="text-zinc-500 truncate max-w-[80px]"
+                        title={agentInfo.lastToolUsed}
+                      >
                         {agentInfo.lastToolUsed}
                       </span>
                     )}
@@ -360,7 +385,11 @@ export function KanbanCard({
                 <div className="flex items-center gap-1 text-[10px] text-muted-foreground">
                   <ListTodo className="w-3 h-3" />
                   <span>
-                    {agentInfo.todos.filter(t => t.status === "completed").length}/{agentInfo.todos.length} tasks
+                    {
+                      agentInfo.todos.filter((t) => t.status === "completed")
+                        .length
+                    }
+                    /{agentInfo.todos.length} tasks
                   </span>
                 </div>
                 <div className="space-y-0.5 max-h-16 overflow-y-auto">
@@ -376,12 +405,15 @@ export function KanbanCard({
                       ) : (
                         <Circle className="w-2.5 h-2.5 text-zinc-500 shrink-0" />
                       )}
-                      <span className={cn(
-                        "truncate",
-                        todo.status === "completed" && "text-zinc-500 line-through",
-                        todo.status === "in_progress" && "text-amber-400",
-                        todo.status === "pending" && "text-zinc-400"
-                      )}>
+                      <span
+                        className={cn(
+                          "truncate",
+                          todo.status === "completed" &&
+                            "text-zinc-500 line-through",
+                          todo.status === "in_progress" && "text-amber-400",
+                          todo.status === "pending" && "text-zinc-400"
+                        )}
+                      >
                         {todo.content}
                       </span>
                     </div>
@@ -396,7 +428,8 @@ export function KanbanCard({
             )}
 
             {/* Summary for waiting_approval and verified - prioritize feature.summary from UpdateFeatureStatus */}
-            {(feature.status === "waiting_approval" || feature.status === "verified") && (
+            {(feature.status === "waiting_approval" ||
+              feature.status === "verified") && (
               <>
                 {(feature.summary || summary || agentInfo.summary) && (
                   <div className="space-y-1 pt-1 border-t border-white/5">
@@ -423,20 +456,28 @@ export function KanbanCard({
                   </div>
                 )}
                 {/* Show tool count even without summary */}
-                {!feature.summary && !summary && !agentInfo.summary && agentInfo.toolCallCount > 0 && (
-                  <div className="flex items-center gap-2 text-[10px] text-muted-foreground pt-1 border-t border-white/5">
-                    <span className="flex items-center gap-1">
-                      <Wrench className="w-2.5 h-2.5" />
-                      {agentInfo.toolCallCount} tool calls
-                    </span>
-                    {agentInfo.todos.length > 0 && (
+                {!feature.summary &&
+                  !summary &&
+                  !agentInfo.summary &&
+                  agentInfo.toolCallCount > 0 && (
+                    <div className="flex items-center gap-2 text-[10px] text-muted-foreground pt-1 border-t border-white/5">
                       <span className="flex items-center gap-1">
-                        <CheckCircle2 className="w-2.5 h-2.5 text-green-500" />
-                        {agentInfo.todos.filter(t => t.status === "completed").length} tasks done
+                        <Wrench className="w-2.5 h-2.5" />
+                        {agentInfo.toolCallCount} tool calls
                       </span>
-                    )}
-                  </div>
-                )}
+                      {agentInfo.todos.length > 0 && (
+                        <span className="flex items-center gap-1">
+                          <CheckCircle2 className="w-2.5 h-2.5 text-green-500" />
+                          {
+                            agentInfo.todos.filter(
+                              (t) => t.status === "completed"
+                            ).length
+                          }{" "}
+                          tasks done
+                        </span>
+                      )}
+                    </div>
+                  )}
               </>
             )}
           </div>
@@ -672,7 +713,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>
@@ -713,7 +755,10 @@ export function KanbanCard({
           </DialogHeader>
           <div className="flex-1 overflow-y-auto p-4 bg-zinc-900/50 rounded-lg border border-white/10">
             <Markdown>
-              {feature.summary || summary || agentInfo?.summary || "No summary available"}
+              {feature.summary ||
+                summary ||
+                agentInfo?.summary ||
+                "No summary available"}
             </Markdown>
           </div>
           <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 9eb3ae62..2eeadfec 100644
--- a/app/src/components/views/settings-view.tsx
+++ b/app/src/components/views/settings-view.tsx
@@ -5,21 +5,60 @@ 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, LayoutGrid, Minimize2, Square, Maximize2, Terminal } from "lucide-react";
+import {
+  Settings,
+  Key,
+  Eye,
+  EyeOff,
+  CheckCircle2,
+  AlertCircle,
+  Loader2,
+  Zap,
+  Sun,
+  Moon,
+  Palette,
+  Terminal,
+  Ghost,
+  Snowflake,
+  Flame,
+  Sparkles,
+  Eclipse,
+  Trees,
+  Cat,
+  Atom,
+  Radio,
+  LayoutGrid,
+  Minimize2,
+  Square,
+  Maximize2,
+} from "lucide-react";
 import { getElectronAPI } from "@/lib/electron";
 
 export function SettingsView() {
-  const { apiKeys, setApiKeys, setCurrentView, theme, setTheme, kanbanCardDetailLevel, setKanbanCardDetailLevel } = useAppStore();
+  const {
+    apiKeys,
+    setApiKeys,
+    setCurrentView,
+    theme,
+    setTheme,
+    kanbanCardDetailLevel,
+    setKanbanCardDetailLevel,
+  } = 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);
   const [claudeCliStatus, setClaudeCliStatus] = useState<{
     success: boolean;
     status?: string;
@@ -72,12 +111,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);
     }
@@ -99,12 +147,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);
     }
@@ -120,17 +177,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>
@@ -140,25 +202,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">
@@ -169,14 +234,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"
                     >
@@ -192,7 +257,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 ? (
@@ -218,14 +283,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"
                   >
@@ -234,7 +300,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>
@@ -242,11 +313,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">
@@ -257,14 +328,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"
                     >
@@ -280,7 +351,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 ? (
@@ -297,7 +368,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"
@@ -311,8 +383,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"
                   >
@@ -321,7 +393,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>
@@ -332,8 +409,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>
@@ -421,43 +498,165 @@ export function SettingsView() {
           )}
 
           {/* 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>
@@ -469,7 +668,9 @@ export function SettingsView() {
             <div className="p-6 border-b border-white/10">
               <div className="flex items-center gap-2 mb-2">
                 <LayoutGrid className="w-5 h-5 text-brand-500" />
-                <h2 className="text-lg font-semibold text-white">Kanban Card Display</h2>
+                <h2 className="text-lg font-semibold text-white">
+                  Kanban Card Display
+                </h2>
               </div>
               <p className="text-sm text-zinc-400">
                 Control how much information is displayed on Kanban cards.
@@ -490,7 +691,9 @@ export function SettingsView() {
                   >
                     <Minimize2 className="w-5 h-5" />
                     <span className="font-medium text-sm">Minimal</span>
-                    <span className="text-xs text-zinc-500 text-center">Title & category only</span>
+                    <span className="text-xs text-zinc-500 text-center">
+                      Title & category only
+                    </span>
                   </button>
                   <button
                     onClick={() => setKanbanCardDetailLevel("standard")}
@@ -503,7 +706,9 @@ export function SettingsView() {
                   >
                     <Square className="w-5 h-5" />
                     <span className="font-medium text-sm">Standard</span>
-                    <span className="text-xs text-zinc-500 text-center">Steps & progress</span>
+                    <span className="text-xs text-zinc-500 text-center">
+                      Steps & progress
+                    </span>
                   </button>
                   <button
                     onClick={() => setKanbanCardDetailLevel("detailed")}
@@ -516,13 +721,18 @@ export function SettingsView() {
                   >
                     <Maximize2 className="w-5 h-5" />
                     <span className="font-medium text-sm">Detailed</span>
-                    <span className="text-xs text-zinc-500 text-center">Model, tools & tasks</span>
+                    <span className="text-xs text-zinc-500 text-center">
+                      Model, tools & tasks
+                    </span>
                   </button>
                 </div>
                 <p className="text-xs text-zinc-500">
-                  <strong>Minimal:</strong> Shows only title and category<br />
-                  <strong>Standard:</strong> Adds steps preview and progress bar<br />
-                  <strong>Detailed:</strong> Shows all info including model, tool calls, task list, and summaries
+                  <strong>Minimal:</strong> Shows only title and category
+                  <br />
+                  <strong>Standard:</strong> Adds steps preview and progress bar
+                  <br />
+                  <strong>Detailed:</strong> Shows all info including model,
+                  tool calls, task list, and summaries
                 </p>
               </div>
             </div>
@@ -533,7 +743,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/hooks/use-auto-mode.ts b/app/src/hooks/use-auto-mode.ts
index 4d1e678c..d03b4344 100644
--- a/app/src/hooks/use-auto-mode.ts
+++ b/app/src/hooks/use-auto-mode.ts
@@ -113,7 +113,9 @@ export function useAutoMode() {
 
         case "auto_mode_phase":
           // Log phase transitions (Planning, Action, Verification)
-          console.log(`[AutoMode] Phase: ${event.phase} for ${event.featureId}`);
+          console.log(
+            `[AutoMode] Phase: ${event.phase} for ${event.featureId}`
+          );
           addAutoModeActivity({
             featureId: event.featureId,
             type: event.phase,
@@ -125,7 +127,13 @@ export function useAutoMode() {
     });
 
     return unsubscribe;
-  }, [addRunningTask, removeRunningTask, clearRunningTasks, setAutoModeRunning, addAutoModeActivity]);
+  }, [
+    addRunningTask,
+    removeRunningTask,
+    clearRunningTasks,
+    setAutoModeRunning,
+    addAutoModeActivity,
+  ]);
 
   // Start auto mode
   const start = useCallback(async () => {
@@ -181,33 +189,36 @@ export function useAutoMode() {
   }, [setAutoModeRunning, clearRunningTasks]);
 
   // Stop a specific feature
-  const stopFeature = useCallback(async (featureId: string) => {
-    try {
-      const api = getElectronAPI();
-      if (!api?.autoMode?.stopFeature) {
-        throw new Error("Stop feature API not available");
-      }
+  const stopFeature = useCallback(
+    async (featureId: string) => {
+      try {
+        const api = getElectronAPI();
+        if (!api?.autoMode?.stopFeature) {
+          throw new Error("Stop feature API not available");
+        }
 
-      const result = await api.autoMode.stopFeature(featureId);
+        const result = await api.autoMode.stopFeature(featureId);
 
-      if (result.success) {
-        removeRunningTask(featureId);
-        console.log("[AutoMode] Feature stopped successfully:", featureId);
-        addAutoModeActivity({
-          featureId,
-          type: "complete",
-          message: "Feature stopped by user",
-          passes: false,
-        });
-      } else {
-        console.error("[AutoMode] Failed to stop feature:", result.error);
-        throw new Error(result.error || "Failed to stop feature");
+        if (result.success) {
+          removeRunningTask(featureId);
+          console.log("[AutoMode] Feature stopped successfully:", featureId);
+          addAutoModeActivity({
+            featureId,
+            type: "complete",
+            message: "Feature stopped by user",
+            passes: false,
+          });
+        } else {
+          console.error("[AutoMode] Failed to stop feature:", result.error);
+          throw new Error(result.error || "Failed to stop feature");
+        }
+      } catch (error) {
+        console.error("[AutoMode] Error stopping feature:", error);
+        throw error;
       }
-    } catch (error) {
-      console.error("[AutoMode] Error stopping feature:", error);
-      throw error;
-    }
-  }, [removeRunningTask, addAutoModeActivity]);
+    },
+    [removeRunningTask, addAutoModeActivity]
+  );
 
   return {
     isRunning: isAutoModeRunning,
diff --git a/app/src/store/app-store.ts b/app/src/store/app-store.ts
index 02aa6559..8d31cf51 100644
--- a/app/src/store/app-store.ts
+++ b/app/src/store/app-store.ts
@@ -2,8 +2,31 @@ 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 type KanbanCardDetailLevel = "minimal" | "standard" | "detailed";
 
 export interface ApiKeys {
@@ -116,7 +139,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;
@@ -170,7 +201,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;
 
@@ -217,11 +250,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() },
+            ],
           });
         }
       },
@@ -259,7 +298,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 }] });
       },
 
@@ -294,14 +335,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,
@@ -328,14 +374,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];
@@ -351,7 +401,7 @@ export const useAppStore = create<AppState & AppActions>()(
           const currentSession = get().currentChatSession;
           if (currentSession && currentSession.id === sessionId) {
             set({
-              currentChatSession: updatedSessions[sessionIndex]
+              currentChatSession: updatedSessions[sessionIndex],
             });
           }
         }
@@ -373,7 +423,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,
         });
       },
 
@@ -392,13 +443,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,
@@ -417,7 +474,8 @@ export const useAppStore = create<AppState & AppActions>()(
       setMaxConcurrency: (max) => set({ maxConcurrency: max }),
 
       // Kanban Card Settings actions
-      setKanbanCardDetailLevel: (level) => set({ kanbanCardDetailLevel: level }),
+      setKanbanCardDetailLevel: (level) =>
+        set({ kanbanCardDetailLevel: level }),
 
       // Reset
       reset: () => set(initialState),