diff --git a/CLAUDE.md b/CLAUDE.md
index e28bb710..40dd0e05 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -24,10 +24,10 @@
 - **Logo:** Inline SVG in `BrandLogo.tsx` (decision-tree icon with gradient). Wordmark: "Resolution" in white + "Flow" in `text-gradient-brand`
 - **Brand assets:** `brand-assets/` (source SVGs + brand-guide.html), `frontend/src/assets/brand/` (app assets), `frontend/public/icons/` (favicon)
 - **CSS utilities:** `text-gradient-brand`, `bg-gradient-brand`, `bg-gradient-brand-hover` (defined in `tailwind.config.js` and `index.css`)
-- **Layout:** App shell with persistent sidebar + top bar + main workspace (CSS Grid). See [UI-DESIGN-SYSTEM.md](UI-DESIGN-SYSTEM.md)
-- **Workspace system:** Top-level context switcher (Troubleshooting, Procedures, Policies, Finance). Sidebar categories, tags, stats, and content adapt per workspace. See [UI-DESIGN-SYSTEM.md](UI-DESIGN-SYSTEM.md)
+- **Layout:** App shell with persistent sidebar + top bar + main content (CSS Grid). See [UI-DESIGN-SYSTEM.md](UI-DESIGN-SYSTEM.md)
+- **Navigation:** Sidebar nav with type sub-items (All Flows → Troubleshooting / Projects). Pinned flows section for quick access. NO workspace switcher. See [UI-DESIGN-SYSTEM.md](UI-DESIGN-SYSTEM.md)
+- **Terminology:** User-facing label is "Flows" (not "Trees"). Procedural flows are called "Projects" in the UI. `tree_type` column values unchanged in DB.
 - **Rebrand guide:** [REBRAND-IMPLEMENTATION-GUIDE.md](REBRAND-IMPLEMENTATION-GUIDE.md)
-- **Interactive mockup:** `docs/mockups/resolutionflow-workspaces-mockup.html` (open in browser for visual reference)
 
 **Component styling rules:**
 - Primary buttons: `bg-gradient-brand` with `shadow-lg shadow-primary/20`, hover lifts with stronger shadow
@@ -40,7 +40,7 @@
 - Cards: `bg-card border-border rounded-xl`, hover brightens border
 - Section labels: `font-label text-[0.6875rem] uppercase tracking-wide text-muted-foreground`
 
-When adding new pages/components: use "ResolutionFlow" branding, purple gradient accent theme, `bg-card` containers, `text-foreground`/`text-muted-foreground` hierarchy. Primary actions use `bg-gradient-brand`. Pages render inside the app shell (CSS Grid: topbar + sidebar + main). Reference [UI-DESIGN-SYSTEM.md](UI-DESIGN-SYSTEM.md) for layout patterns, workspace context, and component specs.
+When adding new pages/components: use "ResolutionFlow" branding, purple gradient accent theme, `bg-card` containers, `text-foreground`/`text-muted-foreground` hierarchy. Primary actions use `bg-gradient-brand`. Pages render inside the app shell (CSS Grid: topbar + sidebar + main). Use "Flows" not "Trees" in all user-facing text; use "Projects" not "Procedures" for procedural flows. Reference [UI-DESIGN-SYSTEM.md](UI-DESIGN-SYSTEM.md) for layout patterns, navigation, and component specs.
 
 ---
 
diff --git a/UI-DESIGN-SYSTEM.md b/UI-DESIGN-SYSTEM.md
index dfc31804..241dbb01 100644
--- a/UI-DESIGN-SYSTEM.md
+++ b/UI-DESIGN-SYSTEM.md
@@ -1,10 +1,49 @@
 # ResolutionFlow UI Design System & Layout Architecture
 
-> **Purpose:** This document defines the new app-shell layout, design tokens, component patterns, and workspace architecture for ResolutionFlow. It is the single source of truth for all frontend UI work going forward.
+> **Purpose:** This document defines the app-shell layout, design tokens, component patterns, and navigation architecture for ResolutionFlow. It is the single source of truth for all frontend UI work going forward.
 > **Last Updated:** February 15, 2026
-> **Status:** Approved for implementation
-> **Reference Mockup:** `docs/mockups/resolutionflow-workspaces-mockup.html` (interactive, open in browser)
-> **Note:** If the mockup file is not yet in the repo, it should be placed at the path above. The mockup is also available as a project output artifact.
+> **Status:** Approved for implementation (v2 — workspace system removed, replaced with flat nav + type sub-items)
+> **Reference Mockup:** `docs/mockups/resolutionflow-workspaces-mockup.html` (interactive — note: mockup shows old workspace switcher design which has been superseded by this document)
+
+---
+
+## IMPORTANT: Changes from Previous Version
+
+This is version 2 of the design system. The following changes were made based on UX research and product decisions:
+
+1. **Workspace system REMOVED.** The workspace switcher, workspace table, workspace API, `workspaceStore`, and all workspace-related components should be removed. Workspaces added unnecessary cognitive overhead and context-switching cost for the current scale of the product.
+2. **"Procedures" renamed to "Projects"** in all user-facing labels. The `tree_type` database column retains the value `'procedural'` — only UI labels change.
+3. **"Trees" renamed to "Flows"** in all user-facing labels. "Tree" is an internal/technical term. Users see "Flows" everywhere.
+4. **Flow type filtering** is handled via nav sub-items (All Flows → Troubleshooting / Projects), not workspaces.
+5. **Pinned Flows** section added to sidebar for quick access to favorites.
+6. **Folder sidebar panel REMOVED** from the flow library page. Folders remain in the database and API but are not displayed as a persistent second panel. Folder organization is deferred to a future release.
+7. **Search bar centered** in the top bar (flex spacers on both sides).
+8. **Keyboard shortcut badge** is platform-aware: `⌘K` on Mac, `Ctrl+K` on Windows/Linux.
+
+### Files to Remove or Deprecate
+
+These files were created for the workspace system and should be **deleted**:
+
+```
+frontend/src/store/workspaceStore.ts          → DELETE (replace with flowFilterStore.ts)
+frontend/src/api/workspaces.ts                → DELETE
+frontend/src/types/workspace.ts               → DELETE (remove Workspace type)
+frontend/src/components/workspace/            → DELETE entire directory
+frontend/src/constants/workspaceLabels.ts      → DELETE (replace with flowLabels.ts)
+backend/app/models/workspace.py               → DELETE
+backend/app/api/endpoints/workspaces.py        → DELETE
+backend/app/schemas/workspace.py               → DELETE (if exists)
+```
+
+### Database Migration
+
+Create a new migration that:
+1. Drops the `workspace_id` column from `trees` table (if added)
+2. Drops the `workspace_id` column from `tree_categories` table (if added)
+3. Drops the `workspaces` table
+4. **Does NOT touch** the existing `tree_type` column — it stays as-is
+
+Remove the workspace router from `backend/app/api/router.py`.
 
 ---
 
@@ -12,16 +51,15 @@
 
 1. [Layout Architecture](#1-layout-architecture)
 2. [Design Tokens](#2-design-tokens)
-3. [Workspace System](#3-workspace-system)
+3. [Naming & Terminology](#3-naming--terminology)
 4. [Sidebar Components](#4-sidebar-components)
 5. [Top Bar](#5-top-bar)
 6. [Main Content Area](#6-main-content-area)
 7. [Component Patterns](#7-component-patterns)
 8. [Icon System](#8-icon-system)
 9. [Animation & Transitions](#9-animation--transitions)
-10. [Data Model Changes](#10-data-model-changes)
-11. [Migration Strategy](#11-migration-strategy)
-12. [Implementation Phases](#12-implementation-phases)
+10. [Migration Strategy](#10-migration-strategy)
+11. [Implementation Phases](#11-implementation-phases)
 
 ---
 
@@ -29,21 +67,22 @@
 
 ### Overview
 
-ResolutionFlow transitions from a top-nav + full-width content layout to a **persistent sidebar + top bar + main workspace** layout. This mirrors the UX patterns MSP engineers already use in ConnectWise Automate, Datto RMM, and HaloPSA.
+ResolutionFlow uses a **persistent sidebar + top bar + main content** layout. This mirrors the UX patterns MSP engineers already use in ConnectWise Automate, Datto RMM, and HaloPSA.
 
 ### Shell Structure
 
 ```
 ┌──────────────────────────────────────────────────────┐
-│  TOP BAR (56px) — Logo, Search, Quick Actions, User  │
+│  TOP BAR (56px) — Logo, ── Search (centered) ──, User│
 ├──────────────┬───────────────────────────────────────┤
 │  SIDEBAR     │  MAIN CONTENT AREA                    │
 │  (260px)     │                                       │
 │              │  Page Header + Actions                │
-│  Workspace   │  Quick Stats Row                      │
-│  Switcher    │  Filters Bar                          │
+│  Pinned      │  Quick Stats Row                      │
+│  Flows       │  Filters Bar                          │
 │              │  Content Sections                     │
-│  Navigation  │  (trees/flows list, sessions, etc.)   │
+│  Navigation  │  (flow list, sessions, etc.)          │
+│  + sub-items │                                       │
 │              │                                       │
 │  Categories  │                                       │
 │  Tags        │                                       │
@@ -57,7 +96,7 @@ ResolutionFlow transitions from a top-nav + full-width content layout to a **per
 ### CSS Grid Implementation
 
 ```tsx
-// AppLayout.tsx - new shell structure
+// AppLayout.tsx
 <div className="app-shell">
   <header className="topbar">...</header>
   <nav className="sidebar">...</nav>
@@ -97,8 +136,6 @@ ResolutionFlow transitions from a top-nav + full-width content layout to a **per
 }
 ```
 
-This variable should be used consistently for sidebar width, logo area width calculations, and responsive breakpoints.
-
 ---
 
 ## 2. Design Tokens
@@ -134,29 +171,23 @@ These are already implemented and MUST be used. Do NOT introduce new color value
 
 #### shadcn/ui CSS Variables (from index.css)
 
-All shadcn component tokens are defined via HSL CSS variables (`--background`, `--foreground`, `--card`, `--primary`, etc.) with both light and dark mode values. Continue using these for shadcn components.
+All shadcn component tokens are defined via HSL CSS variables (`--background`, `--foreground`, `--card`, `--primary`, etc.) in `:root`. The app is dark-only — all tokens live in `:root`, not `.dark`.
 
-### NEW Design Tokens for App Shell
-
-These are already added to `index.css` within the `:root` block (the app is dark-only, all tokens live in `:root`):
+### App Shell Tokens (in index.css `:root`)
 
 ```css
 :root {
-  /* Existing tokens... */
-
   /* App Shell tokens */
-  --sidebar-bg: 240 10% 4.5%;          /* #0c0c0f - slightly lighter than app bg */
-  --sidebar-hover: 240 6% 12%;          /* #1e1e23 */
-  --sidebar-active: 243 75% 59% / 0.08; /* brand purple at 8% opacity */
-  --border-subtle: 240 6% 12%;          /* #1f1f23 - lighter border for sections */
-  --text-dimmed: 240 4% 24%;            /* #3f3f46 - very dim text for timestamps */
+  --sidebar-bg: 240 10% 4.5%;
+  --sidebar-hover: 240 6% 12%;
+  --sidebar-active: 243 75% 59% / 0.08;
+  --border-subtle: 240 6% 12%;
+  --text-dimmed: 240 4% 24%;
 }
 ```
 
 ### Semantic Status Colors
 
-These map to session/tree status indicators and MUST be used consistently:
-
 | Status | Color | Tailwind Class | Usage |
 |--------|-------|---------------|-------|
 | Success / Resolved | `#22c55e` | `text-green-500` / `bg-green-500` | Completed sessions, resolved |
@@ -166,8 +197,6 @@ These map to session/tree status indicators and MUST be used consistently:
 
 ### Category Colors
 
-Categories use a fixed palette of distinguishable colors for their dot indicators:
-
 ```typescript
 // constants/categoryColors.ts
 export const CATEGORY_COLORS = [
@@ -184,84 +213,72 @@ export const CATEGORY_COLORS = [
 ] as const;
 ```
 
-Categories are assigned colors based on their creation order (index % length). Colors are stored on the category model in the database.
-
-> **Migration needed:** The `tree_categories` table already has `display_order` and `is_active` columns. Add a `color` column:
+> **Migration needed:** Add `color` column to `tree_categories`:
 > ```sql
 > ALTER TABLE tree_categories ADD COLUMN color VARCHAR(7) DEFAULT '#3b82f6';
 > ```
-> Backfill existing categories with colors from the palette based on their `display_order`.
 
 ---
 
-## 3. Workspace System
+## 3. Naming & Terminology
 
-### Concept
+### User-Facing Labels
 
-Workspaces are the top-level organizational context. They sit **above** the existing folder system — a workspace scopes which trees/flows are visible, while user folders remain available within each workspace for personal organization. When a user switches workspace, the sidebar categories, tags, stats, filters, and main content all adapt.
+| Internal / Database | User-Facing Label | Context |
+|--------------------|--------------------|---------|
+| `tree` | **Flow** | Universal term for all flow types |
+| `tree_type = 'troubleshooting'` | **Troubleshooting** | Branching decision-tree flows |
+| `tree_type = 'procedural'` | **Project** | Linear step-by-step flows (onboarding, migrations, etc.) |
+| `tree_structure` | Flow structure | Internal — never shown to users |
+| `tree_editor` | **Flow Editor** | The editor page |
+| `session` | **Session** (troubleshooting) / **Run** (projects) | Active use of a flow |
 
-> **Important:** Workspaces do NOT replace the existing `UserFolder` system. Folders are per-user personal organization that continue to work within the active workspace context. The folder sidebar, drag-and-drop, and folder-tree junction table are preserved. Workspaces filter what content is available; folders organize it.
+### Label Constants
 
-The layout, navigation structure, and component patterns stay identical — only the DATA changes.
+Replace `workspaceLabels.ts` with a simpler type-based label system:
 
-### Workspace Types (Initial Set)
+```typescript
+// constants/flowLabels.ts
+export interface FlowTypeLabels {
+  navLabel: string;
+  newButton: string;
+  editorLabel: string;
+  searchPlaceholder: string;
+}
 
-| Workspace | Description | Icon | Accent Color |
-|-----------|-------------|------|-------------|
-| Troubleshooting | Break/fix decision trees | 🔧 | `#ef4444` (red) |
-| Procedures | Step-by-step operational flows | 📋 | `#3b82f6` (blue) |
-| Policies | Compliance & policy builders | 📜 | `#8b5cf6` (violet) |
-| Finance | Billing & procurement flows | 💰 | `#22c55e` (green) |
+export const FLOW_TYPE_LABELS: Record<string, FlowTypeLabels> = {
+  all: {
+    navLabel: 'All Flows',
+    newButton: '+ Create Flow',
+    editorLabel: 'Flow Editor',
+    searchPlaceholder: 'Search flows, sessions, tags…',
+  },
+  troubleshooting: {
+    navLabel: 'Troubleshooting',
+    newButton: '+ New Troubleshooting Flow',
+    editorLabel: 'Flow Editor',
+    searchPlaceholder: 'Search troubleshooting flows…',
+  },
+  procedural: {
+    navLabel: 'Projects',
+    newButton: '+ New Project',
+    editorLabel: 'Flow Editor',
+    searchPlaceholder: 'Search projects, runbooks…',
+  },
+};
 
-**Users and admins can create custom workspaces.** The four above are defaults.
-
-### Workspace Switcher Component
-
-Located at the top of the sidebar, below the nav section label. It's a dropdown that shows:
-
-1. **Current workspace** — icon, name, description, chevron
-2. **Dropdown options** — all available workspaces with flow counts
-3. **"Add workspace…"** — link at bottom to create new
-
-```
-┌─────────────────────────────┐
-│ 🔧  Troubleshooting         │
-│     Break/fix decision trees │
-│                           ▼  │
-├─────────────────────────────┤
-│ 🔧 Troubleshooting    42   │ ← active (highlighted)
-│ 📋 Procedures          18   │
-│ 📜 Policies             7   │
-│ 💰 Finance              4   │
-│─────────────────────────────│
-│ + Add workspace…            │
-└─────────────────────────────┘
+export function getFlowLabels(typeFilter: string): FlowTypeLabels {
+  return FLOW_TYPE_LABELS[typeFilter] || FLOW_TYPE_LABELS.all;
+}
 ```
 
-### Behavior on Workspace Switch
+### Where Labels Appear
 
-When the user selects a new workspace:
-
-1. Sidebar content fades out (200ms opacity transition)
-2. Data updates:
-   - Categories list → filtered to workspace
-   - Tags cloud → filtered to workspace
-   - Nav badge counts → reflect workspace totals
-   - "All Trees" label → changes (e.g., "All Procedures")
-   - "Tree Editor" label → changes (e.g., "Flow Editor")
-   - Search placeholder → adapts
-3. Main content fades out/in (200ms opacity transition)
-   - Page title changes
-   - Stats row updates
-   - Filter chips update
-   - Tree/flow list filters to workspace
-   - Sessions panel filters to workspace
-4. "New Tree" button label → adapts (e.g., "New Procedure")
-5. Toast notification confirms switch: "Switched to **Procedures**"
-
-### Data Model
-
-See [Section 10: Data Model Changes](#10-data-model-changes) for backend schema.
+- Sidebar nav: "All Flows" (parent), "Troubleshooting" (sub), "Projects" (sub)
+- Page title on flow library: "Flow Library" (always — does not change with filter)
+- "+ Create Flow" button in page header (adapts based on active type filter)
+- Search bar placeholder in top bar (adapts based on active type filter)
+- Flow Editor nav item: Always "Flow Editor"
 
 ---
 
@@ -270,15 +287,19 @@ See [Section 10: Data Model Changes](#10-data-model-changes) for backend schema.
 ### Structure (top to bottom)
 
 ```
-1. Workspace Switcher (dropdown)
+1. ─── PINNED FLOWS ─── (section, collapsible)
+   - Pinned flow items (star icon, click to start session)
+   - "Pin a flow…" hint if empty
 2. ─── divider ───
 3. Primary Navigation
-   - Dashboard (grid icon)
-   - All Trees/Flows (cube icon) [badge: count]
-   - Tree/Flow Editor (pencil icon)
-   - Sessions (clock icon) [badge: active count]
-   - Exports (file icon)
-   - Step Library (bookmark icon) [dot: new items]
+   - Dashboard (LayoutGrid icon)
+   - All Flows (Box icon) [badge: total count]
+     ├─ Troubleshooting (sub-item, indented)
+     └─ Projects (sub-item, indented)
+   - Flow Editor (PenLine icon)
+   - Sessions (Clock icon) [badge: active count]
+   - Exports (FileText icon)
+   - Step Library (Bookmark icon) [dot: new items]
 4. ─── divider ───
 5. Categories Section
    - Section label: "CATEGORIES"
@@ -289,10 +310,45 @@ See [Section 10: Data Model Changes](#10-data-model-changes) for backend schema.
    - Tag chips in a flex-wrap cloud
 8. ─── spacer (flex-grow) ───
 9. Footer (pinned to bottom)
-   - Team (users icon)
-   - Settings (gear icon)
+   - Team (Users icon)
+   - Settings (Settings icon)
 ```
 
+### Pinned Flows Section
+
+```tsx
+interface PinnedFlow {
+  id: string;
+  name: string;
+  treeType: 'troubleshooting' | 'procedural';
+  categoryEmoji?: string;
+}
+
+interface PinnedFlowsSectionProps {
+  pinnedFlows: PinnedFlow[];
+  onFlowClick: (id: string) => void;
+  onUnpin: (id: string) => void;
+}
+```
+
+**Visual design:**
+- Section label: `PINNED` in `font-label text-[0.6875rem] uppercase tracking-wide text-muted-foreground`
+- Each pinned flow: single line with emoji/icon + flow name (truncated) + quick-start button on hover
+- Max 10 pinned flows visible; if more, show "View all pinned" link
+- Empty state: subtle hint text "Star a flow to pin it here" with `text-muted-foreground text-xs`
+- Collapsible via section header chevron
+
+**Data model:**
+- New junction table: `user_pinned_trees` (user_id UUID, tree_id UUID, pinned_at TIMESTAMPTZ, display_order INTEGER)
+- API: `POST /api/v1/trees/{id}/pin`, `DELETE /api/v1/trees/{id}/pin`, `GET /api/v1/trees/pinned`
+- Store: add `pinnedFlows` array to existing auth or a new lightweight `pinnedStore`
+
+**Pin/unpin interaction:**
+- Pin via: star icon on flow cards in library, three-dot menu → "Pin to sidebar", right-click context menu
+- Unpin via: right-click pinned item → "Unpin", or three-dot menu on flow card
+- Toast on pin: "📌 Pinned **Flow Name** to sidebar"
+- Toast on unpin: "Unpinned **Flow Name**"
+
 ### Nav Item Component
 
 ```tsx
@@ -302,13 +358,21 @@ interface NavItemProps {
   label: string;
   badge?: number | 'dot';
   isActive?: boolean;
+  children?: NavSubItem[];  // for expandable sub-items
+}
+
+interface NavSubItem {
+  href: string;
+  label: string;
+  count?: number;
+  isActive?: boolean;
 }
 ```
 
 **Active state styling:**
 - Background: `var(--sidebar-active)` (brand purple at 8% opacity)
 - Left border accent: 3px gradient bar (brand gradient, rounded right corners)
-- Text: `text-foreground` (white in dark mode)
+- Text: `text-foreground` (white)
 - Icon: full opacity
 
 **Inactive state styling:**
@@ -317,6 +381,37 @@ interface NavItemProps {
 - Icon: 70% opacity
 - Hover: `var(--sidebar-hover)` background
 
+### Nav Sub-Items (Flow Type Filter)
+
+Sub-items appear indented under "All Flows":
+
+```
+📦 All Flows           47
+   🔧 Troubleshooting  29
+   📋 Projects          18
+```
+
+**Sub-item styling:**
+- Indented: `pl-9` (aligns text with parent label, past the icon)
+- No icon of their own (the emoji/text suffices, or use a small dot)
+- Font: `text-[0.8125rem] text-muted-foreground`
+- Active: same purple highlight as parent but without the left accent bar
+- Count: right-aligned in `font-label text-xs text-muted-foreground`
+
+**Behavior:**
+- Clicking "All Flows" navigates to `/flows` (or `/trees` — use existing route) with no type filter
+- Clicking "Troubleshooting" navigates to `/flows?type=troubleshooting`
+- Clicking "Projects" navigates to `/flows?type=procedural`
+- The active state highlights whichever is currently selected
+- When a sub-item is active, the parent "All Flows" stays visually highlighted (dimmer) to show context
+- Sub-items are always visible (not collapsible) — there are only 2
+
+**Flow library page behavior:**
+- Reads `type` from URL search params (already implemented in `TreeLibraryPage.tsx`)
+- Filters the flow list accordingly
+- Updates the page subtitle and "Create" button label via `getFlowLabels(typeFilter)`
+- Categories, tags, stats, and sessions in the sidebar do NOT change — they show data across all types
+
 ### Category Item Component
 
 ```tsx
@@ -332,7 +427,7 @@ Renders as: `[●] Category Name .............. 12`
 
 - 8px color dot (rounded full)
 - Name in `text-sm text-muted-foreground`
-- Count right-aligned in `font-label text-xs` (Outfit font)
+- Count right-aligned in `font-label text-xs`
 - Hover: `var(--sidebar-hover)` background, text brightens
 
 ### Tag Cloud Component
@@ -345,9 +440,7 @@ interface TagCloudProps {
 }
 ```
 
-Renders as flex-wrap container of small chip elements:
-- Background: `bg-card`
-- Border: `border-border`
+- Background: `bg-card`, Border: `border-border`
 - Text: `font-label text-xs` (Outfit)
 - Active: purple-tinted background and border
 - Gap: 4px
@@ -359,22 +452,28 @@ Renders as flex-wrap container of small chip elements:
 ### Structure (left to right)
 
 ```
-[Logo + Wordmark] | [Search Input (⌘K)] | ──flex grow── | [Quick Launch] [Notifications] [Avatar]
+[Logo + Wordmark] | ──flex grow── | [Search Input (Ctrl+K / ⌘K)] | ──flex grow── | [Quick Launch] [Notifications] [Avatar]
 ```
 
+The search bar is **centered** between the logo and action buttons using flex spacers on both sides.
+
 ### Logo Area
 
-- Width: `calc(var(--sidebar-w) - 40px)` — aligns with sidebar content
+- Width: fits content (not fixed to sidebar width)
 - Contains: ResolutionFlow logo SVG (32x32) + branded wordmark
 - Wordmark: "Resolution" in white + "Flow" in gradient text
 
 ### Search Bar
 
-- Flex: 1, max-width 480px
-- Placeholder adapts to workspace context (e.g., "Search trees, sessions, tags…")
+- Width: 100%, max-width 480px
+- **Centered** in the top bar via `flex-1` spacers on both sides
+- Placeholder: "Search flows, sessions, tags…" (static — does NOT change with type filter)
 - Left icon: magnifying glass (Lucide `Search`)
-- Right badge: keyboard shortcut hint `⌘K` (styled as small pill)
-- Border: `border-border`, focus: `border-brand-gradient-from`
+- Right badge: platform-aware keyboard shortcut hint
+  ```tsx
+  {navigator.platform?.toLowerCase().includes('mac') ? '⌘K' : 'Ctrl+K'}
+  ```
+- Border: `border-border`, focus: `border-primary/30`
 
 ### Action Buttons
 
@@ -392,16 +491,14 @@ Avatar: 32px circle with brand gradient background, white initials in `font-head
 
 ### Page Structure
 
-Every page in the main content follows this vertical flow:
-
 ```
 1. Page Header (title + action buttons)
 2. Quick Stats Row (4 cards)
 3. Filters Bar (chips)
-4. Content Sections (grouped lists, panels)
+4. Content Sections (flow list, sessions panel)
 ```
 
-Not every page needs all sections. The Dashboard uses all four. The Tree Editor page would only use the page header and then the editor workspace.
+Not every page uses all sections. Dashboard/Flow Library uses all four. Flow Editor uses only the header.
 
 ### Quick Stats Row
 
@@ -410,41 +507,32 @@ Not every page needs all sections. The Dashboard uses all four. The Tree Editor
 Each card:
 - Background: `bg-card`
 - Border: `border` (subtle, brightens on hover)
-- Border radius: `rounded-xl` (10px)
+- Border radius: `rounded-xl`
 - Padding: 16px 18px
 - Label: `font-label text-[0.6875rem] uppercase tracking-wide text-muted-foreground`
 - Value: `font-heading text-2xl font-bold`
 - Meta: `text-[0.6875rem] text-[var(--text-dimmed)]`
 
-Special value styles:
-- `.gradient` → `text-gradient-brand`
-- Colored → direct color style (e.g., amber for warnings)
+Stat cards for the Flow Library page:
+
+| Stat | Label | Value Source |
+|------|-------|-------------|
+| 1 | Active Flows | Total published flows (use `text-gradient-brand`) |
+| 2 | Sessions Today | Sessions started today (number) |
+| 3 | Open Sessions | In-progress sessions (use `text-amber-500` if > 0) |
+| 4 | Docs Generated | Export count this month |
 
 ### Filters Bar
 
-Horizontal row of filter chips with a divider before "More Filters":
-
 ```
-[All*] [Recently Used] [My Trees] [Team Trees] [Defaults] | [⊗ More Filters]
+[All] [Recently Used] [My Flows] [Team Flows] [Defaults] | [⊗ More Filters]
 ```
 
-Active chip: purple-tinted background/border (same as sidebar tag active state).
+Active chip: purple-tinted background/border.
 
-### Section Groups
+> **Note:** The "Troubleshooting" / "Projects" type filter is handled by the **sidebar sub-items**, NOT by filter chips in this bar. The filters bar is for orthogonal filters (ownership, recency, status).
 
-Collapsible sections with header:
-
-```
-[●] SECTION TITLE    5    [▼]
-─────────────────────────────
-```
-
-- Dot: 8px gradient circle
-- Title: `font-heading text-[0.8125rem] font-bold uppercase tracking-wide`
-- Count: pill with `bg-surface` background
-- Collapse: chevron button (toggles section visibility)
-
-### Tree/Flow List Items
+### Flow List Items
 
 Grid layout per item:
 
@@ -459,15 +547,15 @@ Each item:
 - Border radius: `rounded-lg`
 - Padding: 12px 16px
 
-**Icon box:** 36x36px rounded-lg with category-tinted background and emoji.
+**Pin star:** Show a subtle star icon (Lucide `Star`) on hover, filled if pinned. Click to toggle pin.
 
-**Info column:**
-- Name: `font-heading text-sm font-semibold`
-- Meta row: tags (small chips) + step/solution count
-
-**Category column:** color dot + name in `font-label text-xs`
-
-**Actions:** Three-dot menu, opacity 0 until row hover.
+**Actions three-dot menu includes:**
+- Start Session
+- Edit
+- Duplicate
+- Pin to Sidebar / Unpin from Sidebar
+- Share
+- Delete
 
 ### Sessions Panel
 
@@ -481,12 +569,6 @@ Contained card with header and rows:
 └──────────────────────────────────────┘
 ```
 
-Session row grid:
-```
-grid-template-columns: 8px 1fr 140px 80px 100px
-                       dot  name progress ticket time
-```
-
 Status dot colors: `bg-amber-500` (in-progress), `bg-green-500` (completed).
 
 ---
@@ -507,17 +589,15 @@ Both: `rounded-lg px-4 py-2 text-sm font-semibold`, with icon support (16px Luci
 - **Count badge:** `bg-card border border-border rounded-full px-2 text-[0.6875rem] font-label`
 - **Active count badge:** purple-tinted background/border
 - **Dot badge:** 6px circle, `bg-brand-gradient-from`
-- **Notification badge:** 8px red circle with sidebar-bg border (creates "cut out" effect)
+- **Notification badge:** 8px red circle with sidebar-bg border
 
 ### Toast Notifications
 
-Fixed-position toast notification (current app uses top-right via Sonner — keep this position for consistency):
+Fixed-position, **top-right** (current Sonner config — keep as-is):
 - Background: `bg-card`
 - Border: brand gradient border
 - Border radius: `rounded-xl`
-- Shadow: `shadow-xl` with heavy dark shadow
-- Content: emoji icon + message text (supports `<strong>` for emphasis)
-- Auto-dismiss: 2000ms with fade out
+- Auto-dismiss: 2000ms
 
 ---
 
@@ -525,23 +605,21 @@ Fixed-position toast notification (current app uses top-right via Sonner — kee
 
 ### Primary Source: Lucide React
 
-All icons use [Lucide React](https://lucide.dev) at consistent sizes:
-
-| Context | Size | Lucide Prop |
-|---------|------|-------------|
-| Nav items | 18px | `size={18}` |
-| Buttons | 16px | `size={16}` |
-| Top bar actions | 18px | `size={18}` |
-| Section headers | 14px | `size={14}` |
-| Filter chips | 14px | `size={14}` |
+| Context | Size |
+|---------|------|
+| Nav items | 18px |
+| Buttons | 16px |
+| Top bar actions | 18px |
+| Section headers | 14px |
+| Filter chips | 14px |
 
 ### Navigation Icon Mapping
 
 | Nav Item | Lucide Icon |
 |----------|-------------|
 | Dashboard | `LayoutGrid` |
-| All Trees/Flows | `Box` |
-| Tree/Flow Editor | `PenLine` |
+| All Flows | `Box` |
+| Flow Editor | `PenLine` |
 | Sessions | `Clock` |
 | Exports | `FileText` |
 | Step Library | `Bookmark` |
@@ -550,27 +628,15 @@ All icons use [Lucide React](https://lucide.dev) at consistent sizes:
 | Search | `Search` |
 | Quick Launch | `Zap` |
 | Notifications | `Bell` |
-| New Tree | `Plus` |
-| Import | `Upload` |
-| Filter | `Filter` |
-| Collapse | `ChevronDown` |
+| Create Flow | `Plus` |
+| Pin/Favorite | `Star` |
 | More Actions | `MoreHorizontal` |
 
 ### Category Emoji Icons
 
-Categories in the tree list use emoji as visual anchors inside tinted icon boxes. These are set per-tree or per-category and stored as a string field.
-
 Default emoji per common categories:
-- Networking: 🌐
-- Active Directory: 🔒
-- Email/Exchange: 📧
-- Server Issues: 🖥️
-- VPN/Remote: 🔌
-- Citrix/RDS: 🖥️
-- Printers: 🖨️
-- Backup/DR: 🔄
-- Onboarding: 👤
-- Security: 🔐
+- Networking: 🌐, Active Directory: 🔒, Email/Exchange: 📧, Server Issues: 🖥️
+- VPN/Remote: 🔌, Printers: 🖨️, Backup/DR: 🔄, Onboarding: 👤, Security: 🔐
 
 ---
 
@@ -578,253 +644,148 @@ Default emoji per common categories:
 
 ### Page/Section Load
 
-Staggered fade-in using CSS animation:
-
-```css
-.fade-in {
-  animation: fadeIn 0.3s ease forwards;
-}
-
-@keyframes fadeIn {
-  from { opacity: 0; transform: translateY(6px); }
-  to { opacity: 1; transform: translateY(0); }
-}
-```
-
-Apply with incrementing `animation-delay` on child sections:
+Staggered fade-in with incrementing `animation-delay`:
 - Stats row: 50ms
 - Filters: 100ms
 - Section 1: 150ms
 - Section 2: 200ms
 
-### Workspace Switch
-
-Coordinated fade transition:
-1. Sidebar content: `opacity → 0` (200ms)
-2. Main content: `opacity → 0` (200ms)
-3. Data swap (instant)
-4. Both: `opacity → 1` (200ms)
-
 ### Interactive Elements
 
 | Element | Property | Duration | Easing |
 |---------|----------|----------|--------|
 | Nav item hover | background-color | 120ms | ease |
 | Button hover | transform, box-shadow | 150ms | ease |
-| Tree item hover | background, border-color | 120ms | ease |
+| Flow item hover | background, border-color | 120ms | ease |
 | Dropdown open | opacity, transform | 150ms | ease |
 | Action buttons (three-dot) | opacity | 120ms | ease |
 | Toast appear/disappear | opacity, transform | 300ms | ease |
-
-### Workspace Dropdown
-
-```css
-@keyframes dropIn {
-  from { opacity: 0; transform: translateY(-4px); }
-  to { opacity: 1; transform: translateY(0); }
-}
-```
+| Pin star toggle | scale + color | 200ms | ease |
 
 ---
 
-## 10. Data Model Changes
+## 10. Migration Strategy
 
-### New: `workspaces` Table
+### What to Remove
 
-```sql
-CREATE TABLE workspaces (
-    id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
-    name VARCHAR(100) NOT NULL,
-    slug VARCHAR(100) NOT NULL UNIQUE,
-    description TEXT,
-    icon VARCHAR(10),           -- emoji character
-    accent_color VARCHAR(7),    -- hex color (e.g., '#ef4444')
-    account_id UUID REFERENCES accounts(id) ON DELETE CASCADE,
-    is_default BOOLEAN DEFAULT FALSE,
-    sort_order INTEGER DEFAULT 0,
-    created_at TIMESTAMPTZ DEFAULT NOW(),
-    updated_at TIMESTAMPTZ DEFAULT NOW()
-);
-```
+1. **WorkspaceSwitcher component** and all workspace UI
+2. **workspaceStore.ts** — replace with `flowFilterStore.ts` (or just use URL params, which `TreeLibraryPage.tsx` already does)
+3. **workspaceLabels.ts** — replace with `flowLabels.ts`
+4. **Workspace API** (`backend/app/api/endpoints/workspaces.py`) and model
+5. **Folder sidebar panel** from `TreeLibraryPage` — remove `FolderSidebar` import and the column it occupies. The `UserFolder` model, API, and database table remain untouched for future use.
+6. All `workspace_id` references in queries
 
-**Default workspaces (seeded):**
+### What to Add
 
-| name | slug | icon | accent_color | is_default |
-|------|------|------|-------------|------------|
-| Troubleshooting | troubleshooting | 🔧 | #ef4444 | true |
-| Procedures | procedures | 📋 | #3b82f6 | false |
-| Policies | policies | 📜 | #8b5cf6 | false |
-| Finance | finance | 💰 | #22c55e | false |
+1. **Pinned flows** — `user_pinned_trees` table, API endpoints, sidebar section
+2. **Nav sub-items** — update `Sidebar.tsx` to render "Troubleshooting" and "Projects" as indented children of "All Flows"
+3. **flowLabels.ts** — simple type-based label lookup
+4. **Pin star** on flow cards in the library grid/list views
 
-### Modified: `trees` Table
+### What to Keep (Already Built)
 
-Add column:
+1. **AppLayout.tsx** CSS Grid shell — keep as-is
+2. **TopBar.tsx** — keep, but verify search is centered and keyboard shortcut is platform-aware (already fixed)
+3. **Sidebar.tsx** — keep structure, remove workspace switcher, add pinned flows section and nav sub-items
+4. **NavItem.tsx** — keep, extend to support `children` sub-items
+5. **CategoryList, TagCloud** — keep as-is
+6. **All existing pages** — keep rendering inside the shell
 
-```sql
-ALTER TABLE trees ADD COLUMN workspace_id UUID REFERENCES workspaces(id);
-```
+### Label Replacements (Global Find & Replace)
 
-All existing trees get assigned to the "troubleshooting" workspace via data migration.
+In all frontend files:
 
-> **Note:** The `trees` table already has a `tree_type` column with values `'troubleshooting'` and `'procedural'`. The workspace system is a superset of this — `tree_type` controls tree behavior (branching vs linear), while `workspace_id` controls organizational context. Both fields coexist. The data migration should map existing `tree_type='troubleshooting'` trees to the Troubleshooting workspace and `tree_type='procedural'` trees to the Procedures workspace.
+| Find | Replace With |
+|------|-------------|
+| `All Trees` | `All Flows` |
+| `Tree Editor` | `Flow Editor` |
+| `New Tree` | `Create Flow` |
+| `All Procedures` | `Projects` |
+| `New Procedure` | `New Project` |
+| `Flow Library` (page title) | `Flow Library` (keep) |
 
-### Modified: `tree_categories` Table
-
-Add column:
-
-```sql
-ALTER TABLE tree_categories ADD COLUMN workspace_id UUID REFERENCES workspaces(id);
-```
-
-Categories become workspace-scoped. A category belongs to one workspace. The existing `account_id` column remains for tenancy — `workspace_id` is an additional organizational dimension within an account.
-
-### Modified: `tree_tags` Table
-
-Tags remain global (cross-workspace) but the popular tags query filters by workspace context. The existing `account_id` scoping on tags is preserved.
-
-### API Changes
-
-**New endpoints:**
-
-```
-GET    /api/v1/workspaces              -- list all workspaces for user's account
-POST   /api/v1/workspaces              -- create workspace (admin)
-PATCH  /api/v1/workspaces/{id}         -- update workspace
-DELETE /api/v1/workspaces/{id}         -- soft delete workspace
-```
-
-**Modified endpoints:**
-
-```
-GET /api/v1/trees?workspace_id={uuid}       -- add workspace filter
-GET /api/v1/categories?workspace_id={uuid}   -- categories are a separate router (categories.py)
-GET /api/v1/sessions?workspace_id={uuid}
-```
-
-> **Note:** Categories have their own dedicated router at `/api/v1/categories` (not nested under `/trees/categories`). Tags are at `/api/v1/tags`. Folders are at `/api/v1/folders`. See `backend/app/api/router.py` for the full route registry.
-
-### Frontend State
-
-```typescript
-// store/workspaceStore.ts
-interface WorkspaceState {
-  workspaces: Workspace[];
-  activeWorkspaceId: string | null;
-  setActiveWorkspace: (id: string) => void;
-  // Persisted in localStorage as 'active-workspace-id'
-}
-```
-
-All tree/session/category queries include the active workspace ID as a filter parameter.
+In `Sidebar.tsx` nav items:
+- Remove workspace switcher
+- Add pinned flows section at top
+- "All Flows" with sub-items "Troubleshooting" and "Projects"
 
 ---
 
-## 11. Migration Strategy
+## 11. Implementation Phases
 
-### From Current Layout to App Shell
+### Phase A: Cleanup & Labels
 
-The current `AppLayout.tsx` uses a top-nav bar with horizontal nav links and an `<Outlet>` for full-width page content. The migration:
+1. Remove workspace-related files (see list above)
+2. Create down-migration to drop workspace tables/columns
+3. Remove workspace router from `backend/app/api/router.py`
+4. Create `constants/flowLabels.ts`
+5. Update all UI labels: Trees → Flows, Procedures → Projects
+6. Remove `FolderSidebar` from `TreeLibraryPage` (keep folder model/API)
+7. Verify search bar is centered and shortcut is platform-aware in `TopBar.tsx`
 
-1. **AppLayout.tsx** → Complete rewrite to CSS Grid shell (topbar + sidebar + main)
-2. **BrandLogo + BrandWordmark** → Move into topbar logo area
-3. **Nav links** → Move into sidebar as vertical nav items with icons
-4. **ThemeToggle** → Move into sidebar footer or top bar
-5. **User menu** → Avatar in top bar with dropdown
-6. **Outlet** → Renders inside `<main>` grid cell
+### Phase B: Nav Sub-Items
 
-### Page-by-Page Adaptation
+1. Extend `NavItem` component to support `children` sub-items
+2. Update `Sidebar.tsx` to render "All Flows" with "Troubleshooting" and "Projects" children
+3. Sub-items link to `/trees?type=troubleshooting` and `/trees?type=procedural`
+4. Verify `TreeLibraryPage.tsx` correctly reads `type` from URL params (already does)
+5. Add flow counts to sub-item badges
 
-| Page | Changes Needed |
-|------|---------------|
-| TreeLibraryPage | Becomes the "Dashboard" or "All Trees" view in main content area. Add stats row, filters, and grouped list layout |
-| TreeNavigationPage | Renders in main content. Scratchpad overlay unchanged (fixed position) |
-| TreeEditorPage | Renders in main content. Full-width editor workspace |
-| SessionHistoryPage | Renders in main content. Add filters and session list |
-| SessionDetailPage | Renders in main content. Minimal changes |
-| SettingsPage | Renders in main content. Minimal changes |
-| LoginPage / RegisterPage | **No change** — these render outside the app shell (no sidebar) |
+### Phase C: Pinned Flows
 
----
+1. Create `user_pinned_trees` table and Alembic migration
+2. Create pin/unpin API endpoints (`POST /api/v1/trees/{id}/pin`, `DELETE /api/v1/trees/{id}/pin`, `GET /api/v1/trees/pinned`)
+3. Create Pydantic schemas for pinned flows
+4. Build `PinnedFlowsSection` sidebar component
+5. Add pin star to flow cards in library (visible on hover, filled if pinned)
+6. Add "Pin to Sidebar" / "Unpin" to flow card three-dot menu
+7. Toast notifications for pin/unpin actions
 
-## 12. Implementation Phases
+### Phase D: Polish
 
-### Phase A: Foundation (Backend + Shell)
-
-1. Create `workspace` table, model, schemas, migration
-2. Add `workspace_id` to `tree` and `tree_category` tables
-3. Seed default workspaces
-4. Data migration: assign all existing trees to "troubleshooting" workspace
-5. Create workspace API endpoints
-6. Create `workspaceStore` (Zustand + localStorage)
-7. **Rewrite `AppLayout.tsx`** to CSS Grid shell with topbar + sidebar + main
-8. Move existing nav items into sidebar
-9. Add workspace switcher component (static, no data yet)
-
-### Phase B: Sidebar Components
-
-1. Build `NavItem` component with active state + badge
-2. Build `CategoryList` component with color dots
-3. Build `TagCloud` component
-4. Build `WorkspaceSwitcher` dropdown with animations
-5. Wire workspace switcher to `workspaceStore`
-6. Update tree/session queries to include workspace filter
-
-### Phase C: Main Content Redesign
-
-1. Build `QuickStats` row component
-2. Build `FiltersBar` component
-3. Build `SectionGroup` collapsible component
-4. Build `TreeListItem` component (grid layout)
-5. Build `SessionsPanel` component
-6. Redesign `TreeLibraryPage` as Dashboard using new components
-7. Add search bar with ⌘K shortcut
-
-### Phase D: Polish & Integration
-
-1. Add workspace switch animations (fade transitions)
-2. Add toast notifications for workspace switch
+1. Add category color column migration + backfill
+2. Verify all animations and transitions
 3. Responsive breakpoints (collapse sidebar on mobile)
-4. Update all page components to work within new shell
-5. E2E testing of workspace switching flow
-6. Performance testing (workspace switch should be <200ms)
+4. E2E testing of navigation flow
+5. Performance testing
 
 ---
 
-## Appendix A: File Structure for New Components
+## Appendix A: File Structure for New/Modified Components
 
 ```
 frontend/src/
 ├── components/
 │   ├── layout/
-│   │   ├── AppLayout.tsx          ← REWRITE (CSS Grid shell)
-│   │   ├── TopBar.tsx             ← NEW
-│   │   ├── Sidebar.tsx            ← NEW
-│   │   ├── NavItem.tsx            ← NEW
-│   │   └── ProtectedRoute.tsx     (unchanged)
-│   ├── workspace/
-│   │   ├── WorkspaceSwitcher.tsx   ← NEW
-│   │   ├── CategoryList.tsx        ← NEW
-│   │   └── TagCloud.tsx            ← NEW
+│   │   ├── AppLayout.tsx          (keep — CSS Grid shell)
+│   │   ├── TopBar.tsx             (keep — search centered, shortcut fixed)
+│   │   ├── Sidebar.tsx            (MODIFY — remove workspace switcher, add pinned + sub-items)
+│   │   ├── NavItem.tsx            (MODIFY — add children sub-item support)
+│   │   └── ProtectedRoute.tsx     (keep)
+│   ├── sidebar/
+│   │   ├── PinnedFlowsSection.tsx ← NEW
+│   │   ├── CategoryList.tsx       (keep or move from workspace/)
+│   │   └── TagCloud.tsx           (keep or move from workspace/)
+│   ├── workspace/                 ← DELETE entire directory
 │   ├── dashboard/
-│   │   ├── QuickStats.tsx          ← NEW
-│   │   ├── FiltersBar.tsx          ← NEW
-│   │   ├── SectionGroup.tsx        ← NEW
-│   │   ├── TreeListItem.tsx        ← NEW
-│   │   └── SessionsPanel.tsx       ← NEW
+│   │   ├── QuickStats.tsx         (keep)
+│   │   ├── FiltersBar.tsx         (keep)
+│   │   └── ...
 │   └── common/
-│       ├── Toast.tsx               ← NEW
-│       └── ... (existing)
+│       └── ...
 ├── store/
-│   ├── workspaceStore.ts           ← NEW
-│   └── ... (existing)
+│   ├── workspaceStore.ts          ← DELETE
+│   └── ...
 ├── api/
-│   ├── workspaces.ts               ← NEW
-│   └── ... (existing)
-├── types/
-│   ├── workspace.ts                ← NEW
-│   └── ... (existing)
-└── constants/
-    └── categoryColors.ts           ← NEW
+│   ├── workspaces.ts              ← DELETE
+│   ├── pinnedFlows.ts             ← NEW
+│   └── ...
+├── constants/
+│   ├── workspaceLabels.ts         ← DELETE
+│   ├── flowLabels.ts              ← NEW
+│   └── categoryColors.ts          (keep)
+└── types/
+    └── ...                        (remove Workspace type if exists)
 ```
 
 ## Appendix B: Typography Quick Reference
@@ -834,25 +795,12 @@ frontend/src/
 | Page titles | Plus Jakarta Sans (`font-heading`) | 700 | 1.375rem (22px) | -0.01em |
 | Section titles | Plus Jakarta Sans | 700 | 0.8125rem (13px) | 0.04em, uppercase |
 | Nav items | Inter (`font-sans`) | 500 | 0.8125rem (13px) | normal |
-| Tree names | Plus Jakarta Sans | 600 | 0.875rem (14px) | -0.005em |
+| Nav sub-items | Inter (`font-sans`) | 400 | 0.8125rem (13px) | normal |
+| Flow names | Plus Jakarta Sans | 600 | 0.875rem (14px) | -0.005em |
 | Stat values | Plus Jakarta Sans | 700 | 1.5rem (24px) | -0.02em |
 | Stat labels | Outfit (`font-label`) | 600 | 0.6875rem (11px) | 0.05em, uppercase |
 | Badges/counts | Outfit | 400 | 0.6875rem (11px) | normal |
 | Timestamps | Inter | 400 | 0.6875rem (11px) | normal |
 | Tags/chips | Outfit | 400 | 0.625rem (10px) | normal |
+| Pinned flow names | Inter | 500 | 0.8125rem (13px) | normal |
 | Search input | Inter | 400 | 0.8125rem (13px) | normal |
-
-## Appendix C: Workspace-Specific Adaptations
-
-When a workspace is active, these elements adapt:
-
-| Element | Troubleshooting | Procedures | Policies | Finance |
-|---------|----------------|------------|----------|---------|
-| "All ___" nav label | All Trees | All Procedures | All Policies | All Finance Flows |
-| Editor nav label | Tree Editor | Flow Editor | Policy Editor | Flow Editor |
-| New button label | New Tree | New Procedure | New Policy | New Flow |
-| Search placeholder | Search trees, sessions, tags… | Search procedures, runbooks… | Search policies, compliance… | Search billing, procurement… |
-| Stat 1 label | Active Trees | Active Procedures | Active Policies | Active Flows |
-| Stat 2 label | Sessions Today | Runs This Week | Pending Review | Runs This Month |
-| Stat 3 label | Open Sessions | In Progress | Compliance Score | Cost Saved |
-| Stat 4 label | Docs Generated | Avg Completion | Last Audit | Pending Approvals |
diff --git a/WORKSPACE-REMOVAL-PLAN.md b/WORKSPACE-REMOVAL-PLAN.md
new file mode 100644
index 00000000..572bd50e
--- /dev/null
+++ b/WORKSPACE-REMOVAL-PLAN.md
@@ -0,0 +1,608 @@
+# Workspace Removal & Navigation Refactor — Implementation Plan
+
+> **Purpose:** Combined implementation plan for removing the workspace system, renaming UI labels (Trees→Flows, Procedures→Projects), adding pinned flows, and restructuring sidebar navigation.
+> **Source of Truth:** [UI-DESIGN-SYSTEM.md](UI-DESIGN-SYSTEM.md) v2
+> **Date:** February 15, 2026
+> **Tailwind Version:** v3 only — do not use v4 syntax or patterns (see `package.json` line 56)
+
+---
+
+## Why This Change
+
+Workspaces added unnecessary cognitive overhead for the target MSP audience. UX research (Hick's Law, context-switching studies) shows that at the current product scale (10-15 beta testers, <50 flows per account), a workspace switcher creates friction without organizational benefit. The replacement is a flat navigation model with type sub-items and pinned favorites.
+
+---
+
+## Phase 1 — Backend: Add Pinned Flows (ship BEFORE removing workspaces)
+
+> **Important sequencing:** Add the pinned flows feature first and verify it works. Then remove workspaces in Phase 2. This ensures the replacement feature is stable before tearing out the old one. If both are done in the same session, at minimum run the pinned flows tests before starting workspace removal.
+
+### 1a. Add Pinned Flows Table
+
+```bash
+cd backend
+alembic revision --autogenerate -m "add_user_pinned_trees"
+```
+
+```sql
+CREATE TABLE user_pinned_trees (
+    id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
+    user_id UUID NOT NULL REFERENCES users(id) ON DELETE CASCADE,
+    tree_id UUID NOT NULL REFERENCES trees(id) ON DELETE CASCADE,
+    display_order INTEGER NOT NULL DEFAULT 0,
+    pinned_at TIMESTAMPTZ NOT NULL DEFAULT NOW(),
+    CONSTRAINT uq_user_pinned_tree UNIQUE (user_id, tree_id)
+);
+
+CREATE INDEX idx_user_pinned_trees_user ON user_pinned_trees(user_id);
+CREATE INDEX idx_user_pinned_trees_tree ON user_pinned_trees(tree_id);
+```
+
+### 1b. Pinned Flows API Contract
+
+**Endpoints:**
+
+| Method | Path | Description | Auth |
+|--------|------|-------------|------|
+| `GET` | `/api/v1/trees/pinned` | List user's pinned flows (ordered by display_order) | Required |
+| `POST` | `/api/v1/trees/{id}/pin` | Pin a flow to sidebar | Required |
+| `DELETE` | `/api/v1/trees/{id}/pin` | Unpin a flow from sidebar | Required |
+| `PATCH` | `/api/v1/trees/pinned/reorder` | Update display_order for all pinned flows | Required |
+
+**Constraints & Limits:**
+- Max 15 pinned flows per user (return 409 if exceeded)
+- `UNIQUE(user_id, tree_id)` — pinning an already-pinned flow returns 200 (idempotent), not an error
+- Unpinning an already-unpinned flow returns 200 (idempotent)
+- When a tree is deleted, cascade removes the pin automatically (FK ON DELETE CASCADE)
+- Pins are per-user, not per-account — each user has their own pinned set
+
+**Response Shapes:**
+
+```typescript
+// GET /api/v1/trees/pinned
+interface PinnedFlowsResponse {
+  items: PinnedFlow[];
+  count: number;
+}
+
+interface PinnedFlow {
+  id: string;           // pin record id
+  tree_id: string;
+  tree_name: string;
+  tree_type: 'troubleshooting' | 'procedural';
+  category_emoji?: string;
+  category_name?: string;
+  pinned_at: string;    // ISO datetime
+  display_order: number;
+}
+
+// POST /api/v1/trees/{id}/pin → returns PinnedFlow
+// DELETE /api/v1/trees/{id}/pin → returns { success: true }
+// PATCH /api/v1/trees/pinned/reorder
+//   body: { order: [{ tree_id: string, display_order: number }] }
+//   returns: PinnedFlowsResponse
+```
+
+**Error Codes:**
+- `404` — tree not found or user lacks access
+- `409` — max pins reached (15)
+- `200` — idempotent success (pin already exists / already unpinned)
+
+### 1c. Add Pinned Flows Backend Files
+
+```
+CREATE: backend/app/models/user_pinned_tree.py
+MODIFY: backend/app/models/__init__.py — add UserPinnedTree import
+MODIFY: backend/app/api/endpoints/trees.py — add pin/unpin/list-pinned/reorder endpoints
+MODIFY: backend/app/schemas/tree.py — add PinnedFlow schema, add is_pinned to TreeListItem
+MODIFY: backend/app/api/router.py — register pin routes (nested under trees router)
+```
+
+**Verify pinned flows work before proceeding:**
+
+```bash
+cd backend
+alembic upgrade head
+pytest tests/ -k "pin" -v   # Run pin-related tests
+# Manual: POST a pin, GET pinned list, verify response shapes
+```
+
+---
+
+## Phase 2 — Backend: Remove Workspace System
+
+### 2a. New Forward Migration (DO NOT use downgrade path)
+
+> **⚠️ Critical:** The existing `036_add_workspaces.py` downgrade function drops `tree_categories.color`, which we want to keep. Create a new forward migration instead.
+
+```bash
+cd backend
+alembic revision --autogenerate -m "remove_workspace_system"
+```
+
+The migration must:
+
+```python
+def upgrade():
+    # 1. Drop workspace_id FK from trees (if column exists)
+    op.drop_constraint('trees_workspace_id_fkey', 'trees', type_='foreignkey')
+    op.drop_column('trees', 'workspace_id')
+
+    # 2. Drop workspace_id FK from tree_categories (if column exists)
+    op.drop_constraint('tree_categories_workspace_id_fkey', 'tree_categories', type_='foreignkey')
+    op.drop_column('tree_categories', 'workspace_id')
+
+    # 3. Drop workspaces table
+    op.drop_table('workspaces')
+
+    # DO NOT drop tree_categories.color — we still use it
+
+def downgrade():
+    # Recreate workspaces table and FKs if needed (reverse of above)
+    pass
+```
+
+### 2b. Delete Workspace Backend Files
+
+```
+DELETE: backend/app/api/endpoints/workspaces.py
+DELETE: backend/app/models/workspace.py
+DELETE: backend/app/schemas/workspace.py (if exists)
+```
+
+### 2c. Clean Up Orphaned Workspace References
+
+> **⚠️ Important:** Workspace references exist beyond the obvious files. Scrub these:
+
+| File | What to Remove |
+|------|---------------|
+| `backend/app/api/router.py` | Remove workspace route registration |
+| `backend/app/models/__init__.py` (line 23, 55) | Remove `Workspace` import and `__all__` entry |
+| `backend/app/models/account.py` (line 18, 49) | Remove `workspaces` relationship on Account model |
+| `backend/app/models/category.py` (line 40) | Remove `workspace_id` column if present |
+| `backend/app/models/tree.py` | Remove `workspace_id` column and relationship if present |
+
+**Verification:**
+
+```bash
+cd backend
+grep -r "workspace" app/ --include="*.py" -l
+# Should only return this plan file and alembic migration history — no active code
+pytest --override-ini="addopts="
+# All tests must pass
+```
+
+**Migration smoke test (run against BOTH clean and existing DB):**
+
+```bash
+# Test on existing DB with workspace data:
+alembic upgrade head
+# Verify no errors, workspace tables gone, tree_categories.color still exists
+
+# Test on clean DB (full migration chain):
+dropdb patherly_test && createdb patherly_test
+DATABASE_URL=postgresql://...patherly_test alembic upgrade head
+# Verify clean run through all migrations
+```
+
+---
+
+## Phase 3 — Frontend: Remove Workspace System
+
+### 3a. Move sidebarCollapsed State First
+
+The `sidebarCollapsed` state currently lives in `workspaceStore.ts`. Move it before deleting:
+
+```typescript
+// frontend/src/store/userPreferencesStore.ts — ADD these:
+sidebarCollapsed: boolean;
+toggleSidebar: () => void;
+
+// Implementation:
+sidebarCollapsed: localStorage.getItem('sidebar-collapsed') === 'true',
+toggleSidebar: () => {
+  const next = !get().sidebarCollapsed;
+  localStorage.setItem('sidebar-collapsed', String(next));
+  set({ sidebarCollapsed: next });
+},
+```
+
+> Note: `userPreferencesStore` already uses Zustand persist — verify the localStorage key name doesn't conflict.
+
+### 3b. Delete Workspace Frontend Files
+
+```
+DELETE: frontend/src/store/workspaceStore.ts
+DELETE: frontend/src/components/workspace/WorkspaceSwitcher.tsx
+DELETE: frontend/src/components/workspace/WorkspaceCreateModal.tsx
+DELETE: frontend/src/constants/workspaceLabels.ts
+DELETE: frontend/src/types/workspace.ts (or remove Workspace type if shared file)
+DELETE: frontend/src/api/workspaces.ts
+DELETE: docs/mockups/resolutionflow-workspaces-mockup.html
+```
+
+**Before deleting `workspace/` directory**, move these components:
+
+```
+MOVE: frontend/src/components/workspace/CategoryList.tsx → frontend/src/components/sidebar/CategoryList.tsx
+MOVE: frontend/src/components/workspace/TagCloud.tsx → frontend/src/components/sidebar/TagCloud.tsx
+```
+
+### 3c. Update Shell Files That Import Workspace Store
+
+> **⚠️ Important:** These files are marked "keep" in the design system doc but they currently import workspace code. Each needs internal refactoring:
+
+| File | Lines to Change | Action |
+|------|----------------|--------|
+| `AppLayout.tsx` (line 6, 17) | `import { useWorkspaceStore }` | Replace with `import { useUserPreferencesStore }` — use `sidebarCollapsed` and `toggleSidebar` from there |
+| `TopBar.tsx` (line 6, 20) | `import { useWorkspaceStore }` | Replace with `useUserPreferencesStore` for `sidebarCollapsed`. Remove `getActiveWorkspace()` and `labels` — use static labels or `getFlowLabels()` |
+| `Sidebar.tsx` (line 4, 111+) | `WorkspaceSwitcher` import and render | Remove workspace switcher component. Add pinned flows section and nav sub-items (Phase 4) |
+
+### 3d. Clean Up Orphaned Frontend References
+
+> **⚠️ Important:** Additional workspace references exist beyond the obvious files:
+
+| File | What to Change |
+|------|---------------|
+| `frontend/src/types/index.ts` (line 11, 14) | Remove `Workspace` type export |
+| `frontend/src/components/layout/QuickLaunch.tsx` | Replace workspace-dependent labels with static "New Flow" / "New Project" |
+| `frontend/src/components/layout/CommandPalette.tsx` | Replace workspace-dependent search placeholder and result labels |
+
+**Verification:**
+
+```bash
+cd frontend
+grep -r "workspace" src/ --include="*.ts" --include="*.tsx" -l
+# Should return nothing except possibly test files or comments
+grep -r "workspaceStore\|WorkspaceSwitcher\|workspacesApi\|workspaceLabels" src/ -l
+# Must return nothing
+npm run build
+# Must compile clean with zero errors
+```
+
+---
+
+## Phase 4 — Label Renames (Repo-Wide Audit)
+
+### 4a. Create Flow Type Labels
+
+```typescript
+// frontend/src/constants/flowLabels.ts (NEW — replaces workspaceLabels.ts)
+
+export interface FlowTypeLabels {
+  navLabel: string;
+  singular: string;
+  plural: string;
+  newButton: string;
+  searchPlaceholder: string;
+  icon: string;
+}
+
+export const FLOW_TYPE_LABELS: Record<string, FlowTypeLabels> = {
+  all: {
+    navLabel: 'All Flows',
+    singular: 'Flow',
+    plural: 'Flows',
+    newButton: '+ Create Flow',
+    searchPlaceholder: 'Search flows, sessions, tags…',
+    icon: '📦',
+  },
+  troubleshooting: {
+    navLabel: 'Troubleshooting',
+    singular: 'Flow',
+    plural: 'Flows',
+    newButton: '+ New Troubleshooting Flow',
+    searchPlaceholder: 'Search troubleshooting flows…',
+    icon: '🔧',
+  },
+  procedural: {
+    navLabel: 'Projects',
+    singular: 'Project',
+    plural: 'Projects',
+    newButton: '+ New Project',
+    searchPlaceholder: 'Search projects, runbooks…',
+    icon: '📋',
+  },
+};
+
+export function getFlowLabels(typeFilter?: string): FlowTypeLabels {
+  if (typeFilter && typeFilter in FLOW_TYPE_LABELS) {
+    return FLOW_TYPE_LABELS[typeFilter];
+  }
+  return FLOW_TYPE_LABELS.all;
+}
+```
+
+### 4b. Label Audit — Files Requiring Changes
+
+Every instance of old terminology must be found and replaced. This is a **repo-wide pass**, not a targeted find-replace.
+
+**User-facing label changes:**
+
+| Old Label | New Label | Notes |
+|-----------|-----------|-------|
+| "All Trees" | "All Flows" | Sidebar nav, page titles |
+| "Tree Editor" | "Flow Editor" | Sidebar nav |
+| "New Tree" | "Create Flow" | Buttons, menus |
+| "All Procedures" | "Projects" | Sub-nav item |
+| "New Procedure" | "New Project" | Buttons, menus |
+| "Procedure" (singular) | "Project" | Throughout UI |
+
+**Known files with old labels (non-exhaustive):**
+
+| File | Old Text | New Text |
+|------|----------|----------|
+| `Sidebar.tsx` | "All Trees", "Tree Editor" | "All Flows", "Flow Editor" |
+| `TreeLibraryPage.tsx` (line 279, 298) | "All Trees", "Tree" references | "All Flows", "Flow" |
+| `QuickStartPage.tsx` (line 150) | Workspace/procedure labels | Flow/Project labels |
+| `QuickLaunch.tsx` | "New Tree", "New Procedure" | "Create Flow", "New Project" |
+| `CommandPalette.tsx` | Search labels | Flow-based labels |
+| `TopBar.tsx` | Search placeholder | Use `getFlowLabels()` or static "Search flows, sessions, tags…" |
+
+**Catch-all verification:**
+
+```bash
+cd frontend
+# Find any remaining user-facing "Tree" or "Procedure" labels (excluding variable names and imports)
+grep -rn '".*Tree.*"' src/ --include="*.tsx" --include="*.ts" | grep -v "import\|//\|interface\|type \|treesApi\|tree_type\|treeId\|TreeNav\|TreeGrid\|TreeList\|TreeTable"
+grep -rn '".*Procedure.*"' src/ --include="*.tsx" --include="*.ts" | grep -v "import\|//\|type "
+```
+
+> **Important:** Only rename **user-facing strings** (UI text, placeholder text, toast messages, page titles). Do NOT rename: variable names (`treesApi`, `TreeListItem`), route paths (`/trees`), database columns (`tree_type`), or API endpoints (`/api/v1/trees`). Internal code can say "tree" — users never see it.
+
+### 4c. Acceptance Criteria for Label Audit
+
+- [ ] No user-visible text says "Tree" (except proper nouns or technical docs)
+- [ ] No user-visible text says "Procedure" — all say "Project"
+- [ ] Search bar placeholder says "Search flows, sessions, tags…"
+- [ ] Page title on library page says "Flow Library"
+- [ ] "+ Create Flow" button on library page (or "+ New Project" when filtered to projects)
+- [ ] Sidebar nav says "All Flows", "Flow Editor"
+- [ ] Empty states use "flow" / "project" language
+- [ ] Toast messages use "flow" / "project" language
+
+---
+
+## Phase 5 — Sidebar: Nav Sub-Items & Pinned Flows UI
+
+### 5a. Extend NavItem for Children
+
+```tsx
+// frontend/src/components/layout/NavItem.tsx — extend props
+interface NavItemProps {
+  href: string;
+  icon: LucideIcon;
+  label: string;
+  badge?: number | 'dot';
+  isActive?: boolean;
+  children?: NavSubItem[];  // NEW
+}
+
+interface NavSubItem {
+  href: string;
+  label: string;
+  count?: number;
+  isActive?: boolean;
+}
+```
+
+**Sub-item rendering:**
+- Indented `pl-9` (past parent icon)
+- No icon, just text + optional count badge
+- Font: `text-[0.8125rem] text-muted-foreground`, active: `text-foreground`
+- Active: `bg-[var(--sidebar-active)]` but without the left gradient bar (only parent gets that)
+- Sub-items always visible (not collapsible) — there are only 2
+
+### 5b. Sidebar Structure
+
+```
+── PINNED ─────────────────── (collapsible section)
+   📧 Email Delivery Issues    (click → start session or go to flow)
+   🔒 AD Account Lockout
+   👤 New User Onboarding
+───────────────────────────────
+📊 Dashboard
+📦 All Flows              47
+   🔧 Troubleshooting     29
+   📋 Projects             18
+✏️ Flow Editor
+⏱️ Sessions               4
+📄 Exports
+📚 Step Library            •
+───────────────────────────────
+CATEGORIES
+   ● Networking            12
+   ● Active Directory       8
+   ● Email                 11
+───────────────────────────────
+POPULAR TAGS
+   [vpn] [dns] [exchange] [onboarding]
+═══════════════════════════════
+👥 Team
+⚙️ Settings
+```
+
+**Behavior:**
+- Clicking "All Flows" → `/trees` (no type filter)
+- Clicking "Troubleshooting" → `/trees?type=troubleshooting`
+- Clicking "Projects" → `/trees?type=procedural`
+- When a sub-item is active, parent "All Flows" stays highlighted (dimmer state)
+- Badge counts update based on actual tree counts by type
+
+### 5c. Pinned Flows Section
+
+```tsx
+// frontend/src/components/sidebar/PinnedFlowsSection.tsx (NEW)
+interface PinnedFlowsSectionProps {
+  flows: PinnedFlow[];
+  onFlowClick: (treeId: string) => void;
+  onUnpin: (treeId: string) => void;
+}
+```
+
+**Behavior:**
+- Each pinned item: emoji + name (truncated with ellipsis) + hover reveals quick-start button
+- Right-click context menu: "Start Session", "Edit Flow", "Unpin from Sidebar"
+- Empty state: "⭐ Pin your most-used flows here" in `text-xs text-muted-foreground`
+- Section header has collapse chevron
+- Max 15 items shown; section scrolls internally if needed
+- Drag-to-reorder (calls `PATCH /api/v1/trees/pinned/reorder`)
+
+### 5d. Pinned Flows Frontend Wiring
+
+```
+CREATE: frontend/src/api/pinnedFlows.ts — pinTree(id), unpinTree(id), listPinned(), reorderPinned(order)
+CREATE: frontend/src/components/sidebar/PinnedFlowsSection.tsx
+MODIFY: frontend/src/types/tree.ts (or index.ts) — add is_pinned?: boolean to TreeListItem, add PinnedFlow type
+MODIFY: frontend/src/api/trees.ts — add is_pinned to list response handling
+MODIFY: frontend/src/components/layout/Sidebar.tsx — import and render PinnedFlowsSection above nav
+MODIFY: frontend/src/pages/TreeLibraryPage.tsx — add pin star to flow cards (visible on hover, filled if pinned)
+MODIFY: flow card three-dot menu — add "Pin to Sidebar" / "Unpin from Sidebar" action
+```
+
+**Pin/unpin interaction:**
+- Toast on pin: "📌 Pinned **{name}** to sidebar"
+- Toast on unpin: "Unpinned **{name}**"
+- Library flow cards show subtle star icon on hover; filled star if pinned
+- Pin star click calls API, optimistically updates UI
+
+---
+
+## Phase 6 — Library Page Cleanup
+
+### 6a. Remove Folder Sidebar Panel
+
+> **⚠️ Important:** `TreeLibraryPage.tsx` has deep folder state dependencies (lines 9, 34, 261+). This is not a simple component removal.
+
+**What to remove:**
+- `FolderSidebar` component import and rendering (the persistent left panel)
+- `FolderEditModal` import and state
+- The CSS column that gives FolderSidebar its own grid track
+- `mobileFolderOpen` state
+
+**What to KEEP:**
+- `selectedFolderId` state — keep for now, wire to a future "Filter by Folder" dropdown
+- `folders` state and `foldersApi.list()` call — keep data available
+- `FolderSidebar.tsx` and `FolderEditModal.tsx` files — do not delete, just stop rendering them
+- All folder-related backend code (models, API, database tables) — untouched
+
+**Replacement UX (deferred but noted):**
+- Future: "Filter by Folder" dropdown in the filters bar, or "Move to Folder" in the three-dot menu
+- For now: folder filtering is simply not visible in the UI. The data model and API remain intact.
+
+**Layout change:**
+- Library page becomes full-width within the main content area (no second sidebar column)
+- Grid goes from `sidebar | folders | content` → `sidebar | content`
+
+### 6b. Verification
+
+```bash
+cd frontend && npm run build
+# Must compile clean
+```
+
+Manual checks:
+- [ ] Library page is full-width (no left folder panel)
+- [ ] No JavaScript errors in browser console related to folder state
+- [ ] Category filtering from sidebar clicks still works
+- [ ] Tag filtering from sidebar clicks still works
+
+---
+
+## Complete File Manifest
+
+### Delete (11 files)
+
+| File | Reason |
+|------|--------|
+| `frontend/src/store/workspaceStore.ts` | Replaced by userPreferencesStore (sidebarCollapsed) |
+| `frontend/src/components/workspace/WorkspaceSwitcher.tsx` | Feature removed |
+| `frontend/src/components/workspace/WorkspaceCreateModal.tsx` | Feature removed |
+| `frontend/src/constants/workspaceLabels.ts` | Replaced by flowLabels.ts |
+| `frontend/src/types/workspace.ts` | Type no longer needed |
+| `frontend/src/api/workspaces.ts` | API removed |
+| `backend/app/api/endpoints/workspaces.py` | API removed |
+| `backend/app/models/workspace.py` | Model removed |
+| `backend/app/schemas/workspace.py` | Schema removed (if exists) |
+| `docs/mockups/resolutionflow-workspaces-mockup.html` | Outdated mockup |
+
+### Move (2 files)
+
+| From | To |
+|------|----|
+| `frontend/src/components/workspace/CategoryList.tsx` | `frontend/src/components/sidebar/CategoryList.tsx` |
+| `frontend/src/components/workspace/TagCloud.tsx` | `frontend/src/components/sidebar/TagCloud.tsx` |
+
+Then delete the empty `frontend/src/components/workspace/` directory.
+
+### Create (6+ files)
+
+| File | Purpose |
+|------|---------|
+| `backend/alembic/versions/0XX_remove_workspace_system.py` | Drop workspace tables/columns |
+| `backend/alembic/versions/0XX_add_user_pinned_trees.py` | New pinned flows table |
+| `backend/app/models/user_pinned_tree.py` | UserPinnedTree SQLAlchemy model |
+| `frontend/src/constants/flowLabels.ts` | Flow type label constants |
+| `frontend/src/api/pinnedFlows.ts` | Pin/unpin API client |
+| `frontend/src/components/sidebar/PinnedFlowsSection.tsx` | Pinned flows sidebar component |
+
+### Modify (14 files — key changes only)
+
+| File | Changes |
+|------|---------|
+| `backend/app/api/router.py` | Remove workspace routes, add pin routes |
+| `backend/app/models/__init__.py` | Remove Workspace import (line 23, 55), add UserPinnedTree |
+| `backend/app/models/account.py` | Remove `workspaces` relationship (line 18, 49) |
+| `backend/app/models/category.py` | Remove `workspace_id` column (line 40) if present |
+| `backend/app/models/tree.py` | Remove `workspace_id` column/relationship if present |
+| `backend/app/api/endpoints/trees.py` | Add pin/unpin/list-pinned/reorder endpoints |
+| `backend/app/schemas/tree.py` | Add PinnedFlow schema, add `is_pinned` to tree list |
+| `frontend/src/store/userPreferencesStore.ts` | Absorb `sidebarCollapsed` + `toggleSidebar` |
+| `frontend/src/components/layout/AppLayout.tsx` | Replace workspaceStore with userPreferencesStore |
+| `frontend/src/components/layout/TopBar.tsx` | Replace workspaceStore, static search labels |
+| `frontend/src/components/layout/Sidebar.tsx` | Remove workspace switcher, add pinned section + nav sub-items |
+| `frontend/src/components/layout/NavItem.tsx` | Add `children` sub-item support |
+| `frontend/src/pages/TreeLibraryPage.tsx` | Remove FolderSidebar, update labels, add pin star |
+| `frontend/src/components/layout/QuickLaunch.tsx` | Update action labels |
+| `frontend/src/components/layout/CommandPalette.tsx` | Update search labels |
+| `frontend/src/pages/QuickStartPage.tsx` | Update workspace/procedure labels (line 150) |
+| `frontend/src/types/index.ts` | Remove Workspace export (line 11, 14), add PinnedFlow |
+
+---
+
+## Verification Checklist
+
+### Automated
+
+```bash
+# Backend
+cd backend
+alembic upgrade head                         # Migration applies clean
+pytest --override-ini="addopts="             # All tests pass
+grep -r "workspace" app/ --include="*.py" -l # No active workspace refs
+
+# Frontend
+cd frontend
+npm run build                                # Compiles clean, zero errors
+grep -r "workspaceStore\|WorkspaceSwitcher\|workspacesApi\|workspaceLabels" src/ -l
+                                             # Returns nothing
+```
+
+### Manual UI Checks
+
+- [ ] Sidebar shows "All Flows" with "Troubleshooting" and "Projects" sub-items — no workspace switcher
+- [ ] Clicking "Troubleshooting" filters library to `?type=troubleshooting`
+- [ ] Clicking "Projects" filters library to `?type=procedural`
+- [ ] Clicking "All Flows" removes type filter
+- [ ] Sub-item counts reflect actual flow counts per type
+- [ ] Pin a flow from the library card three-dot menu → appears in sidebar "PINNED" section
+- [ ] Unpin a flow → disappears from sidebar
+- [ ] Pinned flow click navigates to that flow
+- [ ] Library page is full-width (no folder sidebar panel)
+- [ ] Search bar is centered in top bar
+- [ ] Keyboard shortcut shows "Ctrl+K" on Windows, "⌘K" on Mac
+- [ ] All user-visible labels say "Flow" / "Project", never "Tree" / "Procedure"
+- [ ] Empty states use correct terminology
+- [ ] Toast messages use correct terminology
+- [ ] Command palette search works with new labels
+- [ ] Quick Launch actions show correct labels
diff --git a/backend/alembic/versions/036_add_workspaces.py b/backend/alembic/versions/036_add_workspaces.py
new file mode 100644
index 00000000..89db8f18
--- /dev/null
+++ b/backend/alembic/versions/036_add_workspaces.py
@@ -0,0 +1,102 @@
+"""Add workspaces table, workspace_id to trees and categories, color to categories
+
+Revision ID: 036
+Revises: 035
+Create Date: 2026-02-15
+
+Adds workspace system for organizational context above folders.
+"""
+from typing import Sequence, Union
+
+from alembic import op
+import sqlalchemy as sa
+from sqlalchemy.dialects.postgresql import UUID
+
+
+# revision identifiers, used by Alembic.
+revision: str = '036'
+down_revision: Union[str, None] = '035'
+branch_labels: Union[str, Sequence[str], None] = None
+depends_on: Union[str, Sequence[str], None] = None
+
+
+def upgrade() -> None:
+    # Create workspaces table
+    op.create_table(
+        'workspaces',
+        sa.Column('id', UUID(as_uuid=True), primary_key=True, server_default=sa.text('gen_random_uuid()')),
+        sa.Column('name', sa.String(100), nullable=False),
+        sa.Column('slug', sa.String(100), nullable=False),
+        sa.Column('description', sa.Text(), nullable=True),
+        sa.Column('icon', sa.String(10), nullable=True),
+        sa.Column('accent_color', sa.String(7), nullable=True),
+        sa.Column('account_id', UUID(as_uuid=True), sa.ForeignKey('accounts.id', ondelete='CASCADE'), nullable=False),
+        sa.Column('is_default', sa.Boolean(), nullable=False, server_default='false'),
+        sa.Column('sort_order', sa.Integer(), nullable=False, server_default='0'),
+        sa.Column('created_at', sa.DateTime(timezone=True), server_default=sa.text('NOW()')),
+        sa.Column('updated_at', sa.DateTime(timezone=True), server_default=sa.text('NOW()')),
+        sa.UniqueConstraint('slug', 'account_id', name='uq_workspaces_slug_account'),
+    )
+    op.create_index('ix_workspaces_slug', 'workspaces', ['slug'])
+    op.create_index('ix_workspaces_account_id', 'workspaces', ['account_id'])
+
+    # Add workspace_id to trees
+    op.add_column('trees', sa.Column('workspace_id', UUID(as_uuid=True), nullable=True))
+    op.create_foreign_key('fk_trees_workspace_id', 'trees', 'workspaces', ['workspace_id'], ['id'], ondelete='SET NULL')
+    op.create_index('ix_trees_workspace_id', 'trees', ['workspace_id'])
+
+    # Add color and workspace_id to tree_categories
+    op.add_column('tree_categories', sa.Column('color', sa.String(7), nullable=True, server_default='#3b82f6'))
+    op.add_column('tree_categories', sa.Column('workspace_id', UUID(as_uuid=True), nullable=True))
+    op.create_foreign_key('fk_tree_categories_workspace_id', 'tree_categories', 'workspaces', ['workspace_id'], ['id'], ondelete='SET NULL')
+    op.create_index('ix_tree_categories_workspace_id', 'tree_categories', ['workspace_id'])
+
+    # Seed default workspaces for each existing account and assign trees
+    op.execute("""
+        -- Create default workspaces for each account
+        INSERT INTO workspaces (name, slug, description, icon, accent_color, account_id, is_default, sort_order)
+        SELECT 'Troubleshooting', 'troubleshooting', 'Break/fix decision trees', '🔧', '#ef4444', a.id, true, 0
+        FROM accounts a;
+
+        INSERT INTO workspaces (name, slug, description, icon, accent_color, account_id, is_default, sort_order)
+        SELECT 'Procedures', 'procedures', 'Step-by-step operational flows', '📋', '#3b82f6', a.id, false, 1
+        FROM accounts a;
+
+        INSERT INTO workspaces (name, slug, description, icon, accent_color, account_id, is_default, sort_order)
+        SELECT 'Policies', 'policies', 'Compliance & policy builders', '📜', '#8b5cf6', a.id, false, 2
+        FROM accounts a;
+
+        INSERT INTO workspaces (name, slug, description, icon, accent_color, account_id, is_default, sort_order)
+        SELECT 'Finance', 'finance', 'Billing & procurement flows', '💰', '#22c55e', a.id, false, 3
+        FROM accounts a;
+
+        -- Assign existing trees to appropriate workspace based on tree_type
+        UPDATE trees t
+        SET workspace_id = w.id
+        FROM workspaces w
+        WHERE w.account_id = t.account_id
+          AND w.slug = 'troubleshooting'
+          AND t.tree_type = 'troubleshooting';
+
+        UPDATE trees t
+        SET workspace_id = w.id
+        FROM workspaces w
+        WHERE w.account_id = t.account_id
+          AND w.slug = 'procedures'
+          AND t.tree_type = 'procedural';
+    """)
+
+
+def downgrade() -> None:
+    op.drop_index('ix_tree_categories_workspace_id', 'tree_categories')
+    op.drop_constraint('fk_tree_categories_workspace_id', 'tree_categories', type_='foreignkey')
+    op.drop_column('tree_categories', 'workspace_id')
+    op.drop_column('tree_categories', 'color')
+
+    op.drop_index('ix_trees_workspace_id', 'trees')
+    op.drop_constraint('fk_trees_workspace_id', 'trees', type_='foreignkey')
+    op.drop_column('trees', 'workspace_id')
+
+    op.drop_index('ix_workspaces_account_id', 'workspaces')
+    op.drop_index('ix_workspaces_slug', 'workspaces')
+    op.drop_table('workspaces')
diff --git a/backend/alembic/versions/037_add_user_pinned_trees.py b/backend/alembic/versions/037_add_user_pinned_trees.py
new file mode 100644
index 00000000..27e498c8
--- /dev/null
+++ b/backend/alembic/versions/037_add_user_pinned_trees.py
@@ -0,0 +1,40 @@
+"""Add user_pinned_trees table
+
+Revision ID: 037
+Revises: 036
+Create Date: 2026-02-15
+
+Adds pinned flows feature for sidebar favorites.
+"""
+from typing import Sequence, Union
+
+from alembic import op
+import sqlalchemy as sa
+from sqlalchemy.dialects.postgresql import UUID
+
+
+# revision identifiers, used by Alembic.
+revision: str = '037'
+down_revision: Union[str, None] = '036'
+branch_labels: Union[str, Sequence[str], None] = None
+depends_on: Union[str, Sequence[str], None] = None
+
+
+def upgrade() -> None:
+    op.create_table(
+        'user_pinned_trees',
+        sa.Column('id', UUID(as_uuid=True), primary_key=True, server_default=sa.text('gen_random_uuid()')),
+        sa.Column('user_id', UUID(as_uuid=True), sa.ForeignKey('users.id', ondelete='CASCADE'), nullable=False),
+        sa.Column('tree_id', UUID(as_uuid=True), sa.ForeignKey('trees.id', ondelete='CASCADE'), nullable=False),
+        sa.Column('display_order', sa.Integer(), nullable=False, server_default='0'),
+        sa.Column('pinned_at', sa.DateTime(timezone=True), server_default=sa.text('NOW()')),
+        sa.UniqueConstraint('user_id', 'tree_id', name='uq_user_pinned_tree'),
+    )
+    op.create_index('idx_user_pinned_trees_user', 'user_pinned_trees', ['user_id'])
+    op.create_index('idx_user_pinned_trees_tree', 'user_pinned_trees', ['tree_id'])
+
+
+def downgrade() -> None:
+    op.drop_index('idx_user_pinned_trees_tree', 'user_pinned_trees')
+    op.drop_index('idx_user_pinned_trees_user', 'user_pinned_trees')
+    op.drop_table('user_pinned_trees')
diff --git a/backend/alembic/versions/038_remove_workspace_system.py b/backend/alembic/versions/038_remove_workspace_system.py
new file mode 100644
index 00000000..a4a7fcc3
--- /dev/null
+++ b/backend/alembic/versions/038_remove_workspace_system.py
@@ -0,0 +1,69 @@
+"""Remove workspace system
+
+Revision ID: 038
+Revises: 037
+Create Date: 2026-02-15
+
+Drops workspace tables and columns. Keeps tree_categories.color.
+"""
+from typing import Sequence, Union
+
+from alembic import op
+import sqlalchemy as sa
+from sqlalchemy.dialects.postgresql import UUID
+
+
+# revision identifiers, used by Alembic.
+revision: str = '038'
+down_revision: Union[str, None] = '037'
+branch_labels: Union[str, Sequence[str], None] = None
+depends_on: Union[str, Sequence[str], None] = None
+
+
+def upgrade() -> None:
+    # 1. Drop workspace_id FK and column from trees
+    op.drop_index('ix_trees_workspace_id', 'trees')
+    op.drop_constraint('fk_trees_workspace_id', 'trees', type_='foreignkey')
+    op.drop_column('trees', 'workspace_id')
+
+    # 2. Drop workspace_id FK and column from tree_categories
+    op.drop_index('ix_tree_categories_workspace_id', 'tree_categories')
+    op.drop_constraint('fk_tree_categories_workspace_id', 'tree_categories', type_='foreignkey')
+    op.drop_column('tree_categories', 'workspace_id')
+
+    # 3. Drop workspaces table
+    op.drop_index('ix_workspaces_account_id', 'workspaces')
+    op.drop_index('ix_workspaces_slug', 'workspaces')
+    op.drop_table('workspaces')
+
+    # DO NOT drop tree_categories.color — we still use it
+
+
+def downgrade() -> None:
+    # Recreate workspaces table
+    op.create_table(
+        'workspaces',
+        sa.Column('id', UUID(as_uuid=True), primary_key=True, server_default=sa.text('gen_random_uuid()')),
+        sa.Column('name', sa.String(100), nullable=False),
+        sa.Column('slug', sa.String(100), nullable=False),
+        sa.Column('description', sa.Text(), nullable=True),
+        sa.Column('icon', sa.String(10), nullable=True),
+        sa.Column('accent_color', sa.String(7), nullable=True),
+        sa.Column('account_id', UUID(as_uuid=True), sa.ForeignKey('accounts.id', ondelete='CASCADE'), nullable=False),
+        sa.Column('is_default', sa.Boolean(), nullable=False, server_default='false'),
+        sa.Column('sort_order', sa.Integer(), nullable=False, server_default='0'),
+        sa.Column('created_at', sa.DateTime(timezone=True), server_default=sa.text('NOW()')),
+        sa.Column('updated_at', sa.DateTime(timezone=True), server_default=sa.text('NOW()')),
+        sa.UniqueConstraint('slug', 'account_id', name='uq_workspaces_slug_account'),
+    )
+    op.create_index('ix_workspaces_slug', 'workspaces', ['slug'])
+    op.create_index('ix_workspaces_account_id', 'workspaces', ['account_id'])
+
+    # Re-add workspace_id columns
+    op.add_column('trees', sa.Column('workspace_id', UUID(as_uuid=True), nullable=True))
+    op.create_foreign_key('fk_trees_workspace_id', 'trees', 'workspaces', ['workspace_id'], ['id'], ondelete='SET NULL')
+    op.create_index('ix_trees_workspace_id', 'trees', ['workspace_id'])
+
+    op.add_column('tree_categories', sa.Column('workspace_id', UUID(as_uuid=True), nullable=True))
+    op.create_foreign_key('fk_tree_categories_workspace_id', 'tree_categories', 'workspaces', ['workspace_id'], ['id'], ondelete='SET NULL')
+    op.create_index('ix_tree_categories_workspace_id', 'tree_categories', ['workspace_id'])
diff --git a/backend/app/api/endpoints/trees.py b/backend/app/api/endpoints/trees.py
index 4f943fcb..9a54e36e 100644
--- a/backend/app/api/endpoints/trees.py
+++ b/backend/app/api/endpoints/trees.py
@@ -17,8 +17,10 @@ from app.models.folder import UserFolder, user_folder_trees
 from app.schemas.tree import (
     TreeCreate, TreeUpdate, TreeResponse, TreeListResponse, CategoryInfo,
     ForkCreate, ForkInfo, TreeShareCreate, TreeShareResponse,
-    TreeVisibilityUpdate, SharedTreeResponse, TreeValidationResponse, ValidationError
+    TreeVisibilityUpdate, SharedTreeResponse, TreeValidationResponse, ValidationError,
+    PinnedFlowResponse, PinnedFlowsListResponse, PinnedFlowReorderRequest
 )
+from app.models.user_pinned_tree import UserPinnedTree
 from app.api.deps import get_current_active_user, require_engineer_or_admin, require_admin
 from app.core.permissions import can_edit_tree, can_access_tree
 from app.core.filters import build_tree_access_filter
@@ -1030,3 +1032,185 @@ async def check_tree_can_publish(
         can_publish=can_publish,
         errors=[ValidationError(**error) for error in validation_errors]
     )
+
+
+# --- Pinned Flows Endpoints ---
+
+MAX_PINNED_FLOWS = 15
+
+
+@router.get("/pinned", response_model=PinnedFlowsListResponse)
+async def list_pinned_flows(
+    db: Annotated[AsyncSession, Depends(get_db)],
+    current_user: Annotated[User, Depends(get_current_active_user)]
+):
+    """List user's pinned flows, ordered by display_order."""
+    result = await db.execute(
+        select(UserPinnedTree, Tree)
+        .join(Tree, UserPinnedTree.tree_id == Tree.id)
+        .options(selectinload(Tree.category_rel))
+        .where(
+            UserPinnedTree.user_id == current_user.id,
+            Tree.is_active == True,
+            Tree.deleted_at.is_(None)
+        )
+        .order_by(UserPinnedTree.display_order, UserPinnedTree.pinned_at)
+    )
+    rows = result.all()
+
+    items = []
+    for pin, tree in rows:
+        items.append(PinnedFlowResponse(
+            id=pin.id,
+            tree_id=tree.id,
+            tree_name=tree.name,
+            tree_type=tree.tree_type,
+            category_emoji=None,
+            category_name=tree.category_rel.name if tree.category_rel else None,
+            pinned_at=pin.pinned_at,
+            display_order=pin.display_order,
+        ))
+
+    return PinnedFlowsListResponse(items=items, count=len(items))
+
+
+@router.post("/{tree_id}/pin", response_model=PinnedFlowResponse)
+async def pin_flow(
+    tree_id: UUID,
+    db: Annotated[AsyncSession, Depends(get_db)],
+    current_user: Annotated[User, Depends(get_current_active_user)]
+):
+    """Pin a flow to the user's sidebar."""
+    # Check tree exists and user can access it
+    tree_result = await db.execute(
+        select(Tree)
+        .options(selectinload(Tree.category_rel))
+        .where(Tree.id == tree_id, Tree.is_active == True)
+    )
+    tree = tree_result.scalar_one_or_none()
+    if not tree:
+        raise HTTPException(status_code=status.HTTP_404_NOT_FOUND, detail="Tree not found")
+    if not can_access_tree(current_user, tree):
+        raise HTTPException(status_code=status.HTTP_403_FORBIDDEN, detail="You don't have access to this tree")
+
+    # Check if already pinned (idempotent)
+    existing = await db.execute(
+        select(UserPinnedTree).where(
+            UserPinnedTree.user_id == current_user.id,
+            UserPinnedTree.tree_id == tree_id
+        )
+    )
+    pin = existing.scalar_one_or_none()
+    if pin:
+        return PinnedFlowResponse(
+            id=pin.id,
+            tree_id=tree.id,
+            tree_name=tree.name,
+            tree_type=tree.tree_type,
+            category_emoji=None,
+            category_name=tree.category_rel.name if tree.category_rel else None,
+            pinned_at=pin.pinned_at,
+            display_order=pin.display_order,
+        )
+
+    # Check max pins
+    count_result = await db.execute(
+        select(func.count(UserPinnedTree.id)).where(
+            UserPinnedTree.user_id == current_user.id
+        )
+    )
+    count = count_result.scalar() or 0
+    if count >= MAX_PINNED_FLOWS:
+        raise HTTPException(
+            status_code=status.HTTP_409_CONFLICT,
+            detail=f"Maximum of {MAX_PINNED_FLOWS} pinned flows reached"
+        )
+
+    # Create pin
+    pin = UserPinnedTree(
+        user_id=current_user.id,
+        tree_id=tree_id,
+        display_order=count,  # Append at end
+    )
+    db.add(pin)
+    await db.commit()
+    await db.refresh(pin)
+
+    return PinnedFlowResponse(
+        id=pin.id,
+        tree_id=tree.id,
+        tree_name=tree.name,
+        tree_type=tree.tree_type,
+        category_emoji=None,
+        category_name=tree.category_rel.name if tree.category_rel else None,
+        pinned_at=pin.pinned_at,
+        display_order=pin.display_order,
+    )
+
+
+@router.delete("/{tree_id}/pin")
+async def unpin_flow(
+    tree_id: UUID,
+    db: Annotated[AsyncSession, Depends(get_db)],
+    current_user: Annotated[User, Depends(get_current_active_user)]
+):
+    """Unpin a flow from the user's sidebar."""
+    result = await db.execute(
+        select(UserPinnedTree).where(
+            UserPinnedTree.user_id == current_user.id,
+            UserPinnedTree.tree_id == tree_id
+        )
+    )
+    pin = result.scalar_one_or_none()
+    if pin:
+        await db.delete(pin)
+        await db.commit()
+    return {"success": True}
+
+
+@router.patch("/pinned/reorder", response_model=PinnedFlowsListResponse)
+async def reorder_pinned_flows(
+    reorder_data: PinnedFlowReorderRequest,
+    db: Annotated[AsyncSession, Depends(get_db)],
+    current_user: Annotated[User, Depends(get_current_active_user)]
+):
+    """Update display_order for all pinned flows."""
+    for item in reorder_data.order:
+        await db.execute(
+            update(UserPinnedTree)
+            .where(
+                UserPinnedTree.user_id == current_user.id,
+                UserPinnedTree.tree_id == item.tree_id
+            )
+            .values(display_order=item.display_order)
+        )
+    await db.commit()
+
+    # Return updated list
+    result = await db.execute(
+        select(UserPinnedTree, Tree)
+        .join(Tree, UserPinnedTree.tree_id == Tree.id)
+        .options(selectinload(Tree.category_rel))
+        .where(
+            UserPinnedTree.user_id == current_user.id,
+            Tree.is_active == True,
+            Tree.deleted_at.is_(None)
+        )
+        .order_by(UserPinnedTree.display_order, UserPinnedTree.pinned_at)
+    )
+    rows = result.all()
+
+    items = []
+    for pin, tree in rows:
+        items.append(PinnedFlowResponse(
+            id=pin.id,
+            tree_id=tree.id,
+            tree_name=tree.name,
+            tree_type=tree.tree_type,
+            category_emoji=None,
+            category_name=tree.category_rel.name if tree.category_rel else None,
+            pinned_at=pin.pinned_at,
+            display_order=pin.display_order,
+        ))
+
+    return PinnedFlowsListResponse(items=items, count=len(items))
diff --git a/backend/app/models/__init__.py b/backend/app/models/__init__.py
index e2976ccc..7ba8536d 100644
--- a/backend/app/models/__init__.py
+++ b/backend/app/models/__init__.py
@@ -20,6 +20,7 @@ from .session_share import SessionShare, SessionShareView
 from .account_limit_override import AccountLimitOverride
 from .feature_flag import FeatureFlag, PlanFeatureDefault, AccountFeatureOverride
 from .platform_setting import PlatformSetting
+from .user_pinned_tree import UserPinnedTree
 
 __all__ = [
     "User",
@@ -51,4 +52,5 @@ __all__ = [
     "PlanFeatureDefault",
     "AccountFeatureOverride",
     "PlatformSetting",
+    "UserPinnedTree",
 ]
diff --git a/backend/app/models/category.py b/backend/app/models/category.py
index 57bae701..eb3a56a6 100644
--- a/backend/app/models/category.py
+++ b/backend/app/models/category.py
@@ -47,6 +47,10 @@ class TreeCategory(Base):
     )
     display_order: Mapped[int] = mapped_column(Integer, nullable=False, default=0, index=True)
     is_active: Mapped[bool] = mapped_column(Boolean, nullable=False, default=True)
+    color: Mapped[Optional[str]] = mapped_column(
+        String(7), nullable=True, default='#3b82f6',
+        comment="Hex color for category dot indicator"
+    )
     created_by: Mapped[Optional[uuid.UUID]] = mapped_column(
         UUID(as_uuid=True),
         ForeignKey("users.id", ondelete="SET NULL"),
diff --git a/backend/app/models/tree.py b/backend/app/models/tree.py
index f36dd961..49486a21 100644
--- a/backend/app/models/tree.py
+++ b/backend/app/models/tree.py
@@ -120,7 +120,6 @@ class Tree(Base):
         onupdate=lambda: datetime.now(timezone.utc)
     )
     usage_count: Mapped[int] = mapped_column(Integer, default=0)
-
     # Fork tracking
     parent_tree_id: Mapped[Optional[uuid.UUID]] = mapped_column(
         UUID(as_uuid=True),
@@ -184,7 +183,7 @@ class Tree(Base):
         cascade="all, delete-orphan"
     )
 
-    # New organization relationships
+    # Organization relationships
     category_rel: Mapped[Optional["TreeCategory"]] = relationship("TreeCategory", back_populates="trees")
     tags: Mapped[list["TreeTag"]] = relationship(
         "TreeTag",
diff --git a/backend/app/models/user_pinned_tree.py b/backend/app/models/user_pinned_tree.py
new file mode 100644
index 00000000..c27edd08
--- /dev/null
+++ b/backend/app/models/user_pinned_tree.py
@@ -0,0 +1,37 @@
+import uuid
+from datetime import datetime, timezone
+from sqlalchemy import DateTime, ForeignKey, Integer, UniqueConstraint
+from sqlalchemy.orm import Mapped, mapped_column
+from sqlalchemy.dialects.postgresql import UUID
+from app.core.database import Base
+
+
+class UserPinnedTree(Base):
+    """Tracks which trees a user has pinned to their sidebar."""
+    __tablename__ = "user_pinned_trees"
+    __table_args__ = (
+        UniqueConstraint('user_id', 'tree_id', name='uq_user_pinned_tree'),
+    )
+
+    id: Mapped[uuid.UUID] = mapped_column(
+        UUID(as_uuid=True),
+        primary_key=True,
+        default=uuid.uuid4
+    )
+    user_id: Mapped[uuid.UUID] = mapped_column(
+        UUID(as_uuid=True),
+        ForeignKey("users.id", ondelete="CASCADE"),
+        nullable=False,
+        index=True
+    )
+    tree_id: Mapped[uuid.UUID] = mapped_column(
+        UUID(as_uuid=True),
+        ForeignKey("trees.id", ondelete="CASCADE"),
+        nullable=False,
+        index=True
+    )
+    display_order: Mapped[int] = mapped_column(Integer, nullable=False, default=0)
+    pinned_at: Mapped[datetime] = mapped_column(
+        DateTime(timezone=True),
+        default=lambda: datetime.now(timezone.utc)
+    )
diff --git a/backend/app/schemas/category.py b/backend/app/schemas/category.py
index 13e9955c..3a332cf1 100644
--- a/backend/app/schemas/category.py
+++ b/backend/app/schemas/category.py
@@ -36,6 +36,7 @@ class CategoryResponse(CategoryBase):
     account_id: Optional[UUID] = None
     display_order: int
     is_active: bool
+    color: Optional[str] = None
     created_at: datetime
     updated_at: datetime
     tree_count: int = 0  # Computed field
@@ -52,6 +53,7 @@ class CategoryListResponse(BaseModel):
     account_id: Optional[UUID] = None
     display_order: int
     is_active: bool
+    color: Optional[str] = None
     tree_count: int = 0
 
     class Config:
diff --git a/backend/app/schemas/tree.py b/backend/app/schemas/tree.py
index 0da6c79b..236b6290 100644
--- a/backend/app/schemas/tree.py
+++ b/backend/app/schemas/tree.py
@@ -245,3 +245,37 @@ class TreeValidationResponse(BaseModel):
     """Response for tree validation endpoint."""
     can_publish: bool
     errors: list[ValidationError] = []
+
+
+# --- Pinned Flows Schemas ---
+
+class PinnedFlowResponse(BaseModel):
+    """A pinned flow in the sidebar."""
+    id: UUID
+    tree_id: UUID
+    tree_name: str
+    tree_type: str
+    category_emoji: Optional[str] = None
+    category_name: Optional[str] = None
+    pinned_at: datetime
+    display_order: int
+
+    class Config:
+        from_attributes = True
+
+
+class PinnedFlowsListResponse(BaseModel):
+    """List of pinned flows."""
+    items: list[PinnedFlowResponse]
+    count: int
+
+
+class PinnedFlowReorderItem(BaseModel):
+    """Single item in a reorder request."""
+    tree_id: UUID
+    display_order: int
+
+
+class PinnedFlowReorderRequest(BaseModel):
+    """Request to reorder pinned flows."""
+    order: list[PinnedFlowReorderItem]
diff --git a/docs/mockups/resolutionflow-workspaces-mockup.html b/docs/mockups/resolutionflow-workspaces-mockup.html
deleted file mode 100644
index 00d71e66..00000000
--- a/docs/mockups/resolutionflow-workspaces-mockup.html
+++ /dev/null
@@ -1,1107 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-<meta charset="UTF-8">
-<meta name="viewport" content="width=device-width, initial-scale=1.0">
-<title>ResolutionFlow — Adaptive Workspaces Mockup</title>
-<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Inter:wght@400;500;600&family=Outfit:wght@400;500;600;700&display=swap" rel="stylesheet">
-<style>
-  :root {
-    --gradient-from: #818cf8;
-    --gradient-to: #a78bfa;
-    --bg-app: #09090b;
-    --bg-sidebar: #0c0c0f;
-    --bg-card: #18181b;
-    --bg-surface: #111114;
-    --bg-hover: #1e1e23;
-    --bg-active: rgba(129,140,248,0.08);
-    --border: #27272a;
-    --border-subtle: #1f1f23;
-    --text-primary: #fafafa;
-    --text-secondary: #a1a1aa;
-    --text-muted: #52525b;
-    --text-dimmed: #3f3f46;
-    --success: #22c55e;
-    --warning: #f59e0b;
-    --error: #ef4444;
-    --info: #3b82f6;
-    --sidebar-w: 260px;
-  }
-
-  * { margin:0; padding:0; box-sizing:border-box; }
-
-  body {
-    font-family: 'Inter', system-ui, -apple-system, sans-serif;
-    background: var(--bg-app);
-    color: var(--text-primary);
-    height: 100vh;
-    overflow: hidden;
-  }
-
-  .app-shell {
-    display: grid;
-    grid-template-columns: var(--sidebar-w) 1fr;
-    grid-template-rows: 56px 1fr;
-    height: 100vh;
-  }
-
-  /* ── Top Bar ── */
-  .topbar {
-    grid-column: 1 / -1;
-    display: flex;
-    align-items: center;
-    padding: 0 20px;
-    background: var(--bg-sidebar);
-    border-bottom: 1px solid var(--border);
-    gap: 16px;
-    z-index: 100;
-  }
-
-  .topbar-logo {
-    display: flex;
-    align-items: center;
-    gap: 10px;
-    width: calc(var(--sidebar-w) - 40px);
-    flex-shrink: 0;
-  }
-  .topbar-logo svg { width: 32px; height: 32px; }
-
-  .topbar-brand {
-    font-family: 'Plus Jakarta Sans', sans-serif;
-    font-size: 1.1rem;
-    font-weight: 700;
-    letter-spacing: -0.02em;
-  }
-  .topbar-brand .res { color: var(--text-primary); }
-  .topbar-brand .flow {
-    background: linear-gradient(90deg, var(--gradient-from), var(--gradient-to));
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
-  }
-
-  .topbar-search {
-    flex: 1;
-    max-width: 480px;
-    position: relative;
-  }
-  .topbar-search input {
-    width: 100%;
-    background: var(--bg-card);
-    border: 1px solid var(--border);
-    border-radius: 8px;
-    padding: 8px 12px 8px 36px;
-    color: var(--text-primary);
-    font-family: inherit;
-    font-size: 0.8125rem;
-    outline: none;
-    transition: border-color 0.15s;
-  }
-  .topbar-search input::placeholder { color: var(--text-muted); }
-  .topbar-search input:focus { border-color: var(--gradient-from); }
-  .topbar-search .search-icon {
-    position: absolute; left: 11px; top: 50%; transform: translateY(-50%);
-    color: var(--text-muted); width: 15px; height: 15px;
-  }
-  .topbar-search .search-shortcut {
-    position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
-    background: var(--bg-surface); border: 1px solid var(--border); border-radius: 4px;
-    padding: 1px 6px; font-size: 0.6875rem; color: var(--text-muted); font-family: 'Outfit', sans-serif;
-  }
-
-  .topbar-actions {
-    display: flex; align-items: center; gap: 6px; margin-left: auto;
-  }
-  .topbar-btn {
-    display: flex; align-items: center; justify-content: center;
-    width: 36px; height: 36px; border-radius: 8px; border: none;
-    background: transparent; color: var(--text-secondary); cursor: pointer;
-    transition: all 0.15s; position: relative;
-  }
-  .topbar-btn:hover { background: var(--bg-hover); color: var(--text-primary); }
-  .topbar-btn svg { width: 18px; height: 18px; }
-  .notification-badge {
-    position: absolute; top: 6px; right: 6px; width: 8px; height: 8px;
-    background: var(--error); border-radius: 50%; border: 2px solid var(--bg-sidebar);
-  }
-  .avatar-sm {
-    width: 32px; height: 32px; border-radius: 50%;
-    background: linear-gradient(135deg, var(--gradient-from), var(--gradient-to));
-    display: flex; align-items: center; justify-content: center;
-    font-family: 'Plus Jakarta Sans', sans-serif; font-size: 0.75rem;
-    font-weight: 700; color: white; margin-left: 4px; cursor: pointer;
-  }
-
-  /* ── Sidebar ── */
-  .sidebar {
-    background: var(--bg-sidebar);
-    border-right: 1px solid var(--border);
-    overflow-y: auto;
-    padding: 16px 12px;
-    display: flex;
-    flex-direction: column;
-    gap: 2px;
-  }
-  .sidebar::-webkit-scrollbar { width: 4px; }
-  .sidebar::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
-
-  .nav-section { margin-bottom: 16px; }
-
-  .nav-section-label {
-    font-family: 'Outfit', sans-serif;
-    font-size: 0.6875rem; font-weight: 600;
-    text-transform: uppercase; letter-spacing: 0.06em;
-    color: var(--text-muted); padding: 0 12px; margin-bottom: 6px;
-  }
-
-  .nav-item {
-    display: flex; align-items: center; gap: 10px;
-    padding: 8px 12px; border-radius: 7px; cursor: pointer;
-    transition: all 0.12s; font-size: 0.8125rem; font-weight: 500;
-    color: var(--text-secondary); text-decoration: none; position: relative;
-  }
-  .nav-item:hover { background: var(--bg-hover); color: var(--text-primary); }
-  .nav-item.active { background: var(--bg-active); color: var(--text-primary); }
-  .nav-item.active::before {
-    content: ''; position: absolute; left: 0; top: 6px; bottom: 6px; width: 3px;
-    background: linear-gradient(180deg, var(--gradient-from), var(--gradient-to));
-    border-radius: 0 3px 3px 0;
-  }
-  .nav-item svg { width: 18px; height: 18px; flex-shrink: 0; opacity: 0.7; }
-  .nav-item.active svg { opacity: 1; }
-
-  .nav-item .badge {
-    margin-left: auto; background: var(--bg-card); border: 1px solid var(--border);
-    border-radius: 10px; padding: 0 7px; font-size: 0.6875rem;
-    font-family: 'Outfit', sans-serif; color: var(--text-muted); line-height: 1.7;
-  }
-  .nav-item.active .badge {
-    background: rgba(129,140,248,0.15); border-color: rgba(129,140,248,0.3); color: var(--gradient-from);
-  }
-
-  .nav-divider { height: 1px; background: var(--border-subtle); margin: 10px 12px; }
-
-  /* ── Workspace Switcher ── */
-  .workspace-switcher {
-    margin-bottom: 16px;
-    padding: 0 4px;
-  }
-
-  .workspace-current {
-    display: flex;
-    align-items: center;
-    gap: 10px;
-    padding: 10px 12px;
-    background: var(--bg-card);
-    border: 1px solid var(--border);
-    border-radius: 8px;
-    cursor: pointer;
-    transition: all 0.15s;
-    position: relative;
-  }
-  .workspace-current:hover {
-    border-color: var(--gradient-from);
-    background: var(--bg-hover);
-  }
-  .workspace-current.open {
-    border-color: var(--gradient-from);
-    border-radius: 8px 8px 0 0;
-    border-bottom-color: var(--border-subtle);
-  }
-
-  .workspace-icon {
-    width: 32px; height: 32px; border-radius: 7px;
-    display: flex; align-items: center; justify-content: center;
-    font-size: 1rem; flex-shrink: 0;
-    transition: background 0.2s;
-  }
-
-  .workspace-label {
-    flex: 1;
-  }
-  .workspace-label .ws-name {
-    font-family: 'Plus Jakarta Sans', sans-serif;
-    font-size: 0.8125rem; font-weight: 700;
-    letter-spacing: -0.005em;
-    transition: color 0.2s;
-  }
-  .workspace-label .ws-desc {
-    font-size: 0.6875rem; color: var(--text-muted);
-    transition: color 0.2s;
-  }
-
-  .workspace-chevron {
-    color: var(--text-muted);
-    transition: transform 0.2s;
-    flex-shrink: 0;
-  }
-  .workspace-current.open .workspace-chevron { transform: rotate(180deg); }
-  .workspace-chevron svg { width: 14px; height: 14px; }
-
-  .workspace-dropdown {
-    display: none;
-    background: var(--bg-card);
-    border: 1px solid var(--gradient-from);
-    border-top: 1px solid var(--border-subtle);
-    border-radius: 0 0 8px 8px;
-    overflow: hidden;
-    animation: dropIn 0.15s ease;
-  }
-  .workspace-dropdown.show { display: block; }
-
-  @keyframes dropIn {
-    from { opacity: 0; transform: translateY(-4px); }
-    to { opacity: 1; transform: translateY(0); }
-  }
-
-  .workspace-option {
-    display: flex; align-items: center; gap: 10px;
-    padding: 10px 12px;
-    cursor: pointer; transition: background 0.1s;
-    border-bottom: 1px solid var(--border-subtle);
-  }
-  .workspace-option:last-child { border-bottom: none; }
-  .workspace-option:hover { background: var(--bg-hover); }
-  .workspace-option.active-ws { background: var(--bg-active); }
-
-  .workspace-option .ws-opt-icon {
-    width: 28px; height: 28px; border-radius: 6px;
-    display: flex; align-items: center; justify-content: center;
-    font-size: 0.875rem; flex-shrink: 0;
-  }
-  .workspace-option .ws-opt-name {
-    font-family: 'Plus Jakarta Sans', sans-serif;
-    font-size: 0.8125rem; font-weight: 600;
-  }
-  .workspace-option .ws-opt-count {
-    margin-left: auto; font-family: 'Outfit', sans-serif;
-    font-size: 0.6875rem; color: var(--text-dimmed);
-  }
-
-  .workspace-add {
-    display: flex; align-items: center; gap: 8px;
-    padding: 9px 12px; cursor: pointer;
-    font-size: 0.75rem; color: var(--text-muted);
-    transition: all 0.1s;
-    border-top: 1px solid var(--border-subtle);
-  }
-  .workspace-add:hover { background: var(--bg-hover); color: var(--gradient-from); }
-  .workspace-add svg { width: 14px; height: 14px; }
-
-  /* ── Category Tags ── */
-  .category-tag {
-    display: flex; align-items: center; gap: 8px;
-    padding: 6px 12px; border-radius: 6px; cursor: pointer;
-    transition: all 0.15s; font-size: 0.8125rem; color: var(--text-secondary);
-  }
-  .category-tag:hover { background: var(--bg-hover); color: var(--text-primary); }
-  .cat-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
-  .category-tag .cat-count {
-    margin-left: auto; font-size: 0.6875rem; color: var(--text-dimmed);
-    font-family: 'Outfit', sans-serif;
-  }
-
-  .tag-cloud {
-    display: flex; flex-wrap: wrap; gap: 4px; padding: 0 8px;
-  }
-  .filter-chip {
-    display: inline-flex; align-items: center; gap: 5px;
-    padding: 3px 8px; background: var(--bg-card); border: 1px solid var(--border);
-    border-radius: 5px; font-size: 0.6875rem; color: var(--text-secondary);
-    cursor: pointer; transition: all 0.12s; font-family: 'Outfit', sans-serif;
-  }
-  .filter-chip:hover { border-color: var(--text-muted); color: var(--text-primary); }
-
-  .sidebar-footer {
-    margin-top: auto; padding-top: 12px; border-top: 1px solid var(--border-subtle);
-  }
-
-  /* ── Animated content transitions ── */
-  .sidebar-content { transition: opacity 0.2s; }
-  .sidebar-content.switching { opacity: 0; }
-
-  /* ── Main Content ── */
-  .main {
-    overflow-y: auto; padding: 24px 28px; background: var(--bg-app);
-  }
-  .main::-webkit-scrollbar { width: 6px; }
-  .main::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
-
-  .page-header {
-    display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px;
-  }
-  .page-header h1 {
-    font-family: 'Plus Jakarta Sans', sans-serif;
-    font-size: 1.375rem; font-weight: 700; letter-spacing: -0.01em;
-  }
-  .page-header-actions { display: flex; align-items: center; gap: 8px; }
-
-  .btn {
-    display: inline-flex; align-items: center; gap: 6px;
-    padding: 8px 16px; border-radius: 8px; border: none;
-    font-family: inherit; font-size: 0.8125rem; font-weight: 600;
-    cursor: pointer; transition: all 0.15s;
-  }
-  .btn svg { width: 16px; height: 16px; }
-  .btn-primary {
-    background: linear-gradient(135deg, var(--gradient-from), var(--gradient-to));
-    color: white; box-shadow: 0 2px 12px rgba(129,140,248,0.25);
-  }
-  .btn-primary:hover { box-shadow: 0 4px 20px rgba(129,140,248,0.35); transform: translateY(-1px); }
-  .btn-secondary {
-    background: var(--bg-card); border: 1px solid var(--border); color: var(--text-secondary);
-  }
-  .btn-secondary:hover { border-color: var(--text-muted); color: var(--text-primary); }
-
-  /* ── Quick Stats ── */
-  .quick-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 24px; }
-  .stat-card {
-    background: var(--bg-card); border: 1px solid var(--border-subtle);
-    border-radius: 10px; padding: 16px 18px; transition: border-color 0.15s;
-  }
-  .stat-card:hover { border-color: var(--border); }
-  .stat-label {
-    font-family: 'Outfit', sans-serif; font-size: 0.6875rem;
-    text-transform: uppercase; letter-spacing: 0.05em;
-    color: var(--text-muted); margin-bottom: 6px;
-  }
-  .stat-value {
-    font-family: 'Plus Jakarta Sans', sans-serif;
-    font-size: 1.5rem; font-weight: 700; letter-spacing: -0.02em;
-  }
-  .stat-meta { font-size: 0.6875rem; color: var(--text-dimmed); margin-top: 4px; }
-  .stat-value.gradient {
-    background: linear-gradient(90deg, var(--gradient-from), var(--gradient-to));
-    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
-  }
-
-  /* ── Filters Bar ── */
-  .filters-bar {
-    display: flex; align-items: center; gap: 8px; margin-bottom: 20px; flex-wrap: wrap;
-  }
-  .main-filter-chip {
-    display: inline-flex; align-items: center; gap: 6px;
-    padding: 6px 12px; background: var(--bg-card); border: 1px solid var(--border);
-    border-radius: 6px; font-size: 0.75rem; color: var(--text-secondary);
-    cursor: pointer; transition: all 0.12s; font-family: 'Outfit', sans-serif;
-  }
-  .main-filter-chip:hover { border-color: var(--text-muted); color: var(--text-primary); }
-  .main-filter-chip.active {
-    background: rgba(129,140,248,0.1); border-color: rgba(129,140,248,0.3); color: var(--gradient-from);
-  }
-  .main-filter-chip svg { width: 14px; height: 14px; }
-  .filter-divider { width: 1px; height: 24px; background: var(--border); }
-
-  /* ── Section Groups ── */
-  .section-group { margin-bottom: 28px; }
-  .section-header {
-    display: flex; align-items: center; gap: 10px; margin-bottom: 12px;
-    padding-bottom: 10px; border-bottom: 1px solid var(--border-subtle);
-  }
-  .section-icon { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
-  .section-title {
-    font-family: 'Plus Jakarta Sans', sans-serif; font-size: 0.8125rem;
-    font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
-  }
-  .section-count {
-    font-family: 'Outfit', sans-serif; font-size: 0.6875rem; color: var(--text-muted);
-    background: var(--bg-surface); border-radius: 10px; padding: 1px 8px;
-  }
-
-  /* ── Tree / Flow Items ── */
-  .tree-list { display: flex; flex-direction: column; gap: 4px; }
-  .tree-list-header {
-    display: grid; grid-template-columns: 40px 1fr 130px 80px 100px 40px;
-    align-items: center; gap: 12px; padding: 0 16px 8px;
-    font-family: 'Outfit', sans-serif; font-size: 0.6875rem;
-    text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-dimmed);
-  }
-  .tree-item {
-    display: grid; grid-template-columns: 40px 1fr 130px 80px 100px 40px;
-    align-items: center; gap: 12px; padding: 12px 16px;
-    background: var(--bg-card); border: 1px solid transparent;
-    border-radius: 8px; cursor: pointer; transition: all 0.12s;
-  }
-  .tree-item:hover { border-color: var(--border); background: var(--bg-hover); }
-
-  .tree-icon-box {
-    width: 36px; height: 36px; border-radius: 8px;
-    display: flex; align-items: center; justify-content: center; font-size: 1rem;
-  }
-  .tree-info h3 {
-    font-family: 'Plus Jakarta Sans', sans-serif;
-    font-size: 0.875rem; font-weight: 600; margin-bottom: 3px;
-  }
-  .tree-meta {
-    display: flex; align-items: center; gap: 8px;
-    font-size: 0.6875rem; color: var(--text-muted);
-  }
-  .tree-meta .tag {
-    background: var(--bg-surface); border: 1px solid var(--border-subtle);
-    border-radius: 4px; padding: 1px 6px; font-family: 'Outfit', sans-serif;
-    font-size: 0.625rem; color: var(--text-muted);
-  }
-  .tree-category {
-    font-family: 'Outfit', sans-serif; font-size: 0.75rem; color: var(--text-secondary);
-    display: flex; align-items: center; gap: 6px;
-  }
-  .cat-indicator { width: 6px; height: 6px; border-radius: 50%; }
-  .tree-usage {
-    font-family: 'Outfit', sans-serif; font-size: 0.75rem; color: var(--text-muted); text-align: center;
-  }
-  .tree-updated { font-size: 0.6875rem; color: var(--text-dimmed); text-align: right; }
-  .tree-actions { display: flex; align-items: center; justify-content: center; }
-  .tree-actions button {
-    background: none; border: none; color: var(--text-muted); cursor: pointer;
-    padding: 4px; border-radius: 4px; display: flex; opacity: 0; transition: all 0.12s;
-  }
-  .tree-item:hover .tree-actions button { opacity: 1; }
-
-  /* ── Sessions Panel ── */
-  .sessions-panel {
-    background: var(--bg-card); border: 1px solid var(--border-subtle);
-    border-radius: 10px; overflow: hidden;
-  }
-  .sessions-panel-header {
-    display: flex; align-items: center; justify-content: space-between;
-    padding: 14px 18px; border-bottom: 1px solid var(--border-subtle);
-  }
-  .sessions-panel-header h2 {
-    font-family: 'Plus Jakarta Sans', sans-serif; font-size: 0.875rem; font-weight: 700;
-  }
-  .session-row {
-    display: grid; grid-template-columns: 8px 1fr 140px 80px 100px;
-    align-items: center; gap: 12px; padding: 11px 18px;
-    border-bottom: 1px solid var(--border-subtle); font-size: 0.8125rem;
-    transition: background 0.1s; cursor: pointer;
-  }
-  .session-row:last-child { border-bottom: none; }
-  .session-row:hover { background: var(--bg-hover); }
-  .session-status-dot { width: 8px; height: 8px; border-radius: 50%; }
-  .session-name { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
-  .session-tree { font-size: 0.6875rem; color: var(--text-muted); font-family: 'Outfit', sans-serif; }
-  .session-ticket { font-size: 0.6875rem; color: var(--text-muted); font-family: monospace; }
-  .session-time { font-size: 0.6875rem; color: var(--text-dimmed); text-align: right; }
-
-  .bg-success { background: var(--success); }
-  .bg-warning { background: var(--warning); }
-  .bg-gradient { background: linear-gradient(135deg, var(--gradient-from), var(--gradient-to)); }
-
-  /* ── Workspace color accents ── */
-  .ws-accent-troubleshooting { --ws-color: #ef4444; }
-  .ws-accent-procedures { --ws-color: #3b82f6; }
-  .ws-accent-policies { --ws-color: #8b5cf6; }
-  .ws-accent-finance { --ws-color: #22c55e; }
-
-  /* ── Content transition ── */
-  .main-content { transition: opacity 0.2s ease; }
-  .main-content.switching { opacity: 0; }
-
-  /* ── Toast notification ── */
-  .toast {
-    position: fixed; bottom: 60px; left: 50%; transform: translateX(-50%) translateY(20px);
-    background: var(--bg-card); border: 1px solid var(--gradient-from);
-    border-radius: 10px; padding: 12px 20px;
-    font-size: 0.8125rem; color: var(--text-primary);
-    display: flex; align-items: center; gap: 10px;
-    box-shadow: 0 8px 32px rgba(0,0,0,0.5);
-    opacity: 0; transition: all 0.3s ease; z-index: 1000;
-    pointer-events: none;
-  }
-  .toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
-  .toast-icon { font-size: 1rem; }
-  .toast-text strong { color: var(--gradient-from); }
-
-  .fade-in { animation: fadeIn 0.3s ease; }
-  @keyframes fadeIn { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:translateY(0); } }
-
-  .mockup-label {
-    position: fixed; bottom: 12px; right: 16px;
-    background: rgba(129,140,248,0.12); border: 1px solid rgba(129,140,248,0.25);
-    border-radius: 6px; padding: 4px 10px;
-    font-family: 'Outfit', sans-serif; font-size: 0.6875rem;
-    color: var(--gradient-from); z-index: 1000; backdrop-filter: blur(8px);
-  }
-
-  .mockup-hint {
-    position: fixed; bottom: 12px; left: 50%; transform: translateX(-50%);
-    background: rgba(129,140,248,0.12); border: 1px solid rgba(129,140,248,0.25);
-    border-radius: 8px; padding: 6px 14px;
-    font-family: 'Outfit', sans-serif; font-size: 0.75rem;
-    color: var(--gradient-from); z-index: 1000; backdrop-filter: blur(8px);
-    display: flex; align-items: center; gap: 8px;
-    animation: pulse 2s ease-in-out infinite;
-  }
-  @keyframes pulse {
-    0%, 100% { opacity: 0.8; }
-    50% { opacity: 1; }
-  }
-  .mockup-hint svg { width: 14px; height: 14px; }
-</style>
-</head>
-<body>
-
-<div class="app-shell">
-
-  <!-- ═══════════════ TOP BAR ═══════════════ -->
-  <header class="topbar">
-    <div class="topbar-logo">
-      <svg viewBox="0 0 80 80" fill="none">
-        <defs>
-          <linearGradient id="logo-g" x1="0%" y1="0%" x2="100%" y2="0%">
-            <stop offset="0%" stop-color="#818cf8"/>
-            <stop offset="100%" stop-color="#a78bfa"/>
-          </linearGradient>
-        </defs>
-        <circle cx="10" cy="14" r="5" fill="url(#logo-g)" opacity="0.25"/>
-        <circle cx="10" cy="30" r="5.5" fill="url(#logo-g)" opacity="0.4"/>
-        <circle cx="10" cy="50" r="5.5" fill="url(#logo-g)" opacity="0.4"/>
-        <circle cx="10" cy="66" r="5" fill="url(#logo-g)" opacity="0.25"/>
-        <path d="M15 14L28 34" stroke="url(#logo-g)" stroke-width="2" stroke-linecap="round" stroke-dasharray="2 3" opacity="0.35"/>
-        <path d="M15.5 30L28 38" stroke="url(#logo-g)" stroke-width="2" stroke-linecap="round" opacity="0.5"/>
-        <path d="M15.5 50L28 42" stroke="url(#logo-g)" stroke-width="2" stroke-linecap="round" opacity="0.5"/>
-        <path d="M15 66L28 46" stroke="url(#logo-g)" stroke-width="2" stroke-linecap="round" stroke-dasharray="2 3" opacity="0.35"/>
-        <circle cx="36" cy="40" r="10" fill="url(#logo-g)" opacity="0.12"/>
-        <circle cx="36" cy="40" r="7" fill="url(#logo-g)" opacity="0.9"/>
-        <path d="M43 40H70M70 40L60 30M70 40L60 50" stroke="url(#logo-g)" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
-      </svg>
-      <span class="topbar-brand"><span class="res">Resolution</span><span class="flow">Flow</span></span>
-    </div>
-    <div class="topbar-search">
-      <svg class="search-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.35-4.35"/></svg>
-      <input type="text" placeholder="Search trees, sessions, tags…" id="searchInput" />
-      <span class="search-shortcut">⌘K</span>
-    </div>
-    <div class="topbar-actions">
-      <button class="topbar-btn" title="Quick launch">
-        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/></svg>
-      </button>
-      <button class="topbar-btn" title="Notifications">
-        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.73 21a2 2 0 0 1-3.46 0"/></svg>
-        <span class="notification-badge"></span>
-      </button>
-      <div class="avatar-sm" title="Michael C.">MC</div>
-    </div>
-  </header>
-
-  <!-- ═══════════════ SIDEBAR ═══════════════ -->
-  <nav class="sidebar">
-
-    <!-- Workspace Switcher -->
-    <div class="workspace-switcher">
-      <div class="workspace-current" id="wsCurrent" onclick="toggleDropdown()">
-        <div class="workspace-icon" id="wsIcon" style="background: rgba(239,68,68,0.12);">
-          <span id="wsEmoji">🔧</span>
-        </div>
-        <div class="workspace-label">
-          <div class="ws-name" id="wsName">Troubleshooting</div>
-          <div class="ws-desc" id="wsDesc">Break/fix decision trees</div>
-        </div>
-        <div class="workspace-chevron">
-          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="6 9 12 15 18 9"/></svg>
-        </div>
-      </div>
-      <div class="workspace-dropdown" id="wsDropdown">
-        <div class="workspace-option active-ws" data-ws="troubleshooting" onclick="switchWorkspace('troubleshooting')">
-          <div class="ws-opt-icon" style="background: rgba(239,68,68,0.12);">🔧</div>
-          <span class="ws-opt-name">Troubleshooting</span>
-          <span class="ws-opt-count">42 trees</span>
-        </div>
-        <div class="workspace-option" data-ws="procedures" onclick="switchWorkspace('procedures')">
-          <div class="ws-opt-icon" style="background: rgba(59,130,246,0.12);">📋</div>
-          <span class="ws-opt-name">Procedures</span>
-          <span class="ws-opt-count">18 flows</span>
-        </div>
-        <div class="workspace-option" data-ws="policies" onclick="switchWorkspace('policies')">
-          <div class="ws-opt-icon" style="background: rgba(139,92,246,0.12);">📜</div>
-          <span class="ws-opt-name">Policies</span>
-          <span class="ws-opt-count">7 flows</span>
-        </div>
-        <div class="workspace-option" data-ws="finance" onclick="switchWorkspace('finance')">
-          <div class="ws-opt-icon" style="background: rgba(34,197,94,0.12);">💰</div>
-          <span class="ws-opt-name">Finance</span>
-          <span class="ws-opt-count">4 flows</span>
-        </div>
-        <div class="workspace-add">
-          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
-          Add workspace…
-        </div>
-      </div>
-    </div>
-
-    <!-- Main Nav -->
-    <div class="nav-section">
-      <a class="nav-item active" href="#">
-        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="7" height="7" rx="1"/><rect x="14" y="3" width="7" height="7" rx="1"/><rect x="3" y="14" width="7" height="7" rx="1"/><rect x="14" y="14" width="7" height="7" rx="1"/></svg>
-        Dashboard
-      </a>
-      <a class="nav-item" href="#" id="navAllFlows">
-        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"/></svg>
-        <span id="navAllLabel">All Trees</span>
-        <span class="badge" id="navAllCount">42</span>
-      </a>
-      <a class="nav-item" href="#">
-        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 20h9"/><path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z"/></svg>
-        <span id="navEditorLabel">Tree Editor</span>
-      </a>
-      <a class="nav-item" href="#">
-        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
-        Sessions
-        <span class="badge">3</span>
-      </a>
-      <a class="nav-item" href="#">
-        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/></svg>
-        Exports
-      </a>
-      <a class="nav-item" href="#">
-        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"/></svg>
-        Step Library
-      </a>
-    </div>
-
-    <div class="nav-divider"></div>
-
-    <!-- Dynamic Categories -->
-    <div class="sidebar-content" id="sidebarContent">
-      <div class="nav-section">
-        <div class="nav-section-label">Categories</div>
-        <div id="categoriesContainer"></div>
-      </div>
-
-      <div class="nav-divider"></div>
-
-      <div class="nav-section">
-        <div class="nav-section-label">Popular Tags</div>
-        <div class="tag-cloud" id="tagsContainer"></div>
-      </div>
-    </div>
-
-    <!-- Footer -->
-    <div class="sidebar-footer">
-      <a class="nav-item" href="#">
-        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/></svg>
-        Team
-      </a>
-      <a class="nav-item" href="#">
-        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"/></svg>
-        Settings
-      </a>
-    </div>
-  </nav>
-
-  <!-- ═══════════════ MAIN CONTENT ═══════════════ -->
-  <main class="main">
-    <div class="main-content" id="mainContent">
-
-      <div class="page-header fade-in">
-        <h1 id="pageTitle">Troubleshooting Dashboard</h1>
-        <div class="page-header-actions">
-          <button class="btn btn-secondary">
-            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="17 8 12 3 7 8"/><line x1="12" y1="3" x2="12" y2="15"/></svg>
-            Import
-          </button>
-          <button class="btn btn-primary" id="newBtn">
-            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
-            <span id="newBtnLabel">New Tree</span>
-          </button>
-        </div>
-      </div>
-
-      <!-- Stats -->
-      <div class="quick-stats fade-in" id="statsRow"></div>
-
-      <!-- Filters -->
-      <div class="filters-bar fade-in" id="filtersRow"></div>
-
-      <!-- Tree/Flow Items -->
-      <div class="section-group fade-in" id="mainSection"></div>
-
-      <!-- Recent Sessions -->
-      <div class="section-group fade-in" id="sessionsSection"></div>
-
-    </div>
-  </main>
-</div>
-
-<div class="toast" id="toast">
-  <span class="toast-icon" id="toastIcon"></span>
-  <span class="toast-text" id="toastText"></span>
-</div>
-
-<div class="mockup-hint">
-  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="6 9 12 15 18 9"/></svg>
-  Click the workspace switcher in the sidebar to see it adapt
-</div>
-
-<div class="mockup-label">ResolutionFlow — Adaptive Workspaces Mockup</div>
-
-<script>
-// ═══════════════════════════════════════════════════════
-// WORKSPACE DATA — each workspace defines its own context
-// ═══════════════════════════════════════════════════════
-const workspaces = {
-  troubleshooting: {
-    name: 'Troubleshooting',
-    desc: 'Break/fix decision trees',
-    emoji: '🔧',
-    color: '#ef4444',
-    bgColor: 'rgba(239,68,68,0.12)',
-    allLabel: 'All Trees',
-    allCount: '42',
-    editorLabel: 'Tree Editor',
-    newLabel: 'New Tree',
-    pageTitle: 'Troubleshooting Dashboard',
-    searchPlaceholder: 'Search trees, sessions, tags…',
-    categories: [
-      { name: 'Networking', color: '#3b82f6', count: 12 },
-      { name: 'Active Directory', color: '#22c55e', count: 8 },
-      { name: 'Email / Exchange', color: '#f59e0b', count: 6 },
-      { name: 'Server Issues', color: '#ef4444', count: 5 },
-      { name: 'Citrix / RDS', color: '#8b5cf6', count: 4 },
-      { name: 'VPN / Remote', color: '#06b6d4', count: 4 },
-      { name: 'Printers / Peripherals', color: '#ec4899', count: 3 },
-    ],
-    tags: ['tier-1', 'tier-2', 'tier-3', 'dns', 'o365', 'vpn', 'backup', 'critical'],
-    stats: [
-      { label: 'Active Trees', value: '42', meta: '+3 this week' },
-      { label: 'Sessions Today', value: '12', gradient: true, meta: '↑ 20% from yesterday' },
-      { label: 'Open Sessions', value: '3', color: '#f59e0b', meta: 'Awaiting completion' },
-      { label: 'Docs Generated', value: '847', meta: 'All time' },
-    ],
-    filters: ['All', 'Recently Used', 'My Trees', 'Team Trees', 'Defaults'],
-    sectionTitle: 'Frequently Used',
-    sectionCount: 5,
-    items: [
-      { icon: '🌐', iconBg: 'rgba(59,130,246,0.12)', iconColor: '#3b82f6', name: 'DNS Resolution Failure', tags: ['tier-1', 'dns'], steps: '12 steps · 4 solutions', cat: 'Networking', catColor: '#3b82f6', uses: 284, updated: '2 days ago' },
-      { icon: '🔒', iconBg: 'rgba(34,197,94,0.12)', iconColor: '#22c55e', name: 'Account Lockout Investigation', tags: ['tier-2', 'security'], steps: '18 steps · 6 solutions', cat: 'Active Directory', catColor: '#22c55e', uses: 216, updated: '1 week ago' },
-      { icon: '📧', iconBg: 'rgba(245,158,11,0.12)', iconColor: '#f59e0b', name: 'Mail Flow Troubleshooting', tags: ['tier-2', 'o365'], steps: '15 steps · 5 solutions', cat: 'Email / Exchange', catColor: '#f59e0b', uses: 189, updated: '3 days ago' },
-      { icon: '🔌', iconBg: 'rgba(6,182,212,0.12)', iconColor: '#06b6d4', name: 'VPN Connection Failure', tags: ['tier-1', 'vpn'], steps: '10 steps · 3 solutions', cat: 'VPN / Remote', catColor: '#06b6d4', uses: 172, updated: '5 days ago' },
-      { icon: '🖥️', iconBg: 'rgba(239,68,68,0.12)', iconColor: '#ef4444', name: 'Server Unresponsive', tags: ['tier-3', 'critical'], steps: '22 steps · 8 solutions', cat: 'Server Issues', catColor: '#ef4444', uses: 145, updated: '1 day ago' },
-    ],
-    sessions: [
-      { status: 'warning', name: 'DNS Resolution Failure', progress: '→ Checked DNS config · step 4/12', ticket: 'TKT-4821', time: '12 min ago' },
-      { status: 'warning', name: 'Account Lockout Investigation', progress: '→ Reviewing event logs · step 6/18', ticket: 'TKT-4819', time: '45 min ago' },
-      { status: 'success', name: 'Mail Flow Troubleshooting', progress: '✓ Resolved · MX record corrected', ticket: 'TKT-4815', time: 'Yesterday' },
-    ]
-  },
-
-  procedures: {
-    name: 'Procedures',
-    desc: 'Step-by-step operational flows',
-    emoji: '📋',
-    color: '#3b82f6',
-    bgColor: 'rgba(59,130,246,0.12)',
-    allLabel: 'All Procedures',
-    allCount: '18',
-    editorLabel: 'Flow Editor',
-    newLabel: 'New Procedure',
-    pageTitle: 'Procedures Dashboard',
-    searchPlaceholder: 'Search procedures, runbooks, checklists…',
-    categories: [
-      { name: 'Server Builds', color: '#3b82f6', count: 5 },
-      { name: 'Onboarding', color: '#22c55e', count: 4 },
-      { name: 'Offboarding', color: '#ef4444', count: 3 },
-      { name: 'Backup & DR', color: '#f59e0b', count: 3 },
-      { name: 'Patch Management', color: '#8b5cf6', count: 2 },
-      { name: 'Security Audit', color: '#06b6d4', count: 1 },
-    ],
-    tags: ['windows-server', 'hyper-v', 'new-hire', 'quarterly', 'azure', 'compliance', 'm365-setup'],
-    stats: [
-      { label: 'Active Procedures', value: '18', meta: '+2 this month' },
-      { label: 'Runs This Week', value: '8', gradient: true, meta: '↑ 33% from last week' },
-      { label: 'In Progress', value: '2', color: '#3b82f6', meta: 'Being executed' },
-      { label: 'Avg Completion', value: '94%', meta: 'Last 30 days' },
-    ],
-    filters: ['All', 'Recently Run', 'My Procedures', 'Team', 'Templates'],
-    sectionTitle: 'Most Used Procedures',
-    sectionCount: 4,
-    items: [
-      { icon: '🖥️', iconBg: 'rgba(59,130,246,0.12)', iconColor: '#3b82f6', name: 'Windows Server 2022 Build', tags: ['windows-server', 'hyper-v'], steps: '34 steps · 6 checkpoints', cat: 'Server Builds', catColor: '#3b82f6', uses: 89, updated: '1 week ago' },
-      { icon: '👤', iconBg: 'rgba(34,197,94,0.12)', iconColor: '#22c55e', name: 'New Employee Onboarding', tags: ['new-hire', 'm365-setup'], steps: '28 steps · 4 checkpoints', cat: 'Onboarding', catColor: '#22c55e', uses: 67, updated: '3 days ago' },
-      { icon: '🔄', iconBg: 'rgba(245,158,11,0.12)', iconColor: '#f59e0b', name: 'Monthly Backup Verification', tags: ['quarterly', 'compliance'], steps: '16 steps · 3 checkpoints', cat: 'Backup & DR', catColor: '#f59e0b', uses: 52, updated: '2 days ago' },
-      { icon: '🚪', iconBg: 'rgba(239,68,68,0.12)', iconColor: '#ef4444', name: 'Employee Offboarding', tags: ['compliance', 'security'], steps: '22 steps · 5 checkpoints', cat: 'Offboarding', catColor: '#ef4444', uses: 41, updated: '5 days ago' },
-    ],
-    sessions: [
-      { status: 'warning', name: 'Windows Server 2022 Build', progress: '→ Installing roles · step 12/34', ticket: 'PRJ-102', time: '30 min ago' },
-      { status: 'warning', name: 'New Employee Onboarding', progress: '→ M365 license assignment · step 8/28', ticket: 'HR-445', time: '2 hours ago' },
-      { status: 'success', name: 'Monthly Backup Verification', progress: '✓ Complete · All systems verified', ticket: 'OPS-891', time: 'Yesterday' },
-    ]
-  },
-
-  policies: {
-    name: 'Policies',
-    desc: 'Compliance & policy builders',
-    emoji: '📜',
-    color: '#8b5cf6',
-    bgColor: 'rgba(139,92,246,0.12)',
-    allLabel: 'All Policies',
-    allCount: '7',
-    editorLabel: 'Policy Editor',
-    newLabel: 'New Policy',
-    pageTitle: 'Policies Dashboard',
-    searchPlaceholder: 'Search policies, compliance, frameworks…',
-    categories: [
-      { name: 'Security Policies', color: '#ef4444', count: 3 },
-      { name: 'Acceptable Use', color: '#3b82f6', count: 2 },
-      { name: 'Data Governance', color: '#8b5cf6', count: 1 },
-      { name: 'Incident Response', color: '#f59e0b', count: 1 },
-    ],
-    tags: ['nist', 'hipaa', 'soc2', 'gdpr', 'internal', 'client-facing', 'annual-review'],
-    stats: [
-      { label: 'Active Policies', value: '7', meta: '+1 this quarter' },
-      { label: 'Pending Review', value: '2', gradient: true, meta: 'Due this month' },
-      { label: 'Compliance Score', value: '91%', color: '#22c55e', meta: 'Across frameworks' },
-      { label: 'Last Audit', value: '14d', meta: 'Days since last review' },
-    ],
-    filters: ['All', 'Needs Review', 'Active', 'Draft', 'Archived'],
-    sectionTitle: 'Policy Documents',
-    sectionCount: 4,
-    items: [
-      { icon: '🔐', iconBg: 'rgba(239,68,68,0.12)', iconColor: '#ef4444', name: 'Password & Authentication Policy', tags: ['nist', 'soc2'], steps: '12 sections · NIST aligned', cat: 'Security Policies', catColor: '#ef4444', uses: 34, updated: '2 weeks ago' },
-      { icon: '💻', iconBg: 'rgba(59,130,246,0.12)', iconColor: '#3b82f6', name: 'Acceptable Use Policy', tags: ['internal', 'client-facing'], steps: '8 sections · Template', cat: 'Acceptable Use', catColor: '#3b82f6', uses: 28, updated: '1 month ago' },
-      { icon: '🚨', iconBg: 'rgba(245,158,11,0.12)', iconColor: '#f59e0b', name: 'Incident Response Plan', tags: ['nist', 'compliance'], steps: '15 sections · Runbook', cat: 'Incident Response', catColor: '#f59e0b', uses: 19, updated: '3 weeks ago' },
-      { icon: '📊', iconBg: 'rgba(139,92,246,0.12)', iconColor: '#8b5cf6', name: 'Data Classification Standard', tags: ['gdpr', 'hipaa'], steps: '6 sections · Framework', cat: 'Data Governance', catColor: '#8b5cf6', uses: 12, updated: '1 month ago' },
-    ],
-    sessions: [
-      { status: 'warning', name: 'Password Policy Update', progress: '→ Review MFA requirements · section 4/12', ticket: 'POL-23', time: '1 day ago' },
-      { status: 'success', name: 'Acceptable Use Policy', progress: '✓ Approved · v2.1 published', ticket: 'POL-21', time: '2 weeks ago' },
-    ]
-  },
-
-  finance: {
-    name: 'Finance',
-    desc: 'Billing & procurement flows',
-    emoji: '💰',
-    color: '#22c55e',
-    bgColor: 'rgba(34,197,94,0.12)',
-    allLabel: 'All Finance Flows',
-    allCount: '4',
-    editorLabel: 'Flow Editor',
-    newLabel: 'New Flow',
-    pageTitle: 'Finance Dashboard',
-    searchPlaceholder: 'Search billing, procurement, approvals…',
-    categories: [
-      { name: 'License Management', color: '#3b82f6', count: 2 },
-      { name: 'Procurement', color: '#22c55e', count: 1 },
-      { name: 'Billing Reviews', color: '#f59e0b', count: 1 },
-    ],
-    tags: ['monthly', 'approval-required', 'vendor', 'license-audit', 'cost-savings'],
-    stats: [
-      { label: 'Active Flows', value: '4', meta: 'All operational' },
-      { label: 'Runs This Month', value: '6', gradient: true, meta: 'On schedule' },
-      { label: 'Cost Saved', value: '$4.2K', color: '#22c55e', meta: 'From license audits' },
-      { label: 'Pending Approvals', value: '1', meta: 'Awaiting sign-off' },
-    ],
-    filters: ['All', 'Pending Approval', 'Recurring', 'One-time'],
-    sectionTitle: 'Finance Flows',
-    sectionCount: 3,
-    items: [
-      { icon: '🔑', iconBg: 'rgba(59,130,246,0.12)', iconColor: '#3b82f6', name: 'M365 License Audit', tags: ['monthly', 'license-audit'], steps: '8 steps · 2 approvals', cat: 'License Management', catColor: '#3b82f6', uses: 24, updated: '1 week ago' },
-      { icon: '🛒', iconBg: 'rgba(34,197,94,0.12)', iconColor: '#22c55e', name: 'Hardware Procurement', tags: ['approval-required', 'vendor'], steps: '12 steps · 3 approvals', cat: 'Procurement', catColor: '#22c55e', uses: 18, updated: '2 weeks ago' },
-      { icon: '📄', iconBg: 'rgba(245,158,11,0.12)', iconColor: '#f59e0b', name: 'Quarterly Billing Review', tags: ['quarterly', 'cost-savings'], steps: '10 steps · Report', cat: 'Billing Reviews', catColor: '#f59e0b', uses: 12, updated: '1 month ago' },
-    ],
-    sessions: [
-      { status: 'warning', name: 'M365 License Audit', progress: '→ Reviewing unused licenses · step 5/8', ticket: 'FIN-67', time: '3 hours ago' },
-      { status: 'success', name: 'Hardware Procurement', progress: '✓ Approved · PO submitted', ticket: 'FIN-64', time: 'Yesterday' },
-    ]
-  }
-};
-
-// ═══════════════════════════════
-// RENDER FUNCTIONS
-// ═══════════════════════════════
-
-let currentWs = 'troubleshooting';
-let dropdownOpen = false;
-
-function toggleDropdown() {
-  dropdownOpen = !dropdownOpen;
-  const dd = document.getElementById('wsDropdown');
-  const cur = document.getElementById('wsCurrent');
-  if (dropdownOpen) {
-    dd.classList.add('show');
-    cur.classList.add('open');
-  } else {
-    dd.classList.remove('show');
-    cur.classList.remove('open');
-  }
-}
-
-function switchWorkspace(wsKey) {
-  if (wsKey === currentWs) { toggleDropdown(); return; }
-
-  const ws = workspaces[wsKey];
-  currentWs = wsKey;
-
-  // Close dropdown
-  dropdownOpen = false;
-  document.getElementById('wsDropdown').classList.remove('show');
-  document.getElementById('wsCurrent').classList.remove('open');
-
-  // Update dropdown active states
-  document.querySelectorAll('.workspace-option').forEach(el => {
-    el.classList.toggle('active-ws', el.dataset.ws === wsKey);
-  });
-
-  // Animate out
-  document.getElementById('sidebarContent').classList.add('switching');
-  document.getElementById('mainContent').classList.add('switching');
-
-  setTimeout(() => {
-    // Update workspace switcher
-    document.getElementById('wsIcon').style.background = ws.bgColor;
-    document.getElementById('wsEmoji').textContent = ws.emoji;
-    document.getElementById('wsName').textContent = ws.name;
-    document.getElementById('wsDesc').textContent = ws.desc;
-
-    // Update nav
-    document.getElementById('navAllLabel').textContent = ws.allLabel;
-    document.getElementById('navAllCount').textContent = ws.allCount;
-    document.getElementById('navEditorLabel').textContent = ws.editorLabel;
-    document.getElementById('searchInput').placeholder = ws.searchPlaceholder;
-
-    // Update main content
-    document.getElementById('pageTitle').textContent = ws.pageTitle;
-    document.getElementById('newBtnLabel').textContent = ws.newLabel;
-
-    // Render categories
-    renderCategories(ws.categories);
-    renderTags(ws.tags);
-    renderStats(ws.stats);
-    renderFilters(ws.filters);
-    renderItems(ws);
-    renderSessions(ws.sessions);
-
-    // Animate in
-    document.getElementById('sidebarContent').classList.remove('switching');
-    document.getElementById('mainContent').classList.remove('switching');
-
-    // Show toast
-    showToast(ws.emoji, `Switched to <strong>${ws.name}</strong>`);
-  }, 200);
-}
-
-function renderCategories(cats) {
-  document.getElementById('categoriesContainer').innerHTML = cats.map(c => `
-    <div class="category-tag">
-      <span class="cat-dot" style="background: ${c.color};"></span>
-      ${c.name}
-      <span class="cat-count">${c.count}</span>
-    </div>
-  `).join('');
-}
-
-function renderTags(tags) {
-  document.getElementById('tagsContainer').innerHTML = tags.map(t => `
-    <span class="filter-chip">${t}</span>
-  `).join('');
-}
-
-function renderStats(stats) {
-  document.getElementById('statsRow').innerHTML = stats.map(s => `
-    <div class="stat-card">
-      <div class="stat-label">${s.label}</div>
-      <div class="stat-value${s.gradient ? ' gradient' : ''}" ${s.color ? `style="color:${s.color}"` : ''}>${s.value}</div>
-      <div class="stat-meta">${s.meta}</div>
-    </div>
-  `).join('');
-}
-
-function renderFilters(filters) {
-  document.getElementById('filtersRow').innerHTML = filters.map((f, i) => `
-    <span class="main-filter-chip${i === 0 ? ' active' : ''}">${f}</span>
-  `).join('') + `
-    <div class="filter-divider"></div>
-    <span class="main-filter-chip">
-      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="width:14px;height:14px;"><polygon points="22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3"/></svg>
-      More Filters
-    </span>
-  `;
-}
-
-function renderItems(ws) {
-  const dots = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="1"/><circle cx="19" cy="12" r="1"/><circle cx="5" cy="12" r="1"/></svg>';
-
-  const header = `
-    <div class="section-header">
-      <span class="section-icon bg-gradient"></span>
-      <span class="section-title">${ws.sectionTitle}</span>
-      <span class="section-count">${ws.sectionCount || ws.items.length}</span>
-    </div>
-    <div class="tree-list-header">
-      <span></span><span>Name</span><span>Category</span><span style="text-align:center;">Uses</span><span style="text-align:right;">Updated</span><span></span>
-    </div>
-  `;
-
-  const items = ws.items.map(item => `
-    <div class="tree-item">
-      <div class="tree-icon-box" style="background:${item.iconBg};"><span style="color:${item.iconColor};">${item.icon}</span></div>
-      <div class="tree-info">
-        <h3>${item.name}</h3>
-        <div class="tree-meta">
-          ${item.tags.map(t => `<span class="tag">${t}</span>`).join('')}
-          <span>${item.steps}</span>
-        </div>
-      </div>
-      <div class="tree-category"><span class="cat-indicator" style="background:${item.catColor};"></span> ${item.cat}</div>
-      <div class="tree-usage">${item.uses}</div>
-      <div class="tree-updated">${item.updated}</div>
-      <div class="tree-actions"><button>${dots}</button></div>
-    </div>
-  `).join('');
-
-  document.getElementById('mainSection').innerHTML = header + `<div class="tree-list">${items}</div>`;
-}
-
-function renderSessions(sessions) {
-  const rows = sessions.map(s => `
-    <div class="session-row">
-      <span class="session-status-dot bg-${s.status}"></span>
-      <span class="session-name">${s.name}</span>
-      <span class="session-tree">${s.progress}</span>
-      <span class="session-ticket">${s.ticket}</span>
-      <span class="session-time">${s.time}</span>
-    </div>
-  `).join('');
-
-  document.getElementById('sessionsSection').innerHTML = `
-    <div class="sessions-panel">
-      <div class="sessions-panel-header">
-        <h2>Recent Sessions</h2>
-        <button class="btn btn-secondary" style="padding:5px 12px; font-size:0.75rem;">View All</button>
-      </div>
-      ${rows}
-    </div>
-  `;
-}
-
-function showToast(icon, html) {
-  const toast = document.getElementById('toast');
-  document.getElementById('toastIcon').textContent = icon;
-  document.getElementById('toastText').innerHTML = html;
-  toast.classList.add('show');
-  setTimeout(() => toast.classList.remove('show'), 2000);
-}
-
-// ═══════════════════════════════
-// INIT
-// ═══════════════════════════════
-document.addEventListener('DOMContentLoaded', () => {
-  const ws = workspaces[currentWs];
-  renderCategories(ws.categories);
-  renderTags(ws.tags);
-  renderStats(ws.stats);
-  renderFilters(ws.filters);
-  renderItems(ws);
-  renderSessions(ws.sessions);
-});
-
-// Close dropdown on outside click
-document.addEventListener('click', (e) => {
-  if (dropdownOpen && !e.target.closest('.workspace-switcher')) {
-    toggleDropdown();
-  }
-});
-</script>
-
-</body>
-</html>
diff --git a/frontend/src/api/index.ts b/frontend/src/api/index.ts
index 5fabfc6d..21daddd1 100644
--- a/frontend/src/api/index.ts
+++ b/frontend/src/api/index.ts
@@ -11,3 +11,4 @@ export { default as stepCategoriesApi } from './stepCategories'
 export { default as accountsApi } from './accounts'
 export { default as adminApi } from './admin'
 export { treeMarkdownApi } from './treeMarkdown'
+export { default as pinnedFlowsApi } from './pinnedFlows'
diff --git a/frontend/src/api/pinnedFlows.ts b/frontend/src/api/pinnedFlows.ts
new file mode 100644
index 00000000..41b3754a
--- /dev/null
+++ b/frontend/src/api/pinnedFlows.ts
@@ -0,0 +1,40 @@
+import { apiClient } from './client'
+
+export interface PinnedFlow {
+  id: string
+  tree_id: string
+  tree_name: string
+  tree_type: 'troubleshooting' | 'procedural'
+  category_emoji?: string
+  category_name?: string
+  pinned_at: string
+  display_order: number
+}
+
+export interface PinnedFlowsResponse {
+  items: PinnedFlow[]
+  count: number
+}
+
+export const pinnedFlowsApi = {
+  list: async (): Promise<PinnedFlowsResponse> => {
+    const { data } = await apiClient.get('/trees/pinned')
+    return data
+  },
+
+  pin: async (treeId: string): Promise<PinnedFlow> => {
+    const { data } = await apiClient.post(`/trees/${treeId}/pin`)
+    return data
+  },
+
+  unpin: async (treeId: string): Promise<void> => {
+    await apiClient.delete(`/trees/${treeId}/pin`)
+  },
+
+  reorder: async (order: { tree_id: string; display_order: number }[]): Promise<PinnedFlowsResponse> => {
+    const { data } = await apiClient.patch('/trees/pinned/reorder', { order })
+    return data
+  },
+}
+
+export default pinnedFlowsApi
diff --git a/frontend/src/components/admin/ActionMenu.tsx b/frontend/src/components/admin/ActionMenu.tsx
index a259dd24..6cabd654 100644
--- a/frontend/src/components/admin/ActionMenu.tsx
+++ b/frontend/src/components/admin/ActionMenu.tsx
@@ -53,8 +53,8 @@ export function ActionMenu({ items }: ActionMenuProps) {
         ref={buttonRef}
         onClick={() => setOpen(!open)}
         className={cn(
-          'rounded-md p-1.5 text-white/50 transition-colors',
-          'hover:bg-white/10 hover:text-white'
+          'rounded-md p-1.5 text-muted-foreground transition-colors',
+          'hover:bg-accent hover:text-foreground'
         )}
       >
         <MoreHorizontal className="h-4 w-4" />
@@ -63,8 +63,8 @@ export function ActionMenu({ items }: ActionMenuProps) {
         <div
           ref={menuRef}
           className={cn(
-            'fixed z-50 min-w-[160px] rounded-md border border-white/10',
-            'bg-black py-1 shadow-lg animate-scale-in'
+            'fixed z-50 min-w-[160px] rounded-md border border-border',
+            'bg-card py-1 shadow-lg animate-scale-in'
           )}
           style={{
             top: `${menuPosition.top}px`,
@@ -81,7 +81,7 @@ export function ActionMenu({ items }: ActionMenuProps) {
                 'disabled:opacity-50 disabled:pointer-events-none',
                 item.destructive
                   ? 'text-red-400 hover:bg-red-400/10'
-                  : 'text-white/70 hover:bg-white/[0.06]'
+                  : 'text-muted-foreground hover:bg-accent'
               )}
             >
               {item.icon}
diff --git a/frontend/src/components/admin/AdminLayout.tsx b/frontend/src/components/admin/AdminLayout.tsx
index 9677d7ff..c697fe50 100644
--- a/frontend/src/components/admin/AdminLayout.tsx
+++ b/frontend/src/components/admin/AdminLayout.tsx
@@ -34,9 +34,9 @@ export function AdminLayout() {
   }, [mobileOpen, handleKeyDown])
 
   return (
-    <div className="flex h-[calc(100vh-4rem)]">
+    <div className="flex h-full">
       {/* Desktop sidebar */}
-      <div className="hidden w-60 flex-shrink-0 border-r border-white/[0.06] bg-black md:block">
+      <div className="hidden w-60 flex-shrink-0 border-r border-border bg-card md:block">
         <AdminSidebar />
       </div>
 
@@ -44,14 +44,14 @@ export function AdminLayout() {
       {mobileOpen && (
         <div className="fixed inset-0 z-40 md:hidden">
           <div
-            className="absolute inset-0 bg-black/80 backdrop-blur-sm"
+            className="absolute inset-0 bg-card/80 backdrop-blur-sm"
             onClick={() => setMobileOpen(false)}
           />
-          <div className="absolute inset-y-0 left-0 w-60 border-r border-white/[0.06] bg-black shadow-xl">
+          <div className="absolute inset-y-0 left-0 w-60 border-r border-border bg-card shadow-xl">
             <div className="flex h-12 items-center justify-end px-3">
               <button
                 onClick={() => setMobileOpen(false)}
-                className="rounded-md p-1.5 text-white/50 hover:bg-white/[0.06]"
+                className="rounded-md p-1.5 text-muted-foreground hover:bg-accent"
               >
                 <X className="h-4 w-4" />
               </button>
@@ -67,7 +67,7 @@ export function AdminLayout() {
           {/* Mobile menu button */}
           <button
             onClick={() => setMobileOpen(true)}
-            className="mb-4 rounded-md p-2 text-white/50 hover:bg-white/[0.06] md:hidden"
+            className="mb-4 rounded-md p-2 text-muted-foreground hover:bg-accent md:hidden"
           >
             <Menu className="h-5 w-5" />
           </button>
diff --git a/frontend/src/components/admin/AdminSidebar.tsx b/frontend/src/components/admin/AdminSidebar.tsx
index 0e7f9cac..1dc13723 100644
--- a/frontend/src/components/admin/AdminSidebar.tsx
+++ b/frontend/src/components/admin/AdminSidebar.tsx
@@ -39,7 +39,7 @@ export function AdminSidebar({ className, onNavigate }: AdminSidebarProps) {
   return (
     <aside className={cn('flex h-full flex-col', className)}>
       <div className="p-4">
-        <h2 className="text-lg font-bold text-white">Admin Panel</h2>
+        <h2 className="text-lg font-bold text-foreground">Admin Panel</h2>
       </div>
       <nav className="flex-1 space-y-1 px-3">
         {navItems.map((item) => (
@@ -50,8 +50,8 @@ export function AdminSidebar({ className, onNavigate }: AdminSidebarProps) {
             className={cn(
               'flex items-center gap-3 rounded-md px-3 py-2 text-sm font-medium transition-colors',
               isActive(item.path, item.end)
-                ? 'bg-white/10 text-white'
-                : 'text-white/50 hover:bg-white/[0.06] hover:text-white'
+                ? 'bg-accent text-foreground'
+                : 'text-muted-foreground hover:bg-accent hover:text-foreground'
             )}
           >
             <item.icon className="h-4 w-4" />
@@ -59,13 +59,13 @@ export function AdminSidebar({ className, onNavigate }: AdminSidebarProps) {
           </Link>
         ))}
       </nav>
-      <div className="border-t border-white/[0.06] p-3">
+      <div className="border-t border-border p-3">
         <Link
           to="/trees"
           onClick={onNavigate}
           className={cn(
             'flex items-center gap-3 rounded-md px-3 py-2 text-sm font-medium',
-            'text-white/50 hover:bg-white/[0.06] hover:text-white'
+            'text-muted-foreground hover:bg-accent hover:text-foreground'
           )}
         >
           <ArrowLeft className="h-4 w-4" />
diff --git a/frontend/src/components/admin/CategoryRow.tsx b/frontend/src/components/admin/CategoryRow.tsx
index 1bbec924..61384b93 100644
--- a/frontend/src/components/admin/CategoryRow.tsx
+++ b/frontend/src/components/admin/CategoryRow.tsx
@@ -38,7 +38,7 @@ export function CategoryRow({
       ref={setNodeRef}
       style={style}
       className={cn(
-        'flex items-center gap-3 glass-card rounded-2xl p-4',
+        'flex items-center gap-3 bg-card border border-border rounded-xl p-4',
         isDragging && 'opacity-50'
       )}
     >
@@ -47,7 +47,7 @@ export function CategoryRow({
         type="button"
         {...attributes}
         {...listeners}
-        className="cursor-grab touch-none text-white/50 hover:text-white active:cursor-grabbing"
+        className="cursor-grab touch-none text-muted-foreground hover:text-foreground active:cursor-grabbing"
         aria-label="Drag to reorder"
       >
         <GripVertical className="h-5 w-5" />
@@ -56,17 +56,17 @@ export function CategoryRow({
       {/* Category Info */}
       <div className="flex-1">
         <div className="flex items-center gap-2">
-          <h3 className="font-medium text-white">{category.name}</h3>
+          <h3 className="font-medium text-foreground">{category.name}</h3>
           {!category.is_active && (
-            <span className="rounded-full bg-white/10 px-2 py-0.5 text-xs font-medium text-white/70">
+            <span className="rounded-full bg-accent px-2 py-0.5 text-xs font-medium text-muted-foreground">
               Archived
             </span>
           )}
         </div>
         {category.description && (
-          <p className="mt-1 text-sm text-white/40">{category.description}</p>
+          <p className="mt-1 text-sm text-muted-foreground">{category.description}</p>
         )}
-        <p className="mt-1 text-xs text-white/40">
+        <p className="mt-1 text-xs text-muted-foreground">
           {stepCount} step{stepCount !== 1 ? 's' : ''}
         </p>
       </div>
@@ -77,8 +77,8 @@ export function CategoryRow({
           type="button"
           onClick={() => onEdit(category)}
           className={cn(
-            'rounded-md border border-white/10 bg-black/50 p-2 text-white/50',
-            'hover:bg-white/10 hover:text-white'
+            'rounded-md border border-border bg-card p-2 text-muted-foreground',
+            'hover:bg-accent hover:text-foreground'
           )}
           title="Edit category"
           aria-label="Edit category"
diff --git a/frontend/src/components/admin/CreateCategoryModal.tsx b/frontend/src/components/admin/CreateCategoryModal.tsx
index c87b665f..991d7882 100644
--- a/frontend/src/components/admin/CreateCategoryModal.tsx
+++ b/frontend/src/components/admin/CreateCategoryModal.tsx
@@ -59,14 +59,14 @@ export function CreateCategoryModal({
 
   return (
     <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/80 backdrop-blur-sm">
-      <div className="w-full max-w-md glass-card rounded-2xl p-6 shadow-lg">
+      <div className="w-full max-w-md bg-card border border-border rounded-xl p-6 shadow-lg">
         {/* Header */}
         <div className="mb-4 flex items-center justify-between">
-          <h2 className="text-lg font-semibold text-white">Create Category</h2>
+          <h2 className="text-lg font-semibold text-foreground">Create Category</h2>
           <button
             onClick={handleClose}
             disabled={isSaving}
-            className="rounded-full p-1 text-white/50 hover:bg-white/10 hover:text-white disabled:opacity-50"
+            className="rounded-full p-1 text-muted-foreground hover:bg-accent hover:text-foreground disabled:opacity-50"
           >
             <X className="h-5 w-5" />
           </button>
@@ -83,7 +83,7 @@ export function CreateCategoryModal({
 
           {/* Name Field */}
           <div>
-            <label htmlFor="name" className="mb-1 block text-sm font-medium text-white">
+            <label htmlFor="name" className="mb-1 block text-sm font-medium text-foreground">
               Category Name <span className="text-red-400">*</span>
             </label>
             <input
@@ -96,21 +96,21 @@ export function CreateCategoryModal({
               placeholder="e.g., Network Troubleshooting"
               required
               className={cn(
-                'w-full rounded-md border border-white/10 bg-black/50 px-3 py-2 text-sm text-white',
-                'placeholder:text-white/40',
-                'focus:border-white/30 focus:outline-none focus:ring-1 focus:ring-white/20',
+                'w-full rounded-md border border-border bg-card px-3 py-2 text-sm text-foreground',
+                'placeholder:text-muted-foreground',
+                'focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/20',
                 'disabled:opacity-50'
               )}
             />
-            <p className="mt-1 text-xs text-white/40">
+            <p className="mt-1 text-xs text-muted-foreground">
               {name.length}/100 characters
             </p>
           </div>
 
           {/* Description Field */}
           <div>
-            <label htmlFor="description" className="mb-1 block text-sm font-medium text-white">
-              Description <span className="text-white/40">(optional)</span>
+            <label htmlFor="description" className="mb-1 block text-sm font-medium text-foreground">
+              Description <span className="text-muted-foreground">(optional)</span>
             </label>
             <textarea
               id="description"
@@ -120,9 +120,9 @@ export function CreateCategoryModal({
               rows={3}
               placeholder="Brief description of this category..."
               className={cn(
-                'w-full rounded-md border border-white/10 bg-black/50 px-3 py-2 text-sm text-white',
-                'placeholder:text-white/40',
-                'focus:border-white/30 focus:outline-none focus:ring-1 focus:ring-white/20',
+                'w-full rounded-md border border-border bg-card px-3 py-2 text-sm text-foreground',
+                'placeholder:text-muted-foreground',
+                'focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/20',
                 'disabled:opacity-50'
               )}
             />
@@ -135,8 +135,8 @@ export function CreateCategoryModal({
               onClick={handleClose}
               disabled={isSaving}
               className={cn(
-                'rounded-md border border-white/10 px-4 py-2 text-sm font-medium text-white/60',
-                'hover:bg-white/10 hover:text-white disabled:opacity-50'
+                'rounded-md border border-border px-4 py-2 text-sm font-medium text-muted-foreground',
+                'hover:bg-accent hover:text-foreground disabled:opacity-50'
               )}
             >
               Cancel
@@ -145,8 +145,8 @@ export function CreateCategoryModal({
               type="submit"
               disabled={isSaving || !name.trim()}
               className={cn(
-                'rounded-md bg-white px-4 py-2 text-sm font-medium text-black',
-                'hover:bg-white/90 disabled:opacity-50'
+                'rounded-md bg-gradient-brand text-white shadow-lg shadow-primary/20 px-4 py-2 text-sm font-medium',
+                'hover:opacity-90 disabled:opacity-50'
               )}
             >
               {isSaving ? 'Creating...' : 'Create Category'}
diff --git a/frontend/src/components/admin/DataTable.tsx b/frontend/src/components/admin/DataTable.tsx
index 128b77b4..7dc528ee 100644
--- a/frontend/src/components/admin/DataTable.tsx
+++ b/frontend/src/components/admin/DataTable.tsx
@@ -50,16 +50,16 @@ export function DataTable<T>({
   }
 
   return (
-    <div className="overflow-x-auto rounded-lg border border-white/[0.06]">
+    <div className="overflow-x-auto rounded-lg border border-border">
       <table className="w-full text-sm">
         <thead>
-          <tr className="border-b border-white/[0.06] bg-white/[0.02]">
+          <tr className="border-b border-border bg-accent">
             {columns.map((col) => (
               <th
                 key={col.key}
                 className={cn(
-                  'px-4 py-3 text-left text-xs font-medium uppercase tracking-wider text-white/50',
-                  col.sortable && 'cursor-pointer select-none hover:text-white',
+                  'px-4 py-3 text-left text-xs font-medium uppercase tracking-wider text-muted-foreground',
+                  col.sortable && 'cursor-pointer select-none hover:text-foreground',
                   col.className
                 )}
                 onClick={col.sortable ? () => handleSort(col.key) : undefined}
@@ -87,10 +87,10 @@ export function DataTable<T>({
         <tbody>
           {isLoading ? (
             Array.from({ length: skeletonRows }).map((_, i) => (
-              <tr key={i} className="border-b border-white/[0.06] last:border-0">
+              <tr key={i} className="border-b border-border last:border-0">
                 {columns.map((col) => (
                   <td key={col.key} className="px-4 py-3">
-                    <div className="h-4 w-3/4 animate-pulse rounded bg-white/10" />
+                    <div className="h-4 w-3/4 animate-pulse rounded bg-accent" />
                   </td>
                 ))}
               </tr>
@@ -99,7 +99,7 @@ export function DataTable<T>({
             <tr>
               <td colSpan={columns.length} className="px-4 py-12 text-center">
                 {emptyState || (
-                  <span className="text-white/40">No data found</span>
+                  <span className="text-muted-foreground">No data found</span>
                 )}
               </td>
             </tr>
@@ -107,7 +107,7 @@ export function DataTable<T>({
             data.map((item) => (
               <tr
                 key={keyExtractor(item)}
-                className="border-b border-white/[0.06] last:border-0 hover:bg-white/[0.04] transition-colors"
+                className="border-b border-border last:border-0 hover:bg-accent transition-colors"
               >
                 {columns.map((col) => (
                   <td key={col.key} className={cn('px-4 py-3', col.className)}>
diff --git a/frontend/src/components/admin/EditCategoryModal.tsx b/frontend/src/components/admin/EditCategoryModal.tsx
index 9f51d93e..83f002ef 100644
--- a/frontend/src/components/admin/EditCategoryModal.tsx
+++ b/frontend/src/components/admin/EditCategoryModal.tsx
@@ -68,14 +68,14 @@ export function EditCategoryModal({
 
   return (
     <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/80 backdrop-blur-sm">
-      <div className="w-full max-w-md glass-card rounded-2xl p-6 shadow-lg">
+      <div className="w-full max-w-md bg-card border border-border rounded-xl p-6 shadow-lg">
         {/* Header */}
         <div className="mb-4 flex items-center justify-between">
-          <h2 className="text-lg font-semibold text-white">Edit Category</h2>
+          <h2 className="text-lg font-semibold text-foreground">Edit Category</h2>
           <button
             onClick={handleClose}
             disabled={isSaving}
-            className="rounded-full p-1 text-white/50 hover:bg-white/10 hover:text-white disabled:opacity-50"
+            className="rounded-full p-1 text-muted-foreground hover:bg-accent hover:text-foreground disabled:opacity-50"
           >
             <X className="h-5 w-5" />
           </button>
@@ -92,7 +92,7 @@ export function EditCategoryModal({
 
           {/* Name Field */}
           <div>
-            <label htmlFor="edit-name" className="mb-1 block text-sm font-medium text-white">
+            <label htmlFor="edit-name" className="mb-1 block text-sm font-medium text-foreground">
               Category Name <span className="text-red-400">*</span>
             </label>
             <input
@@ -105,21 +105,21 @@ export function EditCategoryModal({
               placeholder="e.g., Network Troubleshooting"
               required
               className={cn(
-                'w-full rounded-md border border-white/10 bg-black/50 px-3 py-2 text-sm text-white',
-                'placeholder:text-white/40',
-                'focus:border-white/30 focus:outline-none focus:ring-1 focus:ring-white/20',
+                'w-full rounded-md border border-border bg-card px-3 py-2 text-sm text-foreground',
+                'placeholder:text-muted-foreground',
+                'focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/20',
                 'disabled:opacity-50'
               )}
             />
-            <p className="mt-1 text-xs text-white/40">
+            <p className="mt-1 text-xs text-muted-foreground">
               {name.length}/100 characters
             </p>
           </div>
 
           {/* Description Field */}
           <div>
-            <label htmlFor="edit-description" className="mb-1 block text-sm font-medium text-white">
-              Description <span className="text-white/40">(optional)</span>
+            <label htmlFor="edit-description" className="mb-1 block text-sm font-medium text-foreground">
+              Description <span className="text-muted-foreground">(optional)</span>
             </label>
             <textarea
               id="edit-description"
@@ -129,9 +129,9 @@ export function EditCategoryModal({
               rows={3}
               placeholder="Brief description of this category..."
               className={cn(
-                'w-full rounded-md border border-white/10 bg-black/50 px-3 py-2 text-sm text-white',
-                'placeholder:text-white/40',
-                'focus:border-white/30 focus:outline-none focus:ring-1 focus:ring-white/20',
+                'w-full rounded-md border border-border bg-card px-3 py-2 text-sm text-foreground',
+                'placeholder:text-muted-foreground',
+                'focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/20',
                 'disabled:opacity-50'
               )}
             />
@@ -144,8 +144,8 @@ export function EditCategoryModal({
               onClick={handleClose}
               disabled={isSaving}
               className={cn(
-                'rounded-md border border-white/10 px-4 py-2 text-sm font-medium text-white/60',
-                'hover:bg-white/10 hover:text-white disabled:opacity-50'
+                'rounded-md border border-border px-4 py-2 text-sm font-medium text-muted-foreground',
+                'hover:bg-accent hover:text-foreground disabled:opacity-50'
               )}
             >
               Cancel
@@ -154,8 +154,8 @@ export function EditCategoryModal({
               type="submit"
               disabled={isSaving || !name.trim()}
               className={cn(
-                'rounded-md bg-white px-4 py-2 text-sm font-medium text-black',
-                'hover:bg-white/90 disabled:opacity-50'
+                'rounded-md bg-gradient-brand text-white shadow-lg shadow-primary/20 px-4 py-2 text-sm font-medium',
+                'hover:opacity-90 disabled:opacity-50'
               )}
             >
               {isSaving ? 'Saving...' : 'Save Changes'}
diff --git a/frontend/src/components/admin/EmptyState.tsx b/frontend/src/components/admin/EmptyState.tsx
index 70e21054..22e4a266 100644
--- a/frontend/src/components/admin/EmptyState.tsx
+++ b/frontend/src/components/admin/EmptyState.tsx
@@ -12,10 +12,10 @@ interface EmptyStateProps {
 export function EmptyState({ icon, title, description, action, className }: EmptyStateProps) {
   return (
     <div className={cn('flex flex-col items-center justify-center py-12 text-center', className)}>
-      {icon && <div className="mb-4 text-white/50">{icon}</div>}
-      <h3 className="text-lg font-semibold text-white">{title}</h3>
+      {icon && <div className="mb-4 text-muted-foreground">{icon}</div>}
+      <h3 className="text-lg font-semibold text-foreground">{title}</h3>
       {description && (
-        <p className="mt-1 max-w-sm text-sm text-white/40">{description}</p>
+        <p className="mt-1 max-w-sm text-sm text-muted-foreground">{description}</p>
       )}
       {action && <div className="mt-4">{action}</div>}
     </div>
diff --git a/frontend/src/components/admin/Pagination.tsx b/frontend/src/components/admin/Pagination.tsx
index 2f70187c..e8d5cbcd 100644
--- a/frontend/src/components/admin/Pagination.tsx
+++ b/frontend/src/components/admin/Pagination.tsx
@@ -36,20 +36,20 @@ export function Pagination({ page, totalPages, total, pageSize, onPageChange }:
 
   return (
     <div className="flex items-center justify-between gap-4 pt-4">
-      <span className="text-sm text-white/40">
+      <span className="text-sm text-muted-foreground">
         Showing {start}-{end} of {total}
       </span>
       <div className="flex items-center gap-1">
         <button
           onClick={() => onPageChange(page - 1)}
           disabled={page <= 1}
-          className={cn(btnBase, 'px-2 text-white/50 hover:bg-white/[0.06] hover:text-white')}
+          className={cn(btnBase, 'px-2 text-muted-foreground hover:bg-accent hover:text-foreground')}
         >
           <ChevronLeft className="h-4 w-4" />
         </button>
         {getPageNumbers().map((p, i) =>
           p === 'ellipsis' ? (
-            <span key={`e${i}`} className="px-1 text-white/40">...</span>
+            <span key={`e${i}`} className="px-1 text-muted-foreground">...</span>
           ) : (
             <button
               key={p}
@@ -58,8 +58,8 @@ export function Pagination({ page, totalPages, total, pageSize, onPageChange }:
                 btnBase,
                 'px-2',
                 p === page
-                  ? 'bg-white text-black'
-                  : 'text-white/50 hover:bg-white/[0.06] hover:text-white'
+                  ? 'bg-gradient-brand text-white shadow-lg shadow-primary/20'
+                  : 'text-muted-foreground hover:bg-accent hover:text-foreground'
               )}
             >
               {p}
@@ -69,7 +69,7 @@ export function Pagination({ page, totalPages, total, pageSize, onPageChange }:
         <button
           onClick={() => onPageChange(page + 1)}
           disabled={page >= totalPages}
-          className={cn(btnBase, 'px-2 text-white/50 hover:bg-white/[0.06] hover:text-white')}
+          className={cn(btnBase, 'px-2 text-muted-foreground hover:bg-accent hover:text-foreground')}
         >
           <ChevronRight className="h-4 w-4" />
         </button>
diff --git a/frontend/src/components/admin/SearchInput.tsx b/frontend/src/components/admin/SearchInput.tsx
index 6db6fddb..c1726873 100644
--- a/frontend/src/components/admin/SearchInput.tsx
+++ b/frontend/src/components/admin/SearchInput.tsx
@@ -40,21 +40,21 @@ export function SearchInput({ value = '', onSearch, placeholder = 'Search...', c
 
   return (
     <div className={cn('relative', className)}>
-      <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-white/50" />
+      <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
       <input
         type="text"
         value={localValue}
         onChange={handleChange}
         placeholder={placeholder}
         className={cn(
-          'h-9 w-full rounded-md border border-white/10 bg-black/50 pl-9 pr-8 text-sm text-white',
-          'placeholder:text-white/40 focus:outline-none focus:border-white/30 focus:ring-2 focus:ring-white/20'
+          'h-9 w-full rounded-md border border-border bg-card pl-9 pr-8 text-sm text-foreground',
+          'placeholder:text-muted-foreground focus:outline-none focus:border-primary focus:ring-2 focus:ring-primary/20'
         )}
       />
       {localValue && (
         <button
           onClick={handleClear}
-          className="absolute right-2 top-1/2 -translate-y-1/2 rounded p-0.5 text-white/50 hover:text-white"
+          className="absolute right-2 top-1/2 -translate-y-1/2 rounded p-0.5 text-muted-foreground hover:text-foreground"
         >
           <X className="h-3.5 w-3.5" />
         </button>
diff --git a/frontend/src/components/admin/StatusBadge.tsx b/frontend/src/components/admin/StatusBadge.tsx
index abcec456..0f2e4b54 100644
--- a/frontend/src/components/admin/StatusBadge.tsx
+++ b/frontend/src/components/admin/StatusBadge.tsx
@@ -12,7 +12,7 @@ const variantClasses: Record<BadgeVariant, string> = {
   success: 'bg-emerald-400/10 text-emerald-400',
   destructive: 'bg-red-400/10 text-red-400',
   warning: 'bg-yellow-400/10 text-yellow-400',
-  default: 'bg-white/10 text-white/70',
+  default: 'bg-accent text-muted-foreground',
 }
 
 export function StatusBadge({ variant = 'default', children, className }: StatusBadgeProps) {
diff --git a/frontend/src/components/common/ActionMenu.tsx b/frontend/src/components/common/ActionMenu.tsx
index f7f5a20d..d4058f28 100644
--- a/frontend/src/components/common/ActionMenu.tsx
+++ b/frontend/src/components/common/ActionMenu.tsx
@@ -53,8 +53,8 @@ export function ActionMenu({ actions, align = 'right' }: ActionMenuProps) {
       <button
         onClick={() => setIsOpen(!isOpen)}
         className={cn(
-          'rounded-md border border-white/10 p-2 text-white/60',
-          'hover:bg-white/10 hover:text-white'
+          'rounded-md border border-border p-2 text-muted-foreground',
+          'hover:bg-accent hover:text-foreground'
         )}
         aria-label="Actions"
       >
@@ -64,7 +64,7 @@ export function ActionMenu({ actions, align = 'right' }: ActionMenuProps) {
       {isOpen && (
         <div
           className={cn(
-            'absolute z-50 mt-1 min-w-[180px] glass-card rounded-lg p-1',
+            'absolute z-50 mt-1 min-w-[180px] bg-card border border-border rounded-lg p-1',
             align === 'right' ? 'right-0' : 'left-0'
           )}
         >
@@ -80,8 +80,8 @@ export function ActionMenu({ actions, align = 'right' }: ActionMenuProps) {
                   action.disabled
                     ? 'cursor-not-allowed opacity-40'
                     : action.variant === 'destructive'
-                      ? 'text-red-400 hover:bg-white/10 hover:text-red-300'
-                      : 'text-white/70 hover:bg-white/10 hover:text-white'
+                      ? 'text-red-400 hover:bg-accent hover:text-red-300'
+                      : 'text-muted-foreground hover:bg-accent hover:text-foreground'
                 )}
               >
                 {Icon && <Icon className="h-4 w-4" />}
diff --git a/frontend/src/components/common/ConfirmDialog.tsx b/frontend/src/components/common/ConfirmDialog.tsx
index 96a3c9ae..b5b8599d 100644
--- a/frontend/src/components/common/ConfirmDialog.tsx
+++ b/frontend/src/components/common/ConfirmDialog.tsx
@@ -34,8 +34,8 @@ export function ConfirmDialog({
             onClick={onClose}
             disabled={isLoading}
             className={cn(
-              'rounded-xl border border-white/10 px-4 py-2 text-sm font-medium',
-              'text-white/60 hover:bg-white/10 hover:text-white',
+              'rounded-xl border border-border px-4 py-2 text-sm font-medium',
+              'text-muted-foreground hover:bg-accent hover:text-foreground',
               'disabled:opacity-50 disabled:cursor-not-allowed'
             )}
           >
@@ -49,7 +49,7 @@ export function ConfirmDialog({
               'disabled:opacity-50 disabled:cursor-not-allowed',
               confirmVariant === 'destructive'
                 ? 'bg-red-400/10 text-red-400 hover:bg-red-400/20 border border-red-400/20'
-                : 'bg-white text-black hover:bg-white/90'
+                : 'bg-gradient-brand text-white shadow-lg shadow-primary/20 hover:opacity-90'
             )}
           >
             {isLoading ? 'Processing...' : confirmLabel}
@@ -57,7 +57,7 @@ export function ConfirmDialog({
         </div>
       }
     >
-      <p className="text-sm text-white/70">{message}</p>
+      <p className="text-sm text-muted-foreground">{message}</p>
     </Modal>
   )
 }
diff --git a/frontend/src/components/common/ErrorBoundary.tsx b/frontend/src/components/common/ErrorBoundary.tsx
index 764f85ee..bdee3079 100644
--- a/frontend/src/components/common/ErrorBoundary.tsx
+++ b/frontend/src/components/common/ErrorBoundary.tsx
@@ -37,19 +37,19 @@ export class ErrorBoundary extends Component<Props, State> {
             <h2 className="mb-2 text-xl font-semibold text-red-400">
               Something went wrong
             </h2>
-            <p className="mb-4 text-white/70">
+            <p className="mb-4 text-muted-foreground">
               An unexpected error occurred. Please try refreshing the page.
             </p>
             {this.state.error && (
-              <pre className="mb-4 overflow-auto rounded-xl bg-white/5 border border-white/[0.06] p-3 text-left text-xs text-red-400">
+              <pre className="mb-4 overflow-auto rounded-xl bg-white/5 border border-border p-3 text-left text-xs text-red-400">
                 {this.state.error.message}
               </pre>
             )}
             <button
               onClick={() => window.location.reload()}
               className={cn(
-                'rounded-xl bg-white px-4 py-2 text-sm font-medium text-black',
-                'hover:bg-white/90'
+                'rounded-xl bg-gradient-brand px-4 py-2 text-sm font-medium text-white shadow-lg shadow-primary/20',
+                'hover:opacity-90'
               )}
             >
               Refresh Page
diff --git a/frontend/src/components/common/Modal.tsx b/frontend/src/components/common/Modal.tsx
index 81cb0743..73cf54ad 100644
--- a/frontend/src/components/common/Modal.tsx
+++ b/frontend/src/components/common/Modal.tsx
@@ -60,23 +60,23 @@ export function Modal({ isOpen, onClose, title, children, footer, size = 'md' }:
       {/* Modal Content */}
       <div
         className={cn(
-          'relative flex w-full flex-col border border-white/[0.06] bg-[#0a0a0a] shadow-lg',
+          'relative flex w-full flex-col border border-border bg-card shadow-lg',
           'max-h-[100vh] rounded-t-2xl sm:max-h-[85vh] sm:rounded-2xl',
           'animate-scale-in',
           sizeClasses[size]
         )}
       >
         {/* Header - Fixed at top */}
-        <div className="flex flex-shrink-0 items-center justify-between border-b border-white/[0.06] px-4 py-3 sm:px-6 sm:py-4">
-          <h2 id="modal-title" className="text-lg font-semibold text-white">
+        <div className="flex flex-shrink-0 items-center justify-between border-b border-border px-4 py-3 sm:px-6 sm:py-4">
+          <h2 id="modal-title" className="text-lg font-semibold text-foreground">
             {title}
           </h2>
           <button
             onClick={onClose}
             className={cn(
-              'rounded-md p-1.5 text-white/40 transition-colors sm:p-1',
-              'hover:bg-white/10 hover:text-white',
-              'focus:outline-none focus:ring-2 focus:ring-white/20'
+              'rounded-md p-1.5 text-muted-foreground transition-colors sm:p-1',
+              'hover:bg-accent hover:text-foreground',
+              'focus:outline-none focus:ring-2 focus:ring-primary/20'
             )}
             aria-label="Close modal"
           >
@@ -91,7 +91,7 @@ export function Modal({ isOpen, onClose, title, children, footer, size = 'md' }:
 
         {/* Footer - Fixed at bottom */}
         {footer && (
-          <div className="flex-shrink-0 border-t border-white/[0.06] px-4 py-3 sm:px-6 sm:py-4">
+          <div className="flex-shrink-0 border-t border-border px-4 py-3 sm:px-6 sm:py-4">
             {footer}
           </div>
         )}
diff --git a/frontend/src/components/common/PageLoader.tsx b/frontend/src/components/common/PageLoader.tsx
index 0cd8dd81..90621223 100644
--- a/frontend/src/components/common/PageLoader.tsx
+++ b/frontend/src/components/common/PageLoader.tsx
@@ -2,8 +2,8 @@ export function PageLoader() {
   return (
     <div className="flex h-screen items-center justify-center bg-black">
       <div className="flex flex-col items-center gap-4">
-        <div className="h-12 w-12 animate-spin rounded-full border-4 border-white/20 border-t-white" />
-        <p className="text-sm text-white/40">Loading...</p>
+        <div className="h-12 w-12 animate-spin rounded-full border-4 border-border border-t-foreground" />
+        <p className="text-sm text-muted-foreground">Loading...</p>
       </div>
     </div>
   )
diff --git a/frontend/src/components/common/PasswordInput.tsx b/frontend/src/components/common/PasswordInput.tsx
index d061f291..f783d44a 100644
--- a/frontend/src/components/common/PasswordInput.tsx
+++ b/frontend/src/components/common/PasswordInput.tsx
@@ -19,7 +19,7 @@ export function PasswordInput({ className, ...props }: PasswordInputProps) {
       <button
         type="button"
         onClick={() => setVisible((v) => !v)}
-        className="absolute right-2 top-1/2 -translate-y-1/2 rounded p-1 text-white/40 hover:bg-white/10 hover:text-white"
+        className="absolute right-2 top-1/2 -translate-y-1/2 rounded p-1 text-muted-foreground hover:bg-accent hover:text-foreground"
         tabIndex={-1}
         title={visible ? 'Hide password' : 'Show password'}
       >
diff --git a/frontend/src/components/common/RouteError.tsx b/frontend/src/components/common/RouteError.tsx
index a4fbe5c8..0fa4e7e9 100644
--- a/frontend/src/components/common/RouteError.tsx
+++ b/frontend/src/components/common/RouteError.tsx
@@ -19,17 +19,17 @@ export function RouteError() {
   return (
     <div className="flex min-h-screen flex-col items-center justify-center bg-black p-8">
       <div className="max-w-md text-center">
-        <h1 className="mb-2 text-4xl font-bold text-white">Oops!</h1>
+        <h1 className="mb-2 text-4xl font-bold text-foreground">Oops!</h1>
         <h2 className="mb-2 text-xl font-semibold text-red-400">{errorMessage}</h2>
         {errorDetails && (
-          <p className="mb-4 text-white/70">{errorDetails}</p>
+          <p className="mb-4 text-muted-foreground">{errorDetails}</p>
         )}
         <div className="flex justify-center gap-4">
           <button
             onClick={() => navigate(-1)}
             className={cn(
-              'rounded-xl border border-white/10 px-4 py-2 text-sm font-medium text-white/60',
-              'hover:bg-white/10 hover:text-white'
+              'rounded-xl border border-border px-4 py-2 text-sm font-medium text-muted-foreground',
+              'hover:bg-accent hover:text-foreground'
             )}
           >
             Go Back
@@ -37,8 +37,8 @@ export function RouteError() {
           <button
             onClick={() => navigate('/trees')}
             className={cn(
-              'rounded-xl bg-white px-4 py-2 text-sm font-medium text-black',
-              'hover:bg-white/90'
+              'rounded-xl bg-gradient-brand px-4 py-2 text-sm font-medium text-white shadow-lg shadow-primary/20',
+              'hover:opacity-90'
             )}
           >
             Go Home
diff --git a/frontend/src/components/common/StarRating.tsx b/frontend/src/components/common/StarRating.tsx
index 961fba52..d93e584a 100644
--- a/frontend/src/components/common/StarRating.tsx
+++ b/frontend/src/components/common/StarRating.tsx
@@ -48,14 +48,14 @@ export function StarRating({
               sizeClasses[size],
               star <= value
                 ? 'fill-yellow-400 text-yellow-400'
-                : 'fill-none text-white/30',
+                : 'fill-none text-muted-foreground',
               !readonly && 'hover:text-yellow-300'
             )}
           />
         </button>
       ))}
       {showCount && (
-        <span className="ml-1 text-sm text-white/40">
+        <span className="ml-1 text-sm text-muted-foreground">
           ({value}/5)
         </span>
       )}
diff --git a/frontend/src/components/common/TagBadges.tsx b/frontend/src/components/common/TagBadges.tsx
index faeac180..bd93cbc6 100644
--- a/frontend/src/components/common/TagBadges.tsx
+++ b/frontend/src/components/common/TagBadges.tsx
@@ -37,8 +37,8 @@ export function TagBadges({
             'rounded-full transition-colors',
             size === 'sm' ? 'px-2 py-0.5 text-xs' : 'px-2.5 py-1 text-sm',
             variant === 'default'
-              ? 'bg-white/10 text-white/70 hover:bg-white/15'
-              : 'bg-white/5 text-white/40 hover:bg-white/10',
+              ? 'bg-accent text-muted-foreground hover:bg-accent'
+              : 'bg-accent/50 text-muted-foreground hover:bg-accent',
             !onTagClick && 'cursor-default'
           )}
         >
@@ -50,7 +50,7 @@ export function TagBadges({
           className={cn(
             'rounded-full',
             size === 'sm' ? 'px-2 py-0.5 text-xs' : 'px-2.5 py-1 text-sm',
-            'bg-white/5 text-white/40'
+            'bg-accent/50 text-muted-foreground'
           )}
           title={tags.slice(maxVisible).join(', ')}
         >
diff --git a/frontend/src/components/common/TagInput.tsx b/frontend/src/components/common/TagInput.tsx
index 76f21b59..fa9320f8 100644
--- a/frontend/src/components/common/TagInput.tsx
+++ b/frontend/src/components/common/TagInput.tsx
@@ -123,10 +123,10 @@ export function TagInput({
       <div
         className={cn(
           'flex flex-wrap gap-1.5 rounded-xl border px-2 py-1.5',
-          'bg-black/50 text-white',
-          'focus-within:border-white/30 focus-within:ring-1 focus-within:ring-white/20',
+          'bg-card text-foreground',
+          'focus-within:border-primary focus-within:ring-1 focus-within:ring-primary/20',
           disabled ? 'cursor-not-allowed opacity-50' : '',
-          'border-white/10'
+          'border-border'
         )}
         onClick={() => inputRef.current?.focus()}
       >
@@ -136,7 +136,7 @@ export function TagInput({
             key={tag}
             className={cn(
               'inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-xs',
-              'bg-white/10 text-white/70'
+              'bg-accent text-muted-foreground'
             )}
           >
             {tag}
@@ -147,7 +147,7 @@ export function TagInput({
                   e.stopPropagation()
                   removeTag(tag)
                 }}
-                className="rounded-full p-0.5 hover:bg-white/20"
+                className="rounded-full p-0.5 hover:bg-accent"
               >
                 <X className="h-3 w-3" />
               </button>
@@ -184,8 +184,8 @@ export function TagInput({
             placeholder={tags.length === 0 ? placeholder : ''}
             disabled={disabled}
             className={cn(
-              'flex-1 min-w-[80px] border-0 bg-transparent px-1 py-0.5 text-sm text-white',
-              'placeholder:text-white/40',
+              'flex-1 min-w-[80px] border-0 bg-transparent px-1 py-0.5 text-sm text-foreground',
+              'placeholder:text-muted-foreground',
               'focus:outline-none focus:ring-0'
             )}
           />
@@ -196,8 +196,8 @@ export function TagInput({
       {showSuggestions && suggestions.length > 0 && (
         <div
           className={cn(
-            'absolute z-10 mt-1 w-full rounded-xl border border-white/[0.06]',
-            'bg-[#0a0a0a] shadow-lg'
+            'absolute z-10 mt-1 w-full rounded-xl border border-border',
+            'bg-card shadow-lg'
           )}
         >
           {suggestions.map((suggestion, index) => (
@@ -206,13 +206,13 @@ export function TagInput({
               type="button"
               onClick={() => addTag(suggestion.name)}
               className={cn(
-                'flex w-full items-center justify-between px-3 py-2 text-sm text-white/70',
-                'hover:bg-white/10',
-                index === selectedIndex && 'bg-white/10'
+                'flex w-full items-center justify-between px-3 py-2 text-sm text-muted-foreground',
+                'hover:bg-accent',
+                index === selectedIndex && 'bg-accent'
               )}
             >
               <span>{suggestion.name}</span>
-              <span className="text-xs text-white/40">
+              <span className="text-xs text-muted-foreground">
                 {suggestion.usage_count} trees
               </span>
             </button>
@@ -225,8 +225,8 @@ export function TagInput({
                 type="button"
                 onClick={() => addTag(inputValue)}
                 className={cn(
-                  'flex w-full items-center gap-2 border-t border-white/[0.06] px-3 py-2 text-sm',
-                  'hover:bg-white/10 text-white'
+                  'flex w-full items-center gap-2 border-t border-border px-3 py-2 text-sm',
+                  'hover:bg-accent text-foreground'
                 )}
               >
                 <Plus className="h-4 w-4" />
@@ -237,7 +237,7 @@ export function TagInput({
       )}
 
       {/* Helper text */}
-      <p className="mt-1 text-xs text-white/40">
+      <p className="mt-1 text-xs text-muted-foreground">
         {tags.length}/{maxTags} tags. Press Enter, Tab, comma, or semicolon to add.
       </p>
     </div>
diff --git a/frontend/src/components/dashboard/FiltersBar.tsx b/frontend/src/components/dashboard/FiltersBar.tsx
new file mode 100644
index 00000000..e4851620
--- /dev/null
+++ b/frontend/src/components/dashboard/FiltersBar.tsx
@@ -0,0 +1,39 @@
+import { Filter } from 'lucide-react'
+import { cn } from '@/lib/utils'
+
+interface FilterChip {
+  id: string
+  label: string
+}
+
+interface FiltersBarProps {
+  filters: FilterChip[]
+  activeFilter: string
+  onFilterChange: (id: string) => void
+}
+
+export function FiltersBar({ filters, activeFilter, onFilterChange }: FiltersBarProps) {
+  return (
+    <div className="fade-in flex items-center gap-1.5 overflow-x-auto py-1" style={{ animationDelay: '100ms' }}>
+      {filters.map(f => (
+        <button
+          key={f.id}
+          onClick={() => onFilterChange(f.id)}
+          className={cn(
+            'shrink-0 rounded-lg border px-3 py-1.5 text-[0.8125rem] font-medium transition-colors',
+            activeFilter === f.id
+              ? 'border-primary/30 bg-primary/10 text-primary'
+              : 'border-border bg-card text-muted-foreground hover:border-border/80 hover:text-foreground'
+          )}
+        >
+          {f.label}
+        </button>
+      ))}
+      <div className="mx-1.5 h-5 w-px shrink-0 bg-border" />
+      <button className="flex shrink-0 items-center gap-1.5 rounded-lg border border-border bg-card px-3 py-1.5 text-[0.8125rem] text-muted-foreground hover:text-foreground transition-colors">
+        <Filter size={14} />
+        More Filters
+      </button>
+    </div>
+  )
+}
diff --git a/frontend/src/components/dashboard/QuickStats.tsx b/frontend/src/components/dashboard/QuickStats.tsx
new file mode 100644
index 00000000..4cc2412e
--- /dev/null
+++ b/frontend/src/components/dashboard/QuickStats.tsx
@@ -0,0 +1,44 @@
+import { cn } from '@/lib/utils'
+
+interface StatCard {
+  label: string
+  value: string | number
+  meta?: string
+  gradient?: boolean
+  color?: string
+}
+
+interface QuickStatsProps {
+  stats: StatCard[]
+}
+
+export function QuickStats({ stats }: QuickStatsProps) {
+  return (
+    <div className="grid grid-cols-2 gap-3 sm:grid-cols-4">
+      {stats.map((stat, i) => (
+        <div
+          key={stat.label}
+          className="fade-in rounded-xl border border-border bg-card p-4 transition-colors hover:border-border/80"
+          style={{ animationDelay: `${50 + i * 30}ms` }}
+        >
+          <p className="font-label text-[0.6875rem] font-semibold uppercase tracking-[0.05em] text-muted-foreground">
+            {stat.label}
+          </p>
+          <p
+            className={cn(
+              'mt-1 font-heading text-2xl font-bold tracking-tight',
+              stat.gradient && 'text-gradient-brand',
+              stat.color
+            )}
+            style={stat.color && !stat.color.startsWith('text-') ? { color: stat.color } : undefined}
+          >
+            {stat.value}
+          </p>
+          {stat.meta && (
+            <p className="mt-0.5 text-[0.6875rem] text-[hsl(var(--text-dimmed))]">{stat.meta}</p>
+          )}
+        </div>
+      ))}
+    </div>
+  )
+}
diff --git a/frontend/src/components/dashboard/SectionGroup.tsx b/frontend/src/components/dashboard/SectionGroup.tsx
new file mode 100644
index 00000000..bfd448d4
--- /dev/null
+++ b/frontend/src/components/dashboard/SectionGroup.tsx
@@ -0,0 +1,40 @@
+import { useState } from 'react'
+import { ChevronDown } from 'lucide-react'
+import { cn } from '@/lib/utils'
+
+interface SectionGroupProps {
+  title: string
+  count?: number
+  defaultOpen?: boolean
+  delay?: number
+  children: React.ReactNode
+}
+
+export function SectionGroup({ title, count, defaultOpen = true, delay = 150, children }: SectionGroupProps) {
+  const [open, setOpen] = useState(defaultOpen)
+
+  return (
+    <div className="fade-in" style={{ animationDelay: `${delay}ms` }}>
+      <button
+        onClick={() => setOpen(!open)}
+        className="flex w-full items-center gap-2 py-2"
+      >
+        <span className="h-2 w-2 shrink-0 rounded-full bg-gradient-brand" />
+        <span className="font-heading text-[0.8125rem] font-bold uppercase tracking-[0.04em] text-foreground">
+          {title}
+        </span>
+        {count !== undefined && (
+          <span className="rounded-full bg-secondary px-2 py-0.5 font-label text-[0.6875rem] text-muted-foreground">
+            {count}
+          </span>
+        )}
+        <div className="flex-1" />
+        <ChevronDown
+          size={14}
+          className={cn('text-muted-foreground transition-transform', !open && '-rotate-90')}
+        />
+      </button>
+      {open && <div className="mt-1 space-y-1">{children}</div>}
+    </div>
+  )
+}
diff --git a/frontend/src/components/dashboard/SessionsPanel.tsx b/frontend/src/components/dashboard/SessionsPanel.tsx
new file mode 100644
index 00000000..a2c2bade
--- /dev/null
+++ b/frontend/src/components/dashboard/SessionsPanel.tsx
@@ -0,0 +1,75 @@
+import { Link } from 'react-router-dom'
+import { cn } from '@/lib/utils'
+
+interface SessionItem {
+  id: string
+  treeName: string
+  status: 'in_progress' | 'completed' | 'abandoned'
+  currentStep?: string
+  totalSteps?: number
+  stepNumber?: number
+  ticketNumber?: string
+  timeAgo: string
+}
+
+interface SessionsPanelProps {
+  sessions: SessionItem[]
+  delay?: number
+}
+
+export function SessionsPanel({ sessions, delay = 200 }: SessionsPanelProps) {
+  if (sessions.length === 0) return null
+
+  return (
+    <div className="fade-in rounded-xl border border-border bg-card" style={{ animationDelay: `${delay}ms` }}>
+      <div className="flex items-center justify-between border-b border-border px-4 py-3">
+        <h3 className="font-heading text-sm font-semibold text-foreground">Recent Sessions</h3>
+        <Link to="/sessions" className="text-[0.6875rem] text-muted-foreground hover:text-foreground transition-colors">
+          View All
+        </Link>
+      </div>
+      <div className="divide-y divide-border">
+        {sessions.map(session => (
+          <Link
+            key={session.id}
+            to={`/sessions/${session.id}`}
+            className="grid items-center gap-3 px-4 py-2.5 transition-colors hover:bg-accent/50"
+            style={{ gridTemplateColumns: '8px 1fr 140px 80px 100px' }}
+          >
+            {/* Status dot */}
+            <span
+              className={cn(
+                'h-2 w-2 rounded-full',
+                session.status === 'completed' ? 'bg-green-500' :
+                session.status === 'in_progress' ? 'bg-amber-500' :
+                'bg-muted-foreground'
+              )}
+            />
+
+            {/* Name */}
+            <span className="text-sm text-foreground truncate">{session.treeName}</span>
+
+            {/* Progress */}
+            <span className="text-[0.6875rem] text-muted-foreground truncate">
+              {session.status === 'completed'
+                ? '✓ Resolved'
+                : session.stepNumber && session.totalSteps
+                  ? `→ step ${session.stepNumber}/${session.totalSteps}`
+                  : '→ In progress'}
+            </span>
+
+            {/* Ticket */}
+            <span className="font-label text-[0.6875rem] text-muted-foreground truncate">
+              {session.ticketNumber || '—'}
+            </span>
+
+            {/* Time */}
+            <span className="text-right text-[0.6875rem] text-[hsl(var(--text-dimmed))]">
+              {session.timeAgo}
+            </span>
+          </Link>
+        ))}
+      </div>
+    </div>
+  )
+}
diff --git a/frontend/src/components/dashboard/TreeListItem.tsx b/frontend/src/components/dashboard/TreeListItem.tsx
new file mode 100644
index 00000000..22d80a39
--- /dev/null
+++ b/frontend/src/components/dashboard/TreeListItem.tsx
@@ -0,0 +1,109 @@
+import { useNavigate } from 'react-router-dom'
+import { MoreHorizontal } from 'lucide-react'
+import { getTreeNavigatePath, getTreeEditorPath } from '@/lib/routing'
+
+interface TreeListItemProps {
+  id: string
+  name: string
+  description?: string | null
+  treeType: string
+  category?: { name: string; color?: string } | null
+  tags?: string[]
+  usageCount?: number
+  updatedAt: string
+  icon?: string
+}
+
+export function TreeListItem({
+  id,
+  name,
+  description,
+  treeType,
+  category,
+  tags = [],
+  usageCount = 0,
+  updatedAt,
+  icon,
+}: TreeListItemProps) {
+  const navigate = useNavigate()
+  const categoryColor = category?.color || '#3b82f6'
+
+  const timeAgo = getTimeAgo(updatedAt)
+
+  return (
+    <div
+      onClick={() => navigate(getTreeNavigatePath(id, treeType))}
+      className="group grid cursor-pointer items-center gap-3 rounded-lg border border-transparent bg-card px-4 py-3 transition-colors hover:border-border hover:bg-[hsl(var(--sidebar-hover))]"
+      style={{ gridTemplateColumns: '40px 1fr 130px 80px 100px 40px' }}
+    >
+      {/* Icon box */}
+      <div
+        className="flex h-9 w-9 items-center justify-center rounded-lg text-base"
+        style={{ backgroundColor: `${categoryColor}15` }}
+      >
+        {icon || (treeType === 'procedural' ? '📋' : '🔧')}
+      </div>
+
+      {/* Info */}
+      <div className="min-w-0">
+        <p className="font-heading text-sm font-semibold text-foreground truncate">{name}</p>
+        <div className="mt-0.5 flex items-center gap-2">
+          {tags.slice(0, 3).map(tag => (
+            <span key={tag} className="rounded border border-border bg-secondary px-1.5 py-px font-label text-[0.625rem] text-muted-foreground">
+              {tag}
+            </span>
+          ))}
+          {description && tags.length === 0 && (
+            <span className="text-[0.6875rem] text-muted-foreground truncate">{description}</span>
+          )}
+        </div>
+      </div>
+
+      {/* Category */}
+      <div className="flex items-center gap-1.5">
+        {category && (
+          <>
+            <span className="h-2 w-2 shrink-0 rounded-full" style={{ backgroundColor: categoryColor }} />
+            <span className="font-label text-xs text-muted-foreground truncate">{category.name}</span>
+          </>
+        )}
+      </div>
+
+      {/* Usage count */}
+      <div className="text-right font-label text-xs text-muted-foreground">
+        {usageCount} uses
+      </div>
+
+      {/* Updated */}
+      <div className="text-right text-[0.6875rem] text-[hsl(var(--text-dimmed))]">
+        {timeAgo}
+      </div>
+
+      {/* Actions */}
+      <button
+        onClick={(e) => {
+          e.stopPropagation()
+          navigate(getTreeEditorPath(id, treeType))
+        }}
+        className="flex h-8 w-8 items-center justify-center rounded-md text-muted-foreground opacity-0 transition-opacity hover:bg-accent group-hover:opacity-100"
+      >
+        <MoreHorizontal size={16} />
+      </button>
+    </div>
+  )
+}
+
+function getTimeAgo(dateStr: string): string {
+  const now = Date.now()
+  const date = new Date(dateStr).getTime()
+  const diff = now - date
+  const minutes = Math.floor(diff / 60000)
+  if (minutes < 1) return 'Just now'
+  if (minutes < 60) return `${minutes} min ago`
+  const hours = Math.floor(minutes / 60)
+  if (hours < 24) return `${hours}h ago`
+  const days = Math.floor(hours / 24)
+  if (days === 1) return 'Yesterday'
+  if (days < 7) return `${days}d ago`
+  return new Date(dateStr).toLocaleDateString()
+}
diff --git a/frontend/src/components/layout/AppLayout.tsx b/frontend/src/components/layout/AppLayout.tsx
index 8ee7639f..9e6671bf 100644
--- a/frontend/src/components/layout/AppLayout.tsx
+++ b/frontend/src/components/layout/AppLayout.tsx
@@ -1,61 +1,34 @@
-import { useState, useEffect, useCallback, useRef } from 'react'
-import { Link, useLocation, useNavigate, Outlet } from 'react-router-dom'
+import { useEffect, useState, useCallback } from 'react'
+import { Outlet, useLocation, useNavigate, Link } from 'react-router-dom'
+import { Menu, X, LayoutGrid, Box, PenLine, Clock, FileText, Bookmark, Users, Settings, LogOut, Shield } from 'lucide-react'
 import { useAuthStore } from '@/store/authStore'
 import { usePermissions } from '@/hooks/usePermissions'
+import { useUserPreferencesStore } from '@/store/userPreferencesStore'
 import { BrandLogo } from '@/components/common/BrandLogo'
-import { Menu, X, LogOut, User, Shield, ChevronDown, FolderTree, ListOrdered, Layers } from 'lucide-react'
+import { TopBar } from './TopBar'
+import { Sidebar } from './Sidebar'
 import { cn } from '@/lib/utils'
 
-interface NavItem {
-  path: string
-  label: string
-  children?: { path: string; label: string; icon: React.ReactNode }[]
-}
-
 export function AppLayout() {
   const location = useLocation()
   const navigate = useNavigate()
   const { user, logout } = useAuthStore()
-  const { effectiveRole, isSuperAdmin } = usePermissions()
+  const { effectiveRole } = usePermissions()
+  const sidebarCollapsed = useUserPreferencesStore(s => s.sidebarCollapsed)
   const [mobileMenuOpen, setMobileMenuOpen] = useState(false)
-  const [flowsDropdownOpen, setFlowsDropdownOpen] = useState(false)
-  const flowsDropdownRef = useRef<HTMLDivElement>(null)
-
-  const handleLogout = async () => {
-    setMobileMenuOpen(false)
-    await logout()
-    navigate('/login')
-  }
 
   // Close mobile menu on route change
   const [prevPath, setPrevPath] = useState(location.pathname)
   if (prevPath !== location.pathname) {
     setPrevPath(location.pathname)
     if (mobileMenuOpen) setMobileMenuOpen(false)
-    setFlowsDropdownOpen(false)
   }
 
   // Close on Escape
   const handleKeyDown = useCallback((e: KeyboardEvent) => {
-    if (e.key === 'Escape') {
-      setMobileMenuOpen(false)
-      setFlowsDropdownOpen(false)
-    }
+    if (e.key === 'Escape') setMobileMenuOpen(false)
   }, [])
 
-  // Close dropdown on outside click
-  useEffect(() => {
-    const handleClickOutside = (e: MouseEvent) => {
-      if (flowsDropdownRef.current && !flowsDropdownRef.current.contains(e.target as Node)) {
-        setFlowsDropdownOpen(false)
-      }
-    }
-    if (flowsDropdownOpen) {
-      document.addEventListener('mousedown', handleClickOutside)
-    }
-    return () => document.removeEventListener('mousedown', handleClickOutside)
-  }, [flowsDropdownOpen])
-
   useEffect(() => {
     if (mobileMenuOpen) {
       document.addEventListener('keydown', handleKeyDown)
@@ -69,250 +42,98 @@ export function AppLayout() {
     }
   }, [mobileMenuOpen, handleKeyDown])
 
-  const isFlowsActive = location.pathname.startsWith('/trees') || location.pathname.startsWith('/flows')
+  const handleLogout = async () => {
+    setMobileMenuOpen(false)
+    await logout()
+    navigate('/login')
+  }
 
-  const navItems: NavItem[] = [
-    { path: '/', label: 'Home' },
-    {
-      path: '/trees',
-      label: 'Flows',
-      children: [
-        { path: '/trees', label: 'All Flows', icon: <Layers className="h-4 w-4 text-white/50" /> },
-        { path: '/trees?type=troubleshooting', label: 'Troubleshooting', icon: <FolderTree className="h-4 w-4 text-white/50" /> },
-        { path: '/trees?type=procedural', label: 'Procedures', icon: <ListOrdered className="h-4 w-4 text-white/50" /> },
-      ],
-    },
-    { path: '/my-trees', label: 'My Flows' },
-    { path: '/sessions', label: 'Sessions' },
-    { path: '/shares', label: 'My Shares' },
-    { path: '/account', label: 'Account' },
-    ...(isSuperAdmin ? [{ path: '/admin', label: 'Admin Panel' }] : []),
+  const mobileNavItems = [
+    { path: '/', label: 'Dashboard', icon: LayoutGrid },
+    { path: '/trees', label: 'All Flows', icon: Box },
+    { path: '/my-trees', label: 'My Flows', icon: PenLine },
+    { path: '/sessions', label: 'Sessions', icon: Clock },
+    { path: '/shares', label: 'Exports', icon: FileText },
+    { path: '/step-library', label: 'Step Library', icon: Bookmark },
+    { path: '/account', label: 'Team', icon: Users },
+    { path: '/account', label: 'Settings', icon: Settings },
   ]
 
   return (
-    <div className="min-h-screen bg-black">
-      {/* Subtle radial overlay for depth */}
-      <div className="pointer-events-none fixed inset-0 bg-[radial-gradient(circle_at_50%_0%,rgba(100,100,120,0.03),transparent_50%),radial-gradient(circle_at_80%_80%,rgba(80,80,100,0.02),transparent_50%)]" />
+    <div className={cn('app-shell', sidebarCollapsed && 'app-shell--collapsed')}>
+      {/* Top Bar - spans full width */}
+      <TopBar />
 
-      {/* Header */}
-      <header className="sticky top-0 z-50 border-b border-white/[0.06] bg-black/80 backdrop-blur-xl">
-        <div className="container mx-auto flex h-16 items-center justify-between px-4">
-          <div className="flex items-center gap-8">
-            {/* Mobile hamburger */}
-            <button
-              onClick={() => setMobileMenuOpen(true)}
-              className="rounded-xl p-2 text-white/50 hover:bg-white/10 hover:text-white transition-all sm:hidden"
-              aria-label="Open menu"
-            >
-              <Menu className="h-5 w-5" />
-            </button>
+      {/* Sidebar - desktop only */}
+      <div className="hidden md:block">
+        <Sidebar />
+      </div>
 
-            {/* Logo */}
-            <Link to="/" className="flex items-center gap-3 group">
-              <div className="w-9 h-9 rounded-xl bg-white flex items-center justify-center transition-transform group-hover:scale-105">
-                <BrandLogo size="sm" className="h-5 w-5 invert" />
-              </div>
-              <span className="text-xl font-semibold text-white tracking-tight">
-                ResolutionFlow
-              </span>
-            </Link>
-
-            {/* Desktop Navigation */}
-            <nav className="hidden items-center gap-1 sm:flex">
-              {navItems.map((item) => {
-                if (item.children) {
-                  return (
-                    <div key={item.path} className="relative" ref={flowsDropdownRef}>
-                      <button
-                        onClick={() => setFlowsDropdownOpen(!flowsDropdownOpen)}
-                        className={cn(
-                          'flex items-center gap-1 rounded-xl px-4 py-2 text-sm font-medium transition-all',
-                          isFlowsActive
-                            ? 'bg-white/10 text-white border border-white/20'
-                            : 'text-white/50 hover:text-white hover:bg-white/[0.06]'
-                        )}
-                      >
-                        {item.label}
-                        <ChevronDown className={cn('h-3.5 w-3.5 transition-transform', flowsDropdownOpen && 'rotate-180')} />
-                      </button>
-                      {flowsDropdownOpen && (
-                        <div className="absolute left-0 z-50 mt-1 w-52 rounded-lg border border-white/10 bg-black/95 p-1 shadow-xl backdrop-blur-sm">
-                          {item.children.map((child) => (
-                            <Link
-                              key={child.path}
-                              to={child.path}
-                              onClick={() => setFlowsDropdownOpen(false)}
-                              className="flex items-center gap-3 rounded-md px-3 py-2.5 text-sm text-white/70 hover:bg-white/10 hover:text-white"
-                            >
-                              {child.icon}
-                              {child.label}
-                            </Link>
-                          ))}
-                        </div>
-                      )}
-                    </div>
-                  )
-                }
-
-                const isActive = item.path === '/'
-                  ? location.pathname === '/'
-                  : location.pathname.startsWith(item.path)
-
-                return (
-                  <Link
-                    key={item.path}
-                    to={item.path}
-                    className={cn(
-                      'rounded-xl px-4 py-2 text-sm font-medium transition-all',
-                      isActive
-                        ? 'bg-white/10 text-white border border-white/20'
-                        : 'text-white/50 hover:text-white hover:bg-white/[0.06]'
-                    )}
-                  >
-                    {item.label}
-                  </Link>
-                )
-              })}
-            </nav>
-          </div>
-
-          {/* Right side controls */}
-          <div className="flex items-center gap-3">
-            {/* User info */}
-            <div className="hidden items-center gap-3 sm:flex">
-              <div className="flex items-center gap-2 rounded-xl bg-white/[0.06] px-3 py-1.5 border border-white/10">
-                <User className="h-4 w-4 text-white/40" />
-                <span className="text-sm text-white/70">
-                  {user?.name || user?.email}
-                </span>
-              </div>
-
-              {/* Role badge */}
-              {effectiveRole && effectiveRole !== 'engineer' && (
-                <div className="px-3 py-1.5 rounded-xl bg-white/10 border border-white/20">
-                  <span className="flex items-center gap-1.5 text-xs text-white font-semibold">
-                    <Shield className="h-3 w-3" />
-                    {effectiveRole === 'super_admin' ? 'Super Admin' :
-                     effectiveRole === 'owner' ? 'Owner' :
-                     'Viewer'}
-                  </span>
-                </div>
-              )}
-            </div>
-
-            {/* Logout button */}
-            <button
-              onClick={handleLogout}
-              className={cn(
-                'hidden items-center gap-2 rounded-xl px-4 py-2 text-sm font-medium sm:flex',
-                'text-white/50 hover:text-white hover:bg-white/10 transition-all',
-                'border border-white/10 hover:border-white/20'
-              )}
-            >
-              <LogOut className="h-4 w-4" />
-              Logout
-            </button>
-          </div>
-        </div>
-      </header>
+      {/* Mobile hamburger - overlaid on topbar */}
+      <button
+        onClick={() => setMobileMenuOpen(true)}
+        className="fixed left-4 top-3.5 z-50 rounded-lg p-2 text-muted-foreground hover:bg-card hover:text-foreground transition-colors md:hidden"
+        aria-label="Open menu"
+      >
+        <Menu size={20} />
+      </button>
 
       {/* Mobile Nav Drawer */}
       {mobileMenuOpen && (
-        <div className="fixed inset-0 z-50 sm:hidden">
-          {/* Backdrop */}
+        <div className="fixed inset-0 z-50 md:hidden">
           <div
-            className="absolute inset-0 bg-black/80 backdrop-blur-sm animate-in fade-in duration-200"
+            className="absolute inset-0 bg-black/80 backdrop-blur-sm animate-fade-in"
             onClick={() => setMobileMenuOpen(false)}
             aria-hidden="true"
           />
-
-          {/* Drawer */}
-          <nav className="absolute inset-y-0 left-0 w-72 border-r border-white/[0.06] bg-black shadow-2xl animate-in slide-in-from-left duration-300">
-            <div className="flex h-16 items-center justify-between border-b border-white/[0.06] px-4">
-              <Link to="/" className="flex items-center gap-3">
-                <div className="w-9 h-9 rounded-xl bg-white flex items-center justify-center">
-                  <BrandLogo size="sm" className="h-5 w-5 invert" />
+          <nav className="absolute inset-y-0 left-0 w-72 border-r border-border bg-[hsl(var(--sidebar-bg))] shadow-2xl animate-slide-in-left">
+            <div className="flex h-14 items-center justify-between border-b border-border px-4">
+              <Link to="/" className="flex items-center gap-2.5">
+                <div className="flex h-8 w-8 items-center justify-center rounded-lg bg-gradient-brand">
+                  <BrandLogo size="sm" className="h-4 w-4" />
                 </div>
-                <span className="text-xl font-semibold text-white tracking-tight">
-                  ResolutionFlow
-                </span>
+                <span className="text-sm font-heading font-bold">ResolutionFlow</span>
               </Link>
               <button
                 onClick={() => setMobileMenuOpen(false)}
-                className="rounded-xl p-2 text-white/50 hover:bg-white/10 hover:text-white transition-all"
+                className="rounded-lg p-2 text-muted-foreground hover:bg-card hover:text-foreground"
                 aria-label="Close menu"
               >
-                <X className="h-5 w-5" />
+                <X size={18} />
               </button>
             </div>
 
-            <div className="flex flex-col p-4">
+            <div className="flex flex-col p-3">
               {/* User info */}
-              <div className="mb-4 border-b border-white/[0.06] pb-4">
-                <div className="flex items-center gap-2 mb-2">
-                  <User className="h-4 w-4 text-white/40" />
-                  <p className="text-sm font-medium text-white">
-                    {user?.name || user?.email}
-                  </p>
-                </div>
+              <div className="mb-3 border-b border-border pb-3 px-3">
+                <p className="text-sm font-medium text-foreground">{user?.name || user?.email}</p>
                 {effectiveRole && effectiveRole !== 'engineer' && (
-                  <div className="inline-flex px-3 py-1.5 rounded-xl bg-white/10 border border-white/20">
-                    <span className="flex items-center gap-1.5 text-xs text-white font-semibold">
-                      <Shield className="h-3 w-3" />
-                      {effectiveRole === 'super_admin' ? 'Super Admin' :
-                       effectiveRole === 'owner' ? 'Owner' :
-                       'Viewer'}
-                    </span>
-                  </div>
+                  <span className="mt-1 inline-flex items-center gap-1 text-xs text-muted-foreground">
+                    <Shield size={10} />
+                    {effectiveRole === 'super_admin' ? 'Super Admin' : effectiveRole === 'owner' ? 'Owner' : 'Viewer'}
+                  </span>
                 )}
               </div>
 
               {/* Nav items */}
-              <div className="space-y-1">
-                {navItems.map((item) => {
-                  if (item.children) {
-                    return (
-                      <div key={item.path}>
-                        <div className={cn(
-                          'px-4 py-2 text-xs font-semibold uppercase tracking-wider',
-                          isFlowsActive ? 'text-white/60' : 'text-white/30'
-                        )}>
-                          {item.label}
-                        </div>
-                        <div className="space-y-0.5">
-                          {item.children.map((child) => (
-                            <Link
-                              key={child.path}
-                              to={child.path}
-                              className={cn(
-                                'flex items-center gap-3 rounded-xl px-4 py-3 text-sm font-medium transition-all ml-1',
-                                'text-white/50 hover:text-white hover:bg-white/[0.06]'
-                              )}
-                            >
-                              {child.icon}
-                              {child.label}
-                            </Link>
-                          ))}
-                        </div>
-                      </div>
-                    )
-                  }
-
+              <div className="space-y-0.5">
+                {mobileNavItems.map((item) => {
+                  const Icon = item.icon
                   const isActive = item.path === '/'
                     ? location.pathname === '/'
                     : location.pathname.startsWith(item.path)
-
                   return (
                     <Link
-                      key={item.path}
+                      key={item.path + item.label}
                       to={item.path}
                       className={cn(
-                        'block rounded-xl px-4 py-3 text-sm font-medium transition-all',
+                        'flex items-center gap-3 rounded-lg px-3 py-2.5 text-sm font-medium transition-colors',
                         isActive
-                          ? 'bg-white/10 text-white border border-white/20'
-                          : 'text-white/50 hover:text-white hover:bg-white/[0.06]'
+                          ? 'bg-[hsl(var(--sidebar-active))] text-foreground'
+                          : 'text-muted-foreground hover:bg-[hsl(var(--sidebar-hover))] hover:text-foreground'
                       )}
                     >
+                      <Icon size={18} />
                       {item.label}
                     </Link>
                   )
@@ -320,16 +141,12 @@ export function AppLayout() {
               </div>
 
               {/* Logout */}
-              <div className="mt-4 border-t border-white/[0.06] pt-4">
+              <div className="mt-3 border-t border-border pt-3">
                 <button
                   onClick={handleLogout}
-                  className={cn(
-                    'w-full flex items-center gap-2 rounded-xl px-4 py-3 text-sm font-medium',
-                    'text-white/50 hover:text-white hover:bg-white/10 transition-all',
-                    'border border-white/10 hover:border-white/20'
-                  )}
+                  className="flex w-full items-center gap-3 rounded-lg px-3 py-2.5 text-sm font-medium text-muted-foreground hover:bg-[hsl(var(--sidebar-hover))] hover:text-foreground transition-colors"
                 >
-                  <LogOut className="h-4 w-4" />
+                  <LogOut size={18} />
                   Logout
                 </button>
               </div>
@@ -339,7 +156,7 @@ export function AppLayout() {
       )}
 
       {/* Main Content */}
-      <main className="relative animate-in fade-in duration-500">
+      <main className="main-content overflow-y-auto">
         <Outlet />
       </main>
     </div>
diff --git a/frontend/src/components/layout/CommandPalette.tsx b/frontend/src/components/layout/CommandPalette.tsx
new file mode 100644
index 00000000..7de696e4
--- /dev/null
+++ b/frontend/src/components/layout/CommandPalette.tsx
@@ -0,0 +1,217 @@
+import { useState, useEffect, useRef, useCallback } from 'react'
+import { useNavigate } from 'react-router-dom'
+import { Search, Loader2, ArrowRight, FileText, Clock } from 'lucide-react'
+import { treesApi } from '@/api/trees'
+import { sessionsApi } from '@/api/sessions'
+import type { TreeListItem } from '@/types'
+import type { Session } from '@/types/session'
+import { getTreeNavigatePath } from '@/lib/routing'
+import { cn } from '@/lib/utils'
+
+interface CommandPaletteProps {
+  open: boolean
+  onClose: () => void
+}
+
+interface ResultItem {
+  id: string
+  type: 'tree' | 'session'
+  title: string
+  subtitle?: string
+  icon: 'tree' | 'session'
+  path: string
+}
+
+export function CommandPalette({ open, onClose }: CommandPaletteProps) {
+  const navigate = useNavigate()
+  const inputRef = useRef<HTMLInputElement>(null)
+  const [query, setQuery] = useState('')
+  const [results, setResults] = useState<ResultItem[]>([])
+  const [isSearching, setIsSearching] = useState(false)
+  const [selectedIndex, setSelectedIndex] = useState(0)
+  const debounceRef = useRef<ReturnType<typeof setTimeout> | null>(null)
+
+  // Focus input when opened
+  useEffect(() => {
+    if (open) {
+      setQuery('')
+      setResults([])
+      setSelectedIndex(0)
+      // Slight delay to ensure modal is rendered
+      setTimeout(() => inputRef.current?.focus(), 50)
+    }
+  }, [open])
+
+  // Close on Escape
+  useEffect(() => {
+    if (!open) return
+    const handler = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') onClose()
+    }
+    document.addEventListener('keydown', handler)
+    return () => document.removeEventListener('keydown', handler)
+  }, [open, onClose])
+
+  // Debounced search
+  useEffect(() => {
+    if (debounceRef.current) clearTimeout(debounceRef.current)
+    if (query.length < 2) {
+      setResults([])
+      setIsSearching(false)
+      return
+    }
+    setIsSearching(true)
+    debounceRef.current = setTimeout(async () => {
+      try {
+        const [trees, sessions] = await Promise.all([
+          treesApi.search(query, 6),
+          sessionsApi.list({ size: 5 }).catch(() => [] as Session[]),
+        ])
+
+        const treeResults: ResultItem[] = trees.map((t: TreeListItem) => ({
+          id: t.id,
+          type: 'tree' as const,
+          title: t.name,
+          subtitle: t.description || undefined,
+          icon: 'tree' as const,
+          path: getTreeNavigatePath(t.id, t.tree_type),
+        }))
+
+        // Filter sessions by tree name matching query
+        const sessionResults: ResultItem[] = sessions
+          .filter((s: Session) =>
+            s.tree_snapshot?.name?.toLowerCase().includes(query.toLowerCase())
+          )
+          .slice(0, 3)
+          .map((s: Session) => ({
+            id: s.id,
+            type: 'session' as const,
+            title: s.tree_snapshot?.name || 'Session',
+            subtitle: s.completed_at ? 'Completed' : 'In progress',
+            icon: 'session' as const,
+            path: `/sessions/${s.id}`,
+          }))
+
+        setResults([...treeResults, ...sessionResults])
+      } catch {
+        setResults([])
+      } finally {
+        setIsSearching(false)
+      }
+    }, 250)
+    return () => { if (debounceRef.current) clearTimeout(debounceRef.current) }
+  }, [query])
+
+  const handleSelect = useCallback((item: ResultItem) => {
+    onClose()
+    navigate(item.path)
+  }, [navigate, onClose])
+
+  // Keyboard navigation
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === 'ArrowDown') {
+      e.preventDefault()
+      setSelectedIndex(i => Math.min(i + 1, results.length - 1))
+    } else if (e.key === 'ArrowUp') {
+      e.preventDefault()
+      setSelectedIndex(i => Math.max(i - 1, 0))
+    } else if (e.key === 'Enter' && results[selectedIndex]) {
+      e.preventDefault()
+      handleSelect(results[selectedIndex])
+    }
+  }
+
+  if (!open) return null
+
+  return (
+    <div className="fixed inset-0 z-[100] flex items-start justify-center pt-[20vh]">
+      {/* Backdrop */}
+      <div
+        className="absolute inset-0 bg-black/60 backdrop-blur-sm animate-fade-in"
+        onClick={onClose}
+      />
+
+      {/* Palette */}
+      <div className="relative w-full max-w-lg rounded-xl border border-border bg-card shadow-2xl animate-scale-in">
+        {/* Search input */}
+        <div className="flex items-center gap-3 border-b border-border px-4 py-3">
+          <Search size={18} className="shrink-0 text-muted-foreground" />
+          <input
+            ref={inputRef}
+            type="text"
+            value={query}
+            onChange={e => { setQuery(e.target.value); setSelectedIndex(0) }}
+            onKeyDown={handleKeyDown}
+            placeholder="Search flows, sessions…"
+            className="flex-1 bg-transparent text-sm text-foreground placeholder:text-muted-foreground outline-none"
+          />
+          <kbd className="rounded border border-border bg-background px-1.5 py-0.5 font-label text-[0.625rem] text-muted-foreground">
+            ESC
+          </kbd>
+        </div>
+
+        {/* Results */}
+        <div className="max-h-72 overflow-y-auto">
+          {isSearching ? (
+            <div className="flex items-center justify-center py-8">
+              <Loader2 className="h-5 w-5 animate-spin text-muted-foreground" />
+            </div>
+          ) : query.length >= 2 && results.length === 0 ? (
+            <div className="px-4 py-8 text-center text-sm text-muted-foreground">
+              No results for &ldquo;{query}&rdquo;
+            </div>
+          ) : results.length > 0 ? (
+            <div className="p-1">
+              {results.map((item, i) => (
+                <button
+                  key={item.id}
+                  onClick={() => handleSelect(item)}
+                  onMouseEnter={() => setSelectedIndex(i)}
+                  className={cn(
+                    'flex w-full items-center gap-3 rounded-lg px-3 py-2.5 text-left transition-colors',
+                    i === selectedIndex
+                      ? 'bg-accent text-foreground'
+                      : 'text-muted-foreground hover:bg-accent/50'
+                  )}
+                >
+                  {item.type === 'tree' ? (
+                    <FileText size={16} className="shrink-0 opacity-60" />
+                  ) : (
+                    <Clock size={16} className="shrink-0 opacity-60" />
+                  )}
+                  <div className="min-w-0 flex-1">
+                    <p className="text-sm font-medium truncate">{item.title}</p>
+                    {item.subtitle && (
+                      <p className="text-[0.6875rem] text-muted-foreground truncate">{item.subtitle}</p>
+                    )}
+                  </div>
+                  {i === selectedIndex && (
+                    <ArrowRight size={14} className="shrink-0 opacity-40" />
+                  )}
+                </button>
+              ))}
+            </div>
+          ) : (
+            <div className="px-4 py-6 text-center text-sm text-muted-foreground">
+              Type to search flows and sessions
+            </div>
+          )}
+        </div>
+
+        {/* Footer hints */}
+        {results.length > 0 && (
+          <div className="flex items-center gap-4 border-t border-border px-4 py-2">
+            <span className="flex items-center gap-1 text-[0.625rem] text-muted-foreground">
+              <kbd className="rounded border border-border bg-background px-1 py-px font-label">↑↓</kbd>
+              Navigate
+            </span>
+            <span className="flex items-center gap-1 text-[0.625rem] text-muted-foreground">
+              <kbd className="rounded border border-border bg-background px-1 py-px font-label">↵</kbd>
+              Open
+            </span>
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}
diff --git a/frontend/src/components/layout/NavItem.tsx b/frontend/src/components/layout/NavItem.tsx
new file mode 100644
index 00000000..1225eba2
--- /dev/null
+++ b/frontend/src/components/layout/NavItem.tsx
@@ -0,0 +1,127 @@
+import { Link, useLocation } from 'react-router-dom'
+import type { LucideIcon } from 'lucide-react'
+import { cn } from '@/lib/utils'
+
+interface NavSubItem {
+  href: string
+  label: string
+  count?: number
+  isActive?: boolean
+}
+
+interface NavItemProps {
+  href: string
+  icon: LucideIcon
+  label: string
+  badge?: number | 'dot'
+  matchPaths?: string[]
+  collapsed?: boolean
+  children?: NavSubItem[]
+}
+
+export function NavItem({ href, icon: Icon, label, badge, matchPaths, collapsed, children }: NavItemProps) {
+  const location = useLocation()
+  const fullPath = location.pathname + location.search
+  const isActive = matchPaths
+    ? matchPaths.some(p => location.pathname.startsWith(p))
+    : href === '/'
+      ? location.pathname === '/'
+      : location.pathname.startsWith(href)
+
+  // Check if any child is specifically active
+  const activeChild = children?.find(c => fullPath === c.href || fullPath.startsWith(c.href + '&'))
+  const isParentDimmed = !!activeChild && isActive
+
+  if (collapsed) {
+    return (
+      <Link
+        to={href}
+        className={cn(
+          'group relative flex items-center justify-center rounded-lg p-2 transition-all duration-120',
+          isActive
+            ? 'bg-[hsl(var(--sidebar-active))] text-foreground'
+            : 'text-muted-foreground hover:bg-[hsl(var(--sidebar-hover))] hover:text-foreground'
+        )}
+        title={label}
+      >
+        {isActive && (
+          <div className="absolute left-0 top-1/2 h-6 w-[3px] -translate-y-1/2 rounded-r-full bg-gradient-brand" />
+        )}
+        <Icon size={18} className={cn('shrink-0', isActive ? 'opacity-100' : 'opacity-70')} />
+        {badge !== undefined && badge !== 0 && badge !== 'dot' && (
+          <span className="absolute -right-0.5 -top-0.5 flex h-4 w-4 items-center justify-center rounded-full bg-primary text-[0.5rem] font-bold text-primary-foreground">
+            {badge}
+          </span>
+        )}
+      </Link>
+    )
+  }
+
+  return (
+    <div className="group/nav">
+      <Link
+        to={href}
+        className={cn(
+          'group relative flex items-center gap-3 rounded-lg px-3 py-2 text-[0.8125rem] font-medium transition-all duration-120',
+          isActive
+            ? isParentDimmed
+              ? 'bg-[hsl(var(--sidebar-active))]/50 text-foreground/70'
+              : 'bg-[hsl(var(--sidebar-active))] text-foreground'
+            : 'text-muted-foreground hover:bg-[hsl(var(--sidebar-hover))] hover:text-foreground'
+        )}
+      >
+        {/* Active indicator bar */}
+        {isActive && !isParentDimmed && (
+          <div className="absolute left-0 top-1/2 h-6 w-[3px] -translate-y-1/2 rounded-r-full bg-gradient-brand" />
+        )}
+
+        <Icon size={18} className={cn('shrink-0', isActive ? 'opacity-100' : 'opacity-70')} />
+        <span className="truncate">{label}</span>
+
+        {/* Badge */}
+        {badge !== undefined && badge !== 0 && (
+          badge === 'dot' ? (
+            <span className="ml-auto h-1.5 w-1.5 shrink-0 rounded-full bg-brand-gradient-from" />
+          ) : (
+            <span className="ml-auto shrink-0 rounded-full bg-card border border-border px-2 text-[0.6875rem] font-label text-muted-foreground">
+              {badge}
+            </span>
+          )
+        )}
+      </Link>
+
+      {/* Sub-items — visible on hover or when a child is active */}
+      {children && children.length > 0 && (
+        <div className={cn(
+          'mt-0.5 space-y-0.5 overflow-hidden transition-all duration-200',
+          isActive || activeChild
+            ? 'max-h-40 opacity-100'
+            : 'max-h-0 opacity-0 group-hover/nav:max-h-40 group-hover/nav:opacity-100'
+        )}>
+          {children.map(child => {
+            const childActive = fullPath === child.href || fullPath.startsWith(child.href + '&')
+            return (
+              <Link
+                key={child.href}
+                to={child.href}
+                className={cn(
+                  'flex items-center gap-2 rounded-lg pl-9 pr-3 py-1.5 text-[0.8125rem] font-medium transition-colors',
+                  childActive
+                    ? 'bg-[hsl(var(--sidebar-active))] text-foreground'
+                    : 'text-muted-foreground hover:bg-[hsl(var(--sidebar-hover))] hover:text-foreground'
+                )}
+              >
+                <span className="truncate">{child.label}</span>
+                {child.count !== undefined && (
+                  <span className="ml-auto shrink-0 rounded-full bg-card border border-border px-2 text-[0.6875rem] font-label text-muted-foreground">
+                    {child.count}
+                  </span>
+                )}
+              </Link>
+            )
+          })}
+        </div>
+      )}
+    </div>
+  )
+}
diff --git a/frontend/src/components/layout/NotificationsPanel.tsx b/frontend/src/components/layout/NotificationsPanel.tsx
new file mode 100644
index 00000000..df6c352a
--- /dev/null
+++ b/frontend/src/components/layout/NotificationsPanel.tsx
@@ -0,0 +1,105 @@
+import { useState, useEffect, useRef } from 'react'
+import { Link } from 'react-router-dom'
+import { Bell, CheckCircle, Clock } from 'lucide-react'
+import { sessionsApi } from '@/api/sessions'
+import type { Session } from '@/types/session'
+
+function timeAgo(dateStr: string): string {
+  const diff = Math.floor((Date.now() - new Date(dateStr).getTime()) / 1000)
+  if (diff < 60) return 'just now'
+  if (diff < 3600) return `${Math.floor(diff / 60)}m ago`
+  if (diff < 86400) return `${Math.floor(diff / 3600)}h ago`
+  return `${Math.floor(diff / 86400)}d ago`
+}
+
+export function NotificationsPanel() {
+  const [open, setOpen] = useState(false)
+  const [sessions, setSessions] = useState<Session[]>([])
+  const [hasNew, setHasNew] = useState(false)
+  const ref = useRef<HTMLDivElement>(null)
+
+  useEffect(() => {
+    sessionsApi.list({ size: 8 })
+      .then(data => {
+        setSessions(data)
+        // Mark as "new" if any session was updated in the last hour
+        const oneHourAgo = Date.now() - 3600000
+        setHasNew(data.some(s => new Date(s.started_at).getTime() > oneHourAgo))
+      })
+      .catch(() => {})
+  }, [])
+
+  useEffect(() => {
+    const handler = (e: MouseEvent) => {
+      if (ref.current && !ref.current.contains(e.target as Node)) setOpen(false)
+    }
+    if (open) document.addEventListener('mousedown', handler)
+    return () => document.removeEventListener('mousedown', handler)
+  }, [open])
+
+  return (
+    <div className="relative" ref={ref}>
+      <button
+        onClick={() => { setOpen(!open); setHasNew(false) }}
+        className="relative rounded-lg p-2 text-muted-foreground hover:bg-card hover:text-foreground transition-colors"
+        title="Notifications"
+      >
+        <Bell size={18} />
+        {hasNew && (
+          <span className="absolute right-1.5 top-1.5 h-2 w-2 rounded-full bg-primary" />
+        )}
+      </button>
+
+      {open && (
+        <div className="absolute right-0 z-50 mt-2 w-80 rounded-xl border border-border bg-card shadow-xl animate-scale-in">
+          <div className="flex items-center justify-between border-b border-border px-4 py-3">
+            <h3 className="text-sm font-heading font-semibold text-foreground">Activity</h3>
+            <Link
+              to="/sessions"
+              onClick={() => setOpen(false)}
+              className="text-[0.6875rem] text-muted-foreground hover:text-foreground"
+            >
+              View All
+            </Link>
+          </div>
+
+          {sessions.length === 0 ? (
+            <div className="px-4 py-8 text-center text-sm text-muted-foreground">
+              No recent activity
+            </div>
+          ) : (
+            <div className="max-h-72 overflow-y-auto divide-y divide-border">
+              {sessions.map(session => (
+                <Link
+                  key={session.id}
+                  to={`/sessions/${session.id}`}
+                  onClick={() => setOpen(false)}
+                  className="flex items-start gap-3 px-4 py-3 hover:bg-accent/50 transition-colors"
+                >
+                  <div className="mt-0.5">
+                    {session.completed_at ? (
+                      <CheckCircle size={16} className="text-emerald-400" />
+                    ) : (
+                      <Clock size={16} className="text-amber-400" />
+                    )}
+                  </div>
+                  <div className="min-w-0 flex-1">
+                    <p className="text-sm text-foreground truncate">
+                      {session.tree_snapshot?.name || 'Session'}
+                    </p>
+                    <p className="text-[0.6875rem] text-muted-foreground">
+                      {session.completed_at
+                        ? `Completed ${timeAgo(session.completed_at)}`
+                        : `Started ${timeAgo(session.started_at)}`}
+                      {session.client_name && ` · ${session.client_name}`}
+                    </p>
+                  </div>
+                </Link>
+              ))}
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  )
+}
diff --git a/frontend/src/components/layout/ProtectedRoute.tsx b/frontend/src/components/layout/ProtectedRoute.tsx
index a5c28a3d..0a2b5dae 100644
--- a/frontend/src/components/layout/ProtectedRoute.tsx
+++ b/frontend/src/components/layout/ProtectedRoute.tsx
@@ -15,7 +15,7 @@ export function ProtectedRoute({ requiredRole, children }: ProtectedRouteProps)
   if (isLoading) {
     return (
       <div className="flex h-screen items-center justify-center">
-        <div className="h-8 w-8 animate-spin rounded-full border-4 border-white/20 border-t-white" />
+        <div className="h-8 w-8 animate-spin rounded-full border-4 border-border border-t-foreground" />
       </div>
     )
   }
diff --git a/frontend/src/components/layout/QuickLaunch.tsx b/frontend/src/components/layout/QuickLaunch.tsx
new file mode 100644
index 00000000..76da29fe
--- /dev/null
+++ b/frontend/src/components/layout/QuickLaunch.tsx
@@ -0,0 +1,157 @@
+import { useState, useEffect, useRef } from 'react'
+import { useNavigate } from 'react-router-dom'
+import { Plus, Play, FileText, Bookmark, Users, X } from 'lucide-react'
+import { treesApi } from '@/api/trees'
+import type { TreeListItem } from '@/types'
+import { getTreeNavigatePath } from '@/lib/routing'
+import { cn } from '@/lib/utils'
+
+interface QuickLaunchProps {
+  open: boolean
+  onClose: () => void
+}
+
+interface QuickAction {
+  id: string
+  icon: typeof Plus
+  label: string
+  description: string
+  path: string
+  color: string
+}
+
+const ACTIONS: QuickAction[] = [
+  { id: 'new-tree', icon: Plus, label: 'New Troubleshooting Flow', description: 'Create a branching decision tree', path: '/trees/new', color: '#3b82f6' },
+  { id: 'new-project', icon: Plus, label: 'New Project', description: 'Create a step-by-step project', path: '/flows/new', color: '#8b5cf6' },
+  { id: 'sessions', icon: Play, label: 'View Sessions', description: 'See active and recent sessions', path: '/sessions', color: '#f59e0b' },
+  { id: 'step-library', icon: Bookmark, label: 'Step Library', description: 'Browse reusable steps', path: '/step-library', color: '#10b981' },
+  { id: 'exports', icon: FileText, label: 'Exports & Shares', description: 'View shared session exports', path: '/shares', color: '#6366f1' },
+  { id: 'team', icon: Users, label: 'Team Settings', description: 'Manage team members and roles', path: '/account', color: '#ec4899' },
+]
+
+export function QuickLaunch({ open, onClose }: QuickLaunchProps) {
+  const navigate = useNavigate()
+  const [recentTrees, setRecentTrees] = useState<TreeListItem[]>([])
+  const [selectedIndex, setSelectedIndex] = useState(0)
+  const containerRef = useRef<HTMLDivElement>(null)
+
+  const allItems = [...ACTIONS.map(a => ({ type: 'action' as const, ...a })), ...recentTrees.slice(0, 4).map(t => ({ type: 'tree' as const, ...t }))]
+  const totalItems = allItems.length
+
+  useEffect(() => {
+    if (open) {
+      setSelectedIndex(0)
+      treesApi.list({ sort_by: 'updated_at' })
+        .then(trees => setRecentTrees(trees.slice(0, 4)))
+        .catch(() => {})
+    }
+  }, [open])
+
+  useEffect(() => {
+    if (!open) return
+    const handler = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') onClose()
+      if (e.key === 'ArrowDown') { e.preventDefault(); setSelectedIndex(i => Math.min(i + 1, totalItems - 1)) }
+      if (e.key === 'ArrowUp') { e.preventDefault(); setSelectedIndex(i => Math.max(i - 1, 0)) }
+      if (e.key === 'Enter') {
+        e.preventDefault()
+        const item = allItems[selectedIndex]
+        if (!item) return
+        onClose()
+        if (item.type === 'action') navigate(item.path)
+        else navigate(getTreeNavigatePath(item.id, item.tree_type))
+      }
+    }
+    document.addEventListener('keydown', handler)
+    return () => document.removeEventListener('keydown', handler)
+  }, [open, selectedIndex, totalItems, allItems, navigate, onClose])
+
+  if (!open) return null
+
+  return (
+    <div className="fixed inset-0 z-[100] flex items-start justify-center pt-[15vh]">
+      <div className="absolute inset-0 bg-black/60 backdrop-blur-sm animate-fade-in" onClick={onClose} />
+      <div ref={containerRef} className="relative w-full max-w-md rounded-xl border border-border bg-card shadow-2xl animate-scale-in">
+        <div className="flex items-center justify-between border-b border-border px-4 py-3">
+          <h3 className="text-sm font-heading font-semibold text-foreground">Quick Launch</h3>
+          <button onClick={onClose} className="rounded-lg p-1 text-muted-foreground hover:text-foreground">
+            <X size={16} />
+          </button>
+        </div>
+
+        <div className="max-h-80 overflow-y-auto p-1">
+          {/* Actions */}
+          <p className="px-3 py-1.5 text-[0.625rem] font-bold uppercase tracking-wider text-muted-foreground">Actions</p>
+          {ACTIONS.map((action, i) => {
+            const Icon = action.icon
+            return (
+              <button
+                key={action.id}
+                onClick={() => { onClose(); navigate(action.path) }}
+                onMouseEnter={() => setSelectedIndex(i)}
+                className={cn(
+                  'flex w-full items-center gap-3 rounded-lg px-3 py-2.5 text-left transition-colors',
+                  i === selectedIndex ? 'bg-accent text-foreground' : 'text-muted-foreground hover:bg-accent/50'
+                )}
+              >
+                <div
+                  className="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg"
+                  style={{ backgroundColor: `${action.color}15` }}
+                >
+                  <Icon size={16} style={{ color: action.color }} />
+                </div>
+                <div className="min-w-0">
+                  <p className="text-sm font-medium">{action.label}</p>
+                  <p className="text-[0.6875rem] text-muted-foreground">{action.description}</p>
+                </div>
+              </button>
+            )
+          })}
+
+          {/* Recent flows */}
+          {recentTrees.length > 0 && (
+            <>
+              <p className="mt-2 px-3 py-1.5 text-[0.625rem] font-bold uppercase tracking-wider text-muted-foreground">Recent Flows</p>
+              {recentTrees.slice(0, 4).map((tree, ti) => {
+                const idx = ACTIONS.length + ti
+                return (
+                  <button
+                    key={tree.id}
+                    onClick={() => { onClose(); navigate(getTreeNavigatePath(tree.id, tree.tree_type)) }}
+                    onMouseEnter={() => setSelectedIndex(idx)}
+                    className={cn(
+                      'flex w-full items-center gap-3 rounded-lg px-3 py-2.5 text-left transition-colors',
+                      idx === selectedIndex ? 'bg-accent text-foreground' : 'text-muted-foreground hover:bg-accent/50'
+                    )}
+                  >
+                    <div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-card border border-border text-base">
+                      {tree.tree_type === 'procedural' ? '📋' : '🔧'}
+                    </div>
+                    <div className="min-w-0">
+                      <p className="text-sm font-medium truncate">{tree.name}</p>
+                      <p className="text-[0.6875rem] text-muted-foreground">
+                        {tree.tree_type === 'procedural' ? 'Project' : 'Troubleshooting'} · {tree.usage_count} uses
+                      </p>
+                    </div>
+                    <Play size={14} className="ml-auto shrink-0 opacity-40" />
+                  </button>
+                )
+              })}
+            </>
+          )}
+        </div>
+
+        <div className="flex items-center gap-4 border-t border-border px-4 py-2">
+          <span className="flex items-center gap-1 text-[0.625rem] text-muted-foreground">
+            <kbd className="rounded border border-border bg-background px-1 py-px font-label">↑↓</kbd>
+            Navigate
+          </span>
+          <span className="flex items-center gap-1 text-[0.625rem] text-muted-foreground">
+            <kbd className="rounded border border-border bg-background px-1 py-px font-label">↵</kbd>
+            Open
+          </span>
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/frontend/src/components/layout/Sidebar.tsx b/frontend/src/components/layout/Sidebar.tsx
new file mode 100644
index 00000000..8345b000
--- /dev/null
+++ b/frontend/src/components/layout/Sidebar.tsx
@@ -0,0 +1,199 @@
+import { useEffect, useState } from 'react'
+import { useNavigate, useLocation } from 'react-router-dom'
+import { LayoutGrid, Box, PenLine, Clock, FileText, Bookmark, Users, Settings, PanelLeftClose, PanelLeftOpen } from 'lucide-react'
+import { cn } from '@/lib/utils'
+import { useUserPreferencesStore } from '@/store/userPreferencesStore'
+import { CategoryList } from '@/components/sidebar/CategoryList'
+import { TagCloud } from '@/components/sidebar/TagCloud'
+import { PinnedFlowsSection } from '@/components/sidebar/PinnedFlowsSection'
+import { NavItem } from './NavItem'
+import { categoriesApi, tagsApi, sessionsApi, treesApi } from '@/api'
+import { pinnedFlowsApi } from '@/api/pinnedFlows'
+import type { PinnedFlow } from '@/api/pinnedFlows'
+import { toast } from '@/lib/toast'
+
+interface CategoryItem {
+  id: string
+  name: string
+  color: string
+  count: number
+}
+
+export function Sidebar() {
+  const sidebarCollapsed = useUserPreferencesStore(s => s.sidebarCollapsed)
+  const toggleSidebar = useUserPreferencesStore(s => s.toggleSidebar)
+
+  const [categories, setCategories] = useState<CategoryItem[]>([])
+  const [tags, setTags] = useState<string[]>([])
+  const [activeCategoryId, setActiveCategoryId] = useState<string | null>(null)
+  const [activeTags, setActiveTags] = useState<string[]>([])
+  const [activeSessionCount, setActiveSessionCount] = useState(0)
+  const [pinnedFlows, setPinnedFlows] = useState<PinnedFlow[]>([])
+  const [treeCounts, setTreeCounts] = useState({ total: 0, troubleshooting: 0, procedural: 0 })
+
+  // Fetch sidebar data on mount
+  useEffect(() => {
+    const fetchData = async () => {
+      try {
+        const [cats, tagList, activeSessions, allTrees, pinnedData] = await Promise.all([
+          categoriesApi.list(),
+          tagsApi.list().catch(() => []),
+          sessionsApi.list({ completed: false, size: 50 }).catch(() => []),
+          treesApi.list({ sort_by: 'name' }).catch(() => []),
+          pinnedFlowsApi.list().catch(() => ({ items: [], count: 0 })),
+        ])
+        setCategories(cats.map(c => ({
+          id: c.id,
+          name: c.name,
+          color: c.color || '#3b82f6',
+          count: c.tree_count || 0,
+        })))
+        setTags(tagList.map((t: { name: string }) => t.name).slice(0, 15))
+        setActiveSessionCount(activeSessions.length)
+        setPinnedFlows(pinnedData.items)
+
+        const total = allTrees.length
+        const troubleshooting = allTrees.filter(t => t.tree_type === 'troubleshooting').length
+        const procedural = allTrees.filter(t => t.tree_type === 'procedural').length
+        setTreeCounts({ total, troubleshooting, procedural })
+      } catch {
+        // Silently handle errors
+      }
+    }
+    fetchData()
+  }, [])
+
+  const navigate = useNavigate()
+  const location = useLocation()
+
+  // Sync active filters from URL when on /trees page
+  useEffect(() => {
+    if (location.pathname === '/trees') {
+      const params = new URLSearchParams(location.search)
+      setActiveCategoryId(params.get('category') || null)
+      const tagsParam = params.get('tags')
+      setActiveTags(tagsParam ? tagsParam.split(',') : [])
+    }
+  }, [location.pathname, location.search])
+
+  const handleCategorySelect = (id: string | null) => {
+    setActiveCategoryId(id)
+    const params = new URLSearchParams(location.search)
+    if (id) {
+      params.set('category', id)
+    } else {
+      params.delete('category')
+    }
+    navigate(`/trees?${params.toString()}`)
+  }
+
+  const handleTagClick = (tag: string) => {
+    const next = activeTags.includes(tag)
+      ? activeTags.filter(t => t !== tag)
+      : [...activeTags, tag]
+    setActiveTags(next)
+    const params = new URLSearchParams(location.search)
+    if (next.length > 0) {
+      params.set('tags', next.join(','))
+    } else {
+      params.delete('tags')
+    }
+    navigate(`/trees?${params.toString()}`)
+  }
+
+  const handleUnpin = async (treeId: string) => {
+    try {
+      await pinnedFlowsApi.unpin(treeId)
+      setPinnedFlows(prev => prev.filter(f => f.tree_id !== treeId))
+      toast.success('Unpinned from sidebar')
+    } catch {
+      toast.error('Failed to unpin flow')
+    }
+  }
+
+  return (
+    <nav className="sidebar flex flex-col border-r border-border bg-[hsl(var(--sidebar-bg))]">
+      {sidebarCollapsed ? (
+        <>
+          {/* Collapsed: icon-only nav */}
+          <div className="flex flex-col items-center px-1.5 py-3 space-y-1">
+            <NavItem href="/" icon={LayoutGrid} label="Dashboard" collapsed />
+            <NavItem href="/trees" icon={Box} label="All Flows" matchPaths={['/trees', '/flows']} collapsed />
+            <NavItem href="/my-trees" icon={PenLine} label="Flow Editor" collapsed />
+            <NavItem href="/sessions" icon={Clock} label="Sessions" badge={activeSessionCount || undefined} collapsed />
+            <NavItem href="/shares" icon={FileText} label="Exports" collapsed />
+            <NavItem href="/step-library" icon={Bookmark} label="Step Library" collapsed />
+          </div>
+        </>
+      ) : (
+        <>
+          {/* Pinned Flows */}
+          <PinnedFlowsSection flows={pinnedFlows} onUnpin={handleUnpin} />
+
+          <div className="border-b border-[hsl(var(--border-subtle))]" />
+
+          {/* Primary Navigation */}
+          <div className="px-3 py-2 space-y-0.5">
+            <NavItem href="/" icon={LayoutGrid} label="Dashboard" />
+            <NavItem
+              href="/trees"
+              icon={Box}
+              label="All Flows"
+              badge={treeCounts.total || undefined}
+              matchPaths={['/trees', '/flows']}
+              children={[
+                { href: '/trees?type=troubleshooting', label: 'Troubleshooting', count: treeCounts.troubleshooting || undefined },
+                { href: '/trees?type=procedural', label: 'Projects', count: treeCounts.procedural || undefined },
+              ]}
+            />
+            <NavItem href="/my-trees" icon={PenLine} label="Flow Editor" />
+            <NavItem href="/sessions" icon={Clock} label="Sessions" badge={activeSessionCount || undefined} />
+            <NavItem href="/shares" icon={FileText} label="Exports" />
+            <NavItem href="/step-library" icon={Bookmark} label="Step Library" badge="dot" />
+          </div>
+
+          <div className="border-b border-[hsl(var(--border-subtle))]" />
+
+          {/* Categories */}
+          <CategoryList
+            categories={categories}
+            activeId={activeCategoryId}
+            onSelect={handleCategorySelect}
+          />
+
+          <div className="border-b border-[hsl(var(--border-subtle))]" />
+
+          {/* Tags */}
+          <TagCloud tags={tags} activeTags={activeTags} onTagClick={handleTagClick} />
+        </>
+      )}
+
+      {/* Spacer */}
+      <div className="flex-1" />
+
+      {/* Footer */}
+      <div className={cn(
+        "border-t border-[hsl(var(--border-subtle))]",
+        sidebarCollapsed ? "px-1.5 py-2 flex flex-col items-center" : "px-3 py-2 space-y-0.5"
+      )}>
+        {!sidebarCollapsed && (
+          <>
+            <NavItem href="/account" icon={Users} label="Team" />
+            <NavItem href="/account" icon={Settings} label="Settings" />
+          </>
+        )}
+        <button
+          onClick={toggleSidebar}
+          className={cn(
+            "flex w-full items-center rounded-lg text-[0.8125rem] font-medium text-muted-foreground hover:bg-[hsl(var(--sidebar-hover))] hover:text-foreground transition-colors",
+            sidebarCollapsed ? "justify-center p-2.5" : "gap-3 px-3 py-2"
+          )}
+          title={sidebarCollapsed ? 'Expand sidebar' : 'Collapse sidebar'}
+        >
+          {sidebarCollapsed ? <PanelLeftOpen size={20} /> : <PanelLeftClose size={18} />}
+          {!sidebarCollapsed && <span>Collapse</span>}
+        </button>
+      </div>
+    </nav>
+  )
+}
diff --git a/frontend/src/components/layout/TopBar.tsx b/frontend/src/components/layout/TopBar.tsx
new file mode 100644
index 00000000..fbb00762
--- /dev/null
+++ b/frontend/src/components/layout/TopBar.tsx
@@ -0,0 +1,174 @@
+import { useState, useRef, useEffect, useCallback } from 'react'
+import { Link, useNavigate } from 'react-router-dom'
+import { Search, Zap, LogOut, User, Shield, Settings } from 'lucide-react'
+import { useAuthStore } from '@/store/authStore'
+import { usePermissions } from '@/hooks/usePermissions'
+import { BrandLogo } from '@/components/common/BrandLogo'
+import { CommandPalette } from './CommandPalette'
+import { QuickLaunch } from './QuickLaunch'
+import { NotificationsPanel } from './NotificationsPanel'
+import { cn } from '@/lib/utils'
+
+export function TopBar() {
+  const navigate = useNavigate()
+  const { user, logout } = useAuthStore()
+  const { effectiveRole, isSuperAdmin } = usePermissions()
+
+  const [userMenuOpen, setUserMenuOpen] = useState(false)
+  const [commandPaletteOpen, setCommandPaletteOpen] = useState(false)
+  const [quickLaunchOpen, setQuickLaunchOpen] = useState(false)
+  const menuRef = useRef<HTMLDivElement>(null)
+
+  const handleLogout = async () => {
+    setUserMenuOpen(false)
+    await logout()
+    navigate('/login')
+  }
+
+  useEffect(() => {
+    const handleClickOutside = (e: MouseEvent) => {
+      if (menuRef.current && !menuRef.current.contains(e.target as Node)) {
+        setUserMenuOpen(false)
+      }
+    }
+    if (userMenuOpen) document.addEventListener('mousedown', handleClickOutside)
+    return () => document.removeEventListener('mousedown', handleClickOutside)
+  }, [userMenuOpen])
+
+  // ⌘K / Ctrl+K global shortcut
+  const handleGlobalKeyDown = useCallback((e: KeyboardEvent) => {
+    if ((e.metaKey || e.ctrlKey) && e.key === 'k') {
+      e.preventDefault()
+      setCommandPaletteOpen(prev => !prev)
+    }
+  }, [])
+
+  useEffect(() => {
+    document.addEventListener('keydown', handleGlobalKeyDown)
+    return () => document.removeEventListener('keydown', handleGlobalKeyDown)
+  }, [handleGlobalKeyDown])
+
+  const initials = user?.name
+    ? user.name.split(' ').map(n => n[0]).join('').toUpperCase().slice(0, 2)
+    : user?.email?.[0]?.toUpperCase() || '?'
+
+  return (
+    <>
+      <header className="topbar flex items-center gap-4 border-b border-border bg-background px-4">
+        {/* Logo area */}
+        <Link
+          to="/"
+          className="flex items-center gap-2.5 pr-4 transition-all duration-200"
+        >
+          <div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-gradient-brand">
+            <BrandLogo size="sm" className="h-4 w-4" />
+          </div>
+          <span className="text-sm font-heading font-bold tracking-tight whitespace-nowrap">
+            <span className="text-foreground">Resolution</span>
+            <span className="text-gradient-brand">Flow</span>
+          </span>
+        </Link>
+
+        {/* Spacer - push search to center */}
+        <div className="flex-1" />
+
+        {/* Search trigger */}
+        <button
+          onClick={() => setCommandPaletteOpen(true)}
+          className="relative w-full text-left"
+          style={{ maxWidth: '480px' }}
+        >
+          <Search size={16} className="absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground" />
+          <div className="w-full rounded-lg border border-border bg-card py-2 pl-9 pr-14 text-[0.8125rem] text-muted-foreground cursor-pointer hover:border-primary/30 transition-colors">
+            Search flows, sessions, tags…
+          </div>
+          <span className="absolute right-3 top-1/2 -translate-y-1/2 rounded border border-border bg-background px-1.5 py-0.5 font-label text-[0.625rem] text-muted-foreground">
+            {navigator.platform?.toLowerCase().includes('mac') ? '⌘K' : 'Ctrl+K'}
+          </span>
+        </button>
+
+        {/* Spacer - push actions to right */}
+        <div className="flex-1" />
+
+        {/* Action buttons */}
+        <div className="flex items-center gap-1">
+          <button
+            onClick={() => setQuickLaunchOpen(true)}
+            className="rounded-lg p-2 text-muted-foreground hover:bg-card hover:text-foreground transition-colors"
+            title="Quick Launch"
+          >
+            <Zap size={18} />
+          </button>
+          <NotificationsPanel />
+
+          {/* User avatar & menu */}
+          <div className="relative ml-2" ref={menuRef}>
+            <button
+              onClick={() => setUserMenuOpen(!userMenuOpen)}
+              className="flex h-8 w-8 items-center justify-center rounded-full bg-gradient-brand text-xs font-heading font-bold text-white hover:opacity-90 transition-opacity"
+              title={user?.name || user?.email || 'User'}
+            >
+              {initials}
+            </button>
+
+            {userMenuOpen && (
+              <div className="absolute right-0 z-50 mt-2 w-56 rounded-lg border border-border bg-card p-1 shadow-xl animate-scale-in">
+                <div className="border-b border-border px-3 py-2.5 mb-1">
+                  <p className="text-sm font-medium text-foreground truncate">{user?.name || user?.email}</p>
+                  {effectiveRole && effectiveRole !== 'engineer' && (
+                    <span className="mt-1 inline-flex items-center gap-1 text-xs text-muted-foreground">
+                      <Shield size={10} />
+                      {effectiveRole === 'super_admin' ? 'Super Admin' : effectiveRole === 'owner' ? 'Owner' : 'Viewer'}
+                    </span>
+                  )}
+                </div>
+                <Link
+                  to="/account"
+                  onClick={() => setUserMenuOpen(false)}
+                  className="flex items-center gap-2 rounded-md px-3 py-2 text-sm text-muted-foreground hover:bg-accent hover:text-foreground"
+                >
+                  <User size={14} />
+                  Account
+                </Link>
+                <Link
+                  to="/account"
+                  onClick={() => setUserMenuOpen(false)}
+                  className="flex items-center gap-2 rounded-md px-3 py-2 text-sm text-muted-foreground hover:bg-accent hover:text-foreground"
+                >
+                  <Settings size={14} />
+                  Settings
+                </Link>
+                {isSuperAdmin && (
+                  <Link
+                    to="/admin"
+                    onClick={() => setUserMenuOpen(false)}
+                    className="flex items-center gap-2 rounded-md px-3 py-2 text-sm text-muted-foreground hover:bg-accent hover:text-foreground"
+                  >
+                    <Shield size={14} />
+                    Admin Panel
+                  </Link>
+                )}
+                <div className="border-t border-border mt-1 pt-1">
+                  <button
+                    onClick={handleLogout}
+                    className={cn(
+                      'flex w-full items-center gap-2 rounded-md px-3 py-2 text-sm',
+                      'text-muted-foreground hover:bg-accent hover:text-foreground'
+                    )}
+                  >
+                    <LogOut size={14} />
+                    Logout
+                  </button>
+                </div>
+              </div>
+            )}
+          </div>
+        </div>
+      </header>
+
+      {/* Command Palette */}
+      <CommandPalette open={commandPaletteOpen} onClose={() => setCommandPaletteOpen(false)} />
+      <QuickLaunch open={quickLaunchOpen} onClose={() => setQuickLaunchOpen(false)} />
+    </>
+  )
+}
diff --git a/frontend/src/components/library/AddToFolderMenu.tsx b/frontend/src/components/library/AddToFolderMenu.tsx
index 5764b359..ff3a4105 100644
--- a/frontend/src/components/library/AddToFolderMenu.tsx
+++ b/frontend/src/components/library/AddToFolderMenu.tsx
@@ -89,8 +89,8 @@ export function AddToFolderMenu({ treeId, onFolderCreated }: AddToFolderMenuProp
           setIsOpen(!isOpen)
         }}
         className={cn(
-          'rounded-md border border-white/10 p-1.5 text-white/60',
-          'hover:bg-white/10 hover:text-white'
+          'rounded-md border border-border p-1.5 text-muted-foreground',
+          'hover:bg-accent hover:text-foreground'
         )}
         title="Add to folder"
         aria-label="Add to folder"
@@ -101,14 +101,14 @@ export function AddToFolderMenu({ treeId, onFolderCreated }: AddToFolderMenuProp
       {isOpen && (
         <div
           className={cn(
-            'absolute right-0 top-full z-20 mt-1 w-48 rounded-md border border-white/10',
-            'bg-black/90 backdrop-blur-sm py-1 shadow-lg'
+            'absolute right-0 top-full z-20 mt-1 w-48 rounded-md border border-border',
+            'bg-card backdrop-blur-sm py-1 shadow-lg'
           )}
         >
           {isLoading ? (
-            <div className="px-3 py-2 text-sm text-white/40">Loading...</div>
+            <div className="px-3 py-2 text-sm text-muted-foreground">Loading...</div>
           ) : folders.length === 0 ? (
-            <div className="px-3 py-2 text-sm text-white/40">No folders yet</div>
+            <div className="px-3 py-2 text-sm text-muted-foreground">No folders yet</div>
           ) : (
             folders.map((folder) => (
               <button
@@ -117,7 +117,7 @@ export function AddToFolderMenu({ treeId, onFolderCreated }: AddToFolderMenuProp
                   e.stopPropagation()
                   toggleFolder(folder.id)
                 }}
-                className="flex w-full items-center gap-2 px-3 py-1.5 text-sm text-white/70 hover:bg-white/[0.06] hover:text-white"
+                className="flex w-full items-center gap-2 px-3 py-1.5 text-sm text-muted-foreground hover:bg-accent hover:text-foreground"
               >
                 <div
                   className="h-3 w-3 rounded-sm"
@@ -125,13 +125,13 @@ export function AddToFolderMenu({ treeId, onFolderCreated }: AddToFolderMenuProp
                 />
                 <span className="flex-1 truncate text-left">{folder.name}</span>
                 {treeFolderIds.has(folder.id) && (
-                  <Check className="h-4 w-4 text-white" />
+                  <Check className="h-4 w-4 text-foreground" />
                 )}
               </button>
             ))
           )}
 
-          <div className="border-t border-white/10 my-1" />
+          <div className="border-t border-border my-1" />
 
           <button
             onClick={(e) => {
@@ -139,7 +139,7 @@ export function AddToFolderMenu({ treeId, onFolderCreated }: AddToFolderMenuProp
               setIsOpen(false)
               onFolderCreated?.()
             }}
-            className="flex w-full items-center gap-2 px-3 py-1.5 text-sm text-white/70 hover:bg-white/[0.06] hover:text-white"
+            className="flex w-full items-center gap-2 px-3 py-1.5 text-sm text-muted-foreground hover:bg-accent hover:text-foreground"
           >
             <Plus className="h-4 w-4" />
             Create new folder
diff --git a/frontend/src/components/library/FolderEditModal.tsx b/frontend/src/components/library/FolderEditModal.tsx
index a8f10f9c..55d88bff 100644
--- a/frontend/src/components/library/FolderEditModal.tsx
+++ b/frontend/src/components/library/FolderEditModal.tsx
@@ -177,12 +177,12 @@ export function FolderEditModal({
       <div className="absolute inset-0 bg-black/80 backdrop-blur-sm" onClick={onClose} />
 
       {/* Modal */}
-      <div className="relative z-10 w-full max-w-md glass-card rounded-2xl p-6 shadow-lg">
+      <div className="relative z-10 w-full max-w-md bg-card border border-border rounded-2xl p-6 shadow-lg">
         <div className="mb-4 flex items-center justify-between">
-          <h2 className="text-lg font-semibold text-white">
+          <h2 className="text-lg font-semibold text-foreground">
             {isEditMode ? 'Edit Folder' : initialParentId ? 'Create Subfolder' : 'Create Folder'}
           </h2>
-          <button onClick={onClose} className="rounded-md p-1 text-white/40 hover:bg-white/[0.06] hover:text-white">
+          <button onClick={onClose} className="rounded-md p-1 text-muted-foreground hover:bg-accent/50 hover:text-foreground">
             <X className="h-5 w-5" />
           </button>
         </div>
@@ -190,7 +190,7 @@ export function FolderEditModal({
         <form onSubmit={handleSubmit}>
           {/* Name input */}
           <div className="mb-4">
-            <label htmlFor="folder-name" className="block text-sm font-medium text-white">
+            <label htmlFor="folder-name" className="block text-sm font-medium text-foreground">
               Name
             </label>
             <input
@@ -201,9 +201,9 @@ export function FolderEditModal({
               placeholder="e.g., Citrix Issues"
               className={cn(
                 'mt-1 block w-full rounded-md border px-3 py-2 text-sm',
-                'bg-black/50 text-white placeholder:text-white/40',
-                'focus:border-white/30 focus:outline-none focus:ring-1 focus:ring-white/20',
-                'border-white/10'
+                'bg-card text-foreground placeholder:text-muted-foreground',
+                'focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/20',
+                'border-border'
               )}
               autoFocus
             />
@@ -211,7 +211,7 @@ export function FolderEditModal({
 
           {/* Parent folder dropdown */}
           <div className="mb-4">
-            <label htmlFor="folder-parent" className="block text-sm font-medium text-white">
+            <label htmlFor="folder-parent" className="block text-sm font-medium text-foreground">
               Parent Folder
             </label>
             <select
@@ -220,9 +220,9 @@ export function FolderEditModal({
               onChange={(e) => setParentId(e.target.value || null)}
               className={cn(
                 'mt-1 block w-full rounded-md border px-3 py-2 text-sm',
-                'bg-black/50 text-white',
-                'focus:border-white/30 focus:outline-none focus:ring-1 focus:ring-white/20',
-                'border-white/10'
+                'bg-card text-foreground',
+                'focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/20',
+                'border-border'
               )}
             >
               <option value="">None (root level)</option>
@@ -232,14 +232,14 @@ export function FolderEditModal({
                 </option>
               ))}
             </select>
-            <p className="mt-1 text-xs text-white/40">
+            <p className="mt-1 text-xs text-muted-foreground">
               Folders can be nested up to 3 levels deep.
             </p>
           </div>
 
           {/* Color picker */}
           <div className="mb-6">
-            <label className="block text-sm font-medium text-white">Color</label>
+            <label className="block text-sm font-medium text-foreground">Color</label>
             <div className="mt-2 flex flex-wrap gap-2">
               {FOLDER_COLORS.map((c) => (
                 <button
@@ -262,7 +262,7 @@ export function FolderEditModal({
             <button
               type="button"
               onClick={onClose}
-              className={cn('rounded-md border border-white/10 px-4 py-2 text-sm text-white/60', 'hover:bg-white/10 hover:text-white')}
+              className={cn('rounded-md border border-border px-4 py-2 text-sm text-muted-foreground', 'hover:bg-accent hover:text-foreground')}
             >
               Cancel
             </button>
@@ -270,8 +270,8 @@ export function FolderEditModal({
               type="submit"
               disabled={isSubmitting}
               className={cn(
-                'rounded-md bg-white px-4 py-2 text-sm font-medium text-black',
-                'hover:bg-white/90',
+                'rounded-md bg-gradient-brand px-4 py-2 text-sm font-medium text-white shadow-lg shadow-primary/20',
+                'hover:opacity-90',
                 'disabled:opacity-50'
               )}
             >
diff --git a/frontend/src/components/library/FolderSidebar.tsx b/frontend/src/components/library/FolderSidebar.tsx
index ffd9bdd6..75c2a4dd 100644
--- a/frontend/src/components/library/FolderSidebar.tsx
+++ b/frontend/src/components/library/FolderSidebar.tsx
@@ -113,8 +113,8 @@ function FolderItem({
           onClick={() => onFolderSelect(folder.id)}
           className={cn(
             'flex w-full items-center gap-1 rounded-md py-1.5 text-sm',
-            'transition-colors hover:bg-white/[0.06]',
-            selectedFolderId === folder.id && 'bg-white/10 text-white font-medium'
+            'transition-colors hover:bg-accent',
+            selectedFolderId === folder.id && 'bg-accent text-foreground font-medium'
           )}
           style={{ paddingLeft: `${8 + depth * 16}px`, paddingRight: '8px' }}
         >
@@ -125,7 +125,7 @@ function FolderItem({
                 e.stopPropagation()
                 onToggleExpand(folder.id)
               }}
-              className="shrink-0 p-0.5 hover:bg-white/[0.06] rounded"
+              className="shrink-0 p-0.5 hover:bg-accent rounded"
             >
               {isExpanded ? (
                 <ChevronDown className="h-3 w-3" />
@@ -138,7 +138,7 @@ function FolderItem({
           )}
           <Folder className="h-4 w-4 shrink-0" style={{ color: folder.color }} />
           <span className="flex-1 truncate text-left">{folder.name}</span>
-          <span className="text-xs text-white/40 group-hover:hidden">{folder.tree_count}</span>
+          <span className="text-xs text-muted-foreground group-hover:hidden">{folder.tree_count}</span>
         </button>
 
         {/* Folder menu button - replaces tree count on hover */}
@@ -150,7 +150,7 @@ function FolderItem({
           className={cn(
             'absolute right-1 top-1/2 -translate-y-1/2 rounded p-1',
             'hidden group-hover:block',
-            'hover:bg-white/[0.06]'
+            'hover:bg-accent'
           )}
         >
           <MoreVertical className="h-3 w-3" />
@@ -160,8 +160,8 @@ function FolderItem({
         {menuOpenId === folder.id && (
           <div
             className={cn(
-              'absolute right-0 top-full z-10 mt-1 w-40 rounded-md border border-white/10',
-              'bg-black/90 backdrop-blur-sm py-1 shadow-lg'
+              'absolute right-0 top-full z-10 mt-1 w-40 rounded-md border border-border',
+              'bg-card backdrop-blur-sm py-1 shadow-lg'
             )}
           >
             <button
@@ -170,7 +170,7 @@ function FolderItem({
                 onEditFolder(folder)
                 onMenuToggle(null)
               }}
-              className="flex w-full items-center gap-2 px-3 py-1.5 text-sm text-white/70 hover:bg-white/[0.06] hover:text-white"
+              className="flex w-full items-center gap-2 px-3 py-1.5 text-sm text-muted-foreground hover:bg-accent hover:text-foreground"
             >
               <Pencil className="h-3 w-3" />
               Edit
@@ -182,7 +182,7 @@ function FolderItem({
                   onAddSubfolder(folder.id)
                   onMenuToggle(null)
                 }}
-                className="flex w-full items-center gap-2 px-3 py-1.5 text-sm text-white/70 hover:bg-white/[0.06] hover:text-white"
+                className="flex w-full items-center gap-2 px-3 py-1.5 text-sm text-muted-foreground hover:bg-accent hover:text-foreground"
               >
                 <FolderPlus className="h-3 w-3" />
                 Add Subfolder
@@ -362,7 +362,7 @@ export function FolderSidebar({
       />
     )}
     <div className={cn(
-      'w-56 shrink-0 border-r border-white/[0.06] bg-transparent',
+      'w-56 shrink-0 border-r border-border bg-transparent',
       'hidden md:block',
       mobileOpen && 'fixed inset-y-0 left-0 z-50 block animate-slide-in-left md:relative md:animate-none'
     )}>
@@ -370,10 +370,10 @@ export function FolderSidebar({
         {/* Mobile close button */}
         {mobileOpen && (
           <div className="mb-3 flex items-center justify-between md:hidden">
-            <span className="text-sm font-medium text-white">Folders</span>
+            <span className="text-sm font-medium text-foreground">Folders</span>
             <button
               onClick={onMobileClose}
-              className="rounded-md p-1.5 text-white/40 hover:bg-white/[0.06]"
+              className="rounded-md p-1.5 text-muted-foreground hover:bg-accent"
               aria-label="Close folders"
             >
               <X className="h-4 w-4" />
@@ -382,7 +382,7 @@ export function FolderSidebar({
         )}
         <button
           onClick={() => setIsExpanded(!isExpanded)}
-          className="flex w-full items-center gap-2 text-sm font-medium text-white"
+          className="flex w-full items-center gap-2 text-sm font-medium text-foreground"
         >
           {isExpanded ? (
             <ChevronDown className="h-4 w-4" />
@@ -399,8 +399,8 @@ export function FolderSidebar({
               onClick={() => onFolderSelect(null)}
               className={cn(
                 'flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-sm',
-                'transition-colors hover:bg-white/[0.06]',
-                selectedFolderId === null && 'bg-white/10 text-white font-medium'
+                'transition-colors hover:bg-accent',
+                selectedFolderId === null && 'bg-accent text-foreground font-medium'
               )}
             >
               <Folder className="h-4 w-4" />
@@ -409,7 +409,7 @@ export function FolderSidebar({
 
             {/* Loading state */}
             {isLoading ? (
-              <div className="px-2 py-1.5 text-sm text-white/40">Loading...</div>
+              <div className="px-2 py-1.5 text-sm text-muted-foreground">Loading...</div>
             ) : (
               <>
                 {/* User folders (hierarchical) */}
@@ -439,7 +439,7 @@ export function FolderSidebar({
               onClick={() => onCreateFolder(null)}
               className={cn(
                 'flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-sm',
-                'text-white/50 transition-colors hover:bg-white/[0.06] hover:text-white'
+                'text-muted-foreground transition-colors hover:bg-accent hover:text-foreground'
               )}
             >
               <Plus className="h-4 w-4" />
@@ -454,8 +454,8 @@ export function FolderSidebar({
     {contextMenu && (
       <div
         className={cn(
-          'fixed z-50 w-44 rounded-md border border-white/10',
-          'bg-black/90 backdrop-blur-sm py-1 shadow-lg'
+          'fixed z-50 w-44 rounded-md border border-border',
+          'bg-card backdrop-blur-sm py-1 shadow-lg'
         )}
         style={{ left: contextMenu.x, top: contextMenu.y }}
         onClick={(e) => e.stopPropagation()}
@@ -465,7 +465,7 @@ export function FolderSidebar({
             onEditFolder(contextMenu.folder)
             closeContextMenu()
           }}
-          className="flex w-full items-center gap-2 px-3 py-1.5 text-sm text-white/70 hover:bg-white/[0.06] hover:text-white"
+          className="flex w-full items-center gap-2 px-3 py-1.5 text-sm text-muted-foreground hover:bg-accent hover:text-foreground"
         >
           <Pencil className="h-3 w-3" />
           Edit
@@ -476,7 +476,7 @@ export function FolderSidebar({
               handleAddSubfolder(contextMenu.folder.id)
               closeContextMenu()
             }}
-            className="flex w-full items-center gap-2 px-3 py-1.5 text-sm text-white/70 hover:bg-white/[0.06] hover:text-white"
+            className="flex w-full items-center gap-2 px-3 py-1.5 text-sm text-muted-foreground hover:bg-accent hover:text-foreground"
           >
             <FolderPlus className="h-3 w-3" />
             Add Subfolder
diff --git a/frontend/src/components/library/ShareTreeModal.tsx b/frontend/src/components/library/ShareTreeModal.tsx
index 311e2196..ee4be0e8 100644
--- a/frontend/src/components/library/ShareTreeModal.tsx
+++ b/frontend/src/components/library/ShareTreeModal.tsx
@@ -119,13 +119,13 @@ export function ShareTreeModal({ tree, isOpen, onClose }: ShareTreeModalProps) {
       />
 
       {/* Modal */}
-      <div className="relative w-full max-w-lg glass-card rounded-2xl shadow-lg">
+      <div className="relative w-full max-w-lg bg-card border border-border rounded-2xl shadow-lg">
         {/* Header */}
-        <div className="flex items-center justify-between border-b border-white/[0.06] px-6 py-4">
-          <h2 className="text-lg font-semibold text-white">Share Tree</h2>
+        <div className="flex items-center justify-between border-b border-border px-6 py-4">
+          <h2 className="text-lg font-semibold text-foreground">Share Tree</h2>
           <button
             onClick={onClose}
-            className="rounded-md p-1 text-white/40 hover:bg-white/[0.06] hover:text-white"
+            className="rounded-md p-1 text-muted-foreground hover:bg-accent/50 hover:text-foreground"
           >
             <X className="h-5 w-5" />
           </button>
@@ -135,9 +135,9 @@ export function ShareTreeModal({ tree, isOpen, onClose }: ShareTreeModalProps) {
         <div className="px-6 py-4 space-y-6">
           {/* Tree Info */}
           <div>
-            <h3 className="font-medium text-white">{tree.name}</h3>
+            <h3 className="font-medium text-foreground">{tree.name}</h3>
             {tree.description && (
-              <p className="mt-1 text-sm text-white/70 line-clamp-2">
+              <p className="mt-1 text-sm text-muted-foreground line-clamp-2">
                 {tree.description}
               </p>
             )}
@@ -145,7 +145,7 @@ export function ShareTreeModal({ tree, isOpen, onClose }: ShareTreeModalProps) {
 
           {/* Visibility Settings */}
           <div>
-            <label className="mb-2 block text-sm font-medium text-white">
+            <label className="mb-2 block text-sm font-medium text-foreground">
               Visibility
             </label>
             <div className="space-y-2">
@@ -156,19 +156,19 @@ export function ShareTreeModal({ tree, isOpen, onClose }: ShareTreeModalProps) {
                   className={cn(
                     'flex w-full items-center gap-3 rounded-md border px-4 py-3 text-left transition-colors',
                     visibility === level
-                      ? 'border-white/20 bg-white/10 text-white'
-                      : 'border-white/[0.06] bg-transparent text-white/50 hover:border-white/20 hover:bg-white/[0.06]'
+                      ? 'border-border bg-accent text-foreground'
+                      : 'border-border bg-transparent text-muted-foreground hover:border-primary/30 hover:bg-accent/50'
                   )}
                 >
                   {getVisibilityIcon(level)}
                   <div className="flex-1">
                     <div className="text-sm font-medium capitalize">{level}</div>
-                    <div className="text-xs text-white/40">
+                    <div className="text-xs text-muted-foreground">
                       {getVisibilityDescription(level)}
                     </div>
                   </div>
                   {visibility === level && (
-                    <div className="h-2 w-2 rounded-full bg-white" />
+                    <div className="h-2 w-2 rounded-full bg-foreground" />
                   )}
                 </button>
               ))}
@@ -178,7 +178,7 @@ export function ShareTreeModal({ tree, isOpen, onClose }: ShareTreeModalProps) {
           {/* Share Link Generation */}
           {visibility !== 'private' && (
             <div>
-              <label className="mb-2 block text-sm font-medium text-white">
+              <label className="mb-2 block text-sm font-medium text-foreground">
                 Share Link
               </label>
 
@@ -189,11 +189,11 @@ export function ShareTreeModal({ tree, isOpen, onClose }: ShareTreeModalProps) {
                   id="allow-forking"
                   checked={allowForking}
                   onChange={(e) => setAllowForking(e.target.checked)}
-                  className="h-4 w-4 rounded border-white/10 bg-black/50 text-white focus:ring-2 focus:ring-white/20 focus:ring-offset-2 focus:ring-offset-black"
+                  className="h-4 w-4 rounded border-border bg-card text-foreground focus:ring-2 focus:ring-primary/20 focus:ring-offset-2 focus:ring-offset-black"
                 />
                 <label
                   htmlFor="allow-forking"
-                  className="text-sm text-white/70 cursor-pointer"
+                  className="text-sm text-muted-foreground cursor-pointer"
                 >
                   Allow recipients to fork this tree
                 </label>
@@ -205,8 +205,8 @@ export function ShareTreeModal({ tree, isOpen, onClose }: ShareTreeModalProps) {
                   onClick={handleGenerateLink}
                   disabled={isGenerating}
                   className={cn(
-                    'w-full rounded-md bg-white px-4 py-2 text-sm font-medium text-black',
-                    'hover:bg-white/90 disabled:opacity-50 disabled:cursor-not-allowed'
+                    'w-full rounded-md bg-gradient-brand px-4 py-2 text-sm font-medium text-white shadow-lg shadow-primary/20',
+                    'hover:opacity-90 disabled:opacity-50 disabled:cursor-not-allowed'
                   )}
                 >
                   {isGenerating ? 'Generating...' : 'Generate Share Link'}
@@ -216,20 +216,20 @@ export function ShareTreeModal({ tree, isOpen, onClose }: ShareTreeModalProps) {
               {/* Active Share Link */}
               {activeShare && (
                 <div className="space-y-2">
-                  <div className="flex items-center gap-2 rounded-md border border-white/10 bg-black/50 p-3">
+                  <div className="flex items-center gap-2 rounded-md border border-border bg-card p-3">
                     <input
                       type="text"
                       value={activeShare.share_url}
                       readOnly
-                      className="flex-1 bg-transparent text-sm text-white outline-none"
+                      className="flex-1 bg-transparent text-sm text-foreground outline-none"
                     />
                     <button
                       onClick={handleCopyLink}
                       className={cn(
-                        'flex items-center gap-2 rounded-md border border-white/10 px-3 py-1.5 text-sm font-medium transition-colors',
+                        'flex items-center gap-2 rounded-md border border-border px-3 py-1.5 text-sm font-medium transition-colors',
                         copied
                           ? 'border-green-500 bg-green-500/10 text-green-400'
-                          : 'text-white/60 hover:bg-white/10 hover:text-white'
+                          : 'text-muted-foreground hover:bg-accent hover:text-foreground'
                       )}
                     >
                       {copied ? (
@@ -245,13 +245,13 @@ export function ShareTreeModal({ tree, isOpen, onClose }: ShareTreeModalProps) {
                       )}
                     </button>
                   </div>
-                  <p className="text-xs text-white/40">
+                  <p className="text-xs text-muted-foreground">
                     {activeShare.allow_forking
                       ? 'Recipients can fork this tree'
                       : 'Forking disabled for this share'}
                   </p>
                   {shares.length > 1 && (
-                    <p className="text-xs text-white/40">
+                    <p className="text-xs text-muted-foreground">
                       {shares.length} active share links
                     </p>
                   )}
@@ -262,12 +262,12 @@ export function ShareTreeModal({ tree, isOpen, onClose }: ShareTreeModalProps) {
         </div>
 
         {/* Footer */}
-        <div className="flex justify-end gap-3 border-t border-white/[0.06] px-6 py-4">
+        <div className="flex justify-end gap-3 border-t border-border px-6 py-4">
           <button
             onClick={onClose}
             className={cn(
-              'rounded-md border border-white/10 px-4 py-2 text-sm font-medium text-white/60',
-              'hover:bg-white/10 hover:text-white'
+              'rounded-md border border-border px-4 py-2 text-sm font-medium text-muted-foreground',
+              'hover:bg-accent hover:text-foreground'
             )}
           >
             Close
diff --git a/frontend/src/components/library/SortDropdown.tsx b/frontend/src/components/library/SortDropdown.tsx
index 56f1cc35..18e04172 100644
--- a/frontend/src/components/library/SortDropdown.tsx
+++ b/frontend/src/components/library/SortDropdown.tsx
@@ -21,7 +21,7 @@ const sortOptions: { value: SortBy; label: string }[] = [
 export function SortDropdown({ value, onChange, className }: SortDropdownProps) {
   return (
     <div className={cn('relative inline-flex items-center', className)}>
-      <span className="mr-2 flex items-center gap-1.5 text-sm text-white/40">
+      <span className="mr-2 flex items-center gap-1.5 text-sm text-muted-foreground">
         <ArrowUpDown className="h-4 w-4" />
         <span className="hidden sm:inline">Sort:</span>
       </span>
@@ -29,8 +29,8 @@ export function SortDropdown({ value, onChange, className }: SortDropdownProps)
         value={value}
         onChange={(e) => onChange(e.target.value as SortBy)}
         className={cn(
-          'rounded-md border border-white/10 bg-black/50 px-3 py-1.5 text-sm',
-          'text-white focus:border-white/30 focus:outline-none focus:ring-1 focus:ring-white/20'
+          'rounded-md border border-border bg-card px-3 py-1.5 text-sm',
+          'text-foreground focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/20'
         )}
       >
         {sortOptions.map((option) => (
diff --git a/frontend/src/components/library/TreeGridView.tsx b/frontend/src/components/library/TreeGridView.tsx
index f7137b63..a6d8cb8b 100644
--- a/frontend/src/components/library/TreeGridView.tsx
+++ b/frontend/src/components/library/TreeGridView.tsx
@@ -30,11 +30,11 @@ export function TreeGridView({
       {trees.map((tree) => (
         <div
           key={tree.id}
-          className="glass-card rounded-2xl p-4 transition-all hover:-translate-y-0.5 hover:border-white/20 hover:shadow-md sm:p-6"
+          className="bg-card border border-border rounded-2xl p-4 transition-all hover:-translate-y-0.5 hover:border-primary/30 hover:shadow-md sm:p-6"
         >
           <div className="mb-2 flex items-start justify-between gap-2">
             <div className="flex items-center gap-2">
-              <h3 className="font-semibold text-white">{tree.name}</h3>
+              <h3 className="font-semibold text-foreground">{tree.name}</h3>
               {tree.status === 'draft' && (
                 <span className="inline-flex items-center gap-1 rounded-full bg-yellow-400/10 px-2 py-0.5 text-xs font-medium text-yellow-400">
                   <FileText className="h-3 w-3" />
@@ -45,21 +45,21 @@ export function TreeGridView({
             <div className="flex items-center gap-2">
               {tree.is_public ? (
                 <span title="Public tree">
-                  <Globe className="h-4 w-4 text-white/40" />
+                  <Globe className="h-4 w-4 text-muted-foreground" />
                 </span>
               ) : (
                 <span title="Private tree">
-                  <Lock className="h-4 w-4 text-white/40" />
+                  <Lock className="h-4 w-4 text-muted-foreground" />
                 </span>
               )}
               {tree.category_info && (
-                <span className="rounded-full bg-white/10 px-2 py-0.5 text-xs text-white/70">
+                <span className="rounded-full bg-accent px-2 py-0.5 text-xs text-muted-foreground">
                   {tree.category_info.name}
                 </span>
               )}
             </div>
           </div>
-          <p className="mb-3 text-sm text-white/70 line-clamp-2">
+          <p className="mb-3 text-sm text-muted-foreground line-clamp-2">
             {tree.description || 'No description available'}
           </p>
 
@@ -71,7 +71,7 @@ export function TreeGridView({
           )}
 
           <div className="flex items-center justify-between">
-            <span className="text-xs text-white/40">
+            <span className="text-xs text-muted-foreground">
               v{tree.version} · {tree.usage_count} uses
             </span>
             <div className="flex items-center gap-2">
@@ -81,8 +81,8 @@ export function TreeGridView({
                   type="button"
                   onClick={() => onForkTree(tree.id)}
                   className={cn(
-                    'rounded-md border border-white/10 p-2 text-white/60',
-                    'hover:bg-white/10 hover:text-white'
+                    'rounded-md border border-border p-2 text-muted-foreground',
+                    'hover:bg-accent hover:text-foreground'
                   )}
                   title="Fork tree"
                   aria-label="Fork tree"
@@ -94,8 +94,8 @@ export function TreeGridView({
                 <Link
                   to={`/trees/${tree.id}/edit`}
                   className={cn(
-                    'rounded-md border border-white/10 p-2 text-white/60',
-                    'hover:bg-white/10 hover:text-white'
+                    'rounded-md border border-border p-2 text-muted-foreground',
+                    'hover:bg-accent hover:text-foreground'
                   )}
                   title="Edit tree"
                   aria-label="Edit tree"
@@ -108,7 +108,7 @@ export function TreeGridView({
                   type="button"
                   onClick={() => onDeleteTree(tree)}
                   className={cn(
-                    'rounded-md border border-white/10 p-1.5 text-white/60',
+                    'rounded-md border border-border p-1.5 text-muted-foreground',
                     'hover:bg-red-400/10 hover:text-red-400'
                   )}
                   title="Delete tree"
@@ -121,8 +121,8 @@ export function TreeGridView({
                 type="button"
                 onClick={() => onStartSession(tree.id, tree.tree_type)}
                 className={cn(
-                  'rounded-md bg-white px-3 py-2 text-sm font-medium text-black',
-                  'hover:bg-white/90'
+                  'rounded-md bg-gradient-brand px-3 py-2 text-sm font-medium text-white shadow-lg shadow-primary/20',
+                  'hover:opacity-90'
                 )}
               >
                 Start Session
diff --git a/frontend/src/components/library/TreeListView.tsx b/frontend/src/components/library/TreeListView.tsx
index e4d39825..82227b39 100644
--- a/frontend/src/components/library/TreeListView.tsx
+++ b/frontend/src/components/library/TreeListView.tsx
@@ -30,12 +30,12 @@ export function TreeListView({
       {trees.map((tree) => (
         <div
           key={tree.id}
-          className="flex items-center gap-4 glass-card rounded-2xl p-4 transition-all hover:border-white/20 hover:shadow-sm"
+          className="flex items-center gap-4 bg-card border border-border rounded-2xl p-4 transition-all hover:border-primary/30 hover:shadow-sm"
         >
           {/* Left: Name and Description */}
           <div className="flex-1 min-w-0">
             <div className="flex items-center gap-2 mb-1">
-              <h3 className="font-semibold text-white truncate">{tree.name}</h3>
+              <h3 className="font-semibold text-foreground truncate">{tree.name}</h3>
               {tree.status === 'draft' && (
                 <span className="inline-flex items-center gap-1 rounded-full bg-yellow-400/10 px-2 py-0.5 text-xs font-medium text-yellow-400 flex-shrink-0">
                   <FileText className="h-3 w-3" />
@@ -44,15 +44,15 @@ export function TreeListView({
               )}
               {tree.is_public ? (
                 <span title="Public tree">
-                  <Globe className="h-3.5 w-3.5 text-white/40 flex-shrink-0" />
+                  <Globe className="h-3.5 w-3.5 text-muted-foreground flex-shrink-0" />
                 </span>
               ) : (
                 <span title="Private tree">
-                  <Lock className="h-3.5 w-3.5 text-white/40 flex-shrink-0" />
+                  <Lock className="h-3.5 w-3.5 text-muted-foreground flex-shrink-0" />
                 </span>
               )}
             </div>
-            <p className="text-sm text-white/70 truncate">
+            <p className="text-sm text-muted-foreground truncate">
               {tree.description || 'No description available'}
             </p>
           </div>
@@ -60,7 +60,7 @@ export function TreeListView({
           {/* Center: Category and Tags */}
           <div className="hidden lg:flex items-center gap-2 min-w-0" style={{ maxWidth: '300px' }}>
             {tree.category_info && (
-              <span className="rounded-full bg-white/10 px-2 py-0.5 text-xs text-white/70 whitespace-nowrap">
+              <span className="rounded-full bg-accent px-2 py-0.5 text-xs text-muted-foreground whitespace-nowrap">
                 {tree.category_info.name}
               </span>
             )}
@@ -73,7 +73,7 @@ export function TreeListView({
 
           {/* Right: Metadata and Actions */}
           <div className="flex items-center gap-3 flex-shrink-0">
-            <div className="hidden sm:flex flex-col items-end text-xs text-white/40">
+            <div className="hidden sm:flex flex-col items-end text-xs text-muted-foreground">
               <span>v{tree.version}</span>
               <span>{tree.usage_count} uses</span>
             </div>
@@ -85,8 +85,8 @@ export function TreeListView({
                   type="button"
                   onClick={() => onForkTree(tree.id)}
                   className={cn(
-                    'rounded-md border border-white/10 p-1.5 text-white/60',
-                    'hover:bg-white/10 hover:text-white'
+                    'rounded-md border border-border p-1.5 text-muted-foreground',
+                    'hover:bg-accent hover:text-foreground'
                   )}
                   title="Fork tree"
                   aria-label="Fork tree"
@@ -99,8 +99,8 @@ export function TreeListView({
                   <Link
                     to={`/trees/${tree.id}/edit`}
                     className={cn(
-                      'rounded-md border border-white/10 p-1.5 text-white/60',
-                      'hover:bg-white/10 hover:text-white'
+                      'rounded-md border border-border p-1.5 text-muted-foreground',
+                      'hover:bg-accent hover:text-foreground'
                     )}
                     title="Edit tree"
                     aria-label="Edit tree"
@@ -111,7 +111,7 @@ export function TreeListView({
                     type="button"
                     onClick={() => onDeleteTree(tree)}
                     className={cn(
-                      'rounded-md border border-white/10 p-1.5 text-white/60',
+                      'rounded-md border border-border p-1.5 text-muted-foreground',
                       'hover:bg-red-500/20 hover:text-red-400'
                     )}
                     title="Delete tree"
@@ -125,8 +125,8 @@ export function TreeListView({
                 type="button"
                 onClick={() => onStartSession(tree.id, tree.tree_type)}
                 className={cn(
-                  'rounded-md bg-white px-3 py-1.5 text-sm font-medium text-black',
-                  'hover:bg-white/90 whitespace-nowrap'
+                  'rounded-md bg-gradient-brand px-3 py-1.5 text-sm font-medium text-white shadow-lg shadow-primary/20',
+                  'hover:opacity-90 whitespace-nowrap'
                 )}
               >
                 Start
diff --git a/frontend/src/components/library/TreeTableView.tsx b/frontend/src/components/library/TreeTableView.tsx
index 9998e8e2..bd4ea7ae 100644
--- a/frontend/src/components/library/TreeTableView.tsx
+++ b/frontend/src/components/library/TreeTableView.tsx
@@ -70,12 +70,12 @@ export function TreeTableView({
   }
 
   return (
-    <div className="overflow-x-auto rounded-2xl border border-white/[0.06]">
+    <div className="overflow-x-auto rounded-2xl border border-border">
       <table className="w-full">
-        <thead className="bg-white/[0.02] sticky top-0 z-10">
-          <tr className="border-b border-white/[0.06]">
+        <thead className="bg-accent/50 sticky top-0 z-10">
+          <tr className="border-b border-border">
             <th
-              className="px-4 py-3 text-left text-sm font-medium text-white/50 cursor-pointer hover:text-white"
+              className="px-4 py-3 text-left text-sm font-medium text-muted-foreground cursor-pointer hover:text-foreground"
               onClick={() => handleSort('name')}
             >
               <div className="flex items-center gap-1">
@@ -83,11 +83,11 @@ export function TreeTableView({
                 {getSortIcon('name')}
               </div>
             </th>
-            <th className="hidden md:table-cell px-4 py-3 text-left text-sm font-medium text-white/50">
+            <th className="hidden md:table-cell px-4 py-3 text-left text-sm font-medium text-muted-foreground">
               Description
             </th>
             <th
-              className="hidden lg:table-cell px-4 py-3 text-left text-sm font-medium text-white/50 cursor-pointer hover:text-white"
+              className="hidden lg:table-cell px-4 py-3 text-left text-sm font-medium text-muted-foreground cursor-pointer hover:text-foreground"
               onClick={() => handleSort('category')}
             >
               <div className="flex items-center gap-1">
@@ -95,11 +95,11 @@ export function TreeTableView({
                 {getSortIcon('category')}
               </div>
             </th>
-            <th className="hidden xl:table-cell px-4 py-3 text-left text-sm font-medium text-white/50">
+            <th className="hidden xl:table-cell px-4 py-3 text-left text-sm font-medium text-muted-foreground">
               Tags
             </th>
             <th
-              className="hidden sm:table-cell px-4 py-3 text-center text-sm font-medium text-white/50 cursor-pointer hover:text-white"
+              className="hidden sm:table-cell px-4 py-3 text-center text-sm font-medium text-muted-foreground cursor-pointer hover:text-foreground"
               onClick={() => handleSort('version')}
             >
               <div className="flex items-center justify-center gap-1">
@@ -108,7 +108,7 @@ export function TreeTableView({
               </div>
             </th>
             <th
-              className="hidden sm:table-cell px-4 py-3 text-center text-sm font-medium text-white/50 cursor-pointer hover:text-white"
+              className="hidden sm:table-cell px-4 py-3 text-center text-sm font-medium text-muted-foreground cursor-pointer hover:text-foreground"
               onClick={() => handleSort('usage')}
             >
               <div className="flex items-center justify-center gap-1">
@@ -117,7 +117,7 @@ export function TreeTableView({
               </div>
             </th>
             <th
-              className="hidden md:table-cell px-4 py-3 text-left text-sm font-medium text-white/50 cursor-pointer hover:text-white"
+              className="hidden md:table-cell px-4 py-3 text-left text-sm font-medium text-muted-foreground cursor-pointer hover:text-foreground"
               onClick={() => handleSort('updated')}
             >
               <div className="flex items-center gap-1">
@@ -125,17 +125,17 @@ export function TreeTableView({
                 {getSortIcon('updated')}
               </div>
             </th>
-            <th className="px-4 py-3 text-right text-sm font-medium text-white/50">
+            <th className="px-4 py-3 text-right text-sm font-medium text-muted-foreground">
               Actions
             </th>
           </tr>
         </thead>
         <tbody className="bg-transparent">
           {trees.map((tree) => (
-            <tr key={tree.id} className="border-b border-white/[0.06] last:border-0 hover:bg-white/[0.04]">
+            <tr key={tree.id} className="border-b border-border last:border-0 hover:bg-accent/50">
               <td className="px-4 py-3">
                 <div className="flex items-center gap-2">
-                  <span className="font-medium text-white truncate max-w-[200px]">
+                  <span className="font-medium text-foreground truncate max-w-[200px]">
                     {tree.name}
                   </span>
                   {tree.status === 'draft' && (
@@ -146,23 +146,23 @@ export function TreeTableView({
                   )}
                   {tree.is_public ? (
                     <span title="Public tree">
-                      <Globe className="h-3.5 w-3.5 text-white/40 flex-shrink-0" />
+                      <Globe className="h-3.5 w-3.5 text-muted-foreground flex-shrink-0" />
                     </span>
                   ) : (
                     <span title="Private tree">
-                      <Lock className="h-3.5 w-3.5 text-white/40 flex-shrink-0" />
+                      <Lock className="h-3.5 w-3.5 text-muted-foreground flex-shrink-0" />
                     </span>
                   )}
                 </div>
               </td>
-              <td className="hidden md:table-cell px-4 py-3 text-sm text-white/70">
+              <td className="hidden md:table-cell px-4 py-3 text-sm text-muted-foreground">
                 <span className="truncate block max-w-[250px]">
                   {tree.description || 'No description'}
                 </span>
               </td>
               <td className="hidden lg:table-cell px-4 py-3">
                 {tree.category_info && (
-                  <span className="inline-block rounded-full bg-white/10 px-2 py-0.5 text-xs text-white/70">
+                  <span className="inline-block rounded-full bg-accent px-2 py-0.5 text-xs text-muted-foreground">
                     {tree.category_info.name}
                   </span>
                 )}
@@ -172,13 +172,13 @@ export function TreeTableView({
                   <TagBadges tags={tree.tags} maxVisible={2} onTagClick={onTagClick} />
                 )}
               </td>
-              <td className="hidden sm:table-cell px-4 py-3 text-center text-sm text-white/70">
+              <td className="hidden sm:table-cell px-4 py-3 text-center text-sm text-muted-foreground">
                 v{tree.version}
               </td>
-              <td className="hidden sm:table-cell px-4 py-3 text-center text-sm text-white/70">
+              <td className="hidden sm:table-cell px-4 py-3 text-center text-sm text-muted-foreground">
                 {tree.usage_count}
               </td>
-              <td className="hidden md:table-cell px-4 py-3 text-sm text-white/70">
+              <td className="hidden md:table-cell px-4 py-3 text-sm text-muted-foreground">
                 {formatDate(tree.updated_at)}
               </td>
               <td className="px-4 py-3">
@@ -189,8 +189,8 @@ export function TreeTableView({
                       type="button"
                       onClick={() => onForkTree(tree.id)}
                       className={cn(
-                        'rounded-md border border-white/10 p-1.5 text-white/60',
-                        'hover:bg-white/10 hover:text-white'
+                        'rounded-md border border-border p-1.5 text-muted-foreground',
+                        'hover:bg-accent hover:text-foreground'
                       )}
                       title="Fork tree"
                       aria-label="Fork tree"
@@ -203,8 +203,8 @@ export function TreeTableView({
                       <Link
                         to={`/trees/${tree.id}/edit`}
                         className={cn(
-                          'rounded-md border border-white/10 p-1.5 text-white/60',
-                          'hover:bg-white/10 hover:text-white'
+                          'rounded-md border border-border p-1.5 text-muted-foreground',
+                          'hover:bg-accent hover:text-foreground'
                         )}
                         title="Edit tree"
                         aria-label="Edit tree"
@@ -215,7 +215,7 @@ export function TreeTableView({
                         type="button"
                         onClick={() => onDeleteTree(tree)}
                         className={cn(
-                          'rounded-md border border-white/10 p-1.5 text-white/60',
+                          'rounded-md border border-border p-1.5 text-muted-foreground',
                           'hover:bg-red-500/20 hover:text-red-400'
                         )}
                         title="Delete tree"
@@ -229,8 +229,8 @@ export function TreeTableView({
                     type="button"
                     onClick={() => onStartSession(tree.id, tree.tree_type)}
                     className={cn(
-                      'rounded-md bg-white px-3 py-1.5 text-xs font-medium text-black',
-                      'hover:bg-white/90 whitespace-nowrap'
+                      'rounded-md bg-gradient-brand px-3 py-1.5 text-xs font-medium text-white shadow-lg shadow-primary/20',
+                      'hover:opacity-90 whitespace-nowrap'
                     )}
                   >
                     Start
diff --git a/frontend/src/components/library/ViewToggle.tsx b/frontend/src/components/library/ViewToggle.tsx
index 20037a89..88fe5b4b 100644
--- a/frontend/src/components/library/ViewToggle.tsx
+++ b/frontend/src/components/library/ViewToggle.tsx
@@ -11,15 +11,15 @@ interface ViewToggleProps {
 
 export function ViewToggle({ view, onChange, className }: ViewToggleProps) {
   return (
-    <div className={cn('flex items-center gap-1 rounded-md border border-white/10 p-1', className)}>
+    <div className={cn('flex items-center gap-1 rounded-md border border-border p-1', className)}>
       <button
         type="button"
         onClick={() => onChange('grid')}
         className={cn(
           'rounded p-1.5 transition-colors',
           view === 'grid'
-            ? 'bg-white/10 text-white border-white/20'
-            : 'text-white/50 hover:bg-white/[0.06] hover:text-white'
+            ? 'bg-accent text-foreground border-border'
+            : 'text-muted-foreground hover:bg-accent hover:text-foreground'
         )}
         title="Grid view"
         aria-label="Grid view"
@@ -32,8 +32,8 @@ export function ViewToggle({ view, onChange, className }: ViewToggleProps) {
         className={cn(
           'rounded p-1.5 transition-colors',
           view === 'list'
-            ? 'bg-white/10 text-white border-white/20'
-            : 'text-white/50 hover:bg-white/[0.06] hover:text-white'
+            ? 'bg-accent text-foreground border-border'
+            : 'text-muted-foreground hover:bg-accent hover:text-foreground'
         )}
         title="List view"
         aria-label="List view"
@@ -46,8 +46,8 @@ export function ViewToggle({ view, onChange, className }: ViewToggleProps) {
         className={cn(
           'rounded p-1.5 transition-colors',
           view === 'table'
-            ? 'bg-white/10 text-white border-white/20'
-            : 'text-white/50 hover:bg-white/[0.06] hover:text-white'
+            ? 'bg-accent text-foreground border-border'
+            : 'text-muted-foreground hover:bg-accent hover:text-foreground'
         )}
         title="Table view"
         aria-label="Table view"
diff --git a/frontend/src/components/procedural-editor/IntakeFieldEditor.tsx b/frontend/src/components/procedural-editor/IntakeFieldEditor.tsx
index 2082000f..180d74ff 100644
--- a/frontend/src/components/procedural-editor/IntakeFieldEditor.tsx
+++ b/frontend/src/components/procedural-editor/IntakeFieldEditor.tsx
@@ -26,49 +26,49 @@ export function IntakeFieldEditor({ field, onUpdate, onRemove }: IntakeFieldEdit
   const needsOptions = field.field_type === 'select' || field.field_type === 'multi_select'
 
   return (
-    <div className="glass-card rounded-xl p-3">
+    <div className="bg-card border border-border rounded-xl p-3">
       {/* Header row */}
       <div className="flex items-center gap-2">
-        <GripVertical className="h-4 w-4 shrink-0 cursor-grab text-white/30" />
+        <GripVertical className="h-4 w-4 shrink-0 cursor-grab text-muted-foreground" />
 
         <input
           type="text"
           value={field.label}
           onChange={(e) => onUpdate({ label: e.target.value })}
           placeholder="Field label"
-          className="min-w-0 flex-1 rounded border border-white/10 bg-black/50 px-2 py-1.5 text-sm text-white placeholder:text-white/30 focus:border-white/30 focus:outline-none focus:ring-1 focus:ring-white/20"
+          className="min-w-0 flex-1 rounded border border-border bg-card px-2 py-1.5 text-sm text-foreground placeholder:text-muted-foreground focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/20"
         />
 
         <select
           value={field.field_type}
           onChange={(e) => onUpdate({ field_type: e.target.value as IntakeFieldType })}
-          className="rounded border border-white/10 bg-black/50 px-2 py-1.5 text-sm text-white focus:border-white/30 focus:outline-none focus:ring-1 focus:ring-white/20"
+          className="rounded border border-border bg-card px-2 py-1.5 text-sm text-foreground focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/20"
         >
           {FIELD_TYPE_OPTIONS.map((opt) => (
             <option key={opt.value} value={opt.value}>{opt.label}</option>
           ))}
         </select>
 
-        <label className="flex items-center gap-1 text-xs text-white/50">
+        <label className="flex items-center gap-1 text-xs text-muted-foreground">
           <input
             type="checkbox"
             checked={field.required}
             onChange={(e) => onUpdate({ required: e.target.checked })}
-            className="rounded border-white/20"
+            className="rounded border-border"
           />
           Req
         </label>
 
         <button
           onClick={() => setExpanded(!expanded)}
-          className="rounded p-1 text-white/40 hover:bg-white/10 hover:text-white"
+          className="rounded p-1 text-muted-foreground hover:bg-accent hover:text-foreground"
         >
           {expanded ? <ChevronUp className="h-3.5 w-3.5" /> : <ChevronDown className="h-3.5 w-3.5" />}
         </button>
 
         <button
           onClick={onRemove}
-          className="rounded p-1 text-white/40 hover:bg-red-500/20 hover:text-red-400"
+          className="rounded p-1 text-muted-foreground hover:bg-red-500/20 hover:text-red-400"
         >
           <Trash2 className="h-3.5 w-3.5" />
         </button>
@@ -76,66 +76,66 @@ export function IntakeFieldEditor({ field, onUpdate, onRemove }: IntakeFieldEdit
 
       {/* Expanded details */}
       {expanded && (
-        <div className="mt-3 grid grid-cols-2 gap-3 border-t border-white/[0.06] pt-3">
+        <div className="mt-3 grid grid-cols-2 gap-3 border-t border-border pt-3">
           <div>
-            <label className="mb-1 block text-xs text-white/50">Variable Name</label>
+            <label className="mb-1 block text-xs text-muted-foreground">Variable Name</label>
             <input
               type="text"
               value={field.variable_name}
               onChange={(e) => onUpdate({ variable_name: e.target.value.toLowerCase().replace(/[^a-z0-9_]/g, '') })}
               placeholder="e.g. server_name"
-              className="w-full rounded border border-white/10 bg-black/50 px-2 py-1.5 text-sm font-mono text-white placeholder:text-white/30 focus:border-white/30 focus:outline-none focus:ring-1 focus:ring-white/20"
+              className="w-full rounded border border-border bg-card px-2 py-1.5 text-sm font-mono text-foreground placeholder:text-muted-foreground focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/20"
             />
-            <p className="mt-0.5 text-[10px] text-white/30">Used as [VAR:{field.variable_name}]</p>
+            <p className="mt-0.5 text-[10px] text-muted-foreground">Used as [VAR:{field.variable_name}]</p>
           </div>
 
           <div>
-            <label className="mb-1 block text-xs text-white/50">Placeholder</label>
+            <label className="mb-1 block text-xs text-muted-foreground">Placeholder</label>
             <input
               type="text"
               value={field.placeholder || ''}
               onChange={(e) => onUpdate({ placeholder: e.target.value || undefined })}
               placeholder="Hint text"
-              className="w-full rounded border border-white/10 bg-black/50 px-2 py-1.5 text-sm text-white placeholder:text-white/30 focus:border-white/30 focus:outline-none focus:ring-1 focus:ring-white/20"
+              className="w-full rounded border border-border bg-card px-2 py-1.5 text-sm text-foreground placeholder:text-muted-foreground focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/20"
             />
           </div>
 
           <div className="col-span-2">
-            <label className="mb-1 block text-xs text-white/50">Help Text</label>
+            <label className="mb-1 block text-xs text-muted-foreground">Help Text</label>
             <input
               type="text"
               value={field.help_text || ''}
               onChange={(e) => onUpdate({ help_text: e.target.value || undefined })}
               placeholder="Description or instructions"
-              className="w-full rounded border border-white/10 bg-black/50 px-2 py-1.5 text-sm text-white placeholder:text-white/30 focus:border-white/30 focus:outline-none focus:ring-1 focus:ring-white/20"
+              className="w-full rounded border border-border bg-card px-2 py-1.5 text-sm text-foreground placeholder:text-muted-foreground focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/20"
             />
           </div>
 
           <div>
-            <label className="mb-1 block text-xs text-white/50">Default Value</label>
+            <label className="mb-1 block text-xs text-muted-foreground">Default Value</label>
             <input
               type="text"
               value={field.default_value || ''}
               onChange={(e) => onUpdate({ default_value: e.target.value || undefined })}
               placeholder="Pre-filled value"
-              className="w-full rounded border border-white/10 bg-black/50 px-2 py-1.5 text-sm text-white placeholder:text-white/30 focus:border-white/30 focus:outline-none focus:ring-1 focus:ring-white/20"
+              className="w-full rounded border border-border bg-card px-2 py-1.5 text-sm text-foreground placeholder:text-muted-foreground focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/20"
             />
           </div>
 
           <div>
-            <label className="mb-1 block text-xs text-white/50">Group Name</label>
+            <label className="mb-1 block text-xs text-muted-foreground">Group Name</label>
             <input
               type="text"
               value={field.group_name || ''}
               onChange={(e) => onUpdate({ group_name: e.target.value || undefined })}
               placeholder="e.g. Network Settings"
-              className="w-full rounded border border-white/10 bg-black/50 px-2 py-1.5 text-sm text-white placeholder:text-white/30 focus:border-white/30 focus:outline-none focus:ring-1 focus:ring-white/20"
+              className="w-full rounded border border-border bg-card px-2 py-1.5 text-sm text-foreground placeholder:text-muted-foreground focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/20"
             />
           </div>
 
           {needsOptions && (
             <div className="col-span-2">
-              <label className="mb-1 block text-xs text-white/50">Options (one per line)</label>
+              <label className="mb-1 block text-xs text-muted-foreground">Options (one per line)</label>
               <textarea
                 value={(field.options || []).join('\n')}
                 onChange={(e) => {
@@ -144,7 +144,7 @@ export function IntakeFieldEditor({ field, onUpdate, onRemove }: IntakeFieldEdit
                 }}
                 placeholder="Option 1&#10;Option 2&#10;Option 3"
                 rows={3}
-                className="w-full rounded border border-white/10 bg-black/50 px-2 py-1.5 text-sm text-white placeholder:text-white/30 focus:border-white/30 focus:outline-none focus:ring-1 focus:ring-white/20"
+                className="w-full rounded border border-border bg-card px-2 py-1.5 text-sm text-foreground placeholder:text-muted-foreground focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/20"
               />
             </div>
           )}
diff --git a/frontend/src/components/procedural-editor/IntakeFormBuilder.tsx b/frontend/src/components/procedural-editor/IntakeFormBuilder.tsx
index c0d8700a..eb3969fa 100644
--- a/frontend/src/components/procedural-editor/IntakeFormBuilder.tsx
+++ b/frontend/src/components/procedural-editor/IntakeFormBuilder.tsx
@@ -6,18 +6,18 @@ export function IntakeFormBuilder() {
   const { intakeForm, addField, removeField, updateField } = useProceduralEditorStore()
 
   return (
-    <div className="glass-card rounded-2xl p-4 sm:p-6">
+    <div className="bg-card border border-border rounded-2xl p-4 sm:p-6">
       <div className="mb-4 flex items-center justify-between">
         <div className="flex items-center gap-2">
-          <FileText className="h-5 w-5 text-white/50" />
-          <h2 className="text-lg font-semibold text-white">Intake Form</h2>
-          <span className="text-sm text-white/40">
+          <FileText className="h-5 w-5 text-muted-foreground" />
+          <h2 className="text-lg font-semibold text-foreground">Intake Form</h2>
+          <span className="text-sm text-muted-foreground">
             ({intakeForm.length} field{intakeForm.length !== 1 ? 's' : ''})
           </span>
         </div>
         <button
           onClick={addField}
-          className="flex items-center gap-1.5 rounded-md border border-white/10 px-3 py-1.5 text-sm text-white/60 hover:bg-white/10 hover:text-white"
+          className="flex items-center gap-1.5 rounded-md border border-border px-3 py-1.5 text-sm text-muted-foreground hover:bg-accent hover:text-foreground"
         >
           <Plus className="h-3.5 w-3.5" />
           Add Field
@@ -25,10 +25,10 @@ export function IntakeFormBuilder() {
       </div>
 
       {intakeForm.length === 0 ? (
-        <div className="rounded-lg border border-dashed border-white/10 bg-white/[0.02] py-8 text-center">
-          <FileText className="mx-auto mb-2 h-8 w-8 text-white/20" />
-          <p className="text-sm text-white/40">No intake form fields yet</p>
-          <p className="mt-1 text-xs text-white/30">
+        <div className="rounded-lg border border-dashed border-border bg-white/[0.02] py-8 text-center">
+          <FileText className="mx-auto mb-2 h-8 w-8 text-muted-foreground" />
+          <p className="text-sm text-muted-foreground">No intake form fields yet</p>
+          <p className="mt-1 text-xs text-muted-foreground">
             Add fields to collect project data before the procedure starts
           </p>
         </div>
diff --git a/frontend/src/components/procedural-editor/StepEditor.tsx b/frontend/src/components/procedural-editor/StepEditor.tsx
index c5d80db0..57c87929 100644
--- a/frontend/src/components/procedural-editor/StepEditor.tsx
+++ b/frontend/src/components/procedural-editor/StepEditor.tsx
@@ -5,7 +5,7 @@ import { cn } from '@/lib/utils'
 
 const CONTENT_TYPE_OPTIONS: { value: StepContentType; label: string; color: string }[] = [
   { value: 'action', label: 'Action', color: 'text-blue-400' },
-  { value: 'informational', label: 'Info', color: 'text-white/60' },
+  { value: 'informational', label: 'Info', color: 'text-muted-foreground' },
   { value: 'verification', label: 'Verify', color: 'text-emerald-400' },
   { value: 'warning', label: 'Warning', color: 'text-yellow-400' },
 ]
@@ -24,24 +24,24 @@ export function StepEditor({ step, stepNumber, onUpdate, onCollapse, availableVa
   // Section header steps get a minimal editor
   if (step.type === 'section_header') {
     return (
-      <div className="glass-card rounded-xl border border-white/10 p-4">
+      <div className="bg-card border border-border rounded-xl p-4">
         <div className="mb-4 flex items-center justify-between">
-          <span className="text-sm font-medium text-white/50">Edit Section Header</span>
+          <span className="text-sm font-medium text-muted-foreground">Edit Section Header</span>
           <button
             onClick={onCollapse}
-            className="rounded p-1 text-white/40 hover:bg-white/10 hover:text-white"
+            className="rounded p-1 text-muted-foreground hover:bg-accent hover:text-foreground"
           >
             <ChevronUp className="h-4 w-4" />
           </button>
         </div>
         <div>
-          <label className="mb-1 block text-xs font-medium text-white/50">Title</label>
+          <label className="mb-1 block text-xs font-medium text-muted-foreground">Title</label>
           <input
             type="text"
             value={step.title}
             onChange={(e) => onUpdate({ title: e.target.value })}
             placeholder="Section title"
-            className="w-full rounded border border-white/10 bg-black/50 px-3 py-2 text-sm text-white placeholder:text-white/30 focus:border-white/30 focus:outline-none focus:ring-1 focus:ring-white/20"
+            className="w-full rounded border border-border bg-card px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/20"
           />
         </div>
       </div>
@@ -49,18 +49,18 @@ export function StepEditor({ step, stepNumber, onUpdate, onCollapse, availableVa
   }
 
   return (
-    <div className="glass-card rounded-xl border border-white/10 p-4">
+    <div className="bg-card border border-border rounded-xl p-4">
       {/* Header */}
       <div className="mb-4 flex items-center justify-between">
         <div className="flex items-center gap-2">
-          <span className="flex h-6 w-6 items-center justify-center rounded-full bg-white/10 text-xs font-medium text-white">
+          <span className="flex h-6 w-6 items-center justify-center rounded-full bg-accent text-xs font-medium text-foreground">
             {stepNumber}
           </span>
-          <span className="text-sm font-medium text-white">Edit Step</span>
+          <span className="text-sm font-medium text-foreground">Edit Step</span>
         </div>
         <button
           onClick={onCollapse}
-          className="rounded p-1 text-white/40 hover:bg-white/10 hover:text-white"
+          className="rounded p-1 text-muted-foreground hover:bg-accent hover:text-foreground"
         >
           <ChevronUp className="h-4 w-4" />
         </button>
@@ -69,18 +69,18 @@ export function StepEditor({ step, stepNumber, onUpdate, onCollapse, availableVa
       <div className="space-y-4">
         {/* Title */}
         <div>
-          <label className="mb-1 block text-xs font-medium text-white/50">Title</label>
+          <label className="mb-1 block text-xs font-medium text-muted-foreground">Title</label>
           <input
             type="text"
             value={step.title}
             onChange={(e) => onUpdate({ title: e.target.value })}
-            className="w-full rounded border border-white/10 bg-black/50 px-3 py-2 text-sm text-white placeholder:text-white/30 focus:border-white/30 focus:outline-none focus:ring-1 focus:ring-white/20"
+            className="w-full rounded border border-border bg-card px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/20"
           />
         </div>
 
         {/* Est. Minutes */}
         <div className="w-40">
-          <label className="mb-1 flex items-center gap-1 text-xs font-medium text-white/50">
+          <label className="mb-1 flex items-center gap-1 text-xs font-medium text-muted-foreground">
             <Clock className="h-3 w-3" />
             Est. Minutes
           </label>
@@ -90,28 +90,28 @@ export function StepEditor({ step, stepNumber, onUpdate, onCollapse, availableVa
             onChange={(e) => onUpdate({ estimated_minutes: e.target.value ? parseInt(e.target.value) : undefined })}
             placeholder="—"
             min={1}
-            className="w-full rounded border border-white/10 bg-black/50 px-3 py-2 text-sm text-white placeholder:text-white/30 focus:border-white/30 focus:outline-none focus:ring-1 focus:ring-white/20"
+            className="w-full rounded border border-border bg-card px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/20"
           />
         </div>
 
         {/* Description */}
         <div>
-          <label className="mb-1 block text-xs font-medium text-white/50">Description / Instructions</label>
+          <label className="mb-1 block text-xs font-medium text-muted-foreground">Description / Instructions</label>
           <textarea
             value={step.description || ''}
             onChange={(e) => onUpdate({ description: e.target.value })}
             placeholder="Step instructions. Use [VAR:name] for variables."
             rows={4}
-            className="w-full rounded border border-white/10 bg-black/50 px-3 py-2 text-sm text-white placeholder:text-white/30 focus:border-white/30 focus:outline-none focus:ring-1 focus:ring-white/20"
+            className="w-full rounded border border-border bg-card px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/20"
           />
           {availableVariables.length > 0 && (
             <div className="mt-1 flex flex-wrap gap-1">
-              <span className="text-[10px] text-white/30">Variables:</span>
+              <span className="text-[10px] text-muted-foreground">Variables:</span>
               {availableVariables.map((v) => (
                 <button
                   key={v.variable_name}
                   onClick={() => onUpdate({ description: (step.description || '') + `[VAR:${v.variable_name}]` })}
-                  className="rounded bg-white/5 px-1.5 py-0.5 font-mono text-[10px] text-white/50 hover:bg-white/10 hover:text-white/70"
+                  className="rounded bg-accent/50 px-1.5 py-0.5 font-mono text-[10px] text-muted-foreground hover:bg-accent hover:text-muted-foreground"
                 >
                   {v.variable_name}
                 </button>
@@ -122,7 +122,7 @@ export function StepEditor({ step, stepNumber, onUpdate, onCollapse, availableVa
 
         {/* Commands */}
         <div>
-          <label className="mb-1 flex items-center gap-1 text-xs font-medium text-white/50">
+          <label className="mb-1 flex items-center gap-1 text-xs font-medium text-muted-foreground">
             <Terminal className="h-3 w-3" />
             Commands (optional)
           </label>
@@ -131,7 +131,7 @@ export function StepEditor({ step, stepNumber, onUpdate, onCollapse, availableVa
             onChange={(e) => onUpdate({ commands: e.target.value || undefined })}
             placeholder="Install-WindowsFeature AD-Domain-Services -IncludeManagementTools"
             rows={3}
-            className="w-full rounded border border-white/10 bg-black/50 px-3 py-2 font-mono text-sm text-white placeholder:text-white/30 focus:border-white/30 focus:outline-none focus:ring-1 focus:ring-white/20"
+            className="w-full rounded border border-border bg-card px-3 py-2 font-mono text-sm text-foreground placeholder:text-muted-foreground focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/20"
           />
         </div>
 
@@ -139,7 +139,7 @@ export function StepEditor({ step, stepNumber, onUpdate, onCollapse, availableVa
         <button
           type="button"
           onClick={() => setShowMore(!showMore)}
-          className="flex items-center gap-1.5 text-xs text-white/40 hover:text-white/60"
+          className="flex items-center gap-1.5 text-xs text-muted-foreground hover:text-muted-foreground"
         >
           <Settings2 className="h-3 w-3" />
           More Options
@@ -147,10 +147,10 @@ export function StepEditor({ step, stepNumber, onUpdate, onCollapse, availableVa
         </button>
 
         {showMore && (
-          <div className="space-y-4 border-t border-white/[0.06] pt-4">
+          <div className="space-y-4 border-t border-border pt-4">
             {/* Content Type */}
             <div>
-              <label className="mb-1 block text-xs font-medium text-white/50">Content Type</label>
+              <label className="mb-1 block text-xs font-medium text-muted-foreground">Content Type</label>
               <div className="flex gap-1">
                 {CONTENT_TYPE_OPTIONS.map((opt) => (
                   <button
@@ -160,7 +160,7 @@ export function StepEditor({ step, stepNumber, onUpdate, onCollapse, availableVa
                       'rounded px-2 py-1 text-xs font-medium transition-colors',
                       step.content_type === opt.value
                         ? 'bg-white/15 ' + opt.color
-                        : 'text-white/40 hover:bg-white/10 hover:text-white/60'
+                        : 'text-muted-foreground hover:bg-accent hover:text-muted-foreground'
                     )}
                   >
                     {opt.label}
@@ -181,27 +181,27 @@ export function StepEditor({ step, stepNumber, onUpdate, onCollapse, availableVa
                   onChange={(e) => onUpdate({ warning_text: e.target.value || undefined })}
                   placeholder="Caution: This will restart the service..."
                   rows={2}
-                  className="w-full rounded border border-yellow-400/20 bg-yellow-400/5 px-3 py-2 text-sm text-white placeholder:text-white/30 focus:border-yellow-400/30 focus:outline-none focus:ring-1 focus:ring-yellow-400/20"
+                  className="w-full rounded border border-yellow-400/20 bg-yellow-400/5 px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:border-yellow-400/30 focus:outline-none focus:ring-1 focus:ring-yellow-400/20"
                 />
               </div>
             )}
 
             {/* Expected Outcome */}
             <div>
-              <label className="mb-1 block text-xs font-medium text-white/50">Expected Outcome (optional)</label>
+              <label className="mb-1 block text-xs font-medium text-muted-foreground">Expected Outcome (optional)</label>
               <input
                 type="text"
                 value={step.expected_outcome || ''}
                 onChange={(e) => onUpdate({ expected_outcome: e.target.value || undefined })}
                 placeholder="Server should respond with..."
-                className="w-full rounded border border-white/10 bg-black/50 px-3 py-2 text-sm text-white placeholder:text-white/30 focus:border-white/30 focus:outline-none focus:ring-1 focus:ring-white/20"
+                className="w-full rounded border border-border bg-card px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/20"
               />
             </div>
 
             {/* Verification */}
             <div className="grid grid-cols-2 gap-3">
               <div>
-                <label className="mb-1 flex items-center gap-1 text-xs font-medium text-white/50">
+                <label className="mb-1 flex items-center gap-1 text-xs font-medium text-muted-foreground">
                   <CheckSquare className="h-3 w-3" />
                   Verification Prompt (optional)
                 </label>
@@ -210,15 +210,15 @@ export function StepEditor({ step, stepNumber, onUpdate, onCollapse, availableVa
                   value={step.verification_prompt || ''}
                   onChange={(e) => onUpdate({ verification_prompt: e.target.value || undefined })}
                   placeholder="Confirm the role was installed"
-                  className="w-full rounded border border-white/10 bg-black/50 px-3 py-2 text-sm text-white placeholder:text-white/30 focus:border-white/30 focus:outline-none focus:ring-1 focus:ring-white/20"
+                  className="w-full rounded border border-border bg-card px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/20"
                 />
               </div>
               <div>
-                <label className="mb-1 block text-xs font-medium text-white/50">Verification Type</label>
+                <label className="mb-1 block text-xs font-medium text-muted-foreground">Verification Type</label>
                 <select
                   value={step.verification_type || ''}
                   onChange={(e) => onUpdate({ verification_type: e.target.value as 'checkbox' | 'text_input' || undefined })}
-                  className="w-full rounded border border-white/10 bg-black/50 px-3 py-2 text-sm text-white focus:border-white/30 focus:outline-none focus:ring-1 focus:ring-white/20"
+                  className="w-full rounded border border-border bg-card px-3 py-2 text-sm text-foreground focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/20"
                 >
                   <option value="">None</option>
                   <option value="checkbox">Checkbox (confirm done)</option>
@@ -230,7 +230,7 @@ export function StepEditor({ step, stepNumber, onUpdate, onCollapse, availableVa
             {/* Reference URL + Notes toggle */}
             <div className="grid grid-cols-2 gap-3">
               <div>
-                <label className="mb-1 flex items-center gap-1 text-xs font-medium text-white/50">
+                <label className="mb-1 flex items-center gap-1 text-xs font-medium text-muted-foreground">
                   <ExternalLink className="h-3 w-3" />
                   Reference URL (optional)
                 </label>
@@ -239,16 +239,16 @@ export function StepEditor({ step, stepNumber, onUpdate, onCollapse, availableVa
                   value={step.reference_url || ''}
                   onChange={(e) => onUpdate({ reference_url: e.target.value || undefined })}
                   placeholder="https://learn.microsoft.com/..."
-                  className="w-full rounded border border-white/10 bg-black/50 px-3 py-2 text-sm text-white placeholder:text-white/30 focus:border-white/30 focus:outline-none focus:ring-1 focus:ring-white/20"
+                  className="w-full rounded border border-border bg-card px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/20"
                 />
               </div>
               <div className="flex items-end pb-1">
-                <label className="flex items-center gap-2 text-sm text-white/60">
+                <label className="flex items-center gap-2 text-sm text-muted-foreground">
                   <input
                     type="checkbox"
                     checked={step.notes_enabled !== false}
                     onChange={(e) => onUpdate({ notes_enabled: e.target.checked })}
-                    className="rounded border-white/20"
+                    className="rounded border-border"
                   />
                   Allow tech notes
                 </label>
diff --git a/frontend/src/components/procedural-editor/StepList.tsx b/frontend/src/components/procedural-editor/StepList.tsx
index ef77338f..066843b0 100644
--- a/frontend/src/components/procedural-editor/StepList.tsx
+++ b/frontend/src/components/procedural-editor/StepList.tsx
@@ -6,7 +6,7 @@ import { cn } from '@/lib/utils'
 
 const contentTypeConfig: Record<StepContentType, { icon: typeof Zap; color: string; label: string }> = {
   action: { icon: Zap, color: 'text-blue-400', label: 'Action' },
-  informational: { icon: Info, color: 'text-white/50', label: 'Info' },
+  informational: { icon: Info, color: 'text-muted-foreground', label: 'Info' },
   verification: { icon: CheckCircle2, color: 'text-emerald-400', label: 'Verify' },
   warning: { icon: AlertTriangle, color: 'text-yellow-400', label: 'Warning' },
 }
@@ -27,26 +27,26 @@ export function StepList() {
   let stepCounter = 0
 
   return (
-    <div className="glass-card rounded-2xl p-4 sm:p-6">
+    <div className="bg-card border border-border rounded-2xl p-4 sm:p-6">
       <div className="mb-4 flex items-center justify-between">
         <div className="flex items-center gap-2">
-          <Shield className="h-5 w-5 text-white/50" />
-          <h2 className="text-lg font-semibold text-white">Steps</h2>
-          <span className="text-sm text-white/40">
+          <Shield className="h-5 w-5 text-muted-foreground" />
+          <h2 className="text-lg font-semibold text-foreground">Steps</h2>
+          <span className="text-sm text-muted-foreground">
             ({procedureSteps.length} step{procedureSteps.length !== 1 ? 's' : ''})
           </span>
         </div>
         <div className="flex items-center gap-2">
           <button
             onClick={() => addSectionHeader()}
-            className="flex items-center gap-1.5 rounded-md border border-white/10 px-3 py-1.5 text-sm text-white/60 hover:bg-white/10 hover:text-white"
+            className="flex items-center gap-1.5 rounded-md border border-border px-3 py-1.5 text-sm text-muted-foreground hover:bg-accent hover:text-foreground"
           >
             <SeparatorHorizontal className="h-3.5 w-3.5" />
             Add Section
           </button>
           <button
             onClick={() => addStep()}
-            className="flex items-center gap-1.5 rounded-md border border-white/10 px-3 py-1.5 text-sm text-white/60 hover:bg-white/10 hover:text-white"
+            className="flex items-center gap-1.5 rounded-md border border-border px-3 py-1.5 text-sm text-muted-foreground hover:bg-accent hover:text-foreground"
           >
             <Plus className="h-3.5 w-3.5" />
             Add Step
@@ -60,17 +60,17 @@ export function StepList() {
             return (
               <div
                 key={step.id}
-                className="flex items-center gap-2 rounded-lg border border-dashed border-white/10 bg-white/[0.02] px-3 py-2"
+                className="flex items-center gap-2 rounded-lg border border-dashed border-border bg-accent/50 px-3 py-2"
               >
                 <CheckCircle2 className="h-4 w-4 text-emerald-400/50" />
                 <input
                   type="text"
                   value={step.title}
                   onChange={(e) => updateStep(step.id, { title: e.target.value })}
-                  className="flex-1 bg-transparent text-sm text-white/50 focus:outline-none"
+                  className="flex-1 bg-transparent text-sm text-muted-foreground focus:outline-none"
                   placeholder="Procedure Complete"
                 />
-                <span className="text-[10px] text-white/30">END</span>
+                <span className="text-[10px] text-muted-foreground">END</span>
               </div>
             )
           }
@@ -96,18 +96,18 @@ export function StepList() {
             return (
               <div
                 key={step.id}
-                className="group flex items-center gap-2 border-b border-white/[0.06] pb-1 pt-3"
+                className="group flex items-center gap-2 border-b border-border pb-1 pt-3"
               >
-                <GripVertical className="h-4 w-4 shrink-0 cursor-grab text-white/20 group-hover:text-white/40" />
+                <GripVertical className="h-4 w-4 shrink-0 cursor-grab text-muted-foreground group-hover:text-muted-foreground" />
                 <span
-                  className="min-w-0 flex-1 cursor-pointer text-xs font-semibold uppercase tracking-wider text-white/40 hover:text-white/60"
+                  className="min-w-0 flex-1 cursor-pointer text-xs font-semibold uppercase tracking-wider text-muted-foreground hover:text-muted-foreground"
                   onClick={() => setExpandedStepId(step.id)}
                 >
                   {step.title || 'Untitled Section'}
                 </span>
                 <button
                   onClick={() => removeStep(step.id)}
-                  className="shrink-0 rounded p-1 text-white/30 opacity-0 hover:bg-red-500/20 hover:text-red-400 group-hover:opacity-100"
+                  className="shrink-0 rounded p-1 text-muted-foreground opacity-0 hover:bg-red-500/20 hover:text-red-400 group-hover:opacity-100"
                 >
                   <Trash2 className="h-3.5 w-3.5" />
                 </button>
@@ -141,13 +141,13 @@ export function StepList() {
             <div key={step.id}>
               <div
                 className={cn(
-                  'group flex items-center gap-2 rounded-xl border border-white/[0.06] px-3 py-2.5 transition-colors',
-                  'hover:border-white/10 hover:bg-white/[0.03]'
+                  'group flex items-center gap-2 rounded-xl border border-border px-3 py-2.5 transition-colors',
+                  'hover:border-primary/30 hover:bg-accent/50'
                 )}
               >
-                <GripVertical className="h-4 w-4 shrink-0 cursor-grab text-white/20 group-hover:text-white/40" />
+                <GripVertical className="h-4 w-4 shrink-0 cursor-grab text-muted-foreground group-hover:text-muted-foreground" />
 
-                <span className="flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-white/10 text-xs font-medium text-white/70">
+                <span className="flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-accent text-xs font-medium text-muted-foreground">
                   {stepNumber}
                 </span>
 
@@ -156,28 +156,28 @@ export function StepList() {
                 </span>
 
                 <span
-                  className="min-w-0 flex-1 cursor-pointer truncate text-sm text-white"
+                  className="min-w-0 flex-1 cursor-pointer truncate text-sm text-foreground"
                   onClick={() => setExpandedStepId(step.id)}
                 >
                   {step.title || 'Untitled step'}
                 </span>
 
                 {step.estimated_minutes && (
-                  <span className="shrink-0 text-[10px] text-white/30">
+                  <span className="shrink-0 text-[10px] text-muted-foreground">
                     ~{step.estimated_minutes}m
                   </span>
                 )}
 
                 <button
                   onClick={() => setExpandedStepId(step.id)}
-                  className="shrink-0 rounded p-1 text-white/30 hover:bg-white/10 hover:text-white"
+                  className="shrink-0 rounded p-1 text-muted-foreground hover:bg-accent hover:text-foreground"
                 >
                   <ChevronDown className="h-3.5 w-3.5" />
                 </button>
 
                 <button
                   onClick={() => removeStep(step.id)}
-                  className="shrink-0 rounded p-1 text-white/30 opacity-0 hover:bg-red-500/20 hover:text-red-400 group-hover:opacity-100"
+                  className="shrink-0 rounded p-1 text-muted-foreground opacity-0 hover:bg-red-500/20 hover:text-red-400 group-hover:opacity-100"
                 >
                   <Trash2 className="h-3.5 w-3.5" />
                 </button>
@@ -190,7 +190,7 @@ export function StepList() {
       {/* Add step button at bottom */}
       <button
         onClick={() => addStep()}
-        className="mt-3 flex w-full items-center justify-center gap-1.5 rounded-lg border border-dashed border-white/10 py-2 text-sm text-white/40 transition-colors hover:border-white/20 hover:text-white/60"
+        className="mt-3 flex w-full items-center justify-center gap-1.5 rounded-lg border border-dashed border-border py-2 text-sm text-muted-foreground transition-colors hover:border-primary/30 hover:text-muted-foreground"
       >
         <Plus className="h-3.5 w-3.5" />
         Add Step
diff --git a/frontend/src/components/procedural/CompletionSummary.tsx b/frontend/src/components/procedural/CompletionSummary.tsx
index f4d48dce..a563e2eb 100644
--- a/frontend/src/components/procedural/CompletionSummary.tsx
+++ b/frontend/src/components/procedural/CompletionSummary.tsx
@@ -58,38 +58,38 @@ export function CompletionSummary({
         <div className="mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-emerald-400/10">
           <CheckCircle2 className="h-8 w-8 text-emerald-400" />
         </div>
-        <h1 className="text-2xl font-bold text-white">Procedure Complete</h1>
-        <p className="mt-1 text-white/40">{treeName}</p>
+        <h1 className="text-2xl font-bold text-foreground">Procedure Complete</h1>
+        <p className="mt-1 text-muted-foreground">{treeName}</p>
       </div>
 
       {/* Summary stats */}
       <div className="grid grid-cols-3 gap-3">
-        <div className="glass-card rounded-xl p-3 text-center">
+        <div className="bg-card border border-border rounded-xl p-3 text-center">
           <CheckCircle2 className="mx-auto mb-1 h-5 w-5 text-emerald-400" />
-          <div className="text-lg font-semibold text-white">{procedureSteps.length}</div>
-          <div className="text-xs text-white/40">Steps Completed</div>
+          <div className="text-lg font-semibold text-foreground">{procedureSteps.length}</div>
+          <div className="text-xs text-muted-foreground">Steps Completed</div>
         </div>
-        <div className="glass-card rounded-xl p-3 text-center">
-          <Clock className="mx-auto mb-1 h-5 w-5 text-white/50" />
-          <div className="text-lg font-semibold text-white">{formatTime(totalMinutes)}</div>
-          <div className="text-xs text-white/40">Total Time</div>
+        <div className="bg-card border border-border rounded-xl p-3 text-center">
+          <Clock className="mx-auto mb-1 h-5 w-5 text-muted-foreground" />
+          <div className="text-lg font-semibold text-foreground">{formatTime(totalMinutes)}</div>
+          <div className="text-xs text-muted-foreground">Total Time</div>
         </div>
-        <div className="glass-card rounded-xl p-3 text-center">
-          <FileText className="mx-auto mb-1 h-5 w-5 text-white/50" />
-          <div className="text-lg font-semibold text-white">{Object.keys(variables).length}</div>
-          <div className="text-xs text-white/40">Parameters</div>
+        <div className="bg-card border border-border rounded-xl p-3 text-center">
+          <FileText className="mx-auto mb-1 h-5 w-5 text-muted-foreground" />
+          <div className="text-lg font-semibold text-foreground">{Object.keys(variables).length}</div>
+          <div className="text-xs text-muted-foreground">Parameters</div>
         </div>
       </div>
 
       {/* Project parameters */}
       {Object.keys(variables).length > 0 && (
-        <div className="glass-card rounded-xl p-4">
-          <h3 className="mb-3 text-sm font-semibold text-white/60">Project Parameters</h3>
+        <div className="bg-card border border-border rounded-xl p-4">
+          <h3 className="mb-3 text-sm font-semibold text-muted-foreground">Project Parameters</h3>
           <div className="space-y-1.5">
             {Object.entries(variables).map(([key, value]) => (
               <div key={key} className="flex items-baseline justify-between gap-4 text-sm">
-                <span className="font-mono text-white/40">{key}</span>
-                <span className="text-right text-white/70">{value}</span>
+                <span className="font-mono text-muted-foreground">{key}</span>
+                <span className="text-right text-muted-foreground">{value}</span>
               </div>
             ))}
           </div>
@@ -97,8 +97,8 @@ export function CompletionSummary({
       )}
 
       {/* Step details */}
-      <div className="glass-card rounded-xl p-4">
-        <h3 className="mb-3 text-sm font-semibold text-white/60">Step Summary</h3>
+      <div className="bg-card border border-border rounded-xl p-4">
+        <h3 className="mb-3 text-sm font-semibold text-muted-foreground">Step Summary</h3>
         <div className="space-y-2">
           {procedureSteps.map((step, index) => {
             const completion = completions.get(step.id)
@@ -107,15 +107,15 @@ export function CompletionSummary({
                 <CheckCircle2 className="mt-0.5 h-4 w-4 shrink-0 text-emerald-400" />
                 <div className="min-w-0 flex-1">
                   <div className="flex items-center gap-2">
-                    <span className="text-white/70">
+                    <span className="text-muted-foreground">
                       {index + 1}. {step.title}
                     </span>
                   </div>
                   {completion?.notes && (
-                    <p className="mt-0.5 text-xs text-white/30">Note: {completion.notes}</p>
+                    <p className="mt-0.5 text-xs text-muted-foreground">Note: {completion.notes}</p>
                   )}
                   {completion?.verificationValue && (
-                    <p className="mt-0.5 text-xs text-white/30">
+                    <p className="mt-0.5 text-xs text-muted-foreground">
                       Verified: {completion.verificationValue}
                     </p>
                   )}
@@ -130,14 +130,14 @@ export function CompletionSummary({
       <div className="flex items-center gap-3">
         <button
           onClick={onExport}
-          className="flex flex-1 items-center justify-center gap-2 rounded-lg border border-white/10 px-4 py-2.5 text-sm font-medium text-white/60 hover:bg-white/10 hover:text-white"
+          className="flex flex-1 items-center justify-center gap-2 rounded-lg border border-border px-4 py-2.5 text-sm font-medium text-muted-foreground hover:bg-accent hover:text-foreground"
         >
           <Download className="h-4 w-4" />
           Export Report
         </button>
         <button
           onClick={onClose}
-          className="flex flex-1 items-center justify-center gap-2 rounded-lg bg-white px-4 py-2.5 text-sm font-medium text-black hover:bg-white/90"
+          className="flex flex-1 items-center justify-center gap-2 rounded-lg bg-gradient-brand px-4 py-2.5 text-sm font-medium text-white shadow-lg shadow-primary/20 hover:opacity-90"
         >
           Done
         </button>
diff --git a/frontend/src/components/procedural/IntakeFormModal.tsx b/frontend/src/components/procedural/IntakeFormModal.tsx
index b295624b..891cfd93 100644
--- a/frontend/src/components/procedural/IntakeFormModal.tsx
+++ b/frontend/src/components/procedural/IntakeFormModal.tsx
@@ -71,10 +71,10 @@ export function IntakeFormModal({ isOpen, fields, treeName, onSubmit, onCancel }
     const error = errors[field.variable_name]
 
     const baseInputClass = cn(
-      'w-full rounded-lg border bg-black/50 px-3 py-2 text-sm text-white placeholder:text-white/30 focus:outline-none focus:ring-1',
+      'w-full rounded-lg border bg-card px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-1',
       error
         ? 'border-red-400/50 focus:border-red-400 focus:ring-red-400/20'
-        : 'border-white/10 focus:border-white/30 focus:ring-white/20'
+        : 'border-border focus:border-primary focus:ring-primary/20'
     )
 
     let input: React.ReactNode
@@ -111,9 +111,9 @@ export function IntakeFormModal({ isOpen, fields, treeName, onSubmit, onCancel }
               type="checkbox"
               checked={value === 'true'}
               onChange={(e) => setValue(field.variable_name, e.target.checked ? 'true' : 'false')}
-              className="rounded border-white/20"
+              className="rounded border-border"
             />
-            <span className="text-sm text-white/70">{field.placeholder || field.label}</span>
+            <span className="text-sm text-muted-foreground">{field.placeholder || field.label}</span>
           </label>
         )
         break
@@ -161,9 +161,9 @@ export function IntakeFormModal({ isOpen, fields, treeName, onSubmit, onCancel }
                         : [...selected, opt]
                       setValue(field.variable_name, next.join(','))
                     }}
-                    className="rounded border-white/20"
+                    className="rounded border-border"
                   />
-                  <span className="text-sm text-white/70">{opt}</span>
+                  <span className="text-sm text-muted-foreground">{opt}</span>
                 </label>
               )
             })}
@@ -197,12 +197,12 @@ export function IntakeFormModal({ isOpen, fields, treeName, onSubmit, onCancel }
 
     return (
       <div key={field.variable_name}>
-        <label className="mb-1 flex items-center gap-1 text-sm font-medium text-white/60">
+        <label className="mb-1 flex items-center gap-1 text-sm font-medium text-muted-foreground">
           {field.label}
           {field.required && <span className="text-red-400">*</span>}
         </label>
         {field.help_text && (
-          <p className="mb-1.5 text-xs text-white/30">{field.help_text}</p>
+          <p className="mb-1.5 text-xs text-muted-foreground">{field.help_text}</p>
         )}
         {input}
         {error && <p className="mt-1 text-xs text-red-400">{error}</p>}
@@ -212,12 +212,12 @@ export function IntakeFormModal({ isOpen, fields, treeName, onSubmit, onCancel }
 
   return (
     <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-sm">
-      <div className="mx-4 w-full max-w-lg rounded-2xl border border-white/10 bg-[#0a0a0a] shadow-xl">
+      <div className="mx-4 w-full max-w-lg rounded-2xl border border-border bg-[#0a0a0a] shadow-xl">
         {/* Header */}
-        <div className="border-b border-white/[0.06] px-6 py-4">
-          <h2 className="text-lg font-semibold text-white">Project Information</h2>
-          <p className="mt-0.5 text-sm text-white/40">
-            Fill in the details for <span className="text-white/60">{treeName}</span>
+        <div className="border-b border-border px-6 py-4">
+          <h2 className="text-lg font-semibold text-foreground">Project Information</h2>
+          <p className="mt-0.5 text-sm text-muted-foreground">
+            Fill in the details for <span className="text-muted-foreground">{treeName}</span>
           </p>
         </div>
 
@@ -227,7 +227,7 @@ export function IntakeFormModal({ isOpen, fields, treeName, onSubmit, onCancel }
             {Array.from(groups.entries()).map(([groupName, groupFields]) => (
               <div key={groupName}>
                 {groupName && (
-                  <h3 className="mb-3 border-b border-white/[0.06] pb-1 text-xs font-semibold uppercase tracking-wider text-white/40">
+                  <h3 className="mb-3 border-b border-border pb-1 text-xs font-semibold uppercase tracking-wider text-muted-foreground">
                     {groupName}
                   </h3>
                 )}
@@ -239,17 +239,17 @@ export function IntakeFormModal({ isOpen, fields, treeName, onSubmit, onCancel }
           </div>
 
           {/* Footer */}
-          <div className="flex items-center justify-end gap-2 border-t border-white/[0.06] px-6 py-4">
+          <div className="flex items-center justify-end gap-2 border-t border-border px-6 py-4">
             <button
               type="button"
               onClick={onCancel}
-              className="rounded-md border border-white/10 px-4 py-2 text-sm text-white/60 hover:bg-white/10 hover:text-white"
+              className="rounded-md border border-border px-4 py-2 text-sm text-muted-foreground hover:bg-accent hover:text-foreground"
             >
               Cancel
             </button>
             <button
               type="submit"
-              className="rounded-md bg-white px-4 py-2 text-sm font-medium text-black hover:bg-white/90"
+              className="rounded-md bg-gradient-brand px-4 py-2 text-sm font-medium text-white shadow-lg shadow-primary/20 hover:opacity-90"
             >
               Start Procedure
             </button>
diff --git a/frontend/src/components/procedural/ProgressBar.tsx b/frontend/src/components/procedural/ProgressBar.tsx
index 792435ed..b5f1fbf9 100644
--- a/frontend/src/components/procedural/ProgressBar.tsx
+++ b/frontend/src/components/procedural/ProgressBar.tsx
@@ -20,24 +20,24 @@ export function ProgressBar({ currentStep, totalSteps, elapsedMinutes, estimated
   return (
     <div className="space-y-1.5">
       <div className="flex items-center justify-between text-xs">
-        <span className="text-white/60">
+        <span className="text-muted-foreground">
           Step {currentStep} of {totalSteps}
         </span>
         <div className="flex items-center gap-3">
           {elapsedMinutes !== undefined && (
-            <span className="text-white/50">
+            <span className="text-muted-foreground">
               {formatTime(elapsed)}
               {estimatedTotalMinutes ? (
-                <span className="text-white/25"> / est. {formatTime(estimatedTotalMinutes)}</span>
+                <span className="text-muted-foreground"> / est. {formatTime(estimatedTotalMinutes)}</span>
               ) : null}
             </span>
           )}
-          <span className="font-medium text-white/70">{percentage}%</span>
+          <span className="font-medium text-muted-foreground">{percentage}%</span>
         </div>
       </div>
-      <div className="h-1.5 overflow-hidden rounded-full bg-white/10">
+      <div className="h-1.5 overflow-hidden rounded-full bg-accent">
         <div
-          className="h-full rounded-full bg-white transition-all duration-300"
+          className="h-full rounded-full bg-gradient-brand transition-all duration-300"
           style={{ width: `${percentage}%` }}
         />
       </div>
diff --git a/frontend/src/components/procedural/StepChecklist.tsx b/frontend/src/components/procedural/StepChecklist.tsx
index 8bb9a1b8..5823eff9 100644
--- a/frontend/src/components/procedural/StepChecklist.tsx
+++ b/frontend/src/components/procedural/StepChecklist.tsx
@@ -31,7 +31,7 @@ export function StepChecklist({ steps, currentStepIndex, completedStepIds, onSte
         return (
           <div key={step.id}>
             {showSection && (
-              <div className="mb-1 mt-3 border-b border-white/[0.06] pb-1 text-[10px] font-semibold uppercase tracking-wider text-white/40 first:mt-0">
+              <div className="mb-1 mt-3 border-b border-border pb-1 text-[10px] font-semibold uppercase tracking-wider text-muted-foreground first:mt-0">
                 {step.section_header}
               </div>
             )}
@@ -39,24 +39,24 @@ export function StepChecklist({ steps, currentStepIndex, completedStepIds, onSte
               onClick={() => onStepClick(index)}
               className={cn(
                 'flex w-full items-center gap-2 rounded-lg px-2 py-1.5 text-left text-sm transition-colors',
-                isCurrent && 'bg-white/10 text-white',
-                !isCurrent && isCompleted && 'text-white/40',
-                !isCurrent && !isCompleted && 'text-white/50 hover:bg-white/[0.04]'
+                isCurrent && 'bg-accent text-foreground',
+                !isCurrent && isCompleted && 'text-muted-foreground',
+                !isCurrent && !isCompleted && 'text-muted-foreground hover:bg-accent/50'
               )}
             >
               {isCompleted ? (
                 <CheckCircle2 className="h-4 w-4 shrink-0 text-emerald-400" />
               ) : isCurrent ? (
-                <ArrowRight className="h-4 w-4 shrink-0 text-white" />
+                <ArrowRight className="h-4 w-4 shrink-0 text-foreground" />
               ) : (
-                <Circle className="h-4 w-4 shrink-0 text-white/20" />
+                <Circle className="h-4 w-4 shrink-0 text-muted-foreground" />
               )}
-              <span className="flex h-5 w-5 shrink-0 items-center justify-center rounded-full bg-white/10 text-[10px] font-medium">
+              <span className="flex h-5 w-5 shrink-0 items-center justify-center rounded-full bg-accent text-[10px] font-medium">
                 {index + 1}
               </span>
               <span className="min-w-0 flex-1 truncate">{step.title || 'Untitled step'}</span>
               {step.estimated_minutes && (
-                <span className="shrink-0 text-[10px] text-white/30">~{step.estimated_minutes}m</span>
+                <span className="shrink-0 text-[10px] text-muted-foreground">~{step.estimated_minutes}m</span>
               )}
             </button>
           </div>
diff --git a/frontend/src/components/procedural/StepDetail.tsx b/frontend/src/components/procedural/StepDetail.tsx
index a62abd79..1e5616b5 100644
--- a/frontend/src/components/procedural/StepDetail.tsx
+++ b/frontend/src/components/procedural/StepDetail.tsx
@@ -6,7 +6,7 @@ import { cn } from '@/lib/utils'
 
 const contentTypeConfig: Record<StepContentType, { icon: typeof Zap; color: string; bg: string; label: string }> = {
   action: { icon: Zap, color: 'text-blue-400', bg: 'bg-blue-400/10', label: 'Action' },
-  informational: { icon: Info, color: 'text-white/50', bg: 'bg-white/10', label: 'Info' },
+  informational: { icon: Info, color: 'text-muted-foreground', bg: 'bg-accent', label: 'Info' },
   verification: { icon: CheckCircle2, color: 'text-emerald-400', bg: 'bg-emerald-400/10', label: 'Verification' },
   warning: { icon: AlertTriangle, color: 'text-yellow-400', bg: 'bg-yellow-400/10', label: 'Warning' },
 }
@@ -81,21 +81,21 @@ export function StepDetail({
     <div className="space-y-4">
       {/* Step header */}
       <div className="flex items-start gap-3">
-        <span className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-white/10 text-sm font-semibold text-white">
+        <span className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-accent text-sm font-semibold text-foreground">
           {stepNumber}
         </span>
         <div className="min-w-0 flex-1">
-          <h2 className="text-lg font-semibold text-white">{step.title}</h2>
+          <h2 className="text-lg font-semibold text-foreground">{step.title}</h2>
           <div className="mt-1 flex items-center gap-2">
             <span className={cn('inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-xs', config.bg, config.color)}>
               <Icon className="h-3 w-3" />
               {config.label}
             </span>
-            <span className="text-xs text-white/30">
+            <span className="text-xs text-muted-foreground">
               Step {stepNumber} of {totalSteps}
             </span>
             {step.estimated_minutes && (
-              <span className="text-xs text-white/30">~{step.estimated_minutes} min</span>
+              <span className="text-xs text-muted-foreground">~{step.estimated_minutes} min</span>
             )}
           </div>
         </div>
@@ -111,7 +111,7 @@ export function StepDetail({
 
       {/* Description */}
       {step.description && (
-        <div className="prose prose-invert prose-sm max-w-none text-white/70">
+        <div className="prose prose-invert prose-sm max-w-none text-muted-foreground">
           <p className="whitespace-pre-wrap">{resolve(step.description)}</p>
         </div>
       )}
@@ -120,14 +120,14 @@ export function StepDetail({
       {commandBlocks.length > 0 && (
         <div className="space-y-3">
           {commandBlocks.map((cmd, i) => (
-            <div key={i} className="rounded-lg border border-white/[0.06] bg-black/50">
-              <div className="flex items-center justify-between border-b border-white/[0.06] px-3 py-1.5">
-                <span className="text-xs font-medium text-white/40">
+            <div key={i} className="rounded-lg border border-border bg-card">
+              <div className="flex items-center justify-between border-b border-border px-3 py-1.5">
+                <span className="text-xs font-medium text-muted-foreground">
                   {cmd.label || (cmd.language ? cmd.language : 'Command')}
                 </span>
                 <button
                   onClick={() => handleCopyCommand(cmd.code, i)}
-                  className="flex items-center gap-1 rounded px-2 py-0.5 text-xs text-white/40 hover:bg-white/10 hover:text-white"
+                  className="flex items-center gap-1 rounded px-2 py-0.5 text-xs text-muted-foreground hover:bg-accent hover:text-foreground"
                 >
                   {copiedIndex === i ? <Check className="h-3 w-3 text-emerald-400" /> : <Copy className="h-3 w-3" />}
                   {copiedIndex === i ? 'Copied' : 'Copy'}
@@ -143,37 +143,37 @@ export function StepDetail({
 
       {/* Expected outcome */}
       {step.expected_outcome && (
-        <div className="rounded-lg border border-white/[0.06] bg-white/[0.02] p-3">
-          <h4 className="mb-1 text-xs font-medium text-white/50">Expected Outcome</h4>
-          <p className="text-sm text-white/70">{resolve(step.expected_outcome)}</p>
+        <div className="rounded-lg border border-border bg-white/[0.02] p-3">
+          <h4 className="mb-1 text-xs font-medium text-muted-foreground">Expected Outcome</h4>
+          <p className="text-sm text-muted-foreground">{resolve(step.expected_outcome)}</p>
         </div>
       )}
 
       {/* Verification */}
       {verificationPrompt && (
-        <div className="rounded-lg border border-white/[0.06] bg-white/[0.02] p-3">
-          <h4 className="mb-2 text-xs font-medium text-white/50">Verification</h4>
+        <div className="rounded-lg border border-border bg-white/[0.02] p-3">
+          <h4 className="mb-2 text-xs font-medium text-muted-foreground">Verification</h4>
           {verificationType === 'checkbox' ? (
-            <label className="flex items-center gap-2 text-sm text-white/70">
+            <label className="flex items-center gap-2 text-sm text-muted-foreground">
               <input
                 type="checkbox"
                 checked={!!verificationValue}
                 onChange={(e) => onVerificationChange(e.target.checked ? 'confirmed' : '')}
                 disabled={isCompleted}
-                className="rounded border-white/20"
+                className="rounded border-border"
               />
               {resolve(verificationPrompt)}
             </label>
           ) : (
             <div>
-              <p className="mb-2 text-sm text-white/70">{resolve(verificationPrompt)}</p>
+              <p className="mb-2 text-sm text-muted-foreground">{resolve(verificationPrompt)}</p>
               <input
                 type="text"
                 value={verificationValue}
                 onChange={(e) => onVerificationChange(e.target.value)}
                 disabled={isCompleted}
                 placeholder="Enter observed value..."
-                className="w-full rounded border border-white/10 bg-black/50 px-3 py-1.5 text-sm text-white placeholder:text-white/30 focus:border-white/30 focus:outline-none focus:ring-1 focus:ring-white/20 disabled:opacity-50"
+                className="w-full rounded border border-border bg-card px-3 py-1.5 text-sm text-foreground placeholder:text-muted-foreground focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/20 disabled:opacity-50"
               />
             </div>
           )}
@@ -183,13 +183,13 @@ export function StepDetail({
       {/* Notes */}
       {step.notes_enabled !== false && (
         <div>
-          <label className="mb-1 block text-xs font-medium text-white/50">Notes</label>
+          <label className="mb-1 block text-xs font-medium text-muted-foreground">Notes</label>
           <textarea
             value={notes}
             onChange={(e) => onNotesChange(e.target.value)}
             placeholder="Add notes for this step..."
             rows={2}
-            className="w-full rounded-lg border border-white/10 bg-black/50 px-3 py-2 text-sm text-white placeholder:text-white/30 focus:border-white/30 focus:outline-none focus:ring-1 focus:ring-white/20"
+            className="w-full rounded-lg border border-border bg-card px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/20"
           />
         </div>
       )}
@@ -200,7 +200,7 @@ export function StepDetail({
           href={resolve(step.reference_url)}
           target="_blank"
           rel="noopener noreferrer"
-          className="inline-flex items-center gap-1.5 text-sm text-white/40 hover:text-white"
+          className="inline-flex items-center gap-1.5 text-sm text-muted-foreground hover:text-foreground"
         >
           <ExternalLink className="h-3.5 w-3.5" />
           Reference Documentation
@@ -216,7 +216,7 @@ export function StepDetail({
             'flex w-full items-center justify-center gap-2 rounded-lg px-4 py-2.5 text-sm font-medium transition-colors',
             isCompleted
               ? 'bg-emerald-400/10 text-emerald-400'
-              : 'bg-white text-black hover:bg-white/90 disabled:opacity-40 disabled:hover:bg-white'
+              : 'bg-gradient-brand text-white shadow-lg shadow-primary/20 hover:opacity-90 disabled:opacity-40 disabled:hover:opacity-100'
           )}
         >
           {isCompleted ? (
diff --git a/frontend/src/components/session/ContinuationModal.tsx b/frontend/src/components/session/ContinuationModal.tsx
index 17e4d920..b6b4a8f0 100644
--- a/frontend/src/components/session/ContinuationModal.tsx
+++ b/frontend/src/components/session/ContinuationModal.tsx
@@ -45,7 +45,7 @@ export function ContinuationModal({
         {/* Descendant Selection */}
         {hasDescendants && (
           <div>
-            <p className="mb-4 text-sm text-white/70">
+            <p className="mb-4 text-sm text-muted-foreground">
               Select the next step in your troubleshooting path:
             </p>
 
@@ -56,20 +56,20 @@ export function ContinuationModal({
                   onClick={() => onSelectNode(node.id)}
                   title={`From: ${node.parentOptionLabel}`}
                   className={cn(
-                    'flex w-full items-center gap-3 rounded-lg border border-white/[0.06] p-3 text-left transition-colors',
-                    'hover:border-white/20 hover:bg-white/10'
+                    'flex w-full items-center gap-3 rounded-lg border border-border p-3 text-left transition-colors',
+                    'hover:border-border hover:bg-accent'
                   )}
                 >
-                  <div className="flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-full bg-white/10">
+                  <div className="flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-full bg-accent">
                     {nodeTypeIcons[node.type]}
                   </div>
                   <div className="min-w-0 flex-1">
-                    <p className="truncate font-medium text-white">{node.label}</p>
-                    <p className="text-xs text-white/40">
+                    <p className="truncate font-medium text-foreground">{node.label}</p>
+                    <p className="text-xs text-muted-foreground">
                       {nodeTypeLabels[node.type]}
                     </p>
                   </div>
-                  <ArrowRight className="h-4 w-4 flex-shrink-0 text-white/40" />
+                  <ArrowRight className="h-4 w-4 flex-shrink-0 text-muted-foreground" />
                 </button>
               ))}
             </div>
@@ -79,11 +79,11 @@ export function ContinuationModal({
         {/* Divider */}
         {hasDescendants && (
           <div className="flex items-center gap-4">
-            <div className="h-px flex-1 bg-white/[0.06]" />
-            <span className="text-xs font-medium uppercase tracking-wide text-white/40">
+            <div className="h-px flex-1 bg-border" />
+            <span className="text-xs font-medium uppercase tracking-wide text-muted-foreground">
               Or
             </span>
-            <div className="h-px flex-1 bg-white/[0.06]" />
+            <div className="h-px flex-1 bg-border" />
           </div>
         )}
 
@@ -100,8 +100,8 @@ export function ContinuationModal({
               <GitBranch className="h-5 w-5 text-amber-500" />
             </div>
             <div className="flex-1">
-              <p className="font-medium text-white">Build Custom Branch</p>
-              <p className="text-sm text-white/70">
+              <p className="font-medium text-foreground">Build Custom Branch</p>
+              <p className="text-sm text-muted-foreground">
                 Create your own troubleshooting path with custom steps
               </p>
             </div>
diff --git a/frontend/src/components/session/ExportPreviewModal.tsx b/frontend/src/components/session/ExportPreviewModal.tsx
index 21e87b20..23b08431 100644
--- a/frontend/src/components/session/ExportPreviewModal.tsx
+++ b/frontend/src/components/session/ExportPreviewModal.tsx
@@ -69,9 +69,9 @@ export function ExportPreviewModal({
     <Modal isOpen={isOpen} onClose={handleClose} title="Export Preview" size="xl">
       {/* Filename, format info, and controls */}
       <div className="mb-3 flex flex-wrap items-center justify-between gap-2">
-        <p className="text-sm text-white/70">
-          Filename: <span className="font-mono text-white">{filename}</span>
-          <span className="ml-3 rounded bg-white/10 px-2 py-0.5 text-xs text-white/70">
+        <p className="text-sm text-muted-foreground">
+          Filename: <span className="font-mono text-foreground">{filename}</span>
+          <span className="ml-3 rounded bg-accent px-2 py-0.5 text-xs text-muted-foreground">
             {format === 'markdown' ? 'Markdown' : format === 'html' ? 'HTML' : format === 'psa' ? 'PSA' : 'Plain Text'}
           </span>
           {isModified && (
@@ -81,23 +81,23 @@ export function ExportPreviewModal({
         <div className="flex flex-col items-end gap-1">
           <div className="flex items-center gap-3">
             {onToggleSummary && (
-              <label className="flex items-center gap-2 text-sm text-white/60 cursor-pointer">
+              <label className="flex items-center gap-2 text-sm text-muted-foreground cursor-pointer">
                 <input
                   type="checkbox"
                   checked={includeSummary}
                   onChange={(e) => onToggleSummary(e.target.checked)}
-                  className="h-4 w-4 rounded border-white/20 bg-black/50"
+                  className="h-4 w-4 rounded border-border bg-card"
                 />
                 Include Summary
               </label>
             )}
             {onToggleRedaction && (
-              <label className="flex items-center gap-2 text-sm text-white/60 cursor-pointer">
+              <label className="flex items-center gap-2 text-sm text-muted-foreground cursor-pointer">
                 <input
                   type="checkbox"
                   checked={redactionEnabled}
                   onChange={(e) => onToggleRedaction(e.target.checked)}
-                  className="h-4 w-4 rounded border-white/20 bg-black/50"
+                  className="h-4 w-4 rounded border-border bg-card"
                 />
                 Mask Sensitive Data
               </label>
@@ -114,13 +114,13 @@ export function ExportPreviewModal({
             </p>
           )}
           {redactionEnabled && redactionSummary && redactionSummary.total === 0 && (
-            <p className="text-xs text-white/40">No sensitive data detected</p>
+            <p className="text-xs text-muted-foreground">No sensitive data detected</p>
           )}
           {isModified && (
             <button
               type="button"
               onClick={handleReset}
-              className="flex items-center gap-1 text-xs text-white/40 hover:text-white"
+              className="flex items-center gap-1 text-xs text-muted-foreground hover:text-foreground"
               title="Reset to original"
             >
               <RotateCcw className="h-3 w-3" />
@@ -139,9 +139,9 @@ export function ExportPreviewModal({
         value={editedContent}
         onChange={(e) => setEditedContent(e.target.value)}
         className={cn(
-          'h-96 w-full resize-y rounded-md border border-white/10 bg-black/50 p-4',
-          'font-mono text-sm text-white',
-          'focus:border-white/30 focus:outline-none focus:ring-1 focus:ring-white/20'
+          'h-96 w-full resize-y rounded-md border border-border bg-card p-4',
+          'font-mono text-sm text-foreground',
+          'focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/20'
         )}
       />
 
@@ -151,9 +151,9 @@ export function ExportPreviewModal({
           type="button"
           onClick={handleCopy}
           className={cn(
-            'flex items-center gap-2 rounded-md border border-white/10 px-3 py-2 text-sm font-medium',
-            'text-white/60 hover:bg-white/10 hover:text-white',
-            'focus:outline-none focus:ring-2 focus:ring-white/20'
+            'flex items-center gap-2 rounded-md border border-border px-3 py-2 text-sm font-medium',
+            'text-muted-foreground hover:bg-accent hover:text-foreground',
+            'focus:outline-none focus:ring-2 focus:ring-primary/20'
           )}
         >
           {copied ? (
@@ -172,8 +172,8 @@ export function ExportPreviewModal({
           type="button"
           onClick={handleDownload}
           className={cn(
-            'flex items-center gap-2 rounded-md bg-white px-3 py-2 text-sm font-medium text-black',
-            'hover:bg-white/90 focus:outline-none focus:ring-2 focus:ring-white/20'
+            'flex items-center gap-2 rounded-md bg-gradient-brand text-white shadow-lg shadow-primary/20 px-3 py-2 text-sm font-medium',
+            'hover:opacity-90 focus:outline-none focus:ring-2 focus:ring-primary/20'
           )}
         >
           <Download className="h-4 w-4" />
diff --git a/frontend/src/components/session/ForkTreeModal.tsx b/frontend/src/components/session/ForkTreeModal.tsx
index 8b8e80cd..0b906cad 100644
--- a/frontend/src/components/session/ForkTreeModal.tsx
+++ b/frontend/src/components/session/ForkTreeModal.tsx
@@ -49,7 +49,7 @@ export function ForkTreeModal({
         disabled={isSaving}
         className={cn(
           'rounded-md px-4 py-2 text-sm font-medium transition-colors',
-          'text-white/60 hover:bg-white/10 hover:text-white',
+          'text-muted-foreground hover:bg-accent hover:text-foreground',
           'disabled:cursor-not-allowed disabled:opacity-50'
         )}
       >
@@ -59,8 +59,8 @@ export function ForkTreeModal({
         onClick={handleFork}
         disabled={isSaving || !name.trim()}
         className={cn(
-          'flex items-center gap-2 rounded-md bg-white px-4 py-2 text-sm font-medium text-black transition-colors',
-          'hover:bg-white/90',
+          'flex items-center gap-2 rounded-md bg-gradient-brand text-white shadow-lg shadow-primary/20 px-4 py-2 text-sm font-medium transition-colors',
+          'hover:opacity-90',
           'disabled:cursor-not-allowed disabled:opacity-50'
         )}
       >
@@ -82,13 +82,13 @@ export function ForkTreeModal({
   return (
     <Modal isOpen={isOpen} onClose={onClose} title="Save Custom Tree?" footer={footer}>
       <div className="space-y-4">
-        <div className="flex items-start gap-3 rounded-lg bg-white/5 p-4">
-          <div className="flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-full bg-white/10">
-            <GitFork className="h-5 w-5 text-white" />
+        <div className="flex items-start gap-3 rounded-lg bg-accent/50 p-4">
+          <div className="flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-full bg-accent">
+            <GitFork className="h-5 w-5 text-foreground" />
           </div>
           <div>
-            <p className="font-medium text-white">You've created a custom troubleshooting path!</p>
-            <p className="mt-1 text-sm text-white/70">
+            <p className="font-medium text-foreground">You've created a custom troubleshooting path!</p>
+            <p className="mt-1 text-sm text-muted-foreground">
               Save it as your own personal tree to reuse this troubleshooting flow in the future.
             </p>
           </div>
@@ -96,7 +96,7 @@ export function ForkTreeModal({
 
         <div className="space-y-4">
           <div>
-            <label htmlFor="tree-name" className="mb-1.5 block text-sm font-medium text-white">
+            <label htmlFor="tree-name" className="mb-1.5 block text-sm font-medium text-foreground">
               Tree Name <span className="text-red-400">*</span>
             </label>
             <input
@@ -106,15 +106,15 @@ export function ForkTreeModal({
               onChange={(e) => setName(e.target.value)}
               placeholder="My Custom Tree"
               className={cn(
-                'w-full rounded-md border border-white/10 bg-black/50 px-3 py-2 text-sm text-white',
-                'focus:outline-none focus:border-white/30 focus:ring-1 focus:ring-white/20'
+                'w-full rounded-md border border-border bg-card px-3 py-2 text-sm text-foreground',
+                'focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary/20'
               )}
             />
           </div>
 
           <div>
-            <label htmlFor="tree-description" className="mb-1.5 block text-sm font-medium text-white">
-              Description <span className="text-white/40">(optional)</span>
+            <label htmlFor="tree-description" className="mb-1.5 block text-sm font-medium text-foreground">
+              Description <span className="text-muted-foreground">(optional)</span>
             </label>
             <textarea
               id="tree-description"
@@ -123,8 +123,8 @@ export function ForkTreeModal({
               placeholder="Describe what this tree helps troubleshoot..."
               rows={3}
               className={cn(
-                'w-full rounded-md border border-white/10 bg-black/50 px-3 py-2 text-sm text-white',
-                'focus:outline-none focus:border-white/30 focus:ring-1 focus:ring-white/20',
+                'w-full rounded-md border border-border bg-card px-3 py-2 text-sm text-foreground',
+                'focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary/20',
                 'resize-none'
               )}
             />
@@ -135,7 +135,7 @@ export function ForkTreeModal({
           <p className="text-sm text-red-400">{error}</p>
         )}
 
-        <p className="text-xs text-white/40">
+        <p className="text-xs text-muted-foreground">
           The new tree will include your custom steps and will be saved to your personal tree library.
         </p>
       </div>
diff --git a/frontend/src/components/session/PostStepActionModal.tsx b/frontend/src/components/session/PostStepActionModal.tsx
index 338539d9..efca4230 100644
--- a/frontend/src/components/session/PostStepActionModal.tsx
+++ b/frontend/src/components/session/PostStepActionModal.tsx
@@ -28,8 +28,8 @@ export function PostStepActionModal({
   return (
     <Modal isOpen={isOpen} onClose={onClose} title="What would you like to do?">
       <div className="space-y-3">
-        <p className="mb-4 text-sm text-white/70">
-          You've created: <strong className="text-white">{step.title}</strong>
+        <p className="mb-4 text-sm text-muted-foreground">
+          You've created: <strong className="text-foreground">{step.title}</strong>
         </p>
 
         {/* Save for Later - Only show if not already from library */}
@@ -48,8 +48,8 @@ export function PostStepActionModal({
                 <Bookmark className="h-5 w-5 text-blue-500" />
               </div>
               <div>
-                <p className="font-medium text-white">Save for Later</p>
-                <p className="text-sm text-white/70">
+                <p className="font-medium text-foreground">Save for Later</p>
+                <p className="text-sm text-muted-foreground">
                   Add to your step library for future use
                 </p>
               </div>
@@ -62,8 +62,8 @@ export function PostStepActionModal({
           onClick={onUseNow}
           disabled={isSaving}
           className={cn(
-            'w-full rounded-lg border border-white/[0.06] p-4 text-left transition-colors',
-            'hover:border-white/20 hover:bg-white/10',
+            'w-full rounded-lg border border-border p-4 text-left transition-colors',
+            'hover:border-border hover:bg-accent',
             'disabled:cursor-not-allowed disabled:opacity-50'
           )}
         >
@@ -96,8 +96,8 @@ export function PostStepActionModal({
                 <BookmarkPlus className="h-5 w-5 text-purple-500" />
               </div>
               <div>
-                <p className="font-medium text-white">Do Both</p>
-                <p className="text-sm text-white/70">
+                <p className="font-medium text-foreground">Do Both</p>
+                <p className="text-sm text-muted-foreground">
                   Save to library AND use in this session
                 </p>
               </div>
@@ -106,7 +106,7 @@ export function PostStepActionModal({
         )}
 
         {isSaving && (
-          <p className="text-center text-sm text-white/40">Saving...</p>
+          <p className="text-center text-sm text-muted-foreground">Saving...</p>
         )}
       </div>
     </Modal>
diff --git a/frontend/src/components/session/SaveSessionAsTreeModal.tsx b/frontend/src/components/session/SaveSessionAsTreeModal.tsx
index 6a9c08be..fd3f841c 100644
--- a/frontend/src/components/session/SaveSessionAsTreeModal.tsx
+++ b/frontend/src/components/session/SaveSessionAsTreeModal.tsx
@@ -34,21 +34,21 @@ export function SaveSessionAsTreeModal({
 
   return (
     <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/80 backdrop-blur-sm">
-      <div className="glass-card w-full max-w-lg rounded-2xl p-6 shadow-lg">
+      <div className="bg-card border border-border w-full max-w-lg rounded-2xl p-6 shadow-lg">
         {/* Header */}
         <div className="mb-4 flex items-center justify-between">
-          <h2 className="text-lg font-semibold text-white">Save Session as Tree</h2>
+          <h2 className="text-lg font-semibold text-foreground">Save Session as Tree</h2>
           <button
             onClick={onClose}
             disabled={isSaving}
-            className="rounded-full p-1 text-white/40 hover:bg-white/10 hover:text-white disabled:opacity-50"
+            className="rounded-full p-1 text-muted-foreground hover:bg-accent hover:text-foreground disabled:opacity-50"
           >
             <X className="h-5 w-5" />
           </button>
         </div>
 
         {/* Info */}
-        <p className="mb-4 text-sm text-white/70">
+        <p className="mb-4 text-sm text-muted-foreground">
           Create a new tree from this session's path. The tree will be linked to the original tree as a fork.
         </p>
 
@@ -56,8 +56,8 @@ export function SaveSessionAsTreeModal({
         <form onSubmit={handleSubmit} className="space-y-4">
           {/* Tree Name */}
           <div>
-            <label htmlFor="treeName" className="mb-1 block text-sm font-medium text-white">
-              Tree Name <span className="text-white/40">(optional)</span>
+            <label htmlFor="treeName" className="mb-1 block text-sm font-medium text-foreground">
+              Tree Name <span className="text-muted-foreground">(optional)</span>
             </label>
             <input
               id="treeName"
@@ -68,9 +68,9 @@ export function SaveSessionAsTreeModal({
               disabled={isSaving}
               maxLength={255}
               className={cn(
-                'w-full rounded-md border border-white/10 bg-black/50 px-3 py-2 text-sm text-white',
-                'placeholder:text-white/40',
-                'focus:border-white/30 focus:outline-none focus:ring-1 focus:ring-white/20',
+                'w-full rounded-md border border-border bg-card px-3 py-2 text-sm text-foreground',
+                'placeholder:text-muted-foreground',
+                'focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/20',
                 'disabled:opacity-50'
               )}
             />
@@ -78,8 +78,8 @@ export function SaveSessionAsTreeModal({
 
           {/* Description */}
           <div>
-            <label htmlFor="description" className="mb-1 block text-sm font-medium text-white">
-              Description <span className="text-white/40">(optional)</span>
+            <label htmlFor="description" className="mb-1 block text-sm font-medium text-foreground">
+              Description <span className="text-muted-foreground">(optional)</span>
             </label>
             <textarea
               id="description"
@@ -89,9 +89,9 @@ export function SaveSessionAsTreeModal({
               disabled={isSaving}
               rows={3}
               className={cn(
-                'w-full rounded-md border border-white/10 bg-black/50 px-3 py-2 text-sm text-white',
-                'placeholder:text-white/40',
-                'focus:border-white/30 focus:outline-none focus:ring-1 focus:ring-white/20',
+                'w-full rounded-md border border-border bg-card px-3 py-2 text-sm text-foreground',
+                'placeholder:text-muted-foreground',
+                'focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/20',
                 'disabled:opacity-50'
               )}
             />
@@ -99,7 +99,7 @@ export function SaveSessionAsTreeModal({
 
           {/* Status */}
           <div>
-            <label className="mb-2 block text-sm font-medium text-white">Status</label>
+            <label className="mb-2 block text-sm font-medium text-foreground">Status</label>
             <div className="flex gap-4">
               <label className="flex cursor-pointer items-center gap-2">
                 <input
@@ -109,9 +109,9 @@ export function SaveSessionAsTreeModal({
                   checked={status === 'draft'}
                   onChange={() => setStatus('draft')}
                   disabled={isSaving}
-                  className="h-4 w-4 border-white/10 text-white focus:ring-2 focus:ring-white/20 focus:ring-offset-0"
+                  className="h-4 w-4 border-border text-foreground focus:ring-2 focus:ring-primary/20 focus:ring-offset-0"
                 />
-                <span className="text-sm text-white">Draft</span>
+                <span className="text-sm text-foreground">Draft</span>
               </label>
               <label className="flex cursor-pointer items-center gap-2">
                 <input
@@ -121,9 +121,9 @@ export function SaveSessionAsTreeModal({
                   checked={status === 'published'}
                   onChange={() => setStatus('published')}
                   disabled={isSaving}
-                  className="h-4 w-4 border-white/10 text-white focus:ring-2 focus:ring-white/20 focus:ring-offset-0"
+                  className="h-4 w-4 border-border text-foreground focus:ring-2 focus:ring-primary/20 focus:ring-offset-0"
                 />
-                <span className="text-sm text-white">Published</span>
+                <span className="text-sm text-foreground">Published</span>
               </label>
             </div>
           </div>
@@ -135,8 +135,8 @@ export function SaveSessionAsTreeModal({
               onClick={onClose}
               disabled={isSaving}
               className={cn(
-                'rounded-md border border-white/10 px-4 py-2 text-sm font-medium text-white/60',
-                'hover:bg-white/10 hover:text-white disabled:opacity-50'
+                'rounded-md border border-border px-4 py-2 text-sm font-medium text-muted-foreground',
+                'hover:bg-accent hover:text-foreground disabled:opacity-50'
               )}
             >
               Cancel
@@ -145,8 +145,8 @@ export function SaveSessionAsTreeModal({
               type="submit"
               disabled={isSaving}
               className={cn(
-                'rounded-md bg-white px-4 py-2 text-sm font-medium text-black',
-                'hover:bg-white/90 disabled:opacity-50'
+                'rounded-md bg-gradient-brand px-4 py-2 text-sm font-medium text-white shadow-lg shadow-primary/20',
+                'hover:opacity-90 disabled:opacity-50'
               )}
             >
               {isSaving ? 'Saving...' : 'Save as Tree'}
diff --git a/frontend/src/components/session/ScratchpadSidebar.tsx b/frontend/src/components/session/ScratchpadSidebar.tsx
index 4cc8d206..8f99d980 100644
--- a/frontend/src/components/session/ScratchpadSidebar.tsx
+++ b/frontend/src/components/session/ScratchpadSidebar.tsx
@@ -124,8 +124,8 @@ export function ScratchpadSidebar({ sessionId, initialContent, onSave, onOpenCha
         onClick={() => setIsCollapsed(false)}
         className={cn(
           'fixed right-2 top-1/2 z-40 -translate-y-1/2 rounded-md p-2.5',
-          'bg-[#0a0a0a] border border-white/[0.06] shadow-md',
-          'text-white/40 hover:bg-white/10 hover:text-white',
+          'bg-card border border-border shadow-md',
+          'text-muted-foreground hover:bg-accent hover:text-foreground',
           'transition-opacity duration-200',
           isCollapsed ? 'opacity-100' : 'pointer-events-none opacity-0'
         )}
@@ -153,29 +153,29 @@ export function ScratchpadSidebar({ sessionId, initialContent, onSave, onOpenCha
           'fixed z-40',
           'inset-0 sm:inset-auto sm:right-2 sm:top-1/2 sm:-translate-y-1/2',
           'flex w-full flex-col sm:h-[55vh] sm:w-[420px]',
-          'border-white/[0.06] bg-[#0a0a0a]/95 backdrop-blur-md shadow-xl sm:rounded-lg sm:border',
+          'border-border bg-card/95 backdrop-blur-md shadow-xl sm:rounded-lg sm:border',
           'transition-transform duration-200 ease-out',
           isCollapsed ? 'translate-x-full' : 'translate-x-0'
         )}
       >
         {/* Header */}
-        <div className="flex items-center justify-between border-b border-white/[0.06] px-3 py-2">
+        <div className="flex items-center justify-between border-b border-border px-3 py-2">
           <div className="flex items-center gap-2">
-            <StickyNote className="h-4 w-4 text-white/40" />
-            <span className="text-sm font-medium text-white">Scratchpad</span>
-            <span className="text-xs text-white/30">Ctrl+/</span>
+            <StickyNote className="h-4 w-4 text-muted-foreground" />
+            <span className="text-sm font-medium text-foreground">Scratchpad</span>
+            <span className="text-xs text-muted-foreground">Ctrl+/</span>
           </div>
           <div className="flex items-center gap-1">
             <button
               onClick={() => setShowPreview(!showPreview)}
-              className="rounded p-1 text-white/40 hover:bg-white/10 hover:text-white"
+              className="rounded p-1 text-muted-foreground hover:bg-accent hover:text-foreground"
               title={showPreview ? 'Edit' : 'Preview'}
             >
               {showPreview ? <Pencil className="h-3.5 w-3.5" /> : <Eye className="h-3.5 w-3.5" />}
             </button>
             <button
               onClick={() => setIsCollapsed(true)}
-              className="rounded p-1 text-white/40 hover:bg-white/10 hover:text-white"
+              className="rounded p-1 text-muted-foreground hover:bg-accent hover:text-foreground"
               title="Close scratchpad"
               aria-label="Close scratchpad"
             >
@@ -191,7 +191,7 @@ export function ScratchpadSidebar({ sessionId, initialContent, onSave, onOpenCha
               {content.trim() ? (
                 <MarkdownContent content={content} className="text-sm" />
               ) : (
-                <p className="text-sm italic text-white/40">Nothing to preview</p>
+                <p className="text-sm italic text-muted-foreground">Nothing to preview</p>
               )}
             </div>
           ) : (
@@ -202,7 +202,7 @@ export function ScratchpadSidebar({ sessionId, initialContent, onSave, onOpenCha
               placeholder={"Capture IPs, error codes, server names, user info...\n\nSupports markdown formatting."}
               className={cn(
                 'h-full min-h-[200px] w-full resize-none rounded-md border-0 bg-transparent p-0 text-sm',
-                'text-white placeholder:text-white/40',
+                'text-foreground placeholder:text-muted-foreground',
                 'focus:outline-none focus:ring-0'
               )}
             />
@@ -210,15 +210,15 @@ export function ScratchpadSidebar({ sessionId, initialContent, onSave, onOpenCha
         </div>
 
         {/* Save Indicator */}
-        <div className="border-t border-white/[0.06] px-3 py-1.5">
+        <div className="border-t border-border px-3 py-1.5">
           <div className="flex items-center gap-1.5 text-xs">
             {saveStatus === 'unsaved' && (
-              <span className="text-white/40">Unsaved changes</span>
+              <span className="text-muted-foreground">Unsaved changes</span>
             )}
             {saveStatus === 'saving' && (
               <>
-                <Loader2 className="h-3 w-3 animate-spin text-white/40" />
-                <span className="text-white/40">Saving...</span>
+                <Loader2 className="h-3 w-3 animate-spin text-muted-foreground" />
+                <span className="text-muted-foreground">Saving...</span>
               </>
             )}
             {saveStatus === 'saved' && (
@@ -228,7 +228,7 @@ export function ScratchpadSidebar({ sessionId, initialContent, onSave, onOpenCha
               <span className="text-red-400">Save failed</span>
             )}
             {saveStatus === 'idle' && (
-              <span className="text-white/30">Markdown supported</span>
+              <span className="text-muted-foreground">Markdown supported</span>
             )}
           </div>
         </div>
diff --git a/frontend/src/components/session/SessionFilters.tsx b/frontend/src/components/session/SessionFilters.tsx
index 513f8dbb..30833348 100644
--- a/frontend/src/components/session/SessionFilters.tsx
+++ b/frontend/src/components/session/SessionFilters.tsx
@@ -93,32 +93,32 @@ export function SessionFilters({ filters, onChange, onClear, trees }: SessionFil
       <div className="flex flex-col gap-3 sm:flex-row">
         {/* Ticket Number Search */}
         <div className="relative flex-1">
-          <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-white/40" />
+          <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
           <input
             type="text"
             placeholder="Search by ticket number..."
             value={filters.ticketNumber}
             onChange={(e) => handleFilterChange('ticketNumber', e.target.value)}
             className={cn(
-              'w-full rounded-md border border-white/10 bg-black/50 py-2 pl-9 pr-3',
-              'text-white placeholder:text-white/40',
-              'focus:border-white/30 focus:outline-none focus:ring-1 focus:ring-white/20'
+              'w-full rounded-md border border-border bg-card py-2 pl-9 pr-3',
+              'text-foreground placeholder:text-muted-foreground',
+              'focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/20'
             )}
           />
         </div>
 
         {/* Client Name Search */}
         <div className="relative flex-1">
-          <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-white/40" />
+          <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
           <input
             type="text"
             placeholder="Search by client name..."
             value={filters.clientName}
             onChange={(e) => handleFilterChange('clientName', e.target.value)}
             className={cn(
-              'w-full rounded-md border border-white/10 bg-black/50 py-2 pl-9 pr-3',
-              'text-white placeholder:text-white/40',
-              'focus:border-white/30 focus:outline-none focus:ring-1 focus:ring-white/20'
+              'w-full rounded-md border border-border bg-card py-2 pl-9 pr-3',
+              'text-foreground placeholder:text-muted-foreground',
+              'focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/20'
             )}
           />
         </div>
@@ -128,8 +128,8 @@ export function SessionFilters({ filters, onChange, onClear, trees }: SessionFil
           value={filters.treeName}
           onChange={(e) => handleFilterChange('treeName', e.target.value)}
           className={cn(
-            'rounded-md border border-white/10 bg-black/50 px-3 py-2',
-            'text-white focus:border-white/30 focus:outline-none focus:ring-1 focus:ring-white/20',
+            'rounded-md border border-border bg-card px-3 py-2',
+            'text-foreground focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/20',
             'sm:min-w-[200px]'
           )}
         >
@@ -148,19 +148,19 @@ export function SessionFilters({ filters, onChange, onClear, trees }: SessionFil
           <button
             onClick={() => setShowDatePicker(!showDatePicker)}
             className={cn(
-              'flex w-full items-center gap-2 rounded-md border border-white/10 bg-black/50 px-3 py-2 text-sm',
-              'text-white hover:bg-white/10',
-              filters.dateRange?.from && 'border-white/30'
+              'flex w-full items-center gap-2 rounded-md border border-border bg-card px-3 py-2 text-sm',
+              'text-foreground hover:bg-accent',
+              filters.dateRange?.from && 'border-primary/30'
             )}
           >
-            <Calendar className="h-4 w-4 text-white/40" />
-            <span className={cn(!filters.dateRange?.from && 'text-white/40')}>
+            <Calendar className="h-4 w-4 text-muted-foreground" />
+            <span className={cn(!filters.dateRange?.from && 'text-muted-foreground')}>
               {formatDateRange(filters.dateRange)}
             </span>
           </button>
 
           {showDatePicker && (
-            <div className="absolute left-0 top-full z-50 mt-2 rounded-lg border border-white/[0.06] bg-[#0a0a0a] p-4 shadow-lg">
+            <div className="absolute left-0 top-full z-50 mt-2 rounded-lg border border-border bg-[#0a0a0a] p-4 shadow-lg">
               {/* Date Type Toggle */}
               <div className="mb-3 flex gap-2">
                 <button
@@ -168,8 +168,8 @@ export function SessionFilters({ filters, onChange, onClear, trees }: SessionFil
                   className={cn(
                     'flex-1 rounded-md px-3 py-1.5 text-sm font-medium transition-colors',
                     filters.dateType === 'started'
-                      ? 'bg-white text-black'
-                      : 'border border-white/10 text-white/60 hover:bg-white/10 hover:text-white'
+                      ? 'bg-gradient-brand text-white shadow-lg shadow-primary/20'
+                      : 'border border-border text-muted-foreground hover:bg-accent hover:text-foreground'
                   )}
                 >
                   Started
@@ -179,8 +179,8 @@ export function SessionFilters({ filters, onChange, onClear, trees }: SessionFil
                   className={cn(
                     'flex-1 rounded-md px-3 py-1.5 text-sm font-medium transition-colors',
                     filters.dateType === 'completed'
-                      ? 'bg-white text-black'
-                      : 'border border-white/10 text-white/60 hover:bg-white/10 hover:text-white'
+                      ? 'bg-gradient-brand text-white shadow-lg shadow-primary/20'
+                      : 'border border-border text-muted-foreground hover:bg-accent hover:text-foreground'
                   )}
                 >
                   Completed
@@ -194,8 +194,8 @@ export function SessionFilters({ filters, onChange, onClear, trees }: SessionFil
                     key={preset.value}
                     onClick={() => applyDatePreset(preset.value)}
                     className={cn(
-                      'rounded-md bg-white/10 px-3 py-1.5 text-sm font-medium text-white/70',
-                      'hover:bg-white/20 hover:text-white'
+                      'rounded-md bg-accent px-3 py-1.5 text-sm font-medium text-muted-foreground',
+                      'hover:bg-accent/80 hover:text-foreground'
                     )}
                   >
                     {preset.label}
@@ -227,8 +227,8 @@ export function SessionFilters({ filters, onChange, onClear, trees }: SessionFil
                     setShowDatePicker(false)
                   }}
                   className={cn(
-                    'flex-1 rounded-md bg-white px-3 py-1.5 text-sm font-medium text-black',
-                    'hover:bg-white/90'
+                    'flex-1 rounded-md bg-gradient-brand px-3 py-1.5 text-sm font-medium text-white shadow-lg shadow-primary/20',
+                    'hover:opacity-90'
                   )}
                 >
                   Apply
@@ -236,8 +236,8 @@ export function SessionFilters({ filters, onChange, onClear, trees }: SessionFil
                 <button
                   onClick={() => setShowDatePicker(false)}
                   className={cn(
-                    'rounded-md border border-white/10 px-3 py-1.5 text-sm font-medium text-white/60',
-                    'hover:bg-white/10 hover:text-white'
+                    'rounded-md border border-border px-3 py-1.5 text-sm font-medium text-muted-foreground',
+                    'hover:bg-accent hover:text-foreground'
                   )}
                 >
                   Cancel
@@ -252,8 +252,8 @@ export function SessionFilters({ filters, onChange, onClear, trees }: SessionFil
           <button
             onClick={onClear}
             className={cn(
-              'flex items-center gap-2 rounded-md border border-white/10 px-3 py-2 text-sm font-medium',
-              'text-white/60 hover:bg-white/10 hover:text-white'
+              'flex items-center gap-2 rounded-md border border-border px-3 py-2 text-sm font-medium',
+              'text-muted-foreground hover:bg-accent hover:text-foreground'
             )}
           >
             <Filter className="h-4 w-4" />
@@ -265,46 +265,46 @@ export function SessionFilters({ filters, onChange, onClear, trees }: SessionFil
       {/* Active Filter Chips */}
       {hasActiveFilters && (
         <div className="flex flex-wrap items-center gap-2">
-          <span className="text-sm text-white/40">Active filters:</span>
+          <span className="text-sm text-muted-foreground">Active filters:</span>
           {filters.ticketNumber && (
-            <span className="inline-flex items-center gap-1 rounded-full bg-white/10 px-3 py-1 text-sm text-white/70">
+            <span className="inline-flex items-center gap-1 rounded-full bg-accent px-3 py-1 text-sm text-muted-foreground">
               Ticket: {filters.ticketNumber}
               <button
                 onClick={() => handleFilterChange('ticketNumber', '')}
-                className="rounded-full p-0.5 hover:bg-white/20"
+                className="rounded-full p-0.5 hover:bg-accent/80"
               >
                 <X className="h-3 w-3" />
               </button>
             </span>
           )}
           {filters.clientName && (
-            <span className="inline-flex items-center gap-1 rounded-full bg-white/10 px-3 py-1 text-sm text-white/70">
+            <span className="inline-flex items-center gap-1 rounded-full bg-accent px-3 py-1 text-sm text-muted-foreground">
               Client: {filters.clientName}
               <button
                 onClick={() => handleFilterChange('clientName', '')}
-                className="rounded-full p-0.5 hover:bg-white/20"
+                className="rounded-full p-0.5 hover:bg-accent/80"
               >
                 <X className="h-3 w-3" />
               </button>
             </span>
           )}
           {filters.treeName && (
-            <span className="inline-flex items-center gap-1 rounded-full bg-white/10 px-3 py-1 text-sm text-white/70">
+            <span className="inline-flex items-center gap-1 rounded-full bg-accent px-3 py-1 text-sm text-muted-foreground">
               Tree: {filters.treeName}
               <button
                 onClick={() => handleFilterChange('treeName', '')}
-                className="rounded-full p-0.5 hover:bg-white/20"
+                className="rounded-full p-0.5 hover:bg-accent/80"
               >
                 <X className="h-3 w-3" />
               </button>
             </span>
           )}
           {filters.dateRange?.from && (
-            <span className="inline-flex items-center gap-1 rounded-full bg-white/10 px-3 py-1 text-sm text-white/70">
+            <span className="inline-flex items-center gap-1 rounded-full bg-accent px-3 py-1 text-sm text-muted-foreground">
               {formatDateRange(filters.dateRange)} ({filters.dateType})
               <button
                 onClick={clearDateRange}
-                className="rounded-full p-0.5 hover:bg-white/20"
+                className="rounded-full p-0.5 hover:bg-accent/80"
               >
                 <X className="h-3 w-3" />
               </button>
diff --git a/frontend/src/components/session/SessionOutcomeModal.tsx b/frontend/src/components/session/SessionOutcomeModal.tsx
index ba414f01..b97131e5 100644
--- a/frontend/src/components/session/SessionOutcomeModal.tsx
+++ b/frontend/src/components/session/SessionOutcomeModal.tsx
@@ -51,8 +51,8 @@ export function SessionOutcomeModal({
             onClick={onClose}
             disabled={isSubmitting}
             className={cn(
-              'rounded-md border border-white/10 px-4 py-2 text-sm font-medium text-white/60',
-              'hover:bg-white/10 hover:text-white disabled:opacity-50'
+              'rounded-md border border-border px-4 py-2 text-sm font-medium text-muted-foreground',
+              'hover:bg-accent hover:text-foreground disabled:opacity-50'
             )}
           >
             Cancel
@@ -62,8 +62,8 @@ export function SessionOutcomeModal({
             onClick={handleSubmit}
             disabled={isSubmitting}
             className={cn(
-              'rounded-md bg-white px-4 py-2 text-sm font-medium text-black',
-              'hover:bg-white/90 disabled:opacity-50'
+              'rounded-md bg-gradient-brand text-white shadow-lg shadow-primary/20 px-4 py-2 text-sm font-medium',
+              'hover:opacity-90 disabled:opacity-50'
             )}
           >
             {isSubmitting ? 'Completing...' : 'Complete Session'}
@@ -72,7 +72,7 @@ export function SessionOutcomeModal({
       )}
     >
       <form key={String(isOpen)} ref={formRef} className="space-y-4">
-        <p className="text-sm text-white/70">
+        <p className="text-sm text-muted-foreground">
           Select the session outcome before completion.
         </p>
         <div className="space-y-2">
@@ -80,8 +80,8 @@ export function SessionOutcomeModal({
             <label
               key={option.value}
               className={cn(
-                'block cursor-pointer rounded-lg border border-white/10 p-3 transition-colors',
-                'hover:bg-white/[0.04]'
+                'block cursor-pointer rounded-lg border border-border p-3 transition-colors',
+                'hover:bg-accent/50'
               )}
             >
               <div className="flex items-start gap-3">
@@ -93,8 +93,8 @@ export function SessionOutcomeModal({
                   className="mt-1 h-4 w-4"
                 />
                 <div>
-                  <p className="text-sm font-medium text-white">{option.label}</p>
-                  <p className="text-xs text-white/50">{option.description}</p>
+                  <p className="text-sm font-medium text-foreground">{option.label}</p>
+                  <p className="text-xs text-muted-foreground">{option.description}</p>
                 </div>
               </div>
             </label>
@@ -102,31 +102,31 @@ export function SessionOutcomeModal({
         </div>
 
         <div>
-          <label className="block text-sm font-medium text-white">Outcome Notes (optional)</label>
+          <label className="block text-sm font-medium text-foreground">Outcome Notes (optional)</label>
           <textarea
             name="outcome-notes"
             defaultValue=""
             rows={3}
             placeholder="Add context for this outcome..."
             className={cn(
-              'mt-1 block w-full rounded-md border border-white/10 bg-black/50 px-3 py-2',
-              'text-sm text-white placeholder:text-white/40',
-              'focus:border-white/30 focus:outline-none focus:ring-1 focus:ring-white/20'
+              'mt-1 block w-full rounded-md border border-border bg-card px-3 py-2',
+              'text-sm text-foreground placeholder:text-muted-foreground',
+              'focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/20'
             )}
           />
         </div>
 
         <div>
-          <label className="block text-sm font-medium text-white">Next Steps / Follow-Up (optional)</label>
+          <label className="block text-sm font-medium text-foreground">Next Steps / Follow-Up (optional)</label>
           <textarea
             name="next-steps"
             defaultValue=""
             rows={3}
             placeholder="Actions to take after this session..."
             className={cn(
-              'mt-1 block w-full rounded-md border border-white/10 bg-black/50 px-3 py-2',
-              'text-sm text-white placeholder:text-white/40',
-              'focus:border-white/30 focus:outline-none focus:ring-1 focus:ring-white/20'
+              'mt-1 block w-full rounded-md border border-border bg-card px-3 py-2',
+              'text-sm text-foreground placeholder:text-muted-foreground',
+              'focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/20'
             )}
           />
         </div>
diff --git a/frontend/src/components/session/SessionTimeline.tsx b/frontend/src/components/session/SessionTimeline.tsx
index 90811010..e6c72337 100644
--- a/frontend/src/components/session/SessionTimeline.tsx
+++ b/frontend/src/components/session/SessionTimeline.tsx
@@ -53,7 +53,7 @@ export function SessionTimeline({
   if (treeType === 'procedural') {
     return (
       <div className="mb-8">
-        <h2 className="mb-4 text-lg font-semibold text-white">Procedure Steps</h2>
+        <h2 className="mb-4 text-lg font-semibold text-foreground">Procedure Steps</h2>
         <div className="space-y-2">
           {decisions.map((decision, index) => {
             const isCompleted = decision.answer === 'completed'
@@ -61,31 +61,31 @@ export function SessionTimeline({
               <div
                 key={index}
                 className={cn(
-                  'glass-card rounded-xl p-4',
+                  'bg-card border border-border rounded-xl p-4',
                   isCompleted && 'border-l-2 border-emerald-400/50'
                 )}
               >
                 <div className="flex items-start gap-3">
                   <span className={cn(
                     'mt-0.5 flex h-6 w-6 shrink-0 items-center justify-center rounded-full text-xs font-medium',
-                    isCompleted ? 'bg-emerald-400/10 text-emerald-400' : 'bg-white/10 text-white/50'
+                    isCompleted ? 'bg-emerald-400/10 text-emerald-400' : 'bg-accent text-muted-foreground'
                   )}>
                     {isCompleted ? '\u2713' : index + 1}
                   </span>
                   <div className="min-w-0 flex-1">
-                    <p className="font-medium text-white">{decision.question || 'Step'}</p>
+                    <p className="font-medium text-foreground">{decision.question || 'Step'}</p>
                     {decision.notes && (
-                      <p className="mt-1.5 rounded bg-white/5 p-2 text-sm text-white/40">
+                      <p className="mt-1.5 rounded bg-white/5 p-2 text-sm text-muted-foreground">
                         Notes: {decision.notes}
                       </p>
                     )}
                     {decision.command_output && (
-                      <p className="mt-1 text-sm text-white/40">
+                      <p className="mt-1 text-sm text-muted-foreground">
                         Verification: {decision.command_output}
                       </p>
                     )}
                     {decision.duration_seconds != null && (
-                      <p className="mt-1 text-xs text-white/30">
+                      <p className="mt-1 text-xs text-muted-foreground">
                         Duration: {formatDuration(decision.duration_seconds)}
                       </p>
                     )}
@@ -94,7 +94,7 @@ export function SessionTimeline({
                     <button
                       onClick={() => handleCopyStep(decision, index)}
                       title="Copy step to clipboard"
-                      className="rounded p-1 text-white/30 hover:bg-white/10 hover:text-white"
+                      className="rounded p-1 text-muted-foreground hover:bg-accent hover:text-foreground"
                     >
                       {copiedStepIndex === index ? (
                         <Check className="h-4 w-4 text-emerald-400" />
@@ -123,52 +123,52 @@ export function SessionTimeline({
   // Default: troubleshooting decision timeline
   return (
     <div className="mb-8">
-      <h2 className="mb-4 text-lg font-semibold text-white">Decision Timeline</h2>
+      <h2 className="mb-4 text-lg font-semibold text-foreground">Decision Timeline</h2>
       <div className="space-y-4">
         <div className="flex items-center gap-3 text-sm">
-          <span className="h-3 w-3 rounded-full bg-white" />
-          <span className="text-white/40">
+          <span className="h-3 w-3 rounded-full bg-foreground" />
+          <span className="text-muted-foreground">
             Session started: {formatDate(startedAt)}
           </span>
         </div>
 
         {decisions.map((decision, index) => (
-          <div key={index} className="ml-1 border-l-2 border-white/[0.06] pl-6">
+          <div key={index} className="ml-1 border-l-2 border-border pl-6">
             <div className="relative">
-              <span className="absolute -left-[1.625rem] top-1 h-2 w-2 rounded-full bg-white/20" />
-              <div className="glass-card rounded-xl p-4">
+              <span className="absolute -left-[1.625rem] top-1 h-2 w-2 rounded-full bg-muted-foreground" />
+              <div className="bg-card border border-border rounded-xl p-4">
                 <div className="flex items-start justify-between gap-2">
                   <div className="flex-1">
                     {decision.question && (
-                      <p className="font-medium text-white">{decision.question}</p>
+                      <p className="font-medium text-foreground">{decision.question}</p>
                     )}
                     {decision.answer && (
-                      <p className="mt-1 text-sm text-white">Answer: {decision.answer}</p>
+                      <p className="mt-1 text-sm text-foreground">Answer: {decision.answer}</p>
                     )}
                     {decision.action_performed && (
-                      <p className="mt-1 text-sm text-white/40">
+                      <p className="mt-1 text-sm text-muted-foreground">
                         Action: {decision.action_performed}
                       </p>
                     )}
                     {decision.notes && (
-                      <p className="mt-2 rounded bg-white/5 p-2 text-sm text-white/40">
+                      <p className="mt-2 rounded bg-white/5 p-2 text-sm text-muted-foreground">
                         Notes: {decision.notes}
                       </p>
                     )}
                     {decision.command_output && (
                       <div className="mt-2">
-                        <p className="mb-1 text-xs font-medium text-white/50">Command Output</p>
-                        <pre className="overflow-x-auto rounded bg-white/5 p-2 text-xs font-mono text-white/60 whitespace-pre-wrap">
+                        <p className="mb-1 text-xs font-medium text-muted-foreground">Command Output</p>
+                        <pre className="overflow-x-auto rounded bg-white/5 p-2 text-xs font-mono text-muted-foreground whitespace-pre-wrap">
                           {decision.command_output}
                         </pre>
                       </div>
                     )}
                     {decision.duration_seconds != null && (
-                      <p className="mt-2 text-xs text-white/50">
+                      <p className="mt-2 text-xs text-muted-foreground">
                         Duration: {formatDuration(decision.duration_seconds)}
                       </p>
                     )}
-                    <p className="mt-2 text-xs text-white/40">
+                    <p className="mt-2 text-xs text-muted-foreground">
                       {formatDate(decision.timestamp)}
                     </p>
                   </div>
@@ -176,7 +176,7 @@ export function SessionTimeline({
                     <button
                       onClick={() => handleCopyStep(decision, index)}
                       title="Copy step to clipboard"
-                      className="rounded p-1 text-white/30 hover:bg-white/10 hover:text-white"
+                      className="rounded p-1 text-muted-foreground hover:bg-accent hover:text-foreground"
                     >
                       {copiedStepIndex === index ? (
                         <Check className="h-4 w-4 text-emerald-400" />
diff --git a/frontend/src/components/session/ShareSessionModal.tsx b/frontend/src/components/session/ShareSessionModal.tsx
index 0adf3298..19b1e94d 100644
--- a/frontend/src/components/session/ShareSessionModal.tsx
+++ b/frontend/src/components/session/ShareSessionModal.tsx
@@ -185,16 +185,16 @@ export function ShareSessionModal({ sessionId, sessionLabel, isOpen, onClose }:
       />
 
       {/* Modal */}
-      <div className="relative w-full max-w-lg glass-card rounded-2xl shadow-lg">
+      <div className="relative w-full max-w-lg bg-card border border-border rounded-xl shadow-lg">
         {/* Header */}
-        <div className="flex items-center justify-between border-b border-white/[0.06] px-6 py-4">
+        <div className="flex items-center justify-between border-b border-border px-6 py-4">
           <div>
-            <h2 className="text-lg font-semibold text-white">Share Session</h2>
-            <p className="text-sm text-white/40">{sessionLabel}</p>
+            <h2 className="text-lg font-heading font-semibold text-foreground">Share Session</h2>
+            <p className="text-sm text-muted-foreground">{sessionLabel}</p>
           </div>
           <button
             onClick={onClose}
-            className="rounded-md p-1 text-white/40 hover:bg-white/[0.06] hover:text-white"
+            className="rounded-md p-1 text-muted-foreground hover:bg-accent hover:text-foreground"
           >
             <X className="h-5 w-5" />
           </button>
@@ -206,7 +206,7 @@ export function ShareSessionModal({ sessionId, sessionLabel, isOpen, onClose }:
           <div className="space-y-4">
             {/* Visibility */}
             <div>
-              <label className="mb-2 block text-sm font-medium text-white">
+              <label className="mb-2 block text-sm font-medium text-foreground">
                 Visibility
               </label>
               <div className="space-y-2">
@@ -215,17 +215,17 @@ export function ShareSessionModal({ sessionId, sessionLabel, isOpen, onClose }:
                   className={cn(
                     'flex w-full items-center gap-3 rounded-md border px-4 py-3 text-left transition-colors',
                     visibility === 'account'
-                      ? 'border-white/20 bg-white/10 text-white'
-                      : 'border-white/[0.06] bg-transparent text-white/50 hover:border-white/20 hover:bg-white/[0.06]'
+                      ? 'border-primary/30 bg-primary/10 text-foreground'
+                      : 'border-border bg-transparent text-muted-foreground hover:border-border hover:bg-accent'
                   )}
                 >
                   <Users className="h-4 w-4" />
                   <div className="flex-1">
                     <div className="text-sm font-medium">Account Only</div>
-                    <div className="text-xs text-white/40">Visible to your team</div>
+                    <div className="text-xs text-muted-foreground">Visible to your team</div>
                   </div>
                   {visibility === 'account' && (
-                    <div className="h-2 w-2 rounded-full bg-white" />
+                    <div className="h-2 w-2 rounded-full bg-primary" />
                   )}
                 </button>
                 <button
@@ -233,17 +233,17 @@ export function ShareSessionModal({ sessionId, sessionLabel, isOpen, onClose }:
                   className={cn(
                     'flex w-full items-center gap-3 rounded-md border px-4 py-3 text-left transition-colors',
                     visibility === 'public'
-                      ? 'border-white/20 bg-white/10 text-white'
-                      : 'border-white/[0.06] bg-transparent text-white/50 hover:border-white/20 hover:bg-white/[0.06]'
+                      ? 'border-primary/30 bg-primary/10 text-foreground'
+                      : 'border-border bg-transparent text-muted-foreground hover:border-border hover:bg-accent'
                   )}
                 >
                   <Globe className="h-4 w-4" />
                   <div className="flex-1">
                     <div className="text-sm font-medium">Public</div>
-                    <div className="text-xs text-white/40">Anyone with the link</div>
+                    <div className="text-xs text-muted-foreground">Anyone with the link</div>
                   </div>
                   {visibility === 'public' && (
-                    <div className="h-2 w-2 rounded-full bg-white" />
+                    <div className="h-2 w-2 rounded-full bg-primary" />
                   )}
                 </button>
               </div>
@@ -254,8 +254,8 @@ export function ShareSessionModal({ sessionId, sessionLabel, isOpen, onClose }:
 
             {/* Share Name */}
             <div>
-              <label className="mb-2 block text-sm font-medium text-white">
-                Share Name <span className="text-white/40">(optional)</span>
+              <label className="mb-2 block text-sm font-medium text-foreground">
+                Share Name <span className="text-muted-foreground">(optional)</span>
               </label>
               <input
                 type="text"
@@ -263,8 +263,8 @@ export function ShareSessionModal({ sessionId, sessionLabel, isOpen, onClose }:
                 onChange={(e) => setShareName(e.target.value.slice(0, 100))}
                 placeholder="e.g. Training link, Customer escalation"
                 className={cn(
-                  'w-full rounded-md border border-white/10 bg-black/50 px-3 py-2 text-sm text-white placeholder-white/30',
-                  'focus:border-white/30 focus:outline-none focus:ring-1 focus:ring-white/20'
+                  'w-full rounded-md border border-border bg-card px-3 py-2 text-sm text-foreground placeholder-muted-foreground',
+                  'focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/20'
                 )}
                 maxLength={100}
               />
@@ -272,7 +272,7 @@ export function ShareSessionModal({ sessionId, sessionLabel, isOpen, onClose }:
 
             {/* Expiration */}
             <div>
-              <label className="mb-2 block text-sm font-medium text-white">
+              <label className="mb-2 block text-sm font-medium text-foreground">
                 Expiration
               </label>
               <div className="flex flex-wrap gap-2">
@@ -283,8 +283,8 @@ export function ShareSessionModal({ sessionId, sessionLabel, isOpen, onClose }:
                     className={cn(
                       'rounded-md border px-3 py-1.5 text-sm transition-colors',
                       expirationPreset === preset.value
-                        ? 'border-white/20 bg-white/10 text-white'
-                        : 'border-white/10 text-white/50 hover:border-white/20 hover:bg-white/[0.06]'
+                        ? 'border-primary/30 bg-primary/10 text-foreground'
+                        : 'border-border text-muted-foreground hover:border-border hover:bg-accent'
                     )}
                   >
                     {preset.label}
@@ -297,8 +297,8 @@ export function ShareSessionModal({ sessionId, sessionLabel, isOpen, onClose }:
                   value={customDatetime}
                   onChange={(e) => setCustomDatetime(e.target.value)}
                   className={cn(
-                    'mt-2 w-full rounded-md border border-white/10 bg-black/50 px-3 py-2 text-sm text-white',
-                    'focus:border-white/30 focus:outline-none focus:ring-1 focus:ring-white/20',
+                    'mt-2 w-full rounded-md border border-border bg-card px-3 py-2 text-sm text-foreground',
+                    'focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/20',
                     '[color-scheme:dark]'
                   )}
                 />
@@ -310,8 +310,8 @@ export function ShareSessionModal({ sessionId, sessionLabel, isOpen, onClose }:
               onClick={handleGenerateLink}
               disabled={isGenerating || (expirationPreset === 'custom' && !customDatetime)}
               className={cn(
-                'flex w-full items-center justify-center gap-2 rounded-md bg-white px-4 py-2 text-sm font-medium text-black',
-                'hover:bg-white/90 disabled:opacity-50 disabled:cursor-not-allowed'
+                'flex w-full items-center justify-center gap-2 rounded-md bg-gradient-brand px-4 py-2 text-sm font-medium text-white shadow-lg shadow-primary/20',
+                'hover:opacity-90 disabled:opacity-50 disabled:cursor-not-allowed'
               )}
             >
               <Link2 className="h-4 w-4" />
@@ -322,7 +322,7 @@ export function ShareSessionModal({ sessionId, sessionLabel, isOpen, onClose }:
           {/* Existing Shares */}
           {shares.length > 0 && (
             <div>
-              <h3 className="mb-3 text-sm font-medium text-white">
+              <h3 className="mb-3 text-sm font-medium text-foreground">
                 Active Shares ({shares.length})
               </h3>
               <div className="space-y-3">
@@ -332,7 +332,7 @@ export function ShareSessionModal({ sessionId, sessionLabel, isOpen, onClose }:
                   return (
                     <div
                       key={share.id}
-                      className="glass-card rounded-xl p-4 space-y-2"
+                      className="bg-card border border-border rounded-xl p-4 space-y-2"
                     >
                       <div className="flex items-start justify-between gap-2">
                         <div className="flex-1 min-w-0">
@@ -340,8 +340,8 @@ export function ShareSessionModal({ sessionId, sessionLabel, isOpen, onClose }:
                             <span className={cn(
                               'inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-xs',
                               share.visibility === 'public'
-                                ? 'bg-white/10 text-white/70'
-                                : 'bg-white/10 text-white/70'
+                                ? 'bg-accent text-muted-foreground'
+                                : 'bg-accent text-muted-foreground'
                             )}>
                               {share.visibility === 'public' ? (
                                 <Globe className="h-3 w-3" />
@@ -350,11 +350,11 @@ export function ShareSessionModal({ sessionId, sessionLabel, isOpen, onClose }:
                               )}
                               {share.visibility === 'public' ? 'Public' : 'Account'}
                             </span>
-                            <span className="truncate text-sm font-medium text-white">
+                            <span className="truncate text-sm font-medium text-foreground">
                               {share.share_name || 'Untitled share'}
                             </span>
                           </div>
-                          <div className="mt-1 flex flex-wrap items-center gap-x-3 gap-y-1 text-xs text-white/40">
+                          <div className="mt-1 flex flex-wrap items-center gap-x-3 gap-y-1 text-xs text-muted-foreground">
                             <span>{getRelativeTime(share.created_at)}</span>
                             <span>
                               {share.view_count > 0
@@ -375,10 +375,10 @@ export function ShareSessionModal({ sessionId, sessionLabel, isOpen, onClose }:
                             onClick={() => handleCopyUrl(share)}
                             title="Copy share URL"
                             className={cn(
-                              'rounded-md border border-white/10 p-1.5 text-sm transition-colors',
+                              'rounded-md border border-border p-1.5 text-sm transition-colors',
                               isCopied
                                 ? 'border-emerald-500/30 bg-emerald-500/10 text-emerald-400'
-                                : 'text-white/50 hover:bg-white/10 hover:text-white'
+                                : 'text-muted-foreground hover:bg-accent hover:text-foreground'
                             )}
                           >
                             {isCopied ? (
@@ -390,7 +390,7 @@ export function ShareSessionModal({ sessionId, sessionLabel, isOpen, onClose }:
                           <button
                             onClick={() => handleRevoke(share.id)}
                             title="Revoke share"
-                            className="rounded-md border border-white/10 p-1.5 text-white/50 hover:bg-red-500/10 hover:border-red-500/30 hover:text-red-400 transition-colors"
+                            className="rounded-md border border-border p-1.5 text-muted-foreground hover:bg-red-500/10 hover:border-red-500/30 hover:text-red-400 transition-colors"
                           >
                             <Trash2 className="h-3.5 w-3.5" />
                           </button>
@@ -406,18 +406,18 @@ export function ShareSessionModal({ sessionId, sessionLabel, isOpen, onClose }:
           {/* Loading state */}
           {isLoadingShares && shares.length === 0 && (
             <div className="flex items-center justify-center py-4">
-              <div className="h-5 w-5 animate-spin rounded-full border-2 border-white/20 border-t-white" />
+              <div className="h-5 w-5 animate-spin rounded-full border-2 border-border border-t-foreground" />
             </div>
           )}
         </div>
 
         {/* Footer */}
-        <div className="flex justify-end gap-3 border-t border-white/[0.06] px-6 py-4">
+        <div className="flex justify-end gap-3 border-t border-border px-6 py-4">
           <button
             onClick={onClose}
             className={cn(
-              'rounded-md border border-white/10 px-4 py-2 text-sm font-medium text-white/60',
-              'hover:bg-white/10 hover:text-white'
+              'rounded-md border border-border px-4 py-2 text-sm font-medium text-muted-foreground',
+              'hover:bg-accent hover:text-foreground'
             )}
           >
             Close
diff --git a/frontend/src/components/session/SharedSessionTreePreview.tsx b/frontend/src/components/session/SharedSessionTreePreview.tsx
index 5887ad05..28682dc3 100644
--- a/frontend/src/components/session/SharedSessionTreePreview.tsx
+++ b/frontend/src/components/session/SharedSessionTreePreview.tsx
@@ -7,11 +7,11 @@ interface SharedSessionTreePreviewProps {
 }
 
 const nodeTypeColors: Record<string, string> = {
-  root: 'bg-white',
+  root: 'bg-foreground',
   decision: 'bg-blue-400',
   action: 'bg-yellow-400',
   solution: 'bg-emerald-400',
-  information: 'bg-white/50',
+  information: 'bg-muted-foreground',
 }
 
 function getNodeTitle(node: Record<string, unknown>): string {
@@ -36,7 +36,7 @@ function TreeNode({
   const nodeType = (node.node_type as string) || 'decision'
   const isInPath = pathTaken.includes(nodeId)
   const children = (node.children as Record<string, unknown>[]) || []
-  const colorClass = nodeTypeColors[nodeType] || 'bg-white/50'
+  const colorClass = nodeTypeColors[nodeType] || 'bg-muted-foreground'
 
   return (
     <>
@@ -44,8 +44,8 @@ function TreeNode({
         className={cn(
           'flex items-center gap-2 px-3 py-1.5 text-sm',
           isInPath
-            ? 'rounded-md border-l-2 border-white/40 bg-white/10 font-medium text-white'
-            : 'text-white/30'
+            ? 'rounded-md border-l-2 border-muted-foreground bg-accent font-medium text-foreground'
+            : 'text-muted-foreground'
         )}
         style={{ paddingLeft: `${depth * 16 + 12}px` }}
       >
@@ -75,9 +75,9 @@ export function SharedSessionTreePreview({
   }
 
   return (
-    <div className="glass-card rounded-2xl">
-      <div className="sticky top-0 z-10 rounded-t-2xl border-b border-white/[0.06] bg-black/80 px-6 py-4 backdrop-blur">
-        <h3 className="text-sm font-semibold text-white">Tree Structure</h3>
+    <div className="bg-card border border-border rounded-2xl">
+      <div className="sticky top-0 z-10 rounded-t-2xl border-b border-border bg-black/80 px-6 py-4 backdrop-blur">
+        <h3 className="text-sm font-semibold text-foreground">Tree Structure</h3>
       </div>
       <div className="max-h-[600px] overflow-y-auto py-2">
         <TreeNode node={treeStructure as unknown as Record<string, unknown>} depth={0} pathTaken={pathTaken} />
diff --git a/frontend/src/components/session/StepRatingModal.tsx b/frontend/src/components/session/StepRatingModal.tsx
index 06854248..3872f1b1 100644
--- a/frontend/src/components/session/StepRatingModal.tsx
+++ b/frontend/src/components/session/StepRatingModal.tsx
@@ -78,19 +78,19 @@ export function StepRatingModal({
 
   return (
     <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/80 backdrop-blur-sm p-4">
-      <div className="glass-card w-full max-w-2xl max-h-[90vh] flex flex-col rounded-2xl shadow-lg">
+      <div className="bg-card border border-border w-full max-w-2xl max-h-[90vh] flex flex-col rounded-2xl shadow-lg">
         {/* Header */}
-        <div className="flex items-center justify-between border-b border-white/[0.06] px-6 py-4">
+        <div className="flex items-center justify-between border-b border-border px-6 py-4">
           <div>
-            <h2 className="text-lg font-semibold text-white">Rate Your Experience</h2>
-            <p className="mt-1 text-sm text-white/70">
+            <h2 className="text-lg font-semibold text-foreground">Rate Your Experience</h2>
+            <p className="mt-1 text-sm text-muted-foreground">
               Help others by rating the steps you used ({librarySteps.length} step{librarySteps.length !== 1 ? 's' : ''})
             </p>
           </div>
           <button
             onClick={onClose}
             disabled={isSaving}
-            className="rounded-full p-1 text-white/40 hover:bg-white/10 hover:text-white disabled:opacity-50"
+            className="rounded-full p-1 text-muted-foreground hover:bg-accent hover:text-foreground disabled:opacity-50"
           >
             <X className="h-5 w-5" />
           </button>
@@ -102,14 +102,14 @@ export function StepRatingModal({
             {librarySteps.map((step) => {
               const rating = getRating(step.id)
               return (
-                <div key={step.id} className="rounded-lg border border-white/[0.06] bg-[#0a0a0a] p-4">
+                <div key={step.id} className="rounded-lg border border-border bg-[#0a0a0a] p-4">
                   {/* Step Title */}
-                  <h3 className="font-medium text-white">{step.title}</h3>
-                  <p className="mt-1 text-sm text-white/40 capitalize">{step.step_type}</p>
+                  <h3 className="font-medium text-foreground">{step.title}</h3>
+                  <p className="mt-1 text-sm text-muted-foreground capitalize">{step.step_type}</p>
 
                   {/* Star Rating */}
                   <div className="mt-3">
-                    <label className="mb-1 block text-sm font-medium text-white">
+                    <label className="mb-1 block text-sm font-medium text-foreground">
                       Rating
                     </label>
                     <StarRating
@@ -121,7 +121,7 @@ export function StepRatingModal({
 
                   {/* Was this helpful? */}
                   <div className="mt-3">
-                    <label className="mb-2 block text-sm font-medium text-white">
+                    <label className="mb-2 block text-sm font-medium text-foreground">
                       Was this helpful?
                     </label>
                     <div className="flex gap-2">
@@ -133,7 +133,7 @@ export function StepRatingModal({
                           'flex items-center gap-2 rounded-md border px-4 py-2 text-sm font-medium transition-colors',
                           rating?.helpful === true
                             ? 'border-emerald-400/20 bg-emerald-400/10 text-emerald-400'
-                            : 'border-white/10 text-white/60 hover:bg-white/10 hover:text-white',
+                            : 'border-border text-muted-foreground hover:bg-accent hover:text-foreground',
                           'disabled:opacity-50'
                         )}
                       >
@@ -148,7 +148,7 @@ export function StepRatingModal({
                           'flex items-center gap-2 rounded-md border px-4 py-2 text-sm font-medium transition-colors',
                           rating?.helpful === false
                             ? 'border-red-400/20 bg-red-400/10 text-red-400'
-                            : 'border-white/10 text-white/60 hover:bg-white/10 hover:text-white',
+                            : 'border-border text-muted-foreground hover:bg-accent hover:text-foreground',
                           'disabled:opacity-50'
                         )}
                       >
@@ -160,8 +160,8 @@ export function StepRatingModal({
 
                   {/* Optional Review */}
                   <div className="mt-3">
-                    <label htmlFor={`review-${step.id}`} className="mb-1 block text-sm font-medium text-white">
-                      Review <span className="text-white/40">(optional)</span>
+                    <label htmlFor={`review-${step.id}`} className="mb-1 block text-sm font-medium text-foreground">
+                      Review <span className="text-muted-foreground">(optional)</span>
                     </label>
                     <textarea
                       id={`review-${step.id}`}
@@ -172,13 +172,13 @@ export function StepRatingModal({
                       rows={2}
                       placeholder="Share your experience with this step..."
                       className={cn(
-                        'w-full rounded-md border border-white/10 bg-black/50 px-3 py-2 text-sm text-white',
-                        'placeholder:text-white/40',
-                        'focus:border-white/30 focus:outline-none focus:ring-1 focus:ring-white/20',
+                        'w-full rounded-md border border-border bg-card px-3 py-2 text-sm text-foreground',
+                        'placeholder:text-muted-foreground',
+                        'focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/20',
                         'disabled:opacity-50'
                       )}
                     />
-                    <p className="mt-1 text-xs text-white/40 text-right">
+                    <p className="mt-1 text-xs text-muted-foreground text-right">
                       {rating?.review?.length || 0}/500
                     </p>
                   </div>
@@ -189,14 +189,14 @@ export function StepRatingModal({
         </div>
 
         {/* Footer */}
-        <div className="flex justify-end gap-2 border-t border-white/[0.06] px-6 py-4">
+        <div className="flex justify-end gap-2 border-t border-border px-6 py-4">
           <button
             type="button"
             onClick={onClose}
             disabled={isSaving}
             className={cn(
-              'rounded-md border border-white/10 px-4 py-2 text-sm font-medium text-white/60',
-              'hover:bg-white/10 hover:text-white disabled:opacity-50'
+              'rounded-md border border-border px-4 py-2 text-sm font-medium text-muted-foreground',
+              'hover:bg-accent hover:text-foreground disabled:opacity-50'
             )}
           >
             Skip
@@ -206,8 +206,8 @@ export function StepRatingModal({
             onClick={handleSubmit}
             disabled={isSaving}
             className={cn(
-              'rounded-md bg-white px-4 py-2 text-sm font-medium text-black',
-              'hover:bg-white/90 disabled:opacity-50'
+              'rounded-md bg-gradient-brand px-4 py-2 text-sm font-medium text-white shadow-lg shadow-primary/20',
+              'hover:opacity-90 disabled:opacity-50'
             )}
           >
             {isSaving ? 'Submitting...' : 'Submit Ratings'}
diff --git a/frontend/src/components/session/VariablePromptModal.tsx b/frontend/src/components/session/VariablePromptModal.tsx
index 0dc36a81..364facd0 100644
--- a/frontend/src/components/session/VariablePromptModal.tsx
+++ b/frontend/src/components/session/VariablePromptModal.tsx
@@ -22,14 +22,14 @@ export function VariablePromptModal({ prompt, onSubmit, onCancel }: VariableProm
 
   return (
     <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/80 backdrop-blur-sm">
-      <div className="glass-card w-full max-w-md rounded-2xl p-6 shadow-lg">
-        <h2 className="mb-1 text-lg font-semibold text-white">Input Required</h2>
-        <p className="mb-4 text-sm text-white/40">
+      <div className="bg-card border border-border w-full max-w-md rounded-2xl p-6 shadow-lg">
+        <h2 className="mb-1 text-lg font-semibold text-foreground">Input Required</h2>
+        <p className="mb-4 text-sm text-muted-foreground">
           This step requires you to provide a value.
         </p>
 
         <form onSubmit={handleSubmit}>
-          <label className="mb-2 block text-sm font-medium text-white/70">
+          <label className="mb-2 block text-sm font-medium text-muted-foreground">
             {prompt}
           </label>
           <input
@@ -39,8 +39,8 @@ export function VariablePromptModal({ prompt, onSubmit, onCancel }: VariableProm
             placeholder="Enter value..."
             autoFocus
             className={cn(
-              'w-full rounded-lg border border-white/10 bg-black/50 px-3 py-2 text-sm text-white',
-              'placeholder:text-white/30 focus:border-white/30 focus:outline-none focus:ring-1 focus:ring-white/20'
+              'w-full rounded-lg border border-border bg-card px-3 py-2 text-sm text-foreground',
+              'placeholder:text-muted-foreground focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/20'
             )}
           />
 
@@ -49,8 +49,8 @@ export function VariablePromptModal({ prompt, onSubmit, onCancel }: VariableProm
               type="submit"
               disabled={!value.trim()}
               className={cn(
-                'flex-1 rounded-lg bg-white px-4 py-2 text-sm font-medium text-black',
-                'hover:bg-white/90 disabled:opacity-50 disabled:cursor-not-allowed'
+                'flex-1 rounded-lg bg-gradient-brand px-4 py-2 text-sm font-medium text-white shadow-lg shadow-primary/20',
+                'hover:opacity-90 disabled:opacity-50 disabled:cursor-not-allowed'
               )}
             >
               Continue
@@ -59,8 +59,8 @@ export function VariablePromptModal({ prompt, onSubmit, onCancel }: VariableProm
               type="button"
               onClick={onCancel}
               className={cn(
-                'rounded-lg border border-white/10 px-4 py-2 text-sm font-medium text-white/60',
-                'hover:bg-white/10 hover:text-white'
+                'rounded-lg border border-border px-4 py-2 text-sm font-medium text-muted-foreground',
+                'hover:bg-accent hover:text-foreground'
               )}
             >
               Skip
diff --git a/frontend/src/components/sidebar/CategoryList.tsx b/frontend/src/components/sidebar/CategoryList.tsx
new file mode 100644
index 00000000..37f3476e
--- /dev/null
+++ b/frontend/src/components/sidebar/CategoryList.tsx
@@ -0,0 +1,47 @@
+import { cn } from '@/lib/utils'
+
+interface CategoryItem {
+  id: string
+  name: string
+  color: string
+  count: number
+}
+
+interface CategoryListProps {
+  categories: CategoryItem[]
+  activeId?: string | null
+  onSelect: (id: string | null) => void
+}
+
+export function CategoryList({ categories, activeId, onSelect }: CategoryListProps) {
+  if (categories.length === 0) return null
+
+  return (
+    <div className="px-3 py-2">
+      <p className="mb-2 px-3 font-heading text-[0.6875rem] font-bold uppercase tracking-[0.04em] text-muted-foreground">
+        Categories
+      </p>
+      <div className="space-y-0.5">
+        {categories.map(cat => (
+          <button
+            key={cat.id}
+            onClick={() => onSelect(activeId === cat.id ? null : cat.id)}
+            className={cn(
+              'flex w-full items-center gap-2.5 rounded-lg px-3 py-1.5 text-sm transition-colors',
+              activeId === cat.id
+                ? 'bg-[hsl(var(--sidebar-active))] text-foreground'
+                : 'text-muted-foreground hover:bg-[hsl(var(--sidebar-hover))] hover:text-foreground'
+            )}
+          >
+            <span
+              className="h-2 w-2 shrink-0 rounded-full"
+              style={{ backgroundColor: cat.color }}
+            />
+            <span className="flex-1 truncate text-left">{cat.name}</span>
+            <span className="font-label text-[0.6875rem] text-[hsl(var(--text-dimmed))]">{cat.count}</span>
+          </button>
+        ))}
+      </div>
+    </div>
+  )
+}
diff --git a/frontend/src/components/sidebar/PinnedFlowsSection.tsx b/frontend/src/components/sidebar/PinnedFlowsSection.tsx
new file mode 100644
index 00000000..0dbacbf4
--- /dev/null
+++ b/frontend/src/components/sidebar/PinnedFlowsSection.tsx
@@ -0,0 +1,60 @@
+import { useState } from 'react'
+import { useNavigate } from 'react-router-dom'
+import { ChevronDown, ChevronRight, Pin } from 'lucide-react'
+import { getTreeNavigatePath } from '@/lib/routing'
+import { cn } from '@/lib/utils'
+import type { PinnedFlow } from '@/api/pinnedFlows'
+
+interface PinnedFlowsSectionProps {
+  flows: PinnedFlow[]
+  onUnpin: (treeId: string) => void
+}
+
+export function PinnedFlowsSection({ flows, onUnpin }: PinnedFlowsSectionProps) {
+  const navigate = useNavigate()
+  const [collapsed, setCollapsed] = useState(false)
+
+  return (
+    <div className="px-3 py-2">
+      <button
+        onClick={() => setCollapsed(!collapsed)}
+        className="flex w-full items-center gap-1 px-3 mb-1 font-heading text-[0.6875rem] font-bold uppercase tracking-[0.04em] text-muted-foreground hover:text-foreground transition-colors"
+      >
+        {collapsed ? <ChevronRight size={12} /> : <ChevronDown size={12} />}
+        Pinned
+      </button>
+
+      {!collapsed && (
+        <div className="space-y-0.5 max-h-[280px] overflow-y-auto">
+          {flows.length === 0 ? (
+            <p className="px-3 py-2 text-xs text-muted-foreground">
+              Pin your most-used flows here
+            </p>
+          ) : (
+            flows.map(flow => (
+              <button
+                key={flow.tree_id}
+                onClick={() => navigate(getTreeNavigatePath(flow.tree_id, flow.tree_type))}
+                onContextMenu={(e) => {
+                  e.preventDefault()
+                  onUnpin(flow.tree_id)
+                }}
+                className={cn(
+                  'group flex w-full items-center gap-2.5 rounded-lg px-3 py-1.5 text-[0.8125rem] font-medium transition-colors',
+                  'text-muted-foreground hover:bg-[hsl(var(--sidebar-hover))] hover:text-foreground'
+                )}
+                title={`${flow.tree_name} (right-click to unpin)`}
+              >
+                <span className="text-sm shrink-0">
+                  {flow.tree_type === 'procedural' ? '📋' : '🔧'}
+                </span>
+                <span className="truncate flex-1 text-left">{flow.tree_name}</span>
+                <Pin size={12} className="shrink-0 opacity-0 group-hover:opacity-40 transition-opacity" />
+              </button>
+            ))
+          )}
+        </div>
+      )}
+    </div>
+  )
+}
diff --git a/frontend/src/components/sidebar/TagCloud.tsx b/frontend/src/components/sidebar/TagCloud.tsx
new file mode 100644
index 00000000..4974a1d6
--- /dev/null
+++ b/frontend/src/components/sidebar/TagCloud.tsx
@@ -0,0 +1,38 @@
+import { cn } from '@/lib/utils'
+
+interface TagCloudProps {
+  tags: string[]
+  activeTags?: string[]
+  onTagClick: (tag: string) => void
+}
+
+export function TagCloud({ tags, activeTags = [], onTagClick }: TagCloudProps) {
+  if (tags.length === 0) return null
+
+  return (
+    <div className="px-3 py-2">
+      <p className="mb-2 px-3 font-heading text-[0.6875rem] font-bold uppercase tracking-[0.04em] text-muted-foreground">
+        Popular Tags
+      </p>
+      <div className="flex flex-wrap gap-1 px-3">
+        {tags.map(tag => {
+          const isActive = activeTags.includes(tag)
+          return (
+            <button
+              key={tag}
+              onClick={() => onTagClick(tag)}
+              className={cn(
+                'rounded-md border px-2 py-0.5 font-label text-[0.625rem] transition-colors',
+                isActive
+                  ? 'border-primary/30 bg-primary/10 text-primary'
+                  : 'border-border bg-card text-muted-foreground hover:border-primary/20 hover:text-foreground'
+              )}
+            >
+              {tag}
+            </button>
+          )
+        })}
+      </div>
+    </div>
+  )
+}
diff --git a/frontend/src/components/step-library/CustomStepModal.tsx b/frontend/src/components/step-library/CustomStepModal.tsx
index 2923cf53..6a6b6218 100644
--- a/frontend/src/components/step-library/CustomStepModal.tsx
+++ b/frontend/src/components/step-library/CustomStepModal.tsx
@@ -65,13 +65,13 @@ export function CustomStepModal({ isOpen, onClose, onInsertStep }: CustomStepMod
 
   return (
     <div className="fixed inset-0 z-50 flex items-end justify-center bg-black/80 backdrop-blur-sm sm:items-center sm:p-4">
-      <div className="relative flex h-[95vh] w-full max-w-full flex-col border border-white/[0.06] bg-[#0a0a0a] shadow-lg sm:h-[90vh] sm:max-w-4xl sm:rounded-2xl">
+      <div className="relative flex h-[95vh] w-full max-w-full flex-col border border-border bg-card shadow-lg sm:h-[90vh] sm:max-w-4xl sm:rounded-2xl">
         {/* Header */}
-        <div className="flex items-center justify-between border-b border-white/[0.06] p-4">
-          <h2 className="text-lg font-semibold text-white">Add Custom Step</h2>
+        <div className="flex items-center justify-between border-b border-border p-4">
+          <h2 className="text-lg font-semibold text-foreground">Add Custom Step</h2>
           <button
             onClick={onClose}
-            className="rounded-md p-1.5 text-white/40 hover:bg-white/10 hover:text-white"
+            className="rounded-md p-1.5 text-muted-foreground hover:bg-accent hover:text-foreground"
             aria-label="Close"
           >
             <X className="h-5 w-5" />
@@ -79,15 +79,15 @@ export function CustomStepModal({ isOpen, onClose, onInsertStep }: CustomStepMod
         </div>
 
         {/* Tabs */}
-        <div className="flex border-b border-white/[0.06]">
+        <div className="flex border-b border-border">
           {canCreateSteps && (
             <button
               onClick={() => setActiveTab('create')}
               className={cn(
                 'flex-1 px-4 py-3 text-sm font-medium transition-colors',
                 activeTab === 'create'
-                  ? 'border-b-2 border-white bg-white/5 text-white'
-                  : 'text-white/40 hover:bg-white/10 hover:text-white'
+                  ? 'border-b-2 border-primary bg-primary/5 text-foreground'
+                  : 'text-muted-foreground hover:bg-accent hover:text-foreground'
               )}
             >
               Type My Own
@@ -134,8 +134,8 @@ export function CustomStepModal({ isOpen, onClose, onInsertStep }: CustomStepMod
         {isSubmitting && (
           <div className="absolute inset-0 flex items-center justify-center bg-black/80 backdrop-blur-sm">
             <div className="flex flex-col items-center gap-3">
-              <div className="h-8 w-8 animate-spin rounded-full border-4 border-white/20 border-t-white" />
-              <p className="text-sm text-white/40">Creating step...</p>
+              <div className="h-8 w-8 animate-spin rounded-full border-4 border-border border-t-foreground" />
+              <p className="text-sm text-muted-foreground">Creating step...</p>
             </div>
           </div>
         )}
diff --git a/frontend/src/components/step-library/StepCard.tsx b/frontend/src/components/step-library/StepCard.tsx
index 374f1c5a..5a37e672 100644
--- a/frontend/src/components/step-library/StepCard.tsx
+++ b/frontend/src/components/step-library/StepCard.tsx
@@ -27,7 +27,7 @@ export function StepCard({ step, onPreview, onInsert }: StepCardProps) {
   const remainingTags = step.tags.length - 3
 
   return (
-    <div className="group rounded-lg border border-white/[0.06] bg-[#0a0a0a] p-4 transition-shadow hover:shadow-md">
+    <div className="group rounded-lg border border-border bg-card p-4 transition-shadow hover:shadow-md">
       {/* Header */}
       <div className="mb-3 flex items-start justify-between gap-2">
         <div className="flex-1">
@@ -52,12 +52,12 @@ export function StepCard({ step, onPreview, onInsert }: StepCardProps) {
           </div>
 
           {/* Title */}
-          <h3 className="font-semibold text-white line-clamp-2">{step.title}</h3>
+          <h3 className="font-semibold text-foreground line-clamp-2">{step.title}</h3>
         </div>
       </div>
 
       {/* Metadata */}
-      <div className="mb-3 space-y-1.5 text-sm text-white/40">
+      <div className="mb-3 space-y-1.5 text-sm text-muted-foreground">
         {/* Category */}
         {step.category_name && (
           <div className="flex items-center gap-1.5">
@@ -103,7 +103,7 @@ export function StepCard({ step, onPreview, onInsert }: StepCardProps) {
           {visibleTags.map(tag => (
             <span
               key={tag}
-              className="rounded-full bg-white/10 px-2 py-0.5 text-xs text-white/70"
+              className="rounded-full bg-accent px-2 py-0.5 text-xs text-muted-foreground"
             >
               {tag}
             </span>
@@ -121,8 +121,8 @@ export function StepCard({ step, onPreview, onInsert }: StepCardProps) {
         <button
           onClick={() => onPreview(step)}
           className={cn(
-            'flex flex-1 items-center justify-center gap-2 rounded-md border border-white/10 px-3 py-2 text-sm font-medium text-white/60',
-            'hover:bg-white/10 hover:text-white transition-colors'
+            'flex flex-1 items-center justify-center gap-2 rounded-md border border-border px-3 py-2 text-sm font-medium text-muted-foreground',
+            'hover:bg-accent hover:text-foreground transition-colors'
           )}
         >
           <Eye className="h-4 w-4" />
@@ -131,8 +131,8 @@ export function StepCard({ step, onPreview, onInsert }: StepCardProps) {
         <button
           onClick={() => onInsert(step)}
           className={cn(
-            'flex flex-1 items-center justify-center gap-2 rounded-md bg-white px-3 py-2 text-sm font-medium text-black',
-            'hover:bg-white/90 transition-colors'
+            'flex flex-1 items-center justify-center gap-2 rounded-md bg-gradient-brand text-white shadow-lg shadow-primary/20 px-3 py-2 text-sm font-medium',
+            'hover:opacity-90 transition-colors'
           )}
         >
           <Plus className="h-4 w-4" />
diff --git a/frontend/src/components/step-library/StepDetailModal.tsx b/frontend/src/components/step-library/StepDetailModal.tsx
index df75d8f3..b09dfaa8 100644
--- a/frontend/src/components/step-library/StepDetailModal.tsx
+++ b/frontend/src/components/step-library/StepDetailModal.tsx
@@ -70,11 +70,11 @@ export function StepDetailModal({ stepId, onClose, onInsert }: StepDetailModalPr
 
   return (
     <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/80 backdrop-blur-sm">
-      <div className="relative flex h-[90vh] w-full max-w-3xl flex-col glass-card rounded-2xl shadow-lg">
+      <div className="relative flex h-[90vh] w-full max-w-3xl flex-col bg-card border border-border rounded-2xl shadow-lg">
         {/* Header */}
-        <div className="flex items-start justify-between border-b border-white/[0.06] p-6 pb-4">
+        <div className="flex items-start justify-between border-b border-border p-6 pb-4">
           {isLoading ? (
-            <div className="h-6 w-48 animate-pulse rounded bg-white/10" />
+            <div className="h-6 w-48 animate-pulse rounded bg-accent" />
           ) : error ? (
             <h2 className="text-lg font-semibold text-red-400">{error}</h2>
           ) : step ? (
@@ -90,7 +90,7 @@ export function StepDetailModal({ stepId, onClose, onInsert }: StepDetailModalPr
                   {step.step_type}
                 </span>
                 {step.category_name && (
-                  <span className="text-xs text-white/40">📁 {step.category_name}</span>
+                  <span className="text-xs text-muted-foreground">{step.category_name}</span>
                 )}
                 {step.is_featured && (
                   <span className="rounded bg-yellow-400/10 px-2 py-0.5 text-xs font-medium text-yellow-400">
@@ -99,16 +99,16 @@ export function StepDetailModal({ stepId, onClose, onInsert }: StepDetailModalPr
                 )}
                 {step.is_verified && (
                   <span className="rounded bg-emerald-400/10 px-2 py-0.5 text-xs font-medium text-emerald-400">
-                    ✓ Verified
+                    Verified
                   </span>
                 )}
               </div>
-              <h2 className="text-xl font-semibold text-white">{step.title}</h2>
+              <h2 className="text-xl font-semibold text-foreground">{step.title}</h2>
             </div>
           ) : null}
           <button
             onClick={onClose}
-            className="rounded-md p-1 text-white/40 hover:bg-white/10 hover:text-white"
+            className="rounded-md p-1 text-muted-foreground hover:bg-accent hover:text-foreground"
             aria-label="Close"
           >
             <X className="h-5 w-5" />
@@ -119,18 +119,18 @@ export function StepDetailModal({ stepId, onClose, onInsert }: StepDetailModalPr
         <div className="flex-1 overflow-y-auto p-6">
           {isLoading ? (
             <div className="space-y-4">
-              <div className="h-4 w-full animate-pulse rounded bg-white/10" />
-              <div className="h-4 w-3/4 animate-pulse rounded bg-white/10" />
-              <div className="h-4 w-5/6 animate-pulse rounded bg-white/10" />
+              <div className="h-4 w-full animate-pulse rounded bg-accent" />
+              <div className="h-4 w-3/4 animate-pulse rounded bg-accent" />
+              <div className="h-4 w-5/6 animate-pulse rounded bg-accent" />
             </div>
           ) : error ? (
-            <p className="text-sm text-white/40">{error}</p>
+            <p className="text-sm text-muted-foreground">{error}</p>
           ) : step ? (
             <div className="space-y-6">
               {/* Rating */}
               {hasRating && (
                 <div>
-                  <h3 className="mb-2 text-sm font-semibold text-white">Rating</h3>
+                  <h3 className="mb-2 text-sm font-semibold text-foreground">Rating</h3>
                   <div className="flex items-center gap-2">
                     <div className="flex items-center gap-1">
                       {[1, 2, 3, 4, 5].map(i => (
@@ -140,12 +140,12 @@ export function StepDetailModal({ stepId, onClose, onInsert }: StepDetailModalPr
                             'h-4 w-4',
                             i <= Math.round(step.rating_average)
                               ? 'fill-yellow-400 text-yellow-400'
-                              : 'text-white/20'
+                              : 'text-muted-foreground'
                           )}
                         />
                       ))}
                     </div>
-                    <span className="text-sm text-white/70">
+                    <span className="text-sm text-muted-foreground">
                       {step.rating_average.toFixed(1)} ({step.rating_count} {step.rating_count === 1 ? 'rating' : 'ratings'})
                     </span>
                   </div>
@@ -155,12 +155,12 @@ export function StepDetailModal({ stepId, onClose, onInsert }: StepDetailModalPr
               {/* Tags */}
               {step.tags.length > 0 && (
                 <div>
-                  <h3 className="mb-2 text-sm font-semibold text-white">Tags</h3>
+                  <h3 className="mb-2 text-sm font-semibold text-foreground">Tags</h3>
                   <div className="flex flex-wrap gap-1.5">
                     {step.tags.map(tag => (
                       <span
                         key={tag}
-                        className="rounded-full bg-white/10 px-2 py-1 text-xs text-white/70"
+                        className="rounded-full bg-accent px-2 py-1 text-xs text-muted-foreground"
                       >
                         {tag}
                       </span>
@@ -172,7 +172,7 @@ export function StepDetailModal({ stepId, onClose, onInsert }: StepDetailModalPr
               {/* Instructions */}
               <div>
                 <h3 className="mb-2 text-sm font-semibold">Instructions</h3>
-                <div className="rounded-lg border border-white/[0.06] bg-white/5 p-4">
+                <div className="rounded-lg border border-border bg-accent/50 p-4">
                   <MarkdownContent content={step.content.instructions} />
                 </div>
               </div>
@@ -180,8 +180,8 @@ export function StepDetailModal({ stepId, onClose, onInsert }: StepDetailModalPr
               {/* Help Text */}
               {step.content.help_text && (
                 <div>
-                  <h3 className="mb-2 text-sm font-semibold text-white">Help Text</h3>
-                  <div className="rounded-lg border border-white/[0.06] bg-blue-400/5 p-4 text-sm">
+                  <h3 className="mb-2 text-sm font-semibold text-foreground">Help Text</h3>
+                  <div className="rounded-lg border border-border bg-blue-400/5 p-4 text-sm">
                     <MarkdownContent content={step.content.help_text} />
                   </div>
                 </div>
@@ -190,19 +190,19 @@ export function StepDetailModal({ stepId, onClose, onInsert }: StepDetailModalPr
               {/* Commands */}
               {step.content.commands && step.content.commands.length > 0 && (
                 <div>
-                  <h3 className="mb-2 text-sm font-semibold text-white">Commands</h3>
+                  <h3 className="mb-2 text-sm font-semibold text-foreground">Commands</h3>
                   <div className="space-y-2">
                     {step.content.commands.map((cmd, index) => (
                       <div key={index} className="group relative">
                         <div className="mb-1 flex items-center justify-between">
-                          <span className="text-xs font-medium text-white/40">{cmd.label}</span>
+                          <span className="text-xs font-medium text-muted-foreground">{cmd.label}</span>
                           <button
                             onClick={() => handleCopyCommand(cmd.command, index)}
                             className={cn(
                               'flex items-center gap-1 rounded px-2 py-1 text-xs transition-colors',
                               copiedCommandIndex === index
                                 ? 'bg-emerald-400/10 text-emerald-400'
-                                : 'bg-white/10 text-white/40 hover:bg-white/20 hover:text-white'
+                                : 'bg-accent text-muted-foreground hover:bg-accent hover:text-foreground'
                             )}
                           >
                             {copiedCommandIndex === index ? (
@@ -218,7 +218,7 @@ export function StepDetailModal({ stepId, onClose, onInsert }: StepDetailModalPr
                             )}
                           </button>
                         </div>
-                        <pre className="overflow-x-auto rounded bg-black/50 p-3 text-xs text-white">
+                        <pre className="overflow-x-auto rounded bg-card p-3 text-xs text-foreground">
                           <code>{cmd.command}</code>
                         </pre>
                       </div>
@@ -231,23 +231,23 @@ export function StepDetailModal({ stepId, onClose, onInsert }: StepDetailModalPr
               {topReviews.length > 0 && (
                 <div>
                   <div className="mb-2 flex items-center justify-between">
-                    <h3 className="text-sm font-semibold text-white">Reviews</h3>
+                    <h3 className="text-sm font-semibold text-foreground">Reviews</h3>
                     {reviews.length > 3 && (
-                      <button className="text-xs text-white/70 hover:text-white hover:underline">
+                      <button className="text-xs text-muted-foreground hover:text-foreground hover:underline">
                         See all {reviews.length} reviews
                       </button>
                     )}
                   </div>
                   <div className="space-y-3">
                     {topReviews.map(review => (
-                      <div key={review.id} className="rounded-lg border border-white/[0.06] bg-white/5 p-3">
+                      <div key={review.id} className="rounded-lg border border-border bg-accent/50 p-3">
                         <div className="mb-2 flex items-center justify-between">
                           <div className="flex items-center gap-2 text-sm">
                             <User className="h-3.5 w-3.5" />
-                            <span className="font-medium text-white">{review.user_name || 'Anonymous'}</span>
+                            <span className="font-medium text-foreground">{review.user_name || 'Anonymous'}</span>
                             {review.verified_use && (
                               <span className="rounded bg-emerald-400/10 px-1.5 py-0.5 text-xs text-emerald-400">
-                                ✓ Verified Use
+                                Verified Use
                               </span>
                             )}
                           </div>
@@ -259,14 +259,14 @@ export function StepDetailModal({ stepId, onClose, onInsert }: StepDetailModalPr
                                   'h-3 w-3',
                                   i <= review.rating
                                     ? 'fill-yellow-400 text-yellow-400'
-                                    : 'text-white/20'
+                                    : 'text-muted-foreground'
                                 )}
                               />
                             ))}
                           </div>
                         </div>
-                        <p className="text-sm text-white/70">{review.review_text}</p>
-                        <div className="mt-2 flex items-center gap-2 text-xs text-white/40">
+                        <p className="text-sm text-muted-foreground">{review.review_text}</p>
+                        <div className="mt-2 flex items-center gap-2 text-xs text-muted-foreground">
                           <Calendar className="h-3 w-3" />
                           {new Date(review.created_at).toLocaleDateString()}
                         </div>
@@ -277,22 +277,22 @@ export function StepDetailModal({ stepId, onClose, onInsert }: StepDetailModalPr
               )}
 
               {/* Metadata */}
-              <div className="rounded-lg border border-white/[0.06] bg-white/5 p-4">
+              <div className="rounded-lg border border-border bg-accent/50 p-4">
                 <div className="grid grid-cols-2 gap-3 text-sm">
                   <div>
-                    <span className="text-white/40">Author:</span>
-                    <span className="ml-2 font-medium text-white">{step.author_name || 'Unknown'}</span>
+                    <span className="text-muted-foreground">Author:</span>
+                    <span className="ml-2 font-medium text-foreground">{step.author_name || 'Unknown'}</span>
                   </div>
                   <div>
-                    <span className="text-white/40">Usage Count:</span>
-                    <span className="ml-2 font-medium text-white">{step.usage_count}</span>
+                    <span className="text-muted-foreground">Usage Count:</span>
+                    <span className="ml-2 font-medium text-foreground">{step.usage_count}</span>
                   </div>
                   <div>
-                    <span className="text-white/40">Created:</span>
-                    <span className="ml-2 font-medium text-white">{new Date(step.created_at).toLocaleDateString()}</span>
+                    <span className="text-muted-foreground">Created:</span>
+                    <span className="ml-2 font-medium text-foreground">{new Date(step.created_at).toLocaleDateString()}</span>
                   </div>
                   <div>
-                    <span className="text-white/40">Visibility:</span>
+                    <span className="text-muted-foreground">Visibility:</span>
                     <span className="ml-2 font-medium capitalize">{step.visibility}</span>
                   </div>
                 </div>
@@ -302,10 +302,10 @@ export function StepDetailModal({ stepId, onClose, onInsert }: StepDetailModalPr
         </div>
 
         {/* Footer - Actions */}
-        <div className="flex gap-2 border-t border-white/[0.06] p-4">
+        <div className="flex gap-2 border-t border-border p-4">
           <button
             onClick={onClose}
-            className="flex-1 rounded-md border border-white/10 px-4 py-2 text-sm font-medium text-white/60 hover:bg-white/10 hover:text-white"
+            className="flex-1 rounded-md border border-border px-4 py-2 text-sm font-medium text-muted-foreground hover:bg-accent hover:text-foreground"
           >
             Cancel
           </button>
@@ -313,8 +313,8 @@ export function StepDetailModal({ stepId, onClose, onInsert }: StepDetailModalPr
             onClick={handleInsert}
             disabled={!step}
             className={cn(
-              'flex-1 rounded-md bg-white px-4 py-2 text-sm font-medium text-black',
-              'hover:bg-white/90 disabled:opacity-50'
+              'flex-1 rounded-md bg-gradient-brand px-4 py-2 text-sm font-medium text-white shadow-lg shadow-primary/20',
+              'hover:opacity-90 disabled:opacity-50'
             )}
           >
             Insert Into Session
diff --git a/frontend/src/components/step-library/StepForm.tsx b/frontend/src/components/step-library/StepForm.tsx
index 6fdbc271..59a4052a 100644
--- a/frontend/src/components/step-library/StepForm.tsx
+++ b/frontend/src/components/step-library/StepForm.tsx
@@ -136,7 +136,7 @@ export function StepForm({ onSubmit, onCancel, initialData }: StepFormProps) {
     <form onSubmit={handleSubmit} className="space-y-6">
       {/* Step Type */}
       <div>
-        <label className="mb-2 block text-sm font-medium text-white">
+        <label className="mb-2 block text-sm font-medium text-foreground">
           Step Type <span className="text-red-400">*</span>
         </label>
         <div className="grid grid-cols-3 gap-2">
@@ -150,15 +150,15 @@ export function StepForm({ onSubmit, onCancel, initialData }: StepFormProps) {
                 className={cn(
                   'rounded-lg border p-3 text-left transition-colors',
                   stepType === option.value
-                    ? 'border-white/20 bg-white/10 ring-2 ring-white/20'
-                    : 'border-white/[0.06] hover:border-white/20'
+                    ? 'border-border bg-accent ring-2 ring-primary/20'
+                    : 'border-border hover:border-border'
                 )}
               >
                 <div className="mb-1 flex items-center gap-2">
                   <Icon className="h-4 w-4" />
-                  <span className="font-medium text-sm text-white">{option.label}</span>
+                  <span className="font-medium text-sm text-foreground">{option.label}</span>
                 </div>
-                <p className="text-xs text-white/40">{option.description}</p>
+                <p className="text-xs text-muted-foreground">{option.description}</p>
               </button>
             )
           })}
@@ -167,7 +167,7 @@ export function StepForm({ onSubmit, onCancel, initialData }: StepFormProps) {
 
       {/* Title */}
       <div>
-        <label htmlFor="title" className="mb-2 block text-sm font-medium text-white">
+        <label htmlFor="title" className="mb-2 block text-sm font-medium text-foreground">
           Title <span className="text-red-400">*</span>
         </label>
         <input
@@ -177,8 +177,8 @@ export function StepForm({ onSubmit, onCancel, initialData }: StepFormProps) {
           onChange={(e) => setTitle(e.target.value)}
           placeholder="Enter step title"
           className={cn(
-            'w-full rounded-md border bg-black/50 px-3 py-2 text-sm text-white focus:outline-none focus:border-white/30 focus:ring-1 focus:ring-white/20',
-            errors.title ? 'border-red-400/50' : 'border-white/10'
+            'w-full rounded-md border bg-card px-3 py-2 text-sm text-foreground focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary/20',
+            errors.title ? 'border-red-400/50' : 'border-border'
           )}
         />
         {errors.title && (
@@ -188,9 +188,9 @@ export function StepForm({ onSubmit, onCancel, initialData }: StepFormProps) {
 
       {/* Instructions */}
       <div>
-        <label htmlFor="instructions" className="mb-2 block text-sm font-medium text-white">
+        <label htmlFor="instructions" className="mb-2 block text-sm font-medium text-foreground">
           Instructions <span className="text-red-400">*</span>
-          <span className="ml-2 text-xs font-normal text-white/40">(Markdown supported)</span>
+          <span className="ml-2 text-xs font-normal text-muted-foreground">(Markdown supported)</span>
         </label>
         <textarea
           id="instructions"
@@ -199,8 +199,8 @@ export function StepForm({ onSubmit, onCancel, initialData }: StepFormProps) {
           placeholder="Describe what to do in this step..."
           rows={6}
           className={cn(
-            'w-full rounded-md border bg-black/50 px-3 py-2 text-sm text-white focus:outline-none focus:border-white/30 focus:ring-1 focus:ring-white/20',
-            errors.instructions ? 'border-red-400/50' : 'border-white/10'
+            'w-full rounded-md border bg-card px-3 py-2 text-sm text-foreground focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary/20',
+            errors.instructions ? 'border-red-400/50' : 'border-border'
           )}
         />
         {errors.instructions && (
@@ -210,8 +210,8 @@ export function StepForm({ onSubmit, onCancel, initialData }: StepFormProps) {
 
       {/* Help Text */}
       <div>
-        <label htmlFor="helpText" className="mb-2 block text-sm font-medium text-white">
-          Help Text <span className="text-xs font-normal text-white/40">(Optional)</span>
+        <label htmlFor="helpText" className="mb-2 block text-sm font-medium text-foreground">
+          Help Text <span className="text-xs font-normal text-muted-foreground">(Optional)</span>
         </label>
         <textarea
           id="helpText"
@@ -219,20 +219,20 @@ export function StepForm({ onSubmit, onCancel, initialData }: StepFormProps) {
           onChange={(e) => setHelpText(e.target.value)}
           placeholder="Additional context or tips..."
           rows={3}
-          className="w-full rounded-md border border-white/10 bg-black/50 px-3 py-2 text-sm text-white focus:outline-none focus:border-white/30 focus:ring-1 focus:ring-white/20"
+          className="w-full rounded-md border border-border bg-card px-3 py-2 text-sm text-foreground focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary/20"
         />
       </div>
 
       {/* Commands */}
       <div>
         <div className="mb-2 flex items-center justify-between">
-          <label className="text-sm font-medium text-white">
-            Commands <span className="text-xs font-normal text-white/40">(Optional)</span>
+          <label className="text-sm font-medium text-foreground">
+            Commands <span className="text-xs font-normal text-muted-foreground">(Optional)</span>
           </label>
           <button
             type="button"
             onClick={addCommand}
-            className="flex items-center gap-1 rounded-md bg-white/10 px-2 py-1 text-xs font-medium text-white/70 hover:bg-white/20 hover:text-white"
+            className="flex items-center gap-1 rounded-md bg-accent px-2 py-1 text-xs font-medium text-muted-foreground hover:bg-accent hover:text-foreground"
           >
             <Plus className="h-3 w-3" />
             Add Command
@@ -241,13 +241,13 @@ export function StepForm({ onSubmit, onCancel, initialData }: StepFormProps) {
         {commands.length > 0 && (
           <div className="space-y-3">
             {commands.map((cmd, index) => (
-              <div key={index} className="rounded-lg border border-white/[0.06] bg-white/5 p-3">
+              <div key={index} className="rounded-lg border border-border bg-accent/50 p-3">
                 <div className="mb-2 flex items-center justify-between">
-                  <span className="text-xs font-medium text-white/40">Command {index + 1}</span>
+                  <span className="text-xs font-medium text-muted-foreground">Command {index + 1}</span>
                   <button
                     type="button"
                     onClick={() => removeCommand(index)}
-                    className="rounded p-1 text-white/40 hover:bg-red-400/10 hover:text-red-400"
+                    className="rounded p-1 text-muted-foreground hover:bg-red-400/10 hover:text-red-400"
                   >
                     <X className="h-3 w-3" />
                   </button>
@@ -259,8 +259,8 @@ export function StepForm({ onSubmit, onCancel, initialData }: StepFormProps) {
                     onChange={(e) => updateCommand(index, 'label', e.target.value)}
                     placeholder="Command label (e.g., 'Restart service')"
                     className={cn(
-                      'w-full rounded-md border bg-black/50 px-3 py-1.5 text-sm text-white',
-                      errors[`command_${index}_label`] ? 'border-red-400/50' : 'border-white/10'
+                      'w-full rounded-md border bg-card px-3 py-1.5 text-sm text-foreground',
+                      errors[`command_${index}_label`] ? 'border-red-400/50' : 'border-border'
                     )}
                   />
                   <input
@@ -269,8 +269,8 @@ export function StepForm({ onSubmit, onCancel, initialData }: StepFormProps) {
                     onChange={(e) => updateCommand(index, 'command', e.target.value)}
                     placeholder="Command (e.g., 'systemctl restart nginx')"
                     className={cn(
-                      'w-full rounded-md border bg-black/50 px-3 py-1.5 font-mono text-sm text-white',
-                      errors[`command_${index}_command`] ? 'border-red-400/50' : 'border-white/10'
+                      'w-full rounded-md border bg-card px-3 py-1.5 font-mono text-sm text-foreground',
+                      errors[`command_${index}_command`] ? 'border-red-400/50' : 'border-border'
                     )}
                   />
                   {(errors[`command_${index}_label`] || errors[`command_${index}_command`]) && (
@@ -287,14 +287,14 @@ export function StepForm({ onSubmit, onCancel, initialData }: StepFormProps) {
 
       {/* Category */}
       <div>
-        <label htmlFor="category" className="mb-2 block text-sm font-medium text-white">
-          Category <span className="text-xs font-normal text-white/40">(Optional)</span>
+        <label htmlFor="category" className="mb-2 block text-sm font-medium text-foreground">
+          Category <span className="text-xs font-normal text-muted-foreground">(Optional)</span>
         </label>
         <select
           id="category"
           value={categoryId}
           onChange={(e) => setCategoryId(e.target.value)}
-          className="w-full rounded-md border border-white/10 bg-black/50 px-3 py-2 text-sm text-white focus:outline-none focus:border-white/30 focus:ring-1 focus:ring-white/20"
+          className="w-full rounded-md border border-border bg-card px-3 py-2 text-sm text-foreground focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary/20"
         >
           <option value="">None</option>
           {categories.map(cat => (
@@ -305,8 +305,8 @@ export function StepForm({ onSubmit, onCancel, initialData }: StepFormProps) {
 
       {/* Tags */}
       <div>
-        <label htmlFor="tagInput" className="mb-2 block text-sm font-medium text-white">
-          Tags <span className="text-xs font-normal text-white/40">(Optional)</span>
+        <label htmlFor="tagInput" className="mb-2 block text-sm font-medium text-foreground">
+          Tags <span className="text-xs font-normal text-muted-foreground">(Optional)</span>
         </label>
         <div className="flex gap-2">
           <input
@@ -316,12 +316,12 @@ export function StepForm({ onSubmit, onCancel, initialData }: StepFormProps) {
             onChange={(e) => setTagInput(e.target.value)}
             onKeyDown={handleTagInputKeyDown}
             placeholder="Type tag and press Enter"
-            className="flex-1 rounded-md border border-white/10 bg-black/50 px-3 py-2 text-sm text-white focus:outline-none focus:border-white/30 focus:ring-1 focus:ring-white/20"
+            className="flex-1 rounded-md border border-border bg-card px-3 py-2 text-sm text-foreground focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary/20"
           />
           <button
             type="button"
             onClick={addTag}
-            className="rounded-md bg-white/10 px-4 py-2 text-sm font-medium text-white/70 hover:bg-white/20 hover:text-white"
+            className="rounded-md bg-accent px-4 py-2 text-sm font-medium text-muted-foreground hover:bg-accent hover:text-foreground"
           >
             Add
           </button>
@@ -331,13 +331,13 @@ export function StepForm({ onSubmit, onCancel, initialData }: StepFormProps) {
             {tags.map(tag => (
               <span
                 key={tag}
-                className="flex items-center gap-1 rounded-full bg-white/10 px-2.5 py-1 text-xs text-white/70"
+                className="flex items-center gap-1 rounded-full bg-accent px-2.5 py-1 text-xs text-muted-foreground"
               >
                 {tag}
                 <button
                   type="button"
                   onClick={() => removeTag(tag)}
-                  className="rounded-full hover:bg-white/20"
+                  className="rounded-full hover:bg-accent"
                   aria-label={`Remove tag ${tag}`}
                 >
                   <X className="h-3 w-3" />
@@ -350,14 +350,14 @@ export function StepForm({ onSubmit, onCancel, initialData }: StepFormProps) {
 
       {/* Visibility */}
       <div>
-        <label htmlFor="visibility" className="mb-2 block text-sm font-medium text-white">
+        <label htmlFor="visibility" className="mb-2 block text-sm font-medium text-foreground">
           Visibility
         </label>
         <select
           id="visibility"
           value={visibility}
           onChange={(e) => setVisibility(e.target.value as 'private' | 'team' | 'public')}
-          className="w-full rounded-md border border-white/10 bg-black/50 px-3 py-2 text-sm text-white focus:outline-none focus:border-white/30 focus:ring-1 focus:ring-white/20"
+          className="w-full rounded-md border border-border bg-card px-3 py-2 text-sm text-foreground focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary/20"
         >
           <option value="private">Private (only me)</option>
           <option value="team">Team (my team members)</option>
@@ -370,13 +370,13 @@ export function StepForm({ onSubmit, onCancel, initialData }: StepFormProps) {
         <button
           type="button"
           onClick={onCancel}
-          className="flex-1 rounded-md border border-white/10 px-4 py-2 text-sm font-medium text-white/60 hover:bg-white/10 hover:text-white"
+          className="flex-1 rounded-md border border-border px-4 py-2 text-sm font-medium text-muted-foreground hover:bg-accent hover:text-foreground"
         >
           Cancel
         </button>
         <button
           type="submit"
-          className="flex-1 rounded-md bg-white px-4 py-2 text-sm font-medium text-black hover:bg-white/90"
+          className="flex-1 rounded-md bg-gradient-brand text-white shadow-lg shadow-primary/20 px-4 py-2 text-sm font-medium hover:opacity-90"
         >
           Insert Step
         </button>
diff --git a/frontend/src/components/step-library/StepLibraryBrowser.tsx b/frontend/src/components/step-library/StepLibraryBrowser.tsx
index 4854b107..1b610f31 100644
--- a/frontend/src/components/step-library/StepLibraryBrowser.tsx
+++ b/frontend/src/components/step-library/StepLibraryBrowser.tsx
@@ -133,16 +133,16 @@ export function StepLibraryBrowser({ onInsert, onCreateNew, showCreateButton = f
   return (
     <div className="flex h-full flex-col">
       {/* Header - Filters */}
-      <div className="space-y-4 border-b border-white/[0.06] p-4">
+      <div className="space-y-4 border-b border-border p-4">
         {/* Search */}
         <div className="relative">
-          <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-white/40" />
+          <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
           <input
             type="text"
             placeholder="Search steps..."
             value={searchQuery}
             onChange={(e) => setSearchQuery(e.target.value)}
-            className="w-full rounded-md border border-white/10 bg-black/50 py-2 pl-10 pr-4 text-sm text-white placeholder:text-white/40 focus:outline-none focus:border-white/30 focus:ring-1 focus:ring-white/20"
+            className="w-full rounded-md border border-border bg-card py-2 pl-10 pr-4 text-sm text-foreground placeholder:text-muted-foreground focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary/20"
           />
         </div>
 
@@ -153,7 +153,7 @@ export function StepLibraryBrowser({ onInsert, onCreateNew, showCreateButton = f
             aria-label="Filter by category"
             value={selectedCategoryId || ''}
             onChange={(e) => setSelectedCategoryId(e.target.value || undefined)}
-            className="rounded-md border border-white/10 bg-black/50 px-3 py-2 text-sm text-white focus:outline-none focus:border-white/30 focus:ring-1 focus:ring-white/20"
+            className="rounded-md border border-border bg-card px-3 py-2 text-sm text-foreground focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary/20"
           >
             <option value="">All Categories</option>
             {categories.map(cat => (
@@ -166,7 +166,7 @@ export function StepLibraryBrowser({ onInsert, onCreateNew, showCreateButton = f
             aria-label="Filter by step type"
             value={selectedStepType || ''}
             onChange={(e) => setSelectedStepType((e.target.value as 'decision' | 'action' | 'solution') || undefined)}
-            className="rounded-md border border-white/10 bg-black/50 px-3 py-2 text-sm text-white focus:outline-none focus:border-white/30 focus:ring-1 focus:ring-white/20"
+            className="rounded-md border border-border bg-card px-3 py-2 text-sm text-foreground focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary/20"
           >
             <option value="">All Types</option>
             <option value="decision">Decision</option>
@@ -179,7 +179,7 @@ export function StepLibraryBrowser({ onInsert, onCreateNew, showCreateButton = f
             aria-label="Filter by minimum rating"
             value={minRating?.toString() || ''}
             onChange={(e) => setMinRating(e.target.value ? Number(e.target.value) : undefined)}
-            className="rounded-md border border-white/10 bg-black/50 px-3 py-2 text-sm text-white focus:outline-none focus:border-white/30 focus:ring-1 focus:ring-white/20"
+            className="rounded-md border border-border bg-card px-3 py-2 text-sm text-foreground focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary/20"
           >
             <option value="">Any Rating</option>
             <option value="4">4+ Stars</option>
@@ -192,7 +192,7 @@ export function StepLibraryBrowser({ onInsert, onCreateNew, showCreateButton = f
             aria-label="Sort steps by"
             value={sortBy}
             onChange={(e) => setSortBy(e.target.value as 'recent' | 'popular' | 'highest_rated' | 'most_used')}
-            className="rounded-md border border-white/10 bg-black/50 px-3 py-2 text-sm text-white focus:outline-none focus:border-white/30 focus:ring-1 focus:ring-white/20"
+            className="rounded-md border border-border bg-card px-3 py-2 text-sm text-foreground focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary/20"
           >
             <option value="recent">Most Recent</option>
             <option value="popular">Most Popular</option>
@@ -204,7 +204,7 @@ export function StepLibraryBrowser({ onInsert, onCreateNew, showCreateButton = f
         {/* Popular Tags */}
         {popularTags.length > 0 && (
           <div>
-            <div className="mb-2 text-xs font-medium text-white/40">Popular Tags:</div>
+            <div className="mb-2 text-xs font-medium text-muted-foreground">Popular Tags:</div>
             <div className="flex flex-wrap gap-1.5">
               {popularTags.map(tag => (
                 <button
@@ -213,8 +213,8 @@ export function StepLibraryBrowser({ onInsert, onCreateNew, showCreateButton = f
                   className={cn(
                     'rounded-full px-2.5 py-1 text-xs transition-colors',
                     selectedTag === tag.tag
-                      ? 'bg-white text-black'
-                      : 'bg-white/10 text-white/70 hover:bg-white/20'
+                      ? 'bg-gradient-brand text-white shadow-lg shadow-primary/20'
+                      : 'bg-accent text-muted-foreground hover:bg-accent'
                   )}
                 >
                   {tag.tag} ({tag.count})
@@ -228,7 +228,7 @@ export function StepLibraryBrowser({ onInsert, onCreateNew, showCreateButton = f
         {hasActiveFilters && (
           <button
             onClick={clearFilters}
-            className="text-sm text-white/70 hover:text-white hover:underline"
+            className="text-sm text-muted-foreground hover:text-foreground hover:underline"
           >
             Clear all filters
           </button>
@@ -239,16 +239,16 @@ export function StepLibraryBrowser({ onInsert, onCreateNew, showCreateButton = f
       <div className="flex-1 overflow-y-auto p-4">
         {isLoading ? (
           <div className="flex items-center justify-center py-12">
-            <Loader2 className="h-8 w-8 animate-spin text-white/40" />
+            <Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
           </div>
         ) : error ? (
           <div className="rounded-lg border border-red-400/20 bg-red-400/10 p-4 text-center text-sm text-red-400">
             {error}
           </div>
         ) : steps.length === 0 ? (
-          <div className="rounded-lg border border-white/[0.06] bg-white/5 p-12 text-center">
-            <p className="mb-2 text-lg font-medium text-white">No steps found</p>
-            <p className="text-sm text-white/40">
+          <div className="rounded-lg border border-border bg-accent/50 p-12 text-center">
+            <p className="mb-2 text-lg font-medium text-foreground">No steps found</p>
+            <p className="text-sm text-muted-foreground">
               {hasActiveFilters ? 'Try adjusting your filters' : 'Create your first step to get started!'}
             </p>
           </div>
@@ -261,7 +261,7 @@ export function StepLibraryBrowser({ onInsert, onCreateNew, showCreateButton = f
                   onClick={() => toggleSection('private')}
                   className="mb-3 flex w-full items-center justify-between"
                 >
-                  <h3 className="text-sm font-semibold text-white">My Steps ({groupedSteps.private.length})</h3>
+                  <h3 className="text-sm font-semibold text-foreground">My Steps ({groupedSteps.private.length})</h3>
                   {collapsedSections.private ? (
                     <ChevronDown className="h-4 w-4" />
                   ) : (
@@ -290,7 +290,7 @@ export function StepLibraryBrowser({ onInsert, onCreateNew, showCreateButton = f
                   onClick={() => toggleSection('team')}
                   className="mb-3 flex w-full items-center justify-between"
                 >
-                  <h3 className="text-sm font-semibold text-white">Team Steps ({groupedSteps.team.length})</h3>
+                  <h3 className="text-sm font-semibold text-foreground">Team Steps ({groupedSteps.team.length})</h3>
                   {collapsedSections.team ? (
                     <ChevronDown className="h-4 w-4" />
                   ) : (
@@ -319,7 +319,7 @@ export function StepLibraryBrowser({ onInsert, onCreateNew, showCreateButton = f
                   onClick={() => toggleSection('public')}
                   className="mb-3 flex w-full items-center justify-between"
                 >
-                  <h3 className="text-sm font-semibold text-white">Community ({groupedSteps.public.length})</h3>
+                  <h3 className="text-sm font-semibold text-foreground">Community ({groupedSteps.public.length})</h3>
                   {collapsedSections.public ? (
                     <ChevronDown className="h-4 w-4" />
                   ) : (
@@ -346,10 +346,10 @@ export function StepLibraryBrowser({ onInsert, onCreateNew, showCreateButton = f
 
       {/* Footer - Optional Create Button */}
       {showCreateButton && onCreateNew && (
-        <div className="border-t border-white/[0.06] p-4">
+        <div className="border-t border-border p-4">
           <button
             onClick={onCreateNew}
-            className="w-full rounded-md bg-white px-4 py-2 text-sm font-medium text-black hover:bg-white/90"
+            className="w-full rounded-md bg-gradient-brand px-4 py-2 text-sm font-medium text-white shadow-lg shadow-primary/20 hover:opacity-90"
           >
             + Create New Step
           </button>
diff --git a/frontend/src/components/tree-editor/DynamicArrayField.tsx b/frontend/src/components/tree-editor/DynamicArrayField.tsx
index 7b3b00e0..e004d4f1 100644
--- a/frontend/src/components/tree-editor/DynamicArrayField.tsx
+++ b/frontend/src/components/tree-editor/DynamicArrayField.tsx
@@ -51,7 +51,7 @@ export function DynamicArrayField<T>({
                 type="button"
                 onClick={() => handleMoveUp(index)}
                 disabled={index === 0}
-                className="rounded p-0.5 text-white/50 hover:bg-white/[0.06] hover:text-white disabled:opacity-30"
+                className="rounded p-0.5 text-muted-foreground hover:bg-accent hover:text-foreground disabled:opacity-30"
                 title="Move up"
                 aria-label="Move up"
               >
@@ -61,7 +61,7 @@ export function DynamicArrayField<T>({
                 type="button"
                 onClick={() => handleMoveDown(index)}
                 disabled={index === items.length - 1}
-                className="rounded p-0.5 text-white/50 hover:bg-white/[0.06] hover:text-white disabled:opacity-30"
+                className="rounded p-0.5 text-muted-foreground hover:bg-accent hover:text-foreground disabled:opacity-30"
                 title="Move down"
                 aria-label="Move down"
               >
@@ -78,7 +78,7 @@ export function DynamicArrayField<T>({
             <button
               type="button"
               onClick={() => onRemove(index)}
-              className="mt-1 rounded p-1 text-white/50 hover:bg-red-400/20 hover:text-red-400"
+              className="mt-1 rounded p-1 text-muted-foreground hover:bg-red-400/20 hover:text-red-400"
               title="Remove"
               aria-label="Remove"
             >
@@ -94,9 +94,9 @@ export function DynamicArrayField<T>({
           type="button"
           onClick={onAdd}
           className={cn(
-            'flex w-full items-center justify-center gap-1 rounded-md border border-dashed border-white/10',
-            'px-3 py-2 text-sm text-white/50',
-            'hover:border-white/30 hover:text-white'
+            'flex w-full items-center justify-center gap-1 rounded-md border border-dashed border-border',
+            'px-3 py-2 text-sm text-muted-foreground',
+            'hover:border-border hover:text-foreground'
           )}
         >
           <Plus className="h-4 w-4" />
@@ -106,7 +106,7 @@ export function DynamicArrayField<T>({
 
       {/* Empty state */}
       {items.length === 0 && !canAdd && (
-        <p className="text-center text-sm text-white/40">No items</p>
+        <p className="text-center text-sm text-muted-foreground">No items</p>
       )}
     </div>
   )
diff --git a/frontend/src/components/tree-editor/NodeEditorModal.tsx b/frontend/src/components/tree-editor/NodeEditorModal.tsx
index 484c3248..95f55ef5 100644
--- a/frontend/src/components/tree-editor/NodeEditorModal.tsx
+++ b/frontend/src/components/tree-editor/NodeEditorModal.tsx
@@ -68,14 +68,14 @@ export function NodeEditorModal({ node, onClose, isNewNode = false }: NodeEditor
       <button
         type="button"
         onClick={handleCancel}
-        className="rounded-md border border-white/10 px-4 py-2 text-sm font-medium text-white/60 hover:bg-white/10 hover:text-white"
+        className="rounded-md border border-border px-4 py-2 text-sm font-medium text-muted-foreground hover:bg-accent hover:text-foreground"
       >
         Cancel
       </button>
       <button
         type="button"
         onClick={handleSave}
-        className="rounded-md bg-white px-4 py-2 text-sm font-medium text-black hover:bg-white/90"
+        className="rounded-md bg-gradient-brand text-white shadow-lg shadow-primary/20 px-4 py-2 text-sm font-medium hover:opacity-90"
       >
         Done
       </button>
@@ -85,8 +85,8 @@ export function NodeEditorModal({ node, onClose, isNewNode = false }: NodeEditor
   return (
     <Modal isOpen={true} onClose={onClose} title={getTitle()} size="lg" footer={footerContent}>
       {/* Node ID display */}
-      <div className="mb-4 text-xs text-white/40">
-        Node ID: <code className="rounded bg-white/10 px-1 py-0.5">{node.id}</code>
+      <div className="mb-4 text-xs text-muted-foreground">
+        Node ID: <code className="rounded bg-accent px-1 py-0.5">{node.id}</code>
       </div>
 
       {/* Validation errors */}
diff --git a/frontend/src/components/tree-editor/NodeFormAction.tsx b/frontend/src/components/tree-editor/NodeFormAction.tsx
index a2aaf091..1d37d80f 100644
--- a/frontend/src/components/tree-editor/NodeFormAction.tsx
+++ b/frontend/src/components/tree-editor/NodeFormAction.tsx
@@ -52,7 +52,7 @@ export function NodeFormAction({ node, onUpdate }: NodeFormActionProps) {
     <div className="space-y-4">
       {/* Title */}
       <div>
-        <label className="block text-sm font-medium text-white">
+        <label className="block text-sm font-medium text-foreground">
           Title <span className="text-red-400">*</span>
         </label>
         <input
@@ -62,9 +62,9 @@ export function NodeFormAction({ node, onUpdate }: NodeFormActionProps) {
           placeholder="e.g., Restart the Service"
           className={cn(
             'mt-1 block w-full rounded-md border px-3 py-2 text-sm',
-            'bg-black/50 text-white placeholder:text-white/40',
-            'focus:border-white/30 focus:outline-none focus:ring-1 focus:ring-white/20',
-            titleError ? 'border-red-400' : 'border-white/10'
+            'bg-card text-foreground placeholder:text-muted-foreground',
+            'focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/20',
+            titleError ? 'border-red-400' : 'border-border'
           )}
         />
         {titleError && (
@@ -75,24 +75,24 @@ export function NodeFormAction({ node, onUpdate }: NodeFormActionProps) {
       {/* Description */}
       <div>
         <div className="flex items-center justify-between">
-          <label className="block text-sm font-medium text-white">
+          <label className="block text-sm font-medium text-foreground">
             Description
           </label>
           {node.description && (
             <button
               type="button"
               onClick={() => setShowPreview(!showPreview)}
-              className="text-xs text-white/50 hover:text-white hover:underline"
+              className="text-xs text-muted-foreground hover:text-foreground hover:underline"
             >
               {showPreview ? 'Edit' : 'Preview'}
             </button>
           )}
         </div>
-        <p className="mb-1 text-xs text-white/40">
+        <p className="mb-1 text-xs text-muted-foreground">
           Supports markdown: **bold**, *italic*, - lists, 1. numbered lists, `code`
         </p>
         {showPreview && node.description ? (
-          <div className="mt-1 rounded-md border border-white/10 bg-white/[0.04] p-3 text-sm">
+          <div className="mt-1 rounded-md border border-border bg-accent/50 p-3 text-sm">
             <MarkdownContent content={node.description} />
           </div>
         ) : (
@@ -108,7 +108,7 @@ export function NodeFormAction({ node, onUpdate }: NodeFormActionProps) {
 **Note:** Important information here"
             rows={5}
             className={cn(
-              'mt-1 block w-full rounded-md border border-white/10 px-3 py-2 text-sm',
+              'mt-1 block w-full rounded-md border border-border px-3 py-2 text-sm',
               'bg-background text-foreground placeholder:text-muted-foreground',
               'focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary'
             )}
@@ -118,10 +118,10 @@ export function NodeFormAction({ node, onUpdate }: NodeFormActionProps) {
 
       {/* Commands */}
       <div>
-        <label className="block text-sm font-medium text-white">
+        <label className="block text-sm font-medium text-foreground">
           Commands
         </label>
-        <p className="mb-2 text-xs text-white/40">
+        <p className="mb-2 text-xs text-muted-foreground">
           PowerShell or CLI commands to execute
         </p>
         <DynamicArrayField
@@ -137,7 +137,7 @@ export function NodeFormAction({ node, onUpdate }: NodeFormActionProps) {
               onChange={(e) => handleUpdateCommand(index, e.target.value)}
               placeholder="e.g., Get-Service BrokerAgent"
               className={cn(
-                'block w-full rounded-md border border-white/10 px-3 py-2 font-mono text-sm',
+                'block w-full rounded-md border border-border px-3 py-2 font-mono text-sm',
                 'bg-background text-foreground placeholder:text-muted-foreground',
                 'focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary'
               )}
@@ -148,7 +148,7 @@ export function NodeFormAction({ node, onUpdate }: NodeFormActionProps) {
 
       {/* Expected Outcome */}
       <div>
-        <label className="block text-sm font-medium text-white">
+        <label className="block text-sm font-medium text-foreground">
           Expected Outcome
         </label>
         <input
@@ -157,7 +157,7 @@ export function NodeFormAction({ node, onUpdate }: NodeFormActionProps) {
           onChange={(e) => onUpdate({ expected_outcome: e.target.value })}
           placeholder="e.g., Service should show as Running"
           className={cn(
-            'mt-1 block w-full rounded-md border border-white/10 px-3 py-2 text-sm',
+            'mt-1 block w-full rounded-md border border-border px-3 py-2 text-sm',
             'bg-background text-foreground placeholder:text-muted-foreground',
             'focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary'
           )}
diff --git a/frontend/src/components/tree-editor/NodeFormDecision.tsx b/frontend/src/components/tree-editor/NodeFormDecision.tsx
index 4b409dfb..b2af10dc 100644
--- a/frontend/src/components/tree-editor/NodeFormDecision.tsx
+++ b/frontend/src/components/tree-editor/NodeFormDecision.tsx
@@ -67,7 +67,7 @@ export function NodeFormDecision({ node, onUpdate }: NodeFormDecisionProps) {
               <h3 className="font-semibold text-blue-400">
                 Starting Question
               </h3>
-              <p className="mt-1 text-sm text-white/40">
+              <p className="mt-1 text-sm text-muted-foreground">
                 This is the first question users will see when they start this troubleshooting tree.
                 Each option below creates a different troubleshooting path.
               </p>
@@ -78,11 +78,11 @@ export function NodeFormDecision({ node, onUpdate }: NodeFormDecisionProps) {
 
       {/* Question */}
       <div>
-        <label className="block text-sm font-medium text-white">
+        <label className="block text-sm font-medium text-foreground">
           {isRootNode ? 'Starting Question' : 'Question'} <span className="text-red-400">*</span>
         </label>
         {isRootNode && (
-          <p className="mt-0.5 text-xs text-white/40">
+          <p className="mt-0.5 text-xs text-muted-foreground">
             What's the main question to diagnose the issue?
           </p>
         )}
@@ -95,9 +95,9 @@ export function NodeFormDecision({ node, onUpdate }: NodeFormDecisionProps) {
             : "e.g., Can you ping the server?"}
           className={cn(
             'mt-1 block w-full rounded-md border px-3 py-2 text-sm',
-            'bg-black/50 text-white placeholder:text-white/40',
-            'focus:border-white/30 focus:outline-none focus:ring-1 focus:ring-white/20',
-            questionError ? 'border-red-400' : 'border-white/10'
+            'bg-card text-foreground placeholder:text-muted-foreground',
+            'focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/20',
+            questionError ? 'border-red-400' : 'border-border'
           )}
         />
         {questionError && (
@@ -107,7 +107,7 @@ export function NodeFormDecision({ node, onUpdate }: NodeFormDecisionProps) {
 
       {/* Help Text */}
       <div>
-        <label className="block text-sm font-medium text-white">
+        <label className="block text-sm font-medium text-foreground">
           Help Text
         </label>
         <textarea
@@ -116,7 +116,7 @@ export function NodeFormDecision({ node, onUpdate }: NodeFormDecisionProps) {
           placeholder="Additional context or instructions for this decision..."
           rows={2}
           className={cn(
-            'mt-1 block w-full rounded-md border border-white/10 px-3 py-2 text-sm',
+            'mt-1 block w-full rounded-md border border-border px-3 py-2 text-sm',
             'bg-background text-foreground placeholder:text-muted-foreground',
             'focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary'
           )}
@@ -125,15 +125,15 @@ export function NodeFormDecision({ node, onUpdate }: NodeFormDecisionProps) {
 
       {/* Options */}
       <div>
-        <label className="block text-sm font-medium text-white">
+        <label className="block text-sm font-medium text-foreground">
           {isRootNode ? 'Answer Options (Branches)' : 'Options'} <span className="text-red-400">*</span>
         </label>
         {isRootNode ? (
-          <p className="mt-0.5 text-xs text-white/40">
+          <p className="mt-0.5 text-xs text-muted-foreground">
             Add as many options as needed (A, B, C, D...). Each option leads to a completely different troubleshooting path.
           </p>
         ) : (
-          <p className="mt-0.5 text-xs text-white/40">
+          <p className="mt-0.5 text-xs text-muted-foreground">
             Each option can branch to a different next step.
           </p>
         )}
@@ -158,14 +158,14 @@ export function NodeFormDecision({ node, onUpdate }: NodeFormDecisionProps) {
               const letter = indexToLetter(index)
 
               return (
-                <div className="rounded-md border border-white/10 bg-white/[0.04] p-3">
+                <div className="rounded-md border border-border bg-accent/50 p-3">
                   <div className="mb-2 flex items-center gap-2">
                     {/* Letter badge */}
                     <span className={cn(
                       'flex h-6 w-6 items-center justify-center rounded-full text-xs font-bold',
                       isRootNode
                         ? 'bg-blue-500/20 text-blue-400'
-                        : 'bg-white/10 text-white/50'
+                        : 'bg-accent text-muted-foreground'
                     )}>
                       {letter}
                     </span>
@@ -180,7 +180,7 @@ export function NodeFormDecision({ node, onUpdate }: NodeFormDecisionProps) {
                         'block flex-1 rounded-md border px-3 py-2 text-sm',
                         'bg-background text-foreground placeholder:text-muted-foreground',
                         'focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary',
-                        optionLabelError ? 'border-red-400' : 'border-white/10'
+                        optionLabelError ? 'border-red-400' : 'border-border'
                       )}
                     />
                   </div>
@@ -207,7 +207,7 @@ export function NodeFormDecision({ node, onUpdate }: NodeFormDecisionProps) {
 
         {/* Example hint for root node */}
         {isRootNode && (node.options?.length || 0) < 2 && (
-          <div className="mt-3 rounded-md border border-dashed border-white/10 bg-white/[0.02] p-3 text-xs text-white/40">
+          <div className="mt-3 rounded-md border border-dashed border-border bg-accent/50 p-3 text-xs text-muted-foreground">
             <strong>Tip:</strong> Most troubleshooting trees start with 2-5 main branches.
             For example: "Connection Issues", "Performance Problems", "Error Messages", "Other".
           </div>
diff --git a/frontend/src/components/tree-editor/NodeFormResolution.tsx b/frontend/src/components/tree-editor/NodeFormResolution.tsx
index 47927ad4..e24e7df9 100644
--- a/frontend/src/components/tree-editor/NodeFormResolution.tsx
+++ b/frontend/src/components/tree-editor/NodeFormResolution.tsx
@@ -47,7 +47,7 @@ export function NodeFormResolution({ node, onUpdate }: NodeFormResolutionProps)
     <div className="space-y-4">
       {/* Title */}
       <div>
-        <label className="block text-sm font-medium text-white">
+        <label className="block text-sm font-medium text-foreground">
           Title <span className="text-red-400">*</span>
         </label>
         <input
@@ -57,9 +57,9 @@ export function NodeFormResolution({ node, onUpdate }: NodeFormResolutionProps)
           placeholder="e.g., VDA Successfully Registered"
           className={cn(
             'mt-1 block w-full rounded-md border px-3 py-2 text-sm',
-            'bg-black/50 text-white placeholder:text-white/40',
-            'focus:border-white/30 focus:outline-none focus:ring-1 focus:ring-white/20',
-            titleError ? 'border-red-400' : 'border-white/10'
+            'bg-card text-foreground placeholder:text-muted-foreground',
+            'focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/20',
+            titleError ? 'border-red-400' : 'border-border'
           )}
         />
         {titleError && (
@@ -70,24 +70,24 @@ export function NodeFormResolution({ node, onUpdate }: NodeFormResolutionProps)
       {/* Description */}
       <div>
         <div className="flex items-center justify-between">
-          <label className="block text-sm font-medium text-white">
+          <label className="block text-sm font-medium text-foreground">
             Description
           </label>
           {node.description && (
             <button
               type="button"
               onClick={() => setShowPreview(!showPreview)}
-              className="text-xs text-white/50 hover:text-white hover:underline"
+              className="text-xs text-muted-foreground hover:text-foreground hover:underline"
             >
               {showPreview ? 'Edit' : 'Preview'}
             </button>
           )}
         </div>
-        <p className="mb-1 text-xs text-white/40">
+        <p className="mb-1 text-xs text-muted-foreground">
           Supports markdown: **bold**, *italic*, - lists, 1. numbered lists, `code`
         </p>
         {showPreview && node.description ? (
-          <div className="mt-1 rounded-md border border-white/10 bg-white/[0.04] p-3 text-sm">
+          <div className="mt-1 rounded-md border border-border bg-accent/50 p-3 text-sm">
             <MarkdownContent content={node.description} />
           </div>
         ) : (
@@ -102,7 +102,7 @@ Document what was done and the outcome.
 **Close ticket as:** Resolved"
             rows={5}
             className={cn(
-              'mt-1 block w-full rounded-md border border-white/10 px-3 py-2 text-sm',
+              'mt-1 block w-full rounded-md border border-border px-3 py-2 text-sm',
               'bg-background text-foreground placeholder:text-muted-foreground',
               'focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary'
             )}
@@ -112,10 +112,10 @@ Document what was done and the outcome.
 
       {/* Resolution Steps */}
       <div>
-        <label className="block text-sm font-medium text-white">
+        <label className="block text-sm font-medium text-foreground">
           Resolution Steps
         </label>
-        <p className="mb-2 text-xs text-white/40">
+        <p className="mb-2 text-xs text-muted-foreground">
           Step-by-step instructions for resolving the issue
         </p>
         <DynamicArrayField
@@ -135,7 +135,7 @@ Document what was done and the outcome.
                 onChange={(e) => handleUpdateStep(index, e.target.value)}
                 placeholder={`Step ${index + 1}`}
                 className={cn(
-                  'block w-full rounded-md border border-white/10 px-3 py-2 text-sm',
+                  'block w-full rounded-md border border-border px-3 py-2 text-sm',
                   'bg-background text-foreground placeholder:text-muted-foreground',
                   'focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary'
                 )}
diff --git a/frontend/src/components/tree-editor/NodeList.tsx b/frontend/src/components/tree-editor/NodeList.tsx
index dddcfbb1..bb1ab844 100644
--- a/frontend/src/components/tree-editor/NodeList.tsx
+++ b/frontend/src/components/tree-editor/NodeList.tsx
@@ -95,9 +95,9 @@ function NodeListItem({
   }
 
   const nodeTypeColors: Record<NodeType, string> = {
-    decision: 'bg-blue-500/20 text-blue-600 dark:text-blue-400',
-    action: 'bg-yellow-500/20 text-yellow-600 dark:text-yellow-400',
-    solution: 'bg-green-500/20 text-green-600 dark:text-green-400'
+    decision: 'bg-blue-500/20 text-blue-400',
+    action: 'bg-yellow-500/20 text-yellow-400',
+    solution: 'bg-green-500/20 text-green-400'
   }
 
   const getNodeLabel = () => {
@@ -223,7 +223,7 @@ function NodeListItem({
 
         {/* Node type icon - special treatment for root */}
         {isRootNode ? (
-          <span className="flex items-center gap-1 rounded px-1.5 py-0.5 text-xs bg-blue-500/30 text-blue-600 dark:text-blue-400 font-semibold">
+          <span className="flex items-center gap-1 rounded px-1.5 py-0.5 text-xs bg-blue-500/30 text-blue-400 font-semibold">
             <Play className="h-4 w-4" />
             <span className="hidden sm:inline">START</span>
           </span>
@@ -254,7 +254,7 @@ function NodeListItem({
               'flex items-center gap-1 rounded px-1.5 py-0.5 text-xs',
               hasError
                 ? 'bg-destructive/20 text-destructive'
-                : 'bg-yellow-500/20 text-yellow-600 dark:text-yellow-500'
+                : 'bg-yellow-500/20 text-yellow-500'
             )}
           >
             {hasError ? (
diff --git a/frontend/src/components/tree-editor/NodePicker.tsx b/frontend/src/components/tree-editor/NodePicker.tsx
index 9867c7ab..0ea8bd7a 100644
--- a/frontend/src/components/tree-editor/NodePicker.tsx
+++ b/frontend/src/components/tree-editor/NodePicker.tsx
@@ -11,9 +11,9 @@ const CREATE_SOLUTION = `${CREATE_PREFIX}solution__`
 
 // Unicode symbols for node types (works in select options)
 const NODE_TYPE_SYMBOLS: Record<NodeType, string> = {
-  decision: 'ⓘ',  // Information/question symbol
-  action: '⚡',    // Lightning bolt for action
-  solution: '✓'   // Checkmark for solution
+  decision: '\u24D8',  // Information/question symbol
+  action: '\u26A1',    // Lightning bolt for action
+  solution: '\u2713'   // Checkmark for solution
 }
 
 // Node type labels for UI
@@ -139,7 +139,7 @@ export function NodePicker({
   return (
     <div className={className}>
       {label && (
-        <label className="mb-1 block text-sm font-medium text-white">
+        <label className="mb-1 block text-sm font-medium text-foreground">
           {label}
         </label>
       )}
@@ -147,8 +147,8 @@ export function NodePicker({
       {/* Inline node creation UI */}
       {creatingNodeType ? (
         <div className="space-y-2">
-          <div className="flex items-center gap-2 rounded-md border border-white/20 bg-white/[0.04] p-2">
-            <span className="text-xs font-medium text-white">
+          <div className="flex items-center gap-2 rounded-md border border-border bg-accent/50 p-2">
+            <span className="text-xs font-medium text-foreground">
               New {NODE_TYPE_LABELS[creatingNodeType]}:
             </span>
             <input
@@ -159,9 +159,9 @@ export function NodePicker({
               onKeyDown={handleKeyDown}
               placeholder={creatingNodeType === 'decision' ? 'Enter question...' : 'Enter title...'}
               className={cn(
-                'flex-1 rounded-md border border-white/10 px-2 py-1 text-sm',
-                'bg-black/50 text-white placeholder:text-white/40',
-                'focus:border-white/30 focus:outline-none focus:ring-1 focus:ring-white/20'
+                'flex-1 rounded-md border border-border px-2 py-1 text-sm',
+                'bg-card text-foreground placeholder:text-muted-foreground',
+                'focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/20'
               )}
             />
           </div>
@@ -169,7 +169,7 @@ export function NodePicker({
             <button
               type="button"
               onClick={handleCancelCreate}
-              className="flex-1 rounded-md border border-white/10 px-3 py-1.5 text-xs font-medium text-white/60 hover:bg-white/10 hover:text-white"
+              className="flex-1 rounded-md border border-border px-3 py-1.5 text-xs font-medium text-muted-foreground hover:bg-accent hover:text-foreground"
             >
               Cancel
             </button>
@@ -179,7 +179,7 @@ export function NodePicker({
               disabled={!newNodeTitle.trim()}
               className={cn(
                 'flex-1 rounded-md px-3 py-1.5 text-xs font-medium',
-                'bg-white text-black hover:bg-white/90',
+                'bg-gradient-brand text-white shadow-lg shadow-primary/20 hover:opacity-90',
                 'disabled:opacity-50 disabled:cursor-not-allowed'
               )}
             >
@@ -194,9 +194,9 @@ export function NodePicker({
             onChange={(e) => handleChange(e.target.value)}
             className={cn(
               'block w-full rounded-md border px-3 py-2 text-sm',
-              'bg-black/50 text-white',
-              'focus:border-white/30 focus:outline-none focus:ring-1 focus:ring-white/20',
-              error ? 'border-red-400' : 'border-white/10'
+              'bg-card text-foreground',
+              'focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/20',
+              error ? 'border-red-400' : 'border-border'
             )}
           >
             <option value="">{placeholder}</option>
@@ -242,7 +242,7 @@ export function NodePicker({
 
           {/* Show what's selected */}
           {value && selectedNode && (
-            <p className="mt-1 text-xs text-white/40">
+            <p className="mt-1 text-xs text-muted-foreground">
               → {selectedNode.label}
             </p>
           )}
diff --git a/frontend/src/components/tree-editor/TreeEditorLayout.tsx b/frontend/src/components/tree-editor/TreeEditorLayout.tsx
index e7afb58e..cb2f9510 100644
--- a/frontend/src/components/tree-editor/TreeEditorLayout.tsx
+++ b/frontend/src/components/tree-editor/TreeEditorLayout.tsx
@@ -28,12 +28,12 @@ export function TreeEditorLayout({ isMobile = false }: TreeEditorLayoutProps) {
         <>
           {/* Code Mode: Monaco editor (60%) + Preview (40%) */}
           <div className={cn(
-            'flex flex-col overflow-hidden border-white/[0.06]',
+            'flex flex-col overflow-hidden border-border',
             isMobile ? 'h-full w-full border-b' : 'w-3/5 border-r'
           )}>
             <Suspense fallback={
-              <div className="flex h-full items-center justify-center bg-[#0a0a0a]">
-                <div className="h-6 w-6 animate-spin rounded-full border-2 border-white/20 border-t-white" />
+              <div className="flex h-full items-center justify-center bg-card">
+                <div className="h-6 w-6 animate-spin rounded-full border-2 border-border border-t-foreground" />
               </div>
             }>
               <CodeModeEditor />
@@ -42,7 +42,7 @@ export function TreeEditorLayout({ isMobile = false }: TreeEditorLayoutProps) {
 
           {/* Right Panel - Preview */}
           <div className={cn(
-            'flex-1 overflow-hidden bg-white/[0.02]',
+            'flex-1 overflow-hidden bg-accent/50',
             isMobile ? 'hidden' : 'block'
           )}>
             <TreePreviewPanel />
@@ -52,7 +52,7 @@ export function TreeEditorLayout({ isMobile = false }: TreeEditorLayoutProps) {
         <>
           {/* Flow Mode: Form editor (60%) + Preview (40%) */}
           <div className={cn(
-            'flex flex-col overflow-y-auto border-white/[0.06]',
+            'flex flex-col overflow-y-auto border-border',
             isMobile ? 'h-full w-full border-b' : 'w-3/5 border-r'
           )}>
             <div className="space-y-4 p-4">
@@ -63,7 +63,7 @@ export function TreeEditorLayout({ isMobile = false }: TreeEditorLayoutProps) {
 
           {/* Right Panel - Preview */}
           <div className={cn(
-            'flex-1 overflow-hidden bg-white/[0.02]',
+            'flex-1 overflow-hidden bg-accent/50',
             isMobile ? 'hidden' : 'block'
           )}>
             <TreePreviewPanel />
diff --git a/frontend/src/components/tree-editor/TreeMetadataForm.tsx b/frontend/src/components/tree-editor/TreeMetadataForm.tsx
index a95f52ba..01e3a818 100644
--- a/frontend/src/components/tree-editor/TreeMetadataForm.tsx
+++ b/frontend/src/components/tree-editor/TreeMetadataForm.tsx
@@ -56,12 +56,12 @@ export function TreeMetadataForm() {
   )
 
   return (
-    <div className="space-y-4 glass-card rounded-2xl p-4">
-      <h2 className="text-sm font-semibold text-white">Tree Details</h2>
+    <div className="space-y-4 bg-card border border-border rounded-2xl p-4">
+      <h2 className="text-sm font-semibold text-foreground">Tree Details</h2>
 
       {/* Name */}
       <div>
-        <label htmlFor="tree-name" className="block text-sm font-medium text-white">
+        <label htmlFor="tree-name" className="block text-sm font-medium text-foreground">
           Name <span className="text-red-400">*</span>
         </label>
         <input
@@ -72,9 +72,9 @@ export function TreeMetadataForm() {
           placeholder="e.g., VDA Registration Troubleshooting"
           className={cn(
             'mt-1 block w-full rounded-md border px-3 py-2 text-sm',
-            'bg-black/50 text-white placeholder:text-white/40',
-            'focus:border-white/30 focus:outline-none focus:ring-1 focus:ring-white/20',
-            nameError ? 'border-red-400' : 'border-white/10'
+            'bg-card text-foreground placeholder:text-muted-foreground',
+            'focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/20',
+            nameError ? 'border-red-400' : 'border-border'
           )}
         />
         {nameError && <p className="mt-1 text-xs text-red-400">{nameError.message}</p>}
@@ -82,7 +82,7 @@ export function TreeMetadataForm() {
 
       {/* Description */}
       <div>
-        <label htmlFor="tree-description" className="block text-sm font-medium text-white">
+        <label htmlFor="tree-description" className="block text-sm font-medium text-foreground">
           Description
         </label>
         <textarea
@@ -92,16 +92,16 @@ export function TreeMetadataForm() {
           placeholder="Brief description of what this tree troubleshoots..."
           rows={2}
           className={cn(
-            'mt-1 block w-full rounded-md border border-white/10 px-3 py-2 text-sm',
-            'bg-black/50 text-white placeholder:text-white/40',
-            'focus:border-white/30 focus:outline-none focus:ring-1 focus:ring-white/20'
+            'mt-1 block w-full rounded-md border border-border px-3 py-2 text-sm',
+            'bg-card text-foreground placeholder:text-muted-foreground',
+            'focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/20'
           )}
         />
       </div>
 
       {/* Category */}
       <div>
-        <label htmlFor="tree-category" className="block text-sm font-medium text-white">
+        <label htmlFor="tree-category" className="block text-sm font-medium text-foreground">
           Category
         </label>
         {!customCategory ? (
@@ -110,9 +110,9 @@ export function TreeMetadataForm() {
             value={categoryId || ''}
             onChange={(e) => handleCategoryChange(e.target.value)}
             className={cn(
-              'mt-1 block w-full rounded-md border border-white/10 px-3 py-2 text-sm',
-              'bg-black/50 text-white',
-              'focus:border-white/30 focus:outline-none focus:ring-1 focus:ring-white/20'
+              'mt-1 block w-full rounded-md border border-border px-3 py-2 text-sm',
+              'bg-card text-foreground',
+              'focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/20'
             )}
           >
             <option value="">No category</option>
@@ -132,9 +132,9 @@ export function TreeMetadataForm() {
               onChange={(e) => setCategory(e.target.value)}
               placeholder="Enter new category"
               className={cn(
-                'block flex-1 rounded-md border border-white/10 px-3 py-2 text-sm',
-                'bg-black/50 text-white placeholder:text-white/40',
-                'focus:border-white/30 focus:outline-none focus:ring-1 focus:ring-white/20'
+                'block flex-1 rounded-md border border-border px-3 py-2 text-sm',
+                'bg-card text-foreground placeholder:text-muted-foreground',
+                'focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/20'
               )}
               autoFocus
             />
@@ -144,7 +144,7 @@ export function TreeMetadataForm() {
                 setCategory('')
                 setCategoryId(null)
               }}
-              className="rounded-md border border-white/10 px-3 py-2 text-sm text-white/60 hover:bg-white/10 hover:text-white"
+              className="rounded-md border border-border px-3 py-2 text-sm text-muted-foreground hover:bg-accent hover:text-foreground"
             >
               Cancel
             </button>
@@ -154,7 +154,7 @@ export function TreeMetadataForm() {
 
       {/* Tags */}
       <div>
-        <label className="block text-sm font-medium text-white">Tags</label>
+        <label className="block text-sm font-medium text-foreground">Tags</label>
         <div className="mt-1">
           <TagInput tags={tags} onChange={setTags} maxTags={10} placeholder="Add tags..." />
         </div>
@@ -162,13 +162,13 @@ export function TreeMetadataForm() {
 
       {/* Visibility */}
       <div>
-        <label className="block text-sm font-medium text-white">Visibility</label>
+        <label className="block text-sm font-medium text-foreground">Visibility</label>
         <div className="mt-2 flex gap-4">
           <label
             className={cn(
               'flex cursor-pointer items-center gap-2 rounded-md border px-4 py-2',
               'transition-colors',
-              !isPublic ? 'border-white/30 bg-white/10 text-white' : 'border-white/10 text-white/60 hover:bg-white/[0.06]'
+              !isPublic ? 'border-primary/30 bg-accent text-foreground' : 'border-border text-muted-foreground hover:bg-accent/50'
             )}
           >
             <input
@@ -185,7 +185,7 @@ export function TreeMetadataForm() {
             className={cn(
               'flex cursor-pointer items-center gap-2 rounded-md border px-4 py-2',
               'transition-colors',
-              isPublic ? 'border-white/30 bg-white/10 text-white' : 'border-white/10 text-white/60 hover:bg-white/[0.06]'
+              isPublic ? 'border-primary/30 bg-accent text-foreground' : 'border-border text-muted-foreground hover:bg-accent/50'
             )}
           >
             <input
@@ -199,7 +199,7 @@ export function TreeMetadataForm() {
             <span className="text-sm">Public</span>
           </label>
         </div>
-        <p className="mt-1 text-xs text-white/40">
+        <p className="mt-1 text-xs text-muted-foreground">
           {isPublic
             ? 'Anyone can view this tree'
             : 'Only you and your team can view this tree'}
diff --git a/frontend/src/components/tree-editor/ValidationSummary.tsx b/frontend/src/components/tree-editor/ValidationSummary.tsx
index 8a5cae68..fcf87bad 100644
--- a/frontend/src/components/tree-editor/ValidationSummary.tsx
+++ b/frontend/src/components/tree-editor/ValidationSummary.tsx
@@ -35,7 +35,7 @@ export function ValidationSummary({ errors, onSelectNode }: ValidationSummaryPro
       <button
         onClick={() => setIsExpanded(!isExpanded)}
         className={cn(
-          'flex w-full items-center justify-between p-3 text-left transition-colors hover:bg-white/5',
+          'flex w-full items-center justify-between p-3 text-left transition-colors hover:bg-accent',
           errorItems.length > 0 ? 'text-red-400' : 'text-yellow-400'
         )}
       >
@@ -81,7 +81,7 @@ export function ValidationSummary({ errors, onSelectNode }: ValidationSummaryPro
               <div className="flex-1">
                 <p className="text-red-400">{error.message}</p>
                 {error.nodeId && (
-                  <p className="mt-0.5 text-xs text-white/40">
+                  <p className="mt-0.5 text-xs text-muted-foreground">
                     Click to select node: {error.nodeId}
                   </p>
                 )}
@@ -105,7 +105,7 @@ export function ValidationSummary({ errors, onSelectNode }: ValidationSummaryPro
               <div className="flex-1">
                 <p className="text-yellow-400">{warning.message}</p>
                 {warning.nodeId && (
-                  <p className="mt-0.5 text-xs text-white/40">
+                  <p className="mt-0.5 text-xs text-muted-foreground">
                     Click to select node: {warning.nodeId}
                   </p>
                 )}
diff --git a/frontend/src/components/tree-editor/code-mode/CodeModeEditor.tsx b/frontend/src/components/tree-editor/code-mode/CodeModeEditor.tsx
index 96d98a0b..6d8c127e 100644
--- a/frontend/src/components/tree-editor/code-mode/CodeModeEditor.tsx
+++ b/frontend/src/components/tree-editor/code-mode/CodeModeEditor.tsx
@@ -166,8 +166,8 @@ export function CodeModeEditor() {
           beforeMount={handleEditorWillMount}
           onMount={handleEditorDidMount}
           loading={
-            <div className="flex h-full items-center justify-center bg-[#0a0a0a]">
-              <div className="h-6 w-6 animate-spin rounded-full border-2 border-white/20 border-t-white" />
+            <div className="flex h-full items-center justify-center bg-card">
+              <div className="h-6 w-6 animate-spin rounded-full border-2 border-border border-t-foreground" />
             </div>
           }
           options={{
diff --git a/frontend/src/components/tree-editor/code-mode/CodeModeToolbar.tsx b/frontend/src/components/tree-editor/code-mode/CodeModeToolbar.tsx
index 1a4f52a8..b2a65638 100644
--- a/frontend/src/components/tree-editor/code-mode/CodeModeToolbar.tsx
+++ b/frontend/src/components/tree-editor/code-mode/CodeModeToolbar.tsx
@@ -91,15 +91,15 @@ export function CodeModeToolbar({
   }, [])
 
   return (
-    <div className="flex items-center justify-between border-b border-white/[0.06] bg-black/50 px-3 py-1.5">
+    <div className="flex items-center justify-between border-b border-border bg-card px-3 py-1.5">
       <div className="flex items-center gap-2">
         {/* Insert Node dropdown */}
         <div className="relative" ref={dropdownRef}>
           <button
             onClick={() => setInsertOpen(!insertOpen)}
             className={cn(
-              'flex items-center gap-1 rounded-md border border-white/10 px-2.5 py-1 text-xs font-medium text-white/60',
-              'hover:bg-white/10 hover:text-white'
+              'flex items-center gap-1 rounded-md border border-border px-2.5 py-1 text-xs font-medium text-muted-foreground',
+              'hover:bg-accent hover:text-foreground'
             )}
           >
             <Plus className="h-3 w-3" />
@@ -107,24 +107,24 @@ export function CodeModeToolbar({
             <ChevronDown className="h-3 w-3" />
           </button>
           {insertOpen && (
-            <div className="absolute left-0 top-full z-50 mt-1 w-44 rounded-lg border border-white/10 bg-[#111] py-1 shadow-xl">
+            <div className="absolute left-0 top-full z-50 mt-1 w-44 rounded-lg border border-border bg-card py-1 shadow-xl">
               <button
                 onClick={() => { onInsertTemplate(NODE_TEMPLATES.decision); setInsertOpen(false) }}
-                className="flex w-full items-center gap-2 px-3 py-1.5 text-xs text-white/70 hover:bg-white/10"
+                className="flex w-full items-center gap-2 px-3 py-1.5 text-xs text-muted-foreground hover:bg-accent"
               >
                 <span className="h-2 w-2 rounded-full bg-blue-400" />
                 Decision
               </button>
               <button
                 onClick={() => { onInsertTemplate(NODE_TEMPLATES.action); setInsertOpen(false) }}
-                className="flex w-full items-center gap-2 px-3 py-1.5 text-xs text-white/70 hover:bg-white/10"
+                className="flex w-full items-center gap-2 px-3 py-1.5 text-xs text-muted-foreground hover:bg-accent"
               >
                 <span className="h-2 w-2 rounded-full bg-amber-400" />
                 Action
               </button>
               <button
                 onClick={() => { onInsertTemplate(NODE_TEMPLATES.solution); setInsertOpen(false) }}
-                className="flex w-full items-center gap-2 px-3 py-1.5 text-xs text-white/70 hover:bg-white/10"
+                className="flex w-full items-center gap-2 px-3 py-1.5 text-xs text-muted-foreground hover:bg-accent"
               >
                 <span className="h-2 w-2 rounded-full bg-emerald-400" />
                 Solution
@@ -139,8 +139,8 @@ export function CodeModeToolbar({
         <div className="flex items-center gap-1.5 text-xs">
           {isValidating ? (
             <>
-              <Loader2 className="h-3 w-3 animate-spin text-white/40" />
-              <span className="text-white/40">Validating...</span>
+              <Loader2 className="h-3 w-3 animate-spin text-muted-foreground" />
+              <span className="text-muted-foreground">Validating...</span>
             </>
           ) : isValid ? (
             <>
@@ -173,8 +173,8 @@ export function CodeModeToolbar({
           className={cn(
             'flex items-center gap-1 rounded-md px-2 py-1 text-xs',
             syntaxHelpOpen
-              ? 'bg-white/10 text-white'
-              : 'text-white/40 hover:bg-white/[0.06] hover:text-white/60'
+              ? 'bg-accent text-foreground'
+              : 'text-muted-foreground hover:bg-accent hover:text-muted-foreground'
           )}
         >
           <HelpCircle className="h-3 w-3" />
diff --git a/frontend/src/components/tree-editor/code-mode/SyntaxHelpPanel.tsx b/frontend/src/components/tree-editor/code-mode/SyntaxHelpPanel.tsx
index 06ba1156..77b06cc0 100644
--- a/frontend/src/components/tree-editor/code-mode/SyntaxHelpPanel.tsx
+++ b/frontend/src/components/tree-editor/code-mode/SyntaxHelpPanel.tsx
@@ -10,17 +10,17 @@ export function SyntaxHelpPanel({ open, onClose }: SyntaxHelpPanelProps) {
   if (!open) return null
 
   return (
-    <div className="flex h-full flex-col border-l border-white/[0.06] bg-[#0a0a0a]">
-      <div className="flex items-center justify-between border-b border-white/[0.06] px-3 py-2">
-        <span className="text-xs font-medium text-white/60">Syntax Reference</span>
+    <div className="flex h-full flex-col border-l border-border bg-card">
+      <div className="flex items-center justify-between border-b border-border px-3 py-2">
+        <span className="text-xs font-medium text-muted-foreground">Syntax Reference</span>
         <button
           onClick={onClose}
-          className="rounded p-0.5 text-white/30 hover:bg-white/10 hover:text-white/60"
+          className="rounded p-0.5 text-muted-foreground hover:bg-accent hover:text-muted-foreground"
         >
           <X className="h-3.5 w-3.5" />
         </button>
       </div>
-      <div className="flex-1 overflow-y-auto px-3 py-3 text-[11px] leading-relaxed text-white/50">
+      <div className="flex-1 overflow-y-auto px-3 py-3 text-[11px] leading-relaxed text-muted-foreground">
         <Section title="Node Structure">
           <Code>{`---
 id: node_id
@@ -82,7 +82,7 @@ Description paragraph.
 function Section({ title, children }: { title: string; children: React.ReactNode }) {
   return (
     <div className="mb-4">
-      <h4 className="mb-1.5 text-[11px] font-semibold uppercase tracking-wider text-white/30">{title}</h4>
+      <h4 className="mb-1.5 text-[11px] font-semibold uppercase tracking-wider text-muted-foreground">{title}</h4>
       {children}
     </div>
   )
@@ -91,8 +91,8 @@ function Section({ title, children }: { title: string; children: React.ReactNode
 function Code({ children }: { children: string }) {
   return (
     <pre className={cn(
-      'mb-2 overflow-x-auto rounded-md border border-white/[0.06] bg-black/50 px-2 py-1.5',
-      'text-[10px] leading-relaxed text-white/50 whitespace-pre'
+      'mb-2 overflow-x-auto rounded-md border border-border bg-card px-2 py-1.5',
+      'text-[10px] leading-relaxed text-muted-foreground whitespace-pre'
     )}>
       {children}
     </pre>
@@ -102,8 +102,8 @@ function Code({ children }: { children: string }) {
 function Row({ label, code }: { label: string; code: string }) {
   return (
     <div className="flex items-center justify-between py-0.5">
-      <span className="text-white/40">{label}</span>
-      <code className="rounded bg-white/[0.06] px-1 py-0.5 text-[10px] text-white/50">{code}</code>
+      <span className="text-muted-foreground">{label}</span>
+      <code className="rounded bg-accent px-1 py-0.5 text-[10px] text-muted-foreground">{code}</code>
     </div>
   )
 }
diff --git a/frontend/src/components/tree-preview/TreePreviewNode.tsx b/frontend/src/components/tree-preview/TreePreviewNode.tsx
index 87e6025e..05acb78f 100644
--- a/frontend/src/components/tree-preview/TreePreviewNode.tsx
+++ b/frontend/src/components/tree-preview/TreePreviewNode.tsx
@@ -154,8 +154,8 @@ export function TreePreviewNode({
     <div className="relative">
       {/* From option label */}
       {fromOption && (
-        <div className="mb-1 text-xs font-medium text-white/40">
-          <span className="rounded bg-white/10 px-1.5 py-0.5">{fromOption}</span>
+        <div className="mb-1 text-xs font-medium text-muted-foreground">
+          <span className="rounded bg-accent px-1.5 py-0.5">{fromOption}</span>
         </div>
       )}
 
@@ -185,7 +185,7 @@ export function TreePreviewNode({
             className="absolute -top-1.5 -right-1.5 flex items-center justify-center rounded-full bg-green-500/90 p-0.5 shadow-sm"
             title="This branch leads to a solution"
           >
-            <CheckCircle className="h-3 w-3 text-white" />
+            <CheckCircle className="h-3 w-3 text-foreground" />
           </div>
         )}
         {/* Root node START header */}
@@ -206,12 +206,12 @@ export function TreePreviewNode({
             <button
               type="button"
               onClick={toggleCollapse}
-              className="mt-0.5 rounded p-0.5 hover:bg-white/10"
+              className="mt-0.5 rounded p-0.5 hover:bg-accent"
             >
               {isCollapsed ? (
-                <ChevronRight className="h-4 w-4 text-white/50" />
+                <ChevronRight className="h-4 w-4 text-muted-foreground" />
               ) : (
-                <ChevronDown className="h-4 w-4 text-white/50" />
+                <ChevronDown className="h-4 w-4 text-muted-foreground" />
               )}
             </button>
           ) : (
@@ -222,14 +222,14 @@ export function TreePreviewNode({
           {isRootNode && <HelpCircle className="h-4 w-4 text-blue-500" />}
 
           <div className="flex-1 min-w-0">
-            <p className="text-sm font-medium text-white leading-tight">
+            <p className="text-sm font-medium text-foreground leading-tight">
               {getNodeLabel()}
             </p>
 
             {/* Node ID with copy button */}
             <div className="flex items-center gap-1 mt-1">
               <span
-                className="text-xs text-white/40 cursor-help"
+                className="text-xs text-muted-foreground cursor-help"
                 title={`Full ID: ${node.id}`}
               >
                 {node.id === 'root' ? 'root' : node.id.slice(0, 8) + '...'}
@@ -237,7 +237,7 @@ export function TreePreviewNode({
               <button
                 type="button"
                 onClick={handleCopyId}
-                className="rounded p-0.5 text-white/40 hover:bg-white/10 hover:text-white"
+                className="rounded p-0.5 text-muted-foreground hover:bg-accent hover:text-foreground"
                 title="Copy full ID"
               >
                 {copiedId ? (
@@ -252,8 +252,8 @@ export function TreePreviewNode({
 
         {/* Show options for decision nodes */}
         {node.type === 'decision' && node.options && node.options.length > 0 && (
-          <div className="mt-2 space-y-1 border-t border-white/[0.06] pt-2">
-            <p className="text-[10px] uppercase tracking-wide text-white/40">Options:</p>
+          <div className="mt-2 space-y-1 border-t border-border pt-2">
+            <p className="text-[10px] uppercase tracking-wide text-muted-foreground">Options:</p>
             {node.options.map((opt, i) => {
               const leadsToSolution = nodeLeadsToSolution(opt.next_node_id)
               return (
@@ -261,15 +261,15 @@ export function TreePreviewNode({
                   key={opt.id}
                   className={cn(
                     'flex items-center gap-1 text-xs rounded px-1 py-0.5 -mx-1',
-                    opt.next_node_id && 'hover:bg-white/[0.06] cursor-pointer'
+                    opt.next_node_id && 'hover:bg-accent cursor-pointer'
                   )}
                   onMouseEnter={() => opt.next_node_id && onHoverNodeId?.(opt.next_node_id)}
                   onMouseLeave={() => onHoverNodeId?.(null)}
                 >
-                  <span className="inline-flex h-4 w-4 items-center justify-center rounded bg-white/10 text-[10px] font-medium text-white/50">
+                  <span className="inline-flex h-4 w-4 items-center justify-center rounded bg-accent text-[10px] font-medium text-muted-foreground">
                     {i + 1}
                   </span>
-                  <span className="truncate text-white/70">{opt.label || 'Untitled'}</span>
+                  <span className="truncate text-muted-foreground">{opt.label || 'Untitled'}</span>
                   <span className="ml-auto flex items-center gap-1">
                     {leadsToSolution && (
                       <span title="Leads to solution">
@@ -279,7 +279,7 @@ export function TreePreviewNode({
                     {opt.next_node_id ? (
                       <span className="text-blue-500">→</span>
                     ) : (
-                      <span className="text-white/30 text-[10px]">(no link)</span>
+                      <span className="text-muted-foreground text-[10px]">(no link)</span>
                     )}
                   </span>
                 </div>
@@ -308,12 +308,12 @@ export function TreePreviewNode({
 
           return (
             <div
-              className="mt-2 text-xs border-t border-white/[0.06] pt-2 hover:bg-white/[0.04] cursor-pointer rounded px-1 -mx-1"
+              className="mt-2 text-xs border-t border-border pt-2 hover:bg-accent/50 cursor-pointer rounded px-1 -mx-1"
               onMouseEnter={() => onHoverNodeId?.(node.next_node_id!)}
               onMouseLeave={() => onHoverNodeId?.(null)}
             >
               <div className="flex items-center gap-1.5">
-                <span className="text-white/40">Next:</span>
+                <span className="text-muted-foreground">Next:</span>
                 {isSharedTarget && (
                   <span title={sharedTooltip} className="flex items-center">
                     <Users className="h-3 w-3 text-purple-500" />
@@ -321,7 +321,7 @@ export function TreePreviewNode({
                 )}
                 <span className={cn(
                   'truncate',
-                  nextNode?.type === 'solution' ? 'text-green-500 font-medium' : 'text-white/70'
+                  nextNode?.type === 'solution' ? 'text-green-500 font-medium' : 'text-muted-foreground'
                 )}>
                   {nextNodeLabel.slice(0, 30)}{nextNodeLabel.length > 30 ? '...' : ''}
                 </span>
@@ -347,7 +347,7 @@ export function TreePreviewNode({
 
       {/* Children - show as branches */}
       {hasChildren && !isCollapsed && (
-        <div className="relative mt-3 ml-6 pl-6 border-l-2 border-white/[0.06]">
+        <div className="relative mt-3 ml-6 pl-6 border-l-2 border-border">
           <div className="space-y-4">
             {node.children!.map((child) => {
               const optionLabel = getOptionLabelForChild(child.id)
@@ -355,7 +355,7 @@ export function TreePreviewNode({
               return (
                 <div key={child.id} className="relative">
                   {/* Horizontal connector line */}
-                  <div className="absolute -left-6 top-6 h-0.5 w-6 bg-white/[0.06]" />
+                  <div className="absolute -left-6 top-6 h-0.5 w-6 bg-border" />
 
                   <TreePreviewNode
                     node={child}
@@ -377,8 +377,8 @@ export function TreePreviewNode({
 
       {/* Show collapsed indicator */}
       {hasChildren && isCollapsed && (
-        <div className="mt-2 ml-6 text-xs text-white/40">
-          <span className="rounded bg-white/10 px-2 py-1">
+        <div className="mt-2 ml-6 text-xs text-muted-foreground">
+          <span className="rounded bg-accent px-2 py-1">
             {node.children!.length} child node{node.children!.length !== 1 ? 's' : ''} hidden
           </span>
         </div>
diff --git a/frontend/src/components/tree-preview/TreePreviewPanel.tsx b/frontend/src/components/tree-preview/TreePreviewPanel.tsx
index 49ae1ff4..c0ec7835 100644
--- a/frontend/src/components/tree-preview/TreePreviewPanel.tsx
+++ b/frontend/src/components/tree-preview/TreePreviewPanel.tsx
@@ -56,7 +56,7 @@ export function TreePreviewPanel() {
 
   if (!treeStructure) {
     return (
-      <div className="flex h-full items-center justify-center p-4 text-sm text-white/40">
+      <div className="flex h-full items-center justify-center p-4 text-sm text-muted-foreground">
         No tree structure to preview
       </div>
     )
@@ -65,11 +65,11 @@ export function TreePreviewPanel() {
   return (
     <div className="flex h-full flex-col">
       {/* Header */}
-      <div className="border-b border-white/[0.06] px-4 py-2">
-        <h3 className="text-sm font-semibold text-white">
+      <div className="border-b border-border px-4 py-2">
+        <h3 className="text-sm font-semibold text-foreground">
           Preview: {name || 'Untitled Tree'}
         </h3>
-        <p className="text-xs text-white/40">
+        <p className="text-xs text-muted-foreground">
           Click a node to select • Hover options to highlight targets
         </p>
       </div>
@@ -91,8 +91,8 @@ export function TreePreviewPanel() {
       </div>
 
       {/* Legend */}
-      <div className="border-t border-white/[0.06] px-4 py-2">
-        <div className="flex flex-wrap gap-4 text-xs text-white/40">
+      <div className="border-t border-border px-4 py-2">
+        <div className="flex flex-wrap gap-4 text-xs text-muted-foreground">
           <div className="flex items-center gap-1">
             <div className="h-3 w-3 rounded bg-blue-500/50" />
             <span>Decision</span>
diff --git a/frontend/src/components/ui/MarkdownContent.tsx b/frontend/src/components/ui/MarkdownContent.tsx
index 5ff7a5d6..ac7596e1 100644
--- a/frontend/src/components/ui/MarkdownContent.tsx
+++ b/frontend/src/components/ui/MarkdownContent.tsx
@@ -12,7 +12,7 @@ interface MarkdownContentProps {
  */
 export function MarkdownContent({ content, className }: MarkdownContentProps) {
   return (
-    <div className={cn('prose prose-sm dark:prose-invert max-w-none', className)}>
+    <div className={cn('prose prose-sm prose-invert max-w-none', className)}>
       <ReactMarkdown
         components={{
         // Style paragraphs
@@ -21,7 +21,7 @@ export function MarkdownContent({ content, className }: MarkdownContentProps) {
         ),
         // Style bold text
         strong: ({ children }) => (
-          <strong className="font-semibold text-white">{children}</strong>
+          <strong className="font-semibold text-foreground">{children}</strong>
         ),
         // Style ordered lists
         ol: ({ children }) => (
@@ -33,7 +33,7 @@ export function MarkdownContent({ content, className }: MarkdownContentProps) {
         ),
         // Style list items
         li: ({ children }) => (
-          <li className="text-white/60">{children}</li>
+          <li className="text-muted-foreground">{children}</li>
         ),
         // Style inline code
         code: ({ className, children, ...props }) => {
@@ -43,7 +43,7 @@ export function MarkdownContent({ content, className }: MarkdownContentProps) {
             return (
               <code
                 className={cn(
-                  'block rounded bg-white/10 p-3 font-mono text-sm overflow-x-auto',
+                  'block rounded bg-accent p-3 font-mono text-sm overflow-x-auto',
                   className
                 )}
                 {...props}
@@ -54,7 +54,7 @@ export function MarkdownContent({ content, className }: MarkdownContentProps) {
           }
           return (
             <code
-              className="rounded bg-white/10 px-1.5 py-0.5 font-mono text-sm"
+              className="rounded bg-accent px-1.5 py-0.5 font-mono text-sm"
               {...props}
             >
               {children}
@@ -63,25 +63,25 @@ export function MarkdownContent({ content, className }: MarkdownContentProps) {
         },
         // Style code blocks (pre)
         pre: ({ children }) => (
-          <pre className="mb-3 overflow-x-auto rounded bg-white/10 p-0 last:mb-0">
+          <pre className="mb-3 overflow-x-auto rounded bg-accent p-0 last:mb-0">
             {children}
           </pre>
         ),
         // Style headers
         h1: ({ children }) => (
-          <h1 className="mb-3 text-lg font-bold text-white">{children}</h1>
+          <h1 className="mb-3 text-lg font-bold text-foreground">{children}</h1>
         ),
         h2: ({ children }) => (
-          <h2 className="mb-2 text-base font-bold text-white">{children}</h2>
+          <h2 className="mb-2 text-base font-bold text-foreground">{children}</h2>
         ),
         h3: ({ children }) => (
-          <h3 className="mb-2 text-sm font-bold text-white">{children}</h3>
+          <h3 className="mb-2 text-sm font-bold text-foreground">{children}</h3>
         ),
         // Style horizontal rules
-        hr: () => <hr className="my-4 border-white/[0.06]" />,
+        hr: () => <hr className="my-4 border-border" />,
         // Style blockquotes
         blockquote: ({ children }) => (
-          <blockquote className="mb-3 border-l-4 border-white/20 pl-4 italic text-white/50 last:mb-0">
+          <blockquote className="mb-3 border-l-4 border-border pl-4 italic text-muted-foreground last:mb-0">
             {children}
           </blockquote>
         ),
diff --git a/frontend/src/constants/categoryColors.ts b/frontend/src/constants/categoryColors.ts
new file mode 100644
index 00000000..168f8b82
--- /dev/null
+++ b/frontend/src/constants/categoryColors.ts
@@ -0,0 +1,12 @@
+export const CATEGORY_COLORS = [
+  '#3b82f6', // blue
+  '#22c55e', // green
+  '#f59e0b', // amber
+  '#ef4444', // red
+  '#8b5cf6', // violet
+  '#06b6d4', // cyan
+  '#ec4899', // pink
+  '#f97316', // orange
+  '#14b8a6', // teal
+  '#6366f1', // indigo
+] as const
diff --git a/frontend/src/constants/flowLabels.ts b/frontend/src/constants/flowLabels.ts
new file mode 100644
index 00000000..b110f469
--- /dev/null
+++ b/frontend/src/constants/flowLabels.ts
@@ -0,0 +1,38 @@
+export interface FlowTypeLabels {
+  navLabel: string
+  singular: string
+  plural: string
+  newButton: string
+  searchPlaceholder: string
+}
+
+export const FLOW_TYPE_LABELS: Record<string, FlowTypeLabels> = {
+  all: {
+    navLabel: 'All Flows',
+    singular: 'Flow',
+    plural: 'Flows',
+    newButton: '+ Create Flow',
+    searchPlaceholder: 'Search flows, sessions, tags\u2026',
+  },
+  troubleshooting: {
+    navLabel: 'Troubleshooting',
+    singular: 'Flow',
+    plural: 'Flows',
+    newButton: '+ New Troubleshooting Flow',
+    searchPlaceholder: 'Search troubleshooting flows\u2026',
+  },
+  procedural: {
+    navLabel: 'Projects',
+    singular: 'Project',
+    plural: 'Projects',
+    newButton: '+ New Project',
+    searchPlaceholder: 'Search projects, runbooks\u2026',
+  },
+}
+
+export function getFlowLabels(typeFilter?: string): FlowTypeLabels {
+  if (typeFilter && typeFilter in FLOW_TYPE_LABELS) {
+    return FLOW_TYPE_LABELS[typeFilter]
+  }
+  return FLOW_TYPE_LABELS.all
+}
diff --git a/frontend/src/index.css b/frontend/src/index.css
index 04843569..588541a8 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -27,6 +27,7 @@
     --radius: 0.75rem;
 
     /* App Shell tokens */
+    --sidebar-w: 260px;
     --sidebar-bg: 240 10% 4.5%;
     --sidebar-hover: 240 6% 12%;
     --sidebar-active: 243 75% 59% / 0.08;
@@ -68,6 +69,48 @@
   }
 }
 
+/* App Shell Grid Layout */
+.app-shell {
+  display: grid;
+  grid-template-columns: var(--sidebar-w) 1fr;
+  grid-template-rows: 56px 1fr;
+  height: 100vh;
+  overflow: hidden;
+  transition: grid-template-columns 200ms ease;
+}
+
+.app-shell--collapsed {
+  grid-template-columns: 56px 1fr;
+}
+
+.topbar {
+  grid-column: 1 / -1;
+}
+
+.sidebar {
+  overflow-y: auto;
+}
+
+.main-content {
+  overflow-y: auto;
+}
+
+/* Mobile: single column */
+@media (max-width: 767px) {
+  .app-shell {
+    grid-template-columns: 1fr;
+  }
+}
+
+/* Staggered fade-in for page sections */
+.fade-in {
+  animation: fadeIn 0.3s ease forwards;
+}
+
+@keyframes fadeIn {
+  from { opacity: 0; transform: translateY(6px); }
+  to { opacity: 1; transform: translateY(0); }
+}
 /* Animations */
 @keyframes fade-in {
   from { opacity: 0; }
diff --git a/frontend/src/pages/AccountSettingsPage.tsx b/frontend/src/pages/AccountSettingsPage.tsx
index 125e3c21..c7755452 100644
--- a/frontend/src/pages/AccountSettingsPage.tsx
+++ b/frontend/src/pages/AccountSettingsPage.tsx
@@ -130,7 +130,7 @@ export function AccountSettingsPage() {
   if (isLoading) {
     return (
       <div className="flex justify-center py-12">
-        <div className="h-8 w-8 animate-spin rounded-full border-4 border-white/20 border-t-white" />
+        <div className="h-8 w-8 animate-spin rounded-full border-4 border-border border-t-foreground" />
       </div>
     )
   }
@@ -154,23 +154,23 @@ export function AccountSettingsPage() {
     <div className="container mx-auto px-4 py-6 sm:px-6 sm:py-8">
       <div className="mb-8">
         <div className="flex items-center gap-3">
-          <Building2 className="h-8 w-8 text-white/50" />
-          <h1 className="text-2xl font-bold text-white sm:text-3xl">Account Settings</h1>
+          <Building2 className="h-8 w-8 text-muted-foreground" />
+          <h1 className="text-2xl font-bold text-foreground sm:text-3xl">Account Settings</h1>
         </div>
-        <p className="mt-2 text-white/40">
+        <p className="mt-2 text-muted-foreground">
           Manage your account, subscription, and team
         </p>
       </div>
 
       <div className="max-w-3xl space-y-6">
         {/* Account Info Section */}
-        <div className="glass-card rounded-2xl p-4 sm:p-6">
-          <h2 className="text-lg font-semibold text-white">Account Information</h2>
+        <div className="bg-card border border-border rounded-xl p-4 sm:p-6">
+          <h2 className="text-lg font-semibold text-foreground">Account Information</h2>
 
           <div className="mt-4 space-y-4">
             {/* Account Name */}
             <div>
-              <label className="block text-sm font-medium text-white">
+              <label className="block text-sm font-medium text-foreground">
                 Account Name
               </label>
               {isEditingName ? (
@@ -180,9 +180,9 @@ export function AccountSettingsPage() {
                     value={editedName}
                     onChange={(e) => setEditedName(e.target.value)}
                     className={cn(
-                      'flex-1 rounded-md border border-white/10 bg-black/50 px-3 py-2',
-                      'text-white placeholder:text-white/40',
-                      'focus:border-white/30 focus:outline-none focus:ring-1 focus:ring-white/20'
+                      'flex-1 rounded-md border border-border bg-card px-3 py-2',
+                      'text-foreground placeholder:text-muted-foreground',
+                      'focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/20'
                     )}
                     autoFocus
                     onKeyDown={(e) => {
@@ -197,8 +197,8 @@ export function AccountSettingsPage() {
                     onClick={handleSaveName}
                     disabled={isSavingName}
                     className={cn(
-                      'rounded-md bg-white p-2 text-black',
-                      'hover:bg-white/90 disabled:opacity-50'
+                      'rounded-md bg-gradient-brand text-white shadow-lg shadow-primary/20 p-2',
+                      'hover:opacity-90 disabled:opacity-50'
                     )}
                   >
                     {isSavingName ? (
@@ -212,18 +212,18 @@ export function AccountSettingsPage() {
                       setEditedName(account?.name ?? '')
                       setIsEditingName(false)
                     }}
-                    className="rounded-md border border-white/10 p-2 text-white/40 hover:bg-white/10"
+                    className="rounded-md border border-border p-2 text-muted-foreground hover:bg-accent"
                   >
                     <X className="h-4 w-4" />
                   </button>
                 </div>
               ) : (
                 <div className="mt-1 flex items-center gap-2">
-                  <span className="text-sm text-white">{account?.name}</span>
+                  <span className="text-sm text-foreground">{account?.name}</span>
                   {isAccountOwner && (
                     <button
                       onClick={() => setIsEditingName(true)}
-                      className="text-xs text-white hover:underline"
+                      className="text-xs text-foreground hover:underline"
                     >
                       Edit
                     </button>
@@ -234,10 +234,10 @@ export function AccountSettingsPage() {
 
             {/* Display Code */}
             <div>
-              <label className="block text-sm font-medium text-white">
+              <label className="block text-sm font-medium text-foreground">
                 Display Code
               </label>
-              <p className="mt-1 text-sm font-mono text-white/40">
+              <p className="mt-1 text-sm font-mono text-muted-foreground">
                 {account?.display_code}
               </p>
             </div>
@@ -245,8 +245,8 @@ export function AccountSettingsPage() {
         </div>
 
         {/* Subscription Section */}
-        <div className="glass-card rounded-2xl p-4 sm:p-6">
-          <h2 className="text-lg font-semibold text-white">Subscription</h2>
+        <div className="bg-card border border-border rounded-xl p-4 sm:p-6">
+          <h2 className="text-lg font-semibold text-foreground">Subscription</h2>
 
           <div className="mt-4 space-y-4">
             {/* Plan & Status */}
@@ -254,9 +254,9 @@ export function AccountSettingsPage() {
               <span
                 className={cn(
                   'inline-flex items-center gap-1.5 rounded-full px-3 py-1 text-sm font-medium',
-                  plan === 'free' && 'bg-white/10 text-white/70',
-                  plan === 'pro' && 'bg-white/10 text-white',
-                  plan === 'team' && 'bg-white/10 text-white'
+                  plan === 'free' && 'bg-accent text-muted-foreground',
+                  plan === 'pro' && 'bg-accent text-foreground',
+                  plan === 'team' && 'bg-accent text-foreground'
                 )}
               >
                 <Crown className="h-3.5 w-3.5" />
@@ -270,7 +270,7 @@ export function AccountSettingsPage() {
                     sub.status === 'trialing' && 'bg-blue-500/10 text-blue-400',
                     sub.status === 'past_due' && 'bg-yellow-500/10 text-yellow-400',
                     sub.status === 'canceled' && 'bg-red-400/10 text-red-400',
-                    sub.status === 'orphaned' && 'bg-white/10 text-white/40'
+                    sub.status === 'orphaned' && 'bg-accent text-muted-foreground'
                   )}
                 >
                   {sub.status.charAt(0).toUpperCase() + sub.status.slice(1).replace('_', ' ')}
@@ -279,7 +279,7 @@ export function AccountSettingsPage() {
             </div>
 
             {sub?.current_period_end && (
-              <p className="text-sm text-white/40">
+              <p className="text-sm text-muted-foreground">
                 Current period ends: {new Date(sub.current_period_end).toLocaleDateString()}
               </p>
             )}
@@ -322,32 +322,32 @@ export function AccountSettingsPage() {
 
         {/* Team Members Section (owners only) */}
         {isAccountOwner && (
-          <div className="glass-card rounded-2xl p-4 sm:p-6">
+          <div className="bg-card border border-border rounded-xl p-4 sm:p-6">
             <div className="flex items-center gap-2">
-              <Users className="h-5 w-5 text-white/50" />
-              <h2 className="text-lg font-semibold text-white">Team Members</h2>
+              <Users className="h-5 w-5 text-muted-foreground" />
+              <h2 className="text-lg font-semibold text-foreground">Team Members</h2>
             </div>
 
             {members.length === 0 ? (
-              <p className="mt-4 text-sm text-white/40">No team members yet.</p>
+              <p className="mt-4 text-sm text-muted-foreground">No team members yet.</p>
             ) : (
-              <div className="mt-4 divide-y divide-white/[0.06]">
+              <div className="mt-4 divide-y divide-border">
                 {members.map((member) => (
                   <div
                     key={member.id}
                     className="flex items-center justify-between py-3 first:pt-0 last:pb-0"
                   >
                     <div>
-                      <p className="text-sm font-medium text-white">{member.name}</p>
-                      <p className="text-xs text-white/40">{member.email}</p>
+                      <p className="text-sm font-medium text-foreground">{member.name}</p>
+                      <p className="text-xs text-muted-foreground">{member.email}</p>
                     </div>
                     <div className="flex items-center gap-3">
                       <span
                         className={cn(
                           'rounded-full px-2.5 py-0.5 text-xs font-medium',
-                          member.account_role === 'owner' && 'bg-white/10 text-white',
-                          member.account_role === 'engineer' && 'bg-white/10 text-white/70',
-                          member.account_role === 'viewer' && 'bg-white/10 text-white/40'
+                          member.account_role === 'owner' && 'bg-accent text-foreground',
+                          member.account_role === 'engineer' && 'bg-accent text-muted-foreground',
+                          member.account_role === 'viewer' && 'bg-accent text-muted-foreground'
                         )}
                       >
                         {member.account_role}
@@ -360,7 +360,7 @@ export function AccountSettingsPage() {
                       {member.account_role !== 'owner' && (
                         <button
                           onClick={() => handleRemoveMember(member.id)}
-                          className="text-white/40 hover:text-red-400"
+                          className="text-muted-foreground hover:text-red-400"
                           title="Remove member"
                         >
                           <X className="h-4 w-4" />
@@ -376,10 +376,10 @@ export function AccountSettingsPage() {
 
         {/* Invite Member Section (owners only) */}
         {isAccountOwner && (
-          <div className="glass-card rounded-2xl p-4 sm:p-6">
+          <div className="bg-card border border-border rounded-xl p-4 sm:p-6">
             <div className="flex items-center gap-2">
-              <Mail className="h-5 w-5 text-white/50" />
-              <h2 className="text-lg font-semibold text-white">Invite Member</h2>
+              <Mail className="h-5 w-5 text-muted-foreground" />
+              <h2 className="text-lg font-semibold text-foreground">Invite Member</h2>
             </div>
 
             <form onSubmit={handleInvite} className="mt-4 space-y-3">
@@ -391,17 +391,17 @@ export function AccountSettingsPage() {
                   onChange={(e) => setInviteEmail(e.target.value)}
                   required
                   className={cn(
-                    'flex-1 rounded-md border border-white/10 bg-black/50 px-3 py-2',
-                    'text-white placeholder:text-white/40',
-                    'focus:border-white/30 focus:outline-none focus:ring-1 focus:ring-white/20'
+                    'flex-1 rounded-md border border-border bg-card px-3 py-2',
+                    'text-foreground placeholder:text-muted-foreground',
+                    'focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/20'
                   )}
                 />
                 <select
                   value={inviteRole}
                   onChange={(e) => setInviteRole(e.target.value)}
                   className={cn(
-                    'rounded-md border border-white/10 bg-black/50 px-3 py-2',
-                    'text-white focus:border-white/30 focus:outline-none focus:ring-1 focus:ring-white/20'
+                    'rounded-md border border-border bg-card px-3 py-2',
+                    'text-foreground focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/20'
                   )}
                 >
                   <option value="engineer">Engineer</option>
@@ -411,8 +411,8 @@ export function AccountSettingsPage() {
                   type="submit"
                   disabled={isInviting || !inviteEmail.trim()}
                   className={cn(
-                    'rounded-md bg-white px-4 py-2 text-sm font-medium text-black',
-                    'hover:bg-white/90 disabled:opacity-50 disabled:cursor-not-allowed'
+                    'rounded-md bg-gradient-brand text-white shadow-lg shadow-primary/20 px-4 py-2 text-sm font-medium',
+                    'hover:opacity-90 disabled:opacity-50 disabled:cursor-not-allowed'
                   )}
                 >
                   {isInviting ? (
@@ -437,8 +437,8 @@ export function AccountSettingsPage() {
             {/* Pending Invites */}
             {invites.length > 0 && (
               <div className="mt-6">
-                <h3 className="text-sm font-medium text-white">Pending Invites</h3>
-                <div className="mt-2 divide-y divide-white/[0.06]">
+                <h3 className="text-sm font-medium text-foreground">Pending Invites</h3>
+                <div className="mt-2 divide-y divide-border">
                   {invites
                     .filter((inv) => !inv.used_at)
                     .map((invite) => (
@@ -447,21 +447,21 @@ export function AccountSettingsPage() {
                         className="flex items-center justify-between py-2"
                       >
                         <div>
-                          <p className="text-sm text-white">{invite.email}</p>
-                          <p className="text-xs text-white/40">
+                          <p className="text-sm text-foreground">{invite.email}</p>
+                          <p className="text-xs text-muted-foreground">
                             {invite.expires_at
                               ? `Expires ${new Date(invite.expires_at).toLocaleDateString()}`
                               : 'No expiration'}
                           </p>
                         </div>
                         <div className="flex items-center gap-2">
-                          <span className="rounded-full bg-white/10 px-2.5 py-0.5 text-xs text-white/70">
+                          <span className="rounded-full bg-accent px-2.5 py-0.5 text-xs text-muted-foreground">
                             {invite.role}
                           </span>
                           <button
                             onClick={() => handleResendInvite(invite.id)}
                             disabled={resendingId === invite.id}
-                            className="text-white/40 hover:text-white disabled:opacity-50"
+                            className="text-muted-foreground hover:text-foreground disabled:opacity-50"
                             title="Resend invite"
                           >
                             {resendingId === invite.id ? (
@@ -483,34 +483,34 @@ export function AccountSettingsPage() {
         {isAccountOwner && (
           <Link
             to="/account/categories"
-            className="glass-card rounded-2xl p-4 sm:p-6 flex items-center justify-between group hover:border-white/20 transition-all"
+            className="bg-card border border-border rounded-xl p-4 sm:p-6 flex items-center justify-between group hover:border-border transition-all"
           >
             <div className="flex items-center gap-3">
-              <FolderTree className="h-5 w-5 text-white/50" />
+              <FolderTree className="h-5 w-5 text-muted-foreground" />
               <div>
-                <h2 className="text-lg font-semibold text-white">Team Categories</h2>
-                <p className="text-sm text-white/40">Manage tree categories for your team</p>
+                <h2 className="text-lg font-semibold text-foreground">Team Categories</h2>
+                <p className="text-sm text-muted-foreground">Manage tree categories for your team</p>
               </div>
             </div>
-            <span className="text-white/30 group-hover:text-white transition-colors">&rarr;</span>
+            <span className="text-muted-foreground group-hover:text-foreground transition-colors">&rarr;</span>
           </Link>
         )}
 
         {/* Preferences Section */}
-        <div className="glass-card rounded-2xl p-4 sm:p-6">
+        <div className="bg-card border border-border rounded-xl p-4 sm:p-6">
           <div className="flex items-center gap-2">
-            <Settings className="h-5 w-5 text-white/50" />
-            <h2 className="text-lg font-semibold text-white">Preferences</h2>
+            <Settings className="h-5 w-5 text-muted-foreground" />
+            <h2 className="text-lg font-semibold text-foreground">Preferences</h2>
           </div>
 
           <div className="mt-4">
             <label
               htmlFor="export-format"
-              className="block text-sm font-medium text-white"
+              className="block text-sm font-medium text-foreground"
             >
               Default Export Format
             </label>
-            <p className="text-sm text-white/40">
+            <p className="text-sm text-muted-foreground">
               This format will be pre-selected when exporting sessions
             </p>
             <select
@@ -521,9 +521,9 @@ export function AccountSettingsPage() {
                 toast.success('Preference saved')
               }}
               className={cn(
-                'mt-2 block w-full max-w-xs rounded-xl border border-white/10 bg-black/50 px-3 py-2',
-                'text-sm text-white',
-                'focus:border-white/30 focus:outline-none focus:ring-1 focus:ring-white/20'
+                'mt-2 block w-full max-w-xs rounded-xl border border-border bg-card px-3 py-2',
+                'text-sm text-foreground',
+                'focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/20'
               )}
             >
               <option value="markdown">Markdown (.md)</option>
@@ -554,24 +554,24 @@ function UsageStat({
 
   return (
     <div className="glass-stat rounded-md p-3">
-      <p className="text-xs font-medium text-white/40">{label}</p>
+      <p className="text-xs font-medium text-muted-foreground">{label}</p>
       <p
         className={cn(
           'mt-1 text-lg font-semibold',
-          isAtLimit ? 'text-red-400' : isNearLimit ? 'text-yellow-400' : 'text-white'
+          isAtLimit ? 'text-red-400' : isNearLimit ? 'text-yellow-400' : 'text-foreground'
         )}
       >
         {current}
-        <span className="text-sm font-normal text-white/40">
+        <span className="text-sm font-normal text-muted-foreground">
           {' '}/ {isUnlimited ? 'Unlimited' : max}
         </span>
       </p>
       {!isUnlimited && (
-        <div className="mt-2 h-1.5 overflow-hidden rounded-full bg-white/10">
+        <div className="mt-2 h-1.5 overflow-hidden rounded-full bg-accent">
           <div
             className={cn(
               'h-full rounded-full transition-all',
-              isAtLimit ? 'bg-red-400' : isNearLimit ? 'bg-yellow-500' : 'bg-white'
+              isAtLimit ? 'bg-red-400' : isNearLimit ? 'bg-yellow-500' : 'bg-primary'
             )}
             style={{ width: `${percentage}%` }}
           />
diff --git a/frontend/src/pages/AdminCategoriesPage.tsx b/frontend/src/pages/AdminCategoriesPage.tsx
index f92cf5a6..bc759f7f 100644
--- a/frontend/src/pages/AdminCategoriesPage.tsx
+++ b/frontend/src/pages/AdminCategoriesPage.tsx
@@ -145,7 +145,7 @@ export function AdminCategoriesPage() {
   if (isLoading) {
     return (
       <div className="flex h-64 items-center justify-center">
-        <div className="h-8 w-8 animate-spin rounded-full border-4 border-white/20 border-t-white" />
+        <div className="h-8 w-8 animate-spin rounded-full border-4 border-border border-t-foreground" />
       </div>
     )
   }
@@ -155,18 +155,18 @@ export function AdminCategoriesPage() {
       {/* Header */}
       <div className="mb-6 flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
         <div>
-          <h1 className="text-2xl font-bold text-white sm:text-3xl">
+          <h1 className="text-2xl font-bold text-foreground sm:text-3xl">
             Step Categories
           </h1>
-          <p className="mt-2 text-white/40">
+          <p className="mt-2 text-muted-foreground">
             Manage categories for organizing step library
           </p>
         </div>
         <button
           onClick={() => setShowCreateModal(true)}
           className={cn(
-            'flex items-center gap-2 rounded-md bg-white px-4 py-2 text-sm font-medium text-black',
-            'hover:bg-white/90'
+            'flex items-center gap-2 rounded-md bg-gradient-brand text-white shadow-lg shadow-primary/20 px-4 py-2 text-sm font-medium',
+            'hover:opacity-90'
           )}
         >
           <Plus className="h-4 w-4" />
@@ -181,16 +181,16 @@ export function AdminCategoriesPage() {
             type="checkbox"
             checked={includeArchived}
             onChange={(e) => setIncludeArchived(e.target.checked)}
-            className="h-4 w-4 rounded border-white/10 text-white focus:ring-2 focus:ring-white/20 focus:ring-offset-0"
+            className="h-4 w-4 rounded border-border text-foreground focus:ring-2 focus:ring-primary/20 focus:ring-offset-0"
           />
-          <span className="text-sm text-white/40">Show archived categories</span>
+          <span className="text-sm text-muted-foreground">Show archived categories</span>
         </label>
       </div>
 
       {/* Categories List */}
       {categories.length === 0 ? (
-        <div className="glass-card rounded-2xl p-12 text-center">
-          <p className="text-white/40">
+        <div className="bg-card border border-border rounded-xl p-12 text-center">
+          <p className="text-muted-foreground">
             No categories found. Create your first category to get started.
           </p>
         </div>
diff --git a/frontend/src/pages/ChangePasswordPage.tsx b/frontend/src/pages/ChangePasswordPage.tsx
index 9dda8f43..cc711bff 100644
--- a/frontend/src/pages/ChangePasswordPage.tsx
+++ b/frontend/src/pages/ChangePasswordPage.tsx
@@ -66,7 +66,7 @@ export function ChangePasswordPage() {
               <BrandLogo size="lg" className="h-10 w-10 invert sm:h-12 sm:w-12" />
             </div>
           </div>
-          <h1 className="text-3xl font-bold text-white tracking-tight">
+          <h1 className="text-3xl font-bold font-heading text-foreground tracking-tight">
             Change Password
           </h1>
           {isForced && (
@@ -77,7 +77,7 @@ export function ChangePasswordPage() {
         </div>
 
         <form onSubmit={handleSubmit} className="mt-8 space-y-6">
-          <div className="glass-card rounded-2xl p-6 space-y-4">
+          <div className="bg-card border border-border rounded-xl p-6 space-y-4">
             {error && (
               <div className="rounded-xl border border-red-400/20 bg-red-400/10 p-3 text-sm text-red-400">
                 {error}
@@ -85,7 +85,7 @@ export function ChangePasswordPage() {
             )}
 
             <div>
-              <label htmlFor="current-password" className="mb-1 block text-sm font-medium text-white">
+              <label htmlFor="current-password" className="mb-1 block text-sm font-medium text-foreground">
                 Current Password
               </label>
               <PasswordInput
@@ -95,16 +95,16 @@ export function ChangePasswordPage() {
                 value={currentPassword}
                 onChange={(e) => setCurrentPassword(e.target.value)}
                 className={cn(
-                  'block w-full rounded-xl border border-white/10 bg-black/50 px-3 py-2',
-                  'text-white placeholder:text-white/30',
-                  'focus:border-white/30 focus:outline-none focus:ring-1 focus:ring-white/20',
+                  'block w-full rounded-xl border border-border bg-card px-3 py-2',
+                  'text-foreground placeholder:text-muted-foreground',
+                  'focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/20',
                   'transition-colors'
                 )}
               />
             </div>
 
             <div>
-              <label htmlFor="new-password" className="mb-1 block text-sm font-medium text-white">
+              <label htmlFor="new-password" className="mb-1 block text-sm font-medium text-foreground">
                 New Password
               </label>
               <PasswordInput
@@ -114,20 +114,20 @@ export function ChangePasswordPage() {
                 value={newPassword}
                 onChange={(e) => setNewPassword(e.target.value)}
                 className={cn(
-                  'block w-full rounded-xl border border-white/10 bg-black/50 px-3 py-2',
-                  'text-white placeholder:text-white/30',
-                  'focus:border-white/30 focus:outline-none focus:ring-1 focus:ring-white/20',
+                  'block w-full rounded-xl border border-border bg-card px-3 py-2',
+                  'text-foreground placeholder:text-muted-foreground',
+                  'focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/20',
                   'transition-colors'
                 )}
                 placeholder="At least 10 characters"
               />
-              <p className="mt-1 text-xs text-white/40">
+              <p className="mt-1 text-xs text-muted-foreground">
                 Must include uppercase, lowercase, and a digit.
               </p>
             </div>
 
             <div>
-              <label htmlFor="confirm-password" className="mb-1 block text-sm font-medium text-white">
+              <label htmlFor="confirm-password" className="mb-1 block text-sm font-medium text-foreground">
                 Confirm New Password
               </label>
               <PasswordInput
@@ -137,9 +137,9 @@ export function ChangePasswordPage() {
                 value={confirmPassword}
                 onChange={(e) => setConfirmPassword(e.target.value)}
                 className={cn(
-                  'block w-full rounded-xl border border-white/10 bg-black/50 px-3 py-2',
-                  'text-white placeholder:text-white/30',
-                  'focus:border-white/30 focus:outline-none focus:ring-1 focus:ring-white/20',
+                  'block w-full rounded-xl border border-border bg-card px-3 py-2',
+                  'text-foreground placeholder:text-muted-foreground',
+                  'focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/20',
                   'transition-colors'
                 )}
               />
@@ -150,8 +150,8 @@ export function ChangePasswordPage() {
               disabled={isLoading}
               className={cn(
                 'w-full rounded-xl px-4 py-2.5 text-sm font-semibold btn-press',
-                'bg-white text-black hover:bg-white/90',
-                'focus:outline-none focus:ring-2 focus:ring-white/30 focus:ring-offset-2 focus:ring-offset-black',
+                'bg-gradient-brand text-white shadow-lg shadow-primary/20 hover:opacity-90',
+                'focus:outline-none focus:ring-2 focus:ring-primary/30 focus:ring-offset-2 focus:ring-offset-black',
                 'disabled:cursor-not-allowed disabled:opacity-50',
                 'transition-all'
               )}
diff --git a/frontend/src/pages/ForgotPasswordPage.tsx b/frontend/src/pages/ForgotPasswordPage.tsx
index c76dcbb4..1b1d200a 100644
--- a/frontend/src/pages/ForgotPasswordPage.tsx
+++ b/frontend/src/pages/ForgotPasswordPage.tsx
@@ -25,26 +25,26 @@ export function ForgotPasswordPage() {
   }
 
   return (
-    <div className="flex min-h-screen items-center justify-center bg-black px-4">
+    <div className="flex min-h-screen items-center justify-center bg-card px-4">
       <div className="pointer-events-none fixed inset-0 bg-[radial-gradient(circle_at_50%_0%,rgba(100,100,120,0.03),transparent_50%)]" />
 
       <div className="relative w-full max-w-md space-y-8">
         <div className="text-center">
           <div className="mb-4 flex justify-center sm:mb-6">
-            <div className="w-16 h-16 rounded-2xl bg-white flex items-center justify-center sm:w-20 sm:h-20">
+            <div className="w-16 h-16 rounded-2xl bg-gradient-brand flex items-center justify-center sm:w-20 sm:h-20">
               <BrandLogo size="lg" className="h-10 w-10 invert sm:h-12 sm:w-12" />
             </div>
           </div>
-          <h1 className="text-3xl font-bold text-white tracking-tight">
+          <h1 className="text-3xl font-bold text-foreground tracking-tight">
             Reset Password
           </h1>
-          <p className="mt-2 text-sm text-white/40">
+          <p className="mt-2 text-sm text-muted-foreground">
             Enter your email and we'll send you a link to reset your password.
           </p>
         </div>
 
         {submitted ? (
-          <div className="glass-card rounded-2xl p-6 space-y-4">
+          <div className="bg-card border border-border rounded-xl p-6 space-y-4">
             <div className="rounded-xl border border-green-400/20 bg-green-400/10 p-4 text-sm text-green-400">
               If an account with that email exists, we've sent a password reset link.
               Check your inbox and follow the instructions.
@@ -52,7 +52,7 @@ export function ForgotPasswordPage() {
             <div className="text-center">
               <Link
                 to="/login"
-                className="text-sm text-white/60 hover:text-white transition-colors"
+                className="text-sm text-muted-foreground hover:text-foreground transition-colors"
               >
                 Back to sign in
               </Link>
@@ -60,9 +60,9 @@ export function ForgotPasswordPage() {
           </div>
         ) : (
           <form onSubmit={handleSubmit} className="mt-8 space-y-6">
-            <div className="glass-card rounded-2xl p-6 space-y-4">
+            <div className="bg-card border border-border rounded-xl p-6 space-y-4">
               <div>
-                <label htmlFor="email" className="mb-1 block text-sm font-medium text-white">
+                <label htmlFor="email" className="mb-1 block text-sm font-medium text-foreground">
                   Email Address
                 </label>
                 <input
@@ -73,9 +73,9 @@ export function ForgotPasswordPage() {
                   value={email}
                   onChange={(e) => setEmail(e.target.value)}
                   className={cn(
-                    'block w-full rounded-xl border border-white/10 bg-black/50 px-3 py-2',
-                    'text-white placeholder:text-white/30',
-                    'focus:border-white/30 focus:outline-none focus:ring-1 focus:ring-white/20',
+                    'block w-full rounded-xl border border-border bg-card px-3 py-2',
+                    'text-foreground placeholder:text-muted-foreground',
+                    'focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/20',
                     'transition-colors'
                   )}
                   placeholder="you@example.com"
@@ -87,8 +87,8 @@ export function ForgotPasswordPage() {
                 disabled={isLoading || !email}
                 className={cn(
                   'w-full rounded-xl px-4 py-2.5 text-sm font-semibold btn-press',
-                  'bg-white text-black hover:bg-white/90',
-                  'focus:outline-none focus:ring-2 focus:ring-white/30 focus:ring-offset-2 focus:ring-offset-black',
+                  'bg-gradient-brand text-white shadow-lg shadow-primary/20 hover:opacity-90',
+                  'focus:outline-none focus:ring-2 focus:ring-primary/30 focus:ring-offset-2 focus:ring-offset-background',
                   'disabled:cursor-not-allowed disabled:opacity-50',
                   'transition-all'
                 )}
@@ -99,7 +99,7 @@ export function ForgotPasswordPage() {
               <div className="text-center">
                 <Link
                   to="/login"
-                  className="text-sm text-white/60 hover:text-white transition-colors"
+                  className="text-sm text-muted-foreground hover:text-foreground transition-colors"
                 >
                   Back to sign in
                 </Link>
diff --git a/frontend/src/pages/LoginPage.tsx b/frontend/src/pages/LoginPage.tsx
index ed182d9f..52d2750c 100644
--- a/frontend/src/pages/LoginPage.tsx
+++ b/frontend/src/pages/LoginPage.tsx
@@ -51,19 +51,19 @@ export function LoginPage() {
               <BrandLogo size="lg" className="h-10 w-10 invert sm:h-12 sm:w-12" />
             </div>
           </div>
-          <h1 className="text-3xl font-bold text-white tracking-tight">
+          <h1 className="text-3xl font-bold font-heading text-foreground tracking-tight">
             ResolutionFlow
           </h1>
-          <p className="mt-2 text-base font-medium text-white/60 sm:mt-3 sm:text-lg">
+          <p className="mt-2 text-base font-medium text-muted-foreground sm:mt-3 sm:text-lg">
             Decision Tree Platform
           </p>
-          <p className="mt-1 text-sm text-white/40 sm:mt-2">
+          <p className="mt-1 text-sm text-muted-foreground sm:mt-2">
             Sign in to your account
           </p>
         </div>
 
         <form onSubmit={handleSubmit} className="mt-8 space-y-6">
-          <div className="glass-card rounded-2xl p-6 space-y-4">
+          <div className="bg-card border border-border rounded-xl p-6 space-y-4">
             {(error || localError) && (
               <div className="rounded-xl border border-red-400/20 bg-red-400/10 p-3 text-sm text-red-400">
                 {localError || error}
@@ -71,7 +71,7 @@ export function LoginPage() {
             )}
 
             <div>
-              <label htmlFor="email" className="mb-1 block text-sm font-medium text-white">
+              <label htmlFor="email" className="mb-1 block text-sm font-medium text-foreground">
                 Email address
               </label>
               <input
@@ -83,9 +83,9 @@ export function LoginPage() {
                 value={email}
                 onChange={(e) => setEmail(e.target.value)}
                 className={cn(
-                  'block w-full rounded-xl border border-white/10 bg-black/50 px-3 py-2',
-                  'text-white placeholder:text-white/30',
-                  'focus:border-white/30 focus:outline-none focus:ring-1 focus:ring-white/20',
+                  'block w-full rounded-xl border border-border bg-card px-3 py-2',
+                  'text-foreground placeholder:text-muted-foreground',
+                  'focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/20',
                   'transition-colors'
                 )}
                 placeholder="you@example.com"
@@ -93,7 +93,7 @@ export function LoginPage() {
             </div>
 
             <div>
-              <label htmlFor="password" className="mb-1 block text-sm font-medium text-white">
+              <label htmlFor="password" className="mb-1 block text-sm font-medium text-foreground">
                 Password
               </label>
               <PasswordInput
@@ -104,9 +104,9 @@ export function LoginPage() {
                 value={password}
                 onChange={(e) => setPassword(e.target.value)}
                 className={cn(
-                  'block w-full rounded-xl border border-white/10 bg-black/50 px-3 py-2',
-                  'text-white placeholder:text-white/30',
-                  'focus:border-white/30 focus:outline-none focus:ring-1 focus:ring-white/20',
+                  'block w-full rounded-xl border border-border bg-card px-3 py-2',
+                  'text-foreground placeholder:text-muted-foreground',
+                  'focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/20',
                   'transition-colors'
                 )}
                 placeholder="••••••••••"
@@ -114,7 +114,7 @@ export function LoginPage() {
             </div>
 
             <div className="text-right">
-              <Link to="/forgot-password" className="text-xs text-white/40 hover:text-white/60 transition-colors">
+              <Link to="/forgot-password" className="text-xs text-muted-foreground hover:text-foreground transition-colors">
                 Forgot password?
               </Link>
             </div>
@@ -124,8 +124,8 @@ export function LoginPage() {
               disabled={isLoading}
               className={cn(
                 'w-full rounded-xl px-4 py-2.5 text-sm font-semibold btn-press',
-                'bg-white text-black hover:bg-white/90',
-                'focus:outline-none focus:ring-2 focus:ring-white/30 focus:ring-offset-2 focus:ring-offset-black',
+                'bg-gradient-brand text-white shadow-lg shadow-primary/20 hover:opacity-90',
+                'focus:outline-none focus:ring-2 focus:ring-primary/30 focus:ring-offset-2 focus:ring-offset-black',
                 'disabled:cursor-not-allowed disabled:opacity-50',
                 'transition-all'
               )}
@@ -134,9 +134,9 @@ export function LoginPage() {
             </button>
           </div>
 
-          <p className="text-center text-sm text-white/40">
+          <p className="text-center text-sm text-muted-foreground">
             Don't have an account?{' '}
-            <Link to="/register" className="font-medium text-white hover:underline">
+            <Link to="/register" className="font-medium text-foreground hover:underline">
               Register
             </Link>
           </p>
diff --git a/frontend/src/pages/MySharesPage.tsx b/frontend/src/pages/MySharesPage.tsx
index 31c34c57..48062682 100644
--- a/frontend/src/pages/MySharesPage.tsx
+++ b/frontend/src/pages/MySharesPage.tsx
@@ -96,7 +96,7 @@ export default function MySharesPage() {
   if (loading) {
     return (
       <div className="flex items-center justify-center py-32">
-        <div className="h-8 w-8 animate-spin rounded-full border-4 border-white/20 border-t-white" />
+        <div className="h-8 w-8 animate-spin rounded-full border-4 border-border border-t-foreground" />
       </div>
     )
   }
@@ -105,12 +105,12 @@ export default function MySharesPage() {
   if (error) {
     return (
       <div className="container mx-auto px-4 py-6 sm:px-6 sm:py-8">
-        <div className="glass-card rounded-xl p-6 border border-red-400/20">
+        <div className="bg-card border border-red-400/20 rounded-xl p-6">
           <div className="text-center">
             <p className="text-red-400 text-sm mb-4">{error}</p>
             <button
               onClick={fetchShares}
-              className="bg-white text-black hover:bg-white/90 rounded-md px-4 py-2 text-sm font-medium transition-colors"
+              className="bg-gradient-brand text-white shadow-lg shadow-primary/20 hover:opacity-90 rounded-md px-4 py-2 text-sm font-medium transition-colors"
             >
               Try again
             </button>
@@ -125,7 +125,7 @@ export default function MySharesPage() {
       {/* Back link */}
       <Link
         to="/sessions"
-        className="inline-flex items-center gap-1.5 text-sm text-white/40 hover:text-white/70 transition-colors mb-6"
+        className="inline-flex items-center gap-1.5 text-sm text-muted-foreground hover:text-foreground transition-colors mb-6"
       >
         <ArrowLeft className="h-4 w-4" />
         Back to sessions
@@ -133,21 +133,21 @@ export default function MySharesPage() {
 
       {/* Header */}
       <div className="mb-6">
-        <h1 className="text-2xl font-bold text-white">My Shared Sessions</h1>
-        <p className="text-white/40 mt-1">Manage your session share links</p>
+        <h1 className="text-2xl font-heading font-bold text-foreground">My Shared Sessions</h1>
+        <p className="text-muted-foreground mt-1">Manage your session share links</p>
       </div>
 
       {/* Empty state */}
       {shares.length === 0 ? (
-        <div className="glass-card rounded-xl p-12 text-center">
-          <Link2 className="h-12 w-12 text-white/20 mx-auto mb-4" />
-          <h2 className="text-lg font-semibold text-white mb-2">No shared sessions</h2>
-          <p className="text-white/40 text-sm mb-6">
+        <div className="bg-card border border-border rounded-xl p-12 text-center">
+          <Link2 className="h-12 w-12 text-muted-foreground mx-auto mb-4" />
+          <h2 className="text-lg font-heading font-semibold text-foreground mb-2">No shared sessions</h2>
+          <p className="text-muted-foreground text-sm mb-6">
             Share a session from the session detail page to create a link
           </p>
           <button
             onClick={() => navigate('/sessions')}
-            className="bg-white text-black hover:bg-white/90 rounded-md px-4 py-2 text-sm font-medium transition-colors"
+            className="bg-gradient-brand text-white shadow-lg shadow-primary/20 hover:opacity-90 rounded-md px-4 py-2 text-sm font-medium transition-colors"
           >
             Go to Sessions
           </button>
@@ -159,10 +159,10 @@ export default function MySharesPage() {
             const isCopied = copiedId === share.id
 
             return (
-              <div key={share.id} className="glass-card rounded-xl p-5">
+              <div key={share.id} className="bg-card border border-border rounded-xl p-5">
                 {/* Top row: badge + name */}
                 <div className="flex items-center gap-3 mb-3">
-                  <span className="inline-flex items-center gap-1.5 text-xs rounded-full px-2 py-0.5 bg-white/10 text-white/60">
+                  <span className="inline-flex items-center gap-1.5 text-xs rounded-full px-2 py-0.5 bg-accent text-muted-foreground">
                     {share.visibility === 'public' ? (
                       <Globe className="h-3 w-3" />
                     ) : (
@@ -170,18 +170,18 @@ export default function MySharesPage() {
                     )}
                     {share.visibility === 'public' ? 'Public' : 'Account Only'}
                   </span>
-                  <span className="text-sm font-medium text-white">
+                  <span className="text-sm font-medium text-foreground">
                     {share.share_name || 'Untitled share'}
                   </span>
                 </div>
 
                 {/* Session info */}
-                <p className="text-sm text-white/50 mb-2">
+                <p className="text-sm text-muted-foreground mb-2">
                   Session ID: {share.session_id.slice(0, 8)}...
                 </p>
 
                 {/* Meta row */}
-                <div className="flex flex-wrap items-center gap-x-4 gap-y-1 text-xs text-white/40 mb-4">
+                <div className="flex flex-wrap items-center gap-x-4 gap-y-1 text-xs text-muted-foreground mb-4">
                   <span>Created {formatRelativeTime(share.created_at)}</span>
                   <span className="hidden sm:inline">·</span>
                   <span>
@@ -203,7 +203,7 @@ export default function MySharesPage() {
                       'inline-flex items-center gap-1.5 rounded-md px-3 py-1.5 text-sm font-medium transition-colors',
                       isCopied
                         ? 'bg-emerald-400/10 text-emerald-400'
-                        : 'bg-white text-black hover:bg-white/90'
+                        : 'bg-gradient-brand text-white shadow-lg shadow-primary/20 hover:opacity-90'
                     )}
                   >
                     {isCopied ? (
@@ -216,7 +216,7 @@ export default function MySharesPage() {
 
                   <Link
                     to={`/sessions/${share.session_id}`}
-                    className="inline-flex items-center gap-1.5 border border-white/10 text-white/60 hover:bg-white/10 rounded-md px-3 py-1.5 text-sm transition-colors"
+                    className="inline-flex items-center gap-1.5 border border-border text-muted-foreground hover:bg-accent rounded-md px-3 py-1.5 text-sm transition-colors"
                   >
                     <ExternalLink className="h-3.5 w-3.5" />
                     View Session
diff --git a/frontend/src/pages/MyTreesPage.tsx b/frontend/src/pages/MyTreesPage.tsx
index 7619c40e..55ef180e 100644
--- a/frontend/src/pages/MyTreesPage.tsx
+++ b/frontend/src/pages/MyTreesPage.tsx
@@ -112,8 +112,8 @@ export function MyTreesPage() {
     <div className="container mx-auto px-4 py-6 sm:px-6 sm:py-8">
       <div className="mb-6 flex items-center justify-between sm:mb-8">
         <div>
-          <h1 className="text-2xl font-bold text-white sm:text-3xl">My Flows</h1>
-          <p className="mt-2 text-white/40">
+          <h1 className="text-2xl font-bold text-foreground sm:text-3xl">My Flows</h1>
+          <p className="mt-2 text-muted-foreground">
             Your forked and custom flows
           </p>
         </div>
@@ -121,7 +121,7 @@ export function MyTreesPage() {
           <div className="relative">
             <button
               onClick={() => setShowCreateMenu(!showCreateMenu)}
-              className="flex items-center gap-2 rounded-md bg-white px-4 py-2 text-sm font-medium text-black hover:bg-white/90"
+              className="flex items-center gap-2 rounded-md bg-gradient-brand text-white shadow-lg shadow-primary/20 px-4 py-2 text-sm font-medium hover:opacity-90"
             >
               <Plus className="h-4 w-4" />
               Create New
@@ -130,27 +130,27 @@ export function MyTreesPage() {
             {showCreateMenu && (
               <>
                 <div className="fixed inset-0 z-10" onClick={() => setShowCreateMenu(false)} />
-                <div className="absolute right-0 z-20 mt-1 w-56 rounded-lg border border-white/10 bg-black/95 p-1 shadow-xl backdrop-blur-sm">
+                <div className="absolute right-0 z-20 mt-1 w-56 rounded-lg border border-border bg-card p-1 shadow-xl backdrop-blur-sm">
                   <Link
                     to="/trees/new"
                     onClick={() => setShowCreateMenu(false)}
-                    className="flex items-center gap-3 rounded-md px-3 py-2.5 text-sm text-white hover:bg-white/10"
+                    className="flex items-center gap-3 rounded-md px-3 py-2.5 text-sm text-foreground hover:bg-accent"
                   >
-                    <FolderTree className="h-4 w-4 text-white/50" />
+                    <FolderTree className="h-4 w-4 text-muted-foreground" />
                     <div>
                       <div className="font-medium">Troubleshooting Tree</div>
-                      <div className="text-xs text-white/40">Branching decision flow</div>
+                      <div className="text-xs text-muted-foreground">Branching decision flow</div>
                     </div>
                   </Link>
                   <Link
                     to="/flows/new"
                     onClick={() => setShowCreateMenu(false)}
-                    className="flex items-center gap-3 rounded-md px-3 py-2.5 text-sm text-white hover:bg-white/10"
+                    className="flex items-center gap-3 rounded-md px-3 py-2.5 text-sm text-foreground hover:bg-accent"
                   >
-                    <ListOrdered className="h-4 w-4 text-white/50" />
+                    <ListOrdered className="h-4 w-4 text-muted-foreground" />
                     <div>
                       <div className="font-medium">Procedural Flow</div>
-                      <div className="text-xs text-white/40">Step-by-step procedure</div>
+                      <div className="text-xs text-muted-foreground">Step-by-step procedure</div>
                     </div>
                   </Link>
                 </div>
@@ -163,21 +163,21 @@ export function MyTreesPage() {
       {/* Loading State */}
       {isLoading ? (
         <div className="flex justify-center py-12">
-          <div className="h-8 w-8 animate-spin rounded-full border-4 border-white/20 border-t-white" />
+          <div className="h-8 w-8 animate-spin rounded-full border-4 border-border border-t-foreground" />
         </div>
       ) : trees.length === 0 ? (
-        <div className="rounded-lg border border-dashed border-white/10 bg-white/[0.02] px-4 py-12 text-center">
-          <FolderTree className="mx-auto mb-4 h-12 w-12 text-white/20" />
-          <h2 className="mb-2 text-lg font-semibold text-white">No personal flows yet</h2>
-          <p className="mb-4 text-sm text-white/40">
+        <div className="rounded-lg border border-dashed border-border bg-accent px-4 py-12 text-center">
+          <FolderTree className="mx-auto mb-4 h-12 w-12 text-muted-foreground" />
+          <h2 className="mb-2 text-lg font-semibold text-foreground">No personal flows yet</h2>
+          <p className="mb-4 text-sm text-muted-foreground">
             Fork a flow from the library to customize it for your workflow
           </p>
           <div className="flex items-center justify-center gap-3">
             <Link
               to="/trees"
               className={cn(
-                'inline-flex items-center gap-2 rounded-md bg-white px-4 py-2 text-sm font-medium text-black',
-                'hover:bg-white/90'
+                'inline-flex items-center gap-2 rounded-md bg-gradient-brand text-white shadow-lg shadow-primary/20 px-4 py-2 text-sm font-medium',
+                'hover:opacity-90'
               )}
             >
               Browse Library
@@ -186,8 +186,8 @@ export function MyTreesPage() {
               <Link
                 to="/trees/new"
                 className={cn(
-                  'inline-flex items-center gap-2 rounded-md border border-white/10 px-4 py-2 text-sm font-medium text-white/60',
-                  'hover:bg-white/10 hover:text-white'
+                  'inline-flex items-center gap-2 rounded-md border border-border px-4 py-2 text-sm font-medium text-muted-foreground',
+                  'hover:bg-accent hover:text-foreground'
                 )}
               >
                 <Plus className="h-4 w-4" />
@@ -201,15 +201,15 @@ export function MyTreesPage() {
           {trees.map((tree) => (
             <div
               key={tree.id}
-              className="glass-card rounded-2xl p-4 transition-all hover:glass-card-hover sm:p-6"
+              className="bg-card border border-border rounded-xl p-4 transition-all hover:border-border/80 sm:p-6"
             >
               {/* Header */}
               <div className="mb-3 flex items-start justify-between gap-2">
                 <div className="flex items-center gap-2">
                   {tree.tree_type === 'procedural' && (
-                    <ListOrdered className="h-4 w-4 shrink-0 text-white/40" />
+                    <ListOrdered className="h-4 w-4 shrink-0 text-muted-foreground" />
                   )}
-                  <h3 className="font-semibold text-white">{tree.name}</h3>
+                  <h3 className="font-semibold text-foreground">{tree.name}</h3>
                 </div>
                 <div className="flex items-center gap-1.5">
                   {tree.tree_type === 'procedural' && (
@@ -218,7 +218,7 @@ export function MyTreesPage() {
                     </span>
                   )}
                   {tree.category_info && (
-                    <span className="rounded-full bg-white/10 px-2 py-0.5 text-xs text-white/70">
+                    <span className="rounded-full bg-accent px-2 py-0.5 text-xs text-muted-foreground">
                       {tree.category_info.name}
                     </span>
                   )}
@@ -226,19 +226,19 @@ export function MyTreesPage() {
               </div>
 
               {/* Description */}
-              <p className="mb-3 text-sm text-white/40 line-clamp-2">
+              <p className="mb-3 text-sm text-muted-foreground line-clamp-2">
                 {tree.description || 'No description available'}
               </p>
 
               {/* Fork Badge */}
               {tree.parent_tree_id && (
-                <div className="mb-3 flex items-center gap-2 rounded-md bg-white/5 px-2 py-1.5 text-sm">
-                  <GitBranch className="h-4 w-4 text-white/40" />
-                  <span className="text-white/40">
+                <div className="mb-3 flex items-center gap-2 rounded-md bg-accent px-2 py-1.5 text-sm">
+                  <GitBranch className="h-4 w-4 text-muted-foreground" />
+                  <span className="text-muted-foreground">
                     Forked from{' '}
                     <Link
                       to={`/trees/${tree.parent_tree_id}/navigate`}
-                      className="font-medium text-white hover:underline"
+                      className="font-medium text-foreground hover:underline"
                     >
                       original
                     </Link>
@@ -254,7 +254,7 @@ export function MyTreesPage() {
               )}
 
               {/* Stats */}
-              <div className="mb-4 flex items-center gap-4 text-xs text-white/30">
+              <div className="mb-4 flex items-center gap-4 text-xs text-muted-foreground">
                 <div className="flex items-center gap-1">
                   <Clock className="h-3.5 w-3.5" />
                   <span>{formatDate(tree.lastUsed)}</span>
@@ -271,8 +271,8 @@ export function MyTreesPage() {
                   type="button"
                   onClick={() => handleStartSession(tree)}
                   className={cn(
-                    'flex flex-1 items-center justify-center gap-2 rounded-md bg-white px-3 py-2 text-sm font-medium text-black',
-                    'hover:bg-white/90'
+                    'flex flex-1 items-center justify-center gap-2 rounded-md bg-gradient-brand text-white shadow-lg shadow-primary/20 px-3 py-2 text-sm font-medium',
+                    'hover:opacity-90'
                   )}
                 >
                   <Play className="h-4 w-4" />
@@ -282,8 +282,8 @@ export function MyTreesPage() {
                   <Link
                     to={getEditPath(tree)}
                     className={cn(
-                      'rounded-md border border-white/10 p-2 text-white/40',
-                      'hover:bg-white/10 hover:text-white'
+                      'rounded-md border border-border p-2 text-muted-foreground',
+                      'hover:bg-accent hover:text-foreground'
                     )}
                     title="Edit tree"
                   >
@@ -297,8 +297,8 @@ export function MyTreesPage() {
                     setShowShareModal(true)
                   }}
                   className={cn(
-                    'rounded-md border border-white/10 p-2 text-white/40',
-                    'hover:bg-white/10 hover:text-white'
+                    'rounded-md border border-border p-2 text-muted-foreground',
+                    'hover:bg-accent hover:text-foreground'
                   )}
                   title="Share tree"
                 >
@@ -311,7 +311,7 @@ export function MyTreesPage() {
                     setShowDeleteConfirm(true)
                   }}
                   className={cn(
-                    'rounded-md border border-white/10 p-2 text-white/40',
+                    'rounded-md border border-border p-2 text-muted-foreground',
                     'hover:bg-red-400/10 hover:text-red-400'
                   )}
                   title="Delete tree"
diff --git a/frontend/src/pages/ProceduralEditorPage.tsx b/frontend/src/pages/ProceduralEditorPage.tsx
index f1347f89..ab1644db 100644
--- a/frontend/src/pages/ProceduralEditorPage.tsx
+++ b/frontend/src/pages/ProceduralEditorPage.tsx
@@ -97,7 +97,7 @@ export function ProceduralEditorPage() {
   if (isLoading) {
     return (
       <div className="flex min-h-[50vh] items-center justify-center">
-        <div className="h-8 w-8 animate-spin rounded-full border-4 border-white/20 border-t-white" />
+        <div className="h-8 w-8 animate-spin rounded-full border-4 border-border border-t-foreground" />
       </div>
     )
   }
@@ -109,13 +109,13 @@ export function ProceduralEditorPage() {
         <div className="flex items-center gap-3">
           <button
             onClick={() => navigate('/my-trees')}
-            className="rounded-md p-2 text-white/40 hover:bg-white/10 hover:text-white"
+            className="rounded-md p-2 text-muted-foreground hover:bg-accent hover:text-foreground"
           >
             <ArrowLeft className="h-5 w-5" />
           </button>
           <div className="flex items-center gap-2">
-            <ListOrdered className="h-5 w-5 text-white/50" />
-            <h1 className="text-xl font-bold text-white sm:text-2xl">
+            <ListOrdered className="h-5 w-5 text-muted-foreground" />
+            <h1 className="text-xl font-bold text-foreground sm:text-2xl">
               {isEditMode ? 'Edit Procedure' : 'New Procedure'}
             </h1>
           </div>
@@ -123,19 +123,19 @@ export function ProceduralEditorPage() {
 
         <div className="flex items-center gap-2">
           {isDirty && (
-            <span className="text-xs text-white/40">Unsaved changes</span>
+            <span className="text-xs text-muted-foreground">Unsaved changes</span>
           )}
           <button
             onClick={() => handleSave('draft')}
             disabled={isSaving}
-            className="flex items-center gap-1.5 rounded-md border border-white/10 px-3 py-2 text-sm text-white/60 hover:bg-white/10 hover:text-white disabled:opacity-50"
+            className="flex items-center gap-1.5 rounded-md border border-border px-3 py-2 text-sm text-muted-foreground hover:bg-accent hover:text-foreground disabled:opacity-50"
           >
             Save Draft
           </button>
           <button
             onClick={() => handleSave('published')}
             disabled={isSaving}
-            className="flex items-center gap-1.5 rounded-md bg-white px-4 py-2 text-sm font-medium text-black hover:bg-white/90 disabled:opacity-50"
+            className="flex items-center gap-1.5 rounded-md bg-gradient-brand text-white shadow-lg shadow-primary/20 px-4 py-2 text-sm font-medium hover:opacity-90 disabled:opacity-50"
           >
             <Save className="h-4 w-4" />
             {isSaving ? 'Saving...' : 'Publish'}
@@ -146,44 +146,44 @@ export function ProceduralEditorPage() {
       {/* Content */}
       <div className="space-y-6">
         {/* Metadata */}
-        <div className="glass-card rounded-2xl p-4 sm:p-6">
-          <h2 className="mb-4 text-lg font-semibold text-white">Details</h2>
+        <div className="bg-card border border-border rounded-xl p-4 sm:p-6">
+          <h2 className="mb-4 text-lg font-semibold text-foreground">Details</h2>
           <div className="space-y-4">
             <div>
-              <label className="mb-1 block text-sm font-medium text-white/60">Name</label>
+              <label className="mb-1 block text-sm font-medium text-muted-foreground">Name</label>
               <input
                 type="text"
                 value={name}
                 onChange={(e) => setName(e.target.value)}
                 placeholder="e.g. Domain Controller Build"
-                className="w-full rounded-lg border border-white/10 bg-black/50 px-3 py-2 text-white placeholder:text-white/30 focus:border-white/30 focus:outline-none focus:ring-1 focus:ring-white/20"
+                className="w-full rounded-lg border border-border bg-card px-3 py-2 text-foreground placeholder:text-muted-foreground focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/20"
               />
             </div>
 
             <div>
-              <label className="mb-1 block text-sm font-medium text-white/60">Description</label>
+              <label className="mb-1 block text-sm font-medium text-muted-foreground">Description</label>
               <textarea
                 value={description}
                 onChange={(e) => setDescription(e.target.value)}
                 placeholder="Brief description of this procedure..."
                 rows={2}
-                className="w-full rounded-lg border border-white/10 bg-black/50 px-3 py-2 text-white placeholder:text-white/30 focus:border-white/30 focus:outline-none focus:ring-1 focus:ring-white/20"
+                className="w-full rounded-lg border border-border bg-card px-3 py-2 text-foreground placeholder:text-muted-foreground focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/20"
               />
             </div>
 
             <div className="grid grid-cols-2 gap-4">
               <div>
-                <label className="mb-1 block text-sm font-medium text-white/60">Tags</label>
+                <label className="mb-1 block text-sm font-medium text-muted-foreground">Tags</label>
                 <TagInput tags={tags} onChange={setTags} />
               </div>
 
               <div className="flex items-end pb-1">
-                <label className="flex items-center gap-2 text-sm text-white/60">
+                <label className="flex items-center gap-2 text-sm text-muted-foreground">
                   <input
                     type="checkbox"
                     checked={isPublic}
                     onChange={(e) => setIsPublic(e.target.checked)}
-                    className="rounded border-white/20"
+                    className="rounded border-border"
                   />
                   Public (visible to all users)
                 </label>
diff --git a/frontend/src/pages/ProceduralNavigationPage.tsx b/frontend/src/pages/ProceduralNavigationPage.tsx
index 754ec68e..7cd75cc6 100644
--- a/frontend/src/pages/ProceduralNavigationPage.tsx
+++ b/frontend/src/pages/ProceduralNavigationPage.tsx
@@ -278,7 +278,7 @@ export function ProceduralNavigationPage() {
   if (isLoading) {
     return (
       <div className="flex min-h-[50vh] items-center justify-center">
-        <div className="h-8 w-8 animate-spin rounded-full border-4 border-white/20 border-t-white" />
+        <div className="h-8 w-8 animate-spin rounded-full border-4 border-border border-t-foreground" />
       </div>
     )
   }
@@ -330,19 +330,19 @@ export function ProceduralNavigationPage() {
   const currentStepState = currentStep ? stepStates.get(currentStep.id) : undefined
 
   return (
-    <div className="flex h-[calc(100vh-4rem)] flex-col">
+    <div className="flex h-full flex-col">
       {/* Top bar */}
-      <div className="border-b border-white/[0.06] px-4 py-3 sm:px-6">
+      <div className="border-b border-border px-4 py-3 sm:px-6">
         <div className="flex items-center justify-between gap-4">
           <div className="flex items-center gap-3">
             <button
               onClick={() => setSidebarOpen(!sidebarOpen)}
-              className="rounded-md p-1.5 text-white/40 hover:bg-white/10 hover:text-white lg:hidden"
+              className="rounded-md p-1.5 text-muted-foreground hover:bg-accent hover:text-foreground lg:hidden"
             >
               {sidebarOpen ? <ChevronLeft className="h-4 w-4" /> : <ChevronRight className="h-4 w-4" />}
             </button>
-            <ListOrdered className="h-5 w-5 text-white/40" />
-            <h1 className="text-sm font-semibold text-white sm:text-base">{tree.name}</h1>
+            <ListOrdered className="h-5 w-5 text-muted-foreground" />
+            <h1 className="text-sm font-semibold text-foreground sm:text-base">{tree.name}</h1>
           </div>
         </div>
         <div className="mt-2">
@@ -360,7 +360,7 @@ export function ProceduralNavigationPage() {
         {/* Left sidebar - step checklist */}
         <div
           className={cn(
-            'border-r border-white/[0.06] bg-black/30 transition-all duration-200',
+            'border-r border-border bg-card transition-all duration-200',
             sidebarOpen ? 'w-72 p-3' : 'w-0 overflow-hidden p-0'
           )}
         >
@@ -375,10 +375,10 @@ export function ProceduralNavigationPage() {
 
               {/* View Parameters button */}
               {Object.keys(sessionVariables).length > 0 && (
-                <div className="mt-3 border-t border-white/[0.06] pt-3">
+                <div className="mt-3 border-t border-border pt-3">
                   <button
                     onClick={() => setParamsOpen(true)}
-                    className="flex w-full items-center gap-2 rounded-lg border border-white/10 px-3 py-2 text-xs text-white/40 hover:bg-white/[0.06] hover:text-white/60"
+                    className="flex w-full items-center gap-2 rounded-lg border border-border px-3 py-2 text-xs text-muted-foreground hover:bg-accent hover:text-muted-foreground"
                   >
                     <Settings2 className="h-3.5 w-3.5" />
                     View Parameters ({Object.keys(sessionVariables).length})
@@ -413,15 +413,15 @@ export function ProceduralNavigationPage() {
       {paramsOpen && (
         <div className="fixed inset-0 z-50 flex items-center justify-center">
           <div
-            className="absolute inset-0 bg-black/60 backdrop-blur-sm"
+            className="absolute inset-0 bg-background/60 backdrop-blur-sm"
             onClick={() => setParamsOpen(false)}
           />
-          <div className="relative w-full max-w-md rounded-2xl border border-white/10 bg-black/95 shadow-2xl backdrop-blur-sm">
-            <div className="flex items-center justify-between border-b border-white/[0.06] px-5 py-4">
-              <h3 className="text-sm font-semibold text-white">Project Parameters</h3>
+          <div className="relative w-full max-w-md rounded-2xl border border-border bg-card shadow-2xl backdrop-blur-sm">
+            <div className="flex items-center justify-between border-b border-border px-5 py-4">
+              <h3 className="text-sm font-semibold text-foreground">Project Parameters</h3>
               <button
                 onClick={() => setParamsOpen(false)}
-                className="rounded-lg p-1 text-white/40 hover:bg-white/10 hover:text-white"
+                className="rounded-lg p-1 text-muted-foreground hover:bg-accent hover:text-foreground"
               >
                 <X className="h-4 w-4" />
               </button>
@@ -429,9 +429,9 @@ export function ProceduralNavigationPage() {
             <div className="max-h-[60vh] overflow-y-auto p-5">
               <div className="space-y-2">
                 {Object.entries(sessionVariables).map(([key, value]) => (
-                  <div key={key} className="flex items-baseline justify-between gap-4 rounded-lg bg-white/[0.03] px-3 py-2">
-                    <span className="text-xs font-medium text-white/40">{key.replace(/_/g, ' ')}</span>
-                    <span className="text-right text-sm text-white/70">{value || 'N/A'}</span>
+                  <div key={key} className="flex items-baseline justify-between gap-4 rounded-lg bg-accent px-3 py-2">
+                    <span className="text-xs font-medium text-muted-foreground">{key.replace(/_/g, ' ')}</span>
+                    <span className="text-right text-sm text-muted-foreground">{value || 'N/A'}</span>
                   </div>
                 ))}
               </div>
diff --git a/frontend/src/pages/QuickStartPage.tsx b/frontend/src/pages/QuickStartPage.tsx
index e7dcd751..e07059d0 100644
--- a/frontend/src/pages/QuickStartPage.tsx
+++ b/frontend/src/pages/QuickStartPage.tsx
@@ -1,12 +1,17 @@
 import { useState, useEffect, useRef } from 'react'
 import { useNavigate, Link } from 'react-router-dom'
-import { Search, Clock, ArrowRight, Play, Loader2, Sparkles } from 'lucide-react'
+import { Search, Plus, Loader2 } from 'lucide-react'
 import { treesApi } from '@/api/trees'
 import { sessionsApi } from '@/api/sessions'
 import type { TreeListItem } from '@/types'
 import type { Session } from '@/types/session'
 import { getTreeNavigatePath } from '@/lib/routing'
-
+import { usePermissions } from '@/hooks/usePermissions'
+import { QuickStats } from '@/components/dashboard/QuickStats'
+import { FiltersBar } from '@/components/dashboard/FiltersBar'
+import { SectionGroup } from '@/components/dashboard/SectionGroup'
+import { SessionsPanel } from '@/components/dashboard/SessionsPanel'
+import { TreeListItem as TreeListItemComponent } from '@/components/dashboard/TreeListItem'
 
 function timeAgo(dateStr: string): string {
   const now = Date.now()
@@ -18,48 +23,42 @@ function timeAgo(dateStr: string): string {
   const hours = Math.floor(minutes / 60)
   if (hours < 24) return `${hours}h ago`
   const days = Math.floor(hours / 24)
+  if (days === 1) return 'Yesterday'
   return `${days}d ago`
 }
 
 export function QuickStartPage() {
   const navigate = useNavigate()
+  const { canCreateTrees } = usePermissions()
+
   const [query, setQuery] = useState('')
   const [searchResults, setSearchResults] = useState<TreeListItem[]>([])
   const [isSearching, setIsSearching] = useState(false)
   const [showResults, setShowResults] = useState(false)
-  const [activeSessions, setActiveSessions] = useState<Session[]>([])
-  const [recentTrees, setRecentTrees] = useState<{ tree_id: string; name: string; lastUsed: string; tree_type?: string }[]>([])
-  const [isLoading, setIsLoading] = useState(true)
   const searchRef = useRef<HTMLDivElement>(null)
   const debounceRef = useRef<ReturnType<typeof setTimeout> | null>(null)
 
-  // Load sessions on mount
+  const [trees, setTrees] = useState<TreeListItem[]>([])
+  const [activeSessions, setActiveSessions] = useState<Session[]>([])
+  const [allSessions, setAllSessions] = useState<Session[]>([])
+  const [isLoading, setIsLoading] = useState(true)
+
+  const [activeFilter, setActiveFilter] = useState('all')
+
+  // Load data on mount
   useEffect(() => {
     async function loadData() {
       try {
-        const [active, recent] = await Promise.all([
+        const [treeList, active, recent] = await Promise.all([
+          treesApi.list({ sort_by: 'updated_at' }),
           sessionsApi.list({ completed: false, size: 5 }),
           sessionsApi.list({ size: 10 }),
         ])
-        setActiveSessions(active.slice(0, 3))
-
-        // Deduplicate recent sessions by tree_id, max 5
-        const seen = new Set<string>()
-        const deduped: { tree_id: string; name: string; lastUsed: string; tree_type?: string }[] = []
-        for (const s of recent) {
-          if (!seen.has(s.tree_id) && deduped.length < 5) {
-            seen.add(s.tree_id)
-            deduped.push({
-              tree_id: s.tree_id,
-              name: s.tree_snapshot?.name || 'Unnamed Tree',
-              lastUsed: s.started_at,
-              tree_type: s.tree_snapshot?.tree_type,
-            })
-          }
-        }
-        setRecentTrees(deduped)
+        setTrees(treeList)
+        setActiveSessions(active)
+        setAllSessions(recent)
       } catch (err) {
-        console.error('Failed to load sessions:', err)
+        console.error('Failed to load dashboard data:', err)
       } finally {
         setIsLoading(false)
       }
@@ -70,31 +69,25 @@ export function QuickStartPage() {
   // Debounced search
   useEffect(() => {
     if (debounceRef.current) clearTimeout(debounceRef.current)
-
     if (query.length < 2) {
       setSearchResults([])
       setShowResults(false)
       setIsSearching(false)
       return
     }
-
     setIsSearching(true)
     setShowResults(true)
     debounceRef.current = setTimeout(async () => {
       try {
         const results = await treesApi.search(query, 8)
         setSearchResults(results)
-      } catch (err) {
-        console.error('Search failed:', err)
+      } catch {
         setSearchResults([])
       } finally {
         setIsSearching(false)
       }
     }, 300)
-
-    return () => {
-      if (debounceRef.current) clearTimeout(debounceRef.current)
-    }
+    return () => { if (debounceRef.current) clearTimeout(debounceRef.current) }
   }, [query])
 
   // Close dropdown on outside click
@@ -108,213 +101,154 @@ export function QuickStartPage() {
     return () => document.removeEventListener('mousedown', handleClick)
   }, [])
 
+  // Compute stats
+  const totalTrees = trees.length
+  const openSessions = activeSessions.length
+  const todaySessions = allSessions.filter(s => {
+    const d = new Date(s.started_at)
+    const now = new Date()
+    return d.toDateString() === now.toDateString()
+  }).length
+  const completedSessions = allSessions.filter(s => s.completed_at).length
+
+  // Filter trees
+  const filteredTrees = activeFilter === 'all'
+    ? trees
+    : activeFilter === 'recent'
+      ? trees.slice(0, 10)
+      : trees
+
+  // Map sessions for SessionsPanel
+  const recentSessionItems = allSessions.slice(0, 5).map(s => ({
+    id: s.id,
+    treeName: s.tree_snapshot?.name || 'Unknown',
+    status: (s.completed_at ? 'completed' : 'in_progress') as 'completed' | 'in_progress',
+    ticketNumber: s.ticket_number || undefined,
+    timeAgo: timeAgo(s.started_at),
+  }))
+
+  const filters = [
+    { id: 'all', label: 'All' },
+    { id: 'recent', label: 'Recently Used' },
+    { id: 'my', label: 'My Flows' },
+    { id: 'team', label: 'Team Flows' },
+  ]
+
   return (
-    <div className="container mx-auto px-4 py-12">
-      {/* Hero Section */}
-      <div className="mb-16 text-center max-w-4xl mx-auto">
-        {/* Badge */}
-        <div className="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-white/5 border border-white/10 mb-8">
-          <Sparkles className="w-4 h-4 text-white/50" />
-          <span className="text-sm text-white/70 font-medium">DECISION TREE PLATFORM</span>
+    <div className="p-6 space-y-6">
+      {/* Page Header */}
+      <div className="flex items-start justify-between">
+        <div>
+          <h1 className="font-heading text-[1.375rem] font-bold tracking-tight text-foreground">
+            Dashboard
+          </h1>
+          <p className="mt-1 text-sm text-muted-foreground">
+            Welcome back. Here&apos;s what&apos;s happening with your flows.
+          </p>
         </div>
-
-        {/* Main heading */}
-        <h1 className="text-4xl md:text-6xl font-bold text-white mb-6 tracking-tight leading-tight">
-          What are you<br />
-          <span className="text-white/60">troubleshooting?</span>
-        </h1>
-
-        {/* Description */}
-        <p className="text-lg text-white/40 mb-10 max-w-2xl mx-auto leading-relaxed">
-          Search our library of proven flows or continue where you left off
-        </p>
-
-        {/* Search Bar */}
-        <div ref={searchRef} className="relative max-w-2xl mx-auto group">
-          <div className="absolute inset-0 bg-white/5 rounded-2xl blur-2xl opacity-0 group-hover:opacity-100 transition-opacity" />
-          <div className="relative glass-card rounded-2xl p-1">
-            <div className="flex items-center bg-black/50 rounded-xl">
-              <Search className="ml-5 w-5 h-5 text-white/40" />
-              <input
-                type="text"
-                autoFocus
-                value={query}
-                onChange={(e) => setQuery(e.target.value)}
-                onFocus={() => query.length >= 2 && setShowResults(true)}
-                placeholder="Paste ticket subject or search for a flow..."
-                className="flex-1 bg-transparent py-4 px-4 text-white placeholder:text-white/30 focus:outline-none"
-              />
-              {isSearching && (
-                <Loader2 className="mr-4 h-5 w-5 animate-spin text-white/30" />
-              )}
-            </div>
-          </div>
-
-          {/* Search Results Dropdown */}
-          {showResults && (
-            <div className="absolute z-10 mt-2 w-full glass-card rounded-2xl shadow-[0_0_40px_rgba(0,0,0,0.5)] overflow-hidden">
-              {isSearching ? (
-                <div className="flex items-center justify-center py-8">
-                  <Loader2 className="h-5 w-5 animate-spin text-white/40" />
-                </div>
-              ) : searchResults.length === 0 ? (
-                <div className="px-4 py-8 text-center text-sm text-white/40">
-                  No results found
-                </div>
-              ) : (
-                <ul className="max-h-80 overflow-y-auto py-1">
-                  {searchResults.map((tree) => (
-                    <li key={tree.id}>
-                      <button
-                        onClick={() => navigate(getTreeNavigatePath(tree.id, tree.tree_type))}
-                        className="w-full px-5 py-3.5 text-left transition-all hover:bg-white/[0.06]"
-                      >
-                        <div className="text-sm font-medium text-white">
-                          {tree.name}
-                        </div>
-                        {tree.description && (
-                          <div className="mt-0.5 line-clamp-1 text-xs text-white/40">
-                            {tree.description}
-                          </div>
-                        )}
-                      </button>
-                    </li>
-                  ))}
-                </ul>
-              )}
-            </div>
+        <div className="flex items-center gap-2">
+          {canCreateTrees && (
+            <Link
+              to="/trees/new"
+              className="flex items-center gap-2 rounded-lg bg-gradient-brand px-4 py-2 text-sm font-semibold text-white shadow-lg shadow-primary/20 hover:opacity-90 transition-opacity"
+            >
+              <Plus size={16} />
+              Create Flow
+            </Link>
           )}
         </div>
       </div>
 
-      {/* Continue Session Section */}
-      {activeSessions.length > 0 && (
-        <div className="mx-auto max-w-4xl mb-12">
-          <div className="flex items-center justify-between mb-6">
-            <h2 className="text-2xl font-bold text-white">Active Sessions</h2>
-          </div>
+      {/* Quick Stats */}
+      <QuickStats
+        stats={[
+          { label: 'Active Flows', value: totalTrees, gradient: true },
+          { label: 'Sessions Today', value: todaySessions, color: '#f59e0b' },
+          { label: 'Open Sessions', value: openSessions, meta: `${completedSessions} completed` },
+          { label: 'Docs Generated', value: completedSessions },
+        ]}
+      />
 
-          {/* Primary active session — Bright Glow card */}
-          <div className="glass-card-glow backdrop-blur-xl rounded-2xl p-8 mb-4">
-            <div className="flex items-start justify-between">
-              <div className="flex items-center gap-3 mb-3">
-                <div className="w-12 h-12 rounded-xl bg-white/15 border border-white/30 flex items-center justify-center">
-                  <Play className="w-6 h-6 text-white/50" />
-                </div>
-                <div>
-                  <div className="text-xs text-white/70 font-semibold uppercase tracking-wider mb-1">
-                    Active Session
-                  </div>
-                  <h3 className="text-xl font-bold text-white">
-                    {activeSessions[0].tree_snapshot?.name || 'Unnamed Tree'}
-                  </h3>
-                </div>
+      {/* Filters */}
+      <FiltersBar filters={filters} activeFilter={activeFilter} onFilterChange={setActiveFilter} />
+
+      {/* Search (inline, not hero) */}
+      <div ref={searchRef} className="relative">
+        <Search size={16} className="absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground" />
+        <input
+          type="text"
+          value={query}
+          onChange={(e) => setQuery(e.target.value)}
+          onFocus={() => query.length >= 2 && setShowResults(true)}
+          placeholder="Search flows, sessions, tags…"
+          className="w-full rounded-lg border border-border bg-card py-2.5 pl-9 pr-4 text-sm text-foreground placeholder:text-muted-foreground focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/20"
+        />
+        {showResults && (
+          <div className="absolute z-10 mt-1 w-full rounded-lg border border-border bg-card shadow-xl overflow-hidden">
+            {isSearching ? (
+              <div className="flex items-center justify-center py-6">
+                <Loader2 className="h-5 w-5 animate-spin text-muted-foreground" />
               </div>
-              <button
-                onClick={() =>
-                  navigate(getTreeNavigatePath(activeSessions[0].tree_id, activeSessions[0].tree_snapshot?.tree_type), {
-                    state: { sessionId: activeSessions[0].id },
-                  })
-                }
-                className="px-5 py-2.5 bg-white text-black rounded-xl font-semibold hover:bg-white/90 transition-all hover:scale-105"
-              >
-                Continue
-              </button>
-            </div>
-            <p className="text-sm text-white/50 mt-1">
-              {[activeSessions[0].ticket_number, activeSessions[0].client_name]
-                .filter(Boolean)
-                .join(' \u2022 ')}
-              {activeSessions[0].started_at && ` \u2022 Started ${timeAgo(activeSessions[0].started_at)}`}
-            </p>
-          </div>
-
-          {/* Additional active sessions */}
-          {activeSessions.length > 1 && (
-            <div className="grid gap-3 sm:grid-cols-2">
-              {activeSessions.slice(1).map((session) => (
-                <button
-                  key={session.id}
-                  onClick={() =>
-                    navigate(getTreeNavigatePath(session.tree_id, session.tree_snapshot?.tree_type), {
-                      state: { sessionId: session.id },
-                    })
-                  }
-                  className="glass-card hover:glass-card-hover rounded-2xl p-5 text-left transition-all hover:scale-[1.02] cursor-pointer"
-                >
-                  <div className="flex items-start justify-between gap-2">
-                    <div className="min-w-0 flex-1">
-                      <div className="truncate text-sm font-bold text-white">
-                        {session.tree_snapshot?.name || 'Unnamed Tree'}
-                      </div>
-                      {(session.ticket_number || session.client_name) && (
-                        <div className="mt-1 truncate text-xs text-white/40">
-                          {[session.ticket_number, session.client_name]
-                            .filter(Boolean)
-                            .join(' - ')}
-                        </div>
+            ) : searchResults.length === 0 ? (
+              <div className="px-4 py-6 text-center text-sm text-muted-foreground">No results found</div>
+            ) : (
+              <ul className="max-h-72 overflow-y-auto py-1">
+                {searchResults.map((tree) => (
+                  <li key={tree.id}>
+                    <button
+                      onClick={() => navigate(getTreeNavigatePath(tree.id, tree.tree_type))}
+                      className="w-full px-4 py-3 text-left transition-colors hover:bg-accent"
+                    >
+                      <div className="text-sm font-medium text-foreground">{tree.name}</div>
+                      {tree.description && (
+                        <div className="mt-0.5 line-clamp-1 text-xs text-muted-foreground">{tree.description}</div>
                       )}
-                    </div>
-                    <Play className="mt-0.5 h-4 w-4 flex-shrink-0 text-white/50" />
-                  </div>
-                  <div className="mt-3 flex items-center gap-1.5 text-xs text-white/30">
-                    <Clock className="h-3.5 w-3.5" />
-                    <span>{timeAgo(session.started_at)}</span>
-                  </div>
-                </button>
-              ))}
-            </div>
-          )}
-        </div>
-      )}
+                    </button>
+                  </li>
+                ))}
+              </ul>
+            )}
+          </div>
+        )}
+      </div>
 
-      {/* Recent Trees Section */}
-      {!isLoading && recentTrees.length > 0 && (
-        <div className="mx-auto max-w-4xl mb-12">
-          <div className="flex items-center justify-between mb-6">
-            <h2 className="text-2xl font-bold text-white">Recent Flows</h2>
+      {/* Recent Sessions */}
+      <SessionsPanel sessions={recentSessionItems} delay={150} />
+
+      {/* Tree/Flow List */}
+      {isLoading ? (
+        <div className="flex justify-center py-12">
+          <Loader2 className="h-6 w-6 animate-spin text-muted-foreground" />
+        </div>
+      ) : (
+        <SectionGroup
+          title="All Flows"
+          count={filteredTrees.length}
+          delay={200}
+        >
+          {filteredTrees.slice(0, 20).map(tree => (
+            <TreeListItemComponent
+              key={tree.id}
+              id={tree.id}
+              name={tree.name}
+              description={tree.description}
+              treeType={tree.tree_type || 'troubleshooting'}
+              category={tree.category_info ? { name: tree.category_info.name, color: undefined } : null}
+              tags={tree.tags}
+              usageCount={tree.usage_count}
+              updatedAt={tree.updated_at}
+            />
+          ))}
+          {filteredTrees.length > 20 && (
             <Link
               to="/trees"
-              className="text-sm text-white/60 hover:text-white font-medium transition-colors"
+              className="block rounded-lg border border-border bg-card px-4 py-3 text-center text-sm text-muted-foreground hover:text-foreground hover:border-border/80 transition-colors"
             >
-              View all
+              View all {filteredTrees.length} flows →
             </Link>
-          </div>
-          <div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
-            {recentTrees.map((tree) => (
-              <button
-                key={tree.tree_id}
-                onClick={() => navigate(getTreeNavigatePath(tree.tree_id, tree.tree_type))}
-                className="glass-card hover:glass-card-hover rounded-2xl p-5 text-left transition-all hover:scale-[1.02] cursor-pointer"
-              >
-                <div className="flex items-start justify-between mb-3">
-                  <div className="w-10 h-10 rounded-xl bg-white/5 border border-white/10 flex items-center justify-center">
-                    <Search className="w-5 h-5 text-white/40" />
-                  </div>
-                </div>
-                <div className="truncate text-sm font-bold text-white mb-2">
-                  {tree.name}
-                </div>
-                <div className="flex items-center gap-1.5 text-xs text-white/30">
-                  <Clock className="h-3.5 w-3.5" />
-                  <span>Last used {timeAgo(tree.lastUsed)}</span>
-                </div>
-              </button>
-            ))}
-          </div>
-        </div>
+          )}
+        </SectionGroup>
       )}
-
-      {/* Footer */}
-      <div className="mx-auto max-w-4xl text-center">
-        <Link
-          to="/trees"
-          className="inline-flex items-center gap-2 px-6 py-3 bg-white/10 border border-white/20 text-white font-medium rounded-xl hover:bg-white/20 transition-all"
-        >
-          Browse All Flows
-          <ArrowRight className="h-4 w-4" />
-        </Link>
-      </div>
     </div>
   )
 }
diff --git a/frontend/src/pages/RegisterPage.tsx b/frontend/src/pages/RegisterPage.tsx
index 179bc0e0..263a2c96 100644
--- a/frontend/src/pages/RegisterPage.tsx
+++ b/frontend/src/pages/RegisterPage.tsx
@@ -87,19 +87,19 @@ export function RegisterPage() {
               <BrandLogo size="lg" className="h-10 w-10 invert sm:h-12 sm:w-12" />
             </div>
           </div>
-          <h1 className="text-3xl font-bold text-white tracking-tight">
+          <h1 className="text-3xl font-bold font-heading text-foreground tracking-tight">
             ResolutionFlow
           </h1>
-          <p className="mt-2 text-base font-medium text-white/60 sm:mt-3 sm:text-lg">
+          <p className="mt-2 text-base font-medium text-muted-foreground sm:mt-3 sm:text-lg">
             Decision Tree Platform
           </p>
-          <p className="mt-1 text-sm text-white/40 sm:mt-2">
+          <p className="mt-1 text-sm text-muted-foreground sm:mt-2">
             Create your account
           </p>
         </div>
 
         <form onSubmit={handleSubmit} className="mt-8 space-y-6">
-          <div className="glass-card rounded-2xl p-6 space-y-4">
+          <div className="bg-card border border-border rounded-xl p-6 space-y-4">
             {(error || localError) && (
               <div className="rounded-xl border border-red-400/20 bg-red-400/10 p-3 text-sm text-red-400">
                 {localError || error}
@@ -107,7 +107,7 @@ export function RegisterPage() {
             )}
 
             <div>
-              <label htmlFor="inviteCode" className="block text-sm font-medium text-white">
+              <label htmlFor="inviteCode" className="block text-sm font-medium text-foreground">
                 Invite code
               </label>
               <input
@@ -121,18 +121,18 @@ export function RegisterPage() {
                 }}
                 onBlur={(e) => validateInviteCode(e.target.value)}
                 className={cn(
-                  'mt-1 block w-full rounded-xl border bg-black/50 px-3 py-2 font-mono tracking-wider',
-                  'text-white placeholder:text-white/30',
+                  'mt-1 block w-full rounded-xl border bg-card px-3 py-2 font-mono tracking-wider',
+                  'text-foreground placeholder:text-muted-foreground',
                   'focus:outline-none focus:ring-1',
                   inviteCodeStatus === 'valid' && 'border-emerald-400/50 focus:border-emerald-400 focus:ring-emerald-400/30',
                   inviteCodeStatus === 'invalid' && 'border-red-400/50 focus:border-red-400 focus:ring-red-400/30',
-                  inviteCodeStatus === 'idle' && 'border-white/10 focus:border-white/30 focus:ring-white/20',
-                  inviteCodeStatus === 'checking' && 'border-white/10 focus:border-white/30 focus:ring-white/20'
+                  inviteCodeStatus === 'idle' && 'border-border focus:border-primary focus:ring-primary/20',
+                  inviteCodeStatus === 'checking' && 'border-border focus:border-primary focus:ring-primary/20'
                 )}
                 placeholder="ABCD1234"
               />
               {inviteCodeStatus === 'checking' && (
-                <p className="mt-1 text-xs text-white/40">Validating...</p>
+                <p className="mt-1 text-xs text-muted-foreground">Validating...</p>
               )}
               {inviteCodeStatus === 'valid' && (
                 <p className="mt-1 text-xs text-emerald-400">{inviteCodeMessage}</p>
@@ -143,7 +143,7 @@ export function RegisterPage() {
             </div>
 
             <div>
-              <label htmlFor="name" className="block text-sm font-medium text-white">
+              <label htmlFor="name" className="block text-sm font-medium text-foreground">
                 Full name
               </label>
               <input
@@ -155,16 +155,16 @@ export function RegisterPage() {
                 value={name}
                 onChange={(e) => setName(e.target.value)}
                 className={cn(
-                  'mt-1 block w-full rounded-xl border border-white/10 bg-black/50 px-3 py-2',
-                  'text-white placeholder:text-white/30',
-                  'focus:border-white/30 focus:outline-none focus:ring-1 focus:ring-white/20'
+                  'mt-1 block w-full rounded-xl border border-border bg-card px-3 py-2',
+                  'text-foreground placeholder:text-muted-foreground',
+                  'focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/20'
                 )}
                 placeholder="John Smith"
               />
             </div>
 
             <div>
-              <label htmlFor="email" className="block text-sm font-medium text-white">
+              <label htmlFor="email" className="block text-sm font-medium text-foreground">
                 Email address
               </label>
               <input
@@ -176,16 +176,16 @@ export function RegisterPage() {
                 value={email}
                 onChange={(e) => setEmail(e.target.value)}
                 className={cn(
-                  'mt-1 block w-full rounded-xl border border-white/10 bg-black/50 px-3 py-2',
-                  'text-white placeholder:text-white/30',
-                  'focus:border-white/30 focus:outline-none focus:ring-1 focus:ring-white/20'
+                  'mt-1 block w-full rounded-xl border border-border bg-card px-3 py-2',
+                  'text-foreground placeholder:text-muted-foreground',
+                  'focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/20'
                 )}
                 placeholder="you@example.com"
               />
             </div>
 
             <div>
-              <label htmlFor="password" className="block text-sm font-medium text-white">
+              <label htmlFor="password" className="block text-sm font-medium text-foreground">
                 Password
               </label>
               <PasswordInput
@@ -196,19 +196,19 @@ export function RegisterPage() {
                 value={password}
                 onChange={(e) => setPassword(e.target.value)}
                 className={cn(
-                  'mt-1 block w-full rounded-xl border border-white/10 bg-black/50 px-3 py-2',
-                  'text-white placeholder:text-white/30',
-                  'focus:border-white/30 focus:outline-none focus:ring-1 focus:ring-white/20'
+                  'mt-1 block w-full rounded-xl border border-border bg-card px-3 py-2',
+                  'text-foreground placeholder:text-muted-foreground',
+                  'focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/20'
                 )}
                 placeholder="••••••••••"
               />
-              <p className="mt-1 text-xs text-white/30">
+              <p className="mt-1 text-xs text-muted-foreground">
                 Must be at least 10 characters
               </p>
             </div>
 
             <div>
-              <label htmlFor="confirmPassword" className="block text-sm font-medium text-white">
+              <label htmlFor="confirmPassword" className="block text-sm font-medium text-foreground">
                 Confirm password
               </label>
               <PasswordInput
@@ -219,9 +219,9 @@ export function RegisterPage() {
                 value={confirmPassword}
                 onChange={(e) => setConfirmPassword(e.target.value)}
                 className={cn(
-                  'mt-1 block w-full rounded-xl border border-white/10 bg-black/50 px-3 py-2',
-                  'text-white placeholder:text-white/30',
-                  'focus:border-white/30 focus:outline-none focus:ring-1 focus:ring-white/20'
+                  'mt-1 block w-full rounded-xl border border-border bg-card px-3 py-2',
+                  'text-foreground placeholder:text-muted-foreground',
+                  'focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/20'
                 )}
                 placeholder="••••••••••"
               />
@@ -232,8 +232,8 @@ export function RegisterPage() {
               disabled={isLoading}
               className={cn(
                 'w-full rounded-xl px-4 py-2.5 text-sm font-semibold btn-press',
-                'bg-white text-black hover:bg-white/90',
-                'focus:outline-none focus:ring-2 focus:ring-white/30 focus:ring-offset-2 focus:ring-offset-black',
+                'bg-gradient-brand text-white shadow-lg shadow-primary/20 hover:opacity-90',
+                'focus:outline-none focus:ring-2 focus:ring-primary/30 focus:ring-offset-2 focus:ring-offset-black',
                 'disabled:cursor-not-allowed disabled:opacity-50',
                 'transition-all'
               )}
@@ -242,9 +242,9 @@ export function RegisterPage() {
             </button>
           </div>
 
-          <p className="text-center text-sm text-white/40">
+          <p className="text-center text-sm text-muted-foreground">
             Already have an account?{' '}
-            <Link to="/login" className="font-medium text-white hover:underline">
+            <Link to="/login" className="font-medium text-foreground hover:underline">
               Sign in
             </Link>
           </p>
diff --git a/frontend/src/pages/ResetPasswordPage.tsx b/frontend/src/pages/ResetPasswordPage.tsx
index 248e90c3..b083d4aa 100644
--- a/frontend/src/pages/ResetPasswordPage.tsx
+++ b/frontend/src/pages/ResetPasswordPage.tsx
@@ -82,24 +82,24 @@ export function ResetPasswordPage() {
               <BrandLogo size="lg" className="h-10 w-10 invert sm:h-12 sm:w-12" />
             </div>
           </div>
-          <h1 className="text-3xl font-bold text-white tracking-tight">
+          <h1 className="text-3xl font-bold font-heading text-foreground tracking-tight">
             Reset Password
           </h1>
         </div>
 
         {verifying ? (
-          <div className="glass-card rounded-2xl p-6 text-center">
-            <p className="text-white/60">Verifying reset link...</p>
+          <div className="bg-card border border-border rounded-xl p-6 text-center">
+            <p className="text-muted-foreground">Verifying reset link...</p>
           </div>
         ) : !token || !valid ? (
-          <div className="glass-card rounded-2xl p-6 space-y-4">
+          <div className="bg-card border border-border rounded-xl p-6 space-y-4">
             <div className="rounded-xl border border-red-400/20 bg-red-400/10 p-4 text-sm text-red-400">
               This reset link is invalid or has expired. Please request a new one.
             </div>
             <div className="text-center">
               <Link
                 to="/forgot-password"
-                className="text-sm text-white/60 hover:text-white transition-colors"
+                className="text-sm text-muted-foreground hover:text-foreground transition-colors"
               >
                 Request new reset link
               </Link>
@@ -107,10 +107,10 @@ export function ResetPasswordPage() {
           </div>
         ) : (
           <form onSubmit={handleSubmit} className="mt-8 space-y-6">
-            <div className="glass-card rounded-2xl p-6 space-y-4">
+            <div className="bg-card border border-border rounded-xl p-6 space-y-4">
               {email && (
-                <p className="text-sm text-white/60">
-                  Resetting password for <span className="font-medium text-white">{email}</span>
+                <p className="text-sm text-muted-foreground">
+                  Resetting password for <span className="font-medium text-foreground">{email}</span>
                 </p>
               )}
 
@@ -121,7 +121,7 @@ export function ResetPasswordPage() {
               )}
 
               <div>
-                <label htmlFor="new-password" className="mb-1 block text-sm font-medium text-white">
+                <label htmlFor="new-password" className="mb-1 block text-sm font-medium text-foreground">
                   New Password
                 </label>
                 <PasswordInput
@@ -131,20 +131,20 @@ export function ResetPasswordPage() {
                   value={newPassword}
                   onChange={(e) => setNewPassword(e.target.value)}
                   className={cn(
-                    'block w-full rounded-xl border border-white/10 bg-black/50 px-3 py-2',
-                    'text-white placeholder:text-white/30',
-                    'focus:border-white/30 focus:outline-none focus:ring-1 focus:ring-white/20',
+                    'block w-full rounded-xl border border-border bg-card px-3 py-2',
+                    'text-foreground placeholder:text-muted-foreground',
+                    'focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/20',
                     'transition-colors'
                   )}
                   placeholder="At least 10 characters"
                 />
-                <p className="mt-1 text-xs text-white/40">
+                <p className="mt-1 text-xs text-muted-foreground">
                   Must include uppercase, lowercase, and a digit.
                 </p>
               </div>
 
               <div>
-                <label htmlFor="confirm-password" className="mb-1 block text-sm font-medium text-white">
+                <label htmlFor="confirm-password" className="mb-1 block text-sm font-medium text-foreground">
                   Confirm New Password
                 </label>
                 <PasswordInput
@@ -154,9 +154,9 @@ export function ResetPasswordPage() {
                   value={confirmPassword}
                   onChange={(e) => setConfirmPassword(e.target.value)}
                   className={cn(
-                    'block w-full rounded-xl border border-white/10 bg-black/50 px-3 py-2',
-                    'text-white placeholder:text-white/30',
-                    'focus:border-white/30 focus:outline-none focus:ring-1 focus:ring-white/20',
+                    'block w-full rounded-xl border border-border bg-card px-3 py-2',
+                    'text-foreground placeholder:text-muted-foreground',
+                    'focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/20',
                     'transition-colors'
                   )}
                 />
@@ -167,8 +167,8 @@ export function ResetPasswordPage() {
                 disabled={isLoading}
                 className={cn(
                   'w-full rounded-xl px-4 py-2.5 text-sm font-semibold btn-press',
-                  'bg-white text-black hover:bg-white/90',
-                  'focus:outline-none focus:ring-2 focus:ring-white/30 focus:ring-offset-2 focus:ring-offset-black',
+                  'bg-gradient-brand text-white shadow-lg shadow-primary/20 hover:opacity-90',
+                  'focus:outline-none focus:ring-2 focus:ring-primary/30 focus:ring-offset-2 focus:ring-offset-black',
                   'disabled:cursor-not-allowed disabled:opacity-50',
                   'transition-all'
                 )}
diff --git a/frontend/src/pages/SessionDetailPage.tsx b/frontend/src/pages/SessionDetailPage.tsx
index 0f1cd966..d6bc7785 100644
--- a/frontend/src/pages/SessionDetailPage.tsx
+++ b/frontend/src/pages/SessionDetailPage.tsx
@@ -289,7 +289,7 @@ export function SessionDetailPage() {
   if (isLoading) {
     return (
       <div className="flex h-64 items-center justify-center">
-        <div className="h-8 w-8 animate-spin rounded-full border-4 border-white/20 border-t-white" />
+        <div className="h-8 w-8 animate-spin rounded-full border-4 border-border border-t-primary" />
       </div>
     )
   }
@@ -302,7 +302,7 @@ export function SessionDetailPage() {
         </div>
         <button
           onClick={() => navigate('/sessions')}
-          className="mt-4 text-white hover:underline"
+          className="mt-4 text-foreground hover:underline"
         >
           Back to sessions
         </button>
@@ -318,14 +318,14 @@ export function SessionDetailPage() {
           <div>
             <button
               onClick={() => navigate('/sessions')}
-              className="mb-2 text-sm text-white/40 hover:text-white"
+              className="mb-2 text-sm text-muted-foreground hover:text-foreground"
             >
               ← Back to sessions
             </button>
-            <h1 className="text-2xl font-bold text-white sm:text-3xl">
+            <h1 className="text-2xl font-heading font-bold text-foreground sm:text-3xl">
               {session.ticket_number || 'Session Details'}
             </h1>
-            <div className="mt-2 flex items-center gap-4 text-sm text-white/40">
+            <div className="mt-2 flex items-center gap-4 text-sm text-muted-foreground">
               <span
                 className={cn(
                   'flex items-center gap-1',
@@ -342,23 +342,23 @@ export function SessionDetailPage() {
               </span>
               {session.client_name && <span>Client: {session.client_name}</span>}
               {session.completed_at && (
-                <span className="rounded-full bg-white/10 px-2 py-0.5 text-xs text-white">
+                <span className="rounded-full bg-accent px-2 py-0.5 text-xs text-foreground">
                   Duration: {getTotalDuration()}
                 </span>
               )}
               {outcomeLabel && (
-                <span className="rounded-full bg-white/10 px-2 py-0.5 text-xs text-white">
+                <span className="rounded-full bg-accent px-2 py-0.5 text-xs text-foreground">
                   Outcome: {outcomeLabel}
                 </span>
               )}
             </div>
             {session.outcome_notes && (
-              <p className="mt-2 text-sm text-white/60">Outcome Notes: {session.outcome_notes}</p>
+              <p className="mt-2 text-sm text-muted-foreground">Outcome Notes: {session.outcome_notes}</p>
             )}
             {session.next_steps && (
               <div className="mt-2">
-                <span className="text-sm text-white/40">Next Steps:</span>
-                <p className="mt-0.5 text-sm text-white/60 whitespace-pre-wrap">{session.next_steps}</p>
+                <span className="text-sm text-muted-foreground">Next Steps:</span>
+                <p className="mt-0.5 text-sm text-muted-foreground whitespace-pre-wrap">{session.next_steps}</p>
               </div>
             )}
           </div>
@@ -384,8 +384,8 @@ export function SessionDetailPage() {
             <button
               onClick={handleCopyForTicket}
               className={cn(
-                'flex items-center gap-2 rounded-md bg-white px-4 py-2 text-sm font-medium text-black',
-                'hover:bg-white/90'
+                'flex items-center gap-2 rounded-md bg-gradient-brand px-4 py-2 text-sm font-medium text-white shadow-lg shadow-primary/20',
+                'hover:opacity-90'
               )}
             >
               {copiedPsa ? <Check className="h-4 w-4" /> : <Copy className="h-4 w-4" />}
@@ -399,8 +399,8 @@ export function SessionDetailPage() {
                 onChange={(e) => setExportFormat(e.target.value as typeof exportFormat)}
                 aria-label="Export format"
                 className={cn(
-                  'w-full rounded-md border border-white/10 bg-black/50 px-3 py-2 text-sm text-white sm:w-auto',
-                  'focus:border-white/30 focus:outline-none focus:ring-1 focus:ring-white/20'
+                  'w-full rounded-md border border-border bg-card px-3 py-2 text-sm text-foreground sm:w-auto',
+                  'focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/20'
                 )}
               >
                 <option value="markdown">Markdown</option>
@@ -414,8 +414,8 @@ export function SessionDetailPage() {
                   onChange={(e) => setMaxStepIndex(e.target.value ? Number(e.target.value) : null)}
                   aria-label="Export through step"
                   className={cn(
-                    'rounded-md border border-white/10 bg-black/50 px-3 py-2 text-sm text-white',
-                    'focus:border-white/30 focus:outline-none focus:ring-1 focus:ring-white/20'
+                    'rounded-md border border-border bg-card px-3 py-2 text-sm text-foreground',
+                    'focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/20'
                   )}
                 >
                   <option value="">All steps</option>
@@ -431,8 +431,8 @@ export function SessionDetailPage() {
                 onChange={(e) => setDetailLevel(e.target.value as 'standard' | 'full')}
                 aria-label="Detail level"
                 className={cn(
-                  'rounded-md border border-white/10 bg-black/50 px-3 py-2 text-sm text-white',
-                  'focus:border-white/30 focus:outline-none focus:ring-1 focus:ring-white/20'
+                  'rounded-md border border-border bg-card px-3 py-2 text-sm text-foreground',
+                  'focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/20'
                 )}
               >
                 <option value="standard">Standard</option>
@@ -443,8 +443,8 @@ export function SessionDetailPage() {
                 disabled={isExporting}
                 title="Copy to clipboard"
                 className={cn(
-                  'rounded-md border border-white/10 bg-transparent p-2 text-white/60',
-                  'hover:bg-white/10 hover:text-white disabled:opacity-50'
+                  'rounded-md border border-border bg-card p-2 text-muted-foreground',
+                  'hover:bg-accent hover:text-foreground disabled:opacity-50'
                 )}
               >
                 {copied ? <Check className="h-4 w-4 text-emerald-400" /> : <Copy className="h-4 w-4" />}
@@ -453,8 +453,8 @@ export function SessionDetailPage() {
                 onClick={handlePreview}
                 disabled={isExporting}
                 className={cn(
-                  'flex items-center gap-2 rounded-md bg-white px-4 py-2 text-sm font-medium text-black',
-                  'hover:bg-white/90 disabled:opacity-50'
+                  'flex items-center gap-2 rounded-md bg-gradient-brand px-4 py-2 text-sm font-medium text-white shadow-lg shadow-primary/20',
+                  'hover:opacity-90 disabled:opacity-50'
                 )}
               >
                 <Eye className="h-4 w-4" />
diff --git a/frontend/src/pages/SessionHistoryPage.tsx b/frontend/src/pages/SessionHistoryPage.tsx
index 556808f8..d4be75a8 100644
--- a/frontend/src/pages/SessionHistoryPage.tsx
+++ b/frontend/src/pages/SessionHistoryPage.tsx
@@ -151,14 +151,14 @@ export function SessionHistoryPage() {
   return (
     <div className="container mx-auto px-4 py-6 sm:px-6 sm:py-8">
       <div className="mb-8">
-        <h1 className="text-2xl font-bold text-white sm:text-3xl">Session History</h1>
-        <p className="mt-2 text-white/40">
+        <h1 className="text-2xl font-heading font-bold text-foreground sm:text-3xl">Session History</h1>
+        <p className="mt-2 text-muted-foreground">
           Search and filter your troubleshooting sessions
         </p>
       </div>
 
       {/* Filter Tabs */}
-      <div className="mb-6 flex gap-2 border-b border-white/[0.06]">
+      <div className="mb-6 flex gap-2 border-b border-border">
         {(['all', 'active', 'completed'] as const).map((tab) => (
           <button
             key={tab}
@@ -166,8 +166,8 @@ export function SessionHistoryPage() {
             className={cn(
               'px-4 py-2 text-sm font-medium transition-colors',
               filter === tab
-                ? 'border-b-2 border-white text-white'
-                : 'text-white/40 hover:text-white'
+                ? 'border-b-2 border-primary text-foreground'
+                : 'text-muted-foreground hover:text-foreground'
             )}
           >
             {tab.charAt(0).toUpperCase() + tab.slice(1)}
@@ -188,22 +188,22 @@ export function SessionHistoryPage() {
       {/* Loading State */}
       {isLoading ? (
         <div className="flex justify-center py-12">
-          <div className="h-8 w-8 animate-spin rounded-full border-4 border-white/20 border-t-white" />
+          <div className="h-8 w-8 animate-spin rounded-full border-4 border-border border-t-primary" />
         </div>
       ) : sessions.length === 0 ? (
-        <div className="py-12 text-center text-white/40">
+        <div className="py-12 text-center text-muted-foreground">
           No sessions found.{' '}
           {filters.ticketNumber || filters.clientName || filters.treeName || filters.dateRange?.from ? (
             <button
               onClick={handleClearFilters}
-              className="text-white hover:underline"
+              className="text-foreground hover:underline"
             >
               Clear filters
             </button>
           ) : (
             <button
               onClick={() => navigate('/trees')}
-              className="text-white hover:underline"
+              className="text-foreground hover:underline"
             >
               Start a new session
             </button>
@@ -214,7 +214,7 @@ export function SessionHistoryPage() {
           {sessions.map((session) => (
             <div
               key={session.id}
-              className="glass-card rounded-2xl p-4 transition-all hover:glass-card-hover"
+              className="bg-card border border-border rounded-xl p-4 transition-all hover:bg-accent/50"
             >
               <div className="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
                 <div className="flex-1">
@@ -226,11 +226,11 @@ export function SessionHistoryPage() {
                         session.completed_at ? 'bg-green-500' : 'bg-yellow-500'
                       )}
                     />
-                    <span className="font-medium text-white">
+                    <span className="font-medium text-foreground">
                       {session.ticket_number || 'No ticket'}
                     </span>
                     {session.client_name && (
-                      <span className="rounded-full bg-white/10 px-2.5 py-0.5 text-xs font-medium text-white">
+                      <span className="rounded-full bg-accent px-2.5 py-0.5 text-xs font-medium text-foreground">
                         {session.client_name}
                       </span>
                     )}
@@ -242,7 +242,7 @@ export function SessionHistoryPage() {
                           session.outcome === 'workaround' && 'bg-amber-500/20 text-amber-300',
                           session.outcome === 'escalated' && 'bg-blue-500/20 text-blue-300',
                           session.outcome === 'unresolved' && 'bg-rose-500/20 text-rose-300',
-                          !session.outcome && 'bg-white/10 text-white/70'
+                          !session.outcome && 'bg-accent text-muted-foreground'
                         )}
                       >
                         {formatOutcomeLabel(session.outcome)}
@@ -251,12 +251,12 @@ export function SessionHistoryPage() {
                   </div>
 
                   {/* Tree Name */}
-                  <p className="mt-1 text-sm text-white/40">
+                  <p className="mt-1 text-sm text-muted-foreground">
                     <span className="font-medium">Tree:</span> {getTreeName(session)}
                   </p>
 
                   {/* Timestamps */}
-                  <p className="mt-1 text-sm text-white/40">
+                  <p className="mt-1 text-sm text-muted-foreground">
                     Started: {formatDate(session.started_at)}
                     {session.completed_at && (
                       <> · Completed: {formatDate(session.completed_at)}</>
@@ -264,7 +264,7 @@ export function SessionHistoryPage() {
                   </p>
 
                   {/* Stats */}
-                  <p className="mt-1 text-sm text-white/40">
+                  <p className="mt-1 text-sm text-muted-foreground">
                     {session.decisions.length} decision{session.decisions.length !== 1 ? 's' : ''} recorded
                     {session.scratchpad && session.scratchpad.trim() && (
                       <span> · Has notes</span>
@@ -277,8 +277,8 @@ export function SessionHistoryPage() {
                   <button
                     onClick={() => navigate(`/sessions/${session.id}`)}
                     className={cn(
-                      'rounded-md border border-white/10 px-3 py-2 text-sm font-medium text-white/60',
-                      'hover:bg-white/10 hover:text-white'
+                      'rounded-md border border-border px-3 py-2 text-sm font-medium text-muted-foreground',
+                      'hover:bg-accent hover:text-foreground'
                     )}
                   >
                     View Details
@@ -287,8 +287,8 @@ export function SessionHistoryPage() {
                     <button
                       onClick={() => navigate(getTreeNavigatePath(session.tree_id, session.tree_snapshot?.tree_type), { state: { sessionId: session.id } })}
                       className={cn(
-                        'rounded-md bg-white px-3 py-2 text-sm font-medium text-black',
-                        'hover:bg-white/90'
+                        'rounded-md bg-gradient-brand px-3 py-2 text-sm font-medium text-white shadow-lg shadow-primary/20',
+                        'hover:opacity-90'
                       )}
                     >
                       Resume
diff --git a/frontend/src/pages/SharedSessionPage.tsx b/frontend/src/pages/SharedSessionPage.tsx
index 7eeed622..10e518b1 100644
--- a/frontend/src/pages/SharedSessionPage.tsx
+++ b/frontend/src/pages/SharedSessionPage.tsx
@@ -53,16 +53,16 @@ function ErrorCard({ error }: { error: ErrorState }) {
   const Icon = iconMap[error.type]
 
   return (
-    <div className="flex min-h-screen items-center justify-center bg-black px-4">
-      <div className="glass-card w-full max-w-md rounded-2xl p-8 text-center">
-        <div className="mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-white/5">
-          <Icon className="h-8 w-8 text-white/40" />
+    <div className="flex min-h-screen items-center justify-center bg-background px-4">
+      <div className="bg-card border border-border w-full max-w-md rounded-xl p-8 text-center">
+        <div className="mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-accent">
+          <Icon className="h-8 w-8 text-muted-foreground" />
         </div>
-        <h1 className="mb-2 text-xl font-semibold text-white">{titleMap[error.type]}</h1>
-        <p className="mb-6 text-sm text-white/50">{error.message}</p>
+        <h1 className="mb-2 text-xl font-heading font-semibold text-foreground">{titleMap[error.type]}</h1>
+        <p className="mb-6 text-sm text-muted-foreground">{error.message}</p>
         <Link
           to="/"
-          className="inline-block rounded-lg bg-white px-6 py-2.5 text-sm font-medium text-black hover:bg-white/90"
+          className="inline-block rounded-lg bg-gradient-brand px-6 py-2.5 text-sm font-medium text-white shadow-lg shadow-primary/20 hover:opacity-90"
         >
           Go to ResolutionFlow
         </Link>
@@ -142,10 +142,10 @@ export function SharedSessionPage() {
 
   if (loading) {
     return (
-      <div className="flex min-h-screen items-center justify-center bg-black">
+      <div className="flex min-h-screen items-center justify-center bg-background">
         <div className="flex flex-col items-center gap-4">
-          <Loader2 className="h-8 w-8 animate-spin text-white/40" />
-          <p className="text-sm text-white/40">Loading shared session...</p>
+          <Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
+          <p className="text-sm text-muted-foreground">Loading shared session...</p>
         </div>
       </div>
     )
@@ -160,17 +160,17 @@ export function SharedSessionPage() {
   }
 
   return (
-    <div className="min-h-screen bg-black">
+    <div className="min-h-screen bg-background">
       {/* Minimal header */}
-      <header className="border-b border-white/[0.06] px-6 py-4">
+      <header className="border-b border-border px-6 py-4">
         <div className="mx-auto flex max-w-7xl items-center justify-between">
           <Link to="/" className="flex items-center gap-2">
             <BrandLogo size="sm" />
-            <span className="text-lg font-semibold text-white">ResolutionFlow</span>
+            <span className="text-lg font-heading font-semibold text-foreground">ResolutionFlow</span>
           </Link>
           <Link
             to="/login"
-            className="rounded-lg border border-white/10 px-4 py-2 text-sm text-white/60 hover:bg-white/10 hover:text-white"
+            className="rounded-lg border border-border px-4 py-2 text-sm text-muted-foreground hover:bg-accent hover:text-foreground"
           >
             Sign In
           </Link>
@@ -182,14 +182,14 @@ export function SharedSessionPage() {
         {/* Metadata section */}
         <div className="mb-8">
           {data.share_name && (
-            <h1 className="mb-2 text-2xl font-bold text-white">{data.share_name}</h1>
+            <h1 className="mb-2 text-2xl font-heading font-bold text-foreground">{data.share_name}</h1>
           )}
-          <p className="text-lg text-white/70">
-            <span className="text-white/40">Tree:</span> {data.tree_name}
+          <p className="text-lg text-muted-foreground">
+            <span className="text-muted-foreground">Tree:</span> {data.tree_name}
           </p>
 
           {(data.ticket_number || data.client_name) && (
-            <p className="mt-1 text-sm text-white/50">
+            <p className="mt-1 text-sm text-muted-foreground">
               {data.ticket_number && (
                 <span>Ticket: #{data.ticket_number}</span>
               )}
@@ -202,7 +202,7 @@ export function SharedSessionPage() {
             </p>
           )}
 
-          <div className="mt-2 flex flex-wrap items-center gap-x-4 gap-y-1 text-sm text-white/40">
+          <div className="mt-2 flex flex-wrap items-center gap-x-4 gap-y-1 text-sm text-muted-foreground">
             <span>Started: {formatDate(data.started_at)}</span>
             {data.completed_at && (
               <>
@@ -250,9 +250,9 @@ export function SharedSessionPage() {
       </main>
 
       {/* Footer */}
-      <footer className="py-8 text-center text-sm text-white/30">
+      <footer className="py-8 text-center text-sm text-muted-foreground">
         Powered by{' '}
-        <Link to="/" className="underline hover:text-white/50">
+        <Link to="/" className="underline hover:text-foreground">
           ResolutionFlow
         </Link>
       </footer>
diff --git a/frontend/src/pages/TreeEditorPage.tsx b/frontend/src/pages/TreeEditorPage.tsx
index 3ee1aed5..7afd3b62 100644
--- a/frontend/src/pages/TreeEditorPage.tsx
+++ b/frontend/src/pages/TreeEditorPage.tsx
@@ -345,7 +345,7 @@ export function TreeEditorPage() {
   if (isLoading) {
     return (
       <div className="flex h-64 items-center justify-center">
-        <div className="h-8 w-8 animate-spin rounded-full border-4 border-white/20 border-t-white" />
+        <div className="h-8 w-8 animate-spin rounded-full border-4 border-border border-t-foreground" />
       </div>
     )
   }
@@ -353,17 +353,17 @@ export function TreeEditorPage() {
   // Mobile gate: show read-only message
   if (isMobile) {
     return (
-      <div className="flex h-[calc(100vh-4rem)] flex-col items-center justify-center px-6 text-center">
-        <Monitor className="mb-4 h-12 w-12 text-white/50" />
-        <h2 className="mb-2 text-xl font-semibold text-white">Desktop Required</h2>
-        <p className="mb-6 max-w-sm text-sm text-white/40">
+      <div className="flex h-full flex-col items-center justify-center px-6 text-center">
+        <Monitor className="mb-4 h-12 w-12 text-muted-foreground" />
+        <h2 className="mb-2 text-xl font-heading font-semibold text-foreground">Desktop Required</h2>
+        <p className="mb-6 max-w-sm text-sm text-muted-foreground">
           The tree editor requires a larger screen for the best experience. Please open this page on a desktop or tablet in landscape mode.
         </p>
         <button
           onClick={() => navigate('/trees')}
           className={cn(
-            'rounded-md bg-white px-4 py-2 text-sm font-medium text-black',
-            'hover:bg-white/90'
+            'rounded-md bg-gradient-brand px-4 py-2 text-sm font-medium text-white shadow-lg shadow-primary/20',
+            'hover:opacity-90'
           )}
         >
           Back to Library
@@ -373,22 +373,22 @@ export function TreeEditorPage() {
   }
 
   return (
-    <div className="flex h-[calc(100vh-4rem)] flex-col">
+    <div className="flex h-full flex-col">
 
       {/* Draft Restore Prompt */}
       {showDraftPrompt && (
         <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/80 backdrop-blur-sm">
-          <div className="glass-card rounded-2xl w-full max-w-md p-6 shadow-lg">
-            <h2 className="mb-2 text-lg font-semibold text-white">Restore Draft?</h2>
-            <p className="mb-4 text-sm text-white/40">
+          <div className="bg-card border border-border rounded-xl w-full max-w-md p-6 shadow-lg">
+            <h2 className="mb-2 text-lg font-heading font-semibold text-foreground">Restore Draft?</h2>
+            <p className="mb-4 text-sm text-muted-foreground">
               You have an unsaved draft from a previous session. Would you like to restore it?
             </p>
             <div className="flex gap-2">
               <button
                 onClick={handleRestoreDraft}
                 className={cn(
-                  'flex-1 rounded-md bg-white px-4 py-2 text-sm font-medium text-black',
-                  'hover:bg-white/90'
+                  'flex-1 rounded-md bg-gradient-brand px-4 py-2 text-sm font-medium text-white shadow-lg shadow-primary/20',
+                  'hover:opacity-90'
                 )}
               >
                 Restore Draft
@@ -396,8 +396,8 @@ export function TreeEditorPage() {
               <button
                 onClick={handleDiscardDraft}
                 className={cn(
-                  'flex-1 rounded-md border border-white/10 px-4 py-2 text-sm font-medium text-white/60',
-                  'hover:bg-white/10 hover:text-white'
+                  'flex-1 rounded-md border border-border px-4 py-2 text-sm font-medium text-muted-foreground',
+                  'hover:bg-accent hover:text-foreground'
                 )}
               >
                 Start Fresh
@@ -410,17 +410,17 @@ export function TreeEditorPage() {
       {/* Unsaved Changes Dialog */}
       {blocker.state === 'blocked' && (
         <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/80 backdrop-blur-sm">
-          <div className="glass-card rounded-2xl w-full max-w-md p-6 shadow-lg">
-            <h2 className="mb-2 text-lg font-semibold text-white">Unsaved Changes</h2>
-            <p className="mb-4 text-sm text-white/40">
+          <div className="bg-card border border-border rounded-xl w-full max-w-md p-6 shadow-lg">
+            <h2 className="mb-2 text-lg font-heading font-semibold text-foreground">Unsaved Changes</h2>
+            <p className="mb-4 text-sm text-muted-foreground">
               You have unsaved changes. Are you sure you want to leave?
             </p>
             <div className="flex gap-2">
               <button
                 onClick={handleBlockerReset}
                 className={cn(
-                  'flex-1 rounded-md bg-white px-4 py-2 text-sm font-medium text-black',
-                  'hover:bg-white/90'
+                  'flex-1 rounded-md bg-gradient-brand px-4 py-2 text-sm font-medium text-white shadow-lg shadow-primary/20',
+                  'hover:opacity-90'
                 )}
               >
                 Stay
@@ -428,8 +428,8 @@ export function TreeEditorPage() {
               <button
                 onClick={handleBlockerProceed}
                 className={cn(
-                  'flex-1 rounded-md border border-white/10 px-4 py-2 text-sm font-medium text-red-400',
-                  'hover:bg-white/10'
+                  'flex-1 rounded-md border border-border px-4 py-2 text-sm font-medium text-red-400',
+                  'hover:bg-accent'
                 )}
               >
                 Leave Without Saving
@@ -440,27 +440,27 @@ export function TreeEditorPage() {
       )}
 
       {/* Toolbar */}
-      <div className="flex items-center justify-between border-b border-white/[0.06] bg-black px-4 py-2">
+      <div className="flex items-center justify-between border-b border-border bg-card px-4 py-2">
         <div className="flex items-center gap-4">
           <button
             onClick={() => navigate('/trees')}
-            className="text-sm text-white/50 hover:text-white"
+            className="text-sm text-muted-foreground hover:text-foreground"
           >
             ← Back to Library
           </button>
-          <h1 className="text-lg font-semibold text-white">
+          <h1 className="text-lg font-heading font-semibold text-foreground">
             {isEditMode ? 'Edit Tree' : 'Create New Tree'}
-            {name && <span className="ml-2 text-white/40">- {name}</span>}
+            {name && <span className="ml-2 text-muted-foreground">- {name}</span>}
           </h1>
           <div className="flex items-center gap-2">
             {treeStatus === 'draft' && (
-              <span className="inline-flex items-center gap-1 rounded-full bg-yellow-100 px-2 py-0.5 text-xs font-medium text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-400">
+              <span className="inline-flex items-center gap-1 rounded-full bg-yellow-900/30 px-2 py-0.5 text-xs font-medium text-yellow-400 border border-yellow-500/20">
                 <FileText className="h-3 w-3" />
                 Draft
               </span>
             )}
             {isDirty && (
-              <span className="rounded-full bg-yellow-500/20 px-2 py-0.5 text-xs text-yellow-600 dark:text-yellow-400">
+              <span className="rounded-full bg-yellow-500/20 px-2 py-0.5 text-xs text-yellow-400">
                 Unsaved
               </span>
             )}
@@ -469,7 +469,7 @@ export function TreeEditorPage() {
 
         <div className="flex items-center gap-2">
           {/* Mode Toggle */}
-          <div className="flex items-center rounded-md border border-white/[0.06]">
+          <div className="flex items-center rounded-md border border-border">
             <button
               type="button"
               onClick={() => setEditorMode('form')}
@@ -477,14 +477,14 @@ export function TreeEditorPage() {
               className={cn(
                 'flex items-center gap-1.5 rounded-l-md px-3 py-1.5 text-xs font-medium transition-colors',
                 editorMode === 'form'
-                  ? 'bg-white/10 text-white'
-                  : 'text-white/40 hover:bg-white/[0.06] hover:text-white/60'
+                  ? 'bg-accent text-foreground'
+                  : 'text-muted-foreground hover:bg-accent/50 hover:text-foreground'
               )}
             >
               <LayoutList className="h-3.5 w-3.5" />
               Flow
             </button>
-            <div className="h-5 w-px bg-white/[0.06]" />
+            <div className="h-5 w-px bg-border" />
             <button
               type="button"
               onClick={() => setEditorMode('code')}
@@ -492,8 +492,8 @@ export function TreeEditorPage() {
               className={cn(
                 'flex items-center gap-1.5 rounded-r-md px-3 py-1.5 text-xs font-medium transition-colors',
                 editorMode === 'code'
-                  ? 'bg-white/10 text-white'
-                  : 'text-white/40 hover:bg-white/[0.06] hover:text-white/60'
+                  ? 'bg-accent text-foreground'
+                  : 'text-muted-foreground hover:bg-accent/50 hover:text-foreground'
               )}
             >
               <Code2 className="h-3.5 w-3.5" />
@@ -501,10 +501,10 @@ export function TreeEditorPage() {
             </button>
           </div>
 
-          <div className="mx-1 h-6 w-px bg-white/[0.06]" />
+          <div className="mx-1 h-6 w-px bg-border" />
 
           {/* Undo/Redo */}
-          <div className="flex items-center rounded-md border border-white/[0.06]">
+          <div className="flex items-center rounded-md border border-border">
             <button
               type="button"
               onClick={handleUndo}
@@ -513,13 +513,13 @@ export function TreeEditorPage() {
               className={cn(
                 'rounded-l-md p-2 transition-colors',
                 pastStates.length > 0
-                  ? 'text-white hover:bg-white/[0.06] active:bg-white/[0.12]'
-                  : 'text-white/20 cursor-not-allowed'
+                  ? 'text-foreground hover:bg-accent/50 active:bg-accent'
+                  : 'text-muted-foreground/50 cursor-not-allowed'
               )}
             >
               <Undo2 className="h-4 w-4" />
             </button>
-            <div className="h-6 w-px bg-white/[0.06]" />
+            <div className="h-6 w-px bg-border" />
             <button
               type="button"
               onClick={handleRedo}
@@ -528,15 +528,15 @@ export function TreeEditorPage() {
               className={cn(
                 'rounded-r-md p-2 transition-colors',
                 futureStates.length > 0
-                  ? 'text-white hover:bg-white/[0.06] active:bg-white/[0.12]'
-                  : 'text-white/20 cursor-not-allowed'
+                  ? 'text-foreground hover:bg-accent/50 active:bg-accent'
+                  : 'text-muted-foreground/50 cursor-not-allowed'
               )}
             >
               <Redo2 className="h-4 w-4" />
             </button>
           </div>
 
-          <div className="mx-2 h-6 w-px bg-white/[0.06]" />
+          <div className="mx-2 h-6 w-px bg-border" />
 
           {/* Validate */}
           <button
@@ -544,8 +544,8 @@ export function TreeEditorPage() {
             disabled={isSaving}
             title="Validate tree structure (checks for errors and warnings)"
             className={cn(
-              'flex items-center gap-2 rounded-md border border-white/10 bg-black/50 px-3 py-2 text-sm font-medium text-white/60',
-              'hover:bg-white/10 hover:text-white disabled:opacity-50'
+              'flex items-center gap-2 rounded-md border border-border bg-card px-3 py-2 text-sm font-medium text-muted-foreground',
+              'hover:bg-accent hover:text-foreground disabled:opacity-50'
             )}
           >
             <CheckCircle2 className="h-4 w-4" />
@@ -558,8 +558,8 @@ export function TreeEditorPage() {
             disabled={isSaving || !isDirty}
             title="Save as draft (Ctrl+S when draft or has errors)"
             className={cn(
-              'flex items-center gap-2 rounded-md border border-white/10 bg-black/50 px-3 py-2 text-sm font-medium text-white/60',
-              'hover:bg-white/10 hover:text-white disabled:opacity-50 disabled:cursor-not-allowed'
+              'flex items-center gap-2 rounded-md border border-border bg-card px-3 py-2 text-sm font-medium text-muted-foreground',
+              'hover:bg-accent hover:text-foreground disabled:opacity-50 disabled:cursor-not-allowed'
             )}
           >
             <Save className="h-4 w-4" />
@@ -572,8 +572,8 @@ export function TreeEditorPage() {
             disabled={isSaving || !isDirty || hasBlockingErrors}
             title={hasBlockingErrors ? 'Fix validation errors before publishing (Ctrl+S when no errors)' : 'Publish tree (Ctrl+S when no errors)'}
             className={cn(
-              'flex items-center gap-2 rounded-md bg-white px-4 py-2 text-sm font-medium text-black',
-              'hover:bg-white/90 disabled:opacity-50 disabled:cursor-not-allowed'
+              'flex items-center gap-2 rounded-md bg-gradient-brand px-4 py-2 text-sm font-medium text-white shadow-lg shadow-primary/20',
+              'hover:opacity-90 disabled:opacity-50 disabled:cursor-not-allowed'
             )}
           >
             <CheckCircle2 className="h-4 w-4" />
diff --git a/frontend/src/pages/TreeLibraryPage.tsx b/frontend/src/pages/TreeLibraryPage.tsx
index ec1a1dca..1df82437 100644
--- a/frontend/src/pages/TreeLibraryPage.tsx
+++ b/frontend/src/pages/TreeLibraryPage.tsx
@@ -1,12 +1,11 @@
 import { useEffect, useState, useCallback } from 'react'
 import { useNavigate, Link, useSearchParams } from 'react-router-dom'
-import { Plus, X, FolderOpen, RotateCcw, Play } from 'lucide-react'
+import { Plus, X, RotateCcw, Play } from 'lucide-react'
 import { treesApi } from '@/api/trees'
 import { categoriesApi } from '@/api/categories'
 import { foldersApi } from '@/api/folders'
 import { sessionsApi } from '@/api/sessions'
 import type { TreeListItem, CategoryListItem, FolderListItem, Session } from '@/types'
-import { FolderSidebar } from '@/components/library/FolderSidebar'
 import { FolderEditModal } from '@/components/library/FolderEditModal'
 import { ConfirmDialog } from '@/components/common/ConfirmDialog'
 import { TreeGridView } from '@/components/library/TreeGridView'
@@ -27,8 +26,10 @@ export function TreeLibraryPage() {
   const [trees, setTrees] = useState<TreeListItem[]>([])
   const [categories, setCategories] = useState<CategoryListItem[]>([])
   const [folders, setFolders] = useState<FolderListItem[]>([])
-  const [selectedCategoryId, setSelectedCategoryId] = useState<string>('')
-  const [selectedTags, setSelectedTags] = useState<string[]>([])
+  const urlCategory = searchParams.get('category') || ''
+  const urlTags = searchParams.get('tags')
+  const [selectedCategoryId, setSelectedCategoryId] = useState<string>(urlCategory)
+  const [selectedTags, setSelectedTags] = useState<string[]>(urlTags ? urlTags.split(',') : [])
   const [selectedFolderId, setSelectedFolderId] = useState<string | null>(null)
   const [searchQuery, setSearchQuery] = useState('')
   const [isLoading, setIsLoading] = useState(true)
@@ -40,7 +41,7 @@ export function TreeLibraryPage() {
     urlType === 'troubleshooting' || urlType === 'procedural' ? urlType : 'all'
   )
 
-  // Sync type filter when URL changes (e.g. clicking nav sub-items)
+  // Sync filters when URL changes (e.g. clicking sidebar categories/tags or nav sub-items)
   useEffect(() => {
     const t = searchParams.get('type')
     if (t === 'troubleshooting' || t === 'procedural') {
@@ -48,6 +49,9 @@ export function TreeLibraryPage() {
     } else {
       setTypeFilter('all')
     }
+    setSelectedCategoryId(searchParams.get('category') || '')
+    const tagsParam = searchParams.get('tags')
+    setSelectedTags(tagsParam ? tagsParam.split(',') : [])
   }, [searchParams])
 
   // View preferences from store
@@ -59,9 +63,6 @@ export function TreeLibraryPage() {
   const [editingFolder, setEditingFolder] = useState<FolderListItem | null>(null)
   const [newFolderParentId, setNewFolderParentId] = useState<string | null>(null)
 
-  // Mobile folder sidebar state
-  const [mobileFolderOpen, setMobileFolderOpen] = useState(false)
-
   // Delete confirmation state
   const [treeToDelete, setTreeToDelete] = useState<TreeListItem | null>(null)
   const [showDeleteConfirm, setShowDeleteConfirm] = useState(false)
@@ -208,12 +209,6 @@ export function TreeLibraryPage() {
     setFolderModalOpen(true)
   }
 
-  const handleEditFolder = (folder: FolderListItem) => {
-    setEditingFolder(folder)
-    setNewFolderParentId(null)
-    setFolderModalOpen(true)
-  }
-
   const handleDeleteTree = async () => {
     if (!treeToDelete) return
     setIsDeleting(true)
@@ -251,46 +246,33 @@ export function TreeLibraryPage() {
     selectedCategoryId || selectedTags.length > 0 || searchQuery || selectedFolderId
 
   return (
-    <div className="flex h-[calc(100vh-4rem)]">
-      {/* Folder Sidebar */}
-      <FolderSidebar
-        selectedFolderId={selectedFolderId}
-        onFolderSelect={(id) => {
-          setSelectedFolderId(id)
-          setMobileFolderOpen(false)
-        }}
-        onCreateFolder={handleCreateFolder}
-        onEditFolder={handleEditFolder}
-        mobileOpen={mobileFolderOpen}
-        onMobileClose={() => setMobileFolderOpen(false)}
-      />
-
+    <div className="flex h-full">
       {/* Main Content */}
       <div className="flex-1 overflow-auto">
         <div className="container mx-auto px-4 py-6 sm:px-6 sm:py-8">
           <div className="mb-6 flex flex-col gap-4 sm:mb-8 sm:flex-row sm:items-start sm:justify-between">
             <div>
-              <h1 className="text-2xl font-bold text-white sm:text-3xl">
-                {typeFilter === 'procedural' ? 'Procedures' : typeFilter === 'troubleshooting' ? 'Troubleshooting Flows' : 'Flow Library'}
+              <h1 className="text-2xl font-bold font-heading text-foreground sm:text-3xl">
+                {typeFilter === 'procedural' ? 'Projects' : typeFilter === 'troubleshooting' ? 'Troubleshooting Flows' : 'Flow Library'}
               </h1>
-              <p className="mt-2 text-white/40">
+              <p className="mt-2 text-muted-foreground">
                 {typeFilter === 'procedural'
-                  ? 'Step-by-step procedures for project work'
+                  ? 'Step-by-step projects and runbooks'
                   : typeFilter === 'troubleshooting'
                     ? 'Branching decision flows for troubleshooting'
-                    : 'Browse and start troubleshooting flows and procedures'}
+                    : 'Browse and start troubleshooting flows and projects'}
               </p>
             </div>
             {canCreateTrees && (
               <Link
                 to={typeFilter === 'procedural' ? '/flows/new' : '/trees/new'}
                 className={cn(
-                  'flex items-center gap-2 rounded-md bg-white px-4 py-2 text-sm font-medium text-black',
-                  'hover:bg-white/90'
+                  'flex items-center gap-2 rounded-md bg-gradient-brand px-4 py-2 text-sm font-medium text-white shadow-lg shadow-primary/20',
+                  'hover:opacity-90'
                 )}
               >
                 <Plus className="h-4 w-4" />
-                {typeFilter === 'procedural' ? 'Create Procedure' : 'Create Flow'}
+                {typeFilter === 'procedural' ? 'New Project' : 'Create Flow'}
               </Link>
             )}
           </div>
@@ -298,18 +280,6 @@ export function TreeLibraryPage() {
           {/* Search and Filter */}
           <div className="mb-4 space-y-4">
             <div className="flex flex-col gap-4 sm:flex-row">
-              {/* Mobile folder button */}
-              <button
-                onClick={() => setMobileFolderOpen(true)}
-                className={cn(
-                  'flex items-center gap-2 rounded-md border border-white/10 px-3 py-2 text-sm font-medium md:hidden',
-                  'text-white/40 hover:bg-white/10 hover:text-white',
-                  selectedFolderId && 'border-white/30 text-white'
-                )}
-              >
-                <FolderOpen className="h-4 w-4" />
-                Folders
-              </button>
               <div className="flex flex-1 gap-2">
                 <input
                   type="text"
@@ -318,16 +288,16 @@ export function TreeLibraryPage() {
                   onChange={(e) => setSearchQuery(e.target.value)}
                   onKeyDown={(e) => e.key === 'Enter' && handleSearch()}
                   className={cn(
-                    'flex-1 rounded-md border border-white/10 bg-black/50 px-3 py-2',
-                    'text-white placeholder:text-white/40',
-                    'focus:border-white/30 focus:outline-none focus:ring-1 focus:ring-white/20'
+                    'flex-1 rounded-md border border-border bg-card px-3 py-2',
+                    'text-foreground placeholder:text-muted-foreground',
+                    'focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/20'
                   )}
                 />
                 <button
                   onClick={handleSearch}
                   className={cn(
-                    'rounded-md bg-white px-4 py-2 text-sm font-medium text-black',
-                    'hover:bg-white/90'
+                    'rounded-md bg-gradient-brand px-4 py-2 text-sm font-medium text-white shadow-lg shadow-primary/20',
+                    'hover:opacity-90'
                   )}
                 >
                   Search
@@ -339,8 +309,8 @@ export function TreeLibraryPage() {
                 onChange={(e) => setSelectedCategoryId(e.target.value)}
                 aria-label="Filter by category"
                 className={cn(
-                  'rounded-md border border-white/10 bg-black/50 px-3 py-2',
-                  'text-white focus:border-white/30 focus:outline-none focus:ring-1 focus:ring-white/20'
+                  'rounded-md border border-border bg-card px-3 py-2',
+                  'text-foreground focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/20'
                 )}
               >
                 <option value="">All Categories</option>
@@ -355,7 +325,7 @@ export function TreeLibraryPage() {
             {/* View Controls */}
             <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
               <div className="flex items-center gap-4">
-                <div className="flex rounded-lg border border-white/10 p-0.5">
+                <div className="flex rounded-lg border border-border p-0.5">
                   {(['all', 'troubleshooting', 'procedural'] as const).map((t) => (
                     <button
                       key={t}
@@ -363,11 +333,11 @@ export function TreeLibraryPage() {
                       className={cn(
                         'rounded-md px-3 py-1 text-xs font-medium transition-colors',
                         typeFilter === t
-                          ? 'bg-white/10 text-white'
-                          : 'text-white/40 hover:text-white/60'
+                          ? 'bg-accent text-foreground'
+                          : 'text-muted-foreground hover:text-foreground'
                       )}
                     >
-                      {t === 'all' ? 'All' : t === 'troubleshooting' ? 'Troubleshooting' : 'Procedures'}
+                      {t === 'all' ? 'All' : t === 'troubleshooting' ? 'Troubleshooting' : 'Projects'}
                     </button>
                   ))}
                 </div>
@@ -377,9 +347,9 @@ export function TreeLibraryPage() {
                     type="checkbox"
                     checked={showDrafts}
                     onChange={(e) => setShowDrafts(e.target.checked)}
-                    className="h-4 w-4 rounded border-white/20 text-white focus:ring-2 focus:ring-white/20 focus:ring-offset-2"
+                    className="h-4 w-4 rounded border-border text-primary focus:ring-2 focus:ring-primary/20 focus:ring-offset-2"
                   />
-                  <span className="text-sm text-white/40">Show my drafts</span>
+                  <span className="text-sm text-muted-foreground">Show my drafts</span>
                 </label>
               </div>
               <ViewToggle view={treeLibraryView} onChange={setTreeLibraryView} />
@@ -389,24 +359,24 @@ export function TreeLibraryPage() {
           {/* Active Filters */}
           {hasActiveFilters && (
             <div className="mb-6 flex flex-wrap items-center gap-2">
-              <span className="text-sm text-white/40">Filters:</span>
+              <span className="text-sm text-muted-foreground">Filters:</span>
               {selectedFolderId && (
-                <span className="inline-flex items-center gap-1 rounded-full bg-white/10 px-3 py-1 text-sm text-white">
+                <span className="inline-flex items-center gap-1 rounded-full bg-accent px-3 py-1 text-sm text-foreground">
                   Folder
                   <button
                     onClick={() => setSelectedFolderId(null)}
-                    className="rounded-full p-0.5 hover:bg-white/20"
+                    className="rounded-full p-0.5 hover:bg-accent"
                   >
                     <X className="h-3 w-3" />
                   </button>
                 </span>
               )}
               {selectedCategoryId && (
-                <span className="inline-flex items-center gap-1 rounded-full bg-white/10 px-3 py-1 text-sm text-white">
+                <span className="inline-flex items-center gap-1 rounded-full bg-accent px-3 py-1 text-sm text-foreground">
                   {categories.find((c) => c.id === selectedCategoryId)?.name}
                   <button
                     onClick={() => setSelectedCategoryId('')}
-                    className="rounded-full p-0.5 hover:bg-white/20"
+                    className="rounded-full p-0.5 hover:bg-accent"
                   >
                     <X className="h-3 w-3" />
                   </button>
@@ -415,12 +385,12 @@ export function TreeLibraryPage() {
               {selectedTags.map((tag) => (
                 <span
                   key={tag}
-                  className="inline-flex items-center gap-1 rounded-full bg-white/10 px-3 py-1 text-sm text-white"
+                  className="inline-flex items-center gap-1 rounded-full bg-accent px-3 py-1 text-sm text-foreground"
                 >
                   {tag}
                   <button
                     onClick={() => removeTagFilter(tag)}
-                    className="rounded-full p-0.5 hover:bg-white/20"
+                    className="rounded-full p-0.5 hover:bg-accent"
                   >
                     <X className="h-3 w-3" />
                   </button>
@@ -428,7 +398,7 @@ export function TreeLibraryPage() {
               ))}
               <button
                 onClick={clearAllFilters}
-                className="text-sm text-white/40 hover:text-white"
+                className="text-sm text-muted-foreground hover:text-foreground"
               >
                 Clear all
               </button>
@@ -439,12 +409,12 @@ export function TreeLibraryPage() {
           {visibleIncompleteSessions.length > 0 && (
             <div className="mb-6 space-y-2">
               {visibleIncompleteSessions.map(s => (
-                <div key={s.id} className="glass-card flex items-center justify-between rounded-xl p-4">
+                <div key={s.id} className="bg-card border border-border flex items-center justify-between rounded-xl p-4">
                   <div className="min-w-0 flex-1">
-                    <p className="truncate font-medium text-white">
+                    <p className="truncate font-medium text-foreground">
                       {s.tree_snapshot?.name || 'Unknown tree'}
                     </p>
-                    <p className="text-sm text-white/40">
+                    <p className="text-sm text-muted-foreground">
                       {s.client_name && `${s.client_name} · `}
                       Started {formatTimeAgo(s.started_at)}
                     </p>
@@ -452,14 +422,14 @@ export function TreeLibraryPage() {
                   <div className="flex items-center gap-2">
                     <button
                       onClick={() => navigate(getTreeNavigatePath(s.tree_id, s.tree_snapshot?.tree_type), { state: { sessionId: s.id } })}
-                      className="flex items-center gap-1.5 rounded-md bg-white px-3 py-1.5 text-sm font-medium text-black hover:bg-white/90"
+                      className="flex items-center gap-1.5 rounded-md bg-gradient-brand px-3 py-1.5 text-sm font-medium text-white shadow-lg shadow-primary/20 hover:opacity-90"
                     >
                       <Play className="h-3.5 w-3.5" />
                       Resume
                     </button>
                     <button
                       onClick={() => dismissSession(s.id)}
-                      className="rounded-md p-1.5 text-white/30 hover:bg-white/10 hover:text-white"
+                      className="rounded-md p-1.5 text-muted-foreground hover:bg-accent hover:text-foreground"
                     >
                       <X className="h-4 w-4" />
                     </button>
@@ -477,8 +447,8 @@ export function TreeLibraryPage() {
                   state: { prefillClientName: lastSessionData.client_name, prefillTicketNumber: lastSessionData.ticket_number },
                 })}
                 className={cn(
-                  'flex items-center gap-2 rounded-lg border border-white/10 px-4 py-2.5 text-sm text-white/60',
-                  'hover:border-white/20 hover:bg-white/[0.04] hover:text-white'
+                  'flex items-center gap-2 rounded-lg border border-border px-4 py-2.5 text-sm text-muted-foreground',
+                  'hover:border-border hover:bg-accent hover:text-foreground'
                 )}
               >
                 <RotateCcw className="h-4 w-4" />
@@ -491,10 +461,10 @@ export function TreeLibraryPage() {
           {/* Loading State */}
           {isLoading ? (
             <div className="flex justify-center py-12">
-              <div className="h-8 w-8 animate-spin rounded-full border-4 border-white/20 border-t-white" />
+              <div className="h-8 w-8 animate-spin rounded-full border-4 border-border border-t-primary" />
             </div>
           ) : trees.length === 0 ? (
-            <div className="py-12 text-center text-white/40">
+            <div className="py-12 text-center text-muted-foreground">
               No flows found.{' '}
               {(searchQuery || hasActiveFilters) && 'Try adjusting your filters.'}
             </div>
diff --git a/frontend/src/pages/TreeNavigationPage.tsx b/frontend/src/pages/TreeNavigationPage.tsx
index 8f908cd3..d4a7414f 100644
--- a/frontend/src/pages/TreeNavigationPage.tsx
+++ b/frontend/src/pages/TreeNavigationPage.tsx
@@ -516,7 +516,7 @@ export function TreeNavigationPage() {
   if (isLoading) {
     return (
       <div className="flex h-64 items-center justify-center">
-        <div className="h-8 w-8 animate-spin rounded-full border-4 border-white/20 border-t-white" />
+        <div className="h-8 w-8 animate-spin rounded-full border-4 border-border border-t-foreground" />
       </div>
     )
   }
@@ -529,7 +529,7 @@ export function TreeNavigationPage() {
         </div>
         <button
           onClick={() => navigate('/trees')}
-          className="mt-4 text-white/50 hover:text-white hover:underline"
+          className="mt-4 text-muted-foreground hover:text-foreground hover:underline"
         >
           Back to trees
         </button>
@@ -541,17 +541,17 @@ export function TreeNavigationPage() {
   if (showMetadataForm) {
     return (
       <div className="container mx-auto max-w-lg px-4 py-8">
-        <h1 className="mb-2 text-2xl font-bold text-white">{tree.name}</h1>
-        <p className="mb-6 text-white/40">{tree.description}</p>
+        <h1 className="mb-2 text-2xl font-bold font-heading text-foreground">{tree.name}</h1>
+        <p className="mb-6 text-muted-foreground">{tree.description}</p>
 
-        <div className="glass-card rounded-2xl space-y-4 p-6">
-          <h2 className="font-semibold text-white">Session Details</h2>
-          <p className="text-sm text-white/40">
+        <div className="bg-card border border-border rounded-xl space-y-4 p-6">
+          <h2 className="font-semibold text-foreground">Session Details</h2>
+          <p className="text-sm text-muted-foreground">
             Optional: Add ticket and client info for easier tracking
           </p>
 
           <div>
-            <label className="block text-sm font-medium text-white">
+            <label className="block text-sm font-medium text-foreground">
               Ticket Number
             </label>
             <input
@@ -560,15 +560,15 @@ export function TreeNavigationPage() {
               onChange={(e) => setTicketNumber(e.target.value)}
               placeholder="e.g., INC0012345"
               className={cn(
-                'mt-1 block w-full rounded-md border border-white/10 bg-black/50 px-3 py-2',
-                'text-white placeholder:text-white/40',
-                'focus:border-white/30 focus:outline-none focus:ring-1 focus:ring-white/20'
+                'mt-1 block w-full rounded-md border border-border bg-card px-3 py-2',
+                'text-foreground placeholder:text-muted-foreground',
+                'focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/20'
               )}
             />
           </div>
 
           <div>
-            <label className="block text-sm font-medium text-white">
+            <label className="block text-sm font-medium text-foreground">
               Client Name
             </label>
             <input
@@ -577,9 +577,9 @@ export function TreeNavigationPage() {
               onChange={(e) => setClientName(e.target.value)}
               placeholder="e.g., Acme Corp"
               className={cn(
-                'mt-1 block w-full rounded-md border border-white/10 bg-black/50 px-3 py-2',
-                'text-white placeholder:text-white/40',
-                'focus:border-white/30 focus:outline-none focus:ring-1 focus:ring-white/20'
+                'mt-1 block w-full rounded-md border border-border bg-card px-3 py-2',
+                'text-foreground placeholder:text-muted-foreground',
+                'focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/20'
               )}
             />
           </div>
@@ -587,8 +587,8 @@ export function TreeNavigationPage() {
           <button
             onClick={startSession}
             className={cn(
-              'w-full rounded-md bg-white px-4 py-2 text-sm font-medium text-black',
-              'hover:bg-white/90'
+              'w-full rounded-md bg-gradient-brand px-4 py-2 text-sm font-medium text-white shadow-lg shadow-primary/20',
+              'hover:opacity-90'
             )}
           >
             Start Troubleshooting
@@ -609,7 +609,7 @@ export function TreeNavigationPage() {
   }
 
   return (
-    <div className="h-[calc(100vh-4rem)]">
+    <div className="h-full">
       {/* Main Content */}
       <div className={cn('h-full overflow-y-auto px-4 py-8 transition-[padding] duration-200', scratchpadOpen && 'sm:pr-[440px]')}>
       <div className="mx-auto max-w-4xl">
@@ -617,9 +617,9 @@ export function TreeNavigationPage() {
       <div className="mb-6 flex items-center justify-between">
         <div>
           <div className="flex items-center gap-3">
-            <h1 className="text-xl font-bold text-white">{tree.name}</h1>
+            <h1 className="text-xl font-bold font-heading text-foreground">{tree.name}</h1>
             {timerDisplay && (
-              <span className="flex items-center gap-1.5 rounded-full bg-white/10 px-2.5 py-0.5 text-sm text-white/60">
+              <span className="flex items-center gap-1.5 rounded-full bg-accent px-2 py-0.5 text-[0.6875rem] font-label text-muted-foreground">
                 <Clock className="h-4 w-4" />
                 {timerDisplay}
               </span>
@@ -627,14 +627,14 @@ export function TreeNavigationPage() {
             <button
               type="button"
               onClick={() => setShortcutsModalOpen(true)}
-              className="flex items-center justify-center rounded-full p-1 text-white/30 hover:bg-white/10 hover:text-white/60"
+              className="flex items-center justify-center rounded-full p-1 text-muted-foreground hover:bg-accent hover:text-foreground"
               title="Keyboard shortcuts"
             >
               <HelpCircle className="h-4 w-4" />
             </button>
           </div>
           {(ticketNumber || clientName) && (
-            <p className="text-sm text-white/40">
+            <p className="text-sm text-muted-foreground">
               {ticketNumber && `Ticket: ${ticketNumber}`}
               {ticketNumber && clientName && ' · '}
               {clientName && `Client: ${clientName}`}
@@ -647,8 +647,8 @@ export function TreeNavigationPage() {
             <button
               onClick={() => setShowSharePopover(!showSharePopover)}
               className={cn(
-                'flex items-center gap-1.5 rounded-md border border-white/10 px-3 py-1.5 text-xs font-medium text-white/60',
-                'hover:bg-white/10 hover:text-white transition-colors'
+                'flex items-center gap-1.5 rounded-md border border-border px-3 py-1.5 text-xs font-medium text-muted-foreground',
+                'hover:bg-accent hover:text-foreground transition-colors'
               )}
             >
               <Copy className="h-3.5 w-3.5" />
@@ -656,7 +656,7 @@ export function TreeNavigationPage() {
               <ChevronDown className="h-3 w-3" />
             </button>
             {showSharePopover && (
-              <div className="absolute right-0 mt-1 z-50 glass-card rounded-lg p-1 min-w-[220px]">
+              <div className="absolute right-0 mt-1 z-50 bg-card border border-border rounded-xl p-1 min-w-[220px]">
                 {/* Copy Progress Summary */}
                 <button
                   onClick={() => {
@@ -665,8 +665,8 @@ export function TreeNavigationPage() {
                   }}
                   disabled={isCopyingForTicket}
                   className={cn(
-                    'flex items-center gap-2 rounded-md px-3 py-2 text-sm text-white/70 w-full text-left cursor-pointer transition-colors',
-                    'hover:bg-white/10 hover:text-white disabled:opacity-50'
+                    'flex items-center gap-2 rounded-md px-3 py-2 text-sm text-muted-foreground w-full text-left cursor-pointer transition-colors',
+                    'hover:bg-accent hover:text-foreground disabled:opacity-50'
                   )}
                 >
                   {copiedForTicket ? <Check className="h-4 w-4 text-emerald-400" /> : <Clipboard className="h-4 w-4" />}
@@ -680,15 +680,15 @@ export function TreeNavigationPage() {
                   }}
                   disabled={isCopyingShareLink}
                   className={cn(
-                    'flex items-center gap-2 rounded-md px-3 py-2 text-sm text-white/70 w-full text-left cursor-pointer transition-colors',
-                    'hover:bg-white/10 hover:text-white disabled:opacity-50'
+                    'flex items-center gap-2 rounded-md px-3 py-2 text-sm text-muted-foreground w-full text-left cursor-pointer transition-colors',
+                    'hover:bg-accent hover:text-foreground disabled:opacity-50'
                   )}
                 >
                   {copiedShareLink ? <Check className="h-4 w-4 text-emerald-400" /> : <Link2 className="h-4 w-4" />}
                   {isCopyingShareLink ? 'Loading...' : copiedShareLink ? 'Copied!' : 'Copy Share Link'}
                 </button>
                 {/* Divider */}
-                <div className="border-t border-white/[0.06] my-1" />
+                <div className="border-t border-border my-1" />
                 {/* Manage Share Links */}
                 <button
                   onClick={() => {
@@ -696,8 +696,8 @@ export function TreeNavigationPage() {
                     setShowShareModal(true)
                   }}
                   className={cn(
-                    'flex items-center gap-2 rounded-md px-3 py-2 text-sm text-white/70 w-full text-left cursor-pointer transition-colors',
-                    'hover:bg-white/10 hover:text-white'
+                    'flex items-center gap-2 rounded-md px-3 py-2 text-sm text-muted-foreground w-full text-left cursor-pointer transition-colors',
+                    'hover:bg-accent hover:text-foreground'
                   )}
                 >
                   <Settings className="h-4 w-4" />
@@ -708,7 +708,7 @@ export function TreeNavigationPage() {
           </div>
           <button
             onClick={() => navigate('/sessions')}
-            className="rounded-md px-3 py-1.5 text-sm text-white/50 hover:bg-white/[0.06] hover:text-white"
+            className="rounded-md px-3 py-1.5 text-sm text-muted-foreground hover:bg-accent hover:text-foreground"
           >
             Exit
           </button>
@@ -724,17 +724,17 @@ export function TreeNavigationPage() {
           const truncatedLabel = label.length > 30 ? `${label.slice(0, 30)}...` : label
           return (
             <span key={nodeId} className="flex items-center gap-2 whitespace-nowrap">
-              {index > 0 && <span className="text-white/40">→</span>}
+              {index > 0 && <span className="text-muted-foreground">→</span>}
               {index < pathTaken.length - 1 ? (
                 <button
                   type="button"
                   onClick={() => handleBreadcrumbJump(nodeId, index)}
-                  className="text-white/40 hover:text-white/70 hover:underline"
+                  className="text-muted-foreground hover:text-foreground hover:underline"
                 >
                   {truncatedLabel}
                 </button>
               ) : (
-                <span className="font-medium text-white">
+                <span className="font-medium text-foreground">
                   {truncatedLabel}
                 </span>
               )}
@@ -744,15 +744,15 @@ export function TreeNavigationPage() {
       </div>
 
       {/* Current Node */}
-      <div className="glass-card rounded-2xl p-6 shadow-sm">
+      <div className="bg-card border border-border rounded-xl p-6 shadow-sm">
         {/* Decision Node */}
         {currentNode && currentNode.type === 'decision' && (
           <>
-            <h2 className="mb-2 text-xl font-semibold text-white">
+            <h2 className="mb-2 text-xl font-semibold font-heading text-foreground">
               {currentNode.question}
             </h2>
             {currentNode.help_text && (
-              <div className="mb-4 text-sm text-white/50">
+              <div className="mb-4 text-sm text-muted-foreground">
                 <MarkdownContent content={currentNode.help_text} />
               </div>
             )}
@@ -763,8 +763,8 @@ export function TreeNavigationPage() {
                   onClick={() => handleSelectOption(option.id, option.label, option.next_node_id)}
                   disabled={!!selectingOption}
                   className={cn(
-                    'w-full rounded-md border border-white/10 p-3 text-left text-white transition-colors',
-                    'hover:border-white/30 hover:bg-white/[0.06]',
+                    'w-full rounded-md border border-border p-3 text-left text-foreground transition-colors',
+                    'hover:border-primary/30 hover:bg-accent',
                     'flex items-center gap-3',
                     selectingOption && selectingOption !== option.id && 'opacity-50 pointer-events-none'
                   )}
@@ -772,10 +772,10 @@ export function TreeNavigationPage() {
                   {index < 9 && (
                     selectingOption === option.id ? (
                       <span className="flex h-6 w-6 shrink-0 items-center justify-center">
-                        <span className="h-4 w-4 animate-spin rounded-full border-2 border-white/20 border-t-white" />
+                        <span className="h-4 w-4 animate-spin rounded-full border-2 border-border border-t-foreground" />
                       </span>
                     ) : (
-                      <span className="flex h-6 w-6 shrink-0 items-center justify-center rounded bg-white/10 text-xs font-medium text-white/50">
+                      <span className="flex h-6 w-6 shrink-0 items-center justify-center rounded bg-accent text-xs font-medium text-muted-foreground">
                         {index + 1}
                       </span>
                     )
@@ -787,7 +787,7 @@ export function TreeNavigationPage() {
             {/* Previously-created custom steps at this node */}
             {customStepFlow.customSteps.filter(cs => cs.inserted_after_node_id === currentNodeId).length > 0 && (
               <div className="mt-2 space-y-2">
-                <p className="text-xs font-medium uppercase tracking-wide text-white/40">
+                <p className="text-xs font-medium uppercase tracking-wide text-muted-foreground">
                   Your Custom Steps
                 </p>
                 {customStepFlow.customSteps
@@ -798,12 +798,12 @@ export function TreeNavigationPage() {
                       key={cs.id}
                       onClick={() => customStepFlow.handleNavigateToCustomStep(cs)}
                       className={cn(
-                        'w-full rounded-md border border-purple-700 bg-purple-900/20 p-3 text-left text-white transition-colors',
-                        'hover:border-purple-500 hover:bg-purple-900/40',
+                        'w-full rounded-md border border-primary/30 bg-primary/10 p-3 text-left text-foreground transition-colors',
+                        'hover:border-primary/50 hover:bg-primary/20',
                         'flex items-center gap-3'
                       )}
                     >
-                      <span className="flex-shrink-0 rounded-full bg-purple-900 px-2 py-0.5 text-xs font-medium text-purple-100">
+                      <span className="flex-shrink-0 rounded-full bg-primary/20 px-2 py-0.5 text-xs font-medium text-primary">
                         Custom
                       </span>
                       <span>{cs.step_data.title}</span>
@@ -815,7 +815,7 @@ export function TreeNavigationPage() {
             {/* Add Custom Step Button */}
             <button
               onClick={() => customStepFlow.setShowCustomStepModal(true)}
-              className="mt-2 inline-flex items-center gap-1 rounded-md px-2 py-1.5 text-sm text-white/50 hover:bg-white/10 hover:text-white"
+              className="mt-2 inline-flex items-center gap-1 rounded-md px-2 py-1.5 text-sm text-muted-foreground hover:bg-accent hover:text-foreground"
             >
               <Plus className="h-3.5 w-3.5" />
               Add Custom Step
@@ -825,18 +825,18 @@ export function TreeNavigationPage() {
 
         {/* Custom Step Node */}
         {currentCustomStep && (
-          <div className="rounded-lg border border-purple-800 bg-purple-900/20 p-4">
+          <div className="rounded-lg border border-primary/30 bg-primary/10 p-4">
             {/* Custom Step Badge */}
-            <span className="mb-2 inline-block rounded-full bg-purple-900 px-2 py-1 text-xs font-medium text-purple-100">
+            <span className="mb-2 inline-block rounded-full bg-primary/20 px-2 py-1 text-xs font-medium text-primary">
               Custom Step
             </span>
 
-            <h2 className="mb-2 text-xl font-semibold text-white">
+            <h2 className="mb-2 text-xl font-semibold font-heading text-foreground">
               {currentCustomStep.step_data.title}
             </h2>
 
             {currentCustomStep.step_data.content.instructions && (
-              <div className="mb-4 text-white/60">
+              <div className="mb-4 text-muted-foreground">
                 <MarkdownContent content={currentCustomStep.step_data.content.instructions} />
               </div>
             )}
@@ -849,13 +849,13 @@ export function TreeNavigationPage() {
 
             {currentCustomStep.step_data.content.commands && currentCustomStep.step_data.content.commands.length > 0 && (
               <div className="mb-4">
-                <p className="mb-2 text-sm font-medium text-white">Commands:</p>
+                <p className="mb-2 text-sm font-medium text-foreground">Commands:</p>
                 <div className="space-y-2">
                   {currentCustomStep.step_data.content.commands.map((cmd, index) => (
                     <div key={index}>
-                      <p className="mb-1 text-xs text-white/40">{cmd.label}</p>
+                      <p className="mb-1 text-xs text-muted-foreground">{cmd.label}</p>
                       <div className="group relative">
-                        <code className="block rounded bg-white/10 p-2 pr-8 text-sm font-mono">
+                        <code className="block rounded bg-accent p-2 pr-8 text-sm font-mono">
                           {cmd.command}
                         </code>
                         <button
@@ -867,7 +867,7 @@ export function TreeNavigationPage() {
                           {copiedCommand === cmd.command ? (
                             <Check className="h-3.5 w-3.5 text-green-400" />
                           ) : (
-                            <Clipboard className="h-3.5 w-3.5 text-white/40 hover:text-white" />
+                            <Clipboard className="h-3.5 w-3.5 text-muted-foreground hover:text-foreground" />
                           )}
                         </button>
                       </div>
@@ -879,7 +879,7 @@ export function TreeNavigationPage() {
                   <button
                     type="button"
                     onClick={() => setCommandOutputOpen(!commandOutputOpen)}
-                    className="flex items-center gap-1.5 text-sm text-white/50 hover:text-white"
+                    className="flex items-center gap-1.5 text-sm text-muted-foreground hover:text-foreground"
                   >
                     <Terminal className="h-3.5 w-3.5" />
                     <span>Paste Output (Optional)</span>
@@ -894,12 +894,12 @@ export function TreeNavigationPage() {
                         rows={4}
                         maxLength={10000}
                         className={cn(
-                          'block w-full rounded-md border border-white/10 bg-white/10 px-3 py-2',
-                          'font-mono text-sm text-white placeholder:text-white/40',
-                          'focus:border-white/30 focus:outline-none focus:ring-1 focus:ring-white/20'
+                          'block w-full rounded-md border border-border bg-accent px-3 py-2',
+                          'font-mono text-sm text-foreground placeholder:text-muted-foreground',
+                          'focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/20'
                         )}
                       />
-                      <p className="mt-1 text-right text-xs text-white/30">
+                      <p className="mt-1 text-right text-xs text-muted-foreground">
                         {commandOutput.length.toLocaleString()} / 10,000
                       </p>
                     </div>
@@ -913,13 +913,13 @@ export function TreeNavigationPage() {
               const targetNode = findNode(customStepFlow.pendingContinuationNodeId, tree?.tree_structure)
               const targetLabel = targetNode?.question || targetNode?.title || 'next step'
               return (
-                <div className="mt-6 border-t border-purple-700 pt-4">
+                <div className="mt-6 border-t border-primary/30 pt-4">
                   <button
                     type="button"
                     onClick={handleCustomContinueToDescendant}
                     className={cn(
-                      'flex w-full items-center justify-between rounded-md bg-white px-4 py-3 text-sm font-medium text-black',
-                      'hover:bg-white/90'
+                      'flex w-full items-center justify-between rounded-md bg-gradient-brand px-4 py-3 text-sm font-medium text-white shadow-lg shadow-primary/20',
+                      'hover:opacity-90'
                     )}
                   >
                     <span>Continue to: {targetLabel.length > 50 ? `${targetLabel.slice(0, 50)}...` : targetLabel}</span>
@@ -931,7 +931,7 @@ export function TreeNavigationPage() {
 
             {/* Custom Branch Controls */}
             {customStepFlow.customBranchMode && (
-              <div className="mt-6 border-t border-purple-700 pt-4">
+              <div className="mt-6 border-t border-primary/30 pt-4">
                 <p className="mb-3 text-sm text-amber-400">
                   Building custom branch - add steps until the issue is resolved
                 </p>
@@ -939,8 +939,8 @@ export function TreeNavigationPage() {
                   <button
                     onClick={() => customStepFlow.setShowCustomStepModal(true)}
                     className={cn(
-                      'flex items-center gap-2 rounded-md border border-white/10 px-4 py-2 text-sm font-medium text-white/60',
-                      'hover:bg-white/10 hover:text-white'
+                      'flex items-center gap-2 rounded-md border border-border px-4 py-2 text-sm font-medium text-muted-foreground',
+                      'hover:bg-accent hover:text-foreground'
                     )}
                   >
                     <Plus className="h-4 w-4" />
@@ -966,21 +966,21 @@ export function TreeNavigationPage() {
         {/* Action Node */}
         {currentNode && currentNode.type === 'action' && (
           <>
-            <h2 className="mb-2 text-xl font-semibold text-white">
+            <h2 className="mb-2 text-xl font-semibold font-heading text-foreground">
               {currentNode.title}
             </h2>
             {currentNode.description && (
-              <div className="mb-4 text-white/60">
+              <div className="mb-4 text-muted-foreground">
                 <MarkdownContent content={currentNode.description} />
               </div>
             )}
             {currentNode.commands && currentNode.commands.length > 0 && (
               <div className="mb-4">
-                <p className="mb-2 text-sm font-medium text-white">Commands:</p>
+                <p className="mb-2 text-sm font-medium text-foreground">Commands:</p>
                 <div className="space-y-1">
                   {currentNode.commands.map((cmd, index) => (
                     <div key={index} className="group relative">
-                      <code className="block rounded bg-white/10 p-2 pr-8 text-sm font-mono">
+                      <code className="block rounded bg-accent p-2 pr-8 text-sm font-mono">
                         {cmd}
                       </code>
                       <button
@@ -992,7 +992,7 @@ export function TreeNavigationPage() {
                         {copiedCommand === cmd ? (
                           <Check className="h-3.5 w-3.5 text-green-400" />
                         ) : (
-                          <Clipboard className="h-3.5 w-3.5 text-white/40 hover:text-white" />
+                          <Clipboard className="h-3.5 w-3.5 text-muted-foreground hover:text-foreground" />
                         )}
                       </button>
                     </div>
@@ -1003,7 +1003,7 @@ export function TreeNavigationPage() {
                   <button
                     type="button"
                     onClick={() => setCommandOutputOpen(!commandOutputOpen)}
-                    className="flex items-center gap-1.5 text-sm text-white/50 hover:text-white"
+                    className="flex items-center gap-1.5 text-sm text-muted-foreground hover:text-foreground"
                   >
                     <Terminal className="h-3.5 w-3.5" />
                     <span>Paste Output (Optional)</span>
@@ -1018,12 +1018,12 @@ export function TreeNavigationPage() {
                         rows={4}
                         maxLength={10000}
                         className={cn(
-                          'block w-full rounded-md border border-white/10 bg-white/10 px-3 py-2',
-                          'font-mono text-sm text-white placeholder:text-white/40',
-                          'focus:border-white/30 focus:outline-none focus:ring-1 focus:ring-white/20'
+                          'block w-full rounded-md border border-border bg-accent px-3 py-2',
+                          'font-mono text-sm text-foreground placeholder:text-muted-foreground',
+                          'focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/20'
                         )}
                       />
-                      <p className="mt-1 text-right text-xs text-white/30">
+                      <p className="mt-1 text-right text-xs text-muted-foreground">
                         {commandOutput.length.toLocaleString()} / 10,000
                       </p>
                     </div>
@@ -1032,7 +1032,7 @@ export function TreeNavigationPage() {
               </div>
             )}
             {currentNode.expected_outcome && (
-              <p className="mb-4 text-sm text-white/40">
+              <p className="mb-4 text-sm text-muted-foreground">
                 <strong>Expected outcome:</strong> {currentNode.expected_outcome}
               </p>
             )}
@@ -1040,8 +1040,8 @@ export function TreeNavigationPage() {
               <button
                 onClick={() => handleContinue()}
                 className={cn(
-                  'rounded-md bg-white px-4 py-2 text-sm font-medium text-black',
-                  'hover:bg-white/90'
+                  'rounded-md bg-gradient-brand px-4 py-2 text-sm font-medium text-white shadow-lg shadow-primary/20',
+                  'hover:opacity-90'
                 )}
               >
                 Continue
@@ -1058,18 +1058,18 @@ export function TreeNavigationPage() {
                 Solution
               </span>
             </div>
-            <h2 className="mb-2 text-xl font-semibold text-white">
+            <h2 className="mb-2 text-xl font-semibold font-heading text-foreground">
               {currentNode.title}
             </h2>
             {currentNode.description && (
-              <div className="mb-4 text-white/60">
+              <div className="mb-4 text-muted-foreground">
                 <MarkdownContent content={currentNode.description} />
               </div>
             )}
             {currentNode.resolution_steps && currentNode.resolution_steps.length > 0 && (
               <div className="mb-4">
-                <p className="mb-2 text-sm font-medium text-white">Resolution steps:</p>
-                <ol className="list-inside list-decimal space-y-1 text-sm text-white/40">
+                <p className="mb-2 text-sm font-medium text-foreground">Resolution steps:</p>
+                <ol className="list-inside list-decimal space-y-1 text-sm text-muted-foreground">
                   {currentNode.resolution_steps.map((step, index) => (
                     <li key={index}>{step}</li>
                   ))}
@@ -1090,8 +1090,8 @@ export function TreeNavigationPage() {
         )}
 
         {/* Notes */}
-        <div className="mt-6 border-t border-white/[0.06] pt-4">
-          <label className="block text-sm font-medium text-white">
+        <div className="mt-6 border-t border-border pt-4">
+          <label className="block text-sm font-medium text-foreground">
             Notes (optional)
           </label>
           <textarea
@@ -1101,9 +1101,9 @@ export function TreeNavigationPage() {
             placeholder="Add any notes for this step..."
             rows={2}
             className={cn(
-              'mt-1 block w-full rounded-md border border-white/10 bg-black/50 px-3 py-2',
-              'text-white placeholder:text-white/40',
-              'focus:border-white/30 focus:outline-none focus:ring-1 focus:ring-white/20'
+              'mt-1 block w-full rounded-md border border-border bg-card px-3 py-2',
+              'text-foreground placeholder:text-muted-foreground',
+              'focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/20'
             )}
           />
         </div>
@@ -1112,15 +1112,15 @@ export function TreeNavigationPage() {
         {pathTaken.length > 1 && (
           <button
             onClick={handleGoBack}
-            className="mt-4 text-sm text-white/50 hover:text-white"
+            className="mt-4 text-sm text-muted-foreground hover:text-foreground"
           >
-            ← Go back <span className="text-xs text-white/30">[Esc]</span>
+            ← Go back <span className="text-xs text-muted-foreground">[Esc]</span>
           </button>
         )}
 
         {/* Keyboard Shortcuts Hint */}
         {currentNode && (
-          <div className="mt-4 border-t border-white/[0.06] pt-3 text-xs text-white/40">
+          <div className="mt-4 border-t border-border pt-3 text-xs text-muted-foreground">
             <span className="font-medium">Keyboard:</span>{' '}
             {currentNode.type === 'decision' && currentOptions.length > 0 && (
               <span>1-{Math.min(currentOptions.length, 9)} select option</span>
@@ -1189,24 +1189,24 @@ export function TreeNavigationPage() {
       >
         <div className="space-y-3 text-sm">
           <div className="flex items-center justify-between">
-            <span className="text-white/60">Select option</span>
-            <span className="rounded bg-white/10 px-2 py-0.5 font-mono text-xs text-white/80">1-9</span>
+            <span className="text-muted-foreground">Select option</span>
+            <span className="rounded bg-accent px-2 py-0.5 font-mono text-xs text-foreground">1-9</span>
           </div>
           <div className="flex items-center justify-between">
-            <span className="text-white/60">Go back</span>
-            <span className="rounded bg-white/10 px-2 py-0.5 font-mono text-xs text-white/80">Esc</span>
+            <span className="text-muted-foreground">Go back</span>
+            <span className="rounded bg-accent px-2 py-0.5 font-mono text-xs text-foreground">Esc</span>
           </div>
           <div className="flex items-center justify-between">
-            <span className="text-white/60">Continue / Complete</span>
-            <span className="rounded bg-white/10 px-2 py-0.5 font-mono text-xs text-white/80">Enter</span>
+            <span className="text-muted-foreground">Continue / Complete</span>
+            <span className="rounded bg-accent px-2 py-0.5 font-mono text-xs text-foreground">Enter</span>
           </div>
           <div className="flex items-center justify-between">
-            <span className="text-white/60">Focus notes</span>
-            <span className="rounded bg-white/10 px-2 py-0.5 font-mono text-xs text-white/80">Tab</span>
+            <span className="text-muted-foreground">Focus notes</span>
+            <span className="rounded bg-accent px-2 py-0.5 font-mono text-xs text-foreground">Tab</span>
           </div>
           <div className="flex items-center justify-between">
-            <span className="text-white/60">Show shortcuts</span>
-            <span className="rounded bg-white/10 px-2 py-0.5 font-mono text-xs text-white/80">?</span>
+            <span className="text-muted-foreground">Show shortcuts</span>
+            <span className="rounded bg-accent px-2 py-0.5 font-mono text-xs text-foreground">?</span>
           </div>
         </div>
       </Modal>
diff --git a/frontend/src/pages/account/TeamCategoriesPage.tsx b/frontend/src/pages/account/TeamCategoriesPage.tsx
index dc6560aa..c4021317 100644
--- a/frontend/src/pages/account/TeamCategoriesPage.tsx
+++ b/frontend/src/pages/account/TeamCategoriesPage.tsx
@@ -77,16 +77,16 @@ export function TeamCategoriesPage() {
     setForm({ name: cat.name, slug: cat.slug, description: cat.description || '' })
   }
 
-  const inputCn = cn('w-full rounded-md border border-white/10 bg-black/50 px-3 py-2 text-sm text-white', 'placeholder:text-white/40 focus:outline-none focus:border-white/30 focus:ring-2 focus:ring-white/20')
+  const inputCn = cn('w-full rounded-md border border-border bg-card px-3 py-2 text-sm text-foreground', 'placeholder:text-muted-foreground focus:outline-none focus:border-primary focus:ring-2 focus:ring-primary/20')
 
   return (
     <div className="container mx-auto px-4 py-6 sm:px-6 sm:py-8">
       <div className="mb-6 flex items-center justify-between">
         <div>
-          <h1 className="text-2xl font-bold text-white">Team Categories</h1>
-          <p className="mt-1 text-sm text-white/40">Manage tree categories for your team</p>
+          <h1 className="text-2xl font-bold text-foreground">Team Categories</h1>
+          <p className="mt-1 text-sm text-muted-foreground">Manage tree categories for your team</p>
         </div>
-        <button onClick={() => setCreateOpen(true)} className={cn('flex items-center gap-2 rounded-md px-4 py-2 text-sm font-medium', 'bg-white text-black hover:bg-white/90')}>
+        <button onClick={() => setCreateOpen(true)} className={cn('flex items-center gap-2 rounded-md px-4 py-2 text-sm font-medium', 'bg-gradient-brand text-white shadow-lg shadow-primary/20 hover:opacity-90')}>
           <Plus className="h-4 w-4" />
           Create Category
         </button>
@@ -95,30 +95,30 @@ export function TeamCategoriesPage() {
       {loading ? (
         <div className="space-y-3">
           {Array.from({ length: 3 }).map((_, i) => (
-            <div key={i} className="h-16 animate-pulse rounded-lg bg-white/10" />
+            <div key={i} className="h-16 animate-pulse rounded-lg bg-accent" />
           ))}
         </div>
       ) : categories.length === 0 ? (
-        <div className="flex flex-col items-center justify-center glass-card rounded-2xl py-16">
-          <FolderTree className="h-12 w-12 text-white/30" />
-          <h3 className="mt-4 font-medium text-white">No team categories</h3>
-          <p className="mt-1 text-sm text-white/40">Create categories to organize your team's trees.</p>
+        <div className="flex flex-col items-center justify-center bg-card border border-border rounded-xl py-16">
+          <FolderTree className="h-12 w-12 text-muted-foreground" />
+          <h3 className="mt-4 font-medium text-foreground">No team categories</h3>
+          <p className="mt-1 text-sm text-muted-foreground">Create categories to organize your team's trees.</p>
         </div>
       ) : (
         <div className="space-y-2">
           {categories.map((cat) => (
-            <div key={cat.id} className="flex items-center justify-between rounded-lg border border-white/[0.06] px-4 py-3">
+            <div key={cat.id} className="flex items-center justify-between rounded-lg border border-border px-4 py-3">
               <div>
-                <span className="font-medium text-white">{cat.name}</span>
-                <span className="ml-3 text-sm text-white/40">{cat.slug}</span>
-                {cat.description && <span className="ml-3 text-sm text-white/40">- {cat.description}</span>}
-                <span className="ml-3 text-xs text-white/40">{cat.tree_count} trees</span>
+                <span className="font-medium text-foreground">{cat.name}</span>
+                <span className="ml-3 text-sm text-muted-foreground">{cat.slug}</span>
+                {cat.description && <span className="ml-3 text-sm text-muted-foreground">- {cat.description}</span>}
+                <span className="ml-3 text-xs text-muted-foreground">{cat.tree_count} trees</span>
               </div>
               <div className="flex items-center gap-1">
-                <button onClick={() => openEdit(cat)} className="rounded-md p-1.5 text-white/50 hover:bg-white/[0.06] hover:text-white">
+                <button onClick={() => openEdit(cat)} className="rounded-md p-1.5 text-muted-foreground hover:bg-accent hover:text-foreground">
                   <Pencil className="h-4 w-4" />
                 </button>
-                <button onClick={() => handleDelete(cat.id)} className="rounded-md p-1.5 text-white/50 hover:bg-red-400/10 hover:text-red-400">
+                <button onClick={() => handleDelete(cat.id)} className="rounded-md p-1.5 text-muted-foreground hover:bg-red-400/10 hover:text-red-400">
                   <Trash2 className="h-4 w-4" />
                 </button>
               </div>
@@ -131,22 +131,22 @@ export function TeamCategoriesPage() {
       <Modal isOpen={createOpen} onClose={() => setCreateOpen(false)} title="Create Category" size="sm"
         footer={
           <div className="flex justify-end gap-3">
-            <button onClick={() => setCreateOpen(false)} className="rounded-md border border-white/10 px-4 py-2 text-sm font-medium text-white/60 hover:bg-white/10 hover:text-white">Cancel</button>
-            <button onClick={handleCreate} disabled={!form.name || !form.slug} className="rounded-md bg-white px-4 py-2 text-sm font-medium text-black hover:bg-white/90 disabled:opacity-50">Create</button>
+            <button onClick={() => setCreateOpen(false)} className="rounded-md border border-border px-4 py-2 text-sm font-medium text-muted-foreground hover:bg-accent hover:text-foreground">Cancel</button>
+            <button onClick={handleCreate} disabled={!form.name || !form.slug} className="rounded-md bg-gradient-brand text-white shadow-lg shadow-primary/20 px-4 py-2 text-sm font-medium hover:opacity-90 disabled:opacity-50">Create</button>
           </div>
         }
       >
         <div className="space-y-4">
           <div>
-            <label className="mb-1 block text-sm font-medium text-white">Name</label>
+            <label className="mb-1 block text-sm font-medium text-foreground">Name</label>
             <input type="text" value={form.name} onChange={(e) => { const name = e.target.value; setForm(f => ({ ...f, name, slug: generateSlug(name) })) }} placeholder="e.g. Networking" className={inputCn} />
           </div>
           <div>
-            <label className="mb-1 block text-sm font-medium text-white">Slug</label>
+            <label className="mb-1 block text-sm font-medium text-foreground">Slug</label>
             <input type="text" value={form.slug} onChange={(e) => setForm({ ...form, slug: e.target.value })} className={inputCn} />
           </div>
           <div>
-            <label className="mb-1 block text-sm font-medium text-white">Description</label>
+            <label className="mb-1 block text-sm font-medium text-foreground">Description</label>
             <input type="text" value={form.description} onChange={(e) => setForm({ ...form, description: e.target.value })} placeholder="Optional" className={inputCn} />
           </div>
         </div>
@@ -156,22 +156,22 @@ export function TeamCategoriesPage() {
       <Modal isOpen={!!editCategory} onClose={() => setEditCategory(null)} title="Edit Category" size="sm"
         footer={
           <div className="flex justify-end gap-3">
-            <button onClick={() => setEditCategory(null)} className="rounded-md border border-white/10 px-4 py-2 text-sm font-medium text-white/60 hover:bg-white/10 hover:text-white">Cancel</button>
-            <button onClick={handleUpdate} disabled={!form.name || !form.slug} className="rounded-md bg-white px-4 py-2 text-sm font-medium text-black hover:bg-white/90 disabled:opacity-50">Save</button>
+            <button onClick={() => setEditCategory(null)} className="rounded-md border border-border px-4 py-2 text-sm font-medium text-muted-foreground hover:bg-accent hover:text-foreground">Cancel</button>
+            <button onClick={handleUpdate} disabled={!form.name || !form.slug} className="rounded-md bg-gradient-brand text-white shadow-lg shadow-primary/20 px-4 py-2 text-sm font-medium hover:opacity-90 disabled:opacity-50">Save</button>
           </div>
         }
       >
         <div className="space-y-4">
           <div>
-            <label className="mb-1 block text-sm font-medium text-white">Name</label>
+            <label className="mb-1 block text-sm font-medium text-foreground">Name</label>
             <input type="text" value={form.name} onChange={(e) => setForm({ ...form, name: e.target.value })} className={inputCn} />
           </div>
           <div>
-            <label className="mb-1 block text-sm font-medium text-white">Slug</label>
+            <label className="mb-1 block text-sm font-medium text-foreground">Slug</label>
             <input type="text" value={form.slug} onChange={(e) => setForm({ ...form, slug: e.target.value })} className={inputCn} />
           </div>
           <div>
-            <label className="mb-1 block text-sm font-medium text-white">Description</label>
+            <label className="mb-1 block text-sm font-medium text-foreground">Description</label>
             <input type="text" value={form.description} onChange={(e) => setForm({ ...form, description: e.target.value })} placeholder="Optional" className={inputCn} />
           </div>
         </div>
diff --git a/frontend/src/pages/admin/AuditLogsPage.tsx b/frontend/src/pages/admin/AuditLogsPage.tsx
index 2d6e83b5..2158bf51 100644
--- a/frontend/src/pages/admin/AuditLogsPage.tsx
+++ b/frontend/src/pages/admin/AuditLogsPage.tsx
@@ -64,7 +64,7 @@ export function AuditLogsPage() {
       render: (log) => (
         <button
           onClick={() => setExpandedId(expandedId === log.id ? null : log.id)}
-          className="p-1 text-white/50 hover:text-white"
+          className="p-1 text-muted-foreground hover:text-foreground"
         >
           {expandedId === log.id ? (
             <ChevronDown className="h-4 w-4" />
@@ -78,14 +78,14 @@ export function AuditLogsPage() {
       key: 'action',
       header: 'Action',
       render: (log) => (
-        <span className="text-sm font-medium text-white">{log.action}</span>
+        <span className="text-sm font-medium text-foreground">{log.action}</span>
       ),
     },
     {
       key: 'resource',
       header: 'Resource',
       render: (log) => (
-        <span className="text-sm text-white/40">
+        <span className="text-sm text-muted-foreground">
           {log.resource_type}{log.resource_id ? ` (${log.resource_id.slice(0, 8)}...)` : ''}
         </span>
       ),
@@ -94,14 +94,14 @@ export function AuditLogsPage() {
       key: 'user',
       header: 'User',
       render: (log) => (
-        <span className="text-sm text-white/40">{log.user_email || 'System'}</span>
+        <span className="text-sm text-muted-foreground">{log.user_email || 'System'}</span>
       ),
     },
     {
       key: 'created_at',
       header: 'Time',
       render: (log) => (
-        <span className="text-sm text-white/40">
+        <span className="text-sm text-muted-foreground">
           {new Date(log.created_at).toLocaleString()}
         </span>
       ),
@@ -117,8 +117,8 @@ export function AuditLogsPage() {
           <button
             onClick={handleExport}
             className={cn(
-              'flex items-center gap-2 rounded-md border border-white/10 px-4 py-2 text-sm font-medium',
-              'text-white/60 hover:bg-white/10 hover:text-white'
+              'flex items-center gap-2 rounded-md border border-border px-4 py-2 text-sm font-medium',
+              'text-muted-foreground hover:bg-accent hover:text-foreground'
             )}
           >
             <Download className="h-4 w-4" />
@@ -134,8 +134,8 @@ export function AuditLogsPage() {
           onChange={(e) => { setActionFilter(e.target.value); setPage(1) }}
           placeholder="Filter by action..."
           className={cn(
-            'h-9 rounded-md border border-white/10 bg-black/50 px-3 text-sm text-white',
-            'placeholder:text-white/40 focus:outline-none focus:border-white/30 focus:ring-2 focus:ring-white/20'
+            'h-9 rounded-md border border-border bg-card px-3 text-sm text-foreground',
+            'placeholder:text-muted-foreground focus:outline-none focus:border-primary focus:ring-2 focus:ring-primary/20'
           )}
         />
         <input
@@ -144,8 +144,8 @@ export function AuditLogsPage() {
           onChange={(e) => { setResourceFilter(e.target.value); setPage(1) }}
           placeholder="Filter by resource type..."
           className={cn(
-            'h-9 rounded-md border border-white/10 bg-black/50 px-3 text-sm text-white',
-            'placeholder:text-white/40 focus:outline-none focus:border-white/30 focus:ring-2 focus:ring-white/20'
+            'h-9 rounded-md border border-border bg-card px-3 text-sm text-foreground',
+            'placeholder:text-muted-foreground focus:outline-none focus:border-primary focus:ring-2 focus:ring-primary/20'
           )}
         />
       </div>
@@ -166,9 +166,9 @@ export function AuditLogsPage() {
 
       {/* Expanded details row */}
       {expandedId && logs.find(l => l.id === expandedId)?.details && (
-        <div className="rounded-md border border-white/[0.06] bg-white/[0.02] p-4">
-          <h4 className="mb-2 text-sm font-medium text-white">Details</h4>
-          <pre className="overflow-x-auto rounded bg-black/50 p-3 text-xs text-white/40">
+        <div className="rounded-md border border-border bg-accent p-4">
+          <h4 className="mb-2 text-sm font-medium text-foreground">Details</h4>
+          <pre className="overflow-x-auto rounded bg-card p-3 text-xs text-muted-foreground">
             {JSON.stringify(logs.find(l => l.id === expandedId)?.details, null, 2)}
           </pre>
         </div>
diff --git a/frontend/src/pages/admin/DashboardPage.tsx b/frontend/src/pages/admin/DashboardPage.tsx
index fe193cb3..3df9b160 100644
--- a/frontend/src/pages/admin/DashboardPage.tsx
+++ b/frontend/src/pages/admin/DashboardPage.tsx
@@ -14,13 +14,13 @@ interface MetricCardProps {
 
 function MetricCard({ label, value, icon }: MetricCardProps) {
   return (
-    <div className="glass-card rounded-2xl p-6">
+    <div className="bg-card border border-border rounded-xl p-6">
       <div className="flex items-center justify-between">
         <div>
-          <p className="text-sm text-white/40">{label}</p>
-          <p className="mt-1 text-3xl font-bold text-white">{value}</p>
+          <p className="text-sm text-muted-foreground">{label}</p>
+          <p className="mt-1 text-3xl font-bold text-foreground">{value}</p>
         </div>
-        <div className="rounded-lg bg-white/[0.06] p-3 text-white/50">{icon}</div>
+        <div className="rounded-lg bg-accent p-3 text-muted-foreground">{icon}</div>
       </div>
     </div>
   )
@@ -56,7 +56,7 @@ export function DashboardPage() {
       {loading ? (
         <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
           {Array.from({ length: 4 }).map((_, i) => (
-            <div key={i} className="h-32 animate-pulse rounded-lg bg-white/10" />
+            <div key={i} className="h-32 animate-pulse rounded-lg bg-accent" />
           ))}
         </div>
       ) : metrics && (
@@ -71,18 +71,18 @@ export function DashboardPage() {
       {/* Recent Activity */}
       {activity.length > 0 && (
         <div>
-          <h2 className="text-lg font-semibold text-white">Recent Activity</h2>
+          <h2 className="text-lg font-semibold text-foreground">Recent Activity</h2>
           <div className="mt-3 space-y-2">
             {activity.slice(0, 10).map((entry) => (
-              <div key={entry.id} className="flex items-center justify-between rounded-md border border-white/[0.06] px-4 py-3 text-sm">
+              <div key={entry.id} className="flex items-center justify-between rounded-md border border-border px-4 py-3 text-sm">
                 <div>
-                  <span className="font-medium text-white">{entry.action}</span>
-                  <span className="ml-2 text-white/40">{entry.resource_type}</span>
+                  <span className="font-medium text-foreground">{entry.action}</span>
+                  <span className="ml-2 text-muted-foreground">{entry.resource_type}</span>
                   {entry.user_email && (
-                    <span className="ml-2 text-white/40">by {entry.user_email}</span>
+                    <span className="ml-2 text-muted-foreground">by {entry.user_email}</span>
                   )}
                 </div>
-                <span className="text-xs text-white/40">
+                <span className="text-xs text-muted-foreground">
                   {new Date(entry.created_at).toLocaleString()}
                 </span>
               </div>
@@ -93,18 +93,18 @@ export function DashboardPage() {
 
       {/* Quick Links */}
       <div>
-        <h2 className="text-lg font-semibold text-white">Quick Links</h2>
+        <h2 className="text-lg font-semibold text-foreground">Quick Links</h2>
         <div className="mt-3 grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-4">
           {quickLinks.map((link) => (
             <Link
               key={link.to}
               to={link.to}
               className={cn(
-                'flex items-center gap-3 glass-card rounded-2xl p-4',
-                'text-sm font-medium text-white transition-colors hover:bg-white/[0.06]'
+                'flex items-center gap-3 bg-card border border-border rounded-xl p-4',
+                'text-sm font-medium text-foreground transition-colors hover:bg-accent'
               )}
             >
-              <link.icon className="h-5 w-5 text-white/50" />
+              <link.icon className="h-5 w-5 text-muted-foreground" />
               {link.label}
             </Link>
           ))}
diff --git a/frontend/src/pages/admin/FeatureFlagsPage.tsx b/frontend/src/pages/admin/FeatureFlagsPage.tsx
index 7da6f4d7..2b612454 100644
--- a/frontend/src/pages/admin/FeatureFlagsPage.tsx
+++ b/frontend/src/pages/admin/FeatureFlagsPage.tsx
@@ -93,11 +93,11 @@ export function FeatureFlagsPage() {
   const flagColumns: Column<FeatureFlagResponse>[] = [
     { key: 'name', header: 'Name', render: (f) => (
       <div>
-        <div className="font-medium text-white">{f.display_name}</div>
-        <div className="text-xs text-white/40">{f.flag_key}</div>
+        <div className="font-medium text-foreground">{f.display_name}</div>
+        <div className="text-xs text-muted-foreground">{f.flag_key}</div>
       </div>
     )},
-    { key: 'description', header: 'Description', render: (f) => <span className="text-sm text-white/40">{f.description || '-'}</span> },
+    { key: 'description', header: 'Description', render: (f) => <span className="text-sm text-muted-foreground">{f.description || '-'}</span> },
     ...PLANS.map(plan => ({
       key: plan,
       header: plan.charAt(0).toUpperCase() + plan.slice(1),
@@ -109,7 +109,7 @@ export function FeatureFlagsPage() {
             onClick={() => handleTogglePlan(f.id, plan, enabled)}
             className={cn(
               'h-6 w-10 rounded-full transition-colors',
-              enabled ? 'bg-emerald-400' : 'bg-white/10'
+              enabled ? 'bg-emerald-400' : 'bg-accent'
             )}
           >
             <div className={cn(
@@ -131,10 +131,10 @@ export function FeatureFlagsPage() {
   ]
 
   const overrideColumns: Column<AccountFeatureOverrideResponse>[] = [
-    { key: 'account', header: 'Account', render: (o) => <span className="text-sm font-medium text-white">{o.account_display_code || o.account_id.slice(0, 8)}</span> },
-    { key: 'flag', header: 'Flag', render: (o) => <span className="text-sm text-white/40">{o.flag_display_name || o.flag_key || o.flag_id.slice(0, 8)}</span> },
+    { key: 'account', header: 'Account', render: (o) => <span className="text-sm font-medium text-foreground">{o.account_display_code || o.account_id.slice(0, 8)}</span> },
+    { key: 'flag', header: 'Flag', render: (o) => <span className="text-sm text-muted-foreground">{o.flag_display_name || o.flag_key || o.flag_id.slice(0, 8)}</span> },
     { key: 'enabled', header: 'Enabled', render: (o) => <StatusBadge variant={o.enabled ? 'success' : 'destructive'}>{o.enabled ? 'Yes' : 'No'}</StatusBadge> },
-    { key: 'note', header: 'Note', render: (o) => <span className="text-sm text-white/40">{o.note || '-'}</span> },
+    { key: 'note', header: 'Note', render: (o) => <span className="text-sm text-muted-foreground">{o.note || '-'}</span> },
     {
       key: 'actions', header: '', className: 'w-12',
       render: (o) => (
@@ -145,7 +145,7 @@ export function FeatureFlagsPage() {
     },
   ]
 
-  const inputCn = cn('w-full rounded-md border border-white/10 bg-black/50 px-3 py-2 text-sm text-white', 'placeholder:text-white/40 focus:outline-none focus:border-white/30 focus:ring-2 focus:ring-white/20')
+  const inputCn = cn('w-full rounded-md border border-border bg-card px-3 py-2 text-sm text-foreground', 'placeholder:text-muted-foreground focus:outline-none focus:border-primary focus:ring-2 focus:ring-primary/20')
 
   return (
     <div className="space-y-8">
@@ -153,7 +153,7 @@ export function FeatureFlagsPage() {
         title="Feature Flags"
         description="Manage feature availability per plan and account"
         action={
-          <button onClick={() => setCreateOpen(true)} className={cn('flex items-center gap-2 rounded-md px-4 py-2 text-sm font-medium', 'bg-white text-black hover:bg-white/90')}>
+          <button onClick={() => setCreateOpen(true)} className={cn('flex items-center gap-2 rounded-md px-4 py-2 text-sm font-medium', 'bg-gradient-brand text-white shadow-lg shadow-primary/20 hover:opacity-90')}>
             <Plus className="h-4 w-4" />
             Create Flag
           </button>
@@ -161,7 +161,7 @@ export function FeatureFlagsPage() {
       />
 
       <div>
-        <h2 className="text-lg font-semibold text-white">Feature Matrix</h2>
+        <h2 className="text-lg font-semibold text-foreground">Feature Matrix</h2>
         <div className="mt-3">
           <DataTable columns={flagColumns} data={flags} keyExtractor={(f) => f.id} isLoading={loading}
             emptyState={<EmptyState icon={<ToggleLeft className="h-12 w-12" />} title="No feature flags" description="Create feature flags to control availability per plan." />}
@@ -171,8 +171,8 @@ export function FeatureFlagsPage() {
 
       <div>
         <div className="flex items-center justify-between">
-          <h2 className="text-lg font-semibold text-white">Account Overrides</h2>
-          <button onClick={() => setOverrideOpen(true)} className={cn('flex items-center gap-2 rounded-md px-4 py-2 text-sm font-medium', 'bg-white text-black hover:bg-white/90')}>
+          <h2 className="text-lg font-semibold text-foreground">Account Overrides</h2>
+          <button onClick={() => setOverrideOpen(true)} className={cn('flex items-center gap-2 rounded-md px-4 py-2 text-sm font-medium', 'bg-gradient-brand text-white shadow-lg shadow-primary/20 hover:opacity-90')}>
             <Plus className="h-4 w-4" />
             Add Override
           </button>
@@ -188,22 +188,22 @@ export function FeatureFlagsPage() {
       <Modal isOpen={createOpen} onClose={() => setCreateOpen(false)} title="Create Feature Flag" size="sm"
         footer={
           <div className="flex justify-end gap-3">
-            <button onClick={() => setCreateOpen(false)} className="rounded-md border border-white/10 px-4 py-2 text-sm font-medium text-white/60 hover:bg-white/10 hover:text-white">Cancel</button>
-            <button onClick={handleCreate} disabled={!createForm.flag_key || !createForm.display_name} className="rounded-md bg-white px-4 py-2 text-sm font-medium text-black hover:bg-white/90 disabled:opacity-50">Create</button>
+            <button onClick={() => setCreateOpen(false)} className="rounded-md border border-border px-4 py-2 text-sm font-medium text-muted-foreground hover:bg-accent hover:text-foreground">Cancel</button>
+            <button onClick={handleCreate} disabled={!createForm.flag_key || !createForm.display_name} className="rounded-md bg-gradient-brand text-white shadow-lg shadow-primary/20 px-4 py-2 text-sm font-medium hover:opacity-90 disabled:opacity-50">Create</button>
           </div>
         }
       >
         <div className="space-y-4">
           <div>
-            <label className="mb-1 block text-sm font-medium text-white">Flag Key</label>
+            <label className="mb-1 block text-sm font-medium text-foreground">Flag Key</label>
             <input type="text" value={createForm.flag_key} onChange={(e) => setCreateForm({ ...createForm, flag_key: e.target.value })} placeholder="e.g. custom_branding" className={inputCn} />
           </div>
           <div>
-            <label className="mb-1 block text-sm font-medium text-white">Display Name</label>
+            <label className="mb-1 block text-sm font-medium text-foreground">Display Name</label>
             <input type="text" value={createForm.display_name} onChange={(e) => setCreateForm({ ...createForm, display_name: e.target.value })} placeholder="e.g. Custom Branding" className={inputCn} />
           </div>
           <div>
-            <label className="mb-1 block text-sm font-medium text-white">Description</label>
+            <label className="mb-1 block text-sm font-medium text-foreground">Description</label>
             <input type="text" value={createForm.description ?? ''} onChange={(e) => setCreateForm({ ...createForm, description: e.target.value || null })} placeholder="Optional description" className={inputCn} />
           </div>
         </div>
@@ -213,29 +213,29 @@ export function FeatureFlagsPage() {
       <Modal isOpen={overrideOpen} onClose={() => setOverrideOpen(false)} title="Add Account Override" size="sm"
         footer={
           <div className="flex justify-end gap-3">
-            <button onClick={() => setOverrideOpen(false)} className="rounded-md border border-white/10 px-4 py-2 text-sm font-medium text-white/60 hover:bg-white/10 hover:text-white">Cancel</button>
-            <button onClick={handleCreateOverride} disabled={!overrideForm.account_display_code || !overrideForm.flag_id} className="rounded-md bg-white px-4 py-2 text-sm font-medium text-black hover:bg-white/90 disabled:opacity-50">Create</button>
+            <button onClick={() => setOverrideOpen(false)} className="rounded-md border border-border px-4 py-2 text-sm font-medium text-muted-foreground hover:bg-accent hover:text-foreground">Cancel</button>
+            <button onClick={handleCreateOverride} disabled={!overrideForm.account_display_code || !overrideForm.flag_id} className="rounded-md bg-gradient-brand text-white shadow-lg shadow-primary/20 px-4 py-2 text-sm font-medium hover:opacity-90 disabled:opacity-50">Create</button>
           </div>
         }
       >
         <div className="space-y-4">
           <div>
-            <label className="mb-1 block text-sm font-medium text-white">Account Display Code</label>
+            <label className="mb-1 block text-sm font-medium text-foreground">Account Display Code</label>
             <input type="text" value={overrideForm.account_display_code} onChange={(e) => setOverrideForm({ ...overrideForm, account_display_code: e.target.value })} placeholder="e.g. ABC-1234" className={inputCn} />
           </div>
           <div>
-            <label className="mb-1 block text-sm font-medium text-white">Feature Flag</label>
+            <label className="mb-1 block text-sm font-medium text-foreground">Feature Flag</label>
             <select value={overrideForm.flag_id} onChange={(e) => setOverrideForm({ ...overrideForm, flag_id: e.target.value })} className={inputCn}>
               <option value="">Select a flag...</option>
               {flags.map(f => <option key={f.id} value={f.id}>{f.display_name}</option>)}
             </select>
           </div>
           <div className="flex items-center gap-2">
-            <input type="checkbox" id="override-enabled" checked={overrideForm.enabled} onChange={(e) => setOverrideForm({ ...overrideForm, enabled: e.target.checked })} className="h-4 w-4 rounded border-white/10" />
-            <label htmlFor="override-enabled" className="text-sm font-medium text-white">Enabled</label>
+            <input type="checkbox" id="override-enabled" checked={overrideForm.enabled} onChange={(e) => setOverrideForm({ ...overrideForm, enabled: e.target.checked })} className="h-4 w-4 rounded border-border" />
+            <label htmlFor="override-enabled" className="text-sm font-medium text-foreground">Enabled</label>
           </div>
           <div>
-            <label className="mb-1 block text-sm font-medium text-white">Note</label>
+            <label className="mb-1 block text-sm font-medium text-foreground">Note</label>
             <input type="text" value={overrideForm.note ?? ''} onChange={(e) => setOverrideForm({ ...overrideForm, note: e.target.value || null })} placeholder="Reason" className={inputCn} />
           </div>
         </div>
diff --git a/frontend/src/pages/admin/GlobalCategoriesPage.tsx b/frontend/src/pages/admin/GlobalCategoriesPage.tsx
index 4cba3fe9..4a465610 100644
--- a/frontend/src/pages/admin/GlobalCategoriesPage.tsx
+++ b/frontend/src/pages/admin/GlobalCategoriesPage.tsx
@@ -72,10 +72,10 @@ export function GlobalCategoriesPage() {
   }
 
   const columns: Column<AdminCategory>[] = [
-    { key: 'name', header: 'Name', render: (c) => <span className="font-medium text-white">{c.name}</span> },
-    { key: 'slug', header: 'Slug', render: (c) => <span className="text-sm text-white/40">{c.slug}</span> },
-    { key: 'description', header: 'Description', render: (c) => <span className="text-sm text-white/40">{c.description || '-'}</span> },
-    { key: 'tree_count', header: 'Trees', render: (c) => <span className="text-sm text-white/40">{c.tree_count}</span> },
+    { key: 'name', header: 'Name', render: (c) => <span className="font-medium text-foreground">{c.name}</span> },
+    { key: 'slug', header: 'Slug', render: (c) => <span className="text-sm text-muted-foreground">{c.slug}</span> },
+    { key: 'description', header: 'Description', render: (c) => <span className="text-sm text-muted-foreground">{c.description || '-'}</span> },
+    { key: 'tree_count', header: 'Trees', render: (c) => <span className="text-sm text-muted-foreground">{c.tree_count}</span> },
     {
       key: 'actions', header: '', className: 'w-12',
       render: (c) => (
@@ -87,7 +87,7 @@ export function GlobalCategoriesPage() {
     },
   ]
 
-  const inputCn = cn('w-full rounded-md border border-white/10 bg-black/50 px-3 py-2 text-sm text-white', 'placeholder:text-white/40 focus:outline-none focus:border-white/30 focus:ring-2 focus:ring-white/20')
+  const inputCn = cn('w-full rounded-md border border-border bg-card px-3 py-2 text-sm text-foreground', 'placeholder:text-muted-foreground focus:outline-none focus:border-primary focus:ring-2 focus:ring-primary/20')
 
   return (
     <div className="space-y-6">
@@ -95,7 +95,7 @@ export function GlobalCategoriesPage() {
         title="Global Categories"
         description="Manage tree categories available to all accounts"
         action={
-          <button onClick={() => setCreateOpen(true)} className={cn('flex items-center gap-2 rounded-md px-4 py-2 text-sm font-medium', 'bg-white text-black hover:bg-white/90')}>
+          <button onClick={() => setCreateOpen(true)} className={cn('flex items-center gap-2 rounded-md px-4 py-2 text-sm font-medium', 'bg-gradient-brand text-white shadow-lg shadow-primary/20 hover:opacity-90')}>
             <Plus className="h-4 w-4" />
             Create Category
           </button>
@@ -118,22 +118,22 @@ export function GlobalCategoriesPage() {
         size="sm"
         footer={
           <div className="flex justify-end gap-3">
-            <button onClick={() => setCreateOpen(false)} className="rounded-md border border-white/10 px-4 py-2 text-sm font-medium text-white/60 hover:bg-white/10 hover:text-white">Cancel</button>
-            <button onClick={handleCreate} disabled={!form.name || !form.slug} className="rounded-md bg-white px-4 py-2 text-sm font-medium text-black hover:bg-white/90 disabled:opacity-50">Create</button>
+            <button onClick={() => setCreateOpen(false)} className="rounded-md border border-border px-4 py-2 text-sm font-medium text-muted-foreground hover:bg-accent hover:text-foreground">Cancel</button>
+            <button onClick={handleCreate} disabled={!form.name || !form.slug} className="rounded-md bg-gradient-brand text-white shadow-lg shadow-primary/20 px-4 py-2 text-sm font-medium hover:opacity-90 disabled:opacity-50">Create</button>
           </div>
         }
       >
         <div className="space-y-4">
           <div>
-            <label className="mb-1 block text-sm font-medium text-white">Name</label>
+            <label className="mb-1 block text-sm font-medium text-foreground">Name</label>
             <input type="text" value={form.name} onChange={(e) => { const name = e.target.value; setForm(f => ({ ...f, name, slug: generateSlug(name) })) }} placeholder="e.g. Networking" className={inputCn} />
           </div>
           <div>
-            <label className="mb-1 block text-sm font-medium text-white">Slug</label>
+            <label className="mb-1 block text-sm font-medium text-foreground">Slug</label>
             <input type="text" value={form.slug} onChange={(e) => setForm({ ...form, slug: e.target.value })} placeholder="e.g. networking" className={inputCn} />
           </div>
           <div>
-            <label className="mb-1 block text-sm font-medium text-white">Description</label>
+            <label className="mb-1 block text-sm font-medium text-foreground">Description</label>
             <input type="text" value={form.description ?? ''} onChange={(e) => setForm({ ...form, description: e.target.value || null })} placeholder="Optional description" className={inputCn} />
           </div>
         </div>
@@ -147,22 +147,22 @@ export function GlobalCategoriesPage() {
         size="sm"
         footer={
           <div className="flex justify-end gap-3">
-            <button onClick={() => setEditCategory(null)} className="rounded-md border border-white/10 px-4 py-2 text-sm font-medium text-white/60 hover:bg-white/10 hover:text-white">Cancel</button>
-            <button onClick={handleUpdate} disabled={!form.name || !form.slug} className="rounded-md bg-white px-4 py-2 text-sm font-medium text-black hover:bg-white/90 disabled:opacity-50">Save</button>
+            <button onClick={() => setEditCategory(null)} className="rounded-md border border-border px-4 py-2 text-sm font-medium text-muted-foreground hover:bg-accent hover:text-foreground">Cancel</button>
+            <button onClick={handleUpdate} disabled={!form.name || !form.slug} className="rounded-md bg-gradient-brand text-white shadow-lg shadow-primary/20 px-4 py-2 text-sm font-medium hover:opacity-90 disabled:opacity-50">Save</button>
           </div>
         }
       >
         <div className="space-y-4">
           <div>
-            <label className="mb-1 block text-sm font-medium text-white">Name</label>
+            <label className="mb-1 block text-sm font-medium text-foreground">Name</label>
             <input type="text" value={form.name} onChange={(e) => setForm({ ...form, name: e.target.value })} placeholder="e.g. Networking" className={inputCn} />
           </div>
           <div>
-            <label className="mb-1 block text-sm font-medium text-white">Slug</label>
+            <label className="mb-1 block text-sm font-medium text-foreground">Slug</label>
             <input type="text" value={form.slug} onChange={(e) => setForm({ ...form, slug: e.target.value })} placeholder="e.g. networking" className={inputCn} />
           </div>
           <div>
-            <label className="mb-1 block text-sm font-medium text-white">Description</label>
+            <label className="mb-1 block text-sm font-medium text-foreground">Description</label>
             <input type="text" value={form.description ?? ''} onChange={(e) => setForm({ ...form, description: e.target.value || null })} placeholder="Optional description" className={inputCn} />
           </div>
         </div>
diff --git a/frontend/src/pages/admin/InviteCodesPage.tsx b/frontend/src/pages/admin/InviteCodesPage.tsx
index 02c100a5..8a2fd120 100644
--- a/frontend/src/pages/admin/InviteCodesPage.tsx
+++ b/frontend/src/pages/admin/InviteCodesPage.tsx
@@ -108,8 +108,8 @@ export function InviteCodesPage() {
   }
 
   const inputClass = cn(
-    'w-full rounded-md border border-white/10 bg-black/50 px-3 py-2 text-sm text-white',
-    'placeholder:text-white/40 focus:outline-none focus:border-white/30 focus:ring-2 focus:ring-white/20'
+    'w-full rounded-md border border-border bg-card px-3 py-2 text-sm text-foreground',
+    'placeholder:text-muted-foreground focus:outline-none focus:border-primary focus:ring-2 focus:ring-primary/20'
   )
 
   const columns: Column<InviteCodeResponse>[] = [
@@ -117,7 +117,7 @@ export function InviteCodesPage() {
       key: 'code',
       header: 'Code',
       render: (c) => (
-        <code className="rounded bg-white/10 px-2 py-1 text-sm font-mono text-white/70">{c.code}</code>
+        <code className="rounded bg-accent px-2 py-1 text-sm font-mono text-muted-foreground">{c.code}</code>
       ),
     },
     {
@@ -128,12 +128,12 @@ export function InviteCodesPage() {
           {c.email_sent ? (
             <MailCheck className="h-3.5 w-3.5 text-emerald-400" />
           ) : (
-            <Mail className="h-3.5 w-3.5 text-white/30" />
+            <Mail className="h-3.5 w-3.5 text-muted-foreground" />
           )}
-          <span className="text-sm text-white/60">{c.email}</span>
+          <span className="text-sm text-muted-foreground">{c.email}</span>
         </div>
       ) : (
-        <span className="text-sm text-white/30">&mdash;</span>
+        <span className="text-sm text-muted-foreground">&mdash;</span>
       ),
     },
     {
@@ -149,9 +149,9 @@ export function InviteCodesPage() {
       key: 'trial',
       header: 'Trial',
       render: (c) => c.has_trial ? (
-        <span className="text-sm text-white/60">{c.trial_duration_days}d</span>
+        <span className="text-sm text-muted-foreground">{c.trial_duration_days}d</span>
       ) : (
-        <span className="text-sm text-white/30">&mdash;</span>
+        <span className="text-sm text-muted-foreground">&mdash;</span>
       ),
     },
     {
@@ -168,7 +168,7 @@ export function InviteCodesPage() {
       key: 'expires_at',
       header: 'Expires',
       render: (c) => (
-        <span className="text-sm text-white/40">
+        <span className="text-sm text-muted-foreground">
           {c.expires_at ? new Date(c.expires_at).toLocaleDateString() : 'Never'}
         </span>
       ),
@@ -177,7 +177,7 @@ export function InviteCodesPage() {
       key: 'created_at',
       header: 'Created',
       render: (c) => (
-        <span className="text-sm text-white/40">
+        <span className="text-sm text-muted-foreground">
           {new Date(c.created_at).toLocaleDateString()}
         </span>
       ),
@@ -219,7 +219,7 @@ export function InviteCodesPage() {
             onClick={() => setCreateOpen(true)}
             className={cn(
               'flex items-center gap-2 rounded-md px-4 py-2 text-sm font-medium',
-              'bg-white text-black hover:bg-white/90'
+              'bg-gradient-brand text-white shadow-lg shadow-primary/20 hover:opacity-90'
             )}
           >
             <Plus className="h-4 w-4" />
@@ -251,14 +251,14 @@ export function InviteCodesPage() {
           <div className="flex justify-end gap-3">
             <button
               onClick={() => { setCreateOpen(false); resetForm() }}
-              className="rounded-md border border-white/10 px-4 py-2 text-sm font-medium text-white/60 hover:bg-white/10 hover:text-white"
+              className="rounded-md border border-border px-4 py-2 text-sm font-medium text-muted-foreground hover:bg-accent hover:text-foreground"
             >
               Cancel
             </button>
             <button
               onClick={handleCreate}
               disabled={creating}
-              className="rounded-md bg-white px-4 py-2 text-sm font-medium text-black hover:bg-white/90 disabled:opacity-50"
+              className="rounded-md bg-gradient-brand text-white shadow-lg shadow-primary/20 px-4 py-2 text-sm font-medium hover:opacity-90 disabled:opacity-50"
             >
               {creating ? 'Creating...' : 'Create'}
             </button>
@@ -267,7 +267,7 @@ export function InviteCodesPage() {
       >
         <div className="space-y-4">
           <div>
-            <label className="mb-1 block text-sm font-medium text-white">Recipient Email</label>
+            <label className="mb-1 block text-sm font-medium text-foreground">Recipient Email</label>
             <input
               type="email"
               value={email}
@@ -278,7 +278,7 @@ export function InviteCodesPage() {
           </div>
 
           <div>
-            <label className="mb-1 block text-sm font-medium text-white">Plan</label>
+            <label className="mb-1 block text-sm font-medium text-foreground">Plan</label>
             <select
               aria-label="Plan"
               value={assignedPlan}
@@ -297,7 +297,7 @@ export function InviteCodesPage() {
 
           {assignedPlan !== 'free' && (
             <div>
-              <label className="mb-1 block text-sm font-medium text-white">Trial Duration (days)</label>
+              <label className="mb-1 block text-sm font-medium text-foreground">Trial Duration (days)</label>
               <input
                 type="number"
                 value={trialDays}
@@ -307,12 +307,12 @@ export function InviteCodesPage() {
                 max={90}
                 className={inputClass}
               />
-              <p className="mt-1 text-xs text-white/40">Leave empty for no trial — account gets full plan immediately.</p>
+              <p className="mt-1 text-xs text-muted-foreground">Leave empty for no trial — account gets full plan immediately.</p>
             </div>
           )}
 
           <div>
-            <label className="mb-1 block text-sm font-medium text-white">Expires in (days)</label>
+            <label className="mb-1 block text-sm font-medium text-foreground">Expires in (days)</label>
             <input
               type="number"
               value={expiresInDays}
@@ -323,7 +323,7 @@ export function InviteCodesPage() {
           </div>
 
           <div>
-            <label className="mb-1 block text-sm font-medium text-white">Note</label>
+            <label className="mb-1 block text-sm font-medium text-foreground">Note</label>
             <input
               type="text"
               value={note}
diff --git a/frontend/src/pages/admin/PlanLimitsPage.tsx b/frontend/src/pages/admin/PlanLimitsPage.tsx
index 9453d10d..b451baa2 100644
--- a/frontend/src/pages/admin/PlanLimitsPage.tsx
+++ b/frontend/src/pages/admin/PlanLimitsPage.tsx
@@ -75,16 +75,16 @@ export function PlanLimitsPage() {
   }
 
   const planColumns: Column<PlanLimitConfig>[] = [
-    { key: 'plan', header: 'Plan', render: (p) => <span className="font-medium text-white capitalize">{p.plan}</span> },
-    { key: 'max_trees', header: 'Max Trees', render: (p) => <span className="text-sm text-white/40">{p.max_trees ?? 'Unlimited'}</span> },
-    { key: 'max_sessions', header: 'Sessions/Month', render: (p) => <span className="text-sm text-white/40">{p.max_sessions_per_month ?? 'Unlimited'}</span> },
-    { key: 'max_users', header: 'Max Users', render: (p) => <span className="text-sm text-white/40">{p.max_users ?? 'Unlimited'}</span> },
+    { key: 'plan', header: 'Plan', render: (p) => <span className="font-medium text-foreground capitalize">{p.plan}</span> },
+    { key: 'max_trees', header: 'Max Trees', render: (p) => <span className="text-sm text-muted-foreground">{p.max_trees ?? 'Unlimited'}</span> },
+    { key: 'max_sessions', header: 'Sessions/Month', render: (p) => <span className="text-sm text-muted-foreground">{p.max_sessions_per_month ?? 'Unlimited'}</span> },
+    { key: 'max_users', header: 'Max Users', render: (p) => <span className="text-sm text-muted-foreground">{p.max_users ?? 'Unlimited'}</span> },
     {
       key: 'actions', header: '', className: 'w-12',
       render: (p) => (
         <button
           onClick={() => setEditPlan({ ...p })}
-          className="rounded-md px-3 py-1 text-sm text-white/50 hover:bg-white/[0.06] hover:text-white"
+          className="rounded-md px-3 py-1 text-sm text-muted-foreground hover:bg-accent hover:text-foreground"
         >
           Edit
         </button>
@@ -93,11 +93,11 @@ export function PlanLimitsPage() {
   ]
 
   const overrideColumns: Column<AccountOverrideResponse>[] = [
-    { key: 'account', header: 'Account', render: (o) => <span className="text-sm font-medium text-white">{o.account_display_code || o.account_id.slice(0, 8)}</span> },
-    { key: 'max_trees', header: 'Max Trees', render: (o) => <span className="text-sm text-white/40">{o.override_max_trees ?? '-'}</span> },
-    { key: 'max_sessions', header: 'Sessions/Month', render: (o) => <span className="text-sm text-white/40">{o.override_max_sessions_per_month ?? '-'}</span> },
-    { key: 'max_users', header: 'Max Users', render: (o) => <span className="text-sm text-white/40">{o.override_max_users ?? '-'}</span> },
-    { key: 'note', header: 'Note', render: (o) => <span className="text-sm text-white/40">{o.note || '-'}</span> },
+    { key: 'account', header: 'Account', render: (o) => <span className="text-sm font-medium text-foreground">{o.account_display_code || o.account_id.slice(0, 8)}</span> },
+    { key: 'max_trees', header: 'Max Trees', render: (o) => <span className="text-sm text-muted-foreground">{o.override_max_trees ?? '-'}</span> },
+    { key: 'max_sessions', header: 'Sessions/Month', render: (o) => <span className="text-sm text-muted-foreground">{o.override_max_sessions_per_month ?? '-'}</span> },
+    { key: 'max_users', header: 'Max Users', render: (o) => <span className="text-sm text-muted-foreground">{o.override_max_users ?? '-'}</span> },
+    { key: 'note', header: 'Note', render: (o) => <span className="text-sm text-muted-foreground">{o.note || '-'}</span> },
     {
       key: 'actions', header: '', className: 'w-12',
       render: (o) => (
@@ -109,8 +109,8 @@ export function PlanLimitsPage() {
   ]
 
   const inputCn = cn(
-    'w-full rounded-md border border-white/10 bg-black/50 px-3 py-2 text-sm text-white',
-    'placeholder:text-white/40 focus:outline-none focus:border-white/30 focus:ring-2 focus:ring-white/20'
+    'w-full rounded-md border border-border bg-card px-3 py-2 text-sm text-foreground',
+    'placeholder:text-muted-foreground focus:outline-none focus:border-primary focus:ring-2 focus:ring-primary/20'
   )
 
   return (
@@ -118,7 +118,7 @@ export function PlanLimitsPage() {
       <PageHeader title="Plan Limits" description="Configure plan tier limits and account-specific overrides" />
 
       <div>
-        <h2 className="text-lg font-semibold text-white">Plan Defaults</h2>
+        <h2 className="text-lg font-semibold text-foreground">Plan Defaults</h2>
         <div className="mt-3">
           <DataTable columns={planColumns} data={plans} keyExtractor={(p) => p.plan} isLoading={loading} />
         </div>
@@ -126,10 +126,10 @@ export function PlanLimitsPage() {
 
       <div>
         <div className="flex items-center justify-between">
-          <h2 className="text-lg font-semibold text-white">Account Overrides</h2>
+          <h2 className="text-lg font-semibold text-foreground">Account Overrides</h2>
           <button
             onClick={() => setCreateOverride(true)}
-            className={cn('flex items-center gap-2 rounded-md px-4 py-2 text-sm font-medium', 'bg-white text-black hover:bg-white/90')}
+            className={cn('flex items-center gap-2 rounded-md px-4 py-2 text-sm font-medium', 'bg-gradient-brand text-white shadow-lg shadow-primary/20 hover:opacity-90')}
           >
             <Plus className="h-4 w-4" />
             Add Override
@@ -154,23 +154,23 @@ export function PlanLimitsPage() {
         size="sm"
         footer={
           <div className="flex justify-end gap-3">
-            <button onClick={() => setEditPlan(null)} className="rounded-md border border-white/10 px-4 py-2 text-sm font-medium text-white/60 hover:bg-white/10 hover:text-white">Cancel</button>
-            <button onClick={handleSavePlan} className="rounded-md bg-white px-4 py-2 text-sm font-medium text-black hover:bg-white/90">Save</button>
+            <button onClick={() => setEditPlan(null)} className="rounded-md border border-border px-4 py-2 text-sm font-medium text-muted-foreground hover:bg-accent hover:text-foreground">Cancel</button>
+            <button onClick={handleSavePlan} className="rounded-md bg-gradient-brand text-white shadow-lg shadow-primary/20 px-4 py-2 text-sm font-medium hover:opacity-90">Save</button>
           </div>
         }
       >
         {editPlan && (
           <div className="space-y-4">
             <div>
-              <label className="mb-1 block text-sm font-medium text-white">Max Trees (empty = unlimited)</label>
+              <label className="mb-1 block text-sm font-medium text-foreground">Max Trees (empty = unlimited)</label>
               <input type="number" value={editPlan.max_trees ?? ''} onChange={(e) => setEditPlan({ ...editPlan, max_trees: e.target.value ? parseInt(e.target.value) : null })} className={inputCn} />
             </div>
             <div>
-              <label className="mb-1 block text-sm font-medium text-white">Max Sessions/Month (empty = unlimited)</label>
+              <label className="mb-1 block text-sm font-medium text-foreground">Max Sessions/Month (empty = unlimited)</label>
               <input type="number" value={editPlan.max_sessions_per_month ?? ''} onChange={(e) => setEditPlan({ ...editPlan, max_sessions_per_month: e.target.value ? parseInt(e.target.value) : null })} className={inputCn} />
             </div>
             <div>
-              <label className="mb-1 block text-sm font-medium text-white">Max Users (empty = unlimited)</label>
+              <label className="mb-1 block text-sm font-medium text-foreground">Max Users (empty = unlimited)</label>
               <input type="number" value={editPlan.max_users ?? ''} onChange={(e) => setEditPlan({ ...editPlan, max_users: e.target.value ? parseInt(e.target.value) : null })} className={inputCn} />
             </div>
           </div>
@@ -185,30 +185,30 @@ export function PlanLimitsPage() {
         size="sm"
         footer={
           <div className="flex justify-end gap-3">
-            <button onClick={() => setCreateOverride(false)} className="rounded-md border border-white/10 px-4 py-2 text-sm font-medium text-white/60 hover:bg-white/10 hover:text-white">Cancel</button>
-            <button onClick={handleCreateOverride} disabled={!overrideForm.account_display_code} className="rounded-md bg-white px-4 py-2 text-sm font-medium text-black hover:bg-white/90 disabled:opacity-50">Create</button>
+            <button onClick={() => setCreateOverride(false)} className="rounded-md border border-border px-4 py-2 text-sm font-medium text-muted-foreground hover:bg-accent hover:text-foreground">Cancel</button>
+            <button onClick={handleCreateOverride} disabled={!overrideForm.account_display_code} className="rounded-md bg-gradient-brand text-white shadow-lg shadow-primary/20 px-4 py-2 text-sm font-medium hover:opacity-90 disabled:opacity-50">Create</button>
           </div>
         }
       >
         <div className="space-y-4">
           <div>
-            <label className="mb-1 block text-sm font-medium text-white">Account Display Code</label>
+            <label className="mb-1 block text-sm font-medium text-foreground">Account Display Code</label>
             <input type="text" value={overrideForm.account_display_code} onChange={(e) => setOverrideForm({ ...overrideForm, account_display_code: e.target.value })} placeholder="e.g. ABC-1234" className={inputCn} />
           </div>
           <div>
-            <label className="mb-1 block text-sm font-medium text-white">Max Trees Override</label>
+            <label className="mb-1 block text-sm font-medium text-foreground">Max Trees Override</label>
             <input type="number" value={overrideForm.override_max_trees ?? ''} onChange={(e) => setOverrideForm({ ...overrideForm, override_max_trees: e.target.value ? parseInt(e.target.value) : null })} className={inputCn} />
           </div>
           <div>
-            <label className="mb-1 block text-sm font-medium text-white">Max Sessions/Month Override</label>
+            <label className="mb-1 block text-sm font-medium text-foreground">Max Sessions/Month Override</label>
             <input type="number" value={overrideForm.override_max_sessions_per_month ?? ''} onChange={(e) => setOverrideForm({ ...overrideForm, override_max_sessions_per_month: e.target.value ? parseInt(e.target.value) : null })} className={inputCn} />
           </div>
           <div>
-            <label className="mb-1 block text-sm font-medium text-white">Max Users Override</label>
+            <label className="mb-1 block text-sm font-medium text-foreground">Max Users Override</label>
             <input type="number" value={overrideForm.override_max_users ?? ''} onChange={(e) => setOverrideForm({ ...overrideForm, override_max_users: e.target.value ? parseInt(e.target.value) : null })} className={inputCn} />
           </div>
           <div>
-            <label className="mb-1 block text-sm font-medium text-white">Note</label>
+            <label className="mb-1 block text-sm font-medium text-foreground">Note</label>
             <input type="text" value={overrideForm.note ?? ''} onChange={(e) => setOverrideForm({ ...overrideForm, note: e.target.value || null })} placeholder="Reason for override" className={inputCn} />
           </div>
         </div>
diff --git a/frontend/src/pages/admin/SettingsPage.tsx b/frontend/src/pages/admin/SettingsPage.tsx
index 4e2edb61..23290bd6 100644
--- a/frontend/src/pages/admin/SettingsPage.tsx
+++ b/frontend/src/pages/admin/SettingsPage.tsx
@@ -36,7 +36,7 @@ export function SettingsPage() {
     return (
       <div className="space-y-6">
         <PageHeader title="Platform Settings" description="Global platform configuration" />
-        <div className="h-40 animate-pulse rounded-lg bg-white/10" />
+        <div className="h-40 animate-pulse rounded-lg bg-accent" />
       </div>
     )
   }
@@ -45,11 +45,11 @@ export function SettingsPage() {
     <div className="space-y-6">
       <PageHeader title="Platform Settings" description="Global platform configuration" />
 
-      <div className="max-w-xl space-y-6 glass-card rounded-2xl p-6">
+      <div className="max-w-xl space-y-6 bg-card border border-border rounded-xl p-6">
         <div className="flex items-center justify-between">
           <div>
-            <h3 className="font-medium text-white">Maintenance Mode</h3>
-            <p className="text-sm text-white/40">
+            <h3 className="font-medium text-foreground">Maintenance Mode</h3>
+            <p className="text-sm text-muted-foreground">
               When enabled, users will see a maintenance message instead of the app.
             </p>
           </div>
@@ -57,39 +57,40 @@ export function SettingsPage() {
             onClick={() => setSettings({ ...settings, maintenance_mode: !maintenanceMode })}
             className={cn(
               'h-6 w-10 rounded-full transition-colors',
-              maintenanceMode ? 'bg-red-400' : 'bg-white/10'
+              maintenanceMode ? 'bg-red-400' : 'bg-accent'
             )}
           >
             <div className={cn(
               'h-4 w-4 rounded-full bg-white transition-transform',
               maintenanceMode ? 'translate-x-5' : 'translate-x-1'
             )} />
+
           </button>
         </div>
 
         {maintenanceMode && (
           <div>
-            <label className="mb-1 block text-sm font-medium text-white">Maintenance Message</label>
+            <label className="mb-1 block text-sm font-medium text-foreground">Maintenance Message</label>
             <textarea
               value={maintenanceMessage}
               onChange={(e) => setSettings({ ...settings, maintenance_message: e.target.value })}
               rows={3}
               placeholder="We're performing scheduled maintenance. Please check back later."
               className={cn(
-                'w-full rounded-md border border-white/10 bg-black/50 px-3 py-2 text-sm text-white',
-                'placeholder:text-white/40 focus:outline-none focus:border-white/30 focus:ring-2 focus:ring-white/20'
+                'w-full rounded-md border border-border bg-card px-3 py-2 text-sm text-foreground',
+                'placeholder:text-muted-foreground focus:outline-none focus:border-primary focus:ring-2 focus:ring-primary/20'
               )}
             />
           </div>
         )}
 
-        <div className="border-t border-white/[0.06] pt-4">
+        <div className="border-t border-border pt-4">
           <button
             onClick={handleSave}
             disabled={saving}
             className={cn(
               'rounded-md px-4 py-2 text-sm font-medium',
-              'bg-white text-black hover:bg-white/90',
+              'bg-gradient-brand text-white shadow-lg shadow-primary/20 hover:opacity-90',
               'disabled:opacity-50'
             )}
           >
diff --git a/frontend/src/pages/admin/UserDetailPage.tsx b/frontend/src/pages/admin/UserDetailPage.tsx
index 6992bba9..48ac2cfc 100644
--- a/frontend/src/pages/admin/UserDetailPage.tsx
+++ b/frontend/src/pages/admin/UserDetailPage.tsx
@@ -170,21 +170,21 @@ export function UserDetailPage() {
   }
 
   const inputClass = cn(
-    'w-full rounded-md border border-white/10 bg-black/50 px-3 py-2 text-sm text-white',
-    'placeholder:text-white/40 focus:outline-none focus:border-white/30 focus:ring-2 focus:ring-white/20'
+    'w-full rounded-md border border-border bg-card px-3 py-2 text-sm text-foreground',
+    'placeholder:text-muted-foreground focus:outline-none focus:border-primary focus:ring-2 focus:ring-primary/20'
   )
 
   if (loading) {
     return (
       <div className="flex items-center justify-center py-20">
-        <div className="h-8 w-8 animate-spin rounded-full border-2 border-white/20 border-t-white" />
+        <div className="h-8 w-8 animate-spin rounded-full border-2 border-border border-t-foreground" />
       </div>
     )
   }
 
   if (!user) {
     return (
-      <div className="py-20 text-center text-white/40">User not found</div>
+      <div className="py-20 text-center text-muted-foreground">User not found</div>
     )
   }
 
@@ -197,15 +197,15 @@ export function UserDetailPage() {
       <div className="flex items-center gap-4">
         <button
           onClick={() => navigate('/admin/users')}
-          className="rounded-md border border-white/10 p-2 text-white/60 hover:bg-white/10 hover:text-white"
+          className="rounded-md border border-border p-2 text-muted-foreground hover:bg-accent hover:text-foreground"
         >
           <ArrowLeft className="h-4 w-4" />
         </button>
         <div className="flex-1">
-          <h1 className="text-xl font-semibold text-white">
+          <h1 className="text-xl font-semibold text-foreground">
             {user.full_name || user.email}
           </h1>
-          <p className="text-sm text-white/40">{user.email}</p>
+          <p className="text-sm text-muted-foreground">{user.email}</p>
         </div>
         <div className="flex items-center gap-2">
           {user.is_super_admin && (
@@ -225,21 +225,21 @@ export function UserDetailPage() {
 
       {/* Account & Subscription */}
       <div className="grid grid-cols-1 gap-6 md:grid-cols-2">
-        <div className="glass-card rounded-2xl p-6">
-          <h2 className="mb-4 text-sm font-semibold uppercase tracking-wider text-white/40">
+        <div className="bg-card border border-border rounded-xl p-6">
+          <h2 className="mb-4 text-sm font-semibold uppercase tracking-wider text-muted-foreground">
             Account & Subscription
           </h2>
           <dl className="space-y-3">
             {user.account && (
               <>
                 <div className="flex justify-between">
-                  <dt className="text-sm text-white/60">Account</dt>
-                  <dd className="text-sm text-white">{user.account.name}</dd>
+                  <dt className="text-sm text-muted-foreground">Account</dt>
+                  <dd className="text-sm text-foreground">{user.account.name}</dd>
                 </div>
                 {user.account.display_code && (
                   <div className="flex justify-between">
-                    <dt className="text-sm text-white/60">Display Code</dt>
-                    <dd className="text-sm font-mono text-white/70">{user.account.display_code}</dd>
+                    <dt className="text-sm text-muted-foreground">Display Code</dt>
+                    <dd className="text-sm font-mono text-muted-foreground">{user.account.display_code}</dd>
                   </div>
                 )}
               </>
@@ -247,13 +247,13 @@ export function UserDetailPage() {
             {user.subscription ? (
               <>
                 <div className="flex justify-between">
-                  <dt className="text-sm text-white/60">Plan</dt>
-                  <dd className="text-sm font-semibold text-white">
+                  <dt className="text-sm text-muted-foreground">Plan</dt>
+                  <dd className="text-sm font-semibold text-foreground">
                     {user.subscription.plan.charAt(0).toUpperCase() + user.subscription.plan.slice(1)}
                   </dd>
                 </div>
                 <div className="flex justify-between">
-                  <dt className="text-sm text-white/60">Status</dt>
+                  <dt className="text-sm text-muted-foreground">Status</dt>
                   <dd>
                     <StatusBadge variant={user.subscription.status === 'trialing' ? 'warning' : 'success'}>
                       {user.subscription.status}
@@ -262,24 +262,24 @@ export function UserDetailPage() {
                 </div>
                 {user.subscription.current_period_end && (
                   <div className="flex justify-between">
-                    <dt className="text-sm text-white/60">Period End</dt>
-                    <dd className="text-sm text-white/70">{fmt(user.subscription.current_period_end)}</dd>
+                    <dt className="text-sm text-muted-foreground">Period End</dt>
+                    <dd className="text-sm text-muted-foreground">{fmt(user.subscription.current_period_end)}</dd>
                   </div>
                 )}
               </>
             ) : (
-              <div className="text-sm text-white/40">No subscription</div>
+              <div className="text-sm text-muted-foreground">No subscription</div>
             )}
             <div className="flex justify-between">
-              <dt className="text-sm text-white/60">Joined</dt>
-              <dd className="text-sm text-white/70">{fmt(user.created_at)}</dd>
+              <dt className="text-sm text-muted-foreground">Joined</dt>
+              <dd className="text-sm text-muted-foreground">{fmt(user.created_at)}</dd>
             </div>
           </dl>
         </div>
 
         {/* Admin Actions */}
-        <div className="glass-card rounded-2xl p-6">
-          <h2 className="mb-4 text-sm font-semibold uppercase tracking-wider text-white/40">
+        <div className="bg-card border border-border rounded-xl p-6">
+          <h2 className="mb-4 text-sm font-semibold uppercase tracking-wider text-muted-foreground">
             Admin Actions
           </h2>
           <div className="space-y-3">
@@ -290,16 +290,16 @@ export function UserDetailPage() {
                     setSelectedPlan(user.subscription?.plan || 'free')
                     setPlanModalOpen(true)
                   }}
-                  className="flex w-full items-center gap-3 rounded-lg border border-white/10 px-4 py-3 text-left text-sm text-white/70 hover:bg-white/5 hover:text-white"
+                  className="flex w-full items-center gap-3 rounded-lg border border-border px-4 py-3 text-left text-sm text-muted-foreground hover:bg-accent hover:text-foreground"
                 >
-                  <Shield className="h-4 w-4 text-white/40" />
+                  <Shield className="h-4 w-4 text-muted-foreground" />
                   Change Plan
                 </button>
                 <button
                   onClick={() => setTrialModalOpen(true)}
-                  className="flex w-full items-center gap-3 rounded-lg border border-white/10 px-4 py-3 text-left text-sm text-white/70 hover:bg-white/5 hover:text-white"
+                  className="flex w-full items-center gap-3 rounded-lg border border-border px-4 py-3 text-left text-sm text-muted-foreground hover:bg-accent hover:text-foreground"
                 >
-                  <Clock className="h-4 w-4 text-white/40" />
+                  <Clock className="h-4 w-4 text-muted-foreground" />
                   {user.subscription?.status === 'trialing' ? 'Extend Trial' : 'Start Trial'}
                 </button>
               </>
@@ -310,9 +310,9 @@ export function UserDetailPage() {
                 setResetTempPassword(null)
                 setResetModalOpen(true)
               }}
-              className="flex w-full items-center gap-3 rounded-lg border border-white/10 px-4 py-3 text-left text-sm text-white/70 hover:bg-white/5 hover:text-white"
+              className="flex w-full items-center gap-3 rounded-lg border border-border px-4 py-3 text-left text-sm text-muted-foreground hover:bg-accent hover:text-foreground"
             >
-              <KeyRound className="h-4 w-4 text-white/40" />
+              <KeyRound className="h-4 w-4 text-muted-foreground" />
               Reset Password
             </button>
             <button
@@ -363,42 +363,42 @@ export function UserDetailPage() {
 
       {/* Invite Code Used */}
       {user.invite_code_used && (
-        <div className="glass-card rounded-2xl p-6">
-          <h2 className="mb-4 text-sm font-semibold uppercase tracking-wider text-white/40">
+        <div className="bg-card border border-border rounded-xl p-6">
+          <h2 className="mb-4 text-sm font-semibold uppercase tracking-wider text-muted-foreground">
             <Ticket className="mr-2 inline h-4 w-4" />
             Invite Code Used
           </h2>
           <dl className="grid grid-cols-2 gap-4 md:grid-cols-4">
             <div>
-              <dt className="text-xs text-white/40">Code</dt>
-              <dd className="mt-1 font-mono text-sm text-white/70">{user.invite_code_used.code}</dd>
+              <dt className="text-xs text-muted-foreground">Code</dt>
+              <dd className="mt-1 font-mono text-sm text-muted-foreground">{user.invite_code_used.code}</dd>
             </div>
             <div>
-              <dt className="text-xs text-white/40">Plan Assigned</dt>
-              <dd className="mt-1 text-sm text-white/70">
+              <dt className="text-xs text-muted-foreground">Plan Assigned</dt>
+              <dd className="mt-1 text-sm text-muted-foreground">
                 {user.invite_code_used.assigned_plan.charAt(0).toUpperCase() + user.invite_code_used.assigned_plan.slice(1)}
               </dd>
             </div>
             <div>
-              <dt className="text-xs text-white/40">Trial Days</dt>
-              <dd className="mt-1 text-sm text-white/70">{user.invite_code_used.trial_duration_days ?? '—'}</dd>
+              <dt className="text-xs text-muted-foreground">Trial Days</dt>
+              <dd className="mt-1 text-sm text-muted-foreground">{user.invite_code_used.trial_duration_days ?? '—'}</dd>
             </div>
             <div>
-              <dt className="text-xs text-white/40">Created By</dt>
-              <dd className="mt-1 text-sm text-white/70">{user.invite_code_used.created_by_email ?? '—'}</dd>
+              <dt className="text-xs text-muted-foreground">Created By</dt>
+              <dd className="mt-1 text-sm text-muted-foreground">{user.invite_code_used.created_by_email ?? '—'}</dd>
             </div>
           </dl>
         </div>
       )}
 
       {/* Tabs: Sessions / Audit Logs */}
-      <div className="glass-card rounded-2xl">
-        <div className="flex border-b border-white/[0.06]">
+      <div className="bg-card border border-border rounded-xl">
+        <div className="flex border-b border-border">
           <button
             onClick={() => setActiveTab('sessions')}
             className={cn(
               'px-6 py-3 text-sm font-medium',
-              activeTab === 'sessions' ? 'border-b-2 border-white text-white' : 'text-white/40 hover:text-white/60'
+              activeTab === 'sessions' ? 'border-b-2 border-foreground text-foreground' : 'text-muted-foreground hover:text-foreground'
             )}
           >
             Sessions ({user.total_sessions})
@@ -407,7 +407,7 @@ export function UserDetailPage() {
             onClick={() => setActiveTab('audit')}
             className={cn(
               'px-6 py-3 text-sm font-medium',
-              activeTab === 'audit' ? 'border-b-2 border-white text-white' : 'text-white/40 hover:text-white/60'
+              activeTab === 'audit' ? 'border-b-2 border-foreground text-foreground' : 'text-muted-foreground hover:text-foreground'
             )}
           >
             Audit Logs ({user.total_audit_logs})
@@ -419,7 +419,7 @@ export function UserDetailPage() {
             user.recent_sessions.length > 0 ? (
               <table className="w-full">
                 <thead>
-                  <tr className="border-b border-white/[0.06] text-left text-xs text-white/40">
+                  <tr className="border-b border-border text-left text-xs text-muted-foreground">
                     <th className="pb-2 font-medium">Tree</th>
                     <th className="pb-2 font-medium">Started</th>
                     <th className="pb-2 font-medium">Completed</th>
@@ -428,17 +428,17 @@ export function UserDetailPage() {
                 </thead>
                 <tbody>
                   {user.recent_sessions.map(s => (
-                    <tr key={s.id} className="border-b border-white/[0.03]">
-                      <td className="py-3 text-sm text-white/70">{s.tree_name ?? '—'}</td>
-                      <td className="py-3 text-sm text-white/40">{fmtFull(s.started_at)}</td>
-                      <td className="py-3 text-sm text-white/40">{fmtFull(s.completed_at)}</td>
+                    <tr key={s.id} className="border-b border-border">
+                      <td className="py-3 text-sm text-muted-foreground">{s.tree_name ?? '—'}</td>
+                      <td className="py-3 text-sm text-muted-foreground">{fmtFull(s.started_at)}</td>
+                      <td className="py-3 text-sm text-muted-foreground">{fmtFull(s.completed_at)}</td>
                       <td className="py-3">
                         {s.outcome ? (
                           <StatusBadge variant={s.outcome === 'resolved' ? 'success' : 'default'}>
                             {s.outcome}
                           </StatusBadge>
                         ) : (
-                          <span className="text-sm text-white/30">—</span>
+                          <span className="text-sm text-muted-foreground">—</span>
                         )}
                       </td>
                     </tr>
@@ -446,7 +446,7 @@ export function UserDetailPage() {
                 </tbody>
               </table>
             ) : (
-              <div className="py-8 text-center text-sm text-white/40">No sessions yet</div>
+              <div className="py-8 text-center text-sm text-muted-foreground">No sessions yet</div>
             )
           )}
 
@@ -454,7 +454,7 @@ export function UserDetailPage() {
             user.recent_audit_logs.length > 0 ? (
               <table className="w-full">
                 <thead>
-                  <tr className="border-b border-white/[0.06] text-left text-xs text-white/40">
+                  <tr className="border-b border-border text-left text-xs text-muted-foreground">
                     <th className="pb-2 font-medium">Action</th>
                     <th className="pb-2 font-medium">Resource</th>
                     <th className="pb-2 font-medium">Time</th>
@@ -462,16 +462,16 @@ export function UserDetailPage() {
                 </thead>
                 <tbody>
                   {user.recent_audit_logs.map(a => (
-                    <tr key={a.id} className="border-b border-white/[0.03]">
-                      <td className="py-3 text-sm text-white/70">{a.action}</td>
-                      <td className="py-3 text-sm text-white/40">{a.resource_type ?? '—'}</td>
-                      <td className="py-3 text-sm text-white/40">{fmtFull(a.created_at)}</td>
+                    <tr key={a.id} className="border-b border-border">
+                      <td className="py-3 text-sm text-muted-foreground">{a.action}</td>
+                      <td className="py-3 text-sm text-muted-foreground">{a.resource_type ?? '—'}</td>
+                      <td className="py-3 text-sm text-muted-foreground">{fmtFull(a.created_at)}</td>
                     </tr>
                   ))}
                 </tbody>
               </table>
             ) : (
-              <div className="py-8 text-center text-sm text-white/40">No audit logs yet</div>
+              <div className="py-8 text-center text-sm text-muted-foreground">No audit logs yet</div>
             )
           )}
         </div>
@@ -487,13 +487,13 @@ export function UserDetailPage() {
           <div className="flex justify-end gap-3">
             <button
               onClick={() => setPlanModalOpen(false)}
-              className="rounded-md border border-white/10 px-4 py-2 text-sm font-medium text-white/60 hover:bg-white/10"
+              className="rounded-md border border-border px-4 py-2 text-sm font-medium text-muted-foreground hover:bg-accent"
             >
               Cancel
             </button>
             <button
               onClick={handleChangePlan}
-              className="rounded-md bg-white px-4 py-2 text-sm font-medium text-black hover:bg-white/90"
+              className="rounded-md bg-gradient-brand text-white shadow-lg shadow-primary/20 px-4 py-2 text-sm font-medium hover:opacity-90"
             >
               Update Plan
             </button>
@@ -501,7 +501,7 @@ export function UserDetailPage() {
         }
       >
         <div>
-          <label className="mb-1 block text-sm font-medium text-white">Plan</label>
+          <label className="mb-1 block text-sm font-medium text-foreground">Plan</label>
           <select
             aria-label="Subscription plan"
             value={selectedPlan}
@@ -525,14 +525,14 @@ export function UserDetailPage() {
           <div className="flex justify-end gap-3">
             <button
               onClick={() => setResetModalOpen(false)}
-              className="rounded-md border border-white/10 px-4 py-2 text-sm font-medium text-white/60 hover:bg-white/10"
+              className="rounded-md border border-border px-4 py-2 text-sm font-medium text-muted-foreground hover:bg-accent"
             >
               Cancel
             </button>
             <button
               onClick={handleResetPassword}
               disabled={resetLoading}
-              className="rounded-md bg-white px-4 py-2 text-sm font-medium text-black hover:bg-white/90 disabled:opacity-50"
+              className="rounded-md bg-gradient-brand text-white shadow-lg shadow-primary/20 px-4 py-2 text-sm font-medium hover:opacity-90 disabled:opacity-50"
             >
               {resetLoading ? 'Resetting...' : 'Reset Password'}
             </button>
@@ -540,11 +540,11 @@ export function UserDetailPage() {
         }
       >
         <div className="space-y-4">
-          <p className="text-sm text-white/70">
-            Choose how to reset the password for <span className="font-medium text-white">{user.full_name || user.email}</span>.
+          <p className="text-sm text-muted-foreground">
+            Choose how to reset the password for <span className="font-medium text-foreground">{user.full_name || user.email}</span>.
           </p>
           <div className="space-y-2">
-            <label className="flex items-start gap-3 rounded-lg border border-white/10 p-3 cursor-pointer hover:bg-white/5">
+            <label className="flex items-start gap-3 rounded-lg border border-border p-3 cursor-pointer hover:bg-accent">
               <input
                 type="radio"
                 name="reset-mode"
@@ -554,11 +554,11 @@ export function UserDetailPage() {
                 className="mt-0.5"
               />
               <div>
-                <div className="text-sm font-medium text-white">Send Reset Email</div>
-                <div className="text-xs text-white/40">User receives an email with a reset link (30 min expiry)</div>
+                <div className="text-sm font-medium text-foreground">Send Reset Email</div>
+                <div className="text-xs text-muted-foreground">User receives an email with a reset link (30 min expiry)</div>
               </div>
             </label>
-            <label className="flex items-start gap-3 rounded-lg border border-white/10 p-3 cursor-pointer hover:bg-white/5">
+            <label className="flex items-start gap-3 rounded-lg border border-border p-3 cursor-pointer hover:bg-accent">
               <input
                 type="radio"
                 name="reset-mode"
@@ -568,8 +568,8 @@ export function UserDetailPage() {
                 className="mt-0.5"
               />
               <div>
-                <div className="text-sm font-medium text-white">Generate Temp Password</div>
-                <div className="text-xs text-white/40">A temporary password is generated. You share it manually.</div>
+                <div className="text-sm font-medium text-foreground">Generate Temp Password</div>
+                <div className="text-xs text-muted-foreground">A temporary password is generated. You share it manually.</div>
               </div>
             </label>
           </div>
@@ -586,7 +586,7 @@ export function UserDetailPage() {
           <div className="flex justify-end">
             <button
               onClick={() => { setResetTempPassword(null); setResetModalOpen(false) }}
-              className="rounded-md bg-white px-4 py-2 text-sm font-medium text-black hover:bg-white/90"
+              className="rounded-md bg-gradient-brand text-white shadow-lg shadow-primary/20 px-4 py-2 text-sm font-medium hover:opacity-90"
             >
               Done
             </button>
@@ -598,18 +598,18 @@ export function UserDetailPage() {
             This password will not be shown again. Copy it now.
           </div>
           <div className="flex items-center gap-2">
-            <code className="flex-1 rounded-md border border-white/10 bg-black/50 px-3 py-2 text-sm text-white font-mono">
+            <code className="flex-1 rounded-md border border-border bg-card px-3 py-2 text-sm text-foreground font-mono">
               {resetTempPassword}
             </code>
             <button
               onClick={handleCopyResetPassword}
-              className="rounded-md border border-white/10 p-2 text-white/60 hover:bg-white/10 hover:text-white transition-colors"
+              className="rounded-md border border-border p-2 text-muted-foreground hover:bg-accent hover:text-foreground transition-colors"
               title="Copy password"
             >
               {resetCopied ? <Check className="h-4 w-4 text-green-400" /> : <Copy className="h-4 w-4" />}
             </button>
           </div>
-          <p className="text-xs text-white/40">
+          <p className="text-xs text-muted-foreground">
             The user will be required to change this password on next login.
           </p>
         </div>
@@ -625,13 +625,13 @@ export function UserDetailPage() {
           <div className="flex justify-end gap-3">
             <button
               onClick={() => setTrialModalOpen(false)}
-              className="rounded-md border border-white/10 px-4 py-2 text-sm font-medium text-white/60 hover:bg-white/10"
+              className="rounded-md border border-border px-4 py-2 text-sm font-medium text-muted-foreground hover:bg-accent"
             >
               Cancel
             </button>
             <button
               onClick={handleExtendTrial}
-              className="rounded-md bg-white px-4 py-2 text-sm font-medium text-black hover:bg-white/90"
+              className="rounded-md bg-gradient-brand text-white shadow-lg shadow-primary/20 px-4 py-2 text-sm font-medium hover:opacity-90"
             >
               {user.subscription?.status === 'trialing' ? 'Extend' : 'Start Trial'}
             </button>
@@ -639,7 +639,7 @@ export function UserDetailPage() {
         }
       >
         <div>
-          <label className="mb-1 block text-sm font-medium text-white">Days to add</label>
+          <label className="mb-1 block text-sm font-medium text-foreground">Days to add</label>
           <input
             type="number"
             value={trialDays}
@@ -648,7 +648,7 @@ export function UserDetailPage() {
             max={90}
             className={inputClass}
           />
-          <p className="mt-1 text-xs text-white/40">1-90 days. Will convert to trialing status if not already.</p>
+          <p className="mt-1 text-xs text-muted-foreground">1-90 days. Will convert to trialing status if not already.</p>
         </div>
       </Modal>
 
@@ -662,14 +662,14 @@ export function UserDetailPage() {
           <div className="flex justify-end gap-3">
             <button
               onClick={() => setHardDeleteModalOpen(false)}
-              className="rounded-md border border-white/10 px-4 py-2 text-sm font-medium text-white/60 hover:bg-white/10"
+              className="rounded-md border border-border px-4 py-2 text-sm font-medium text-muted-foreground hover:bg-accent"
             >
               Cancel
             </button>
             {hardDeleteBlockers && Object.keys(hardDeleteBlockers).length === 0 && (
               <button
                 onClick={handleHardDelete}
-                className="rounded-md bg-red-600 px-4 py-2 text-sm font-medium text-white hover:bg-red-700"
+                className="rounded-md bg-red-600 px-4 py-2 text-sm font-medium text-foreground hover:bg-red-700"
               >
                 Delete Permanently
               </button>
@@ -683,11 +683,11 @@ export function UserDetailPage() {
               <div className="rounded-xl border border-red-400/20 bg-red-400/10 p-3 text-sm text-red-400">
                 This user cannot be deleted because they have dependencies:
               </div>
-              <ul className="space-y-1 text-sm text-white/70">
+              <ul className="space-y-1 text-sm text-muted-foreground">
                 {Object.entries(hardDeleteBlockers).map(([key, count]) => (
                   <li key={key} className="flex justify-between">
                     <span>{key.replace(/_/g, ' ')}</span>
-                    <span className="font-mono text-white/40">{count}</span>
+                    <span className="font-mono text-muted-foreground">{count}</span>
                   </li>
                 ))}
               </ul>
diff --git a/frontend/src/pages/admin/UsersPage.tsx b/frontend/src/pages/admin/UsersPage.tsx
index 37e4cc61..3238e0e2 100644
--- a/frontend/src/pages/admin/UsersPage.tsx
+++ b/frontend/src/pages/admin/UsersPage.tsx
@@ -188,8 +188,8 @@ export function UsersPage() {
       sortable: true,
       render: (u) => (
         <div>
-          <div className="font-medium text-white">{u.name}</div>
-          <div className="text-xs text-white/40">{u.email}</div>
+          <div className="font-medium text-foreground">{u.name}</div>
+          <div className="text-xs text-muted-foreground">{u.email}</div>
         </div>
       ),
     },
@@ -224,7 +224,7 @@ export function UsersPage() {
       header: 'Joined',
       sortable: true,
       render: (u) => (
-        <span className="text-sm text-white/40">
+        <span className="text-sm text-muted-foreground">
           {new Date(u.created_at).toLocaleDateString()}
         </span>
       ),
@@ -268,14 +268,14 @@ export function UsersPage() {
         <div className="flex items-center gap-3">
           <button
             onClick={() => setShowInviteModal(true)}
-            className="flex items-center gap-2 rounded-lg border border-white/10 px-4 py-2 text-sm font-medium text-white hover:bg-white/10 transition-colors"
+            className="flex items-center gap-2 rounded-lg border border-border px-4 py-2 text-sm font-medium text-foreground hover:bg-accent transition-colors"
           >
             <Mail className="h-4 w-4" />
             Invite User
           </button>
           <button
             onClick={() => setShowCreateModal(true)}
-            className="flex items-center gap-2 rounded-lg bg-white px-4 py-2 text-sm font-medium text-black hover:bg-white/90 transition-colors"
+            className="flex items-center gap-2 rounded-lg bg-gradient-brand text-white shadow-lg shadow-primary/20 px-4 py-2 text-sm font-medium hover:opacity-90 transition-colors"
           >
             <UserPlus className="h-4 w-4" />
             Create User
@@ -290,12 +290,12 @@ export function UsersPage() {
           placeholder="Search by name or email..."
           className="max-w-sm"
         />
-        <label className="flex items-center gap-2 text-sm text-white/60">
+        <label className="flex items-center gap-2 text-sm text-muted-foreground">
           <input
             type="checkbox"
             checked={showArchived}
             onChange={(e) => { setShowArchived(e.target.checked); setPage(1) }}
-            className="rounded border-white/20 bg-black/50"
+            className="rounded border-border bg-card"
           />
           Show archived
         </label>
@@ -326,13 +326,13 @@ export function UsersPage() {
           <div className="flex justify-end gap-3">
             <button
               onClick={() => setRoleModalUser(null)}
-              className="rounded-md border border-white/10 px-4 py-2 text-sm font-medium text-white/60 hover:bg-white/10 hover:text-white"
+              className="rounded-md border border-border px-4 py-2 text-sm font-medium text-foreground/60 hover:bg-accent hover:text-foreground"
             >
               Cancel
             </button>
             <button
               onClick={handleRoleChange}
-              className="rounded-md bg-white px-4 py-2 text-sm font-medium text-black hover:bg-white/90"
+              className="rounded-md bg-gradient-brand text-white shadow-lg shadow-primary/20 px-4 py-2 text-sm font-medium hover:opacity-90"
             >
               Save
             </button>
@@ -340,15 +340,15 @@ export function UsersPage() {
         }
       >
         <div className="space-y-4">
-          <p className="text-sm text-white/70">
-            Changing role for <span className="font-medium text-white">{roleModalUser?.name}</span>
+          <p className="text-sm text-muted-foreground">
+            Changing role for <span className="font-medium text-foreground">{roleModalUser?.name}</span>
           </p>
           <select
             value={newRole}
             onChange={(e) => setNewRole(e.target.value)}
             className={cn(
-              'w-full rounded-md border border-white/10 bg-black/50 px-3 py-2 text-sm text-white',
-              'focus:outline-none focus:border-white/30 focus:ring-2 focus:ring-white/20'
+              'w-full rounded-md border border-border bg-card px-3 py-2 text-sm text-foreground',
+              'focus:outline-none focus:border-primary focus:ring-2 focus:ring-primary/20'
             )}
           >
             <option value="engineer">Engineer</option>
@@ -367,14 +367,14 @@ export function UsersPage() {
           <div className="flex justify-end gap-3">
             <button
               onClick={() => setMoveModalUser(null)}
-              className="rounded-md border border-white/10 px-4 py-2 text-sm font-medium text-white/60 hover:bg-white/10 hover:text-white"
+              className="rounded-md border border-border px-4 py-2 text-sm font-medium text-foreground/60 hover:bg-accent hover:text-foreground"
             >
               Cancel
             </button>
             <button
               onClick={handleMoveAccount}
               disabled={!displayCode}
-              className="rounded-md bg-white px-4 py-2 text-sm font-medium text-black hover:bg-white/90 disabled:opacity-50"
+              className="rounded-md bg-gradient-brand text-white shadow-lg shadow-primary/20 px-4 py-2 text-sm font-medium hover:opacity-90 disabled:opacity-50"
             >
               Move
             </button>
@@ -382,19 +382,19 @@ export function UsersPage() {
         }
       >
         <div className="space-y-4">
-          <p className="text-sm text-white/70">
-            Moving <span className="font-medium text-white">{moveModalUser?.name}</span> to a new account.
+          <p className="text-sm text-muted-foreground">
+            Moving <span className="font-medium text-foreground">{moveModalUser?.name}</span> to a new account.
           </p>
           <div>
-            <label className="mb-1 block text-sm font-medium text-white">Account Display Code</label>
+            <label className="mb-1 block text-sm font-medium text-foreground">Account Display Code</label>
             <input
               type="text"
               value={displayCode}
               onChange={(e) => setDisplayCode(e.target.value)}
               placeholder="e.g. ABC-1234"
               className={cn(
-                'w-full rounded-md border border-white/10 bg-black/50 px-3 py-2 text-sm text-white',
-                'placeholder:text-white/40 focus:outline-none focus:border-white/30 focus:ring-2 focus:ring-white/20'
+                'w-full rounded-md border border-border bg-card px-3 py-2 text-sm text-foreground',
+                'placeholder:text-muted-foreground focus:outline-none focus:border-primary focus:ring-2 focus:ring-primary/20'
               )}
             />
           </div>
@@ -411,14 +411,14 @@ export function UsersPage() {
           <div className="flex justify-end gap-3">
             <button
               onClick={() => setShowCreateModal(false)}
-              className="rounded-md border border-white/10 px-4 py-2 text-sm font-medium text-white/60 hover:bg-white/10 hover:text-white"
+              className="rounded-md border border-border px-4 py-2 text-sm font-medium text-foreground/60 hover:bg-accent hover:text-foreground"
             >
               Cancel
             </button>
             <button
               onClick={handleCreateUser}
               disabled={createLoading || !createForm.email || !createForm.name}
-              className="rounded-md bg-white px-4 py-2 text-sm font-medium text-black hover:bg-white/90 disabled:opacity-50"
+              className="rounded-md bg-gradient-brand text-white shadow-lg shadow-primary/20 px-4 py-2 text-sm font-medium hover:opacity-90 disabled:opacity-50"
             >
               {createLoading ? 'Creating...' : 'Create User'}
             </button>
@@ -427,39 +427,39 @@ export function UsersPage() {
       >
         <div className="space-y-4">
           <div>
-            <label className="mb-1 block text-sm font-medium text-white">Name</label>
+            <label className="mb-1 block text-sm font-medium text-foreground">Name</label>
             <input
               type="text"
               value={createForm.name}
               onChange={(e) => setCreateForm(f => ({ ...f, name: e.target.value }))}
               placeholder="Full name"
               className={cn(
-                'w-full rounded-md border border-white/10 bg-black/50 px-3 py-2 text-sm text-white',
-                'placeholder:text-white/40 focus:outline-none focus:border-white/30 focus:ring-2 focus:ring-white/20'
+                'w-full rounded-md border border-border bg-card px-3 py-2 text-sm text-foreground',
+                'placeholder:text-muted-foreground focus:outline-none focus:border-primary focus:ring-2 focus:ring-primary/20'
               )}
             />
           </div>
           <div>
-            <label className="mb-1 block text-sm font-medium text-white">Email</label>
+            <label className="mb-1 block text-sm font-medium text-foreground">Email</label>
             <input
               type="email"
               value={createForm.email}
               onChange={(e) => setCreateForm(f => ({ ...f, email: e.target.value }))}
               placeholder="user@example.com"
               className={cn(
-                'w-full rounded-md border border-white/10 bg-black/50 px-3 py-2 text-sm text-white',
-                'placeholder:text-white/40 focus:outline-none focus:border-white/30 focus:ring-2 focus:ring-white/20'
+                'w-full rounded-md border border-border bg-card px-3 py-2 text-sm text-foreground',
+                'placeholder:text-muted-foreground focus:outline-none focus:border-primary focus:ring-2 focus:ring-primary/20'
               )}
             />
           </div>
           <div>
-            <label className="mb-1 block text-sm font-medium text-white">Account Mode</label>
+            <label className="mb-1 block text-sm font-medium text-foreground">Account Mode</label>
             <select
               value={createForm.account_mode}
               onChange={(e) => setCreateForm(f => ({ ...f, account_mode: e.target.value as 'existing' | 'personal' }))}
               className={cn(
-                'w-full rounded-md border border-white/10 bg-black/50 px-3 py-2 text-sm text-white',
-                'focus:outline-none focus:border-white/30 focus:ring-2 focus:ring-white/20'
+                'w-full rounded-md border border-border bg-card px-3 py-2 text-sm text-foreground',
+                'focus:outline-none focus:border-primary focus:ring-2 focus:ring-primary/20'
               )}
             >
               <option value="personal">Personal (new account)</option>
@@ -469,26 +469,26 @@ export function UsersPage() {
           {createForm.account_mode === 'existing' && (
             <>
               <div>
-                <label className="mb-1 block text-sm font-medium text-white">Account Display Code</label>
+                <label className="mb-1 block text-sm font-medium text-foreground">Account Display Code</label>
                 <input
                   type="text"
                   value={createForm.account_display_code}
                   onChange={(e) => setCreateForm(f => ({ ...f, account_display_code: e.target.value }))}
                   placeholder="e.g. ABC12345"
                   className={cn(
-                    'w-full rounded-md border border-white/10 bg-black/50 px-3 py-2 text-sm text-white',
-                    'placeholder:text-white/40 focus:outline-none focus:border-white/30 focus:ring-2 focus:ring-white/20'
+                    'w-full rounded-md border border-border bg-card px-3 py-2 text-sm text-foreground',
+                    'placeholder:text-muted-foreground focus:outline-none focus:border-primary focus:ring-2 focus:ring-primary/20'
                   )}
                 />
               </div>
               <div>
-                <label className="mb-1 block text-sm font-medium text-white">Account Role</label>
+                <label className="mb-1 block text-sm font-medium text-foreground">Account Role</label>
                 <select
                   value={createForm.account_role}
                   onChange={(e) => setCreateForm(f => ({ ...f, account_role: e.target.value as 'engineer' | 'viewer' }))}
                   className={cn(
-                    'w-full rounded-md border border-white/10 bg-black/50 px-3 py-2 text-sm text-white',
-                    'focus:outline-none focus:border-white/30 focus:ring-2 focus:ring-white/20'
+                    'w-full rounded-md border border-border bg-card px-3 py-2 text-sm text-foreground',
+                    'focus:outline-none focus:border-primary focus:ring-2 focus:ring-primary/20'
                   )}
                 >
                   <option value="engineer">Engineer</option>
@@ -503,9 +503,9 @@ export function UsersPage() {
               id="send-email"
               checked={createForm.send_email}
               onChange={(e) => setCreateForm(f => ({ ...f, send_email: e.target.checked }))}
-              className="rounded border-white/20 bg-black/50"
+              className="rounded border-border bg-card"
             />
-            <label htmlFor="send-email" className="text-sm text-white/70">
+            <label htmlFor="send-email" className="text-sm text-muted-foreground">
               Send welcome email with temporary password
             </label>
           </div>
@@ -522,7 +522,7 @@ export function UsersPage() {
           <div className="flex justify-end">
             <button
               onClick={() => setTempPassword(null)}
-              className="rounded-md bg-white px-4 py-2 text-sm font-medium text-black hover:bg-white/90"
+              className="rounded-md bg-gradient-brand text-white shadow-lg shadow-primary/20 px-4 py-2 text-sm font-medium hover:opacity-90"
             >
               Done
             </button>
@@ -534,21 +534,21 @@ export function UsersPage() {
             This password will not be shown again. Copy it now.
           </div>
           <div>
-            <label className="mb-1 block text-sm font-medium text-white">Temporary Password</label>
+            <label className="mb-1 block text-sm font-medium text-foreground">Temporary Password</label>
             <div className="flex items-center gap-2">
-              <code className="flex-1 rounded-md border border-white/10 bg-black/50 px-3 py-2 text-sm text-white font-mono">
+              <code className="flex-1 rounded-md border border-border bg-card px-3 py-2 text-sm text-foreground font-mono">
                 {tempPassword}
               </code>
               <button
                 onClick={handleCopyPassword}
-                className="rounded-md border border-white/10 p-2 text-white/60 hover:bg-white/10 hover:text-white transition-colors"
+                className="rounded-md border border-border p-2 text-muted-foreground hover:bg-accent hover:text-foreground transition-colors"
                 title="Copy password"
               >
                 {copied ? <Check className="h-4 w-4 text-green-400" /> : <Copy className="h-4 w-4" />}
               </button>
             </div>
           </div>
-          <p className="text-xs text-white/40">
+          <p className="text-xs text-muted-foreground">
             The user will be required to change this password on first login.
           </p>
         </div>
@@ -564,14 +564,14 @@ export function UsersPage() {
           <div className="flex justify-end gap-3">
             <button
               onClick={() => setShowInviteModal(false)}
-              className="rounded-md border border-white/10 px-4 py-2 text-sm font-medium text-white/60 hover:bg-white/10 hover:text-white"
+              className="rounded-md border border-border px-4 py-2 text-sm font-medium text-foreground/60 hover:bg-accent hover:text-foreground"
             >
               Cancel
             </button>
             <button
               onClick={handleInviteUser}
               disabled={inviteLoading || !inviteForm.email || !inviteForm.account_display_code}
-              className="rounded-md bg-white px-4 py-2 text-sm font-medium text-black hover:bg-white/90 disabled:opacity-50"
+              className="rounded-md bg-gradient-brand text-white shadow-lg shadow-primary/20 px-4 py-2 text-sm font-medium hover:opacity-90 disabled:opacity-50"
             >
               {inviteLoading ? 'Sending...' : 'Send Invite'}
             </button>
@@ -580,39 +580,39 @@ export function UsersPage() {
       >
         <div className="space-y-4">
           <div>
-            <label className="mb-1 block text-sm font-medium text-white">Email</label>
+            <label className="mb-1 block text-sm font-medium text-foreground">Email</label>
             <input
               type="email"
               value={inviteForm.email}
               onChange={(e) => setInviteForm(f => ({ ...f, email: e.target.value }))}
               placeholder="user@example.com"
               className={cn(
-                'w-full rounded-md border border-white/10 bg-black/50 px-3 py-2 text-sm text-white',
-                'placeholder:text-white/40 focus:outline-none focus:border-white/30 focus:ring-2 focus:ring-white/20'
+                'w-full rounded-md border border-border bg-card px-3 py-2 text-sm text-foreground',
+                'placeholder:text-muted-foreground focus:outline-none focus:border-primary focus:ring-2 focus:ring-primary/20'
               )}
             />
           </div>
           <div>
-            <label className="mb-1 block text-sm font-medium text-white">Account Display Code</label>
+            <label className="mb-1 block text-sm font-medium text-foreground">Account Display Code</label>
             <input
               type="text"
               value={inviteForm.account_display_code}
               onChange={(e) => setInviteForm(f => ({ ...f, account_display_code: e.target.value }))}
               placeholder="e.g. ABC12345"
               className={cn(
-                'w-full rounded-md border border-white/10 bg-black/50 px-3 py-2 text-sm text-white',
-                'placeholder:text-white/40 focus:outline-none focus:border-white/30 focus:ring-2 focus:ring-white/20'
+                'w-full rounded-md border border-border bg-card px-3 py-2 text-sm text-foreground',
+                'placeholder:text-muted-foreground focus:outline-none focus:border-primary focus:ring-2 focus:ring-primary/20'
               )}
             />
           </div>
           <div>
-            <label className="mb-1 block text-sm font-medium text-white">Role</label>
+            <label className="mb-1 block text-sm font-medium text-foreground">Role</label>
             <select
               value={inviteForm.role}
               onChange={(e) => setInviteForm(f => ({ ...f, role: e.target.value as 'engineer' | 'viewer' }))}
               className={cn(
-                'w-full rounded-md border border-white/10 bg-black/50 px-3 py-2 text-sm text-white',
-                'focus:outline-none focus:border-white/30 focus:ring-2 focus:ring-white/20'
+                'w-full rounded-md border border-border bg-card px-3 py-2 text-sm text-foreground',
+                'focus:outline-none focus:border-primary focus:ring-2 focus:ring-primary/20'
               )}
             >
               <option value="engineer">Engineer</option>
diff --git a/frontend/src/store/userPreferencesStore.ts b/frontend/src/store/userPreferencesStore.ts
index 7edb5f69..e26fcd34 100644
--- a/frontend/src/store/userPreferencesStore.ts
+++ b/frontend/src/store/userPreferencesStore.ts
@@ -15,11 +15,13 @@ interface UserPreferencesState {
   setTreeLibrarySortBy: (sortBy: TreeSortBy) => void
   preferredEditorMode: EditorMode
   setPreferredEditorMode: (mode: EditorMode) => void
+  sidebarCollapsed: boolean
+  toggleSidebar: () => void
 }
 
 export const useUserPreferencesStore = create<UserPreferencesState>()(
   persist(
-    (set) => ({
+    (set, get) => ({
       defaultExportFormat: 'markdown',
       setDefaultExportFormat: (format) => set({ defaultExportFormat: format }),
       treeLibraryView: 'grid',
@@ -28,6 +30,8 @@ export const useUserPreferencesStore = create<UserPreferencesState>()(
       setTreeLibrarySortBy: (sortBy) => set({ treeLibrarySortBy: sortBy }),
       preferredEditorMode: 'form',
       setPreferredEditorMode: (mode) => set({ preferredEditorMode: mode }),
+      sidebarCollapsed: false,
+      toggleSidebar: () => set({ sidebarCollapsed: !get().sidebarCollapsed }),
     }),
     {
       name: 'user-preferences-storage',
diff --git a/frontend/src/types/category.ts b/frontend/src/types/category.ts
index 906a9b14..e54f23f4 100644
--- a/frontend/src/types/category.ts
+++ b/frontend/src/types/category.ts
@@ -8,6 +8,7 @@ export interface Category {
   account_id: string | null
   display_order: number
   is_active: boolean
+  color: string | null
   created_at: string
   updated_at: string
   tree_count: number
@@ -21,6 +22,7 @@ export interface CategoryListItem {
   account_id: string | null
   display_order: number
   is_active: boolean
+  color: string | null
   tree_count: number
 }