diff --git a/.claude/commands/frontend-ui-ux.md b/.claude/commands/frontend-ui-ux.md
new file mode 100644
index 000000000..5d031d01b
--- /dev/null
+++ b/.claude/commands/frontend-ui-ux.md
@@ -0,0 +1,86 @@
+---
+description: Designer-turned-developer who crafts stunning UI/UX even without design mockups
+argument-hint: [component-or-page-description]
+---
+
+# Role: Designer-Turned-Developer
+
+You are a designer who learned to code. You see what pure developers miss—spacing, color harmony, micro-interactions, that indefinable "feel" that makes interfaces memorable. Even without mockups, you envision and create beautiful, cohesive interfaces.
+
+**Mission**: Create visually stunning, emotionally engaging interfaces users fall in love with. Obsess over pixel-perfect details, smooth animations, and intuitive interactions while maintaining code quality.
+
+---
+
+# Work Principles
+
+1. **Complete what's asked** — Execute the exact task. No scope creep. Work until it works. Never mark work complete without proper verification.
+2. **Leave it better** — Ensure the project is in a working state after your changes.
+3. **Study before acting** — Examine existing patterns, conventions, and commit history (git log) before implementing. Understand why code is structured the way it is.
+4. **Blend seamlessly** — Match existing code patterns. Your code should look like the team wrote it.
+5. **Be transparent** — Announce each step. Explain reasoning. Report both successes and failures.
+
+---
+
+# Design Process
+
+Before coding, commit to a **BOLD aesthetic direction**:
+
+1. **Purpose**: What problem does this solve? Who uses it?
+2. **Tone**: Pick an extreme—brutally minimal, maximalist chaos, retro-futuristic, organic/natural, luxury/refined, playful/toy-like, editorial/magazine, brutalist/raw, art deco/geometric, soft/pastel, industrial/utilitarian
+3. **Constraints**: Technical requirements (framework, performance, accessibility)
+4. **Differentiation**: What's the ONE thing someone will remember?
+
+**Key**: Choose a clear direction and execute with precision. Intentionality > intensity.
+
+Then implement working code (HTML/CSS/JS, React, Vue, Angular, etc.) that is:
+- Production-grade and functional
+- Visually striking and memorable
+- Cohesive with a clear aesthetic point-of-view
+- Meticulously refined in every detail
+
+---
+
+# Aesthetic Guidelines
+
+## Typography
+Choose distinctive fonts. **Avoid**: Arial, Inter, Roboto, system fonts, Space Grotesk. Pair a characterful display font with a refined body font.
+
+## Color
+Commit to a cohesive palette. Use CSS variables. Dominant colors with sharp accents outperform timid, evenly-distributed palettes. **Avoid**: purple gradients on white (AI slop).
+
+## Motion
+Focus on high-impact moments. One well-orchestrated page load with staggered reveals (animation-delay) > scattered micro-interactions. Use scroll-triggering and hover states that surprise. Prioritize CSS-only. Use Motion library for React when available.
+
+## Spatial Composition
+Unexpected layouts. Asymmetry. Overlap. Diagonal flow. Grid-breaking elements. Generous negative space OR controlled density.
+
+## Visual Details
+Create atmosphere and depth—gradient meshes, noise textures, geometric patterns, layered transparencies, dramatic shadows, decorative borders, custom cursors, grain overlays. Never default to solid colors.
+
+---
+
+# Anti-Patterns (NEVER)
+
+- Generic fonts (Inter, Roboto, Arial, system fonts, Space Grotesk)
+- Cliched color schemes (purple gradients on white)
+- Predictable layouts and component patterns
+- Cookie-cutter design lacking context-specific character
+- Converging on common choices across generations
+
+---
+
+# Execution
+
+Match implementation complexity to aesthetic vision:
+- **Maximalist** → Elaborate code with extensive animations and effects
+- **Minimalist** → Restraint, precision, careful spacing and typography
+
+Interpret creatively and make unexpected choices that feel genuinely designed for the context. No design should be the same. Vary between light and dark themes, different fonts, different aesthetics. You are capable of extraordinary creative work—don't hold back.
+
+---
+
+# Task
+
+$ARGUMENTS
+
+If no specific task is provided, ask what UI/UX component or page the user would like to create.
diff --git a/.claude/plans/reflective-wiggling-dragonfly.md b/.claude/plans/reflective-wiggling-dragonfly.md
new file mode 100644
index 000000000..57101a28c
--- /dev/null
+++ b/.claude/plans/reflective-wiggling-dragonfly.md
@@ -0,0 +1,394 @@
+# Plan: Coverage Protection Dashboard by Person
+
+## Summary
+Create a visual dashboard showing coverage targets vs actual coverage per person, with gap analysis and protection score. **Phase 1 focuses on UI with empty state** (0% coverage until policies are integrated).
+
+---
+
+## ASCII Design: Coverage Dashboard (Empty State - Phase 1)
+
+After the wizard is completed, show a **Coverage Dashboard** view. Initially shows 0% coverage since no policies are linked yet:
+
+```
+┌─────────────────────────────────────────────────────────────────────────────────┐
+│  My Coverage                                              [Edit Targets] [⟳]    │
+├─────────────────────────────────────────────────────────────────────────────────┤
+│                                                                                 │
+│  ┌───────────────────────────────────────────────────────────────────────────┐  │
+│  │                                                                           │  │
+│  │  ┌─────────────────────────────────┐   ┌───────────────────────────────┐ │  │
+│  │  │  👤 John Tan          [$120K/yr]│   │  PROTECTION SCORE             │ │  │
+│  │  │     [Change Person ▼]           │   │                               │ │  │
+│  │  └─────────────────────────────────┘   │        ╭─────────╮            │ │  │
+│  │                                        │       ╱           ╲           │ │  │
+│  │                                        │      │             │          │ │  │
+│  │                                        │      │     0%      │          │ │  │
+│  │                                        │      │             │          │ │  │
+│  │                                        │       ╲           ╱           │ │  │
+│  │                                        │        ╰─────────╯            │ │  │
+│  │                                        │                               │ │  │
+│  │                                        │   Add policies to see your    │ │  │
+│  │                                        │   protection score            │ │  │
+│  │                                        └───────────────────────────────┘ │  │
+│  │                                                                           │  │
+│  └───────────────────────────────────────────────────────────────────────────┘  │
+│                                                                                 │
+│  ┌───────────────────────────────────────────────────────────────────────────┐  │
+│  │  COVERAGE TARGETS                                                         │  │
+│  │  ─────────────────────────────────────────────────────────────────────    │  │
+│  │                                                                           │  │
+│  │  🏥 Hospitalization                                         ⚠ No Policy  │  │
+│  │     Target: Ward A + Rider                                                │  │
+│  │     ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░   0%      │  │
+│  │                                                                           │  │
+│  │  ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─     │  │
+│  │                                                                           │  │
+│  │  🛡️ Life / TPD                                              ⚠ No Policy  │  │
+│  │     Target: $1.2M (10× income)                                            │  │
+│  │     ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░   0%      │  │
+│  │                                                                           │  │
+│  │  ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─     │  │
+│  │                                                                           │  │
+│  │  💊 Critical Illness                                        ⚠ No Policy  │  │
+│  │     Target: $600K (5× income)                                             │  │
+│  │     ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░   0%      │  │
+│  │                                                                           │  │
+│  │  ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─     │  │
+│  │                                                                           │  │
+│  │  ⚡ Personal Accident                                       ⚠ No Policy  │  │
+│  │     Target: $360K (3× income)                                             │  │
+│  │     ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░   0%      │  │
+│  │                                                                           │  │
+│  └───────────────────────────────────────────────────────────────────────────┘  │
+│                                                                                 │
+│  ┌───────────────────────────────────────────────────────────────────────────┐  │
+│  │  PREMIUM BUDGET                                                           │  │
+│  │  ─────────────────────────────────────────────────────────────────────    │  │
+│  │                                                                           │  │
+│  │  Budget: $12,000/year (10% of income)            Current: $0/year         │  │
+│  │  ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░   0%       │  │
+│  │  $12,000 remaining                                                        │  │
+│  │                                                                           │  │
+│  └───────────────────────────────────────────────────────────────────────────┘  │
+│                                                                                 │
+│  ┌───────────────────────────────────────────────────────────────────────────┐  │
+│  │                                                                           │  │
+│  │     ┌──────────────────────────────────────────────────────────────┐     │  │
+│  │     │           + Add Your First Policy to Track Coverage          │     │  │
+│  │     └──────────────────────────────────────────────────────────────┘     │  │
+│  │                                                                           │  │
+│  └───────────────────────────────────────────────────────────────────────────┘  │
+│                                                                                 │
+└─────────────────────────────────────────────────────────────────────────────────┘
+```
+
+---
+
+## Circular Gauge Component Detail
+
+The protection score gauge uses an SVG circle with stroke-dasharray for the progress arc:
+
+```
+                    ╭─────────────────╮
+                   ╱                   ╲
+                  ╱    ┌───────────┐    ╲
+                 │     │    67%    │     │
+                 │     │           │     │
+                 │     │  ◉ Good   │     │     ← Status text below percentage
+                 │     └───────────┘     │
+                  ╲    ╭───────────╮    ╱
+                   ╲  ╱             ╲  ╱
+                    ╰─────────────────╯
+
+                    ↑ Colored arc shows progress
+                      (emerald for good, amber for partial, red for gap)
+
+Score Thresholds:
+  - 80-100%: "Well Protected" (emerald)
+  - 50-79%:  "Partial Coverage" (amber)
+  - 0-49%:   "Needs Attention" (red)
+```
+
+**Gauge Implementation (SVG):**
+```
+┌─────────────────────────────────────┐
+│                                     │
+│           ╱‾‾‾‾‾‾‾‾‾‾‾╲             │   ← Background circle (gray)
+│          │    ╱‾‾‾╲    │            │
+│          │   │ 67% │   │            │   ← Progress arc overlay (colored)
+│          │    ╲___╱    │            │
+│           ╲___________╱             │   ← Stroke-dasharray controls fill
+│                                     │
+│         2 gaps to address           │   ← Summary text
+│                                     │
+└─────────────────────────────────────┘
+```
+
+---
+
+## Coverage Progress Bar Component Detail
+
+Each category has its own progress bar with contextual information:
+
+```
+┌─────────────────────────────────────────────────────────────────────────────┐
+│                                                                             │
+│  🛡️ Life / TPD                                                   ⚠ Gap     │
+│     ───────────────────────────────────────────────────────────────         │
+│                                                                             │
+│     Target: $1.2M  •  Current: $800K  •  Gap: $400K                         │
+│                                                                             │
+│     ████████████████████████████████░░░░░░░░░░░░░░░░░░░░   67%              │
+│     ↑ filled portion (emerald)      ↑ empty portion (gray)                  │
+│                                                                             │
+└─────────────────────────────────────────────────────────────────────────────┘
+
+Status Badge Colors:
+  - "✓ Covered" → emerald badge
+  - "⚠ Gap"     → amber badge
+  - "⚠ No Policy" → gray/muted badge
+```
+
+**Hospitalization (Binary - no progress bar needed):**
+```
+┌─────────────────────────────────────────────────────────────────────────────┐
+│                                                                             │
+│  🏥 Hospitalization                                            ✓ Covered    │
+│     ───────────────────────────────────────────────────────────────         │
+│                                                                             │
+│     Ward A + Rider                    ← Just shows the coverage type        │
+│                                                                             │
+│     ████████████████████████████████████████████████████████   100%         │
+│                                                                             │
+└─────────────────────────────────────────────────────────────────────────────┘
+```
+
+---
+
+## With Policies (Future State - Phase 2)
+
+Once policies are linked, the dashboard shows actual coverage:
+
+```
+┌─────────────────────────────────────────────────────────────────────────────────┐
+│  My Coverage                                              [Edit Targets] [⟳]    │
+├─────────────────────────────────────────────────────────────────────────────────┤
+│                                                                                 │
+│  ┌───────────────────────────────────────────────────────────────────────────┐  │
+│  │                                                                           │  │
+│  │  ┌─────────────────────────────────┐   ┌───────────────────────────────┐ │  │
+│  │  │  👤 John Tan          [$120K/yr]│   │  PROTECTION SCORE             │ │  │
+│  │  │     [Change Person ▼]           │   │                               │ │  │
+│  │  └─────────────────────────────────┘   │        ╭─────────╮            │ │  │
+│  │                                        │       ╱ ██████████╲           │ │  │
+│  │                                        │      │ ██████████ │          │ │  │
+│  │                                        │      │     67%     │          │ │  │
+│  │                                        │      │  ██████████ │          │ │  │
+│  │                                        │       ╲ █████████ ╱           │ │  │
+│  │                                        │        ╰─────────╯            │ │  │
+│  │                                        │                               │ │  │
+│  │                                        │      ⚠ Partial Coverage       │ │  │
+│  │                                        │      2 gaps need attention    │ │  │
+│  │                                        └───────────────────────────────┘ │  │
+│  │                                                                           │  │
+│  └───────────────────────────────────────────────────────────────────────────┘  │
+│                                                                                 │
+│  ┌───────────────────────────────────────────────────────────────────────────┐  │
+│  │  COVERAGE BY CATEGORY                                                     │  │
+│  │  ─────────────────────────────────────────────────────────────────────    │  │
+│  │                                                                           │  │
+│  │  🏥 Hospitalization                                         ✓ Covered    │  │
+│  │     Ward A + Rider                                                        │  │
+│  │     ████████████████████████████████████████████████████████████  100%   │  │
+│  │                                                                           │  │
+│  │  ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─     │  │
+│  │                                                                           │  │
+│  │  🛡️ Life / TPD                                               ⚠ Gap       │  │
+│  │     Target: $1.2M  •  Current: $800K  •  Gap: $400K                       │  │
+│  │     ███████████████████████████████████░░░░░░░░░░░░░░░░░░░░░░░░   67%    │  │
+│  │                                                                           │  │
+│  │  ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─     │  │
+│  │                                                                           │  │
+│  │  💊 Critical Illness                                         ⚠ Gap       │  │
+│  │     Target: $600K  •  Current: $200K  •  Gap: $400K                       │  │
+│  │     ███████████░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░   33%    │  │
+│  │                                                                           │  │
+│  │  ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─     │  │
+│  │                                                                           │  │
+│  │  ⚡ Personal Accident                                        ✓ Covered   │  │
+│  │     Target: $360K  •  Current: $500K  •  Excess: +$140K                   │  │
+│  │     ████████████████████████████████████████████████████████████  100%+  │  │
+│  │                                                                           │  │
+│  └───────────────────────────────────────────────────────────────────────────┘  │
+│                                                                                 │
+│  ┌───────────────────────────────────────────────────────────────────────────┐  │
+│  │  PREMIUM SUMMARY                                                          │  │
+│  │  ─────────────────────────────────────────────────────────────────────    │  │
+│  │                                                                           │  │
+│  │  Monthly: $450    Annual: $5,400    Budget: $12,000 (10%)                 │  │
+│  │  ███████████████████████████░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░   45%    │  │
+│  │  Using 45% of budget  •  $6,600 remaining                                 │  │
+│  │                                                                           │  │
+│  └───────────────────────────────────────────────────────────────────────────┘  │
+│                                                                                 │
+│  ┌────────────────────────────────────────────────────────────────────────���──┐  │
+│  │  QUICK ACTIONS                                                            │  │
+│  │                                                                           │  │
+│  │  ┌─────────────────┐  ┌─────────────────┐  ┌─────────────────┐           │  │
+│  │  │   + Add Policy  │  │  📊 View Gaps   │  │  ⚙ Edit Targets │           │  │
+│  │  └─────────────────┘  └─────────────────┘  └─────────────────┘           │  │
+│  │                                                                           │  │
+│  └───────────────────────────────────────────────────────────────────────────┘  │
+│                                                                                 │
+└─────────────────────────────────────────────────────────────────────────────────┘
+```
+
+---
+
+## Layout Options
+
+**Option A: Side-by-side (Current plan)**
+```
+┌──────────────────────────────────┬────────────────────────────────────────────┐
+│  PERSON SELECTOR                 │  PROTECTION SCORE                          │
+│  👤 John Tan                     │        ╭─────╮                             │
+│  $120K/year                      │       │ 67% │                             │
+│                                  │        ╰─────╯                             │
+└──────────────────────────────────┴────────────────────────────────────────────┘
+```
+
+**Option B: Stacked (Mobile-friendly)**
+```
+┌─────────────────────────────────────────────────────────────────────────────────┐
+│  👤 John Tan                                               $120K/year           │
+├─────────────────────────────────────────────────────────────────────────────────┤
+│                             ╭─────────╮                                         │
+│                            │   67%   │                                         │
+│                             ╰─────────╯                                         │
+│                         Partial Coverage                                        │
+└─────────────────────────────────────────────────────────────────────────────────┘
+```
+
+---
+
+## Data Flow
+
+```
+┌─────────────────┐     ┌─────────────────┐     ┌─────────────────┐
+│  Guidelines     │     │  Policies       │     │  Coverage       │
+│  Store          │     │  (Phase 2)      │     │  Dashboard      │
+│                 │     │                 │     │                 │
+│ • selectedPerson│────▶│ • Query by      │────▶│ • Target vs     │
+│ • annualIncome  │     │   personId      │     │   Actual        │
+│ • multipliers   │     │ • Sum coverage  │     │ • Gap calc      │
+│ • targets       │     │   by category   │     │ • Score %       │
+└─────────────────┘     └─────────────────┘     └─────────────────┘
+
+Phase 1: Guidelines Store → Dashboard (0% coverage, targets only)
+Phase 2: + Policies → Dashboard (actual coverage shown)
+```
+
+---
+
+## Protection Score Calculation
+
+```
+score = weightedAverage(
+  hospitalization: hasValidISP ? 100 : 0,           weight: 0.25
+  life_tpd: min(100, (current / target) * 100),     weight: 0.35
+  critical_illness: min(100, (current / target) * 100), weight: 0.25
+  personal_accident: min(100, (current / target) * 100), weight: 0.15
+)
+```
+
+---
+
+## Component Structure
+
+```
+CoverageDashboard
+├── DashboardHeader
+│   ├── Title "My Coverage"
+│   ├── Edit Targets button
+│   └── Reset button
+├── PersonScoreSection (flex row)
+│   ├── PersonCard
+│   │   ├── Person name + color dot
+│   │   ├── Annual income display
+│   │   └── Change Person dropdown
+│   └── ProtectionScoreGauge
+│       ├── SVG circular progress
+│       ├── Percentage text
+│       └── Status message
+├── CoverageCategoryList
+│   └── CoverageCategoryRow × 4
+│       ├── Category icon + label
+│       ├── Status badge (Covered/Gap/No Policy)
+│       ├── Target/Current/Gap amounts
+│       └── Progress bar
+├── PremiumBudgetSection
+│   ├── Budget info (monthly/annual)
+│   ├── Progress bar
+│   └── Remaining amount
+└── QuickActionsSection
+    └── Add Policy button (prominent CTA)
+```
+
+---
+
+## Files to Modify
+
+### 1. `frontend/src/types/insurance.ts` ✅ DONE
+- Added `CoverageCategoryStatus` interface
+- Added `CoverageStatus` interface
+- Added `calculateProtectionScore()` function
+- Added `buildCoverageStatus()` function
+
+### 2. `frontend/src/components/insurance/CoverageDashboard.tsx` (NEW)
+Main dashboard component containing:
+- `ProtectionScoreGauge` - SVG circular gauge
+- `CoverageCategoryRow` - Individual category with progress bar
+- `PremiumBudgetBar` - Budget utilization display
+- `CoverageDashboard` - Main orchestrating component
+
+### 3. `frontend/src/components/insurance/tabs/GuidelinesTab.tsx`
+- Replace `ConfiguredGuidelinesView` with import of `CoverageDashboard`
+
+---
+
+## Implementation Notes
+
+**SVG Circular Gauge:**
+- Use `stroke-dasharray` and `stroke-dashoffset` for progress
+- Circle with radius ~45, stroke-width ~10
+- Background circle in gray, progress arc in color
+- Animate with CSS transition on stroke-dashoffset
+
+**Progress Bars:**
+- Simple div with width percentage
+- Background: `bg-white/[0.1]`
+- Fill: `bg-emerald-500` (covered), `bg-amber-500` (partial), `bg-slate-600` (empty)
+
+**Empty State:**
+- All progress at 0%
+- Protection score shows 0%
+- Prominent CTA to add first policy
+- Targets still visible so user knows what they're working toward
+
+---
+
+## Verification
+
+1. Complete wizard → See coverage dashboard (empty state)
+2. Dashboard shows targets with 0%
+3. Circular gauge displays 0% with "Add policies" message
+4. Person selector changes income and targets
+5. TypeScript: `cd frontend && npx tsc --noEmit`
+
+---
+
+## Questions for Review
+
+1. **Layout**: Side-by-side (Option A) or stacked (Option B) for person+score section?
+2. **Empty state CTA**: Single prominent button or include "View Gaps" as secondary action?
+3. **Category icons**: Use emojis (🏥🛡️💊⚡) or Lucide icons?
diff --git a/.claude/settings.json b/.claude/settings.json
new file mode 100644
index 000000000..1f195064c
--- /dev/null
+++ b/.claude/settings.json
@@ -0,0 +1,10 @@
+{
+  "enabledPlugins": {
+    "ralph-wiggum@claude-plugins-official": true
+  },
+  "permissions": {
+    "allow": [
+      "Bash(/Users/jitcorn/.claude/plugins/cache/claude-plugins-official/ralph-wiggum/*)"
+    ]
+  }
+}
diff --git a/.github/workflows/claude.yml b/.github/workflows/claude.yml
index 412cef9e6..99b80baf7 100644
--- a/.github/workflows/claude.yml
+++ b/.github/workflows/claude.yml
@@ -2,9 +2,9 @@ name: Claude Code
 
 on:
   issue_comment:
-    types: [created]
+    types: [created, edited]
   pull_request_review_comment:
-    types: [created]
+    types: [created, edited]
   issues:
     types: [opened, assigned]
   pull_request_review:
@@ -19,11 +19,11 @@ jobs:
       (github.event_name == 'issues' && (contains(github.event.issue.body, '@claude') || contains(github.event.issue.title, '@claude')))
     runs-on: ubuntu-latest
     permissions:
-      contents: read
-      pull-requests: read
-      issues: read
+      contents: write
+      pull-requests: write
+      issues: write
       id-token: write
-      actions: read # Required for Claude to read CI results on PRs
+      actions: read
     steps:
       - name: Checkout repository
         uses: actions/checkout@v4
@@ -32,19 +32,9 @@ jobs:
 
       - name: Run Claude Code
         id: claude
-        uses: anthropics/claude-code-action@v1
+        uses: anthropics/claude-code-action@v1.0.43
         with:
           claude_code_oauth_token: ${{ secrets.CLAUDE_CODE_OAUTH_TOKEN }}
-
-          # This is an optional setting that allows Claude to read CI results on PRs
           additional_permissions: |
             actions: read
 
-          # Optional: Give a custom prompt to Claude. If this is not specified, Claude will perform the instructions specified in the comment that tagged it.
-          # prompt: 'Update the pull request description to include a summary of changes.'
-
-          # Optional: Add claude_args to customize behavior and configuration
-          # See https://github.com/anthropics/claude-code-action/blob/main/docs/usage.md
-          # or https://docs.claude.com/en/docs/claude-code/cli-reference for available options
-          # claude_args: '--allowed-tools Bash(gh pr:*)'
-
diff --git a/.gitignore b/.gitignore
index 58e79b846..3139a15c7 100644
--- a/.gitignore
+++ b/.gitignore
@@ -61,6 +61,7 @@ dist/
 build/
 .next/
 .gocache/
+storybook-static/
 
 # Logs
 *.log
diff --git a/backend/cmd/server/handlers/persons_v2.go b/backend/cmd/server/handlers/persons_v2.go
index 583b2a62b..393b51d4c 100644
--- a/backend/cmd/server/handlers/persons_v2.go
+++ b/backend/cmd/server/handlers/persons_v2.go
@@ -17,6 +17,7 @@ type personV2CreateInput struct {
 	Gender          string  `json:"gender"`          // Required: 'male' or 'female' for CPF LIFE calculations
 	ResidencyStatus string  `json:"residencyStatus"` // 'citizen' or 'pr' (PR year is computed from prGrantDate)
 	PRGrantDate     *string `json:"prGrantDate"`     // Required if residencyStatus='pr', format: "2006-01-02"
+	Relationship    string  `json:"relationship"`    // 'self', 'spouse', 'child', 'parent', 'sibling', 'other'
 }
 
 // personV2UpdateInput is the JSON-friendly input struct for updating a person.
@@ -28,6 +29,7 @@ type personV2UpdateInput struct {
 	Gender          string  `json:"gender"`          // Optional: 'male' or 'female'
 	ResidencyStatus string  `json:"residencyStatus"` // 'citizen' or 'pr'
 	PRGrantDate     *string `json:"prGrantDate"`     // Required if residencyStatus='pr', format: "2006-01-02"
+	Relationship    string  `json:"relationship"`    // Optional: 'self', 'spouse', 'child', 'parent', 'sibling', 'other'
 }
 
 // PersonV2Handler serves person v2 endpoints.
@@ -146,6 +148,7 @@ func (h *PersonV2Handler) HandleCreate(w http.ResponseWriter, r *http.Request) {
 		Gender:          input.Gender,
 		ResidencyStatus: residencyStatus,
 		PRGrantDate:     prGrantDate,
+		Relationship:    input.Relationship,
 	}
 	if input.DisplayColor != "" {
 		person.DisplayColor = &input.DisplayColor
@@ -274,6 +277,7 @@ func (h *PersonV2Handler) HandleUpdate(w http.ResponseWriter, r *http.Request, i
 		Gender:          gender,
 		ResidencyStatus: input.ResidencyStatus,
 		PRGrantDate:     prGrantDate,
+		Relationship:    input.Relationship,
 	}
 	if input.DisplayColor != "" {
 		person.DisplayColor = &input.DisplayColor
diff --git a/backend/internal/financial/repository/timeline.go b/backend/internal/financial/repository/timeline.go
index e2dd2e9c6..987053d20 100644
--- a/backend/internal/financial/repository/timeline.go
+++ b/backend/internal/financial/repository/timeline.go
@@ -27,6 +27,7 @@ type UserSettings struct {
 	GroupItemsByCategory  bool      `json:"groupItemsByCategory"`  // Whether to group financial items by category in UI
 	ChartPictureInPicture bool      `json:"chartPictureInPicture"` // Whether to show mini chart when scrolled out of view
 	DashboardLayout       string    `json:"dashboardLayout"`       // Dashboard layout: stacked, chart-left, or chart-right
+	OnboardingCompleted   bool      `json:"onboardingCompleted"`   // Whether the onboarding wizard has been completed or dismissed
 	UpdatedAt             time.Time `json:"updatedAt,omitempty"`
 }
 
@@ -257,11 +258,12 @@ func (s *Store) GetUserSettings(ctx context.Context, userID string) (UserSetting
 		       COALESCE(group_items_by_category, true),
 		       COALESCE(chart_picture_in_picture, false),
 		       COALESCE(dashboard_layout, 'stacked'),
+		       COALESCE(onboarding_completed, false),
 		       updated_at
 		FROM user_settings
 		WHERE user_id = $1`, userID)
 	var settings UserSettings
-	if err := row.Scan(&settings.ID, &settings.UserID, &settings.StartingAge, &settings.TerminalAge, &settings.YearDisplayFormat, &settings.TimeResolution, &settings.CompoundingFrequency, &settings.AutoExecuteTools, &settings.GroupItemsByCategory, &settings.ChartPictureInPicture, &settings.DashboardLayout, &settings.UpdatedAt); err != nil {
+	if err := row.Scan(&settings.ID, &settings.UserID, &settings.StartingAge, &settings.TerminalAge, &settings.YearDisplayFormat, &settings.TimeResolution, &settings.CompoundingFrequency, &settings.AutoExecuteTools, &settings.GroupItemsByCategory, &settings.ChartPictureInPicture, &settings.DashboardLayout, &settings.OnboardingCompleted, &settings.UpdatedAt); err != nil {
 		if errors.Is(err, sql.ErrNoRows) {
 			return DefaultUserSettings, nil
 		}
@@ -273,8 +275,8 @@ func (s *Store) GetUserSettings(ctx context.Context, userID string) (UserSetting
 // UpsertUserSettings inserts or updates user settings.
 func (s *Store) UpsertUserSettings(ctx context.Context, userID string, settings UserSettings) (UserSettings, error) {
 	row := s.db.QueryRowContext(ctx, `
-		INSERT INTO user_settings (user_id, starting_age, terminal_age, year_display_format, time_resolution, compounding_frequency, auto_execute_tools, group_items_by_category, chart_picture_in_picture, dashboard_layout)
-		VALUES ($1, $2, $3, $4, $5, $6, $7, $8, $9, $10)
+		INSERT INTO user_settings (user_id, starting_age, terminal_age, year_display_format, time_resolution, compounding_frequency, auto_execute_tools, group_items_by_category, chart_picture_in_picture, dashboard_layout, onboarding_completed)
+		VALUES ($1, $2, $3, $4, $5, $6, $7, $8, $9, $10, $11)
 		ON CONFLICT (user_id) DO UPDATE
 		SET starting_age = EXCLUDED.starting_age,
 		    terminal_age = EXCLUDED.terminal_age,
@@ -285,6 +287,7 @@ func (s *Store) UpsertUserSettings(ctx context.Context, userID string, settings
 		    group_items_by_category = EXCLUDED.group_items_by_category,
 		    chart_picture_in_picture = EXCLUDED.chart_picture_in_picture,
 		    dashboard_layout = EXCLUDED.dashboard_layout,
+		    onboarding_completed = EXCLUDED.onboarding_completed,
 		    updated_at = NOW()
 		RETURNING id, user_id, starting_age, terminal_age, year_display_format,
 		          COALESCE(time_resolution, 'yearly'),
@@ -293,10 +296,11 @@ func (s *Store) UpsertUserSettings(ctx context.Context, userID string, settings
 		          COALESCE(group_items_by_category, true),
 		          COALESCE(chart_picture_in_picture, false),
 		          COALESCE(dashboard_layout, 'stacked'),
+		          COALESCE(onboarding_completed, false),
 		          updated_at`,
-		userID, settings.StartingAge, settings.TerminalAge, settings.YearDisplayFormat, settings.TimeResolution, settings.CompoundingFrequency, settings.AutoExecuteTools, settings.GroupItemsByCategory, settings.ChartPictureInPicture, settings.DashboardLayout)
+		userID, settings.StartingAge, settings.TerminalAge, settings.YearDisplayFormat, settings.TimeResolution, settings.CompoundingFrequency, settings.AutoExecuteTools, settings.GroupItemsByCategory, settings.ChartPictureInPicture, settings.DashboardLayout, settings.OnboardingCompleted)
 	var updated UserSettings
-	if err := row.Scan(&updated.ID, &updated.UserID, &updated.StartingAge, &updated.TerminalAge, &updated.YearDisplayFormat, &updated.TimeResolution, &updated.CompoundingFrequency, &updated.AutoExecuteTools, &updated.GroupItemsByCategory, &updated.ChartPictureInPicture, &updated.DashboardLayout, &updated.UpdatedAt); err != nil {
+	if err := row.Scan(&updated.ID, &updated.UserID, &updated.StartingAge, &updated.TerminalAge, &updated.YearDisplayFormat, &updated.TimeResolution, &updated.CompoundingFrequency, &updated.AutoExecuteTools, &updated.GroupItemsByCategory, &updated.ChartPictureInPicture, &updated.DashboardLayout, &updated.OnboardingCompleted, &updated.UpdatedAt); err != nil {
 		return UserSettings{}, err
 	}
 	return updated, nil
diff --git a/backend/internal/financial_v2/repository/person.go b/backend/internal/financial_v2/repository/person.go
index b89b73e01..401eab4af 100644
--- a/backend/internal/financial_v2/repository/person.go
+++ b/backend/internal/financial_v2/repository/person.go
@@ -12,7 +12,7 @@ func (s *Store) ListPersons(ctx context.Context, userID string) ([]Person, error
 	query := `
 	SELECT id, user_id, name, display_color, is_included,
 	       date_of_birth, gender, residency_status, pr_grant_date,
-	       created_at, updated_at
+	       relationship, created_at, updated_at
 	FROM persons
 	WHERE user_id = $1
 	ORDER BY created_at ASC`
@@ -31,7 +31,7 @@ func (s *Store) ListPersons(ctx context.Context, userID string) ([]Person, error
 		if err := rows.Scan(
 			&p.ID, &p.UserID, &p.Name, &p.DisplayColor, &p.IsIncluded,
 			&p.DateOfBirth, &p.Gender, &p.ResidencyStatus, &p.PRGrantDate,
-			&p.CreatedAt, &p.UpdatedAt,
+			&p.Relationship, &p.CreatedAt, &p.UpdatedAt,
 		); err != nil {
 			return nil, fmt.Errorf("failed to scan person: %w", err)
 		}
@@ -51,7 +51,7 @@ func (s *Store) ListPersonsWithStats(ctx context.Context, userID string) ([]Pers
 	SELECT
 		p.id, p.user_id, p.name, p.display_color, p.is_included,
 		p.date_of_birth, p.gender, p.residency_status, p.pr_grant_date,
-		p.created_at, p.updated_at,
+		p.relationship, p.created_at, p.updated_at,
 		COALESCE(income_counts.count, 0) as income_count,
 		COALESCE(cpf_counts.count, 0) as cpf_count
 	FROM persons p
@@ -84,7 +84,7 @@ func (s *Store) ListPersonsWithStats(ctx context.Context, userID string) ([]Pers
 		if err := rows.Scan(
 			&p.ID, &p.UserID, &p.Name, &p.DisplayColor, &p.IsIncluded,
 			&p.DateOfBirth, &p.Gender, &p.ResidencyStatus, &p.PRGrantDate,
-			&p.CreatedAt, &p.UpdatedAt, &p.IncomeCount, &p.CPFCount,
+			&p.Relationship, &p.CreatedAt, &p.UpdatedAt, &p.IncomeCount, &p.CPFCount,
 		); err != nil {
 			return nil, fmt.Errorf("failed to scan person with stats: %w", err)
 		}
@@ -103,7 +103,7 @@ func (s *Store) GetPerson(ctx context.Context, userID, id string) (*Person, erro
 	query := `
 	SELECT id, user_id, name, display_color, is_included,
 	       date_of_birth, gender, residency_status, pr_grant_date,
-	       created_at, updated_at
+	       relationship, created_at, updated_at
 	FROM persons
 	WHERE user_id = $1 AND id = $2`
 
@@ -113,7 +113,7 @@ func (s *Store) GetPerson(ctx context.Context, userID, id string) (*Person, erro
 	err := s.pool.QueryRow(ctx, query, userID, id).Scan(
 		&p.ID, &p.UserID, &p.Name, &p.DisplayColor, &p.IsIncluded,
 		&p.DateOfBirth, &p.Gender, &p.ResidencyStatus, &p.PRGrantDate,
-		&p.CreatedAt, &p.UpdatedAt,
+		&p.Relationship, &p.CreatedAt, &p.UpdatedAt,
 	)
 	if err == pgx.ErrNoRows {
 		return nil, ErrNotFound
@@ -130,11 +130,11 @@ func (s *Store) CreatePerson(ctx context.Context, userID string, p Person) (*Per
 	query := `
 	INSERT INTO persons (user_id, name, display_color, is_included,
 	                     date_of_birth, gender, residency_status, pr_grant_date,
-	                     created_at, updated_at)
-	VALUES ($1, $2, NULLIF($3, ''), $4, $5, $6, $7, $8, NOW(), NOW())
+	                     relationship, created_at, updated_at)
+	VALUES ($1, $2, NULLIF($3, ''), $4, $5, $6, $7, $8, $9, NOW(), NOW())
 	RETURNING id, user_id, name, display_color, is_included,
 	          date_of_birth, gender, residency_status, pr_grant_date,
-	          created_at, updated_at`
+	          relationship, created_at, updated_at`
 
 	displayColor := ""
 	if p.DisplayColor != nil {
@@ -153,7 +153,13 @@ func (s *Store) CreatePerson(ctx context.Context, userID string, p Person) (*Per
 		gender = "male"
 	}
 
-	args := []any{userID, p.Name, displayColor, true, p.DateOfBirth, gender, residencyStatus, p.PRGrantDate}
+	// Default relationship to 'self' if not provided
+	relationship := p.Relationship
+	if relationship == "" {
+		relationship = "self"
+	}
+
+	args := []any{userID, p.Name, displayColor, true, p.DateOfBirth, gender, residencyStatus, p.PRGrantDate, relationship}
 
 	logQuery(query, args)
 
@@ -161,7 +167,7 @@ func (s *Store) CreatePerson(ctx context.Context, userID string, p Person) (*Per
 	err := s.pool.QueryRow(ctx, query, args...).Scan(
 		&created.ID, &created.UserID, &created.Name, &created.DisplayColor,
 		&created.IsIncluded, &created.DateOfBirth, &created.Gender, &created.ResidencyStatus, &created.PRGrantDate,
-		&created.CreatedAt, &created.UpdatedAt,
+		&created.Relationship, &created.CreatedAt, &created.UpdatedAt,
 	)
 	if err != nil {
 		return nil, fmt.Errorf("failed to create person: %w", err)
@@ -181,11 +187,12 @@ func (s *Store) UpdatePerson(ctx context.Context, userID, id string, p Person) (
 	    gender = COALESCE(NULLIF($7, ''), gender),
 	    residency_status = COALESCE(NULLIF($8, ''), residency_status),
 	    pr_grant_date = $9,
+	    relationship = COALESCE(NULLIF($10, ''), relationship),
 	    updated_at = NOW()
 	WHERE user_id = $1 AND id = $2
 	RETURNING id, user_id, name, display_color, is_included,
 	          date_of_birth, gender, residency_status, pr_grant_date,
-	          created_at, updated_at`
+	          relationship, created_at, updated_at`
 
 	displayColor := ""
 	if p.DisplayColor != nil {
@@ -198,7 +205,7 @@ func (s *Store) UpdatePerson(ctx context.Context, userID, id string, p Person) (
 		dateOfBirth = p.DateOfBirth
 	}
 
-	args := []any{userID, id, p.Name, displayColor, p.IsIncluded, dateOfBirth, p.Gender, p.ResidencyStatus, p.PRGrantDate}
+	args := []any{userID, id, p.Name, displayColor, p.IsIncluded, dateOfBirth, p.Gender, p.ResidencyStatus, p.PRGrantDate, p.Relationship}
 
 	logQuery(query, args)
 
@@ -206,7 +213,7 @@ func (s *Store) UpdatePerson(ctx context.Context, userID, id string, p Person) (
 	err := s.pool.QueryRow(ctx, query, args...).Scan(
 		&updated.ID, &updated.UserID, &updated.Name, &updated.DisplayColor,
 		&updated.IsIncluded, &updated.DateOfBirth, &updated.Gender, &updated.ResidencyStatus, &updated.PRGrantDate,
-		&updated.CreatedAt, &updated.UpdatedAt,
+		&updated.Relationship, &updated.CreatedAt, &updated.UpdatedAt,
 	)
 	if err == pgx.ErrNoRows {
 		return nil, ErrNotFound
@@ -245,7 +252,7 @@ func (s *Store) TogglePersonIncluded(ctx context.Context, userID, id string) (*P
 	WHERE user_id = $1 AND id = $2
 	RETURNING id, user_id, name, display_color, is_included,
 	          date_of_birth, gender, residency_status, pr_grant_date,
-	          created_at, updated_at`
+	          relationship, created_at, updated_at`
 
 	logQuery(query, []any{userID, id})
 
@@ -253,7 +260,7 @@ func (s *Store) TogglePersonIncluded(ctx context.Context, userID, id string) (*P
 	err := s.pool.QueryRow(ctx, query, userID, id).Scan(
 		&updated.ID, &updated.UserID, &updated.Name, &updated.DisplayColor,
 		&updated.IsIncluded, &updated.DateOfBirth, &updated.Gender, &updated.ResidencyStatus, &updated.PRGrantDate,
-		&updated.CreatedAt, &updated.UpdatedAt,
+		&updated.Relationship, &updated.CreatedAt, &updated.UpdatedAt,
 	)
 	if err == pgx.ErrNoRows {
 		return nil, ErrNotFound
diff --git a/backend/internal/financial_v2/repository/store.go b/backend/internal/financial_v2/repository/store.go
index 1d053499e..46a4cbd47 100644
--- a/backend/internal/financial_v2/repository/store.go
+++ b/backend/internal/financial_v2/repository/store.go
@@ -257,6 +257,7 @@ type Person struct {
 	Gender          string     `json:"gender"`          // 'male' or 'female' - required for CPF LIFE calculations
 	ResidencyStatus string     `json:"residencyStatus"` // 'citizen' or 'pr' (PR year computed from prGrantDate)
 	PRGrantDate     *time.Time `json:"prGrantDate,omitempty"`
+	Relationship    string     `json:"relationship"` // 'self', 'spouse', 'child', 'parent', 'sibling', 'other'
 	CreatedAt       time.Time  `json:"createdAt"`
 	UpdatedAt       time.Time  `json:"updatedAt"`
 	// Stats populated by GetPersonsWithStats
diff --git a/backend/migrations/202602040001_add_person_relationship.down.sql b/backend/migrations/202602040001_add_person_relationship.down.sql
new file mode 100644
index 000000000..8435468e7
--- /dev/null
+++ b/backend/migrations/202602040001_add_person_relationship.down.sql
@@ -0,0 +1 @@
+ALTER TABLE persons DROP COLUMN IF EXISTS relationship;
diff --git a/backend/migrations/202602040001_add_person_relationship.up.sql b/backend/migrations/202602040001_add_person_relationship.up.sql
new file mode 100644
index 000000000..35f76d86d
--- /dev/null
+++ b/backend/migrations/202602040001_add_person_relationship.up.sql
@@ -0,0 +1,8 @@
+-- Add relationship column to persons table for household role identification
+-- Used by insurance coverage guidelines to determine spouse vs dependent vs self
+
+ALTER TABLE persons
+ADD COLUMN relationship VARCHAR(20) DEFAULT 'self' NOT NULL
+CHECK (relationship IN ('self', 'spouse', 'child', 'parent', 'sibling', 'other'));
+
+COMMENT ON COLUMN persons.relationship IS 'Relationship to primary household member (self/spouse/child/parent/sibling/other)';
diff --git a/backend/migrations/202602040002_add_onboarding_completed.down.sql b/backend/migrations/202602040002_add_onboarding_completed.down.sql
new file mode 100644
index 000000000..914a22945
--- /dev/null
+++ b/backend/migrations/202602040002_add_onboarding_completed.down.sql
@@ -0,0 +1,2 @@
+ALTER TABLE user_settings
+DROP COLUMN IF EXISTS onboarding_completed;
diff --git a/backend/migrations/202602040002_add_onboarding_completed.up.sql b/backend/migrations/202602040002_add_onboarding_completed.up.sql
new file mode 100644
index 000000000..6c382f396
--- /dev/null
+++ b/backend/migrations/202602040002_add_onboarding_completed.up.sql
@@ -0,0 +1,2 @@
+ALTER TABLE user_settings
+ADD COLUMN onboarding_completed boolean DEFAULT false NOT NULL;
diff --git a/conductor/product-guidelines.md b/conductor/product-guidelines.md
new file mode 100644
index 000000000..4be6e4e40
--- /dev/null
+++ b/conductor/product-guidelines.md
@@ -0,0 +1,32 @@
+# Product Guidelines
+
+## Prose Style
+
+The language used throughout the application and in all communications should be clear, concise, and professional. Avoid jargon where possible, or explain it clearly if necessary. The tone should be informative and helpful, instilling confidence in the user regarding their financial decisions.
+
+## Brand Messaging
+
+Our core message revolves around empowering users with intelligent financial planning. Key themes to emphasize include:
+
+-   **Intelligence:** Leveraging AI and LLMs to provide smart, data-driven insights.
+-   **Control:** Users maintain full control over their financial actions with transparent review and approval processes.
+-   **Transparency:** Clear explanations of AI-generated suggestions and their potential impact.
+-   **Ease of Use:** A seamless, intuitive chat-based interface that simplifies complex financial management.
+-   **Security:** Reassurance about the protection of sensitive financial data.
+
+## Visual Identity
+
+The visual design should convey modernity, trustworthiness, and approachability.
+
+-   **Clean Interface:** A minimalist and uncluttered design to reduce cognitive load.
+-   **Intuitive Layout:** Easy navigation and clear presentation of information.
+-   **Consistent Branding:** Use a consistent color palette, typography, and iconography across all platforms and communications to build brand recognition.
+
+## Tone of Voice
+
+The application's tone should be:
+
+-   **Helpful:** Guiding users through their financial journey.
+-   **Reassuring:** Providing a sense of security and confidence in their financial planning.
+-   **Objective:** Presenting information and options impartially.
+-   **Engaging:** Maintaining an interactive and responsive dialogue.
diff --git a/conductor/product.md b/conductor/product.md
new file mode 100644
index 000000000..890eb8e70
--- /dev/null
+++ b/conductor/product.md
@@ -0,0 +1,26 @@
+# Initial Concept
+
+A modern financial planning chat application with LLM-native tool calling architecture.
+
+## Product Vision
+
+To provide an intuitive and intelligent platform for financial planning, leveraging large language models to assist users in managing their assets, liabilities, and financial scenarios through an interactive chat interface. The system aims to simplify complex financial tasks and offer actionable insights with user approval.
+
+## Key Features
+
+- **LLM-Native Tool Calling:** Integrates advanced language models to interpret user requests and invoke appropriate financial tools dynamically.
+- **Manual Action Review:** Ensures user control and transparency by requiring explicit approval for AI-generated financial actions before execution.
+- **Session Management:** Maintains persistent conversation context and state across user sessions, allowing for a seamless and continuous financial planning experience.
+- **Financial Tools:** Provides a suite of tools for users to create, update, and manage various financial elements, including assets, liabilities, and property scenarios.
+- **API Versioning:** Implements a versioned REST API to ensure backward compatibility and future-proof the system's extensibility.
+
+## Target Audience
+
+Individuals and households seeking an interactive and intelligent solution to manage their personal finances, plan for the future, and understand their financial standing with the assistance of AI.
+
+## High-Level Goals
+
+- Enhance user engagement in financial planning through conversational AI.
+- Increase accuracy and efficiency in managing personal financial data.
+- Provide clear, actionable, and user-approved financial advice and actions.
+- Ensure the system is scalable, secure, and easily maintainable.
diff --git a/conductor/setup_state.json b/conductor/setup_state.json
new file mode 100644
index 000000000..24df52004
--- /dev/null
+++ b/conductor/setup_state.json
@@ -0,0 +1 @@
+{"last_successful_step": "2.3_tech_stack"}
\ No newline at end of file
diff --git a/conductor/tech-stack.md b/conductor/tech-stack.md
new file mode 100644
index 000000000..ed2fab127
--- /dev/null
+++ b/conductor/tech-stack.md
@@ -0,0 +1,50 @@
+# Technology Stack
+
+## Overview
+
+The project leverages a modern, distributed architecture designed for scalability, performance, and maintainability.
+
+## Backend
+
+-   **Language:** Go (Golang)
+    -   Chosen for its performance characteristics, concurrency model, and strong type safety, making it ideal for building robust API services.
+-   **Framework:** Standard Go libraries and potentially specialized HTTP routers (e.g., Gin, Echo, not explicitly stated but common for REST APIs in Go).
+-   **LLM Integration:**
+    -   OpenAI GPT-4: For primary large language model capabilities and tool-calling.
+    -   Anthropic Claude: Supported as an alternative or supplementary LLM provider.
+-   **Database Driver:** Likely `database/sql` with a PostgreSQL driver (e.g., `lib/pq` or `pgx`).
+
+## Frontend
+
+-   **Framework/Library:** React 18
+    -   A declarative, component-based JavaScript library for building user interfaces, chosen for its efficiency and widespread adoption.
+-   **Language:** TypeScript
+    -   Provides static typing to JavaScript, enhancing code quality, maintainability, and developer experience.
+-   **Styling:** Not explicitly stated, but common choices include CSS-in-JS, Tailwind CSS, or component libraries like Material UI.
+-   **Build Tool:** Likely Webpack or Vite (inferred from React 18 context).
+
+## Database
+
+-   **Type:** Relational Database
+-   **Specific:** PostgreSQL
+    -   A powerful, open-source object-relational database system known for its reliability, feature robustness, and performance.
+-   **ORM/Query Builder:** Potentially `GORM`, `sqlc`, or direct `database/sql` usage (not explicitly stated).
+
+## Development and Operations (DevOps)
+
+-   **Containerization:** Docker & Docker Compose
+    -   For consistent development environments and streamlined deployment.
+-   **Build Automation:** Makefile
+    -   Used for managing common development tasks like dependency installation, building, testing, and running services.
+-   **Version Control:** Git
+    -   Standard distributed version control system.
+
+## Testing
+
+-   **Backend:** Go's built-in testing framework (`testing` package).
+-   **Frontend:** Likely React Testing Library, Jest, or similar.
+
+## API
+
+-   **Style:** REST APIs
+-   **Documentation:** Swagger UI (inferred from `README.md` mentioning `/swagger/index.html`).
diff --git a/frontend/.storybook/main.ts b/frontend/.storybook/main.ts
new file mode 100644
index 000000000..21d5a6631
--- /dev/null
+++ b/frontend/.storybook/main.ts
@@ -0,0 +1,37 @@
+import type { StorybookConfig } from '@storybook/react-webpack5'
+import path from 'path'
+
+const config: StorybookConfig = {
+  stories: ['../src/**/*.stories.@(ts|tsx)'],
+  addons: [
+    '@storybook/addon-webpack5-compiler-swc',
+    '@storybook/addon-essentials',
+    '@storybook/addon-interactions',
+    '@storybook/addon-themes',
+  ],
+  framework: {
+    name: '@storybook/react-webpack5',
+    options: {},
+  },
+  typescript: {
+    reactDocgen: 'react-docgen-typescript',
+    reactDocgenTypescriptOptions: {
+      shouldExtractLiteralValuesFromEnum: true,
+      propFilter: (prop) =>
+        prop.parent ? !/node_modules/.test(prop.parent.fileName) : true,
+    },
+  },
+  webpackFinal: async (webpackConfig) => {
+    // Path alias: @ -> src/
+    if (webpackConfig.resolve) {
+      webpackConfig.resolve.alias = {
+        ...webpackConfig.resolve.alias,
+        '@': path.resolve(__dirname, '../src'),
+      }
+    }
+
+    return webpackConfig
+  },
+}
+
+export default config
diff --git a/frontend/.storybook/preview-head.html b/frontend/.storybook/preview-head.html
new file mode 100644
index 000000000..349012710
--- /dev/null
+++ b/frontend/.storybook/preview-head.html
@@ -0,0 +1,14 @@
+<!-- Load Geist fonts via CDN since next/font is unavailable in Storybook -->
+<link rel="preconnect" href="https://fonts.googleapis.com" />
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+<link
+  href="https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700&family=Geist+Mono:wght@400;500;600&display=swap"
+  rel="stylesheet"
+/>
+<style>
+  /* Map Geist font to the CSS variables that the app expects */
+  :root {
+    --font-geist: 'Geist', system-ui, -apple-system, sans-serif;
+    --font-geist-mono: 'Geist Mono', SFMono-Regular, Consolas, monospace;
+  }
+</style>
diff --git a/frontend/.storybook/preview.ts b/frontend/.storybook/preview.ts
new file mode 100644
index 000000000..a9a414464
--- /dev/null
+++ b/frontend/.storybook/preview.ts
@@ -0,0 +1,38 @@
+import type { Preview } from '@storybook/react'
+import { withThemeByClassName } from '@storybook/addon-themes'
+
+// Import the same CSS files the app uses so all design tokens are available
+import '../src/styles/globals.css'
+import '../src/index.css'
+
+const preview: Preview = {
+  parameters: {
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+    layout: 'centered',
+    backgrounds: {
+      default: 'dark',
+      values: [
+        { name: 'dark', value: 'hsl(240 10% 3.9%)' },
+        { name: 'light', value: 'hsl(0 0% 100%)' },
+        { name: 'monet', value: '#FAF8F5' },
+      ],
+    },
+  },
+  decorators: [
+    withThemeByClassName({
+      themes: {
+        light: '',
+        dark: 'dark',
+        monet: 'monet',
+      },
+      defaultTheme: 'dark',
+    }),
+  ],
+}
+
+export default preview
diff --git a/frontend/e2e/insurance-coverage.spec.ts b/frontend/e2e/insurance-coverage.spec.ts
new file mode 100644
index 000000000..3066e32b1
--- /dev/null
+++ b/frontend/e2e/insurance-coverage.spec.ts
@@ -0,0 +1,397 @@
+/**
+ * E2E Tests: Insurance Coverage Guidelines
+ *
+ * Tests the insurance planner wizard flow and field inputs:
+ * - Step 1: Person selection + income display
+ * - Step 2: Questionnaire sections (Hospitalization, Life/TPD, Critical Illness, PA, Self-Insurance)
+ * - Step 3: Summary review
+ *
+ * Uses serial mode since wizard state carries between tests.
+ */
+import { authenticatedTest } from './fixtures/auth'
+import { expect } from '@playwright/test'
+
+authenticatedTest.describe('Insurance Coverage Guidelines', () => {
+  authenticatedTest.describe.configure({ mode: 'serial' })
+
+  authenticatedTest('should navigate to insurance planner', async ({ authenticatedPage }) => {
+    const page = authenticatedPage
+
+    // Navigate directly to the insurance planner page
+    await page.goto('/insurance-planner')
+    await page.waitForLoadState('networkidle')
+
+    // Verify we're on the insurance planner page
+    await expect(page.getByText('Insurance Planner').first()).toBeVisible({ timeout: 10000 })
+
+    // The default tab should be "My Coverage" which shows the GuidelinesTab
+    await expect(page.getByText('My Coverage').first()).toBeVisible({ timeout: 5000 })
+  })
+
+  authenticatedTest('Step 1: should show person selector and income', async ({ authenticatedPage }) => {
+    const page = authenticatedPage
+    await page.goto('/insurance-planner')
+    await page.waitForLoadState('networkidle')
+
+    // Verify Step 1 heading
+    await expect(page.getByText('Step 1 of 3')).toBeVisible({ timeout: 10000 })
+    await expect(page.getByText('Who are we planning for?')).toBeVisible()
+
+    // Verify person selector exists
+    await expect(page.getByText('Select person').first()).toBeVisible()
+
+    // The PersonSelector should auto-select the first person
+    // Check that the annual income section appears
+    await expect(page.getByText(/annual income/i).first()).toBeVisible({ timeout: 5000 })
+
+    // Verify the Continue button exists
+    const continueBtn = page.getByRole('button', { name: /continue/i })
+    await expect(continueBtn).toBeVisible()
+  })
+
+  authenticatedTest('Step 1: should allow changing person selection', async ({ authenticatedPage }) => {
+    const page = authenticatedPage
+    await page.goto('/insurance-planner')
+    await page.waitForLoadState('networkidle')
+
+    // Wait for step 1 to load
+    await expect(page.getByText('Step 1 of 3')).toBeVisible({ timeout: 10000 })
+
+    // Click the person selector dropdown to open it
+    const personSelector = page.locator('.relative').filter({ hasText: /select person/i }).first()
+    const dropdownTrigger = personSelector.locator('button').first()
+
+    if (await dropdownTrigger.isVisible()) {
+      await dropdownTrigger.click()
+
+      // Verify the dropdown opened - should show person options
+      await page.waitForTimeout(500)
+
+      // Check that at least one person is in the dropdown
+      const personOptions = page.locator('button').filter({ hasText: /\w+/ })
+      const optionCount = await personOptions.count()
+      expect(optionCount).toBeGreaterThan(0)
+
+      // Close dropdown by pressing Escape
+      await page.keyboard.press('Escape')
+    }
+  })
+
+  authenticatedTest('Step 1: should navigate to Step 2 on Continue', async ({ authenticatedPage }) => {
+    const page = authenticatedPage
+    await page.goto('/insurance-planner')
+    await page.waitForLoadState('networkidle')
+
+    // Wait for step 1
+    await expect(page.getByText('Step 1 of 3')).toBeVisible({ timeout: 10000 })
+
+    // Click continue to go to Step 2
+    const continueBtn = page.getByRole('button', { name: /continue/i })
+    await expect(continueBtn).toBeVisible({ timeout: 5000 })
+
+    // Only click if the button is enabled (income > 0)
+    const isDisabled = await continueBtn.getAttribute('disabled')
+    if (isDisabled === null) {
+      await continueBtn.click()
+
+      // Verify we're now on Step 2 — should see questionnaire section pills
+      await expect(page.getByText('Hospitalization').first()).toBeVisible({ timeout: 5000 })
+    }
+  })
+
+  authenticatedTest('Step 2 - Hospitalization: should show coverage options', async ({ authenticatedPage }) => {
+    const page = authenticatedPage
+    await page.goto('/insurance-planner')
+    await page.waitForLoadState('networkidle')
+
+    // Navigate to Step 2
+    await expect(page.getByText('Step 1 of 3')).toBeVisible({ timeout: 10000 })
+    const continueBtn = page.getByRole('button', { name: /continue/i })
+    await expect(continueBtn).toBeVisible({ timeout: 5000 })
+    const isDisabled = await continueBtn.getAttribute('disabled')
+    if (isDisabled !== null) return // Skip if can't proceed
+
+    await continueBtn.click()
+
+    // Verify Hospitalization section is active
+    await expect(page.getByText('Hospitalization').first()).toBeVisible({ timeout: 5000 })
+    await expect(page.getByText(/hospitalization coverage/i).first()).toBeVisible({ timeout: 5000 })
+
+    // Should show Public/Private hospital options
+    await expect(page.getByText(/public/i).first()).toBeVisible()
+    await expect(page.getByText(/private/i).first()).toBeVisible()
+
+    // Click "Private" option
+    const privateOption = page.locator('button').filter({ hasText: /private/i }).first()
+    await privateOption.click()
+
+    // After selecting Private, should show room type options
+    await page.waitForTimeout(500)
+
+    // Click Continue to advance to next sub-step or section
+    const nextBtn = page.getByRole('button', { name: /continue/i })
+    if (await nextBtn.isVisible()) {
+      // Select a room type option if visible
+      const roomOptions = page.locator('button').filter({ hasText: /single|shared|ward/i })
+      if (await roomOptions.first().isVisible()) {
+        await roomOptions.first().click()
+      }
+      await nextBtn.click()
+    }
+  })
+
+  authenticatedTest('Step 2 - Life/TPD: should show dependent selection and financial obligations', async ({ authenticatedPage }) => {
+    const page = authenticatedPage
+    await page.goto('/insurance-planner')
+    await page.waitForLoadState('networkidle')
+
+    // Navigate through Step 1 → Step 2
+    await expect(page.getByText('Step 1 of 3')).toBeVisible({ timeout: 10000 })
+    const step1Continue = page.getByRole('button', { name: /continue/i })
+    await expect(step1Continue).toBeVisible({ timeout: 5000 })
+    if ((await step1Continue.getAttribute('disabled')) !== null) return
+    await step1Continue.click()
+
+    // Navigate through Hospitalization section
+    await expect(page.getByText('Hospitalization').first()).toBeVisible({ timeout: 5000 })
+
+    // Select Public hospital (simpler path)
+    const publicOption = page.locator('button').filter({ hasText: /public/i }).first()
+    if (await publicOption.isVisible()) {
+      await publicOption.click()
+      await page.waitForTimeout(300)
+    }
+
+    // Select a ward class if shown
+    const wardOptions = page.locator('button').filter({ hasText: /class|ward/i })
+    if (await wardOptions.first().isVisible()) {
+      await wardOptions.first().click()
+      await page.waitForTimeout(300)
+    }
+
+    // Click Continue to go to Life/TPD
+    let nextBtn = page.getByRole('button', { name: /continue/i })
+    if (await nextBtn.isVisible()) {
+      await nextBtn.click()
+      await page.waitForTimeout(300)
+    }
+
+    // If there's another sub-step in hospitalization, advance again
+    nextBtn = page.getByRole('button', { name: /continue/i })
+    if (await nextBtn.isVisible()) {
+      // Check if we're still in hospitalization
+      const lifeTpdVisible = await page.getByText('Life / TPD').first().isVisible().catch(() => false)
+      if (!lifeTpdVisible) {
+        await nextBtn.click()
+        await page.waitForTimeout(300)
+      }
+    }
+
+    // Now we should be in Life/TPD section
+    // Check for dependent selection heading
+    const dependentLabel = page.getByText(/who financially depends on you/i)
+    const isLifeTpdSection = await dependentLabel.isVisible({ timeout: 5000 }).catch(() => false)
+
+    if (isLifeTpdSection) {
+      // Verify dependent selection chips are shown
+      await expect(dependentLabel).toBeVisible()
+
+      // Check if there are person chips to select as dependents
+      // These are buttons showing person names with checkboxes
+      const personChips = page.locator('button').filter({ hasText: /age \d+/i })
+      const chipCount = await personChips.count()
+
+      if (chipCount > 0) {
+        // Click the first dependent to select them
+        await personChips.first().click()
+        await page.waitForTimeout(300)
+
+        // Verify selection summary appears
+        await expect(page.getByText(/dependent.*selected/i).first()).toBeVisible({ timeout: 3000 })
+
+        // Check that spouse selector appears after selecting a dependent
+        const spouseLabel = page.getByText(/spouse.*partner/i).first()
+        const spouseVisible = await spouseLabel.isVisible({ timeout: 3000 }).catch(() => false)
+        if (spouseVisible) {
+          await expect(spouseLabel).toBeVisible()
+        }
+      }
+
+      // Click Continue to go to Financial obligations sub-step
+      nextBtn = page.getByRole('button', { name: /continue/i })
+      if (await nextBtn.isVisible()) {
+        await nextBtn.click()
+        await page.waitForTimeout(300)
+      }
+
+      // Check for financial obligations section
+      const financialLabel = page.getByText(/financial obligations/i).first()
+      const financialVisible = await financialLabel.isVisible({ timeout: 3000 }).catch(() => false)
+
+      if (financialVisible) {
+        // Verify auto-populated financial data is shown (read-only)
+        const mortgageText = page.getByText(/mortgage/i).first()
+        await expect(mortgageText).toBeVisible({ timeout: 3000 })
+
+        // Verify "Future obligations" input exists (the only editable field)
+        const futureObligations = page.getByText(/future obligations/i).first()
+        const hasFutureObligations = await futureObligations.isVisible({ timeout: 3000 }).catch(() => false)
+        if (hasFutureObligations) {
+          await expect(futureObligations).toBeVisible()
+        }
+      }
+    }
+  })
+
+  authenticatedTest('Step 2 - Critical Illness: should show emergency fund options', async ({ authenticatedPage }) => {
+    const page = authenticatedPage
+    await page.goto('/insurance-planner')
+    await page.waitForLoadState('networkidle')
+
+    // Fast-track through Step 1
+    await expect(page.getByText('Step 1 of 3')).toBeVisible({ timeout: 10000 })
+    const step1Continue = page.getByRole('button', { name: /continue/i })
+    if ((await step1Continue.getAttribute('disabled')) !== null) return
+    await step1Continue.click()
+    await page.waitForTimeout(500)
+
+    // Navigate through sections by clicking Continue repeatedly
+    // We need to get past Hospitalization and Life/TPD to reach Critical Illness
+    for (let i = 0; i < 6; i++) {
+      const continueBtn = page.getByRole('button', { name: /continue/i })
+      if (!(await continueBtn.isVisible({ timeout: 2000 }).catch(() => false))) break
+
+      // Select any required option before continuing
+      // Check for option cards and select the first if none selected
+      const optionButtons = page.locator('button').filter({ hasText: /public|private|single|shared/i })
+      if (await optionButtons.first().isVisible({ timeout: 500 }).catch(() => false)) {
+        await optionButtons.first().click()
+        await page.waitForTimeout(200)
+      }
+
+      await continueBtn.click()
+      await page.waitForTimeout(500)
+
+      // Check if we've reached Critical Illness
+      const ciVisible = await page.getByText(/emergency fund/i).first().isVisible({ timeout: 1000 }).catch(() => false)
+      if (ciVisible) break
+    }
+
+    // Verify Critical Illness section content
+    const emergencyFund = page.getByText(/emergency fund/i).first()
+    const isCISection = await emergencyFund.isVisible({ timeout: 3000 }).catch(() => false)
+    if (isCISection) {
+      await expect(emergencyFund).toBeVisible()
+    }
+  })
+
+  authenticatedTest('Full wizard flow: should complete all steps', async ({ authenticatedPage }) => {
+    const page = authenticatedPage
+    await page.goto('/insurance-planner')
+    await page.waitForLoadState('networkidle')
+
+    // Step 1: Verify and proceed
+    await expect(page.getByText('Step 1 of 3')).toBeVisible({ timeout: 10000 })
+    let continueBtn = page.getByRole('button', { name: /continue/i })
+    await expect(continueBtn).toBeVisible({ timeout: 5000 })
+    if ((await continueBtn.getAttribute('disabled')) !== null) {
+      // Can't proceed without income - test ends here
+      return
+    }
+    await continueBtn.click()
+    await page.waitForTimeout(500)
+
+    // Step 2: Click through all questionnaire sections
+    // Navigate through each section by selecting options and clicking Continue
+    let maxAttempts = 20 // Safety limit
+    let attempts = 0
+
+    while (attempts < maxAttempts) {
+      attempts++
+
+      // Check if we've reached Step 3 (Summary)
+      const summaryVisible = await page.getByText(/review your coverage/i).first().isVisible({ timeout: 500 }).catch(() => false)
+        || await page.getByText(/your targets/i).first().isVisible({ timeout: 500 }).catch(() => false)
+      if (summaryVisible) break
+
+      // Look for Continue button
+      continueBtn = page.getByRole('button', { name: /continue/i })
+      const continueVisible = await continueBtn.isVisible({ timeout: 1000 }).catch(() => false)
+
+      if (!continueVisible) {
+        // Maybe there's a "Complete" or "Finish" button
+        const completeBtn = page.getByRole('button', { name: /complete|finish|confirm/i })
+        if (await completeBtn.isVisible({ timeout: 500 }).catch(() => false)) {
+          await completeBtn.click()
+          break
+        }
+        break
+      }
+
+      // Before clicking Continue, try selecting required options
+      // Check if Continue is disabled - if so, we need to make a selection
+      const isDisabled = await continueBtn.getAttribute('disabled')
+      if (isDisabled !== null) {
+        // Find and click any unselected option card
+        const optionCards = page.locator('button').filter({ hasText: /public|private|single|shared|class|ward|basic|standard/i })
+        if (await optionCards.first().isVisible({ timeout: 500 }).catch(() => false)) {
+          await optionCards.first().click()
+          await page.waitForTimeout(300)
+        } else {
+          // Try clicking any available person chip for dependent selection
+          const personChips = page.locator('button').filter({ hasText: /age \d+/i })
+          if (await personChips.first().isVisible({ timeout: 500 }).catch(() => false)) {
+            await personChips.first().click()
+            await page.waitForTimeout(300)
+          } else {
+            // Can't proceed - break to avoid infinite loop
+            break
+          }
+        }
+      }
+
+      await continueBtn.click()
+      await page.waitForTimeout(500)
+    }
+
+    // Verify we reached either the summary or the configured view
+    const reachedEnd = await page.getByText(/review your coverage|your targets|coverage target/i).first()
+      .isVisible({ timeout: 5000 }).catch(() => false)
+
+    // Log where we ended up for debugging
+    if (!reachedEnd) {
+      const pageContent = await page.textContent('body')
+      console.log('Did not reach summary. Current page contains:', pageContent?.substring(0, 500))
+    }
+  })
+
+  authenticatedTest('PersonSelector: should show relationship labels', async ({ authenticatedPage }) => {
+    const page = authenticatedPage
+    await page.goto('/insurance-planner')
+    await page.waitForLoadState('networkidle')
+
+    // Wait for step 1
+    await expect(page.getByText('Step 1 of 3')).toBeVisible({ timeout: 10000 })
+
+    // Open the PersonSelector dropdown
+    // Find the selector near "Select person" label
+    const selectorContainer = page.locator('div').filter({ hasText: /^select person$/i }).first()
+    const trigger = selectorContainer.locator('..').locator('button').first()
+
+    if (await trigger.isVisible()) {
+      await trigger.click()
+      await page.waitForTimeout(500)
+
+      // Check that the dropdown is open and shows person options
+      // Person options should show names and potentially relationship labels
+      const dropdownOptions = page.locator('button').filter({ hasText: /\w+/ })
+      const count = await dropdownOptions.count()
+
+      // At least the test account person should be visible
+      expect(count).toBeGreaterThan(0)
+
+      // Close dropdown
+      await page.keyboard.press('Escape')
+    }
+  })
+})
diff --git a/frontend/package.json b/frontend/package.json
index a4690f184..eee6ae15a 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -9,6 +9,8 @@
     "lint": "next lint",
     "type-check": "tsc --noEmit",
     "test": "vitest",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build -o storybook-static",
     "generate:api": "swagger-typescript-api generate -p ../backend/cmd/server/docs/swagger.json -o src/types -n api.generated.ts --no-client"
   },
   "dependencies": {
@@ -50,6 +52,15 @@
   },
   "devDependencies": {
     "@playwright/test": "^1.57.0",
+    "@storybook/addon-essentials": "8.4.7",
+    "@storybook/addon-interactions": "8.4.7",
+    "@storybook/addon-themes": "8.4.7",
+    "@storybook/addon-webpack5-compiler-swc": "^4.0.2",
+    "@storybook/blocks": "8.4.7",
+    "@storybook/manager-api": "8.4.7",
+    "@storybook/react": "8.4.7",
+    "@storybook/react-webpack5": "8.4.7",
+    "@storybook/theming": "8.4.7",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.0",
     "@testing-library/user-event": "^14.6.1",
@@ -60,13 +71,19 @@
     "@types/react-resizable": "^3.0.8",
     "@vitejs/plugin-react": "^5.1.1",
     "autoprefixer": "^10.4.16",
+    "css-loader": "^7.1.3",
     "eslint": "^8.53.0",
     "eslint-config-next": "^14.0.0",
     "grab": "^0.0.88",
+    "html-webpack-plugin": "^5.6.6",
     "jsdom": "^27.2.0",
     "postcss": "^8.4.31",
+    "postcss-loader": "^8.2.0",
+    "storybook": "8.4.7",
+    "style-loader": "^4.0.0",
     "swagger-typescript-api": "^13.2.16",
     "tailwindcss": "^3.3.5",
+    "ts-loader": "^9.5.4",
     "typescript": "^5.2.2",
     "vitest": "^4.0.13"
   }
diff --git a/frontend/src/api/financial/persons.ts b/frontend/src/api/financial/persons.ts
index 72f13c150..e26460584 100644
--- a/frontend/src/api/financial/persons.ts
+++ b/frontend/src/api/financial/persons.ts
@@ -1,5 +1,5 @@
 import { apiClient } from '../client'
-import type { Person, PersonCreatePayload, PersonUpdatePayload } from '@/types/person'
+import type { Person, PersonCreatePayload, PersonUpdatePayload, Relationship } from '@/types/person'
 import type { ResidencyStatus } from '@/types/cpf'
 import type {
   Person as ApiPerson,
@@ -21,6 +21,7 @@ function toPerson(data: ApiPerson): Person {
     gender: ((data as { gender?: string }).gender ?? 'male') as 'male' | 'female',
     residencyStatus: (data.residencyStatus ?? 'citizen') as ResidencyStatus,
     prGrantDate: data.prGrantDate ?? null,
+    relationship: ((data as { relationship?: string }).relationship ?? 'self') as Relationship,
     createdAt: data.createdAt ?? '',
     updatedAt: data.updatedAt ?? '',
     incomeCount: data.incomeCount ?? 0,
@@ -48,13 +49,14 @@ export async function getPerson(id: string): Promise<Person> {
  * Create a new person
  */
 export async function createPerson(payload: PersonCreatePayload): Promise<Person> {
-  const body: PersonV2CreateInput & { gender?: string } = {
+  const body: PersonV2CreateInput & { gender?: string; relationship?: string } = {
     name: payload.name,
     dateOfBirth: payload.dateOfBirth,
     residencyStatus: payload.residencyStatus,
     displayColor: payload.displayColor ?? undefined,
     prGrantDate: payload.prGrantDate ?? undefined,
     gender: payload.gender,
+    relationship: payload.relationship,
   }
   const data = await apiClient.post<ApiPerson>('/persons', body, { baseUrl: '/api/v2' })
   return toPerson(data)
@@ -64,13 +66,14 @@ export async function createPerson(payload: PersonCreatePayload): Promise<Person
  * Update an existing person
  */
 export async function updatePerson(id: string, payload: PersonUpdatePayload): Promise<Person> {
-  const body: PersonV2UpdateInput = {
+  const body: PersonV2UpdateInput & { relationship?: string } = {
     name: payload.name,
     dateOfBirth: payload.dateOfBirth,
     residencyStatus: payload.residencyStatus,
     displayColor: payload.displayColor ?? undefined,
     prGrantDate: payload.prGrantDate ?? undefined,
     isIncluded: payload.isIncluded,
+    relationship: payload.relationship,
   }
   const data = await apiClient.put<ApiPerson>(`/persons/${id}`, body, { baseUrl: '/api/v2' })
   return toPerson(data)
diff --git a/frontend/src/api/financial/settings.ts b/frontend/src/api/financial/settings.ts
index b5b1fa801..0b153b844 100644
--- a/frontend/src/api/financial/settings.ts
+++ b/frontend/src/api/financial/settings.ts
@@ -14,6 +14,7 @@ export async function getUserSettings(): Promise<UserSettings> {
     groupItemsByCategory: data.groupItemsByCategory ?? true,
     chartPictureInPicture: data.chartPictureInPicture ?? false,
     dashboardLayout: data.dashboardLayout ?? 'stacked',
+    onboardingCompleted: data.onboardingCompleted ?? false,
     updatedAt: data.updatedAt,
   }
 }
@@ -29,6 +30,7 @@ export async function updateUserSettings(settings: UserSettings): Promise<UserSe
     groupItemsByCategory: settings.groupItemsByCategory,
     chartPictureInPicture: settings.chartPictureInPicture,
     dashboardLayout: settings.dashboardLayout,
+    onboardingCompleted: settings.onboardingCompleted,
   })
   return {
     id: data.id,
@@ -41,6 +43,7 @@ export async function updateUserSettings(settings: UserSettings): Promise<UserSe
     groupItemsByCategory: data.groupItemsByCategory ?? true,
     chartPictureInPicture: data.chartPictureInPicture ?? false,
     dashboardLayout: data.dashboardLayout ?? 'stacked',
+    onboardingCompleted: data.onboardingCompleted ?? false,
     updatedAt: data.updatedAt,
   }
 }
diff --git a/frontend/src/app/(auth)/login/page.tsx b/frontend/src/app/(auth)/login/page.tsx
index 69cabe54d..cf4cf9494 100644
--- a/frontend/src/app/(auth)/login/page.tsx
+++ b/frontend/src/app/(auth)/login/page.tsx
@@ -11,7 +11,7 @@ bg-black`}>
         {/* Header */}
         <div className="text-center mb-8">
           <h1 className="text-3xl font-bold text-white mb-2">Welcome back</h1>
-          <p className="text-gray-400">Sign in to continue to Assetra</p>
+          <p className="text-gray-400">Sign in to continue to WealthProject</p>
         </div>
 
         {/* Form Card */}
diff --git a/frontend/src/app/insurance-planner/page.tsx b/frontend/src/app/insurance-planner/page.tsx
index 0a9e3826a..481ed3770 100644
--- a/frontend/src/app/insurance-planner/page.tsx
+++ b/frontend/src/app/insurance-planner/page.tsx
@@ -1,34 +1,182 @@
 'use client'
 
 import { useState } from 'react'
-import { ArrowLeft, Shield, X } from 'lucide-react'
-import Link from 'next/link'
+import { useRouter } from 'next/navigation'
+import { Shield, X } from 'lucide-react'
+import clsx from 'clsx'
 import {
   InsuranceTabs,
   type InsuranceTabId,
 } from '@/components/insurance/InsuranceTabs'
-import { OverviewTab } from '@/components/insurance/tabs/OverviewTab'
 import { PoliciesTab } from '@/components/insurance/tabs/PoliciesTab'
+import { GuidelinesTab } from '@/components/insurance/tabs/GuidelinesTab'
+import { JourneyTab } from '@/components/insurance/tabs/JourneyTab'
+import { useColorScheme } from '@/stores'
+
+// ============================================================================
+// THEME-AWARE DESIGN SYSTEM
+// Supports both dark mode and Monet (impressionist) mode
+// ============================================================================
+
+const monetColors = {
+  // Backgrounds - warm cream to pale blue like his canvases
+  bgCream: '#FAF8F5',
+  bgPaleBlue: '#F0F4F8',
+  bgWarmWhite: '#FFFEF9',
+
+  // Primary - Wisteria/Lavender (from his garden paintings)
+  lavender: '#9B8BB4',
+  lavenderLight: '#C4B8D9',
+  lavenderDark: '#7A6B94',
+
+  // Accent - Coral Rose (water lily pinks)
+  coralRose: '#E8A898',
+  coralRoseLight: '#F5D4CC',
+  coralRoseDark: '#D4847A',
+
+  // Success - Sage Green (lily pads, gardens)
+  sage: '#7FB285',
+  sageLight: '#B5D4B8',
+  sageDark: '#5A8A5E',
+
+  // Gold - Sunlight on water
+  sunlightGold: '#D4C5A9',
+  sunlightGoldLight: '#EDE6D8',
+  sunlightGoldDark: '#B8A87D',
+
+  // Text
+  textPrimary: '#3D3D3D',
+  textSecondary: '#6B6B6B',
+  textMuted: '#9B9B9B',
+
+  // Soft shadows
+  shadowSoft: 'rgba(155, 139, 180, 0.12)',
+  shadowMedium: 'rgba(155, 139, 180, 0.18)',
+}
+
+const darkColors = {
+  // Backgrounds
+  bgPrimary: '#0a0a0a',
+  bgSecondary: '#111111',
+  bgTertiary: '#1a1a1a',
+
+  // Primary - Purple accent
+  primary: '#a78bfa',
+  primaryLight: '#c4b5fd',
+  primaryDark: '#7c3aed',
+
+  // Accent - Coral/Rose
+  accent: '#fb7185',
+  accentLight: '#fda4af',
+  accentDark: '#e11d48',
+
+  // Success - Emerald
+  success: '#34d399',
+  successLight: '#6ee7b7',
+  successDark: '#059669',
+
+  // Gold
+  gold: '#fbbf24',
+  goldLight: '#fcd34d',
+  goldDark: '#d97706',
+
+  // Text
+  textPrimary: '#f1f5f9',
+  textSecondary: '#94a3b8',
+  textMuted: '#64748b',
+
+  // Shadows
+  shadowSoft: 'rgba(0, 0, 0, 0.3)',
+  shadowMedium: 'rgba(0, 0, 0, 0.5)',
+}
+
+// Painterly noise texture overlay (subtle canvas effect)
+const canvasTexture = `url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E")`
 
 // Embedded view component for use within Dashboard
 export function InsurancePlannerView({ onClose }: { onClose?: () => void }) {
   const [activeTab, setActiveTab] = useState<InsuranceTabId>('overview')
+  const colorScheme = useColorScheme()
+  const isMonet = colorScheme === 'monet'
+  const colors = isMonet ? monetColors : darkColors
+
+  const handleNavigateToPolicy = () => {
+    setActiveTab('policies')
+  }
 
   return (
-    <div className="flex h-full flex-col overflow-hidden">
+    <div
+      className={clsx(
+        'flex h-full flex-col overflow-hidden relative transition-colors duration-300',
+        !isMonet && 'bg-[#0a0a0a]'
+      )}
+      style={isMonet ? {
+        background: `linear-gradient(135deg, ${monetColors.bgCream} 0%, ${monetColors.bgPaleBlue} 50%, ${monetColors.bgWarmWhite} 100%)`,
+      } : undefined}
+    >
+      {/* Canvas/noise texture overlay */}
+      <div
+        className={clsx(
+          'absolute inset-0 pointer-events-none',
+          isMonet ? 'opacity-[0.03] mix-blend-multiply' : 'opacity-[0.02]'
+        )}
+        style={{ backgroundImage: canvasTexture }}
+      />
+
+      {/* Ambient light effects */}
+      <div
+        className="absolute -top-32 -left-32 w-96 h-96 rounded-full pointer-events-none"
+        style={{
+          background: isMonet
+            ? `radial-gradient(circle, ${monetColors.sunlightGoldLight} 0%, transparent 70%)`
+            : `radial-gradient(circle, ${darkColors.primary}20 0%, transparent 70%)`,
+          filter: 'blur(60px)',
+          opacity: isMonet ? 0.6 : 0.4,
+        }}
+      />
+
       {/* Header */}
-      <header className="shrink-0 border-b border-white/[0.06] bg-white/[0.01]">
-        <div className="px-6 py-4">
+      <header className="shrink-0 relative z-10">
+        <div
+          className="px-6 py-5 backdrop-blur-sm"
+          style={{
+            background: isMonet
+              ? `linear-gradient(to bottom, rgba(255,255,255,0.8), rgba(255,255,255,0.4))`
+              : `linear-gradient(to bottom, rgba(17,17,17,0.9), rgba(17,17,17,0.7))`,
+            borderBottom: isMonet
+              ? `1px solid rgba(155, 139, 180, 0.15)`
+              : `1px solid rgba(255, 255, 255, 0.06)`,
+          }}
+        >
           <div className="flex items-center justify-between">
-            <div className="flex items-center gap-3">
-              <div className="flex h-10 w-10 items-center justify-center rounded-xl bg-gradient-to-br from-purple-500 to-purple-600 shadow-lg shadow-purple-500/20">
-                <Shield className="h-5 w-5 text-white" />
+            <div className="flex items-center gap-4">
+              <div
+                className="flex h-12 w-12 items-center justify-center rounded-2xl relative overflow-hidden"
+                style={{
+                  background: isMonet
+                    ? `linear-gradient(145deg, ${monetColors.lavender}, ${monetColors.lavenderDark})`
+                    : `linear-gradient(145deg, ${darkColors.primary}, ${darkColors.primaryDark})`,
+                  boxShadow: isMonet
+                    ? `0 8px 32px ${monetColors.shadowMedium}, inset 0 1px 0 rgba(255,255,255,0.3)`
+                    : `0 8px 32px ${darkColors.shadowMedium}, inset 0 1px 0 rgba(255,255,255,0.1)`,
+                }}
+              >
+                <Shield className="h-6 w-6 text-white drop-shadow-sm" />
               </div>
               <div>
-                <h1 className="text-lg font-semibold text-white">
+                <h1
+                  className="text-xl font-semibold tracking-tight"
+                  style={{
+                    color: colors.textPrimary,
+                    fontFamily: isMonet ? "'Cormorant Garamond', Georgia, serif" : 'inherit',
+                  }}
+                >
                   Insurance Planner
                 </h1>
-                <p className="text-sm text-slate-400">
+                <p
+                  className="text-sm mt-0.5"
+                  style={{ color: colors.textSecondary }}
+                >
                   Analyze scenarios and explore coverage options
                 </p>
               </div>
@@ -37,7 +185,12 @@ export function InsurancePlannerView({ onClose }: { onClose?: () => void }) {
               <button
                 type="button"
                 onClick={onClose}
-                className="flex h-8 w-8 items-center justify-center rounded-lg text-slate-400 transition-colors hover:bg-white/5 hover:text-white"
+                className="flex h-10 w-10 items-center justify-center rounded-xl transition-all duration-300 hover:scale-105"
+                style={{
+                  background: isMonet ? 'rgba(255,255,255,0.6)' : 'rgba(255,255,255,0.05)',
+                  color: colors.textSecondary,
+                  boxShadow: `0 2px 8px ${colors.shadowSoft}`,
+                }}
               >
                 <X className="h-4 w-4" />
               </button>
@@ -50,8 +203,9 @@ export function InsurancePlannerView({ onClose }: { onClose?: () => void }) {
       <InsuranceTabs activeTab={activeTab} onTabChange={setActiveTab} />
 
       {/* Main Content - scrollable */}
-      <main className="flex-1 overflow-y-auto px-6 py-6">
-        {activeTab === 'overview' && <OverviewTab />}
+      <main className="flex-1 overflow-y-auto relative z-10">
+        {activeTab === 'overview' && <GuidelinesTab onNavigateToPolicy={handleNavigateToPolicy} />}
+        {activeTab === 'journey' && <JourneyTab />}
         {activeTab === 'policies' && <PoliciesTab />}
       </main>
     </div>
@@ -60,37 +214,137 @@ export function InsurancePlannerView({ onClose }: { onClose?: () => void }) {
 
 // Standalone page for direct navigation
 export default function InsurancePlannerPage() {
+  const router = useRouter()
   const [activeTab, setActiveTab] = useState<InsuranceTabId>('overview')
+  const colorScheme = useColorScheme()
+  const isMonet = colorScheme === 'monet'
+  const colors = isMonet ? monetColors : darkColors
+
+  const handleClose = () => {
+    router.push('/dashboard')
+  }
+
+  const handleNavigateToPolicy = () => {
+    setActiveTab('policies')
+  }
 
   return (
-    <div className="min-h-screen bg-[#070B14]">
-      {/* Header */}
-      <header className="border-b border-white/[0.06] bg-white/[0.01]">
-        <div className="mx-auto max-w-7xl px-6 py-4">
-          <div className="flex items-center gap-4">
-            <Link
-              href="/dashboard"
-              className="flex items-center gap-2 text-slate-400 transition-colors hover:text-white"
-            >
-              <ArrowLeft className="h-4 w-4" />
-              <span className="text-sm">Dashboard</span>
-            </Link>
+    <div
+      className={clsx(
+        'flex h-screen flex-col overflow-hidden relative transition-colors duration-300',
+        !isMonet && 'bg-[#050505]'
+      )}
+      style={isMonet ? {
+        background: `linear-gradient(135deg, ${monetColors.bgCream} 0%, ${monetColors.bgPaleBlue} 50%, ${monetColors.bgWarmWhite} 100%)`,
+      } : undefined}
+    >
+      {/* Canvas/noise texture overlay */}
+      <div
+        className={clsx(
+          'absolute inset-0 pointer-events-none',
+          isMonet ? 'opacity-[0.03] mix-blend-multiply' : 'opacity-[0.02]'
+        )}
+        style={{ backgroundImage: canvasTexture }}
+      />
 
-            <div className="h-6 w-px bg-white/[0.08]" />
+      {/* Atmospheric light effects */}
+      <div
+        className="absolute -top-40 -left-40 w-[500px] h-[500px] rounded-full pointer-events-none"
+        style={{
+          background: isMonet
+            ? `radial-gradient(circle, ${monetColors.sunlightGoldLight} 0%, transparent 70%)`
+            : `radial-gradient(circle, ${darkColors.primary}15 0%, transparent 70%)`,
+          filter: 'blur(80px)',
+          opacity: isMonet ? 0.5 : 0.4,
+        }}
+      />
+      <div
+        className="absolute top-1/3 -right-32 w-80 h-80 rounded-full pointer-events-none"
+        style={{
+          background: isMonet
+            ? `radial-gradient(circle, ${monetColors.coralRoseLight} 0%, transparent 70%)`
+            : `radial-gradient(circle, ${darkColors.accent}10 0%, transparent 70%)`,
+          filter: 'blur(60px)',
+          opacity: isMonet ? 0.3 : 0.3,
+        }}
+      />
+      <div
+        className="absolute bottom-0 left-1/4 w-96 h-64 rounded-full pointer-events-none"
+        style={{
+          background: isMonet
+            ? `radial-gradient(circle, ${monetColors.sageLight} 0%, transparent 70%)`
+            : `radial-gradient(circle, ${darkColors.success}10 0%, transparent 70%)`,
+          filter: 'blur(70px)',
+          opacity: 0.25,
+        }}
+      />
 
-            <div className="flex items-center gap-3">
-              <div className="flex h-10 w-10 items-center justify-center rounded-xl bg-gradient-to-br from-purple-500 to-purple-600 shadow-lg shadow-purple-500/20">
-                <Shield className="h-5 w-5 text-white" />
+      {/* Header */}
+      <header className="shrink-0 relative z-10">
+        <div
+          className="mx-auto max-w-7xl px-8 py-6 backdrop-blur-sm"
+          style={{
+            background: isMonet
+              ? `linear-gradient(to bottom, rgba(255,255,255,0.85), rgba(255,255,255,0.5))`
+              : `linear-gradient(to bottom, rgba(10,10,10,0.9), rgba(10,10,10,0.7))`,
+            borderBottom: isMonet
+              ? `1px solid rgba(155, 139, 180, 0.12)`
+              : `1px solid rgba(255, 255, 255, 0.06)`,
+          }}
+        >
+          <div className="flex items-center justify-between">
+            <div className="flex items-center gap-5">
+              <div
+                className="flex h-14 w-14 items-center justify-center rounded-2xl relative overflow-hidden transform hover:scale-105 transition-transform duration-500"
+                style={{
+                  background: isMonet
+                    ? `linear-gradient(145deg, ${monetColors.lavender}, ${monetColors.lavenderDark})`
+                    : `linear-gradient(145deg, ${darkColors.primary}, ${darkColors.primaryDark})`,
+                  boxShadow: isMonet
+                    ? `0 12px 40px ${monetColors.shadowMedium}, 0 4px 12px rgba(155, 139, 180, 0.2), inset 0 1px 0 rgba(255,255,255,0.35)`
+                    : `0 12px 40px ${darkColors.shadowMedium}, inset 0 1px 0 rgba(255,255,255,0.1)`,
+                }}
+              >
+                <Shield className="h-7 w-7 text-white drop-shadow-sm" />
               </div>
+
               <div>
-                <h1 className="text-lg font-semibold text-white">
+                <h1
+                  className="text-2xl font-semibold tracking-tight"
+                  style={{
+                    color: colors.textPrimary,
+                    fontFamily: isMonet ? "'Cormorant Garamond', Georgia, serif" : 'inherit',
+                    letterSpacing: '-0.01em',
+                  }}
+                >
                   Insurance Planner
                 </h1>
-                <p className="text-sm text-slate-400">
+                <p
+                  className="text-sm mt-1"
+                  style={{
+                    color: colors.textSecondary,
+                    fontFamily: isMonet ? "'DM Sans', system-ui, sans-serif" : 'inherit',
+                  }}
+                >
                   Analyze scenarios and explore coverage options
                 </p>
               </div>
             </div>
+
+            <button
+              type="button"
+              onClick={handleClose}
+              className="flex h-11 w-11 items-center justify-center rounded-xl transition-all duration-300 hover:scale-105 group"
+              style={{
+                background: isMonet ? 'rgba(255,255,255,0.7)' : 'rgba(255,255,255,0.05)',
+                color: colors.textSecondary,
+                boxShadow: `0 4px 16px ${colors.shadowSoft}`,
+                backdropFilter: 'blur(8px)',
+              }}
+              title="Return to Dashboard"
+            >
+              <X className="h-5 w-5 group-hover:rotate-90 transition-transform duration-300" />
+            </button>
           </div>
         </div>
       </header>
@@ -98,11 +352,17 @@ export default function InsurancePlannerPage() {
       {/* Tab Navigation */}
       <InsuranceTabs activeTab={activeTab} onTabChange={setActiveTab} />
 
-      {/* Main Content */}
-      <main className="mx-auto max-w-7xl px-6 py-6">
-        {activeTab === 'overview' && <OverviewTab />}
-        {activeTab === 'policies' && <PoliciesTab />}
+      {/* Main Content - scrollable */}
+      <main className="flex-1 overflow-y-auto relative z-10">
+        <div className="mx-auto max-w-7xl">
+          {activeTab === 'overview' && <GuidelinesTab onNavigateToPolicy={handleNavigateToPolicy} />}
+          {activeTab === 'journey' && <JourneyTab />}
+          {activeTab === 'policies' && <PoliciesTab />}
+        </div>
       </main>
     </div>
   )
 }
+
+// Export colors for use in child components
+export { monetColors, darkColors, canvasTexture }
diff --git a/frontend/src/app/layout.tsx b/frontend/src/app/layout.tsx
index 70c47f592..6a484a3ef 100644
--- a/frontend/src/app/layout.tsx
+++ b/frontend/src/app/layout.tsx
@@ -8,6 +8,7 @@ import { AuthProvider } from '@/components/auth/AuthProvider'
 import { AuthenticationGuard } from '@/components/auth/AuthGuard'
 import { PersonFilterProvider } from '@/contexts/PersonFilterContext'
 import { PersonsModalContainer } from '@/components/modals/PersonsModal'
+import { ThemeProvider } from '@/components/providers/ThemeProvider'
 
 const geistSans = Geist({
   subsets: ['latin'],
@@ -29,7 +30,7 @@ export default function RootLayout({
   return (
     <html
       lang="en"
-      className={`${geistSans.variable} ${geistMono.variable} bg-black text-white`}
+      className={`${geistSans.variable} ${geistMono.variable} dark`}
     >
       <head>
         {process.env.NODE_ENV === 'development' && (
@@ -52,15 +53,17 @@ export default function RootLayout({
           </>
         )}
       </head>
-      <body className="antialiased bg-black text-white">
+      <body className="antialiased bg-black text-white transition-colors duration-300">
         <QueryProvider>
           <AuthProvider>
-            <AuthenticationGuard>
-              <PersonFilterProvider>
-                {children}
-                <PersonsModalContainer />
-              </PersonFilterProvider>
-            </AuthenticationGuard>
+            <ThemeProvider>
+              <AuthenticationGuard>
+                <PersonFilterProvider>
+                  {children}
+                  <PersonsModalContainer />
+                </PersonFilterProvider>
+              </AuthenticationGuard>
+            </ThemeProvider>
           </AuthProvider>
         </QueryProvider>
         <Toaster theme="dark" position="bottom-right" richColors />
@@ -70,6 +73,6 @@ export default function RootLayout({
 }
 
 export const metadata = {
-  title: 'Financial Chat System',
-  description: 'AI-powered financial planning and chat system',
+  title: 'WealthProject',
+  description: 'Weath projection simulator',
 }
diff --git a/frontend/src/components/auth/UserMenu.tsx b/frontend/src/components/auth/UserMenu.tsx
index a27981b95..efb016ffb 100644
--- a/frontend/src/components/auth/UserMenu.tsx
+++ b/frontend/src/components/auth/UserMenu.tsx
@@ -4,13 +4,17 @@ import { useState, useEffect, useRef } from 'react'
 import { useRouter } from 'next/navigation'
 import Link from 'next/link'
 import { LogOut, User, ChevronDown, Settings } from 'lucide-react'
+import clsx from 'clsx'
 import { useSession, signOut } from '@/lib/auth-client'
 import { Button } from '@/components/ui/button'
 import { SettingsModal } from '@/components/modals/SettingsModal/SettingsModal'
 import { clearAllSensitiveStorage } from '@/hooks/useTaxReliefStorage'
+import { useColorScheme } from '@/stores'
 
 export function UserMenu() {
   const { data: session, isPending } = useSession()
+  const colorScheme = useColorScheme()
+  const isMonet = colorScheme === 'monet'
   const [isOpen, setIsOpen] = useState(false)
   const [isSigningOut, setIsSigningOut] = useState(false)
   const [mounted, setMounted] = useState(false)
@@ -56,7 +60,10 @@ export function UserMenu() {
   // Show loading skeleton on server and until mounted on client
   if (!mounted || isPending) {
     return (
-      <div className="h-9 w-24 bg-gray-800 rounded-md animate-pulse" />
+      <div className={clsx(
+        'h-9 w-24 rounded-md animate-pulse',
+        isMonet ? 'bg-[var(--monet-lavender)]/20' : 'bg-gray-800'
+      )} />
     )
   }
 
@@ -64,7 +71,11 @@ export function UserMenu() {
     return (
       <div className="flex items-center gap-2">
         <Link href="/login">
-          <Button variant="ghost" size="sm" className="text-gray-300 hover:text-white">
+          <Button variant="ghost" size="sm" className={clsx(
+            isMonet
+              ? 'text-[var(--monet-text-secondary)] hover:text-[var(--monet-text-primary)]'
+              : 'text-gray-300 hover:text-white'
+          )}>
             Sign In
           </Button>
         </Link>
@@ -81,16 +92,14 @@ export function UserMenu() {
     <div className="relative z-[100]" ref={menuRef}>
       <button
         onClick={() => setIsOpen(!isOpen)}
-        className={`flex items-center
-gap-2 px-3 py-2
-rounded-md
-hover:bg-gray-800
-transition-colors`}
+        className={clsx(
+          'flex items-center gap-2 px-3 py-2 rounded-md transition-colors',
+          isMonet
+            ? 'hover:bg-[var(--monet-lavender)]/10'
+            : 'hover:bg-gray-800'
+        )}
       >
-        <div className={`flex items-center justify-center
-w-8 h-8
-rounded-full
-bg-blue-600`}>
+        <div className="flex items-center justify-center w-8 h-8 rounded-full bg-blue-600">
           {session.user.image ? (
             <img
               src={session.user.image}
@@ -101,25 +110,42 @@ bg-blue-600`}>
             <User className="w-4 h-4 text-white" />
           )}
         </div>
-        <span className="text-sm text-gray-300 hidden sm:block">
+        <span className={clsx(
+          'text-sm hidden sm:block',
+          isMonet ? 'text-[var(--monet-text-secondary)]' : 'text-gray-300'
+        )}>
           {session.user.name || session.user.email}
         </span>
-        <ChevronDown className="w-4 h-4 text-gray-400" />
+        <ChevronDown className={clsx(
+          'w-4 h-4',
+          isMonet ? 'text-[var(--monet-text-muted)]' : 'text-gray-400'
+        )} />
       </button>
 
       {isOpen && (
-          <div className={`absolute right-0 z-[100]
-overflow-hidden
-w-56
-mt-2
-rounded-xl border border-white/[0.08]
-bg-[#0a0a0a]
-shadow-2xl`} style={{ isolation: 'isolate' }}>
-            <div className="px-4 py-3 border-b border-white/[0.06]">
-              <p className="text-sm font-medium text-slate-200 truncate">
+          <div
+            className={clsx(
+              'absolute right-0 z-[100] overflow-hidden w-56 mt-2 rounded-xl border shadow-2xl',
+              isMonet
+                ? 'border-[var(--monet-lavender)]/20 bg-white'
+                : 'border-white/[0.08] bg-[#0a0a0a]'
+            )}
+            style={{ isolation: 'isolate' }}
+          >
+            <div className={clsx(
+              'px-4 py-3 border-b',
+              isMonet ? 'border-[var(--monet-lavender)]/10' : 'border-white/[0.06]'
+            )}>
+              <p className={clsx(
+                'text-sm font-medium truncate',
+                isMonet ? 'text-[var(--monet-text-primary)]' : 'text-slate-200'
+              )}>
                 {session.user.name}
               </p>
-              <p className="text-xs text-slate-400 truncate">
+              <p className={clsx(
+                'text-xs truncate',
+                isMonet ? 'text-[var(--monet-text-muted)]' : 'text-slate-400'
+              )}>
                 {session.user.email}
               </p>
             </div>
@@ -130,12 +156,12 @@ shadow-2xl`} style={{ isolation: 'isolate' }}>
                   setIsOpen(false)
                   setIsSettingsOpen(true)
                 }}
-                className={`flex items-center
-w-full
-gap-2 px-4 py-2.5
-hover:bg-white/5
-text-sm text-slate-300 hover:text-slate-100
-transition-colors`}
+                className={clsx(
+                  'flex items-center w-full gap-2 px-4 py-2.5 text-sm transition-colors',
+                  isMonet
+                    ? 'text-[var(--monet-text-secondary)] hover:text-[var(--monet-text-primary)] hover:bg-[var(--monet-lavender)]/5'
+                    : 'text-slate-300 hover:text-slate-100 hover:bg-white/5'
+                )}
               >
                 <Settings className="w-4 h-4" />
                 Settings
@@ -143,13 +169,12 @@ transition-colors`}
               <button
                 onClick={handleSignOut}
                 disabled={isSigningOut}
-                className={`flex items-center
-w-full
-gap-2 px-4 py-2.5
-hover:bg-white/5
-text-sm text-slate-300 hover:text-slate-100
-disabled:opacity-50
-transition-colors`}
+                className={clsx(
+                  'flex items-center w-full gap-2 px-4 py-2.5 text-sm disabled:opacity-50 transition-colors',
+                  isMonet
+                    ? 'text-[var(--monet-text-secondary)] hover:text-[var(--monet-text-primary)] hover:bg-[var(--monet-lavender)]/5'
+                    : 'text-slate-300 hover:text-slate-100 hover:bg-white/5'
+                )}
               >
                 <LogOut className="w-4 h-4" />
                 {isSigningOut ? 'Signing out...' : 'Sign out'}
diff --git a/frontend/src/components/chat/ChatHeader.tsx b/frontend/src/components/chat/ChatHeader.tsx
index 4609fc5d1..3dc7323e4 100644
--- a/frontend/src/components/chat/ChatHeader.tsx
+++ b/frontend/src/components/chat/ChatHeader.tsx
@@ -24,7 +24,7 @@ shadow-glow`}>
             <Sparkles className="h-5 w-5 text-white" />
           </div>
           <div>
-            <h1 className="text-lg font-bold tracking-tight text-white">Assetra Chat</h1>            
+            <h1 className="text-lg font-bold tracking-tight text-white">WealthProject Chat</h1>            
           </div>
         </div>
         {onCollapse && (
diff --git a/frontend/src/components/dashboard/Dashboard.tsx b/frontend/src/components/dashboard/Dashboard.tsx
index 31e1310ac..3d0825d49 100644
--- a/frontend/src/components/dashboard/Dashboard.tsx
+++ b/frontend/src/components/dashboard/Dashboard.tsx
@@ -14,6 +14,8 @@ import { MiniChart } from './MiniChart'
 import { ResizableChartSection } from './ResizableChartSection'
 import { PropertyPlannerModal } from '@/components/modals/PropertyPlannerModal/PropertyPlannerModal'
 import { LayoutPreviewModal } from '@/components/modals/LayoutPreviewModal'
+import { OnboardingWizardModal } from '@/components/modals/OnboardingWizardModal/OnboardingWizardModal'
+import { PostResetChoiceModal } from '@/components/modals/PostResetChoiceModal'
 
 // Loading skeleton for feature modules
 function FeatureModuleLoading() {
@@ -30,15 +32,12 @@ const CPFSimulationView = dynamic(
   { ssr: false, loading: FeatureModuleLoading }
 )
 
-const TaxPlannerV2View = dynamic(
-  () => import('@/app/tax-planner/page').then(mod => ({ default: mod.TaxPlannerV2View })),
-  { ssr: false, loading: FeatureModuleLoading }
-)
-
 const InsurancePlannerView = dynamic(
   () => import('@/app/insurance-planner/page').then(mod => ({ default: mod.InsurancePlannerView })),
   { ssr: false, loading: FeatureModuleLoading }
 )
+
+import { usePersonsQuery } from '@/hooks/queries/usePersonsQuery'
 import { useTimeline } from '@/hooks/useTimeline'
 import { usePictureInPicture } from '@/hooks/usePictureInPicture'
 import { useScenarioEvents } from '@/hooks/useScenarioEvents'
@@ -46,7 +45,7 @@ import { useWindowWidth } from '@/hooks/useWindowWidth'
 import { generateUUID } from '@/lib/utils'
 import { settingsApi } from '@/api/financial'
 import { QUERY_KEYS } from '@/lib/queryKeys'
-import { useTimelineStore, useFeatureModulesStore } from '@/stores'
+import { useTimelineStore, useFeatureModulesStore, useColorScheme } from '@/stores'
 import { useShallow } from 'zustand/react/shallow'
 
 export function Dashboard() {
@@ -54,13 +53,12 @@ export function Dashboard() {
   const chatId = chatIdRef.current
   const queryClient = useQueryClient()
   const windowWidth = useWindowWidth()
+  const colorScheme = useColorScheme()
 
   // Feature modules state from Zustand store (batched with shallow comparison)
   const {
     showCPFView,
     closeCPFView,
-    showTaxPlanner,
-    closeTaxPlanner,
     showInsurancePlanner,
     closeInsurancePlanner,
     showPropertyPlanner,
@@ -69,6 +67,11 @@ export function Dashboard() {
     closePropertyPlanner,
     showLayoutModal,
     closeLayoutModal,
+    showOnboardingWizard,
+    openOnboardingWizard,
+    closeOnboardingWizard,
+    showPostResetChoice,
+    closePostResetChoice,
     isChatCollapsed,
     isHistoryOpen,
     toggleChat,
@@ -82,8 +85,6 @@ export function Dashboard() {
     useShallow((s) => ({
       showCPFView: s.showCPFView,
       closeCPFView: s.closeCPFView,
-      showTaxPlanner: s.showTaxPlanner,
-      closeTaxPlanner: s.closeTaxPlanner,
       showInsurancePlanner: s.showInsurancePlanner,
       closeInsurancePlanner: s.closeInsurancePlanner,
       showPropertyPlanner: s.showPropertyPlanner,
@@ -92,6 +93,11 @@ export function Dashboard() {
       closePropertyPlanner: s.closePropertyPlanner,
       showLayoutModal: s.showLayoutModal,
       closeLayoutModal: s.closeLayoutModal,
+      showOnboardingWizard: s.showOnboardingWizard,
+      openOnboardingWizard: s.openOnboardingWizard,
+      closeOnboardingWizard: s.closeOnboardingWizard,
+      showPostResetChoice: s.showPostResetChoice,
+      closePostResetChoice: s.closePostResetChoice,
       isChatCollapsed: s.isChatCollapsed,
       isHistoryOpen: s.isHistoryOpen,
       toggleChat: s.toggleChat,
@@ -130,6 +136,36 @@ export function Dashboard() {
     }
   }, [userSettings?.dashboardLayout, initializeLayout])
 
+  // ─── Onboarding wizard auto-trigger ─────────────────────────────────────
+  // Show wizard when: user has zero persons AND hasn't completed/dismissed onboarding.
+  // Uses a ref guard to prevent re-triggering during the same "session" (avoids race
+  // condition where the dismiss mutation hasn't round-tripped yet).
+  // The guard resets when onboardingCompleted flips back to false (e.g., after "Start Fresh").
+  const { data: personsData } = usePersonsQuery()
+  const onboardingTriggeredRef = useRef(false)
+
+  // Reset the guard when onboardingCompleted is explicitly set back to false
+  // (happens after "Delete All Data" / "Start Fresh")
+  useEffect(() => {
+    if (userSettings && !userSettings.onboardingCompleted) {
+      onboardingTriggeredRef.current = false
+    }
+  }, [userSettings?.onboardingCompleted])
+
+  useEffect(() => {
+    if (
+      !onboardingTriggeredRef.current &&
+      !showPostResetChoice &&
+      personsData !== undefined &&
+      userSettings !== undefined &&
+      personsData.length === 0 &&
+      !userSettings.onboardingCompleted
+    ) {
+      onboardingTriggeredRef.current = true
+      openOnboardingWizard()
+    }
+  }, [personsData, userSettings, showPostResetChoice, openOnboardingWizard])
+
   // Mutation for updating layout preference
   const updateLayoutMutation = useMutation({
     mutationFn: (layout: typeof dashboardLayout) =>
@@ -193,32 +229,41 @@ export function Dashboard() {
     return () => window.removeEventListener('keydown', handleKeyDown)
   }, [toggleChat])
 
+  // Theme-aware styles
+  const isMonet = colorScheme === 'monet'
+
   return (
     <>
-      <div className={`relative
-overflow-hidden
-h-screen w-full
-bg-[#050505]
-font-sans text-slate-200`}>
-        {/* Ambient background orbs */}
-        <div className={`fixed left-[-10%] top-[-20%]
-h-[800px] w-[800px]
-pointer-events-none
-rounded-full
-bg-zinc-800/20
-opacity-40 blur-[120px]`} />
-        <div className={`fixed bottom-[-20%] right-[-10%]
-h-[600px] w-[600px]
-pointer-events-none
-rounded-full
-bg-slate-800/10
-opacity-30 blur-[100px]`} />
-        <div className={`fixed right-[20%] top-[20%]
-h-[400px] w-[400px]
-pointer-events-none
-rounded-full
-bg-white/5
-opacity-20 blur-[80px]`} />
+      <div
+        className={clsx(
+          'relative overflow-hidden h-screen w-full font-sans transition-colors duration-300',
+          isMonet
+            ? 'text-[var(--monet-text-primary)]'
+            : 'bg-[#050505] text-slate-200'
+        )}
+        style={isMonet ? {
+          background: 'linear-gradient(135deg, var(--monet-bg-cream) 0%, var(--monet-bg-pale-blue) 50%, var(--monet-bg-warm-white) 100%)',
+        } : undefined}
+      >
+        {/* Ambient background orbs - theme aware */}
+        <div
+          className={clsx(
+            'fixed left-[-10%] top-[-20%] h-[800px] w-[800px] pointer-events-none rounded-full blur-[120px]',
+            isMonet ? 'bg-[var(--monet-lavender-light)] opacity-30' : 'bg-zinc-800/20 opacity-40'
+          )}
+        />
+        <div
+          className={clsx(
+            'fixed bottom-[-20%] right-[-10%] h-[600px] w-[600px] pointer-events-none rounded-full blur-[100px]',
+            isMonet ? 'bg-[var(--monet-sage-light)] opacity-25' : 'bg-slate-800/10 opacity-30'
+          )}
+        />
+        <div
+          className={clsx(
+            'fixed right-[20%] top-[20%] h-[400px] w-[400px] pointer-events-none rounded-full blur-[80px]',
+            isMonet ? 'bg-[var(--monet-gold-light)] opacity-40' : 'bg-white/5 opacity-20'
+          )}
+        />
 
         {/* Main content - side by side layout */}
         <div className="relative z-10 flex h-screen w-full overflow-hidden">
@@ -232,19 +277,21 @@ opacity-20 blur-[80px]`} />
           >
             {/* Chat panel */}
             <div
-              className={`absolute left-0 top-0
-h-screen w-[520px]
-p-6 pr-3`}
+              className="absolute left-0 top-0 h-screen w-[520px] p-6 pr-3"
               style={{
                 opacity: isChatCollapsed ? 0 : 1,
                 pointerEvents: isChatCollapsed ? 'none' : 'auto',
                 transition: 'opacity 250ms cubic-bezier(0.4, 0, 0.2, 1)',
               }}
             >
-              <div className={`flex flex-col overflow-hidden
-h-full
-rounded-2xl border border-white/[0.06]
-bg-[#0a0a0a]/80`}>
+              <div
+                className={clsx(
+                  'flex flex-col overflow-hidden h-full rounded-2xl border transition-colors duration-300',
+                  isMonet
+                    ? 'border-[var(--monet-lavender)]/20 bg-white/60 backdrop-blur-xl'
+                    : 'border-white/[0.06] bg-[#0a0a0a]/80'
+                )}
+              >
                 <Chat
                   chatId={chatId}
                   className="h-full min-h-0"
@@ -257,12 +304,12 @@ bg-[#0a0a0a]/80`}>
 
             {/* Collapsed sidebar */}
             <div
-              className={`absolute left-0 top-0
-flex flex-col items-center
-h-screen w-16
-pt-7
-border-r border-white/[0.06]
-bg-[#0a0a0a]/40`}
+              className={clsx(
+                'absolute left-0 top-0 flex flex-col items-center h-screen w-16 pt-7 border-r transition-colors duration-300',
+                isMonet
+                  ? 'border-[var(--monet-lavender)]/15 bg-white/40'
+                  : 'border-white/[0.06] bg-[#0a0a0a]/40'
+              )}
               style={{
                 opacity: isChatCollapsed ? 1 : 0,
                 pointerEvents: isChatCollapsed ? 'auto' : 'none',
@@ -272,7 +319,12 @@ bg-[#0a0a0a]/40`}
               <button
                 type="button"
                 onClick={expandChat}
-                className="p-1 text-slate-500 transition-colors hover:text-white"
+                className={clsx(
+                  'p-1 transition-colors',
+                  isMonet
+                    ? 'text-[var(--monet-text-muted)] hover:text-[var(--monet-text-primary)]'
+                    : 'text-slate-500 hover:text-white'
+                )}
                 title="Show chat"
               >
                 <PanelLeftOpen className="h-5 w-5" />
@@ -286,27 +338,16 @@ h-screen
 gap-6 p-6`}>
             {showCPFView ? (
               /* CPF Simulation View - takes over entire area */
-              <div className={`flex flex-1 flex-col overflow-hidden
-min-h-0
-rounded-2xl border border-white/[0.06]
-bg-[#0a0a0a]/80`}>
+              <div
+                className={clsx(
+                  'flex flex-1 flex-col overflow-hidden min-h-0 rounded-2xl border transition-colors duration-300',
+                  isMonet
+                    ? 'border-[var(--monet-lavender)]/20 bg-white/60 backdrop-blur-xl'
+                    : 'border-white/[0.06] bg-[#0a0a0a]/80'
+                )}
+              >
                 <CPFSimulationView onClose={closeCPFView} />
               </div>
-            ) : showTaxPlanner ? (
-              /* Tax Planner View - shows header + tax planner */
-              <>
-                {/* Header bar only - no chart */}
-                <div className="shrink-0">
-                  <FinancialWorkspace headerOnly />
-                </div>
-                {/* Tax Planner content */}
-                <div className={`flex flex-1 flex-col overflow-hidden
-min-h-0
-rounded-2xl border border-white/[0.06]
-bg-[#0a0a0a]/80`}>
-                  <TaxPlannerV2View onClose={closeTaxPlanner} />
-                </div>
-              </>
             ) : showInsurancePlanner ? (
               /* Insurance Planner View - shows header + insurance planner */
               <>
@@ -315,10 +356,14 @@ bg-[#0a0a0a]/80`}>
                   <FinancialWorkspace headerOnly />
                 </div>
                 {/* Insurance Planner content */}
-                <div className={`flex flex-1 flex-col overflow-hidden
-min-h-0
-rounded-2xl border border-white/[0.06]
-bg-[#0a0a0a]/80`}>
+                <div
+                  className={clsx(
+                    'flex flex-1 flex-col overflow-hidden min-h-0 rounded-2xl border transition-colors duration-300',
+                    isMonet
+                      ? 'border-[var(--monet-lavender)]/20 bg-white/60 backdrop-blur-xl'
+                      : 'border-white/[0.06] bg-[#0a0a0a]/80'
+                  )}
+                >
                   <InsurancePlannerView onClose={closeInsurancePlanner} />
                 </div>
               </>
@@ -333,7 +378,7 @@ bg-[#0a0a0a]/80`}>
                 {/* Side-by-side content area */}
                 <div
                   className={clsx(
-                    'flex flex-1 gap-4 overflow-hidden -mt-2',
+                    'flex gap-4 -mt-2 h-[70vh]',
                     effectiveLayout === 'chart-right' && 'flex-row-reverse'
                   )}
                 >
@@ -349,7 +394,7 @@ bg-[#0a0a0a]/80`}>
                   </div>
 
                   {/* Cards section - compact mode */}
-                  <div className="w-[35%] overflow-y-auto">
+                  <div className="w-[35%] overflow-y-auto h-full">
                     <FinancialDataSection compact />
                   </div>
                 </div>
@@ -378,7 +423,7 @@ bg-[#0a0a0a]/80`}>
       </div>
 
       {/* Picture-in-Picture mini chart - disabled in side-by-side layouts */}
-      {showPiP && !showCPFView && !showTaxPlanner && !showInsurancePlanner && !isSideBySide && (
+      {showPiP && !showCPFView && !showInsurancePlanner && !isSideBySide && (
         <MiniChart
           timelineYears={timeline.chartYears}
           timelineMonths={timeline.chartMonths}
@@ -407,6 +452,31 @@ bg-[#0a0a0a]/80`}>
         currentLayout={dashboardLayout}
         onLayoutChange={handleLayoutChange}
       />
+
+      {/* Post-reset choice: Dashboard vs Wizard */}
+      <PostResetChoiceModal
+        isOpen={showPostResetChoice}
+        onDashboard={() => {
+          closePostResetChoice()
+          // Mark onboarding completed so the auto-trigger doesn't reopen the wizard
+          onboardingTriggeredRef.current = true
+          if (userSettings) {
+            const updated = { ...userSettings, onboardingCompleted: true }
+            queryClient.setQueryData(QUERY_KEYS.settings.user, updated)
+            settingsApi.updateUserSettings(updated)
+          }
+        }}
+        onWizard={() => {
+          closePostResetChoice()
+          openOnboardingWizard()
+        }}
+      />
+
+      {/* Onboarding Wizard Modal */}
+      <OnboardingWizardModal
+        isOpen={showOnboardingWizard}
+        onClose={closeOnboardingWizard}
+      />
     </>
   )
 }
diff --git a/frontend/src/components/dashboard/FinancialDataManagement/components/CategoryCard.tsx b/frontend/src/components/dashboard/FinancialDataManagement/components/CategoryCard.tsx
index 5b8cf0071..a6f6791a9 100644
--- a/frontend/src/components/dashboard/FinancialDataManagement/components/CategoryCard.tsx
+++ b/frontend/src/components/dashboard/FinancialDataManagement/components/CategoryCard.tsx
@@ -5,6 +5,7 @@ import type { ScenarioEvent } from '@/types/scenario'
 import type { CashAccount } from '@/types/financial'
 import type { PropertyLinkRecord } from '@/types/property'
 import type { IncomeAllocation } from '@/api/financial/incomes'
+import { useColorScheme } from '@/stores'
 import { categoryConfig } from '../config'
 import { getItemId, sortItems } from '../utils'
 import { parseDecimal } from '../converters'
@@ -140,6 +141,10 @@ export function CategoryCard({
   compact = false,
   onCollapseChange,
 }: CategoryCardProps) {
+  // Theme
+  const colorScheme = useColorScheme()
+  const isMonet = colorScheme === 'monet'
+
   // Start collapsed in compact mode (side-by-side layout)
   const [isCollapsed, setIsCollapsed] = useState(compact)
 
@@ -232,8 +237,12 @@ export function CategoryCard({
 
   return (
     <div className={clsx(
-      'flex flex-col overflow-hidden w-full min-w-0 rounded-2xl border border-white/[0.1] hover:border-white/[0.15] bg-[#0a0a0a]/60 transition-all',
-      !isCollapsed ? 'h-full' : ''
+      'flex flex-col overflow-hidden w-full min-w-0 rounded-2xl border transition-all',
+      isMonet
+        ? 'border-slate-200 bg-white shadow-sm hover:shadow-md'
+        : 'border-white/[0.08] hover:border-white/[0.12] bg-[#0a0a0a]/60',
+      // Only use h-full in non-compact mode when expanded (for 2-col grid alignment)
+      !isCollapsed && !compact ? 'h-full' : ''
     )}>
       <CategoryCardHeader
         category={category}
@@ -245,18 +254,22 @@ export function CategoryCard({
         onAddCpf={onAddCpf}
         isCollapsed={isCollapsed}
         onToggleCollapse={handleToggleCollapse}
+        total={categoryTotal}
       />
 
-      {/* Collapsible content */}
+      {/* Collapsible content - Stitch style: no separate total section, items directly */}
       <div className={clsx(
         'flex flex-col transition-all duration-200 overflow-hidden',
         isCollapsed ? 'h-0' : 'flex-1'
       )}>
-        <CategoryCardTotal
-          category={category}
-          total={categoryTotal}
-          showMonthlyData={showMonthlyData}
-        />
+        {/* Hide the large total section - Stitch shows total in header subtitle */}
+        {false && (
+          <CategoryCardTotal
+            category={category}
+            total={categoryTotal}
+            showMonthlyData={showMonthlyData}
+          />
+        )}
 
         {/* List Items */}
         <div className="scrollbar-hide flex-1 overflow-y-auto px-3 py-2">
diff --git a/frontend/src/components/dashboard/FinancialDataManagement/components/CategoryCard/CPFContributionsSection.tsx b/frontend/src/components/dashboard/FinancialDataManagement/components/CategoryCard/CPFContributionsSection.tsx
index 74d390f81..7abc0f15d 100644
--- a/frontend/src/components/dashboard/FinancialDataManagement/components/CategoryCard/CPFContributionsSection.tsx
+++ b/frontend/src/components/dashboard/FinancialDataManagement/components/CategoryCard/CPFContributionsSection.tsx
@@ -17,14 +17,14 @@ export function CPFContributionsSection({
   const renderContributions = () => cpfContributionsRaw.map((item, index) => (
     <div key={item.id || `cpf-contrib-${index}`}>
       <div className="flex items-center justify-between px-2 py-1.5 rounded-lg hover:bg-white/[0.04] transition-colors">
-        <span className="truncate text-sm text-slate-300">Employee - {item.name.replace('CPF Contribution - ', '')}</span>
+        <span className="text-sm text-slate-300">Employee - {item.name.replace('CPF Contribution - ', '')}</span>
         <span className={numericStyles.base}>
           ({formatCurrency(parseDecimal(item.employeeContribution))})
           <span className="ml-1 text-xs text-slate-400">/mo</span>
         </span>
       </div>
       <div className="flex items-center justify-between px-2 py-1.5 rounded-lg hover:bg-white/[0.04] transition-colors">
-        <span className="truncate text-sm text-slate-300">Employer - {item.name.replace('CPF Contribution - ', '')}</span>
+        <span className="text-sm text-slate-300">Employer - {item.name.replace('CPF Contribution - ', '')}</span>
         <span className={numericStyles.base}>
           {formatCurrency(parseDecimal(item.employerContribution))}
           <span className="ml-1 text-xs text-slate-400">/mo</span>
@@ -40,7 +40,7 @@ export function CPFContributionsSection({
     >
       <div className="flex items-center gap-2 min-w-0">
         <ArrowUpRight className="h-4 w-4 text-emerald-400 shrink-0" />
-        <span className="truncate text-sm text-emerald-300">
+        <span className="text-sm text-emerald-300">
           CPF Refund - {refund.propertyName}
         </span>
       </div>
diff --git a/frontend/src/components/dashboard/FinancialDataManagement/components/CategoryCard/CategoryCardHeader.tsx b/frontend/src/components/dashboard/FinancialDataManagement/components/CategoryCard/CategoryCardHeader.tsx
index 8e9cbf803..de0f47d49 100644
--- a/frontend/src/components/dashboard/FinancialDataManagement/components/CategoryCard/CategoryCardHeader.tsx
+++ b/frontend/src/components/dashboard/FinancialDataManagement/components/CategoryCard/CategoryCardHeader.tsx
@@ -1,5 +1,8 @@
 import { useState, useRef, useEffect } from 'react'
-import { Plus, ArrowDownWideNarrow, Wallet, BarChart3, Shield, ChevronDown } from 'lucide-react'
+import { Plus, Wallet, BarChart3, Shield, ChevronRight } from 'lucide-react'
+import clsx from 'clsx'
+import { useColorScheme } from '@/stores'
+import { formatCurrency } from '@/lib/format'
 import { categoryConfig } from '../../config'
 import type { FinancialCategory } from '../../types'
 
@@ -13,19 +16,24 @@ interface CategoryCardHeaderProps {
   onAddCpf?: () => void
   isCollapsed?: boolean
   onToggleCollapse?: () => void
+  /** Total amount to display as subtitle like Stitch */
+  total?: number
 }
 
 export function CategoryCardHeader({
   category,
   showMonthlyData,
-  sortDirection,
-  onToggleSortDirection,
+  sortDirection: _sortDirection,
+  onToggleSortDirection: _onToggleSortDirection,
   onAddItem,
   onAddInvestment,
   onAddCpf,
   isCollapsed = false,
   onToggleCollapse,
+  total,
 }: CategoryCardHeaderProps) {
+  const colorScheme = useColorScheme()
+  const isMonet = colorScheme === 'monet'
   const config = categoryConfig[category]
   const [showAssetMenu, setShowAssetMenu] = useState(false)
   const menuRef = useRef<HTMLDivElement>(null)
@@ -57,39 +65,57 @@ export function CategoryCardHeader({
   const showAssetDropdown = category === 'asset' && (onAddInvestment || onAddCpf)
 
   return (
-    <div className="flex items-center justify-between px-4 py-2.5 border-b border-white/[0.04]">
+    <div className={clsx(
+      "flex items-center justify-between px-4 py-3",
+      // No border - Stitch style uses clean cards without internal borders
+    )}>
+      {/* Left side: Icon + Title/Total - clickable to expand */}
       <button
         type="button"
         onClick={onToggleCollapse}
-        className="flex items-center gap-2.5 hover:opacity-80 transition-opacity"
+        className="flex flex-1 items-center gap-3 hover:opacity-80 transition-opacity"
       >
-        <div className={`rounded-lg border p-1.5 ${config.gradientBg}`}>
-          <IconComponent className={`h-4 w-4 ${config.textColor}`} />
+        {/* Icon container - solid colored background with white icon like Stitch */}
+        <div className={clsx(
+          "rounded-xl p-2.5 shadow-sm shrink-0",
+          isMonet ? config.iconBgLight : config.iconBg
+        )}>
+          <IconComponent className={clsx(
+            "h-5 w-5",
+            isMonet ? config.iconColorLight : config.iconColor
+          )} />
+        </div>
+        <div className="flex flex-col items-start min-w-0">
+          <h4 className={clsx(
+            "text-sm font-semibold",
+            isMonet ? "text-slate-800" : "text-slate-100"
+          )}>{getTitle()}</h4>
+          {total !== undefined && (
+            <span className={clsx(
+              "text-xs tabular-nums",
+              isMonet ? "text-slate-500" : "text-slate-400"
+            )}>
+              {formatCurrency(total)}
+            </span>
+          )}
         </div>
-        <h4 className="text-sm font-medium text-slate-200">{getTitle()}</h4>
-        {onToggleCollapse && (
-          <ChevronDown
-            className={`h-3.5 w-3.5 text-slate-500 transition-transform duration-200 ${isCollapsed ? '-rotate-90' : ''}`}
-          />
-        )}
       </button>
-      <div className="flex items-center gap-0.5">
-        <button
-          type="button"
-          className="p-1.5 rounded-md hover:bg-white/5 text-slate-500 hover:text-slate-300 transition-colors"
-          aria-label={`Sort ${sortDirection === 'desc' ? 'high to low' : 'low to high'}`}
-          onClick={onToggleSortDirection}
-        >
-          <ArrowDownWideNarrow
-            className={`h-4 w-4 ${sortDirection === 'desc' ? '' : 'rotate-180'}`}
-          />
-        </button>
 
-        {showAssetDropdown ? (
+      {/* Right side: Add button + Chevron */}
+      <div className="flex items-center gap-2 shrink-0">
+        {!isCollapsed && (showAssetDropdown ? (
           <div className="relative" ref={menuRef}>
             <button
-              onClick={() => setShowAssetMenu(!showAssetMenu)}
-              className="p-1.5 rounded-md hover:bg-white/5 text-slate-500 hover:text-slate-300 transition-colors"
+              onClick={(e) => {
+                e.stopPropagation()
+                setShowAssetMenu(!showAssetMenu)
+              }}
+              className={clsx(
+                "h-8 w-8 rounded-full flex items-center justify-center transition-all",
+                isMonet
+                  ? "bg-slate-100 text-slate-500 hover:bg-slate-200 hover:text-slate-700"
+                  : "bg-white/[0.06] text-slate-400 hover:bg-white/[0.1] hover:text-slate-200"
+              )}
               type="button"
               title="Add Item"
             >
@@ -114,13 +140,42 @@ export function CategoryCardHeader({
           </div>
         ) : (
           <button
-            onClick={onAddItem}
-            className="p-1.5 rounded-md hover:bg-white/5 text-slate-500 hover:text-slate-300 transition-colors"
+            onClick={(e) => {
+              e.stopPropagation()
+              onAddItem()
+            }}
+            className={clsx(
+              "h-8 w-8 rounded-full flex items-center justify-center transition-all",
+              isMonet
+                ? "bg-slate-100 text-slate-500 hover:bg-slate-200 hover:text-slate-700"
+                : "bg-white/[0.06] text-slate-400 hover:bg-white/[0.1] hover:text-slate-200"
+            )}
             type="button"
             title="Add Item"
           >
             <Plus className="h-4 w-4" />
           </button>
+        ))}
+
+        {/* Chevron at far right - Stitch style */}
+        {onToggleCollapse && (
+          <button
+            type="button"
+            onClick={onToggleCollapse}
+            className={clsx(
+              "p-1 rounded-md transition-colors",
+              isMonet
+                ? "hover:bg-slate-100 text-slate-400"
+                : "hover:bg-white/5 text-slate-500"
+            )}
+          >
+            <ChevronRight
+              className={clsx(
+                "h-5 w-5 transition-transform duration-200",
+                !isCollapsed ? 'rotate-90' : ''
+              )}
+            />
+          </button>
         )}
       </div>
     </div>
diff --git a/frontend/src/components/dashboard/FinancialDataManagement/components/CategoryCard/CategoryCardTotal.tsx b/frontend/src/components/dashboard/FinancialDataManagement/components/CategoryCard/CategoryCardTotal.tsx
index 0847c1567..4ed5ee887 100644
--- a/frontend/src/components/dashboard/FinancialDataManagement/components/CategoryCard/CategoryCardTotal.tsx
+++ b/frontend/src/components/dashboard/FinancialDataManagement/components/CategoryCard/CategoryCardTotal.tsx
@@ -1,5 +1,7 @@
 import { ArrowUpRight, ArrowDownRight } from 'lucide-react'
+import clsx from 'clsx'
 import { formatCurrency } from '@/lib/format'
+import { useColorScheme } from '@/stores'
 import type { FinancialCategory } from '../../types'
 
 interface CategoryCardTotalProps {
@@ -13,27 +15,41 @@ export function CategoryCardTotal({
   total,
   showMonthlyData,
 }: CategoryCardTotalProps) {
+  const colorScheme = useColorScheme()
+  const isMonet = colorScheme === 'monet'
+
   // Mock trend (you may want to calculate real trends)
   const mockTrend = category === 'asset' ? 12.5 : category === 'income' ? 5.2 : category === 'liability' ? -2.1 : 1.2
   const isPositiveTrend = mockTrend >= 0
   const showMonthSuffix = showMonthlyData && (category === 'income' || category === 'expense')
 
   return (
-    <div className="border-b border-white/[0.04] px-4 py-2.5">
+    <div className={clsx(
+      "border-b px-4 py-2.5",
+      isMonet ? "border-slate-200/60" : "border-white/[0.04]"
+    )}>
       <div className="flex items-baseline gap-1.5">
-        <div className="text-2xl font-light tracking-tight text-slate-100">
+        <div className={clsx(
+          "text-2xl font-light tracking-tight",
+          isMonet ? "text-slate-700" : "text-slate-100"
+        )}>
           {formatCurrency(total)}
         </div>
         {showMonthSuffix && (
-          <span className="text-xs text-slate-400">/mo</span>
+          <span className={clsx("text-xs", isMonet ? "text-slate-500" : "text-slate-400")}>/mo</span>
         )}
       </div>
       <div className="mt-1 flex items-center gap-2">
-        <div className={`flex items-center gap-0.5 rounded-full px-1.5 py-0.5 text-[10px] font-semibold uppercase tracking-wider ${isPositiveTrend ? 'bg-emerald-500/15 text-emerald-400' : 'bg-rose-500/15 text-rose-400'}`}>
+        <div className={clsx(
+          "flex items-center gap-0.5 rounded-full px-1.5 py-0.5 text-[10px] font-semibold uppercase tracking-wider",
+          isPositiveTrend
+            ? (isMonet ? "bg-emerald-100 text-emerald-700" : "bg-emerald-500/15 text-emerald-400")
+            : (isMonet ? "bg-rose-100 text-rose-700" : "bg-rose-500/15 text-rose-400")
+        )}>
           {isPositiveTrend ? <ArrowUpRight className="h-2.5 w-2.5" /> : <ArrowDownRight className="h-2.5 w-2.5" />}
           {Math.abs(mockTrend)}%
         </div>
-        <span className="text-sm text-slate-500">vs last month</span>
+        <span className={clsx("text-sm", isMonet ? "text-slate-500" : "text-slate-500")}>vs last month</span>
       </div>
     </div>
   )
diff --git a/frontend/src/components/dashboard/FinancialDataManagement/components/CategoryCard/InvestmentsIncomeSection.tsx b/frontend/src/components/dashboard/FinancialDataManagement/components/CategoryCard/InvestmentsIncomeSection.tsx
index d2174e474..4120e9f00 100644
--- a/frontend/src/components/dashboard/FinancialDataManagement/components/CategoryCard/InvestmentsIncomeSection.tsx
+++ b/frontend/src/components/dashboard/FinancialDataManagement/components/CategoryCard/InvestmentsIncomeSection.tsx
@@ -44,7 +44,7 @@ export function InvestmentsIncomeSection({
     ))
   ) : (
     <div className="flex items-center justify-between px-2 py-1.5 rounded-lg hover:bg-white/[0.04] transition-colors">
-      <span className="truncate text-sm text-slate-300">Allocated to investments</span>
+      <span className="text-sm text-slate-300">Allocated to investments</span>
       <span className={numericStyles.base}>
         {formatCurrency(displayAmount)}
         <span className="ml-1 text-xs text-slate-400">{showMonthlyData ? '/mo' : '/yr'}</span>
diff --git a/frontend/src/components/dashboard/FinancialDataManagement/components/CollapsibleSection.tsx b/frontend/src/components/dashboard/FinancialDataManagement/components/CollapsibleSection.tsx
index 201f33eeb..3635ba289 100644
--- a/frontend/src/components/dashboard/FinancialDataManagement/components/CollapsibleSection.tsx
+++ b/frontend/src/components/dashboard/FinancialDataManagement/components/CollapsibleSection.tsx
@@ -191,8 +191,8 @@ export function CollapsibleItem({
           : (isSelected ? "bg-white/[0.06]" : "hover:bg-white/[0.04]")
       )}
     >
-      <div className="flex min-w-0 items-center gap-2">
-        <span className={clsx("truncate text-sm", isMonet ? "text-slate-700" : "text-slate-300")}>{name}</span>
+      <div className="flex min-w-0 flex-1 items-center gap-2">
+        <span className={clsx("text-sm", isMonet ? "text-slate-700" : "text-slate-300")}>{name}</span>
         {icon && (
           <ItemIcon
             icon={icon}
diff --git a/frontend/src/components/dashboard/FinancialDataManagement/components/Header.tsx b/frontend/src/components/dashboard/FinancialDataManagement/components/Header.tsx
index 57e715c05..ca863a81d 100644
--- a/frontend/src/components/dashboard/FinancialDataManagement/components/Header.tsx
+++ b/frontend/src/components/dashboard/FinancialDataManagement/components/Header.tsx
@@ -2,9 +2,10 @@ import { useCallback, useMemo, useState, useRef, useEffect } from 'react'
 import * as Slider from '@radix-ui/react-slider'
 import { useQuery } from '@tanstack/react-query'
 import { Check, ChevronDown, Receipt, Users } from 'lucide-react'
+import clsx from 'clsx'
 
 import type { TimeResolution, TimelineYear, TimelineMonth } from '@/types/timeline'
-import { useTaxModeStore } from '@/stores'
+import { useTaxModeStore, useColorScheme } from '@/stores'
 import { usePersonFilterOptional } from '@/contexts/PersonFilterContext'
 import { settingsApi } from '@/api/financial'
 import { QUERY_KEYS } from '@/lib/queryKeys'
@@ -61,6 +62,8 @@ export function Header({
   onViewModeChange,
   compact = false,
 }: HeaderProps) {
+  const colorScheme = useColorScheme()
+  const isMonet = colorScheme === 'monet'
   const [yearDisplayMode, setYearDisplayMode] = useState<'calendar' | 'relative'>('calendar')
 
   const { data: userSettings } = useQuery({
@@ -186,14 +189,25 @@ export function Header({
       <div className="flex flex-col gap-3">
         {/* Row 1: Title */}
         <div className="flex items-baseline gap-2">
-          <h3 className={compact ? 'text-base font-semibold text-white' : 'text-lg font-semibold text-white'}>Financial Data</h3>
-          <p className={compact ? 'text-xs text-gray-400' : 'text-sm text-gray-400'}>{`${absoluteYear} (Age ${displayAge})`}</p>
+          <h3 className={clsx(
+            compact ? 'text-base font-semibold' : 'text-lg font-semibold',
+            isMonet ? 'text-slate-800' : 'text-white'
+          )}>Financial Data</h3>
+          <p className={clsx(
+            compact ? 'text-xs' : 'text-sm',
+            isMonet ? 'text-slate-500' : 'text-gray-400'
+          )}>{`${absoluteYear} (Age ${displayAge})`}</p>
         </div>
 
         {/* Row 2: Timeline controls on left, Action buttons on right */}
         <div className={compact ? 'flex flex-col gap-3' : 'flex items-center justify-between'}>
           {/* Timeline navigation controls */}
-          <div className="relative z-[50] flex flex-col rounded-xl border border-white/[0.08] bg-white/[0.02] backdrop-blur-sm">
+          <div className={clsx(
+            "relative z-[50] flex flex-col rounded-xl border backdrop-blur-sm",
+            isMonet
+              ? "border-slate-200 bg-white shadow-sm"
+              : "border-white/[0.08] bg-white/[0.02]"
+          )}>
             <div className="flex items-center gap-1 p-1">
               {resolution === 'monthly' && (
                 <>
@@ -207,8 +221,9 @@ export function Header({
                       { value: 'annualized', label: 'Yearly' },
                       { value: 'monthly', label: 'Monthly' },
                     ]}
+                    isMonet={isMonet}
                   />
-                  <div className="w-px h-6 bg-white/[0.08]" />
+                  <div className={clsx("w-px h-6", isMonet ? "bg-slate-200" : "bg-white/[0.08]")} />
                 </>
               )}
 
@@ -227,11 +242,12 @@ export function Header({
                 className="w-16"
                 onLabelClick={() => setYearDisplayMode(m => m === 'calendar' ? 'relative' : 'calendar')}
                 labelTitle="Click to toggle year format"
+                isMonet={isMonet}
               />
 
               {resolution === 'monthly' && (
                 <>
-                  <div className="w-px h-6 bg-white/[0.08]" />
+                  <div className={clsx("w-px h-6", isMonet ? "bg-slate-200" : "bg-white/[0.08]")} />
                   <MonthSelector
                     selectedCalendarMonth={displayCalendarMonth}
                     absoluteYear={absoluteYear}
@@ -239,13 +255,17 @@ export function Header({
                     anchorCalendarMonth={anchorCalendarMonth}
                     onSelectMonth={onSelectMonth}
                     isDisabled={isTimelineLoading || viewMode === 'annualized'}
+                    isMonet={isMonet}
                   />
                 </>
               )}
             </div>
 
             {shouldShowSlider && (
-              <div className="border-t border-white/[0.08] px-3 py-2">
+              <div className={clsx(
+                "border-t px-3 py-2",
+                isMonet ? "border-slate-200/60" : "border-white/[0.08]"
+              )}>
                 <Slider.Root
                   className="relative flex items-center h-5 w-full select-none px-[7px]"
                   min={0}
@@ -256,50 +276,65 @@ export function Header({
                   disabled={isSliderDisabled}
                   aria-label={viewMode === 'annualized' ? 'Timeline year slider' : 'Timeline month slider'}
                 >
-                  <Slider.Track className="relative h-1 w-full rounded-full bg-slate-700/60">
-                    <Slider.Range className="absolute h-full rounded-full bg-gradient-to-r from-blue-500 to-blue-400" />
+                  <Slider.Track className={clsx(
+                    "relative h-1 w-full rounded-full",
+                    isMonet ? "bg-slate-200" : "bg-slate-700/60"
+                  )}>
+                    <Slider.Range className="absolute h-full rounded-full bg-blue-500" />
                   </Slider.Track>
-                  <Slider.Thumb className="block h-3.5 w-3.5 rounded-full bg-white border-2 border-blue-400 shadow-md focus:outline-none focus:ring-2 focus:ring-blue-500/30 hover:scale-110 disabled:opacity-50 transition-transform cursor-grab active:cursor-grabbing" />
+                  <Slider.Thumb className={clsx(
+                    "block h-3.5 w-3.5 rounded-full shadow-md",
+                    "focus:outline-none focus:ring-2 focus:ring-blue-500/30",
+                    "hover:scale-110 disabled:opacity-50 transition-transform cursor-grab active:cursor-grabbing",
+                    isMonet
+                      ? "bg-blue-500 border-2 border-white"
+                      : "bg-white border-2 border-blue-400"
+                  )} />
                 </Slider.Root>
               </div>
             )}
           </div>
 
-          {/* Action buttons */}
-          <div className={`flex items-center justify-center gap-1 rounded-xl border border-white/[0.08] bg-white/[0.02] backdrop-blur-sm px-2 py-1.5 ${compact ? 'w-full' : 'self-center'}`}>
-            {/* Tax Estimate Icon */}
+          {/* Action buttons - Cashflow & Family pills like Stitch */}
+          <div className={clsx(
+            "flex items-center gap-2",
+            compact ? 'w-full justify-center' : 'self-center'
+          )}>
+            {/* Cashflow Button */}
             <button
               type="button"
               onClick={enableTaxMode}
-              title="Tax Estimate"
-              className="
-                flex items-center justify-center
-                p-1.5 rounded-md
-                text-slate-400 hover:text-amber-400 hover:bg-amber-500/10
-                transition-all duration-200
-              "
+              title="Cashflow"
+              className={clsx(
+                "flex items-center gap-2 px-4 py-2 rounded-xl",
+                "text-sm font-medium transition-all duration-200",
+                isMonet
+                  ? "bg-white border border-slate-200 text-slate-600 hover:bg-slate-50 shadow-sm"
+                  : "bg-white/[0.02] border border-white/[0.08] text-slate-400 hover:text-slate-200 hover:bg-white/[0.04]"
+              )}
             >
-              <Receipt className="h-4 w-4" />
+              <Receipt className={clsx("h-4 w-4", isMonet ? "text-blue-500" : "text-blue-400")} />
+              Tax Estimate
             </button>
 
-            {/* Persons Filter Icon */}
+            {/* Family Button */}
             <button
               type="button"
               onClick={() => openPersonsModal?.()}
-              title="Manage Persons"
-              className={`
-                relative flex items-center justify-center
-                p-1.5 rounded-md
-                transition-all duration-200
-                ${hasExcludedPersons
-                  ? 'text-blue-400 hover:text-blue-300 hover:bg-blue-500/10'
-                  : 'text-slate-400 hover:text-slate-300 hover:bg-white/[0.06]'
-                }
-              `}
+              title="Family"
+              className={clsx(
+                "relative flex items-center gap-2 px-4 py-2 rounded-xl",
+                "text-sm font-medium transition-all duration-200",
+                isMonet
+                  ? "bg-white border border-slate-200 text-slate-600 hover:bg-slate-50 shadow-sm"
+                  : "bg-white/[0.02] border border-white/[0.08] text-slate-400 hover:text-slate-200 hover:bg-white/[0.04]",
+                hasExcludedPersons && "ring-2 ring-blue-500/30"
+              )}
             >
-              <Users className="h-4 w-4" />
+              <Users className={clsx("h-4 w-4", isMonet ? "text-blue-500" : "text-blue-400")} />
+              Persons
               {hasExcludedPersons && (
-                <span className="absolute -top-0.5 -right-0.5 h-2 w-2 rounded-full bg-blue-500" />
+                <span className="absolute -top-1 -right-1 h-2.5 w-2.5 rounded-full bg-blue-500" />
               )}
             </button>
           </div>
@@ -319,9 +354,10 @@ interface SelectFieldProps {
   className?: string
   onLabelClick?: () => void
   labelTitle?: string
+  isMonet?: boolean
 }
 
-function SelectField({ label, id, value, disabled, onChange, options, className, onLabelClick, labelTitle }: SelectFieldProps) {
+function SelectField({ label, id, value, disabled, onChange, options, className, onLabelClick, labelTitle, isMonet }: SelectFieldProps) {
   const [isOpen, setIsOpen] = useState(false)
   const containerRef = useRef<HTMLDivElement>(null)
 
@@ -338,9 +374,16 @@ function SelectField({ label, id, value, disabled, onChange, options, className,
   const selectedOption = options.find(opt => opt.value === value)
 
   return (
-    <div className="flex items-center gap-2 px-2 py-1.5 rounded-lg hover:bg-white/[0.04] transition-colors" ref={containerRef}>
+    <div className={clsx(
+      "flex items-center gap-2 px-2 py-1.5 rounded-lg transition-colors",
+      isMonet ? "hover:bg-slate-100" : "hover:bg-white/[0.04]"
+    )} ref={containerRef}>
       <label
-        className={`text-[10px] font-medium uppercase tracking-wider text-slate-500 ${onLabelClick ? 'cursor-pointer hover:text-slate-300 transition-colors' : ''}`}
+        className={clsx(
+          "text-[10px] font-medium uppercase tracking-wider",
+          isMonet ? "text-slate-500" : "text-slate-500",
+          onLabelClick && (isMonet ? "cursor-pointer hover:text-slate-700 transition-colors" : "cursor-pointer hover:text-slate-300 transition-colors")
+        )}
         htmlFor={onLabelClick ? undefined : id}
         onClick={onLabelClick}
         title={labelTitle}
@@ -353,31 +396,33 @@ function SelectField({ label, id, value, disabled, onChange, options, className,
           id={id}
           onClick={() => !disabled && setIsOpen(!isOpen)}
           disabled={disabled}
-          className={`
-            flex items-center justify-between gap-2 w-full
-            appearance-none cursor-pointer
-            bg-transparent
-            text-sm font-medium text-white
-            focus:outline-none
-            disabled:opacity-50 disabled:cursor-not-allowed
-            ${isOpen ? 'text-blue-400' : ''}
-          `}
+          className={clsx(
+            "flex items-center justify-between gap-2 w-full",
+            "appearance-none cursor-pointer bg-transparent",
+            "text-sm font-medium focus:outline-none",
+            "disabled:opacity-50 disabled:cursor-not-allowed",
+            isMonet
+              ? (isOpen ? "text-blue-600" : "text-slate-700")
+              : (isOpen ? "text-blue-400" : "text-white")
+          )}
         >
           <span>{selectedOption?.label ?? ''}</span>
-          <ChevronDown className={`h-3.5 w-3.5 shrink-0 text-slate-400 transition-transform duration-200 ${isOpen ? 'rotate-180' : ''}`} />
+          <ChevronDown className={clsx(
+            "h-3.5 w-3.5 shrink-0 transition-transform duration-200",
+            isMonet ? "text-slate-400" : "text-slate-400",
+            isOpen && "rotate-180"
+          )} />
         </button>
 
         {isOpen && (
-          <div className="
-            absolute left-0 top-full z-[100] mt-1
-            min-w-[100px]
-            rounded-lg
-            border border-white/[0.12]
-            bg-[#0c0c0c]
-            shadow-xl shadow-black/50
-            overflow-hidden
-            animate-in fade-in slide-in-from-top-2 duration-150
-          ">
+          <div className={clsx(
+            "absolute left-0 top-full z-[100] mt-1",
+            "min-w-[100px] rounded-lg border overflow-visible",
+            "shadow-xl animate-in fade-in slide-in-from-top-2 duration-150",
+            isMonet
+              ? "border-slate-200 bg-white shadow-slate-200/50"
+              : "border-white/[0.12] bg-[#0c0c0c] shadow-black/50"
+          )}>
             <div className="max-h-48 overflow-y-auto py-1 custom-scrollbar">
               {options.map((opt) => {
                 const isSelected = opt.value === value
@@ -389,19 +434,15 @@ function SelectField({ label, id, value, disabled, onChange, options, className,
                       onChange(opt.value)
                       setIsOpen(false)
                     }}
-                    className={`
-                      w-full flex items-center gap-2
-                      px-3 py-1.5
-                      text-sm text-left
-                      transition-all duration-150
-                      ${isSelected
-                        ? 'bg-blue-500/15 text-white'
-                        : 'text-slate-300 hover:bg-white/[0.05]'
-                      }
-                    `}
+                    className={clsx(
+                      "w-full flex items-center gap-2 px-3 py-1.5 text-sm text-left transition-all duration-150",
+                      isMonet
+                        ? (isSelected ? "bg-blue-50 text-blue-700" : "text-slate-700 hover:bg-slate-50")
+                        : (isSelected ? "bg-blue-500/15 text-white" : "text-slate-300 hover:bg-white/[0.05]")
+                    )}
                   >
                     <span className="w-3 shrink-0">
-                      {isSelected && <Check className="h-3 w-3 text-blue-400" />}
+                      {isSelected && <Check className={clsx("h-3 w-3", isMonet ? "text-blue-600" : "text-blue-400")} />}
                     </span>
                     <span>{opt.label}</span>
                   </button>
@@ -426,6 +467,7 @@ interface MonthSelectorProps {
   anchorCalendarMonth?: number | null
   onSelectMonth?: (month: number | null) => void
   isDisabled: boolean
+  isMonet?: boolean
 }
 
 function MonthSelector({
@@ -435,6 +477,7 @@ function MonthSelector({
   anchorCalendarMonth,
   onSelectMonth,
   isDisabled,
+  isMonet,
 }: MonthSelectorProps) {
   const [isOpen, setIsOpen] = useState(false)
   const containerRef = useRef<HTMLDivElement>(null)
@@ -459,41 +502,49 @@ function MonthSelector({
     : [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]
 
   return (
-    <div className="flex items-center gap-2 px-2 py-1.5 rounded-lg hover:bg-white/[0.04] transition-colors" ref={containerRef}>
-      <label className="text-[10px] font-medium uppercase tracking-wider text-slate-500" htmlFor="month-selector">
+    <div className={clsx(
+      "flex items-center gap-2 px-2 py-1.5 rounded-lg transition-colors",
+      isMonet ? "hover:bg-slate-100" : "hover:bg-white/[0.04]"
+    )} ref={containerRef}>
+      <label className={clsx(
+        "text-[10px] font-medium uppercase tracking-wider",
+        isMonet ? "text-slate-500" : "text-slate-500"
+      )} htmlFor="month-selector">
         Month
       </label>
-      <div className="relative w-[100px]">
+      <div className="relative">
         <button
           type="button"
           id="month-selector"
           onClick={() => !isDisabled && setIsOpen(!isOpen)}
           disabled={isDisabled}
-          className={`
-            flex items-center justify-between gap-1 w-full
-            appearance-none cursor-pointer
-            bg-transparent
-            text-sm font-medium text-white
-            focus:outline-none
-            disabled:opacity-50 disabled:cursor-not-allowed
-            ${isOpen ? 'text-blue-400' : ''}
-          `}
+          className={clsx(
+            "flex items-center gap-1",
+            "appearance-none cursor-pointer bg-transparent",
+            "text-sm font-medium focus:outline-none",
+            "disabled:opacity-50 disabled:cursor-not-allowed",
+            isMonet
+              ? (isOpen ? "text-blue-600" : "text-slate-700")
+              : (isOpen ? "text-blue-400" : "text-white")
+          )}
         >
-          <span>{MONTH_NAMES[safeCalendarMonth - 1]}</span>
-          <ChevronDown className={`h-3.5 w-3.5 text-slate-400 transition-transform duration-200 ${isOpen ? 'rotate-180' : ''}`} />
+          <span className="whitespace-nowrap">{MONTH_NAMES[safeCalendarMonth - 1]}</span>
+          <ChevronDown className={clsx(
+            "h-3.5 w-3.5 shrink-0 transition-transform duration-200",
+            isMonet ? "text-slate-400" : "text-slate-400",
+            isOpen && "rotate-180"
+          )} />
         </button>
 
         {isOpen && (
-          <div className="
-            absolute left-0 top-full z-[100] mt-1
-            min-w-[120px]
-            rounded-lg
-            border border-white/[0.12]
-            bg-[#0c0c0c]
-            shadow-xl shadow-black/50
-            overflow-hidden
-            animate-in fade-in slide-in-from-top-2 duration-150
-          ">
+          <div className={clsx(
+            "absolute left-0 top-full z-[100] mt-1",
+            "min-w-[120px] rounded-lg border overflow-visible",
+            "shadow-xl animate-in fade-in slide-in-from-top-2 duration-150",
+            isMonet
+              ? "border-slate-200 bg-white shadow-slate-200/50"
+              : "border-white/[0.12] bg-[#0c0c0c] shadow-black/50"
+          )}>
             <div className="max-h-48 overflow-y-auto py-1 custom-scrollbar">
               {monthOptions.map((calendarMonth) => {
                 const isSelected = calendarMonth === safeCalendarMonth
@@ -508,21 +559,17 @@ function MonthSelector({
                       onSelectMonth?.(clampedCalendarMonth)
                       setIsOpen(false)
                     }}
-                    className={`
-                      w-full flex items-center gap-2
-                      px-3 py-1.5
-                      text-sm text-left
-                      transition-all duration-150
-                      ${isMonthDisabled
-                        ? 'opacity-50 cursor-not-allowed text-slate-500'
-                        : isSelected
-                          ? 'bg-blue-500/15 text-white'
-                          : 'text-slate-300 hover:bg-white/[0.05]'
-                      }
-                    `}
+                    className={clsx(
+                      "w-full flex items-center gap-2 px-3 py-1.5 text-sm text-left transition-all duration-150",
+                      isMonthDisabled
+                        ? "opacity-50 cursor-not-allowed text-slate-500"
+                        : isMonet
+                          ? (isSelected ? "bg-blue-50 text-blue-700" : "text-slate-700 hover:bg-slate-50")
+                          : (isSelected ? "bg-blue-500/15 text-white" : "text-slate-300 hover:bg-white/[0.05]")
+                    )}
                   >
                     <span className="w-3 shrink-0">
-                      {isSelected && <Check className="h-3 w-3 text-blue-400" />}
+                      {isSelected && <Check className={clsx("h-3 w-3", isMonet ? "text-blue-600" : "text-blue-400")} />}
                     </span>
                     <span>{MONTH_NAMES[calendarMonth - 1]}</span>
                   </button>
diff --git a/frontend/src/components/dashboard/FinancialDataManagement/components/LineItem.tsx b/frontend/src/components/dashboard/FinancialDataManagement/components/LineItem.tsx
index 5b7451041..10aa546c3 100644
--- a/frontend/src/components/dashboard/FinancialDataManagement/components/LineItem.tsx
+++ b/frontend/src/components/dashboard/FinancialDataManagement/components/LineItem.tsx
@@ -140,10 +140,10 @@ export const LineItem = memo(function LineItem({
         )}
       >
         {/* Left side: name and person name */}
-        <div className="flex min-w-0 items-center gap-2">
+        <div className="flex min-w-0 flex-1 items-center gap-2">
           <div className="flex min-w-0 flex-col">
             <span className={clsx(
-              "truncate text-sm transition-colors",
+              "text-sm transition-colors",
               isMonet
                 ? (isSelected ? "text-slate-800" : "text-slate-700")
                 : (isSelected ? "text-slate-100" : "text-slate-300")
@@ -151,7 +151,7 @@ export const LineItem = memo(function LineItem({
               {item.name ?? 'Entry'}
             </span>
             {item.personName && (
-              <span className={clsx("truncate text-[10px]", isMonet ? "text-slate-500" : "text-slate-500")}>{item.personName}</span>
+              <span className={clsx("text-[10px]", isMonet ? "text-slate-500" : "text-slate-500")}>{item.personName}</span>
             )}
           </div>
           {/* Accumulator star */}
diff --git a/frontend/src/components/dashboard/FinancialDataManagement/components/SummaryCards.tsx b/frontend/src/components/dashboard/FinancialDataManagement/components/SummaryCards.tsx
index dee131161..4ecae309e 100644
--- a/frontend/src/components/dashboard/FinancialDataManagement/components/SummaryCards.tsx
+++ b/frontend/src/components/dashboard/FinancialDataManagement/components/SummaryCards.tsx
@@ -1,4 +1,6 @@
+import clsx from 'clsx'
 import { formatCurrency } from '@/lib/format'
+import { useColorScheme } from '@/stores'
 import type { MonthDetailResponseV2 } from '@/types/timeline'
 import { parseDecimal } from '../converters'
 
@@ -15,13 +17,17 @@ export function SummaryCards({
   hasV2Data,
   timelineMonthV2,
 }: SummaryCardsProps) {
+  const colorScheme = useColorScheme()
+  const isMonet = colorScheme === 'monet'
+
   return (
     <div className="grid grid-cols-2 gap-3">
-      <NetWorthCard netWorth={netWorth} />
+      <NetWorthCard netWorth={netWorth} isMonet={isMonet} />
       <SavingsCard
         annualSavings={annualSavings}
         hasV2Data={hasV2Data}
         timelineMonthV2={timelineMonthV2}
+        isMonet={isMonet}
       />
     </div>
   )
@@ -29,16 +35,28 @@ export function SummaryCards({
 
 interface NetWorthCardProps {
   netWorth: number
+  isMonet: boolean
 }
 
-function NetWorthCard({ netWorth }: NetWorthCardProps) {
+function NetWorthCard({ netWorth, isMonet }: NetWorthCardProps) {
   return (
-    <div className="rounded-xl border border-white/[0.08] hover:border-white/[0.12] bg-[#0a0a0a]/40 transition-all px-3 py-2.5">
+    <div className={clsx(
+      "rounded-xl border transition-all px-3 py-2.5",
+      isMonet
+        ? "border-slate-200 bg-white shadow-sm hover:shadow-md"
+        : "border-white/[0.08] hover:border-white/[0.12] bg-[#0a0a0a]/40"
+    )}>
       <div className="flex items-center gap-2">
-        <div className="h-1.5 w-1.5 rounded-full bg-blue-400 shrink-0" />
-        <span className="text-xs font-medium text-slate-400">Net Worth</span>
+        <div className="h-2 w-2 rounded-full shrink-0 bg-blue-500" />
+        <span className={clsx(
+          "text-[10px] font-medium uppercase tracking-wider",
+          isMonet ? "text-slate-500" : "text-slate-400"
+        )}>Net Worth</span>
       </div>
-      <p className="mt-1 text-lg font-light tracking-tight text-slate-100">
+      <p className={clsx(
+        "mt-1 text-xl font-semibold tracking-tight",
+        isMonet ? "text-slate-800" : "text-slate-100"
+      )}>
         {formatCurrency(netWorth)}
       </p>
     </div>
@@ -49,20 +67,32 @@ interface SavingsCardProps {
   annualSavings: number
   hasV2Data: boolean
   timelineMonthV2?: MonthDetailResponseV2
+  isMonet: boolean
 }
 
-function SavingsCard({ annualSavings, hasV2Data, timelineMonthV2 }: SavingsCardProps) {
+function SavingsCard({ annualSavings, hasV2Data, timelineMonthV2, isMonet }: SavingsCardProps) {
   const displaySavings = hasV2Data && timelineMonthV2
     ? parseDecimal(timelineMonthV2.netSavings)
     : annualSavings
 
   return (
-    <div className="rounded-xl border border-white/[0.08] hover:border-white/[0.12] bg-[#0a0a0a]/40 transition-all px-3 py-2.5">
+    <div className={clsx(
+      "rounded-xl border transition-all px-3 py-2.5",
+      isMonet
+        ? "border-slate-200 bg-white shadow-sm hover:shadow-md"
+        : "border-white/[0.08] hover:border-white/[0.12] bg-[#0a0a0a]/40"
+    )}>
       <div className="flex items-center gap-2">
-        <div className="h-1.5 w-1.5 rounded-full bg-emerald-400 shrink-0" />
-        <span className="text-xs font-medium text-slate-400">Savings</span>
+        <div className="h-2 w-2 rounded-full shrink-0 bg-emerald-500" />
+        <span className={clsx(
+          "text-[10px] font-medium uppercase tracking-wider",
+          isMonet ? "text-slate-500" : "text-slate-400"
+        )}>Savings</span>
       </div>
-      <p className="mt-1 text-lg font-light tracking-tight text-slate-100">
+      <p className={clsx(
+        "mt-1 text-xl font-semibold tracking-tight",
+        isMonet ? "text-slate-800" : "text-slate-100"
+      )}>
         {formatCurrency(displaySavings)}
       </p>
     </div>
diff --git a/frontend/src/components/dashboard/FinancialDataManagement/config.ts b/frontend/src/components/dashboard/FinancialDataManagement/config.ts
index 2ab114dce..a69654905 100644
--- a/frontend/src/components/dashboard/FinancialDataManagement/config.ts
+++ b/frontend/src/components/dashboard/FinancialDataManagement/config.ts
@@ -1,4 +1,4 @@
-import { Wallet, TrendingUp, CreditCard, Activity, BarChart3 } from 'lucide-react'
+import { Wallet, TrendingUp, CreditCard, Receipt, BarChart3 } from 'lucide-react'
 import type { FinancialCategory, CategoryConfig } from './types'
 
 export const categoryConfig: Record<FinancialCategory, CategoryConfig> = {
@@ -7,8 +7,14 @@ export const categoryConfig: Record<FinancialCategory, CategoryConfig> = {
     emptyDescription: 'No assets added yet',
     icon: Wallet,
     accent: 'bg-emerald-500',
+    // Icon container styles - solid background with subtle shadow
+    iconBg: 'bg-emerald-500',
+    iconBgLight: 'bg-emerald-100',
+    iconColor: 'text-white',
+    iconColorLight: 'text-emerald-600',
     gradientBg: 'bg-gradient-to-br from-emerald-500/20 to-emerald-500/5 border-emerald-500/20',
     textColor: 'text-emerald-400',
+    textColorLight: 'text-emerald-600',
     progressColor: 'bg-emerald-500',
     singular: 'asset',
     plural: 'assets',
@@ -18,8 +24,13 @@ export const categoryConfig: Record<FinancialCategory, CategoryConfig> = {
     emptyDescription: 'No income added yet',
     icon: TrendingUp,
     accent: 'bg-blue-500',
+    iconBg: 'bg-blue-500',
+    iconBgLight: 'bg-blue-100',
+    iconColor: 'text-white',
+    iconColorLight: 'text-blue-600',
     gradientBg: 'bg-gradient-to-br from-blue-500/20 to-blue-500/5 border-blue-500/20',
     textColor: 'text-blue-400',
+    textColorLight: 'text-blue-600',
     progressColor: 'bg-blue-500',
     singular: 'income',
     plural: 'income',
@@ -29,8 +40,13 @@ export const categoryConfig: Record<FinancialCategory, CategoryConfig> = {
     emptyDescription: 'No liabilities added yet',
     icon: CreditCard,
     accent: 'bg-rose-500',
+    iconBg: 'bg-rose-500',
+    iconBgLight: 'bg-rose-100',
+    iconColor: 'text-white',
+    iconColorLight: 'text-rose-600',
     gradientBg: 'bg-gradient-to-br from-rose-500/20 to-rose-500/5 border-rose-500/20',
     textColor: 'text-rose-400',
+    textColorLight: 'text-rose-600',
     progressColor: 'bg-rose-500',
     singular: 'liability',
     plural: 'liabilities',
@@ -38,10 +54,15 @@ export const categoryConfig: Record<FinancialCategory, CategoryConfig> = {
   expense: {
     title: 'Annual Expenses',
     emptyDescription: 'No expenses added yet',
-    icon: Activity,
+    icon: Receipt,
     accent: 'bg-amber-500',
+    iconBg: 'bg-amber-500',
+    iconBgLight: 'bg-amber-100',
+    iconColor: 'text-white',
+    iconColorLight: 'text-amber-600',
     gradientBg: 'bg-gradient-to-br from-amber-500/20 to-amber-500/5 border-amber-500/20',
     textColor: 'text-amber-400',
+    textColorLight: 'text-amber-600',
     progressColor: 'bg-amber-500',
     singular: 'expense',
     plural: 'expenses',
@@ -51,8 +72,13 @@ export const categoryConfig: Record<FinancialCategory, CategoryConfig> = {
     emptyDescription: 'No investments added yet',
     icon: BarChart3,
     accent: 'bg-purple-500',
+    iconBg: 'bg-purple-500',
+    iconBgLight: 'bg-purple-100',
+    iconColor: 'text-white',
+    iconColorLight: 'text-purple-600',
     gradientBg: 'bg-gradient-to-br from-purple-500/20 to-purple-500/5 border-purple-500/20',
     textColor: 'text-purple-400',
+    textColorLight: 'text-purple-600',
     progressColor: 'bg-purple-500',
     singular: 'investment',
     plural: 'investments',
diff --git a/frontend/src/components/dashboard/FinancialDataManagement/index.tsx b/frontend/src/components/dashboard/FinancialDataManagement/index.tsx
index 52803e085..09daa9ce3 100644
--- a/frontend/src/components/dashboard/FinancialDataManagement/index.tsx
+++ b/frontend/src/components/dashboard/FinancialDataManagement/index.tsx
@@ -6,7 +6,7 @@ import clsx from 'clsx'
 import { useFinancialData } from '@/hooks/useFinancialData'
 import { usePersonFilter } from '@/contexts/PersonFilterContext'
 import { useScenarioEvents } from '@/hooks/useScenarioEvents'
-import { useTimelineStore, useTaxModeStore } from '@/stores'
+import { useTimelineStore, useTaxModeStore, useColorScheme } from '@/stores'
 import {
   useCashAccountsQuery,
   useCreateCashAccountMutation,
@@ -79,6 +79,10 @@ export function FinancialDataManagement({
   showTaxMode: _showTaxMode = false,
   compact = false,
 }: FinancialDataManagementProps) {
+  // Theme
+  const colorScheme = useColorScheme()
+  const isMonet = colorScheme === 'monet'
+
   // Get timeline selection state from Zustand store
   const selectedYear = useTimelineStore((s) => s.selectedYear) ?? 0
   const selectedMonth = useTimelineStore((s) => s.selectedMonth) ?? undefined
@@ -893,35 +897,41 @@ export function FinancialDataManagement({
     <>
       <div
         id="financial-data-section"
-        className="flex flex-col bg-transparent text-white h-full"
+        className={clsx('flex flex-col bg-transparent', isMonet ? 'text-slate-800' : 'text-white', compact ? 'pt-6' : 'p-6')}
         onClick={(e) => {
           if (selectedItemId && (e.target as HTMLElement).closest('[data-line-item]') === null) {
             setSelectedItemId(null)
           }
         }}
       >
-        <Header
-          selectedYear={selectedYear}
-          onSelectYear={setSelectedYear}
-          selectedCalendarMonth={selectedMonth}
-          onSelectMonth={setSelectedMonth}
-          anchorAbsoluteYear={anchorYear}
-          anchorCalendarMonth={anchorMonth}
-          resolution={resolution}
-          timelineYears={timelineYears}
-          timelineMonths={timelineMonths}
-          isTimelineLoading={isTimelineLoading}
-          viewMode={viewMode}
-          onViewModeChange={setViewMode}
-          compact={compact}
-        />
-
-        {/* Cashflow cards - always visible */}
+        {/* Main container - Stitch style */}
         <div className={clsx(
-          'flex-1 overflow-auto',
-          compact ? 'px-4 py-4' : 'px-6 py-6'
+          "rounded-2xl border overflow-hidden",
+          isMonet
+            ? "border-slate-200 bg-white shadow-sm"
+            : "border-white/[0.08] bg-[#0a0a0a]/60"
         )}>
-            <div className={clsx('flex h-full flex-col', compact ? 'gap-4' : 'gap-6')}>
+          <Header
+            selectedYear={selectedYear}
+            onSelectYear={setSelectedYear}
+            selectedCalendarMonth={selectedMonth}
+            onSelectMonth={setSelectedMonth}
+            anchorAbsoluteYear={anchorYear}
+            anchorCalendarMonth={anchorMonth}
+            resolution={resolution}
+            timelineYears={timelineYears}
+            timelineMonths={timelineMonths}
+            isTimelineLoading={isTimelineLoading}
+            viewMode={viewMode}
+            onViewModeChange={setViewMode}
+            compact={compact}
+          />
+
+          {/* Financial data content */}
+          <div className={clsx(
+            compact ? 'px-4 pb-4' : 'px-6 pb-6'
+          )}>
+            <div className={clsx('flex flex-col', compact ? 'gap-4' : 'gap-6')}>
               {/* Summary cards at top - side by side */}
               <SummaryCards
                 netWorth={getNetWorthForYear()}
@@ -999,6 +1009,7 @@ export function FinancialDataManagement({
               </div>
             </div>
           </div>
+        </div>
       </div>
 
       <FinancialFormModal
diff --git a/frontend/src/components/dashboard/FinancialDataManagement/types.ts b/frontend/src/components/dashboard/FinancialDataManagement/types.ts
index eee765eec..36853711f 100644
--- a/frontend/src/components/dashboard/FinancialDataManagement/types.ts
+++ b/frontend/src/components/dashboard/FinancialDataManagement/types.ts
@@ -18,8 +18,15 @@ export type CategoryConfig = {
   emptyDescription: string
   icon: LucideIcon
   accent: string
+  // Icon styling for dark mode
+  iconBg: string
+  iconColor: string
+  // Icon styling for light mode (Monet)
+  iconBgLight: string
+  iconColorLight: string
   gradientBg: string
   textColor: string
+  textColorLight: string
   progressColor: string
   singular: string
   plural: string
diff --git a/frontend/src/components/dashboard/FinancialWorkspace.tsx b/frontend/src/components/dashboard/FinancialWorkspace.tsx
index 12ce7babf..d783b804a 100644
--- a/frontend/src/components/dashboard/FinancialWorkspace.tsx
+++ b/frontend/src/components/dashboard/FinancialWorkspace.tsx
@@ -1,5 +1,6 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
-import { Building2, Car, ChevronDown, LayoutGrid, Loader2, Receipt, Search, Sparkles, Trash2, Bell, Wallet, Shield } from 'lucide-react'
+import { Building2, Car, ChevronDown, LayoutGrid, Loader2, Receipt, Sparkles, Trash2, Bell, Wallet, Shield, LibraryBig } from 'lucide-react'
+import { ColorSchemeToggle } from '@/components/ui/ColorSchemeToggle'
 
 import { useFinancialData } from '@/hooks/useFinancialData'
 import { useScenarioEvents } from '@/hooks/useScenarioEvents'
@@ -14,6 +15,7 @@ import { useTimelineStore, useFeatureModulesStore } from '@/stores'
 import { useShallow } from 'zustand/react/shallow'
 import type { ScenarioEvent } from '@/types/scenario'
 import clsx from 'clsx'
+import { useThemeClasses } from '@/lib/theme'
 
 interface FinancialWorkspaceProps {
   // onPropertyScenarioEdit is kept as prop because it's specific to chart interactions
@@ -43,19 +45,20 @@ export function FinancialWorkspace({
   const {
     openCPFView,
     openPropertyPlanner,
-    openTaxPlanner,
     openInsurancePlanner,
     openLayoutModal,
   } = useFeatureModulesStore(
     useShallow((s) => ({
       openCPFView: s.openCPFView,
       openPropertyPlanner: s.openPropertyPlanner,
-      openTaxPlanner: s.openTaxPlanner,
       openInsurancePlanner: s.openInsurancePlanner,
       openLayoutModal: s.openLayoutModal,
     }))
   )
 
+  // Get theme classes for consistent styling
+  const { classes } = useThemeClasses()
+
   // Get timeline data from hook (React Query)
   const timeline = useTimeline({ resolution: 'monthly' })
   const timelineYears = timeline.chartYears
@@ -180,17 +183,15 @@ export function FinancialWorkspace({
   }, [])
 
   return (
-    <div className={`flex flex-col
-h-full min-h-0 w-full min-w-0
-bg-transparent
-text-slate-200`}>
+    <div
+      className={clsx(
+        'flex flex-col h-full min-h-0 w-full min-w-0 bg-transparent transition-colors duration-300',
+        classes.text.primary
+      )}
+    >
       {/* Compact Header - hidden when chartOnly */}
       {!chartOnly && (
-      <header className={`relative z-[100]
-flex items-center justify-between
-h-14
-px-6
-shrink-0`}>
+      <header className="relative z-[100] flex items-center justify-between h-14 px-6 shrink-0">
         <div className="flex items-center gap-4">
           <div className="flex flex-col">
             {/* <h2 className="text-lg font-medium tracking-tight text-slate-100">Workspace</h2> */}
@@ -199,55 +200,22 @@ shrink-0`}>
 
         {/* Glass pill control group */}
         <div className={clsx(
-          "flex items-center gap-3",
-          "px-3 py-1.5",
-          "border border-white/[0.06] rounded-full",
-          "bg-white/[0.02]",
-          "backdrop-blur-sm",
+          "flex items-center gap-3 px-3 py-1.5 rounded-full transition-colors duration-300",
+          classes.toolbar.container,
         )}>
-          {/* Search */}
-          <div className="flex items-center gap-2 border-r border-white/[0.06] pr-3">
-            <Search className="h-3.5 w-3.5 text-slate-500" />
-            <input
-              type="text"
-              placeholder="Search..."
-              className={`w-48
-placeholder-slate-600
-focus:outline-none
-bg-transparent
-text-[13px] text-slate-300`}
-            />
-          </div>
-
           <div className="hidden items-center gap-1 md:flex">
             <button
               onClick={() => setIsProfileModalOpen(true)}
-              className={clsx(
-                "flex items-center justify-center",
-                "h-7 w-7",
-                "rounded-full",
-                "hover:bg-white/5",
-                "hover:text-slate-300 text-slate-500",
-                "disabled:opacity-60",
-                "transition",
-              )}
+              className={clsx(classes.toolbarButton.base, classes.toolbarButton.default)}
               title="Load a profile template"
               type="button"
               disabled={loadProfileMutation.isPending}
             >
-              {loadProfileMutation.isPending ? <Loader2 className="h-3.5 w-3.5 animate-spin" /> : <Sparkles className="h-3.5 w-3.5" />}
+              {loadProfileMutation.isPending ? <Loader2 className="h-3.5 w-3.5 animate-spin" /> : <LibraryBig className="h-3.5 w-3.5" />}
             </button>
             <button
               onClick={handleClearAllData}
-              className={clsx(
-                "flex items-center justify-center",
-                "h-7 w-7",
-                "rounded-full",
-                "hover:bg-rose-500/10",
-                "hover:text-rose-300 text-rose-400/70",
-                "disabled:opacity-60",
-                "transition",
-              )}
+              className={clsx(classes.toolbarButton.base, classes.toolbarButton.danger)}
               title="Delete all data"
               type="button"
               disabled={isClearing}
@@ -256,22 +224,18 @@ text-[13px] text-slate-300`}
             </button>
           </div>
 
-          <div className="h-4 w-px bg-white/[0.06]" />
+          <div className={classes.toolbar.verticalDivider} />
 
           <div className="relative z-[100]" ref={moduleMenuRef}>
             <button
               onClick={() => setIsModuleMenuOpen((prev) => !prev)}
               className={clsx(
-                "flex items-center gap-1.5",
-                "px-2 py-1",
-                "rounded-lg",
-                "hover:bg-white/5",
-                "font-medium hover:text-slate-200 text-[11px] text-slate-400",
-                "transition",
+                "flex items-center gap-1.5 px-2 py-1 rounded-lg font-medium text-[11px] transition",
+                classes.toolbarButton.active,
               )}
               type="button"
             >
-              <Sparkles className="h-3 w-3 text-blue-400/70" />
+              <Sparkles className={clsx("h-3 w-3", classes.icon.primary)} />
               <span className="text-[13px] hidden md:inline">Modules</span>
               <ChevronDown className={`h-2.5 w-2.5 transition ${isModuleMenuOpen ? 'rotate-180' : ''}`} />
             </button>
@@ -282,41 +246,25 @@ text-[13px] text-slate-300`}
                 className="fixed inset-0 z-[299]"
                 onClick={() => setIsModuleMenuOpen(false)}
               />
-              <div className={clsx(
-                "absolute right-0 z-[300]",
-                "w-64",
-                "mt-2",
-                "border border-white/[0.08] rounded-xl",
-                "bg-[#0a0a0a]",
-                "shadow-2xl",
-                "overflow-hidden",
-              )} style={{ isolation: 'isolate' }}>
+              <div
+                className={clsx("absolute right-0 z-[300] w-64 mt-2 overflow-hidden", classes.dropdown.container)}
+                style={{ isolation: 'isolate' }}
+              >
                 {/* Property Planner */}
                 <button
                   onClick={() => {
                     setIsModuleMenuOpen(false)
                     openPropertyPlanner()
                   }}
-                  className={clsx(
-                    "flex items-start gap-3",
-                    "w-full",
-                    "px-4 py-3",
-                    "border-b border-white/[0.04]",
-                    "hover:bg-white/5",
-                    "text-left text-slate-200 text-sm",
-                    "transition",
-                  )}
+                  className={clsx(classes.menuItem.base, classes.menuItem.withBorder, classes.menuItem.hover)}
                   type="button"
                 >
-                  <span className={`mt-0.5 p-2
-rounded-lg border border-violet-500/20
-bg-violet-500/10
-text-violet-400`}>
+                  <span className={clsx(classes.iconBadge.base, classes.iconBadge.violet)}>
                     <Building2 className="h-4 w-4" />
                   </span>
                   <div className="space-y-0.5">
                     <div className="font-medium">Property Planner</div>
-                    <p className="text-xs text-slate-400">Create and compare property purchase scenarios.</p>
+                    <p className={classes.menuText.secondary}>Create and compare property purchase scenarios.</p>
                   </div>
                 </button>
                 {/* CPF Simulation */}
@@ -325,72 +273,15 @@ text-violet-400`}>
                     setIsModuleMenuOpen(false)
                     openCPFView()
                   }}
-                  className={clsx(
-                    "flex items-start gap-3",
-                    "w-full",
-                    "px-4 py-3",
-                    "border-b border-white/[0.04]",
-                    "hover:bg-white/5",
-                    "text-left text-slate-200 text-sm",
-                    "transition",
-                  )}
+                  className={clsx(classes.menuItem.base, classes.menuItem.withBorder, classes.menuItem.hoverSage)}
                   type="button"
                 >
-                  <span className={`mt-0.5 p-2
-rounded-lg border border-emerald-500/20
-bg-emerald-500/10
-text-emerald-400`}>
+                  <span className={clsx(classes.iconBadge.base, classes.iconBadge.emerald)}>
                     <Wallet className="h-4 w-4" />
                   </span>
                   <div className="space-y-0.5">
                     <div className="font-medium">CPF</div>
-                    <p className="text-xs text-slate-400">Simulate balances, investments, and retirement.</p>
-                  </div>
-                </button>
-                {/* Coming Soon Modules */}
-                <div className="cursor-not-allowed opacity-60">
-                  <div className={`flex items-start
-w-full
-gap-3 px-4 py-3
-text-left text-sm`}>
-                    <span className={`mt-0.5 p-2
-rounded-lg border border-white/[0.06]
-bg-white/[0.02]
-text-slate-500`}>
-                      <Car className="h-4 w-4" />
-                    </span>
-                    <div className="space-y-0.5">
-                      <div className="font-medium text-slate-400">Vehicle Purchase</div>
-                      <p className="text-xs text-slate-500">Coming soon</p>
-                    </div>
-                  </div>
-                </div>
-                {/* Tax Module */}
-                <button
-                  onClick={() => {
-                    setIsModuleMenuOpen(false)
-                    openTaxPlanner()
-                  }}
-                  className={clsx(
-                    "flex items-start gap-3",
-                    "w-full",
-                    "px-4 py-3",
-                    "border-b border-white/[0.04]",
-                    "hover:bg-white/5",
-                    "text-left text-slate-200 text-sm",
-                    "transition",
-                  )}
-                  type="button"
-                >
-                  <span className={`mt-0.5 p-2
-rounded-lg border border-amber-500/20
-bg-amber-500/10
-text-amber-400`}>
-                    <Receipt className="h-4 w-4" />
-                  </span>
-                  <div className="space-y-0.5">
-                    <div className="font-medium">Tax Planner</div>
-                    <p className="text-xs text-slate-400">Singapore tax calculations and scenario planning.</p>
+                    <p className={classes.menuText.secondary}>Simulate balances, investments, and retirement.</p>
                   </div>
                 </button>
                 {/* Insurance Planner */}
@@ -399,62 +290,64 @@ text-amber-400`}>
                     setIsModuleMenuOpen(false)
                     openInsurancePlanner()
                   }}
-                  className={clsx(
-                    "flex items-start gap-3",
-                    "w-full",
-                    "px-4 py-3",
-                    "hover:bg-white/5",
-                    "text-left text-slate-200 text-sm",
-                    "transition",
-                  )}
+                  className={clsx(classes.menuItem.base, classes.menuItem.withBorder, classes.menuItem.hover)}
                   type="button"
                 >
-                  <span className={`mt-0.5 p-2
-rounded-lg border border-purple-500/20
-bg-purple-500/10
-text-purple-400`}>
+                  <span className={clsx(classes.iconBadge.base, classes.iconBadge.purple)}>
                     <Shield className="h-4 w-4" />
                   </span>
                   <div className="space-y-0.5">
                     <div className="font-medium">Insurance Planner</div>
-                    <p className="text-xs text-slate-400">Analyze coverage gaps and plan your protection.</p>
+                    <p className={classes.menuText.secondary}>Analyze coverage gaps and plan your protection.</p>
                   </div>
                 </button>
+                {/* Coming Soon Modules */}
+                <div className={classes.menuItem.disabled}>
+                  <div className="flex items-start w-full gap-3 px-4 py-3 text-left text-sm">
+                    <span className={clsx(classes.iconBadge.base, classes.iconBadge.disabled)}>
+                      <Car className="h-4 w-4" />
+                    </span>
+                    <div className="space-y-0.5">
+                      <div className={clsx("font-medium", classes.menuText.disabled)}>Vehicle Purchase</div>
+                      <p className={classes.menuText.disabledSecondary}>Coming soon</p>
+                    </div>
+                  </div>
+                </div>
+                <div className={classes.menuItem.disabled}>
+                  <div className="flex items-start w-full gap-3 px-4 py-3 text-left text-sm">
+                    <span className={clsx(classes.iconBadge.base, classes.iconBadge.disabled)}>
+                      <Receipt className="h-4 w-4" />
+                    </span>
+                    <div className="space-y-0.5">
+                      <div className={clsx("font-medium", classes.menuText.disabled)}>Tax Projections</div>
+                      <p className={classes.menuText.disabledSecondary}>Coming soon</p>
+                    </div>
+                  </div>
+                </div>
               </div>
               </>
             )}
           </div>
 
-          <div className="h-4 w-px bg-white/[0.06]" />
+          <div className={classes.toolbar.verticalDivider} />
 
           {/* Layout toggle */}
           <button
             type="button"
             onClick={openLayoutModal}
-            className={clsx(
-              "flex items-center justify-center",
-              "h-7 w-7",
-              "rounded-full",
-              "hover:bg-white/5",
-              "hover:text-slate-300 text-slate-500",
-              "transition",
-            )}
+            className={clsx(classes.toolbarButton.base, classes.toolbarButton.default)}
             title="Change layout"
           >
             <LayoutGrid className="h-3.5 w-3.5" />
           </button>
 
+          {/* Color scheme toggle */}
+          <ColorSchemeToggle />
+
           {/* Notification bell */}
           <button
             type="button"
-            className={clsx(
-              "flex items-center justify-center",
-              "h-7 w-7",
-              "rounded-full",
-              "hover:bg-white/5",
-              "hover:text-slate-300 text-slate-500",
-              "transition",
-            )}
+            className={clsx(classes.toolbarButton.base, classes.toolbarButton.default)}
           >
             <Bell className="h-3.5 w-3.5" />
           </button>
@@ -481,12 +374,8 @@ text-purple-400`}>
           {/* Chart Section */}
           <div className="flex-1 p-6">
             <section className={clsx(
-              "relative",
-              "h-full",
-              "border border-white/[0.1] hover:border-white/[0.15] rounded-2xl",
-              "bg-[#0a0a0a]/60",
-              "transition-all",
-              "overflow-hidden",
+              "relative h-full rounded-2xl transition-all overflow-hidden",
+              classes.card.base,
             )}>
               {/* Chart Container - NetWorthProjection has its own header */}
               <div className="h-full">
diff --git a/frontend/src/components/dashboard/TaxModePanel/TaxModeModal.tsx b/frontend/src/components/dashboard/TaxModePanel/TaxModeModal.tsx
index 5960f0071..c38bb0ab7 100644
--- a/frontend/src/components/dashboard/TaxModePanel/TaxModeModal.tsx
+++ b/frontend/src/components/dashboard/TaxModePanel/TaxModeModal.tsx
@@ -15,9 +15,10 @@ import {
 import * as Tooltip from '@radix-ui/react-tooltip'
 import { clsx } from 'clsx'
 import { Modal } from '@/components/ui/Modal'
-import { useTaxModeStore } from '@/stores'
+import { useTaxModeStore, useColorScheme } from '@/stores'
 import { useTaxReliefStorage } from '@/hooks/useTaxReliefStorage'
 import { useIncomesQuery } from '@/hooks/queries/useIncomesQuery'
+import { usePersonsQuery } from '@/hooks/queries/usePersonsQuery'
 import { numericStyles } from '@/lib/utils'
 import { CustomDropdown } from '@/components/modals/ScenarioEventModal/components/CustomDropdown'
 import {
@@ -90,11 +91,17 @@ interface SegmentedControlProps<T extends string> {
   value: T
   onChange: (value: T) => void
   options: { value: T; label: string; icon?: React.ReactNode }[]
+  isMonet?: boolean
 }
 
-function SegmentedControl<T extends string>({ value, onChange, options }: SegmentedControlProps<T>) {
+function SegmentedControl<T extends string>({ value, onChange, options, isMonet = false }: SegmentedControlProps<T>) {
   return (
-    <div className="inline-flex rounded-lg bg-white/[0.03] p-0.5 border border-white/[0.08]">
+    <div className={clsx(
+      'inline-flex rounded-lg p-0.5 border',
+      isMonet
+        ? 'bg-[var(--monet-lavender)]/5 border-[var(--monet-lavender)]/15'
+        : 'bg-white/[0.03] border-white/[0.08]'
+    )}>
       {options.map((option) => {
         const isActive = option.value === value
         return (
@@ -105,8 +112,8 @@ function SegmentedControl<T extends string>({ value, onChange, options }: Segmen
             className={clsx(
               'flex items-center gap-1.5 px-2.5 py-1 rounded-md text-xs font-medium transition-all duration-150',
               isActive
-                ? 'bg-white/[0.1] text-white shadow-sm'
-                : 'text-slate-500 hover:text-slate-300'
+                ? (isMonet ? 'bg-white text-[var(--monet-text-primary)] shadow-sm' : 'bg-white/[0.1] text-white shadow-sm')
+                : (isMonet ? 'text-[var(--monet-text-muted)] hover:text-[var(--monet-text-secondary)]' : 'text-slate-500 hover:text-slate-300')
             )}
           >
             {option.icon}
@@ -121,16 +128,20 @@ function SegmentedControl<T extends string>({ value, onChange, options }: Segmen
 interface IncomeRowProps {
   income: Income
   annualAmount: number
+  isMonet?: boolean
 }
 
-function IncomeRow({ income, annualAmount }: IncomeRowProps) {
+function IncomeRow({ income, annualAmount, isMonet = false }: IncomeRowProps) {
   const taxType = mapCategoryToTaxType(income.category)
 
   return (
-    <div className="flex items-center justify-between py-2 border-b border-white/[0.04] last:border-0">
+    <div className={clsx(
+      'flex items-center justify-between py-2 border-b last:border-0',
+      isMonet ? 'border-[var(--monet-lavender)]/10' : 'border-white/[0.04]'
+    )}>
       <div className="flex flex-col min-w-0 mr-4">
-        <span className="text-sm text-slate-300 truncate">{income.name}</span>
-        <span className="text-xs text-slate-500 capitalize">{taxType}</span>
+        <span className={clsx('text-sm truncate', isMonet ? 'text-[var(--monet-text-secondary)]' : 'text-slate-300')}>{income.name}</span>
+        <span className={clsx('text-xs capitalize', isMonet ? 'text-[var(--monet-text-muted)]' : 'text-slate-500')}>{taxType}</span>
       </div>
       <span className={numericStyles.medium}>
         {formatCurrency(annualAmount)}
@@ -142,9 +153,10 @@ function IncomeRow({ income, annualAmount }: IncomeRowProps) {
 interface ReliefRowProps {
   relief: TaxRelief
   onUpdate: (amount: number) => void
+  isMonet?: boolean
 }
 
-function ReliefRow({ relief, onUpdate }: ReliefRowProps) {
+function ReliefRow({ relief, onUpdate, isMonet = false }: ReliefRowProps) {
   const [isEditing, setIsEditing] = useState(false)
   const [inputValue, setInputValue] = useState(relief.claimedAmount.toString())
   const isUsed = relief.claimedAmount > 0
@@ -159,13 +171,26 @@ function ReliefRow({ relief, onUpdate }: ReliefRowProps) {
   }
 
   return (
-    <div className="flex items-center justify-between py-2 border-b border-white/[0.04] last:border-0">
+    <div className={clsx(
+      'flex items-center justify-between py-2 border-b last:border-0',
+      isMonet ? 'border-[var(--monet-lavender)]/10' : 'border-white/[0.04]'
+    )}>
       <div className="flex items-center gap-2 min-w-0 mr-4">
-        <span className={clsx('text-sm truncate', isUsed ? 'text-slate-300' : 'text-slate-500')}>
+        <span className={clsx(
+          'text-sm truncate',
+          isUsed
+            ? (isMonet ? 'text-[var(--monet-text-secondary)]' : 'text-slate-300')
+            : (isMonet ? 'text-[var(--monet-text-muted)]' : 'text-slate-500')
+        )}>
           {relief.name}
         </span>
         {relief.autoCalculated && (
-          <span className="shrink-0 text-xs px-1.5 py-0.5 rounded bg-blue-500/10 text-blue-400 border border-blue-500/20">
+          <span className={clsx(
+            'shrink-0 text-xs px-1.5 py-0.5 rounded border',
+            isMonet
+              ? 'bg-blue-500/10 text-blue-600 border-blue-500/20'
+              : 'bg-blue-500/10 text-blue-400 border-blue-500/20'
+          )}>
             Auto
           </span>
         )}
@@ -173,7 +198,10 @@ function ReliefRow({ relief, onUpdate }: ReliefRowProps) {
           <Tooltip.Provider delayDuration={200}>
             <Tooltip.Root>
               <Tooltip.Trigger asChild>
-                <button type="button" className="shrink-0 text-slate-500 hover:text-slate-300 transition-colors">
+                <button type="button" className={clsx(
+                  'shrink-0 transition-colors',
+                  isMonet ? 'text-[var(--monet-text-muted)] hover:text-[var(--monet-text-secondary)]' : 'text-slate-500 hover:text-slate-300'
+                )}>
                   <Info className="h-3.5 w-3.5" />
                 </button>
               </Tooltip.Trigger>
@@ -182,19 +210,27 @@ function ReliefRow({ relief, onUpdate }: ReliefRowProps) {
                   side="top"
                   align="start"
                   sideOffset={4}
-                  className="z-[60] max-w-xs px-3 py-2 text-xs leading-relaxed text-slate-200 bg-[#1a1a1a] border border-white/[0.1] rounded-lg shadow-xl"
+                  className={clsx(
+                    'z-[60] max-w-xs px-3 py-2 text-xs leading-relaxed rounded-lg shadow-xl',
+                    isMonet
+                      ? 'text-[var(--monet-text-secondary)] bg-white border border-[var(--monet-lavender)]/20'
+                      : 'text-slate-200 bg-[#1a1a1a] border border-white/[0.1]'
+                  )}
                 >
                   <p className="mb-2">{reliefInfo.description}</p>
                   <a
                     href={reliefInfo.irasUrl}
                     target="_blank"
                     rel="noopener noreferrer"
-                    className="inline-flex items-center gap-1 text-blue-400 hover:text-blue-300 transition-colors"
+                    className={clsx(
+                      'inline-flex items-center gap-1 transition-colors',
+                      isMonet ? 'text-blue-600 hover:text-blue-700' : 'text-blue-400 hover:text-blue-300'
+                    )}
                   >
                     Learn more on IRAS
                     <ExternalLink className="h-3 w-3" />
                   </a>
-                  <Tooltip.Arrow className="fill-[#1a1a1a]" />
+                  <Tooltip.Arrow className={isMonet ? 'fill-white' : 'fill-[#1a1a1a]'} />
                 </Tooltip.Content>
               </Tooltip.Portal>
             </Tooltip.Root>
@@ -210,21 +246,27 @@ function ReliefRow({ relief, onUpdate }: ReliefRowProps) {
             onBlur={handleBlur}
             onKeyDown={(e) => e.key === 'Enter' && handleBlur()}
             autoFocus
-            className="w-24 px-2 py-1 text-right text-sm rounded-lg bg-white/[0.03] border border-white/[0.06] text-white font-mono tabular-nums focus:outline-none focus:border-white/20 transition-colors"
+            className={clsx(
+              'w-24 px-2 py-1 text-right text-sm rounded-lg font-mono tabular-nums focus:outline-none transition-colors',
+              isMonet
+                ? 'bg-white border border-[var(--monet-lavender)]/20 text-[var(--monet-text-primary)] focus:border-[var(--monet-lavender)]/40'
+                : 'bg-white/[0.03] border border-white/[0.06] text-white focus:border-white/20'
+            )}
           />
         ) : (
           <button
             onClick={() => setIsEditing(true)}
             className={clsx(
               numericStyles.medium,
-              'transition-colors hover:text-amber-400',
-              !isUsed && 'text-slate-500'
+              'transition-colors',
+              isMonet ? 'hover:text-amber-600' : 'hover:text-amber-400',
+              !isUsed && (isMonet ? 'text-[var(--monet-text-muted)]' : 'text-slate-500')
             )}
           >
             {formatCurrency(relief.claimedAmount)}
           </button>
         )}
-        <span className="text-xs text-slate-500 font-mono tabular-nums">
+        <span className={clsx('text-xs font-mono tabular-nums', isMonet ? 'text-[var(--monet-text-muted)]' : 'text-slate-500')}>
           / {formatCurrency(relief.maxAmount)}
         </span>
       </div>
@@ -242,10 +284,18 @@ interface TaxModeModalProps {
 }
 
 export function TaxModeModal({ isOpen, onClose }: TaxModeModalProps) {
+  const colorScheme = useColorScheme()
+  const isMonet = colorScheme === 'monet'
   const residencyStatus = useTaxModeStore((s) => s.residencyStatus)
 
   const { loadReliefs, saveReliefs } = useTaxReliefStorage()
   const { data: incomes = [], isLoading: incomesLoading } = useIncomesQuery()
+  const { data: persons = [] } = usePersonsQuery()
+
+  const getPersonLabel = (personId: PersonId) => {
+    const index = personId === 'person1' ? 0 : 1
+    return persons[index]?.name || `Person ${index + 1}`
+  }
 
   const currentYear = new Date().getFullYear()
   const assessmentYear = currentYear + 1
@@ -355,26 +405,45 @@ export function TaxModeModal({ isOpen, onClose }: TaxModeModalProps) {
     <Modal
       isOpen={isOpen}
       onClose={onClose}
-      overlayClassName="bg-black/60 backdrop-blur-sm"
+      overlayClassName={isMonet ? 'bg-black/30 backdrop-blur-sm' : 'bg-black/60 backdrop-blur-sm'}
       className="w-full max-w-4xl max-h-[85vh] mx-4"
     >
-      <div className="flex flex-col rounded-2xl border border-white/[0.08] bg-[#0a0a0a] overflow-hidden max-h-[85vh]">
+      <div className={clsx(
+        'flex flex-col rounded-2xl border overflow-hidden max-h-[85vh]',
+        isMonet
+          ? 'border-[var(--monet-lavender)]/20 bg-white/95 backdrop-blur-xl'
+          : 'border-white/[0.08] bg-[#0a0a0a]'
+      )}>
         {/* Header */}
-        <div className="px-5 py-4 border-b border-white/[0.06] flex items-center justify-between shrink-0">
+        <div className={clsx(
+          'px-5 py-4 border-b flex items-center justify-between shrink-0',
+          isMonet ? 'border-[var(--monet-lavender)]/10' : 'border-white/[0.06]'
+        )}>
           <div className="flex items-center gap-3">
-            <span className="p-2 rounded-xl bg-amber-500/10 border border-amber-500/20 text-amber-400">
+            <span className={clsx(
+              'p-2 rounded-xl border',
+              isMonet
+                ? 'bg-amber-500/10 border-amber-500/20 text-amber-600'
+                : 'bg-amber-500/10 border-amber-500/20 text-amber-400'
+            )}>
               <Receipt className="h-5 w-5" />
             </span>
             <div>
-              <h2 className="text-lg font-semibold text-white">Tax Estimate</h2>
+              <h2 className={clsx(
+                'text-lg font-semibold',
+                isMonet ? 'text-[var(--monet-text-primary)]' : 'text-white'
+              )}>Tax Estimate</h2>
               <div className="flex items-center gap-2 mt-0.5">
-                <span className="text-sm text-slate-500">YA {assessmentYear}</span>
+                <span className={clsx('text-sm', isMonet ? 'text-[var(--monet-text-muted)]' : 'text-slate-500')}>YA {assessmentYear}</span>
                 <Tooltip.Provider delayDuration={200}>
                   <Tooltip.Root>
                     <Tooltip.Trigger asChild>
                       <button
                         type="button"
-                        className="text-slate-500 hover:text-slate-300 transition-colors"
+                        className={clsx(
+                          'transition-colors',
+                          isMonet ? 'text-[var(--monet-text-muted)] hover:text-[var(--monet-text-secondary)]' : 'text-slate-500 hover:text-slate-300'
+                        )}
                       >
                         <Info className="h-3.5 w-3.5" />
                       </button>
@@ -422,7 +491,12 @@ export function TaxModeModal({ isOpen, onClose }: TaxModeModalProps) {
           </div>
           <button
             onClick={onClose}
-            className="p-2 rounded-lg text-slate-400 hover:text-white hover:bg-white/[0.05] transition-colors"
+            className={clsx(
+              'p-2 rounded-lg transition-colors',
+              isMonet
+                ? 'text-[var(--monet-text-muted)] hover:text-[var(--monet-text-primary)] hover:bg-[var(--monet-lavender)]/10'
+                : 'text-slate-400 hover:text-white hover:bg-white/[0.05]'
+            )}
           >
             <X className="h-5 w-5" />
           </button>
@@ -431,44 +505,47 @@ export function TaxModeModal({ isOpen, onClose }: TaxModeModalProps) {
         {/* Content - Two Column Layout */}
         <div className="flex-1 flex overflow-hidden">
           {/* LEFT COLUMN - Inputs */}
-          <div className="flex-1 overflow-y-auto p-5 space-y-6 border-r border-white/[0.06]">
+          <div className={clsx(
+            'flex-1 overflow-y-auto p-5 space-y-6 border-r',
+            isMonet ? 'border-[var(--monet-lavender)]/10' : 'border-white/[0.06]'
+          )}>
             {/* Income Section */}
             <section>
               <div className="flex items-center justify-between mb-3">
                 <div className="flex items-center gap-2">
-                  <Wallet className="h-4 w-4 text-emerald-400" />
-                  <span className="text-sm font-medium text-white">Income (Annual)</span>
+                  <Wallet className={clsx('h-4 w-4', isMonet ? 'text-emerald-600' : 'text-emerald-400')} />
+                  <span className={clsx('text-sm font-medium', isMonet ? 'text-[var(--monet-text-primary)]' : 'text-white')}>Income (Annual)</span>
                 </div>
                 <CustomDropdown
                   value={selectedPerson}
                   onChange={(v) => setSelectedPerson(v as PersonId)}
                   options={[
-                    { value: 'person1', label: 'Person 1' },
-                    { value: 'person2', label: 'Person 2' },
+                    { value: 'person1', label: getPersonLabel('person1') },
+                    { value: 'person2', label: getPersonLabel('person2') },
                   ]}
                   minWidth="100px"
                 />
               </div>
 
               {incomesLoading ? (
-                <div className="py-4 text-center text-sm text-slate-500">Loading incomes...</div>
+                <div className={clsx('py-4 text-center text-sm', isMonet ? 'text-[var(--monet-text-muted)]' : 'text-slate-500')}>Loading incomes...</div>
               ) : selectedPersonIncomes.length === 0 ? (
-                <div className="py-4 text-center text-sm text-slate-500">
-                  No income assigned to {selectedPerson === 'person1' ? 'Person 1' : 'Person 2'}
+                <div className={clsx('py-4 text-center text-sm', isMonet ? 'text-[var(--monet-text-muted)]' : 'text-slate-500')}>
+                  No income assigned to {getPersonLabel(selectedPerson)}
                 </div>
               ) : (
                 selectedPersonIncomes.map(({ income, annual }) => (
-                  <IncomeRow key={income.id} income={income} annualAmount={annual} />
+                  <IncomeRow key={income.id} income={income} annualAmount={annual} isMonet={isMonet} />
                 ))
               )}
 
-              <div className="mt-3 pt-3 border-t border-white/[0.06] space-y-1.5">
+              <div className={clsx('mt-3 pt-3 border-t space-y-1.5', isMonet ? 'border-[var(--monet-lavender)]/10' : 'border-white/[0.06]')}>
                 <div className="flex justify-between">
-                  <span className="text-sm text-slate-400">Gross Income</span>
+                  <span className={clsx('text-sm', isMonet ? 'text-[var(--monet-text-secondary)]' : 'text-slate-400')}>Gross Income</span>
                   <span className={numericStyles.medium}>{formatCurrency(currentGrossIncome)}</span>
                 </div>
                 <div className="flex justify-between">
-                  <span className="text-sm text-slate-500">CPF Deduction</span>
+                  <span className={clsx('text-sm', isMonet ? 'text-[var(--monet-text-muted)]' : 'text-slate-500')}>CPF Deduction</span>
                   <span className={numericStyles.muted}>({formatCurrency(cpfDeduction)})</span>
                 </div>
               </div>
@@ -478,16 +555,16 @@ export function TaxModeModal({ isOpen, onClose }: TaxModeModalProps) {
             <section>
               <div className="flex items-center justify-between mb-3">
                 <div className="flex items-center gap-2">
-                  <CheckCircle2 className="h-4 w-4 text-blue-400" />
-                  <span className="text-sm font-medium text-white">Deductions & Reliefs</span>
+                  <CheckCircle2 className={clsx('h-4 w-4', isMonet ? 'text-blue-600' : 'text-blue-400')} />
+                  <span className={clsx('text-sm font-medium', isMonet ? 'text-[var(--monet-text-primary)]' : 'text-white')}>Deductions & Reliefs</span>
                 </div>
                 <div className="flex items-center gap-2">
-                  <span className="text-xs text-slate-500 font-mono tabular-nums">
+                  <span className={clsx('text-xs font-mono tabular-nums', isMonet ? 'text-[var(--monet-text-muted)]' : 'text-slate-500')}>
                     {formatCurrency(totalReliefs)} / {formatCurrency(PERSONAL_RELIEF_CAP)}
                   </span>
                   <button
                     onClick={handleResetReliefs}
-                    className="p-1 text-slate-500 hover:text-slate-300 transition-colors"
+                    className={clsx('p-1 transition-colors', isMonet ? 'text-[var(--monet-text-muted)] hover:text-[var(--monet-text-secondary)]' : 'text-slate-500 hover:text-slate-300')}
                     title="Reset reliefs"
                   >
                     <RotateCcw className="h-3.5 w-3.5" />
@@ -497,12 +574,13 @@ export function TaxModeModal({ isOpen, onClose }: TaxModeModalProps) {
 
               {usedReliefs.length > 0 && (
                 <div className="mb-4">
-                  <div className="text-xs font-semibold uppercase tracking-wider text-slate-400 mb-2">Used</div>
+                  <div className={clsx('text-xs font-semibold uppercase tracking-wider mb-2', isMonet ? 'text-[var(--monet-text-secondary)]' : 'text-slate-400')}>Used</div>
                   {usedReliefs.map((relief) => (
                     <ReliefRow
                       key={relief.id}
                       relief={relief}
                       onUpdate={(amount) => handleUpdateRelief(relief.id, amount)}
+                      isMonet={isMonet}
                     />
                   ))}
                 </div>
@@ -510,12 +588,13 @@ export function TaxModeModal({ isOpen, onClose }: TaxModeModalProps) {
 
               {availableReliefs.length > 0 && (
                 <div>
-                  <div className="text-xs font-semibold uppercase tracking-wider text-slate-400 mb-2">Available</div>
+                  <div className={clsx('text-xs font-semibold uppercase tracking-wider mb-2', isMonet ? 'text-[var(--monet-text-secondary)]' : 'text-slate-400')}>Available</div>
                   {availableReliefs.map((relief) => (
                     <ReliefRow
                       key={relief.id}
                       relief={relief}
                       onUpdate={(amount) => handleUpdateRelief(relief.id, amount)}
+                      isMonet={isMonet}
                     />
                   ))}
                 </div>
@@ -523,7 +602,7 @@ export function TaxModeModal({ isOpen, onClose }: TaxModeModalProps) {
 
               {totalReliefs >= PERSONAL_RELIEF_CAP && (
                 <div className="mt-3 p-2.5 rounded-lg bg-amber-500/10 border border-amber-500/20">
-                  <p className="text-xs text-amber-400">
+                  <p className={clsx('text-xs', isMonet ? 'text-amber-600' : 'text-amber-400')}>
                     Relief cap of {formatCurrency(PERSONAL_RELIEF_CAP)} reached
                   </p>
                 </div>
@@ -532,35 +611,38 @@ export function TaxModeModal({ isOpen, onClose }: TaxModeModalProps) {
           </div>
 
           {/* RIGHT COLUMN - Results */}
-          <div className="w-72 shrink-0 p-5 space-y-6 overflow-y-auto bg-white/[0.01]">
+          <div className={clsx(
+            'w-72 shrink-0 p-5 space-y-6 overflow-y-auto',
+            isMonet ? 'bg-[var(--monet-lavender)]/5' : 'bg-white/[0.01]'
+          )}>
             {/* Chargeable Income */}
             <section>
               <div className="flex items-center gap-2 mb-3">
-                <TrendingUp className="h-4 w-4 text-blue-400" />
-                <span className="text-xs font-medium text-slate-400 uppercase tracking-wide">Chargeable Income</span>
+                <TrendingUp className={clsx('h-4 w-4', isMonet ? 'text-blue-600' : 'text-blue-400')} />
+                <span className={clsx('text-xs font-medium uppercase tracking-wide', isMonet ? 'text-[var(--monet-text-secondary)]' : 'text-slate-400')}>Chargeable Income</span>
               </div>
 
               <div className="space-y-1.5 text-sm mb-3">
                 <div className="flex justify-between">
-                  <span className="text-slate-500">Gross Income</span>
+                  <span className={clsx(isMonet ? 'text-[var(--monet-text-muted)]' : 'text-slate-500')}>Gross Income</span>
                   <span className={numericStyles.base}>{formatCurrency(currentGrossIncome)}</span>
                 </div>
                 <div className="flex justify-between">
-                  <span className="text-slate-500">CPF Deduction</span>
+                  <span className={clsx(isMonet ? 'text-[var(--monet-text-muted)]' : 'text-slate-500')}>CPF Deduction</span>
                   <span className={numericStyles.muted}>({formatCurrency(cpfDeduction)})</span>
                 </div>
-                <div className="flex justify-between pb-1.5 border-b border-white/[0.04]">
-                  <span className="text-slate-400">Assessable Income</span>
+                <div className={clsx('flex justify-between pb-1.5 border-b', isMonet ? 'border-[var(--monet-lavender)]/10' : 'border-white/[0.04]')}>
+                  <span className={clsx(isMonet ? 'text-[var(--monet-text-secondary)]' : 'text-slate-400')}>Assessable Income</span>
                   <span className={numericStyles.base}>{formatCurrency(currentGrossIncome - cpfDeduction)}</span>
                 </div>
                 <div className="flex justify-between">
-                  <span className="text-slate-500">Reliefs</span>
+                  <span className={clsx(isMonet ? 'text-[var(--monet-text-muted)]' : 'text-slate-500')}>Reliefs</span>
                   <span className={numericStyles.muted}>({formatCurrency(totalReliefs)})</span>
                 </div>
               </div>
 
-              <div className="flex justify-between pt-2 border-t border-white/[0.06]">
-                <span className="text-sm text-slate-300 font-medium">Chargeable Income</span>
+              <div className={clsx('flex justify-between pt-2 border-t', isMonet ? 'border-[var(--monet-lavender)]/10' : 'border-white/[0.06]')}>
+                <span className={clsx('text-sm font-medium', isMonet ? 'text-[var(--monet-text-secondary)]' : 'text-slate-300')}>Chargeable Income</span>
                 <span className={numericStyles.medium}>{formatCurrency(taxResult.chargeableIncome)}</span>
               </div>
             </section>
@@ -568,19 +650,19 @@ export function TaxModeModal({ isOpen, onClose }: TaxModeModalProps) {
             {/* Tax */}
             <section className="space-y-1.5 text-sm">
               <div className="flex justify-between">
-                <span className="text-sm text-slate-300 font-medium">Tax Payable</span>
-                <span className="text-sm font-medium text-rose-400 font-mono tabular-nums">
+                <span className={clsx('text-sm font-medium', isMonet ? 'text-[var(--monet-text-secondary)]' : 'text-slate-300')}>Tax Payable</span>
+                <span className={clsx('text-sm font-medium font-mono tabular-nums', isMonet ? 'text-rose-600' : 'text-rose-400')}>
                   ({formatCurrency(taxResult.taxPayable)})
                 </span>
               </div>
               <div className="flex justify-between items-center">
-                <span className="text-xs text-slate-500">
+                <span className={clsx('text-xs', isMonet ? 'text-[var(--monet-text-muted)]' : 'text-slate-500')}>
                   {formatPercent(taxResult.effectiveRate)} effective | {formatPercent(taxResult.marginalRate)} marginal
                 </span>
                 <button
                   type="button"
                   onClick={() => setTaxView(taxView === 'summary' ? 'by-bracket' : 'summary')}
-                  className="text-xs text-slate-500 hover:text-slate-300 transition-colors"
+                  className={clsx('text-xs transition-colors', isMonet ? 'text-[var(--monet-text-muted)] hover:text-[var(--monet-text-secondary)]' : 'text-slate-500 hover:text-slate-300')}
                 >
                   {taxView === 'summary' ? 'Show details' : 'Hide details'}
                 </button>
@@ -594,16 +676,16 @@ export function TaxModeModal({ isOpen, onClose }: TaxModeModalProps) {
                     exit={{ opacity: 0, height: 0 }}
                     className="overflow-hidden"
                   >
-                    <div className="pt-2 mt-2 border-t border-white/[0.04] space-y-1">
+                    <div className={clsx('pt-2 mt-2 border-t space-y-1', isMonet ? 'border-[var(--monet-lavender)]/10' : 'border-white/[0.04]')}>
                       {taxResult.taxBreakdown.map((bracket, idx) => (
                         <div key={idx} className="flex items-center justify-between">
                           <div className="flex items-center gap-2">
-                            <span className="text-xs text-slate-500 w-8 font-mono tabular-nums">
+                            <span className={clsx('text-xs w-8 font-mono tabular-nums', isMonet ? 'text-[var(--monet-text-muted)]' : 'text-slate-500')}>
                               {formatPercent(bracket.rate)}
                             </span>
-                            <span className="text-xs text-slate-500">{bracket.bracket}</span>
+                            <span className={clsx('text-xs', isMonet ? 'text-[var(--monet-text-muted)]' : 'text-slate-500')}>{bracket.bracket}</span>
                           </div>
-                          <span className="text-xs text-slate-400 font-mono tabular-nums">
+                          <span className={clsx('text-xs font-mono tabular-nums', isMonet ? 'text-[var(--monet-text-secondary)]' : 'text-slate-400')}>
                             {formatCurrency(bracket.amount)}
                           </span>
                         </div>
@@ -615,18 +697,18 @@ export function TaxModeModal({ isOpen, onClose }: TaxModeModalProps) {
             </section>
 
             {/* Net Income */}
-            <section className="pt-4 border-t border-white/[0.06] space-y-1.5 text-sm">
+            <section className={clsx('pt-4 border-t space-y-1.5 text-sm', isMonet ? 'border-[var(--monet-lavender)]/10' : 'border-white/[0.06]')}>
               <div className="flex justify-between">
-                <span className="text-sm text-slate-300 font-medium">Net Income</span>
-                <span className="text-sm font-medium text-emerald-400 font-mono tabular-nums">
+                <span className={clsx('text-sm font-medium', isMonet ? 'text-[var(--monet-text-secondary)]' : 'text-slate-300')}>Net Income</span>
+                <span className={clsx('text-sm font-medium font-mono tabular-nums', isMonet ? 'text-emerald-600' : 'text-emerald-400')}>
                   {formatCurrency(taxResult.chargeableIncome - taxResult.taxPayable)}
                 </span>
               </div>
 
               {/* Payment Method */}
-              <div className="mt-3 pt-3 border-t border-white/[0.06]">
+              <div className={clsx('mt-3 pt-3 border-t', isMonet ? 'border-[var(--monet-lavender)]/10' : 'border-white/[0.06]')}>
                 <div className="flex items-center justify-between mb-2">
-                  <span className="text-xs text-slate-500">Payment</span>
+                  <span className={clsx('text-xs', isMonet ? 'text-[var(--monet-text-muted)]' : 'text-slate-500')}>Payment</span>
                   <SegmentedControl
                     value={paymentMethod}
                     onChange={setPaymentMethod}
@@ -634,11 +716,12 @@ export function TaxModeModal({ isOpen, onClose }: TaxModeModalProps) {
                       { value: 'lump-sum', label: 'One-Time' },
                       { value: 'giro', label: 'Monthly' },
                     ]}
+                    isMonet={isMonet}
                   />
                 </div>
                 {paymentMethod === 'giro' && taxResult.taxPayable > 0 && (
                   <div className="flex items-center justify-between text-sm">
-                    <span className="text-slate-500">Monthly (12 instalments)</span>
+                    <span className={clsx(isMonet ? 'text-[var(--monet-text-muted)]' : 'text-slate-500')}>Monthly (12 instalments)</span>
                     <span className={numericStyles.base}>
                       ({formatCurrency(Math.ceil(taxResult.taxPayable / 12))})
                     </span>
diff --git a/frontend/src/components/dashboard/TaxModePanel/index.tsx b/frontend/src/components/dashboard/TaxModePanel/index.tsx
index 493fec5e3..f124cb23a 100644
--- a/frontend/src/components/dashboard/TaxModePanel/index.tsx
+++ b/frontend/src/components/dashboard/TaxModePanel/index.tsx
@@ -16,6 +16,7 @@ import { clsx } from 'clsx'
 import { useTaxModeStore } from '@/stores'
 import { useTaxReliefStorage } from '@/hooks/useTaxReliefStorage'
 import { useIncomesQuery } from '@/hooks/queries/useIncomesQuery'
+import { usePersonsQuery } from '@/hooks/queries/usePersonsQuery'
 import { numericStyles } from '@/lib/utils'
 import { CustomDropdown } from '@/components/modals/ScenarioEventModal/components/CustomDropdown'
 import {
@@ -253,6 +254,13 @@ export function TaxModePanel({ fullWidth = false, hideToggle = false }: TaxModeP
 
   const { loadReliefs, saveReliefs } = useTaxReliefStorage()
   const { data: incomes = [], isLoading: incomesLoading } = useIncomesQuery()
+  const { data: persons = [] } = usePersonsQuery()
+
+  // Person label helpers
+  const getPersonLabel = (personId: PersonId) => {
+    const index = personId === 'person1' ? 0 : 1
+    return persons[index]?.name || `Person ${index + 1}`
+  }
 
   // Current year for tax calculation
   const currentYear = new Date().getFullYear()
@@ -483,8 +491,8 @@ export function TaxModePanel({ fullWidth = false, hideToggle = false }: TaxModeP
                 value={selectedPerson}
                 onChange={(v) => setSelectedPerson(v as PersonId)}
                 options={[
-                  { value: 'person1', label: 'Person 1' },
-                  { value: 'person2', label: 'Person 2' },
+                  { value: 'person1', label: getPersonLabel('person1') },
+                  { value: 'person2', label: getPersonLabel('person2') },
                 ]}
                 minWidth="100px"
               />
@@ -494,7 +502,7 @@ export function TaxModePanel({ fullWidth = false, hideToggle = false }: TaxModeP
               <div className="py-4 text-center text-sm text-slate-500">Loading incomes...</div>
             ) : selectedPersonIncomes.length === 0 ? (
               <div className="py-4 text-center text-sm text-slate-500">
-                No income assigned to {selectedPerson === 'person1' ? 'Person 1' : 'Person 2'}
+                No income assigned to {getPersonLabel(selectedPerson)}
               </div>
             ) : (
               selectedPersonIncomes.map(({ income, annual }) => (
diff --git a/frontend/src/components/dashboard/projections/types.ts b/frontend/src/components/dashboard/projections/types.ts
index d8156da10..b1b3f9f4a 100644
--- a/frontend/src/components/dashboard/projections/types.ts
+++ b/frontend/src/components/dashboard/projections/types.ts
@@ -5,11 +5,11 @@ export const AREA_ANIMATION_MS = 700
 export const MARKER_BUFFER_MS = 400
 
 export const chartColors = {
-  axis: '#aeb6c9',
-  grid: 'rgba(86, 91, 100, 0.6)',
-  gradientStart: '#4f81ff',
-  gradientEnd: 'rgba(59, 130, 246, 0.08)',
-  stroke: '#7db0ff',
+  axis: '#64748b',  // slate-500 - darker for better contrast on light bg
+  grid: 'rgba(100, 116, 139, 0.12)',  // subtle grid that works on both
+  gradientStart: 'rgba(74, 144, 217, 0.20)',
+  gradientEnd: 'rgba(74, 144, 217, 0.02)',
+  stroke: '#3B82F6',  // blue-500 - vibrant line color
 }
 
 export type AxisMode = 'age' | 'year_number' | 'actual_year'
diff --git a/frontend/src/components/insurance/ControlPointModal.tsx b/frontend/src/components/insurance/ControlPointModal.tsx
new file mode 100644
index 000000000..dae0ee817
--- /dev/null
+++ b/frontend/src/components/insurance/ControlPointModal.tsx
@@ -0,0 +1,431 @@
+'use client'
+
+import { useState, useEffect, useCallback } from 'react'
+import { createPortal } from 'react-dom'
+import { X, Shield, Heart, Zap } from 'lucide-react'
+import { formatCoverageAmount } from '@/lib/coverage-journey-utils'
+import type { CoverageControlPoint } from '@/types/insurance'
+
+// =============================================================================
+// Types
+// =============================================================================
+
+interface ControlPointModalProps {
+  isOpen: boolean
+  onClose: () => void
+  onSave: (data: {
+    age: number
+    lifeTpd: number | null
+    criticalIllness: number | null
+    personalAccident: number | null
+    reason?: string
+  }) => void
+  editingPoint?: CoverageControlPoint | null
+  recommendedValues?: {
+    lifeTpd: number
+    criticalIllness: number
+    personalAccident: number
+  }
+  minAge?: number
+  maxAge?: number
+  existingAges?: number[]
+}
+
+// Monet colors
+const monetColors = {
+  lavender: '#9B8BB4',
+  lavenderLight: '#C4B8D9',
+  lavenderDark: '#7A6B94',
+  coralRose: '#E8A898',
+  sage: '#7FB285',
+  sunlightGold: '#D4C5A9',
+  textPrimary: '#3D3D3D',
+  textSecondary: '#6B6B6B',
+  textMuted: '#9B9B9B',
+  bgCream: '#FAF8F5',
+  shadowSoft: 'rgba(155, 139, 180, 0.12)',
+  shadowMedium: 'rgba(155, 139, 180, 0.18)',
+}
+
+// =============================================================================
+// Component
+// =============================================================================
+
+export function ControlPointModal({
+  isOpen,
+  onClose,
+  onSave,
+  editingPoint,
+  recommendedValues = { lifeTpd: 600000, criticalIllness: 200000, personalAccident: 150000 },
+  minAge = 25,
+  maxAge = 75,
+  existingAges = [],
+}: ControlPointModalProps) {
+  // Form state
+  const [age, setAge] = useState(35)
+  const [lifeTpdEnabled, setLifeTpdEnabled] = useState(false)
+  const [lifeTpdValue, setLifeTpdValue] = useState('')
+  const [criticalIllnessEnabled, setCriticalIllnessEnabled] = useState(false)
+  const [criticalIllnessValue, setCriticalIllnessValue] = useState('')
+  const [personalAccidentEnabled, setPersonalAccidentEnabled] = useState(false)
+  const [personalAccidentValue, setPersonalAccidentValue] = useState('')
+  const [reason, setReason] = useState('')
+
+  // Age validation
+  const isEditMode = !!editingPoint
+  const ageAlreadyExists =
+    !isEditMode && existingAges.includes(age)
+
+  // Initialize form when editing
+  useEffect(() => {
+    if (editingPoint) {
+      setAge(editingPoint.age)
+      setLifeTpdEnabled(editingPoint.lifeTpd !== null)
+      setLifeTpdValue(editingPoint.lifeTpd?.toString() ?? '')
+      setCriticalIllnessEnabled(editingPoint.criticalIllness !== null)
+      setCriticalIllnessValue(editingPoint.criticalIllness?.toString() ?? '')
+      setPersonalAccidentEnabled(editingPoint.personalAccident !== null)
+      setPersonalAccidentValue(editingPoint.personalAccident?.toString() ?? '')
+      setReason(editingPoint.reason ?? '')
+    } else {
+      // Reset form for new point
+      setAge(35)
+      setLifeTpdEnabled(false)
+      setLifeTpdValue('')
+      setCriticalIllnessEnabled(false)
+      setCriticalIllnessValue('')
+      setPersonalAccidentEnabled(false)
+      setPersonalAccidentValue('')
+      setReason('')
+    }
+  }, [editingPoint, isOpen])
+
+  // Handle save
+  const handleSave = useCallback(() => {
+    if (ageAlreadyExists) return
+
+    onSave({
+      age,
+      lifeTpd: lifeTpdEnabled ? parseInt(lifeTpdValue, 10) || null : null,
+      criticalIllness: criticalIllnessEnabled
+        ? parseInt(criticalIllnessValue, 10) || null
+        : null,
+      personalAccident: personalAccidentEnabled
+        ? parseInt(personalAccidentValue, 10) || null
+        : null,
+      reason: reason.trim() || undefined,
+    })
+    onClose()
+  }, [
+    age,
+    ageAlreadyExists,
+    lifeTpdEnabled,
+    lifeTpdValue,
+    criticalIllnessEnabled,
+    criticalIllnessValue,
+    personalAccidentEnabled,
+    personalAccidentValue,
+    reason,
+    onSave,
+    onClose,
+  ])
+
+  // Handle escape key
+  useEffect(() => {
+    const handleEscape = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') onClose()
+    }
+    if (isOpen) {
+      document.addEventListener('keydown', handleEscape)
+      document.body.style.overflow = 'hidden'
+    }
+    return () => {
+      document.removeEventListener('keydown', handleEscape)
+      document.body.style.overflow = ''
+    }
+  }, [isOpen, onClose])
+
+  if (!isOpen) return null
+
+  const modalContent = (
+    <div
+      className="fixed inset-0 z-50 flex items-center justify-center p-4"
+      onClick={(e) => {
+        if (e.target === e.currentTarget) onClose()
+      }}
+    >
+      {/* Backdrop */}
+      <div className="absolute inset-0 bg-black/30 backdrop-blur-sm" />
+
+      {/* Modal */}
+      <div
+        className="relative w-full max-w-md rounded-2xl shadow-2xl overflow-hidden"
+        style={{
+          background: monetColors.bgCream,
+          boxShadow: `0 25px 50px -12px ${monetColors.shadowMedium}`,
+        }}
+      >
+        {/* Header */}
+        <div
+          className="px-5 py-4 flex items-center justify-between"
+          style={{
+            background: `linear-gradient(to bottom, rgba(255,255,255,0.9), rgba(255,255,255,0.6))`,
+            borderBottom: `1px solid rgba(155, 139, 180, 0.12)`,
+          }}
+        >
+          <h2
+            className="text-lg font-semibold"
+            style={{
+              color: monetColors.textPrimary,
+              fontFamily: "'Cormorant Garamond', Georgia, serif",
+            }}
+          >
+            {isEditMode ? 'Edit Control Point' : 'Add Control Point'}
+          </h2>
+          <button
+            type="button"
+            onClick={onClose}
+            className="p-1.5 rounded-lg transition-colors duration-200 hover:bg-white/60"
+            style={{ color: monetColors.textMuted }}
+          >
+            <X className="h-5 w-5" />
+          </button>
+        </div>
+
+        {/* Body */}
+        <div className="px-5 py-4 space-y-5">
+          {/* Age Input */}
+          <div>
+            <label
+              className="block text-sm font-medium mb-2"
+              style={{ color: monetColors.textPrimary }}
+            >
+              Age
+            </label>
+            <div className="flex items-center gap-3">
+              <input
+                type="range"
+                min={minAge}
+                max={maxAge}
+                value={age}
+                onChange={(e) => setAge(parseInt(e.target.value, 10))}
+                disabled={isEditMode}
+                className="flex-1 h-2 rounded-full appearance-none cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed"
+                style={{
+                  background: `linear-gradient(to right, ${monetColors.lavender} 0%, ${monetColors.lavender} ${((age - minAge) / (maxAge - minAge)) * 100}%, rgba(155, 139, 180, 0.2) ${((age - minAge) / (maxAge - minAge)) * 100}%, rgba(155, 139, 180, 0.2) 100%)`,
+                }}
+              />
+              <span
+                className="w-14 text-center px-2 py-1 rounded-lg text-sm font-medium"
+                style={{
+                  background: `${monetColors.lavender}15`,
+                  color: monetColors.lavenderDark,
+                }}
+              >
+                {age}
+              </span>
+            </div>
+            {ageAlreadyExists && (
+              <p className="text-xs mt-1.5" style={{ color: monetColors.coralRose }}>
+                A control point already exists at this age
+              </p>
+            )}
+          </div>
+
+          {/* Coverage Targets */}
+          <div>
+            <label
+              className="block text-sm font-medium mb-3"
+              style={{ color: monetColors.textPrimary }}
+            >
+              Coverage Targets
+            </label>
+            <div className="space-y-3">
+              {/* Life/TPD */}
+              <CoverageInput
+                icon={<Shield className="h-4 w-4" />}
+                iconColor={monetColors.sage}
+                label="Life / TPD"
+                enabled={lifeTpdEnabled}
+                onEnabledChange={setLifeTpdEnabled}
+                value={lifeTpdValue}
+                onValueChange={setLifeTpdValue}
+                recommendedValue={recommendedValues.lifeTpd}
+              />
+
+              {/* Critical Illness */}
+              <CoverageInput
+                icon={<Heart className="h-4 w-4" />}
+                iconColor="#3B82F6"
+                label="Critical Illness"
+                enabled={criticalIllnessEnabled}
+                onEnabledChange={setCriticalIllnessEnabled}
+                value={criticalIllnessValue}
+                onValueChange={setCriticalIllnessValue}
+                recommendedValue={recommendedValues.criticalIllness}
+              />
+
+              {/* Personal Accident */}
+              <CoverageInput
+                icon={<Zap className="h-4 w-4" />}
+                iconColor="#A855F7"
+                label="Personal Accident"
+                enabled={personalAccidentEnabled}
+                onEnabledChange={setPersonalAccidentEnabled}
+                value={personalAccidentValue}
+                onValueChange={setPersonalAccidentValue}
+                recommendedValue={recommendedValues.personalAccident}
+              />
+            </div>
+          </div>
+
+          {/* Reason */}
+          <div>
+            <label
+              className="block text-sm font-medium mb-2"
+              style={{ color: monetColors.textPrimary }}
+            >
+              Reason <span style={{ color: monetColors.textMuted }}>(optional)</span>
+            </label>
+            <input
+              type="text"
+              value={reason}
+              onChange={(e) => setReason(e.target.value)}
+              placeholder="e.g., Kids become independent"
+              className="w-full px-3 py-2 rounded-xl text-sm transition-all duration-200 outline-none"
+              style={{
+                background: 'rgba(255, 255, 255, 0.8)',
+                border: '1px solid rgba(155, 139, 180, 0.2)',
+                color: monetColors.textPrimary,
+              }}
+            />
+          </div>
+        </div>
+
+        {/* Footer */}
+        <div
+          className="px-5 py-4 flex items-center justify-end gap-3"
+          style={{
+            background: 'rgba(155, 139, 180, 0.05)',
+            borderTop: '1px solid rgba(155, 139, 180, 0.12)',
+          }}
+        >
+          <button
+            type="button"
+            onClick={onClose}
+            className="px-4 py-2 rounded-xl text-sm font-medium transition-all duration-200 hover:bg-white/80"
+            style={{ color: monetColors.textSecondary }}
+          >
+            Cancel
+          </button>
+          <button
+            type="button"
+            onClick={handleSave}
+            disabled={ageAlreadyExists}
+            className="px-4 py-2 rounded-xl text-sm font-medium text-white transition-all duration-200 hover:scale-105 disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:scale-100"
+            style={{
+              background: `linear-gradient(135deg, ${monetColors.lavender}, ${monetColors.lavenderDark})`,
+              boxShadow: `0 2px 8px ${monetColors.shadowSoft}`,
+            }}
+          >
+            {isEditMode ? 'Save Changes' : 'Add Control Point'}
+          </button>
+        </div>
+      </div>
+    </div>
+  )
+
+  // Use portal to render at document root
+  if (typeof document === 'undefined') return null
+  return createPortal(modalContent, document.body)
+}
+
+// =============================================================================
+// Sub-component
+// =============================================================================
+
+function CoverageInput({
+  icon,
+  iconColor,
+  label,
+  enabled,
+  onEnabledChange,
+  value,
+  onValueChange,
+  recommendedValue,
+}: {
+  icon: React.ReactNode
+  iconColor: string
+  label: string
+  enabled: boolean
+  onEnabledChange: (enabled: boolean) => void
+  value: string
+  onValueChange: (value: string) => void
+  recommendedValue: number
+}) {
+  return (
+    <div
+      className="px-3 py-2.5 rounded-xl transition-all duration-200"
+      style={{
+        background: enabled ? 'rgba(255, 255, 255, 0.9)' : 'rgba(255, 255, 255, 0.5)',
+        border: `1px solid ${enabled ? 'rgba(155, 139, 180, 0.2)' : 'rgba(155, 139, 180, 0.1)'}`,
+      }}
+    >
+      <div className="flex items-center gap-3">
+        {/* Toggle */}
+        <button
+          type="button"
+          onClick={() => onEnabledChange(!enabled)}
+          className="relative w-9 h-5 rounded-full transition-colors duration-200 shrink-0"
+          style={{
+            background: enabled ? monetColors.lavender : 'rgba(155, 139, 180, 0.2)',
+          }}
+        >
+          <div
+            className="absolute top-0.5 w-4 h-4 rounded-full bg-white shadow transition-transform duration-200"
+            style={{
+              transform: enabled ? 'translateX(18px)' : 'translateX(2px)',
+            }}
+          />
+        </button>
+
+        {/* Icon & Label */}
+        <div className="flex items-center gap-2 min-w-0">
+          <span style={{ color: iconColor }}>{icon}</span>
+          <span
+            className="text-sm font-medium"
+            style={{ color: enabled ? monetColors.textPrimary : monetColors.textMuted }}
+          >
+            {label}
+          </span>
+        </div>
+
+        {/* Value Input or Recommended Badge */}
+        <div className="ml-auto">
+          {enabled ? (
+            <div className="flex items-center gap-2">
+              <span className="text-xs" style={{ color: monetColors.textMuted }}>
+                $
+              </span>
+              <input
+                type="number"
+                value={value}
+                onChange={(e) => onValueChange(e.target.value)}
+                placeholder={Math.round(recommendedValue / 1000).toString() + 'K'}
+                className="w-24 px-2 py-1 rounded-lg text-sm text-right outline-none"
+                style={{
+                  background: 'rgba(155, 139, 180, 0.08)',
+                  color: monetColors.textPrimary,
+                }}
+              />
+            </div>
+          ) : (
+            <span className="text-xs px-2 py-0.5 rounded" style={{ color: monetColors.textMuted }}>
+              {formatCoverageAmount(recommendedValue)} (auto)
+            </span>
+          )}
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/frontend/src/components/insurance/ControlPointsPanel.tsx b/frontend/src/components/insurance/ControlPointsPanel.tsx
new file mode 100644
index 000000000..7b519d9bd
--- /dev/null
+++ b/frontend/src/components/insurance/ControlPointsPanel.tsx
@@ -0,0 +1,330 @@
+'use client'
+
+import { Plus, Pencil, Trash2, RotateCcw } from 'lucide-react'
+import { cn } from '@/lib/utils'
+import { formatCoverageAmount } from '@/lib/coverage-journey-utils'
+import type { CoverageControlPoint, InterpolationMode } from '@/types/insurance'
+
+// =============================================================================
+// Types
+// =============================================================================
+
+interface ControlPointsPanelProps {
+  controlPoints: CoverageControlPoint[]
+  interpolationMode: InterpolationMode
+  showRecommendedBaseline: boolean
+  onAddPoint: () => void
+  onEditPoint: (point: CoverageControlPoint) => void
+  onDeletePoint: (id: string) => void
+  onInterpolationModeChange: (mode: InterpolationMode) => void
+  onShowBaselineChange: (show: boolean) => void
+  onResetAll: () => void
+  className?: string
+}
+
+// Monet-inspired colors (matching insurance planner)
+const monetColors = {
+  lavender: '#9B8BB4',
+  lavenderLight: '#C4B8D9',
+  lavenderDark: '#7A6B94',
+  coralRose: '#E8A898',
+  sage: '#7FB285',
+  sunlightGold: '#D4C5A9',
+  textPrimary: '#3D3D3D',
+  textSecondary: '#6B6B6B',
+  textMuted: '#9B9B9B',
+  shadowSoft: 'rgba(155, 139, 180, 0.12)',
+}
+
+// =============================================================================
+// Component
+// =============================================================================
+
+export function ControlPointsPanel({
+  controlPoints,
+  interpolationMode,
+  showRecommendedBaseline,
+  onAddPoint,
+  onEditPoint,
+  onDeletePoint,
+  onInterpolationModeChange,
+  onShowBaselineChange,
+  onResetAll,
+  className,
+}: ControlPointsPanelProps) {
+  const sortedPoints = [...controlPoints].sort((a, b) => a.age - b.age)
+
+  return (
+    <div className={cn('space-y-4', className)}>
+      {/* Header */}
+      <div className="flex items-center justify-between">
+        <div>
+          <h3
+            className="text-sm font-semibold"
+            style={{ color: monetColors.textPrimary }}
+          >
+            Control Points
+          </h3>
+          <p className="text-xs mt-0.5" style={{ color: monetColors.textMuted }}>
+            {controlPoints.length === 0
+              ? 'Add points to customize your coverage plan'
+              : `${controlPoints.length} point${controlPoints.length !== 1 ? 's' : ''} defined`}
+          </p>
+        </div>
+        <button
+          type="button"
+          onClick={onAddPoint}
+          className="flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-xs font-medium transition-all duration-200 hover:scale-105"
+          style={{
+            background: `linear-gradient(135deg, ${monetColors.lavender}, ${monetColors.lavenderDark})`,
+            color: 'white',
+            boxShadow: `0 2px 8px ${monetColors.shadowSoft}`,
+          }}
+        >
+          <Plus className="h-3.5 w-3.5" />
+          Add Point
+        </button>
+      </div>
+
+      {/* Control Points List */}
+      {sortedPoints.length > 0 ? (
+        <div className="space-y-2">
+          {sortedPoints.map((point) => (
+            <ControlPointCard
+              key={point.id}
+              point={point}
+              onEdit={() => onEditPoint(point)}
+              onDelete={() => onDeletePoint(point.id)}
+            />
+          ))}
+        </div>
+      ) : (
+        <EmptyState onAddPoint={onAddPoint} />
+      )}
+
+      {/* Settings */}
+      {controlPoints.length > 0 && (
+        <div
+          className="pt-3 border-t space-y-3"
+          style={{ borderColor: 'rgba(155, 139, 180, 0.15)' }}
+        >
+          {/* Interpolation Mode */}
+          <div className="flex items-center justify-between">
+            <span className="text-xs" style={{ color: monetColors.textSecondary }}>
+              Interpolation
+            </span>
+            <div
+              className="flex rounded-lg p-0.5"
+              style={{
+                background: 'rgba(155, 139, 180, 0.1)',
+                border: '1px solid rgba(155, 139, 180, 0.15)',
+              }}
+            >
+              {(['linear', 'smooth', 'step'] as InterpolationMode[]).map((mode) => (
+                <button
+                  key={mode}
+                  type="button"
+                  onClick={() => onInterpolationModeChange(mode)}
+                  className="px-2.5 py-1 rounded-md text-xs font-medium transition-all duration-150"
+                  style={{
+                    background:
+                      interpolationMode === mode
+                        ? 'white'
+                        : 'transparent',
+                    color:
+                      interpolationMode === mode
+                        ? monetColors.lavenderDark
+                        : monetColors.textMuted,
+                    boxShadow:
+                      interpolationMode === mode
+                        ? `0 1px 3px ${monetColors.shadowSoft}`
+                        : 'none',
+                  }}
+                >
+                  {mode.charAt(0).toUpperCase() + mode.slice(1)}
+                </button>
+              ))}
+            </div>
+          </div>
+
+          {/* Show Baseline Toggle */}
+          <div className="flex items-center justify-between">
+            <span className="text-xs" style={{ color: monetColors.textSecondary }}>
+              Show recommended baseline
+            </span>
+            <button
+              type="button"
+              onClick={() => onShowBaselineChange(!showRecommendedBaseline)}
+              className="relative w-10 h-5 rounded-full transition-colors duration-200"
+              style={{
+                background: showRecommendedBaseline
+                  ? monetColors.sage
+                  : 'rgba(155, 139, 180, 0.2)',
+              }}
+            >
+              <div
+                className="absolute top-0.5 w-4 h-4 rounded-full bg-white shadow transition-transform duration-200"
+                style={{
+                  transform: showRecommendedBaseline
+                    ? 'translateX(22px)'
+                    : 'translateX(2px)',
+                }}
+              />
+            </button>
+          </div>
+
+          {/* Reset Button */}
+          <button
+            type="button"
+            onClick={onResetAll}
+            className="flex items-center gap-1.5 text-xs transition-colors duration-200 hover:opacity-80"
+            style={{ color: monetColors.coralRose }}
+          >
+            <RotateCcw className="h-3 w-3" />
+            Reset to recommended
+          </button>
+        </div>
+      )}
+    </div>
+  )
+}
+
+// =============================================================================
+// Sub-components
+// =============================================================================
+
+function ControlPointCard({
+  point,
+  onEdit,
+  onDelete,
+}: {
+  point: CoverageControlPoint
+  onEdit: () => void
+  onDelete: () => void
+}) {
+  const hasLifeTpd = point.lifeTpd !== null
+  const hasCriticalIllness = point.criticalIllness !== null
+  const hasPersonalAccident = point.personalAccident !== null
+
+  return (
+    <div
+      className="px-3 py-2.5 rounded-xl transition-all duration-200 hover:shadow-sm group"
+      style={{
+        background: 'rgba(255, 255, 255, 0.7)',
+        border: '1px solid rgba(155, 139, 180, 0.15)',
+      }}
+    >
+      <div className="flex items-start justify-between gap-3">
+        <div className="flex-1 min-w-0">
+          {/* Age badge */}
+          <div className="flex items-center gap-2 mb-1.5">
+            <span
+              className="px-2 py-0.5 rounded-md text-xs font-semibold"
+              style={{
+                background: `${monetColors.lavender}20`,
+                color: monetColors.lavenderDark,
+              }}
+            >
+              Age {point.age}
+            </span>
+          </div>
+
+          {/* Coverage values */}
+          <div className="flex flex-wrap gap-x-4 gap-y-1 text-xs">
+            {hasLifeTpd && (
+              <span style={{ color: monetColors.textSecondary }}>
+                <span style={{ color: monetColors.sage }}>Life/TPD:</span>{' '}
+                {formatCoverageAmount(point.lifeTpd!)}
+              </span>
+            )}
+            {hasCriticalIllness && (
+              <span style={{ color: monetColors.textSecondary }}>
+                <span style={{ color: '#3B82F6' }}>CI:</span>{' '}
+                {formatCoverageAmount(point.criticalIllness!)}
+              </span>
+            )}
+            {hasPersonalAccident && (
+              <span style={{ color: monetColors.textSecondary }}>
+                <span style={{ color: '#A855F7' }}>PA:</span>{' '}
+                {formatCoverageAmount(point.personalAccident!)}
+              </span>
+            )}
+            {!hasLifeTpd && !hasCriticalIllness && !hasPersonalAccident && (
+              <span style={{ color: monetColors.textMuted }}>
+                Using recommended values
+              </span>
+            )}
+          </div>
+
+          {/* Reason */}
+          {point.reason && (
+            <p
+              className="text-xs mt-1.5 line-clamp-1"
+              style={{ color: monetColors.textMuted }}
+            >
+              &ldquo;{point.reason}&rdquo;
+            </p>
+          )}
+        </div>
+
+        {/* Actions */}
+        <div className="flex items-center gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
+          <button
+            type="button"
+            onClick={onEdit}
+            className="p-1.5 rounded-lg transition-colors duration-150 hover:bg-white/80"
+            style={{ color: monetColors.textMuted }}
+            title="Edit"
+          >
+            <Pencil className="h-3.5 w-3.5" />
+          </button>
+          <button
+            type="button"
+            onClick={onDelete}
+            className="p-1.5 rounded-lg transition-colors duration-150 hover:bg-white/80"
+            style={{ color: monetColors.coralRose }}
+            title="Delete"
+          >
+            <Trash2 className="h-3.5 w-3.5" />
+          </button>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+function EmptyState({ onAddPoint }: { onAddPoint: () => void }) {
+  return (
+    <div
+      className="py-6 px-4 rounded-xl text-center"
+      style={{
+        background: 'rgba(155, 139, 180, 0.05)',
+        border: '1px dashed rgba(155, 139, 180, 0.2)',
+      }}
+    >
+      <div
+        className="w-10 h-10 mx-auto mb-3 rounded-full flex items-center justify-center"
+        style={{ background: `${monetColors.lavender}15` }}
+      >
+        <Plus className="h-5 w-5" style={{ color: monetColors.lavender }} />
+      </div>
+      <p className="text-sm font-medium mb-1" style={{ color: monetColors.textPrimary }}>
+        No control points yet
+      </p>
+      <p className="text-xs mb-3" style={{ color: monetColors.textMuted }}>
+        Add control points to define custom coverage<br />targets at specific ages
+      </p>
+      <button
+        type="button"
+        onClick={onAddPoint}
+        className="text-xs font-medium px-3 py-1.5 rounded-lg transition-colors duration-200"
+        style={{
+          background: `${monetColors.lavender}15`,
+          color: monetColors.lavenderDark,
+        }}
+      >
+        Add your first point
+      </button>
+    </div>
+  )
+}
diff --git a/frontend/src/components/insurance/CoverageDashboard.tsx b/frontend/src/components/insurance/CoverageDashboard.tsx
new file mode 100644
index 000000000..5bde5cc84
--- /dev/null
+++ b/frontend/src/components/insurance/CoverageDashboard.tsx
@@ -0,0 +1,635 @@
+'use client'
+
+import { useMemo } from 'react'
+import {
+  Settings,
+  Plus,
+  CheckCircle2,
+  AlertTriangle,
+  Lock,
+  Stethoscope,
+  Shield,
+  Heart,
+  Zap,
+} from 'lucide-react'
+import { cn } from '@/lib/utils'
+import { formatCurrency } from '@/lib/format'
+import { useColorScheme } from '@/stores'
+import { getInsuranceTheme, type InsuranceTheme } from '@/lib/insurance-theme'
+import {
+  useGuidelines,
+  useGuidelineTargets,
+  useGuidelinesActions,
+  useSelectedPersonId,
+} from '@/stores/coverageGuidelinesStore'
+import {
+  guidelineCoverageConfig,
+  type GuidelineCoverageType,
+  type CoverageCategoryStatus,
+  buildCoverageStatus,
+} from '@/types/insurance'
+import { usePersonFilter } from '@/contexts/PersonFilterContext'
+import { PersonSelector } from '@/components/ui/PersonSelector'
+
+// ============================================================================
+// Helper to get status color from theme
+// ============================================================================
+
+function getStatusColor(score: number, isEmpty: boolean, theme: InsuranceTheme) {
+  if (isEmpty) return theme.textMuted
+  if (score >= 80) return theme.sage
+  if (score >= 50) return theme.sunlightGold
+  return theme.coralRose
+}
+
+// ============================================================================
+// PROTECTION SCORE GAUGE
+// ============================================================================
+
+interface ProtectionScoreGaugeProps {
+  score: number
+  gapCount: number
+  isEmpty: boolean
+  compact?: boolean
+}
+
+function ProtectionScoreGauge({ score, gapCount, isEmpty, compact = false }: ProtectionScoreGaugeProps) {
+  const colorScheme = useColorScheme()
+  const monetColors = getInsuranceTheme(colorScheme)
+
+  const size = compact ? 80 : 140
+  const strokeWidth = compact ? 8 : 12
+  const radius = (size - strokeWidth) / 2
+  const circumference = 2 * Math.PI * radius
+  const progress = isEmpty ? 0 : Math.min(100, Math.max(0, score))
+  const strokeDashoffset = circumference - (progress / 100) * circumference
+
+  const scoreColor = getStatusColor(score, isEmpty, monetColors)
+  const strokeColor = getStatusColor(score, isEmpty, monetColors)
+
+  const getStatusText = () => {
+    if (isEmpty) return 'No policies yet'
+    if (score >= 80) return 'Well Protected'
+    if (score >= 50) return 'Partial Coverage'
+    return 'Needs Attention'
+  }
+
+  if (compact) {
+    return (
+      <div className="relative shrink-0" style={{ width: size, height: size }}>
+        <svg width={size} height={size} className="-rotate-90">
+          <circle
+            cx={size / 2}
+            cy={size / 2}
+            r={radius}
+            fill="none"
+            stroke={monetColors.lavenderLight}
+            strokeOpacity={0.3}
+            strokeWidth={strokeWidth}
+          />
+          <circle
+            cx={size / 2}
+            cy={size / 2}
+            r={radius}
+            fill="none"
+            strokeWidth={strokeWidth}
+            strokeLinecap="round"
+            strokeDasharray={circumference}
+            strokeDashoffset={strokeDashoffset}
+            stroke={strokeColor}
+            className="transition-all duration-1000 ease-out"
+          />
+        </svg>
+        <div className="absolute inset-0 flex flex-col items-center justify-center">
+          <span
+            className="text-xl font-bold"
+            style={{
+              color: scoreColor,
+              fontFamily: "'DM Sans', system-ui, sans-serif",
+            }}
+          >
+            {isEmpty ? '—' : `${Math.round(score)}%`}
+          </span>
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <div className="flex flex-col items-center">
+      <div className="relative" style={{ width: size, height: size }}>
+        <svg width={size} height={size} className="-rotate-90">
+          <circle
+            cx={size / 2}
+            cy={size / 2}
+            r={radius}
+            fill="none"
+            stroke={monetColors.lavenderLight}
+            strokeOpacity={0.3}
+            strokeWidth={strokeWidth}
+          />
+          <circle
+            cx={size / 2}
+            cy={size / 2}
+            r={radius}
+            fill="none"
+            strokeWidth={strokeWidth}
+            strokeLinecap="round"
+            strokeDasharray={circumference}
+            strokeDashoffset={strokeDashoffset}
+            stroke={strokeColor}
+            className="transition-all duration-1000 ease-out"
+          />
+        </svg>
+        <div className="absolute inset-0 flex flex-col items-center justify-center">
+          <span
+            className="text-3xl font-bold"
+            style={{
+              color: scoreColor,
+              fontFamily: "'DM Sans', system-ui, sans-serif",
+            }}
+          >
+            {isEmpty ? '—' : `${Math.round(score)}%`}
+          </span>
+        </div>
+      </div>
+      <div className="mt-3 text-center">
+        <p
+          className="text-sm font-medium"
+          style={{ color: scoreColor }}
+        >
+          {getStatusText()}
+        </p>
+        {!isEmpty && gapCount > 0 && (
+          <p className="text-xs mt-1" style={{ color: monetColors.textMuted }}>
+            {gapCount} {gapCount === 1 ? 'gap' : 'gaps'} to address
+          </p>
+        )}
+        {isEmpty && (
+          <p className="text-xs mt-1" style={{ color: monetColors.textMuted }}>
+            Add policies to see your score
+          </p>
+        )}
+      </div>
+    </div>
+  )
+}
+
+// ============================================================================
+// COVERAGE CATEGORY ROW
+// ============================================================================
+
+const categoryIcons: Record<GuidelineCoverageType, React.ElementType> = {
+  hospitalization: Stethoscope,
+  life_tpd: Shield,
+  critical_illness: Heart,
+  personal_accident: Zap,
+}
+
+// Helper to get category colors from theme
+function getCategoryColors(categoryType: GuidelineCoverageType, theme: InsuranceTheme) {
+  switch (categoryType) {
+    case 'hospitalization':
+      return { bg: `${theme.coralRose}20`, icon: theme.coralRose }
+    case 'life_tpd':
+      return { bg: `${theme.lavender}20`, icon: theme.lavender }
+    case 'critical_illness':
+      return { bg: `${theme.sage}20`, icon: theme.sage }
+    case 'personal_accident':
+      return { bg: `${theme.sunlightGold}30`, icon: theme.amber }
+    default:
+      return { bg: `${theme.lavender}20`, icon: theme.lavender }
+  }
+}
+
+interface CoverageCategoryRowProps {
+  category: CoverageCategoryStatus
+  isLast?: boolean
+}
+
+function CoverageCategoryRow({ category, isLast }: CoverageCategoryRowProps) {
+  const colorScheme = useColorScheme()
+  const monetColors = getInsuranceTheme(colorScheme)
+
+  const config = guidelineCoverageConfig[category.category]
+  const Icon = categoryIcons[category.category]
+  const categoryColors = getCategoryColors(category.category, monetColors)
+
+  const getStatusBadge = () => {
+    switch (category.status) {
+      case 'covered':
+        return (
+          <span
+            className="inline-flex items-center gap-1.5 text-xs font-medium px-2.5 py-1 rounded-full"
+            style={{
+              background: `${monetColors.sage}15`,
+              color: monetColors.sage,
+            }}
+          >
+            <CheckCircle2 className="h-3.5 w-3.5" />
+            Covered
+          </span>
+        )
+      case 'partial':
+        return (
+          <span
+            className="inline-flex items-center gap-1.5 text-xs font-medium px-2.5 py-1 rounded-full"
+            style={{
+              background: `${monetColors.sunlightGold}20`,
+              color: monetColors.amber,
+            }}
+          >
+            <AlertTriangle className="h-3.5 w-3.5" />
+            Gap
+          </span>
+        )
+      case 'gap':
+        return (
+          <span
+            className="inline-flex items-center gap-1.5 text-xs font-medium px-2.5 py-1 rounded-full"
+            style={{
+              background: `${monetColors.textMuted}15`,
+              color: monetColors.textMuted,
+            }}
+          >
+            <AlertTriangle className="h-3.5 w-3.5" />
+            No Policy
+          </span>
+        )
+      default:
+        return null
+    }
+  }
+
+  const getProgressColor = () => {
+    if (category.percentage >= 100) return monetColors.sage
+    if (category.percentage > 0) return monetColors.sunlightGold
+    return monetColors.textMuted
+  }
+
+  const isHospitalization = category.category === 'hospitalization'
+
+  return (
+    <div
+      className={cn(
+        'group flex items-center justify-between p-4 rounded-2xl transition-all cursor-pointer',
+        !isLast && 'mb-3'
+      )}
+      style={{
+        background: monetColors.cardBg,
+        border: `1px solid ${monetColors.cardBorder}`,
+        boxShadow: `0 2px 8px ${monetColors.shadowSoft}`,
+      }}
+    >
+      <div className="flex items-center gap-4 flex-1 min-w-0">
+        <div
+          className="w-10 h-10 rounded-xl flex items-center justify-center"
+          style={{ background: categoryColors.bg }}
+        >
+          <Icon className="h-5 w-5" style={{ color: categoryColors.icon }} />
+        </div>
+        <div className="flex-1 min-w-0">
+          <div className="flex items-center justify-between mb-2">
+            <h4
+              className="font-semibold text-sm"
+              style={{
+                color: monetColors.textPrimary,
+                fontFamily: "'DM Sans', system-ui, sans-serif",
+              }}
+            >
+              {config.label}
+            </h4>
+            {getStatusBadge()}
+          </div>
+          <p className="text-[11px] mb-2" style={{ color: monetColors.textMuted }}>
+            {isHospitalization ? (
+              <>Target: {category.label}</>
+            ) : (
+              <>
+                Target: {formatCurrency(category.target)}
+                {category.current > 0 && (
+                  <> · Current: {formatCurrency(category.current)}</>
+                )}
+              </>
+            )}
+          </p>
+          <div className="flex items-center gap-3">
+            <div
+              className="flex-1 h-1.5 rounded-full overflow-hidden"
+              style={{ background: `${monetColors.lavender}20` }}
+            >
+              <div
+                className="h-full rounded-full transition-all duration-700 ease-out"
+                style={{
+                  width: `${Math.min(100, category.percentage)}%`,
+                  background: `linear-gradient(90deg, ${getProgressColor()}, ${getProgressColor()}CC)`,
+                }}
+              />
+            </div>
+            <span
+              className="text-[10px] font-semibold tabular-nums w-10 text-right"
+              style={{ color: monetColors.textSecondary }}
+            >
+              {category.percentage}%
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+// ============================================================================
+// PREMIUM BUDGET BAR
+// ============================================================================
+
+interface PremiumBudgetBarProps {
+  budget: number
+  used: number
+  percentageUsed: number
+}
+
+function PremiumBudgetBar({ budget, used, percentageUsed }: PremiumBudgetBarProps) {
+  const colorScheme = useColorScheme()
+  const monetColors = getInsuranceTheme(colorScheme)
+
+  const remaining = Math.max(0, budget - used)
+
+  const getProgressColor = () => {
+    if (percentageUsed > 100) return monetColors.coralRose
+    if (percentageUsed > 80) return monetColors.sunlightGold
+    return monetColors.sage
+  }
+
+  return (
+    <div
+      className="rounded-2xl p-6"
+      style={{
+        background: monetColors.cardBg,
+        border: `1px solid ${monetColors.cardBorder}`,
+        boxShadow: `0 4px 16px ${monetColors.shadowSoft}`,
+      }}
+    >
+      <div className="flex items-center gap-2 mb-4">
+        <div
+          className="w-2 h-2 rounded-full"
+          style={{ background: monetColors.lavender }}
+        />
+        <span
+          className="text-[10px] font-bold uppercase tracking-tight"
+          style={{ color: monetColors.textMuted }}
+        >
+          Premium Budget
+        </span>
+      </div>
+
+      <div className="flex items-center justify-between mb-3">
+        <span className="text-sm" style={{ color: monetColors.textSecondary }}>
+          Budget: {formatCurrency(budget)}/year
+        </span>
+        <span
+          className="text-sm font-semibold tabular-nums"
+          style={{
+            color: monetColors.textPrimary,
+            fontFamily: "'DM Sans', system-ui, sans-serif",
+          }}
+        >
+          {formatCurrency(used)}/year
+        </span>
+      </div>
+
+      <div
+        className="h-2 rounded-full overflow-hidden mb-3"
+        style={{ background: `${monetColors.lavender}20` }}
+      >
+        <div
+          className="h-full rounded-full transition-all duration-700 ease-out"
+          style={{
+            width: `${Math.min(100, percentageUsed)}%`,
+            background: `linear-gradient(90deg, ${getProgressColor()}, ${getProgressColor()}CC)`,
+          }}
+        />
+      </div>
+
+      <div className="flex items-center justify-between text-xs">
+        <span style={{ color: monetColors.textMuted }}>
+          {percentageUsed}% of budget used
+        </span>
+        <span
+          className="font-semibold tabular-nums"
+          style={{ color: monetColors.sage }}
+        >
+          {formatCurrency(remaining)} remaining
+        </span>
+      </div>
+    </div>
+  )
+}
+
+// ============================================================================
+// MAIN COVERAGE DASHBOARD
+// ============================================================================
+
+interface CoverageDashboardProps {
+  onEditTargets?: () => void
+  onAddPolicy?: () => void
+}
+
+export function CoverageDashboard({ onEditTargets, onAddPolicy }: CoverageDashboardProps) {
+  const colorScheme = useColorScheme()
+  const monetColors = getInsuranceTheme(colorScheme)
+
+  const guidelines = useGuidelines()
+  const targets = useGuidelineTargets()
+  const selectedPersonId = useSelectedPersonId()
+  const { setSelectedPersonId } = useGuidelinesActions()
+  const { includedPersons } = usePersonFilter()
+
+  const selectedPerson = includedPersons.find((p) => p.id === selectedPersonId)
+
+  const coverageStatus = useMemo(() => {
+    return buildCoverageStatus(
+      guidelines,
+      selectedPersonId || '',
+      selectedPerson?.name || 'Unknown',
+      {
+        hospitalization: false,
+        life_tpd: 0,
+        critical_illness: 0,
+        personal_accident: 0,
+      },
+      {
+        monthlyPremium: 0,
+        annualPremium: 0,
+      }
+    )
+  }, [guidelines, selectedPersonId, selectedPerson?.name])
+
+  const isEmpty = coverageStatus.categories.every((c) => c.percentage === 0)
+  const showPersonTabs = includedPersons.length > 1
+
+  return (
+    <div className="p-6">
+      <div className="mx-auto max-w-4xl">
+        {/* Header */}
+        <div className="flex items-center justify-between mb-6">
+          <h2
+            className="text-lg font-semibold"
+            style={{
+              color: monetColors.textPrimary,
+              fontFamily: "'Cormorant Garamond', Georgia, serif",
+            }}
+          >
+            My Coverage
+          </h2>
+          <div className="flex items-center gap-2">
+            {onEditTargets && (
+              <button
+                type="button"
+                onClick={onEditTargets}
+                className="flex items-center gap-2 px-3 py-1.5 rounded-xl text-sm font-medium transition-all"
+                style={{
+                  color: monetColors.textSecondary,
+                  background: 'transparent',
+                }}
+              >
+                <Settings className="h-4 w-4" />
+                Edit Targets
+              </button>
+            )}
+          </div>
+        </div>
+
+        {/* Person Tabs + Score Row */}
+        <div className="flex flex-wrap items-center justify-between gap-4 mb-6">
+          <div>
+            {showPersonTabs ? (
+              <PersonSelector
+                value={selectedPersonId}
+                onChange={(id) => id && setSelectedPersonId(id)}
+                variant={colorScheme === 'monet' ? 'monet' : 'dark'}
+                showCreate={false}
+                required
+                className="w-48"
+              />
+            ) : (
+              <span
+                className="text-sm font-medium"
+                style={{
+                  color: monetColors.textPrimary,
+                  fontFamily: "'DM Sans', system-ui, sans-serif",
+                }}
+              >
+                {selectedPerson?.name || 'No person selected'}
+              </span>
+            )}
+          </div>
+          <div className="flex items-center gap-4">
+            <ProtectionScoreGauge
+              score={coverageStatus.protectionScore}
+              gapCount={coverageStatus.gapCount}
+              isEmpty={isEmpty}
+              compact
+            />
+            <div className="text-right">
+              <p className="text-xs font-medium" style={{ color: monetColors.textMuted }}>
+                {isEmpty
+                  ? 'No policies yet'
+                  : coverageStatus.gapCount > 0
+                    ? `${coverageStatus.gapCount} ${coverageStatus.gapCount > 1 ? 'gaps' : 'gap'} to address`
+                    : 'Fully covered'}
+              </p>
+            </div>
+          </div>
+        </div>
+
+        {/* Stress Test Banner */}
+        <div
+          className="rounded-2xl px-5 py-4 mb-6 flex items-center justify-between"
+          style={{
+            background: `${monetColors.lavender}08`,
+            border: `1px solid ${monetColors.cardBorder}`,
+          }}
+        >
+          <div className="flex items-center gap-3">
+            <Lock className="h-5 w-5" style={{ color: monetColors.textMuted }} />
+            <div>
+              <span
+                className="text-sm font-medium"
+                style={{ color: monetColors.textPrimary }}
+              >
+                Stress Test
+              </span>
+              <span
+                className="ml-2 text-[10px] font-semibold uppercase tracking-wider px-2 py-0.5 rounded-full"
+                style={{
+                  background: `${monetColors.lavender}15`,
+                  color: monetColors.textMuted,
+                }}
+              >
+                Coming Soon
+              </span>
+            </div>
+          </div>
+          <p className="text-xs hidden sm:block" style={{ color: monetColors.textMuted }}>
+            Test your coverage against different scenarios
+          </p>
+        </div>
+
+        {/* Coverage by Category */}
+        <div
+          className="rounded-2xl p-6 mb-6"
+          style={{
+            background: monetColors.cardBg,
+            border: `1px solid ${monetColors.cardBorder}`,
+            boxShadow: `0 4px 20px ${monetColors.shadowSoft}`,
+          }}
+        >
+          <div className="flex items-center gap-2 mb-4">
+            <div
+              className="w-2 h-2 rounded-full"
+              style={{ background: monetColors.lavender }}
+            />
+            <span
+              className="text-[10px] font-bold uppercase tracking-tight"
+              style={{ color: monetColors.textMuted }}
+            >
+              Coverage by Category
+            </span>
+          </div>
+          {coverageStatus.categories.map((category, index) => (
+            <CoverageCategoryRow
+              key={category.category}
+              category={category}
+              isLast={index === coverageStatus.categories.length - 1}
+            />
+          ))}
+        </div>
+
+        {/* Premium Budget */}
+        <PremiumBudgetBar
+          budget={targets.maxAnnualPremium}
+          used={coverageStatus.totalAnnualPremium}
+          percentageUsed={coverageStatus.premiumPercentageUsed}
+        />
+
+        {/* Add Policy CTA */}
+        <div className="mt-6">
+          <button
+            type="button"
+            onClick={onAddPolicy}
+            className="w-full flex items-center justify-center gap-2 rounded-2xl border-2 border-dashed px-6 py-4 text-sm font-medium transition-all"
+            style={{
+              borderColor: monetColors.cardBorder,
+              color: monetColors.textSecondary,
+              background: 'transparent',
+            }}
+          >
+            <Plus className="h-5 w-5" />
+            Add Your First Policy
+          </button>
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/frontend/src/components/insurance/CoverageJourney.tsx b/frontend/src/components/insurance/CoverageJourney.tsx
new file mode 100644
index 000000000..1efa6d2ac
--- /dev/null
+++ b/frontend/src/components/insurance/CoverageJourney.tsx
@@ -0,0 +1,293 @@
+'use client'
+
+import { useMemo, useState } from 'react'
+import { Shield, TrendingDown, AlertCircle, CheckCircle2 } from 'lucide-react'
+import { cn } from '@/lib/utils'
+import { numericStyles } from '@/lib/utils'
+import { usePersonsQuery } from '@/hooks/queries/usePersonsQuery'
+import { useQuestionnaireAutoPopulate } from '@/hooks/useQuestionnaireAutoPopulate'
+import { usePersonFilter } from '@/contexts/PersonFilterContext'
+import {
+  detectLifeStage,
+  generateCoverageProjection,
+  calculateMilestones,
+  calculateAge,
+  formatCoverageAmount,
+  type PersonCoverageContext,
+} from '@/lib/coverage-journey-utils'
+import { LifeStagePills, LifeStageIndicator } from './LifeStagePills'
+import { CoverageNeedsCurve } from './CoverageNeedsCurve'
+import { MilestoneAlerts } from './MilestoneAlerts'
+
+// =============================================================================
+// Types
+// =============================================================================
+
+interface CoverageJourneyProps {
+  className?: string
+}
+
+interface CoverageComparisonRowProps {
+  category: string
+  icon: React.ReactNode
+  recommended: number
+  current: number
+  isAmount?: boolean
+}
+
+// =============================================================================
+// Sub-Components
+// =============================================================================
+
+function CoverageComparisonRow({
+  category,
+  icon,
+  recommended,
+  current,
+  isAmount = true,
+}: CoverageComparisonRowProps) {
+  const gap = recommended - current
+  const isExcess = gap < 0
+  const isOnTarget = gap === 0
+
+  const getStatus = () => {
+    if (isOnTarget) return { label: 'On Target', color: 'text-emerald-400', icon: CheckCircle2 }
+    if (isExcess) return { label: `+${formatCoverageAmount(Math.abs(gap))}`, color: 'text-emerald-400', icon: CheckCircle2 }
+    return { label: `Gap: ${formatCoverageAmount(gap)}`, color: 'text-amber-400', icon: AlertCircle }
+  }
+
+  const status = getStatus()
+  const StatusIcon = status.icon
+
+  return (
+    <div className="flex items-center gap-4 py-3 border-b border-white/[0.04] last:border-0">
+      {/* Category */}
+      <div className="flex items-center gap-2 flex-1 min-w-0">
+        <span className="text-slate-400">{icon}</span>
+        <span className="text-sm text-slate-300">{category}</span>
+      </div>
+
+      {/* Recommended */}
+      <div className="w-28 text-right">
+        <span className={numericStyles.muted}>
+          {isAmount ? formatCoverageAmount(recommended) : recommended}
+        </span>
+      </div>
+
+      {/* Current */}
+      <div className="w-28 text-right">
+        <span className={numericStyles.base}>
+          {isAmount ? formatCoverageAmount(current) : current}
+        </span>
+      </div>
+
+      {/* Status */}
+      <div className="w-32 flex items-center justify-end gap-1.5">
+        <StatusIcon className={cn('h-3.5 w-3.5', status.color)} />
+        <span className={cn('text-xs font-medium', status.color)}>
+          {status.label}
+        </span>
+      </div>
+    </div>
+  )
+}
+
+// =============================================================================
+// Main Component
+// =============================================================================
+
+export function CoverageJourney({ className }: CoverageJourneyProps) {
+  const { includedPersons } = usePersonFilter()
+  const { data: persons, isLoading: personsLoading } = usePersonsQuery()
+
+  // Get first included person
+  const selectedPersonId = includedPersons[0]?.id ?? null
+  const selectedPerson = persons?.find(p => p.id === selectedPersonId)
+
+  // Auto-populated financial data
+  const autoPopulated = useQuestionnaireAutoPopulate(selectedPersonId)
+
+  // Selected age for exploration (defaults to current age)
+  const currentAge = selectedPerson ? calculateAge(selectedPerson.dateOfBirth) : 35
+  const [selectedAge, setSelectedAge] = useState(currentAge)
+
+  // Build context for calculations
+  const coverageContext: PersonCoverageContext = useMemo(() => {
+    // Get dependents from persons data
+    const dependents = (persons ?? [])
+      .filter(p => p.id !== selectedPersonId && p.isIncluded)
+      .map(p => ({
+        name: p.name,
+        age: calculateAge(p.dateOfBirth),
+      }))
+      .filter(d => d.age < 22) // Only count dependents under 22
+
+    return {
+      age: currentAge,
+      annualIncome: autoPopulated.computed.primaryPersonIncome || 60000, // Default $60k
+      dependents,
+      mortgageBalance: autoPopulated.computed.totalMortgage,
+      mortgageEndYear: autoPopulated.computed.totalMortgage > 0
+        ? new Date().getFullYear() + 25 // Assume 25-year mortgage
+        : null,
+      retirementAge: 65,
+    }
+  }, [currentAge, autoPopulated, persons, selectedPersonId])
+
+  // Calculate life stage
+  const lifeStage = useMemo(() => {
+    return detectLifeStage(currentAge, coverageContext.dependents)
+  }, [currentAge, coverageContext.dependents])
+
+  // Generate projections
+  const projections = useMemo(() => {
+    return generateCoverageProjection(coverageContext, 25, 75)
+  }, [coverageContext])
+
+  // Calculate milestones
+  const milestones = useMemo(() => {
+    return calculateMilestones(coverageContext)
+  }, [coverageContext])
+
+  // Get recommended coverage at selected age
+  const selectedProjection = useMemo(() => {
+    return projections.find(p => p.age === selectedAge) ?? projections.find(p => p.age === currentAge)
+  }, [projections, selectedAge, currentAge])
+
+  // Current year
+  const currentYear = new Date().getFullYear()
+
+  // Loading state
+  if (personsLoading || autoPopulated.isLoading) {
+    return (
+      <div className={cn('animate-pulse space-y-4', className)}>
+        <div className="h-12 bg-white/[0.03] rounded-xl" />
+        <div className="h-[300px] bg-white/[0.03] rounded-xl" />
+        <div className="h-32 bg-white/[0.03] rounded-xl" />
+      </div>
+    )
+  }
+
+  // No person selected
+  if (!selectedPerson) {
+    return (
+      <div className={cn('text-center py-12', className)}>
+        <Shield className="h-12 w-12 mx-auto mb-4 text-slate-600" />
+        <p className="text-sm text-slate-400">Select a person to view their coverage journey</p>
+      </div>
+    )
+  }
+
+  const isCurrentAge = selectedAge === currentAge
+  const yearsFromNow = selectedAge - currentAge
+
+  return (
+    <div className={cn('space-y-6', className)}>
+      {/* Header */}
+      <div className="flex items-center justify-between">
+        <div>
+          <h2 className="text-lg font-semibold text-white">Coverage Journey</h2>
+          <p className="text-sm text-slate-400">
+            How your insurance needs change over time
+          </p>
+        </div>
+        <LifeStageIndicator stage={lifeStage} />
+      </div>
+
+      {/* Life Stage Pills */}
+      <div className="px-4 py-4 rounded-xl bg-white/[0.02] border border-white/[0.06]">
+        <div className="text-xs font-medium text-slate-500 uppercase tracking-wide mb-3">
+          Your Life Stage
+        </div>
+        <LifeStagePills currentStage={lifeStage} />
+      </div>
+
+      {/* Coverage Needs Curve */}
+      <div className="px-4 py-4 rounded-xl bg-white/[0.02] border border-white/[0.06]">
+        <div className="text-xs font-medium text-slate-500 uppercase tracking-wide mb-3">
+          Coverage Needs Over Time
+        </div>
+        <CoverageNeedsCurve
+          projections={projections}
+          milestones={milestones}
+          currentAge={currentAge}
+          selectedAge={selectedAge}
+          onAgeSelect={setSelectedAge}
+        />
+      </div>
+
+      {/* Coverage Comparison at Selected Age */}
+      <div className="px-4 py-4 rounded-xl bg-white/[0.02] border border-white/[0.06]">
+        <div className="flex items-center justify-between mb-4">
+          <div>
+            <div className="text-xs font-medium text-slate-500 uppercase tracking-wide">
+              At Age {selectedAge}
+            </div>
+            <div className="text-sm text-slate-400">
+              {isCurrentAge ? (
+                <span className="text-emerald-400">Your current age</span>
+              ) : yearsFromNow > 0 ? (
+                <span>{yearsFromNow} years from now</span>
+              ) : (
+                <span>{Math.abs(yearsFromNow)} years ago</span>
+              )}
+            </div>
+          </div>
+          {!isCurrentAge && (
+            <button
+              type="button"
+              onClick={() => setSelectedAge(currentAge)}
+              className="text-xs text-slate-400 hover:text-slate-300 transition-colors"
+            >
+              ← Back to current
+            </button>
+          )}
+        </div>
+
+        {selectedProjection && (
+          <div className="space-y-1">
+            {/* Header row */}
+            <div className="flex items-center gap-4 pb-2 border-b border-white/[0.08]">
+              <div className="flex-1 text-xs font-medium text-slate-500">Category</div>
+              <div className="w-28 text-right text-xs font-medium text-slate-500">Recommended</div>
+              <div className="w-28 text-right text-xs font-medium text-slate-500">Current</div>
+              <div className="w-32 text-right text-xs font-medium text-slate-500">Status</div>
+            </div>
+
+            <CoverageComparisonRow
+              category="Life/TPD"
+              icon={<Shield className="h-4 w-4" />}
+              recommended={selectedProjection.recommendedLifeTpd}
+              current={0} // Will be from policies in future
+            />
+            <CoverageComparisonRow
+              category="Critical Illness"
+              icon={<TrendingDown className="h-4 w-4" />}
+              recommended={selectedProjection.recommendedCriticalIllness}
+              current={0}
+            />
+            <CoverageComparisonRow
+              category="Personal Accident"
+              icon={<AlertCircle className="h-4 w-4" />}
+              recommended={selectedProjection.recommendedPersonalAccident}
+              current={0}
+            />
+          </div>
+        )}
+      </div>
+
+      {/* Milestones */}
+      {milestones.length > 0 && (
+        <div className="px-4 py-4 rounded-xl bg-white/[0.02] border border-white/[0.06]">
+          <div className="text-xs font-medium text-slate-500 uppercase tracking-wide mb-3">
+            Upcoming Milestones
+          </div>
+          <MilestoneAlerts
+            milestones={milestones}
+            currentYear={currentYear}
+          />
+        </div>
+      )}
+    </div>
+  )
+}
diff --git a/frontend/src/components/insurance/CoverageLayers.tsx b/frontend/src/components/insurance/CoverageLayers.tsx
new file mode 100644
index 000000000..ab45aff24
--- /dev/null
+++ b/frontend/src/components/insurance/CoverageLayers.tsx
@@ -0,0 +1,323 @@
+'use client'
+
+import { cn } from '@/lib/utils'
+
+// ============================================================================
+// MONET-INSPIRED COLORS FOR COVERAGE LAYERS
+// Soft, painterly palette reflecting impressionist aesthetics
+// ============================================================================
+
+const monetLayerColors = {
+  // Coral Rose - for MediShield Life (government foundation)
+  coral: '#E8A898',
+  coralLight: '#F5D4CC',
+
+  // Lavender Blue - for ISP Coverage (private enhancement)
+  lavender: '#9B8BB4',
+  lavenderLight: '#C4B8D9',
+
+  // Sage - for Rider (additional protection)
+  sage: '#7FB285',
+  sageLight: '#B5D4B8',
+
+  // Sunlight Gold - for Out-of-pocket (your contribution)
+  gold: '#D4C5A9',
+  goldLight: '#EDE6D8',
+
+  // Text
+  textPrimary: '#3D3D3D',
+  textSecondary: '#6B6B6B',
+  textMuted: '#9B9B9B',
+
+  // Card
+  cardBorder: 'rgba(155, 139, 180, 0.15)',
+}
+
+interface CoverageLayerOption {
+  id: 'mshl_only' | 'mshl_isp' | 'mshl_isp_rider'
+  title: string
+  description: string
+  layers: {
+    label: string
+    sublabel?: string
+    color: 'coral' | 'lavender' | 'sage' | 'gold'
+    heightClass: string
+  }[]
+}
+
+const coverageOptions: CoverageLayerOption[] = [
+  {
+    id: 'mshl_only',
+    title: 'MediShield Life Only',
+    description: 'Basic coverage for B2/C wards',
+    layers: [
+      {
+        label: 'Out-of-pocket payment',
+        color: 'gold',
+        heightClass: 'h-32',
+      },
+      {
+        label: 'Paid by MediShield Life (MSHL)',
+        color: 'coral',
+        heightClass: 'h-20',
+      },
+    ],
+  },
+  {
+    id: 'mshl_isp',
+    title: 'MediShield Life + ISP',
+    description: 'Higher ward class coverage',
+    layers: [
+      {
+        label: 'Out-of-pocket payment',
+        sublabel: 'Deductible + Co-payment at 10%',
+        color: 'gold',
+        heightClass: 'h-20',
+      },
+      {
+        label: 'Integrated Shield Plan (IP) pays',
+        color: 'lavender',
+        heightClass: 'h-16',
+      },
+      {
+        label: 'Paid by MediShield Life (MSHL)',
+        color: 'coral',
+        heightClass: 'h-16',
+      },
+    ],
+  },
+  {
+    id: 'mshl_isp_rider',
+    title: 'MediShield Life + ISP + Rider',
+    description: 'Maximum coverage',
+    layers: [
+      {
+        label: 'Out-of-pocket payment',
+        sublabel: 'Smaller deductible + Co-payment 5-10%',
+        color: 'gold',
+        heightClass: 'h-12',
+      },
+      {
+        label: 'Integrated Shield Plan Rider pays',
+        color: 'sage',
+        heightClass: 'h-12',
+      },
+      {
+        label: 'Integrated Shield Plan (IP) pays',
+        color: 'lavender',
+        heightClass: 'h-14',
+      },
+      {
+        label: 'Paid by MediShield Life (MSHL)',
+        color: 'coral',
+        heightClass: 'h-14',
+      },
+    ],
+  },
+]
+
+// Monet-inspired color styles for each layer type
+const getLayerStyle = (color: string): React.CSSProperties => {
+  switch (color) {
+    case 'coral':
+      return {
+        background: `linear-gradient(135deg, ${monetLayerColors.coral}, ${monetLayerColors.coralLight})`,
+        color: '#fff',
+      }
+    case 'lavender':
+      return {
+        background: `linear-gradient(135deg, ${monetLayerColors.lavender}, ${monetLayerColors.lavenderLight})`,
+        color: '#fff',
+      }
+    case 'sage':
+      return {
+        background: `linear-gradient(135deg, ${monetLayerColors.sage}, ${monetLayerColors.sageLight})`,
+        color: '#fff',
+      }
+    case 'gold':
+      return {
+        background: `linear-gradient(135deg, ${monetLayerColors.gold}, ${monetLayerColors.goldLight})`,
+        color: monetLayerColors.textPrimary,
+      }
+    default:
+      return {}
+  }
+}
+
+interface CoverageLayersProps {
+  selectedOption?: 'mshl_only' | 'mshl_isp' | 'mshl_isp_rider'
+  onSelect?: (option: 'mshl_only' | 'mshl_isp' | 'mshl_isp_rider') => void
+  compact?: boolean
+}
+
+export function CoverageLayers({ selectedOption, onSelect, compact = false }: CoverageLayersProps) {
+  return (
+    <div className={cn('w-full', compact ? 'space-y-4' : 'space-y-6')}>
+      {/* Title - Impressionist style */}
+      <div className="text-center">
+        <h3
+          className={cn('font-semibold', compact ? 'text-sm' : 'text-base')}
+          style={{
+            color: monetLayerColors.textPrimary,
+            fontFamily: "'Cormorant Garamond', Georgia, serif",
+          }}
+        >
+          Layers of Protection
+        </h3>
+        <p
+          className="text-xs mt-1"
+          style={{ color: monetLayerColors.textMuted }}
+        >
+          Source: Health Insured SG
+        </p>
+      </div>
+
+      {/* Coverage options grid */}
+      <div className={cn('grid gap-4', compact ? 'grid-cols-3' : 'grid-cols-1 sm:grid-cols-3')}>
+        {coverageOptions.map((option) => {
+          const isSelected = selectedOption === option.id
+
+          return (
+            <button
+              key={option.id}
+              type="button"
+              onClick={() => onSelect?.(option.id)}
+              className={cn(
+                'rounded-2xl p-4 text-left transition-all duration-300',
+                onSelect && 'cursor-pointer hover:scale-[1.02]',
+                !onSelect && 'cursor-default'
+              )}
+              style={{
+                background: isSelected
+                  ? `linear-gradient(135deg, ${monetLayerColors.sageLight}40, rgba(255,255,255,0.8))`
+                  : 'rgba(255, 255, 255, 0.6)',
+                border: `1px solid ${isSelected ? monetLayerColors.sage : monetLayerColors.cardBorder}`,
+                boxShadow: isSelected
+                  ? `0 8px 24px rgba(127, 178, 133, 0.2)`
+                  : `0 4px 12px rgba(155, 139, 180, 0.08)`,
+              }}
+            >
+              {/* Option title */}
+              <div className="mb-3">
+                <p
+                  className={cn('font-medium', compact ? 'text-xs' : 'text-sm')}
+                  style={{
+                    color: monetLayerColors.textPrimary,
+                    fontFamily: "'DM Sans', system-ui, sans-serif",
+                  }}
+                >
+                  {option.title}
+                </p>
+                {!compact && (
+                  <p
+                    className="text-xs mt-0.5"
+                    style={{ color: monetLayerColors.textSecondary }}
+                  >
+                    {option.description}
+                  </p>
+                )}
+              </div>
+
+              {/* Stacked layers visualization - soft, organic */}
+              <div className="flex flex-col-reverse rounded-xl overflow-hidden shadow-sm">
+                {option.layers.map((layer, idx) => (
+                  <div
+                    key={idx}
+                    className={cn(
+                      'flex flex-col items-center justify-center text-center px-2',
+                      compact ? 'py-2.5' : layer.heightClass
+                    )}
+                    style={getLayerStyle(layer.color)}
+                  >
+                    <span
+                      className={cn('font-medium leading-tight', compact ? 'text-[9px]' : 'text-xs')}
+                      style={{ textShadow: layer.color !== 'gold' ? '0 1px 2px rgba(0,0,0,0.1)' : 'none' }}
+                    >
+                      {layer.label}
+                    </span>
+                    {layer.sublabel && !compact && (
+                      <span className="text-[10px] opacity-80 mt-0.5">
+                        {layer.sublabel}
+                      </span>
+                    )}
+                  </div>
+                ))}
+              </div>
+            </button>
+          )
+        })}
+      </div>
+
+      {/* Legend - Impressionist style */}
+      <div className={cn('flex flex-wrap justify-center', compact ? 'gap-3' : 'gap-5')}>
+        <div className="flex items-center gap-2">
+          <div
+            className="h-3 w-3 rounded-full"
+            style={{ background: `linear-gradient(135deg, ${monetLayerColors.coral}, ${monetLayerColors.coralLight})` }}
+          />
+          <span
+            className={compact ? 'text-[10px]' : 'text-xs'}
+            style={{ color: monetLayerColors.textSecondary }}
+          >
+            MediShield Life
+          </span>
+        </div>
+        <div className="flex items-center gap-2">
+          <div
+            className="h-3 w-3 rounded-full"
+            style={{ background: `linear-gradient(135deg, ${monetLayerColors.lavender}, ${monetLayerColors.lavenderLight})` }}
+          />
+          <span
+            className={compact ? 'text-[10px]' : 'text-xs'}
+            style={{ color: monetLayerColors.textSecondary }}
+          >
+            ISP Coverage
+          </span>
+        </div>
+        <div className="flex items-center gap-2">
+          <div
+            className="h-3 w-3 rounded-full"
+            style={{ background: `linear-gradient(135deg, ${monetLayerColors.sage}, ${monetLayerColors.sageLight})` }}
+          />
+          <span
+            className={compact ? 'text-[10px]' : 'text-xs'}
+            style={{ color: monetLayerColors.textSecondary }}
+          >
+            Rider Coverage
+          </span>
+        </div>
+        <div className="flex items-center gap-2">
+          <div
+            className="h-3 w-3 rounded-full"
+            style={{ background: `linear-gradient(135deg, ${monetLayerColors.gold}, ${monetLayerColors.goldLight})` }}
+          />
+          <span
+            className={compact ? 'text-[10px]' : 'text-xs'}
+            style={{ color: monetLayerColors.textSecondary }}
+          >
+            You Pay
+          </span>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+/**
+ * Inline version for embedding in text/questionnaires
+ * Styled to match the Monet impressionist theme
+ */
+export function CoverageLayersInline() {
+  return (
+    <div
+      className="rounded-2xl p-5 backdrop-blur-sm"
+      style={{
+        background: 'rgba(255, 255, 255, 0.6)',
+        border: `1px solid ${monetLayerColors.cardBorder}`,
+        boxShadow: '0 4px 20px rgba(155, 139, 180, 0.1)',
+      }}
+    >
+      <CoverageLayers compact />
+    </div>
+  )
+}
diff --git a/frontend/src/components/insurance/CoverageNeedsCurve.tsx b/frontend/src/components/insurance/CoverageNeedsCurve.tsx
new file mode 100644
index 000000000..aa60a2497
--- /dev/null
+++ b/frontend/src/components/insurance/CoverageNeedsCurve.tsx
@@ -0,0 +1,339 @@
+'use client'
+
+import { useMemo, useRef } from 'react'
+import {
+  Chart as ChartJS,
+  CategoryScale,
+  LinearScale,
+  PointElement,
+  LineElement,
+  Filler,
+  Tooltip,
+  type ChartOptions,
+  type ChartData,
+} from 'chart.js'
+import { Line } from 'react-chartjs-2'
+import { Shield, HeartPulse, Zap } from 'lucide-react'
+import { cn } from '@/lib/utils'
+import {
+  type CoverageProjectionYear,
+  type CoverageMilestone,
+  formatCoverageAmount,
+} from '@/lib/coverage-journey-utils'
+
+// Register Chart.js components
+ChartJS.register(
+  CategoryScale,
+  LinearScale,
+  PointElement,
+  LineElement,
+  Filler,
+  Tooltip
+)
+
+// =============================================================================
+// Types
+// =============================================================================
+
+interface CoverageNeedsCurveProps {
+  projections: CoverageProjectionYear[]
+  milestones: CoverageMilestone[]
+  currentAge: number
+  selectedAge: number
+  onAgeSelect: (age: number) => void
+  className?: string
+}
+
+// =============================================================================
+// Chart Colors
+// =============================================================================
+
+const CHART_COLORS = {
+  lifeTpd: {
+    line: 'rgb(16, 185, 129)', // emerald-500
+    fill: 'rgba(16, 185, 129, 0.15)',
+  },
+  criticalIllness: {
+    line: 'rgb(59, 130, 246)', // blue-500
+    fill: 'rgba(59, 130, 246, 0.1)',
+  },
+  personalAccident: {
+    line: 'rgb(168, 85, 247)', // purple-500
+    fill: 'rgba(168, 85, 247, 0.08)',
+  },
+  grid: 'rgba(255, 255, 255, 0.04)',
+  axis: 'rgb(100, 116, 139)', // slate-500
+  currentAge: 'rgba(16, 185, 129, 0.8)',
+  selectedAge: 'rgba(255, 255, 255, 0.3)',
+}
+
+// =============================================================================
+// Component
+// =============================================================================
+
+export function CoverageNeedsCurve({
+  projections,
+  milestones,
+  currentAge,
+  selectedAge,
+  onAgeSelect,
+  className,
+}: CoverageNeedsCurveProps) {
+  const chartRef = useRef<ChartJS<'line'> | null>(null)
+
+  // Find current age index
+  const currentAgeIndex = useMemo(() => {
+    return projections.findIndex(p => p.age === currentAge)
+  }, [projections, currentAge])
+
+  // Chart data
+  const chartData: ChartData<'line'> = useMemo(() => {
+    const labels = projections.map(p => p.age.toString())
+
+    return {
+      labels,
+      datasets: [
+        {
+          label: 'Life/TPD',
+          data: projections.map(p => p.recommendedLifeTpd),
+          borderColor: CHART_COLORS.lifeTpd.line,
+          backgroundColor: CHART_COLORS.lifeTpd.fill,
+          fill: true,
+          tension: 0.4,
+          pointRadius: 0,
+          pointHoverRadius: 6,
+          pointHoverBackgroundColor: CHART_COLORS.lifeTpd.line,
+          pointHoverBorderColor: '#fff',
+          pointHoverBorderWidth: 2,
+          borderWidth: 2,
+        },
+        {
+          label: 'Critical Illness',
+          data: projections.map(p => p.recommendedCriticalIllness),
+          borderColor: CHART_COLORS.criticalIllness.line,
+          backgroundColor: CHART_COLORS.criticalIllness.fill,
+          fill: true,
+          tension: 0.4,
+          pointRadius: 0,
+          pointHoverRadius: 5,
+          pointHoverBackgroundColor: CHART_COLORS.criticalIllness.line,
+          pointHoverBorderColor: '#fff',
+          pointHoverBorderWidth: 2,
+          borderWidth: 1.5,
+        },
+        {
+          label: 'Personal Accident',
+          data: projections.map(p => p.recommendedPersonalAccident),
+          borderColor: CHART_COLORS.personalAccident.line,
+          backgroundColor: CHART_COLORS.personalAccident.fill,
+          fill: true,
+          tension: 0.4,
+          pointRadius: 0,
+          pointHoverRadius: 4,
+          pointHoverBackgroundColor: CHART_COLORS.personalAccident.line,
+          pointHoverBorderColor: '#fff',
+          pointHoverBorderWidth: 2,
+          borderWidth: 1,
+        },
+      ],
+    }
+  }, [projections])
+
+  // Chart options
+  const chartOptions: ChartOptions<'line'> = useMemo(() => {
+    return {
+      responsive: true,
+      maintainAspectRatio: false,
+      interaction: {
+        mode: 'index',
+        intersect: false,
+      },
+      onClick: (_event, elements) => {
+        if (elements.length > 0) {
+          const index = elements[0].index
+          const age = projections[index]?.age
+          if (age !== undefined) {
+            onAgeSelect(age)
+          }
+        }
+      },
+      plugins: {
+        legend: {
+          display: false,
+        },
+        tooltip: {
+          enabled: true,
+          backgroundColor: 'rgba(15, 23, 40, 0.95)',
+          titleColor: '#fff',
+          bodyColor: 'rgb(148, 163, 184)',
+          borderColor: 'rgba(255, 255, 255, 0.1)',
+          borderWidth: 1,
+          padding: 12,
+          cornerRadius: 8,
+          displayColors: true,
+          callbacks: {
+            title: (items) => {
+              if (items.length > 0) {
+                const age = projections[items[0].dataIndex]?.age
+                const isCurrent = age === currentAge
+                return `Age ${age}${isCurrent ? ' (Current)' : ''}`
+              }
+              return ''
+            },
+            label: (context) => {
+              const value = context.raw as number
+              return ` ${context.dataset.label}: ${formatCoverageAmount(value)}`
+            },
+          },
+        },
+      },
+      scales: {
+        x: {
+          grid: {
+            color: CHART_COLORS.grid,
+            drawTicks: false,
+          },
+          ticks: {
+            color: CHART_COLORS.axis,
+            font: {
+              size: 11,
+            },
+            maxRotation: 0,
+            callback: function(_value, index) {
+              const age = projections[index]?.age
+              // Show every 5 years
+              if (age !== undefined && age % 5 === 0) {
+                return age
+              }
+              return ''
+            },
+          },
+          border: {
+            display: false,
+          },
+        },
+        y: {
+          grid: {
+            color: CHART_COLORS.grid,
+            drawTicks: false,
+          },
+          ticks: {
+            color: CHART_COLORS.axis,
+            font: {
+              size: 11,
+            },
+            callback: (value) => formatCoverageAmount(value as number),
+            maxTicksLimit: 6,
+          },
+          border: {
+            display: false,
+          },
+          beginAtZero: true,
+        },
+      },
+    }
+  }, [projections, currentAge, onAgeSelect])
+
+  // Calculate slider position
+  const minAge = projections[0]?.age ?? 25
+  const maxAge = projections[projections.length - 1]?.age ?? 75
+  const sliderPercent = ((selectedAge - minAge) / (maxAge - minAge)) * 100
+
+  return (
+    <div className={cn('space-y-4', className)}>
+      {/* Chart */}
+      <div className="relative h-[280px] rounded-xl bg-black/20 p-3">
+        <Line ref={chartRef} data={chartData} options={chartOptions} />
+
+        {/* Current age indicator */}
+        {currentAgeIndex >= 0 && (
+          <div
+            className="absolute top-3 bottom-3 w-px bg-emerald-500/50 pointer-events-none"
+            style={{
+              left: `calc(${(currentAgeIndex / (projections.length - 1)) * 100}% + 12px)`,
+            }}
+          >
+            <div className="absolute -top-1 left-1/2 -translate-x-1/2 px-1.5 py-0.5 rounded bg-emerald-500/20 text-[10px] font-medium text-emerald-400 whitespace-nowrap">
+              You
+            </div>
+          </div>
+        )}
+      </div>
+
+      {/* Legend */}
+      <div className="flex items-center justify-center gap-6">
+        <div className="flex items-center gap-2">
+          <Shield className="h-3.5 w-3.5 text-emerald-500" />
+          <div className="w-3 h-0.5 rounded-full bg-emerald-500" />
+          <span className="text-xs text-slate-400">Life/TPD</span>
+        </div>
+        <div className="flex items-center gap-2">
+          <HeartPulse className="h-3.5 w-3.5 text-blue-500" />
+          <div className="w-3 h-0.5 rounded-full bg-blue-500" />
+          <span className="text-xs text-slate-400">Critical Illness</span>
+        </div>
+        <div className="flex items-center gap-2">
+          <Zap className="h-3.5 w-3.5 text-purple-500" />
+          <div className="w-3 h-0.5 rounded-full bg-purple-500" />
+          <span className="text-xs text-slate-400">Personal Accident</span>
+        </div>
+      </div>
+
+      {/* Age Slider */}
+      <div className="space-y-2">
+        <div className="flex items-center justify-between text-xs text-slate-500">
+          <span>Explore coverage at different ages</span>
+          <span className="font-medium text-slate-300">Age {selectedAge}</span>
+        </div>
+
+        <div className="relative px-2">
+          {/* Track */}
+          <div className="relative h-2 rounded-full bg-white/[0.06] overflow-hidden">
+            {/* Filled portion */}
+            <div
+              className="absolute inset-y-0 left-0 bg-gradient-to-r from-emerald-500/30 to-emerald-500/10"
+              style={{ width: `${sliderPercent}%` }}
+            />
+
+            {/* Milestone markers */}
+            {milestones.map((milestone, idx) => {
+              const milestonePercent = ((milestone.age - minAge) / (maxAge - minAge)) * 100
+              if (milestonePercent < 0 || milestonePercent > 100) return null
+
+              return (
+                <div
+                  key={idx}
+                  className="absolute top-1/2 -translate-y-1/2 w-1.5 h-1.5 rounded-full bg-amber-500/70"
+                  style={{ left: `${milestonePercent}%` }}
+                  title={milestone.event}
+                />
+              )
+            })}
+          </div>
+
+          {/* Slider Input */}
+          <input
+            type="range"
+            min={minAge}
+            max={maxAge}
+            value={selectedAge}
+            onChange={(e) => onAgeSelect(parseInt(e.target.value, 10))}
+            className="absolute inset-0 w-full h-full opacity-0 cursor-pointer"
+          />
+
+          {/* Custom Thumb */}
+          <div
+            className="absolute top-1/2 -translate-y-1/2 -translate-x-1/2 w-4 h-4 rounded-full bg-white border-2 border-emerald-500 shadow-lg pointer-events-none transition-transform hover:scale-110"
+            style={{ left: `${sliderPercent}%` }}
+          />
+
+          {/* Age Labels */}
+          <div className="flex justify-between mt-2 text-[10px] text-slate-600">
+            <span>{minAge}</span>
+            <span>{maxAge}</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/frontend/src/components/insurance/InsuranceTabs.tsx b/frontend/src/components/insurance/InsuranceTabs.tsx
index 5afe76268..7b9fb581f 100644
--- a/frontend/src/components/insurance/InsuranceTabs.tsx
+++ b/frontend/src/components/insurance/InsuranceTabs.tsx
@@ -1,30 +1,60 @@
 'use client'
 
 import { cn } from '@/lib/utils'
-import {
-  LayoutDashboard,
-  FileText,
-} from 'lucide-react'
+import { FileText, Shield, TrendingUp } from 'lucide-react'
+import { useColorScheme } from '@/stores'
 
-export type InsuranceTabId =
-  | 'overview'
-  | 'policies'
+export type InsuranceTabId = 'overview' | 'journey' | 'policies'
 
 interface InsuranceTabsProps {
   activeTab: InsuranceTabId
   onTabChange: (tab: InsuranceTabId) => void
 }
 
+// Monet color palette
+const monetTabColors = {
+  lavender: '#9B8BB4',
+  lavenderLight: '#C4B8D9',
+  sage: '#7FB285',
+  textPrimary: '#3D3D3D',
+  textSecondary: '#6B6B6B',
+  textMuted: '#9B9B9B',
+}
+
+// Dark mode color palette
+const darkTabColors = {
+  primary: '#a78bfa',
+  primaryLight: '#c4b5fd',
+  success: '#34d399',
+  textPrimary: '#f1f5f9',
+  textSecondary: '#94a3b8',
+  textMuted: '#64748b',
+}
+
 const tabs: { id: InsuranceTabId; label: string; icon: React.ElementType }[] = [
-  { id: 'overview', label: 'Overview', icon: LayoutDashboard },
+  { id: 'overview', label: 'My Coverage', icon: Shield },
+  { id: 'journey', label: 'Journey', icon: TrendingUp },
   { id: 'policies', label: 'Policies', icon: FileText },
 ]
 
 export function InsuranceTabs({ activeTab, onTabChange }: InsuranceTabsProps) {
+  const colorScheme = useColorScheme()
+  const isMonet = colorScheme === 'monet'
+  const colors = isMonet ? monetTabColors : darkTabColors
+
   return (
-    <div className="border-b border-white/[0.06] bg-white/[0.01]">
-      <div className="mx-auto max-w-7xl px-6">
-        <nav className="flex gap-1" aria-label="Insurance planner tabs">
+    <div
+      className="relative z-10 transition-colors duration-300"
+      style={{
+        background: isMonet ? 'rgba(255, 255, 255, 0.4)' : 'rgba(17, 17, 17, 0.8)',
+        borderBottom: isMonet
+          ? '1px solid rgba(155, 139, 180, 0.1)'
+          : '1px solid rgba(255, 255, 255, 0.06)',
+        backdropFilter: 'blur(8px)',
+      }}
+    >
+      <div className="max-w-7xl px-8">
+        <nav className="flex gap-2 py-2" aria-label="Insurance planner tabs">
           {tabs.map((tab) => {
             const Icon = tab.icon
             const isActive = activeTab === tab.id
@@ -34,25 +64,59 @@ export function InsuranceTabs({ activeTab, onTabChange }: InsuranceTabsProps) {
                 key={tab.id}
                 onClick={() => onTabChange(tab.id)}
                 className={cn(
-                  'group relative flex items-center gap-2 px-4 py-3 text-sm font-medium transition-all duration-200',
-                  isActive
-                    ? 'text-white'
-                    : 'text-slate-400 hover:text-slate-200'
+                  'group relative flex items-center gap-2.5 px-5 py-2.5 rounded-xl text-sm font-medium transition-all duration-300',
+                  isActive && 'transform scale-[1.02]'
                 )}
+                style={{
+                  background: isActive
+                    ? isMonet
+                      ? 'rgba(255, 255, 255, 0.85)'
+                      : 'rgba(255, 255, 255, 0.08)'
+                    : 'transparent',
+                  color: isActive ? colors.textPrimary : colors.textMuted,
+                  boxShadow: isActive
+                    ? isMonet
+                      ? '0 4px 20px rgba(155, 139, 180, 0.15), 0 2px 8px rgba(155, 139, 180, 0.1)'
+                      : '0 4px 20px rgba(0, 0, 0, 0.3)'
+                    : 'none',
+                }}
                 aria-selected={isActive}
                 role="tab"
               >
                 <Icon
-                  className={cn(
-                    'h-4 w-4 transition-colors',
-                    isActive ? 'text-emerald-400' : 'text-slate-500 group-hover:text-slate-400'
-                  )}
+                  className="h-4 w-4 transition-all duration-300"
+                  style={{
+                    color: isActive
+                      ? isMonet
+                        ? monetTabColors.lavender
+                        : darkTabColors.primary
+                      : colors.textMuted,
+                  }}
                 />
-                <span>{tab.label}</span>
+                <span style={{ fontFamily: isMonet ? "'DM Sans', system-ui, sans-serif" : 'inherit' }}>
+                  {tab.label}
+                </span>
 
-                {/* Active indicator */}
+                {/* Subtle active indicator */}
                 {isActive && (
-                  <span className="absolute bottom-0 left-0 right-0 h-0.5 bg-gradient-to-r from-emerald-500 to-emerald-400" />
+                  <span
+                    className="absolute bottom-1 left-1/2 -translate-x-1/2 h-0.5 w-8 rounded-full"
+                    style={{
+                      background: isMonet
+                        ? `linear-gradient(90deg, ${monetTabColors.lavenderLight}, ${monetTabColors.lavender})`
+                        : `linear-gradient(90deg, ${darkTabColors.primaryLight}, ${darkTabColors.primary})`,
+                    }}
+                  />
+                )}
+
+                {/* Hover effect for inactive tabs */}
+                {!isActive && (
+                  <span
+                    className="absolute inset-0 rounded-xl opacity-0 group-hover:opacity-100 transition-opacity duration-300 -z-10"
+                    style={{
+                      background: isMonet ? 'rgba(255, 255, 255, 0.5)' : 'rgba(255, 255, 255, 0.05)',
+                    }}
+                  />
                 )}
               </button>
             )
diff --git a/frontend/src/components/insurance/LifeStagePills.tsx b/frontend/src/components/insurance/LifeStagePills.tsx
new file mode 100644
index 000000000..ac0a919d3
--- /dev/null
+++ b/frontend/src/components/insurance/LifeStagePills.tsx
@@ -0,0 +1,121 @@
+'use client'
+
+import { cn } from '@/lib/utils'
+import {
+  type LifeStage,
+  LIFE_STAGE_INFO,
+  getLifeStageEmoji,
+} from '@/lib/coverage-journey-utils'
+
+// =============================================================================
+// Types
+// =============================================================================
+
+interface LifeStagePillsProps {
+  currentStage: LifeStage
+  onStageClick?: (stage: LifeStage) => void
+  showDescriptions?: boolean
+  className?: string
+}
+
+// =============================================================================
+// Constants
+// =============================================================================
+
+const STAGE_ORDER: LifeStage[] = [
+  'young_professional',
+  'new_parent',
+  'growing_family',
+  'empty_nester',
+  'retired',
+]
+
+// =============================================================================
+// Component
+// =============================================================================
+
+export function LifeStagePills({
+  currentStage,
+  onStageClick,
+  showDescriptions = true,
+  className,
+}: LifeStagePillsProps) {
+  const currentInfo = LIFE_STAGE_INFO[currentStage]
+
+  return (
+    <div className={cn('space-y-4', className)}>
+      {/* Stage Pills */}
+      <div className="flex flex-wrap items-center gap-2">
+        {STAGE_ORDER.map((stage) => {
+          const info = LIFE_STAGE_INFO[stage]
+          const isCurrent = stage === currentStage
+          const emoji = getLifeStageEmoji(stage)
+
+          return (
+            <button
+              key={stage}
+              type="button"
+              onClick={() => onStageClick?.(stage)}
+              disabled={!onStageClick}
+              className={cn(
+                'flex items-center gap-2 px-3 py-2 rounded-xl text-sm font-medium transition-all duration-200',
+                isCurrent
+                  ? 'bg-emerald-500/15 text-emerald-400 border border-emerald-500/30'
+                  : 'bg-white/[0.03] text-slate-400 border border-white/[0.06] hover:bg-white/[0.05] hover:text-slate-300',
+                !onStageClick && 'cursor-default'
+              )}
+            >
+              <span className="text-base">{emoji}</span>
+              <span>{info.label}</span>
+              {isCurrent && (
+                <div className="w-1.5 h-1.5 rounded-full bg-emerald-400" />
+              )}
+            </button>
+          )
+        })}
+      </div>
+
+      {/* Current Stage Description */}
+      {showDescriptions && (
+        <div className="px-4 py-3 rounded-xl bg-white/[0.02] border border-white/[0.06]">
+          <div className="flex items-center gap-2 mb-1">
+            <span className="text-lg">{getLifeStageEmoji(currentStage)}</span>
+            <span className="text-sm font-medium text-white">
+              You&apos;re in: {currentInfo.label}
+            </span>
+          </div>
+          <p className="text-sm text-slate-400">
+            {currentInfo.description}
+          </p>
+        </div>
+      )}
+    </div>
+  )
+}
+
+// =============================================================================
+// Compact Variant (for header use)
+// =============================================================================
+
+interface LifeStageIndicatorProps {
+  stage: LifeStage
+  className?: string
+}
+
+export function LifeStageIndicator({ stage, className }: LifeStageIndicatorProps) {
+  const info = LIFE_STAGE_INFO[stage]
+  const emoji = getLifeStageEmoji(stage)
+
+  return (
+    <div
+      className={cn(
+        'inline-flex items-center gap-1.5 px-2.5 py-1 rounded-lg text-xs font-medium',
+        'bg-emerald-500/10 text-emerald-400 border border-emerald-500/20',
+        className
+      )}
+    >
+      <span>{emoji}</span>
+      <span>{info.label}</span>
+    </div>
+  )
+}
diff --git a/frontend/src/components/insurance/MilestoneAlerts.tsx b/frontend/src/components/insurance/MilestoneAlerts.tsx
new file mode 100644
index 000000000..4c1c53909
--- /dev/null
+++ b/frontend/src/components/insurance/MilestoneAlerts.tsx
@@ -0,0 +1,230 @@
+'use client'
+
+import { Calendar, GraduationCap, Home, Sunset } from 'lucide-react'
+import { cn } from '@/lib/utils'
+import type { CoverageMilestone } from '@/lib/coverage-journey-utils'
+
+// =============================================================================
+// Types
+// =============================================================================
+
+interface MilestoneAlertsProps {
+  milestones: CoverageMilestone[]
+  currentYear: number
+  className?: string
+}
+
+// =============================================================================
+// Helpers
+// =============================================================================
+
+function getMilestoneIcon(category: CoverageMilestone['category']) {
+  switch (category) {
+    case 'dependent':
+      return GraduationCap
+    case 'debt':
+      return Home
+    case 'retirement':
+      return Sunset
+    default:
+      return Calendar
+  }
+}
+
+function getMilestoneColor(category: CoverageMilestone['category']) {
+  switch (category) {
+    case 'dependent':
+      return {
+        bg: 'bg-blue-500/10',
+        border: 'border-blue-500/20',
+        icon: 'text-blue-400',
+        text: 'text-blue-400',
+      }
+    case 'debt':
+      return {
+        bg: 'bg-emerald-500/10',
+        border: 'border-emerald-500/20',
+        icon: 'text-emerald-400',
+        text: 'text-emerald-400',
+      }
+    case 'retirement':
+      return {
+        bg: 'bg-amber-500/10',
+        border: 'border-amber-500/20',
+        icon: 'text-amber-400',
+        text: 'text-amber-400',
+      }
+    default:
+      return {
+        bg: 'bg-slate-500/10',
+        border: 'border-slate-500/20',
+        icon: 'text-slate-400',
+        text: 'text-slate-400',
+      }
+  }
+}
+
+function formatYearsFromNow(targetYear: number, currentYear: number): string {
+  const yearsAway = targetYear - currentYear
+  if (yearsAway <= 0) return 'Now'
+  if (yearsAway === 1) return 'In 1 year'
+  return `In ${yearsAway} years`
+}
+
+// =============================================================================
+// Component
+// =============================================================================
+
+export function MilestoneAlerts({
+  milestones,
+  currentYear,
+  className,
+}: MilestoneAlertsProps) {
+  if (milestones.length === 0) {
+    return (
+      <div className={cn('px-4 py-6 text-center', className)}>
+        <p className="text-sm text-slate-500">
+          No upcoming milestones detected
+        </p>
+      </div>
+    )
+  }
+
+  return (
+    <div className={cn('space-y-3', className)}>
+      {/* Timeline visual */}
+      <div className="relative flex items-center justify-between px-4 py-3">
+        {/* Timeline line */}
+        <div className="absolute left-4 right-4 top-1/2 h-px bg-white/[0.08]" />
+
+        {/* Timeline dots */}
+        <div className="relative flex items-center justify-between w-full">
+          {/* Now marker */}
+          <div className="flex flex-col items-center gap-1">
+            <div className="w-3 h-3 rounded-full bg-emerald-500 ring-4 ring-emerald-500/20" />
+            <span className="text-[10px] font-medium text-emerald-400">NOW</span>
+          </div>
+
+          {/* Milestone markers */}
+          {milestones.slice(0, 3).map((milestone, idx) => {
+            const colors = getMilestoneColor(milestone.category)
+            const yearsAway = milestone.year - currentYear
+            const position = Math.min(90, (yearsAway / 30) * 100 + 10)
+
+            return (
+              <div
+                key={idx}
+                className="flex flex-col items-center gap-1"
+                style={{ position: 'absolute', left: `${position}%`, transform: 'translateX(-50%)' }}
+              >
+                <div className={cn('w-2.5 h-2.5 rounded-full', colors.bg, 'ring-2', colors.border)} />
+                <span className="text-[9px] text-slate-500 whitespace-nowrap max-w-[60px] text-center truncate">
+                  {milestone.year}
+                </span>
+              </div>
+            )
+          })}
+        </div>
+      </div>
+
+      {/* Milestone Cards */}
+      <div className="space-y-2">
+        {milestones.map((milestone, idx) => {
+          const Icon = getMilestoneIcon(milestone.category)
+          const colors = getMilestoneColor(milestone.category)
+
+          return (
+            <div
+              key={idx}
+              className={cn(
+                'px-4 py-3 rounded-xl border transition-all duration-200',
+                colors.bg,
+                colors.border,
+                'hover:bg-white/[0.03]'
+              )}
+            >
+              <div className="flex items-start gap-3">
+                {/* Icon */}
+                <div className={cn('p-2 rounded-lg', colors.bg)}>
+                  <Icon className={cn('h-4 w-4', colors.icon)} />
+                </div>
+
+                {/* Content */}
+                <div className="flex-1 min-w-0">
+                  <div className="flex items-center gap-2 mb-1">
+                    <span className="text-xs font-medium text-slate-500">
+                      {milestone.year}
+                    </span>
+                    <span className="text-[10px] text-slate-600">•</span>
+                    <span className="text-[10px] text-slate-600">
+                      {formatYearsFromNow(milestone.year, currentYear)}
+                    </span>
+                  </div>
+
+                  <h4 className="text-sm font-medium text-white mb-0.5">
+                    {milestone.event}
+                  </h4>
+
+                  <p className="text-xs text-slate-400 mb-2">
+                    {milestone.description}
+                  </p>
+
+                  {/* Impact */}
+                  <div className={cn('inline-flex items-center gap-1.5 px-2 py-1 rounded-lg text-xs', colors.bg)}>
+                    <span className={colors.text}>{milestone.impact}</span>
+                  </div>
+                </div>
+              </div>
+            </div>
+          )
+        })}
+      </div>
+    </div>
+  )
+}
+
+// =============================================================================
+// Compact Variant (single line summary)
+// =============================================================================
+
+interface MilestoneSummaryProps {
+  milestones: CoverageMilestone[]
+  currentYear: number
+  className?: string
+}
+
+export function MilestoneSummary({
+  milestones,
+  currentYear,
+  className,
+}: MilestoneSummaryProps) {
+  const nextMilestone = milestones[0]
+
+  if (!nextMilestone) {
+    return null
+  }
+
+  const colors = getMilestoneColor(nextMilestone.category)
+  const Icon = getMilestoneIcon(nextMilestone.category)
+
+  return (
+    <div
+      className={cn(
+        'inline-flex items-center gap-2 px-3 py-1.5 rounded-lg text-xs',
+        colors.bg,
+        'border',
+        colors.border,
+        className
+      )}
+    >
+      <Icon className={cn('h-3.5 w-3.5', colors.icon)} />
+      <span className="text-slate-400">
+        Next: <span className="text-slate-300">{nextMilestone.event}</span>
+      </span>
+      <span className="text-slate-600">•</span>
+      <span className={colors.text}>
+        {formatYearsFromNow(nextMilestone.year, currentYear)}
+      </span>
+    </div>
+  )
+}
diff --git a/frontend/src/components/insurance/modals/AddPolicyModal.tsx b/frontend/src/components/insurance/modals/AddPolicyModal.tsx
index a41620924..f0c2117fc 100644
--- a/frontend/src/components/insurance/modals/AddPolicyModal.tsx
+++ b/frontend/src/components/insurance/modals/AddPolicyModal.tsx
@@ -4,10 +4,11 @@ import { useState } from 'react'
 import { X, Shield, Stethoscope, HeartHandshake, Heart, Accessibility, Check } from 'lucide-react'
 import { cn } from '@/lib/utils'
 import { Modal } from '@/components/ui/Modal'
-import { CustomDropdown } from '@/components/modals/ScenarioEventModal/components/CustomDropdown'
+import { useColorScheme } from '@/stores'
+import { getInsuranceTheme } from '@/lib/insurance-theme'
 
 /**
- * AddPolicyModal - Modal for adding insurance policies
+ * AddPolicyModal - Modal for adding insurance policies (Monet-styled)
  *
  * Flow:
  * 1. Select policy category (Life, Health, CI, LTC, PA)
@@ -16,12 +17,25 @@ import { CustomDropdown } from '@/components/modals/ScenarioEventModal/component
  * 4. Toggle coverage items
  */
 
+// =============================================================================
+// Category Accent Colors (static - used for category icons)
+// =============================================================================
+
+const accentColors = {
+  lavender: '#9B8BB4',
+  sage: '#7FB285',
+  coralRose: '#E8A898',
+  sunlightGold: '#D4C5A9',
+  blue: '#7BA3C9',
+}
+
 type PolicyCategory = 'life' | 'health' | 'critical_illness' | 'long_term_care' | 'personal_accident'
 
 interface PolicyCategoryOption {
   id: PolicyCategory
   label: string
   icon: typeof Shield
+  color: string
   types: PolicyTypeOption[]
 }
 
@@ -42,6 +56,7 @@ const policyCategories: PolicyCategoryOption[] = [
     id: 'life',
     label: 'Life Protection',
     icon: Shield,
+    color: accentColors.lavender,
     types: [
       {
         value: 'term_life',
@@ -75,6 +90,7 @@ const policyCategories: PolicyCategoryOption[] = [
     id: 'health',
     label: 'Health Products',
     icon: Stethoscope,
+    color: accentColors.sage,
     types: [
       {
         value: 'isp',
@@ -100,6 +116,7 @@ const policyCategories: PolicyCategoryOption[] = [
     id: 'critical_illness',
     label: 'Critical Illness',
     icon: HeartHandshake,
+    color: accentColors.coralRose,
     types: [
       {
         value: 'early_ci',
@@ -130,6 +147,7 @@ const policyCategories: PolicyCategoryOption[] = [
     id: 'long_term_care',
     label: 'Long-Term Care',
     icon: Heart,
+    color: accentColors.sunlightGold,
     types: [
       {
         value: 'careshield',
@@ -152,6 +170,7 @@ const policyCategories: PolicyCategoryOption[] = [
     id: 'personal_accident',
     label: 'Personal Accident',
     icon: Accessibility,
+    color: '#6B8BB4', // Soft blue
     types: [
       {
         value: 'pa',
@@ -198,6 +217,10 @@ interface PolicyFormData {
 }
 
 export function AddPolicyModal({ isOpen, onClose, onSave }: AddPolicyModalProps) {
+  const colorScheme = useColorScheme()
+  const monetColors = getInsuranceTheme(colorScheme)
+  const isMonet = colorScheme === 'monet'
+
   const [selectedCategory, setSelectedCategory] = useState<PolicyCategory | null>(null)
   const [selectedType, setSelectedType] = useState<string>('')
   const [provider, setProvider] = useState<string>('aia')
@@ -284,28 +307,70 @@ export function AddPolicyModal({ isOpen, onClose, onSave }: AddPolicyModalProps)
     return parseInt(num).toLocaleString()
   }
 
+  // Input style
+  const inputStyle: React.CSSProperties = {
+    background: monetColors.inputBg,
+    border: `1px solid ${monetColors.cardBorder}`,
+    color: monetColors.textPrimary,
+  }
+
+  const inputClassName = "w-full px-3 py-2.5 rounded-xl text-sm focus:outline-none transition-all"
+
   return (
     <Modal
       isOpen={isOpen}
       onClose={handleClose}
-      overlayClassName="bg-black/60"
-      className="w-full max-w-lg mx-4 rounded-2xl border border-white/[0.08] bg-[#0a0a0a]"
+      overlayClassName="bg-black/40 backdrop-blur-sm"
+      className="w-full max-w-lg mx-4 rounded-2xl overflow-hidden"
     >
+      <div
+        style={{
+          background: isMonet
+            ? `linear-gradient(135deg, #FAF8F5 0%, #F0F4F8 50%, #FFFEF9 100%)`
+            : 'rgba(17, 17, 17, 0.95)',
+          border: `1px solid ${monetColors.cardBorder}`,
+          borderRadius: '1rem',
+          boxShadow: `0 25px 50px -12px ${monetColors.shadowMedium}`,
+        }}
+      >
       {/* Header */}
-      <div className="flex items-center justify-between p-5 border-b border-white/[0.06]">
+      <div
+        className="flex items-center justify-between p-5"
+        style={{ borderBottom: `1px solid ${monetColors.cardBorder}` }}
+      >
         <div className="flex items-center gap-3">
-          <div className="flex items-center justify-center h-10 w-10 rounded-xl bg-purple-500/20">
-            <Shield className="h-5 w-5 text-purple-400" />
+          <div
+            className="flex items-center justify-center h-11 w-11 rounded-xl"
+            style={{
+              background: `linear-gradient(135deg, ${monetColors.lavender}, ${monetColors.lavenderDark})`,
+              boxShadow: `0 4px 12px ${monetColors.shadowSoft}`,
+            }}
+          >
+            <Shield className="h-5 w-5 text-white" />
           </div>
           <div>
-            <h2 className="text-lg font-semibold text-white">Add Policy</h2>
-            <p className="text-xs text-slate-500">Add an insurance policy to your portfolio</p>
+            <h2
+              className="text-lg font-semibold"
+              style={{
+                color: monetColors.textPrimary,
+                fontFamily: "'Cormorant Garamond', Georgia, serif",
+              }}
+            >
+              Add Policy
+            </h2>
+            <p className="text-xs" style={{ color: monetColors.textMuted }}>
+              Add an insurance policy to your portfolio
+            </p>
           </div>
         </div>
         <button
           type="button"
           onClick={handleClose}
-          className="flex items-center justify-center h-8 w-8 rounded-lg text-slate-400 hover:text-white hover:bg-white/[0.05] transition-colors"
+          className="flex items-center justify-center h-9 w-9 rounded-xl transition-all hover:scale-105"
+          style={{
+            background: monetColors.surfaceBg,
+            color: monetColors.textSecondary,
+          }}
         >
           <X className="h-4 w-4" />
         </button>
@@ -315,7 +380,12 @@ export function AddPolicyModal({ isOpen, onClose, onSave }: AddPolicyModalProps)
       <div className="p-5 space-y-5 max-h-[70vh] overflow-y-auto">
         {/* Step 1: Category Selection */}
         <div>
-          <label className="block text-sm font-medium text-slate-300 mb-3">Policy Category</label>
+          <label
+            className="block text-sm font-medium mb-3"
+            style={{ color: monetColors.textSecondary }}
+          >
+            Policy Category
+          </label>
           <div className="grid grid-cols-5 gap-2">
             {policyCategories.map((category) => {
               const Icon = category.icon
@@ -325,15 +395,25 @@ export function AddPolicyModal({ isOpen, onClose, onSave }: AddPolicyModalProps)
                   key={category.id}
                   type="button"
                   onClick={() => handleCategorySelect(category.id)}
-                  className={cn(
-                    'flex flex-col items-center justify-center gap-2 p-3 rounded-xl border transition-all',
-                    isSelected
-                      ? 'bg-purple-500/15 border-purple-500/40 text-purple-400'
-                      : 'bg-white/[0.02] border-white/[0.06] text-slate-400 hover:bg-white/[0.04] hover:border-white/[0.1]'
-                  )}
+                  className="flex flex-col items-center justify-center gap-2 p-3 rounded-xl transition-all duration-200 hover:scale-105"
+                  style={{
+                    background: isSelected
+                      ? `linear-gradient(135deg, ${category.color}20, ${category.color}10)`
+                      : monetColors.surfaceBg,
+                    border: `1px solid ${isSelected ? `${category.color}60` : monetColors.cardBorder}`,
+                    boxShadow: isSelected ? `0 4px 12px ${category.color}20` : 'none',
+                  }}
                 >
-                  <Icon className="h-7 w-7" />
-                  <span className="text-xs font-medium text-center leading-tight">{category.label}</span>
+                  <Icon
+                    className="h-6 w-6"
+                    style={{ color: isSelected ? category.color : monetColors.textMuted }}
+                  />
+                  <span
+                    className="text-[10px] font-medium text-center leading-tight"
+                    style={{ color: isSelected ? monetColors.textPrimary : monetColors.textMuted }}
+                  >
+                    {category.label}
+                  </span>
                 </button>
               )
             })}
@@ -343,14 +423,35 @@ export function AddPolicyModal({ isOpen, onClose, onSave }: AddPolicyModalProps)
         {/* Step 2: Policy Type (only show if more than one option) */}
         {selectedCategoryData && selectedCategoryData.types.length > 1 && (
           <div>
-            <label className="block text-sm font-medium text-slate-300 mb-2">Policy Type</label>
-            <CustomDropdown
-              value={selectedType}
-              onChange={handleTypeSelect}
-              options={selectedCategoryData.types.map((t) => ({ value: t.value, label: t.label }))}
-              minWidth="100%"
-              className="w-full"
-            />
+            <label
+              className="block text-sm font-medium mb-2"
+              style={{ color: monetColors.textSecondary }}
+            >
+              Policy Type
+            </label>
+            <div className="flex flex-wrap gap-2">
+              {selectedCategoryData.types.map((type) => {
+                const isSelected = selectedType === type.value
+                return (
+                  <button
+                    key={type.value}
+                    type="button"
+                    onClick={() => handleTypeSelect(type.value)}
+                    className="px-4 py-2 rounded-xl text-sm font-medium transition-all duration-200"
+                    style={{
+                      background: isSelected
+                        ? `linear-gradient(135deg, ${selectedCategoryData.color}, ${selectedCategoryData.color}CC)`
+                        : monetColors.cardBg,
+                      color: isSelected ? 'white' : monetColors.textSecondary,
+                      border: `1px solid ${isSelected ? 'transparent' : monetColors.cardBorder}`,
+                      boxShadow: isSelected ? `0 2px 8px ${selectedCategoryData.color}30` : 'none',
+                    }}
+                  >
+                    {type.label}
+                  </button>
+                )
+              })}
+            </div>
           </div>
         )}
 
@@ -360,23 +461,44 @@ export function AddPolicyModal({ isOpen, onClose, onSave }: AddPolicyModalProps)
             {/* Provider & Name */}
             <div className="grid grid-cols-2 gap-4">
               <div>
-                <label className="block text-sm font-medium text-slate-300 mb-2">Provider</label>
-                <CustomDropdown
+                <label
+                  className="block text-sm font-medium mb-2"
+                  style={{ color: monetColors.textSecondary }}
+                >
+                  Provider
+                </label>
+                <select
                   value={provider}
-                  onChange={setProvider}
-                  options={providerOptions}
-                  minWidth="100%"
-                  className="w-full"
-                />
+                  onChange={(e) => setProvider(e.target.value)}
+                  className={inputClassName}
+                  style={{
+                    ...inputStyle,
+                    cursor: 'pointer',
+                  }}
+                >
+                  {providerOptions.map((opt) => (
+                    <option key={opt.value} value={opt.value}>
+                      {opt.label}
+                    </option>
+                  ))}
+                </select>
               </div>
               <div>
-                <label className="block text-sm font-medium text-slate-300 mb-2">Policy Name</label>
+                <label
+                  className="block text-sm font-medium mb-2"
+                  style={{ color: monetColors.textSecondary }}
+                >
+                  Policy Name
+                </label>
                 <input
                   type="text"
                   value={policyName}
                   onChange={(e) => setPolicyName(e.target.value)}
                   placeholder="e.g., AIA Term Plus"
-                  className="w-full px-3 py-2 rounded-lg border border-white/[0.08] bg-white/[0.03] text-white text-sm placeholder:text-slate-600 focus:outline-none focus:border-purple-500/40"
+                  className={inputClassName}
+                  style={{
+                    ...inputStyle,
+                  }}
                 />
               </div>
             </div>
@@ -384,28 +506,50 @@ export function AddPolicyModal({ isOpen, onClose, onSave }: AddPolicyModalProps)
             {/* Sum Assured & Premium */}
             <div className="grid grid-cols-2 gap-4">
               <div>
-                <label className="block text-sm font-medium text-slate-300 mb-2">Sum Assured</label>
+                <label
+                  className="block text-sm font-medium mb-2"
+                  style={{ color: monetColors.textSecondary }}
+                >
+                  Sum Assured
+                </label>
                 <div className="relative">
-                  <span className="absolute left-3 top-1/2 -translate-y-1/2 text-slate-500 text-sm">$</span>
+                  <span
+                    className="absolute left-3 top-1/2 -translate-y-1/2 text-sm"
+                    style={{ color: monetColors.textMuted }}
+                  >
+                    $
+                  </span>
                   <input
                     type="text"
                     value={formatCurrency(sumAssured)}
                     onChange={(e) => setSumAssured(e.target.value.replace(/[^\d]/g, ''))}
                     placeholder="100,000"
-                    className="w-full pl-7 pr-3 py-2 rounded-lg border border-white/[0.08] bg-white/[0.03] text-white text-sm placeholder:text-slate-600 focus:outline-none focus:border-purple-500/40"
+                    className={cn(inputClassName, 'pl-7')}
+                    style={inputStyle}
                   />
                 </div>
               </div>
               <div>
-                <label className="block text-sm font-medium text-slate-300 mb-2">Monthly Premium</label>
+                <label
+                  className="block text-sm font-medium mb-2"
+                  style={{ color: monetColors.textSecondary }}
+                >
+                  Monthly Premium
+                </label>
                 <div className="relative">
-                  <span className="absolute left-3 top-1/2 -translate-y-1/2 text-slate-500 text-sm">$</span>
+                  <span
+                    className="absolute left-3 top-1/2 -translate-y-1/2 text-sm"
+                    style={{ color: monetColors.textMuted }}
+                  >
+                    $
+                  </span>
                   <input
                     type="text"
                     value={formatCurrency(monthlyPremium)}
                     onChange={(e) => setMonthlyPremium(e.target.value.replace(/[^\d]/g, ''))}
                     placeholder="150"
-                    className="w-full pl-7 pr-3 py-2 rounded-lg border border-white/[0.08] bg-white/[0.03] text-white text-sm placeholder:text-slate-600 focus:outline-none focus:border-purple-500/40"
+                    className={cn(inputClassName, 'pl-7')}
+                    style={inputStyle}
                   />
                 </div>
               </div>
@@ -414,7 +558,12 @@ export function AddPolicyModal({ isOpen, onClose, onSave }: AddPolicyModalProps)
             {/* Coverage Items */}
             {selectedTypeData && (
               <div>
-                <label className="block text-sm font-medium text-slate-300 mb-3">Coverage</label>
+                <label
+                  className="block text-sm font-medium mb-3"
+                  style={{ color: monetColors.textSecondary }}
+                >
+                  Coverage
+                </label>
                 <div className="space-y-2">
                   {selectedTypeData.coverageItems.map((item) => {
                     const isEnabled = coverage[item.id] ?? item.defaultEnabled
@@ -423,21 +572,26 @@ export function AddPolicyModal({ isOpen, onClose, onSave }: AddPolicyModalProps)
                         key={item.id}
                         type="button"
                         onClick={() => toggleCoverage(item.id)}
-                        className={cn(
-                          'w-full flex items-center justify-between px-4 py-3 rounded-xl border transition-all',
-                          isEnabled
-                            ? 'bg-emerald-500/10 border-emerald-500/30'
-                            : 'bg-white/[0.02] border-white/[0.06] hover:bg-white/[0.04]'
-                        )}
+                        className="w-full flex items-center justify-between px-4 py-3 rounded-xl transition-all duration-200"
+                        style={{
+                          background: isEnabled
+                            ? `${monetColors.sage}15`
+                            : monetColors.surfaceBg,
+                          border: `1px solid ${isEnabled ? `${monetColors.sage}40` : monetColors.cardBorder}`,
+                        }}
                       >
-                        <span className={cn('text-sm', isEnabled ? 'text-white' : 'text-slate-400')}>
+                        <span
+                          className="text-sm"
+                          style={{ color: isEnabled ? monetColors.textPrimary : monetColors.textMuted }}
+                        >
                           {item.label}
                         </span>
                         <div
-                          className={cn(
-                            'h-5 w-5 rounded-md flex items-center justify-center transition-all',
-                            isEnabled ? 'bg-emerald-500' : 'bg-white/[0.06] border border-white/[0.1]'
-                          )}
+                          className="h-5 w-5 rounded-md flex items-center justify-center transition-all"
+                          style={{
+                            background: isEnabled ? monetColors.sage : monetColors.cardBg,
+                            border: isEnabled ? 'none' : `1px solid ${monetColors.cardBorder}`,
+                          }}
                         >
                           {isEnabled && <Check className="h-3 w-3 text-white" />}
                         </div>
@@ -450,13 +604,19 @@ export function AddPolicyModal({ isOpen, onClose, onSave }: AddPolicyModalProps)
 
             {/* Notes */}
             <div>
-              <label className="block text-sm font-medium text-slate-300 mb-2">Notes (optional)</label>
+              <label
+                className="block text-sm font-medium mb-2"
+                style={{ color: monetColors.textSecondary }}
+              >
+                Notes (optional)
+              </label>
               <textarea
                 value={notes}
                 onChange={(e) => setNotes(e.target.value)}
                 placeholder="Additional details about this policy..."
                 rows={2}
-                className="w-full px-3 py-2 rounded-lg border border-white/[0.08] bg-white/[0.03] text-white text-sm placeholder:text-slate-600 focus:outline-none focus:border-purple-500/40 resize-none"
+                className={cn(inputClassName, 'resize-none')}
+                style={inputStyle}
               />
             </div>
           </>
@@ -464,11 +624,15 @@ export function AddPolicyModal({ isOpen, onClose, onSave }: AddPolicyModalProps)
       </div>
 
       {/* Footer */}
-      <div className="flex items-center justify-between p-5 border-t border-white/[0.06]">
+      <div
+        className="flex items-center justify-between p-5"
+        style={{ borderTop: `1px solid ${monetColors.cardBorder}` }}
+      >
         <button
           type="button"
           onClick={handleClose}
-          className="px-4 py-2 text-sm text-slate-400 hover:text-white transition-colors"
+          className="px-4 py-2 text-sm transition-colors"
+          style={{ color: monetColors.textMuted }}
         >
           Cancel
         </button>
@@ -477,15 +641,23 @@ export function AddPolicyModal({ isOpen, onClose, onSave }: AddPolicyModalProps)
           onClick={handleSave}
           disabled={!selectedCategory || !selectedType}
           className={cn(
-            'px-5 py-2 rounded-lg text-sm font-medium transition-all',
-            selectedCategory && selectedType
-              ? 'bg-purple-500 hover:bg-purple-600 text-white'
-              : 'bg-white/[0.05] text-slate-500 cursor-not-allowed'
+            'px-5 py-2.5 rounded-xl text-sm font-medium transition-all duration-200',
+            selectedCategory && selectedType ? 'hover:scale-105' : 'opacity-50 cursor-not-allowed'
           )}
+          style={{
+            background:
+              selectedCategory && selectedType
+                ? `linear-gradient(135deg, ${monetColors.lavender}, ${monetColors.lavenderDark})`
+                : 'rgba(155, 139, 180, 0.2)',
+            color: selectedCategory && selectedType ? 'white' : monetColors.textMuted,
+            boxShadow:
+              selectedCategory && selectedType ? `0 4px 12px ${monetColors.shadowSoft}` : 'none',
+          }}
         >
           Add Policy
         </button>
       </div>
+      </div>
     </Modal>
   )
 }
diff --git a/frontend/src/components/insurance/tabs/GuidelinesTab.tsx b/frontend/src/components/insurance/tabs/GuidelinesTab.tsx
new file mode 100644
index 000000000..484bf6ddc
--- /dev/null
+++ b/frontend/src/components/insurance/tabs/GuidelinesTab.tsx
@@ -0,0 +1,3231 @@
+'use client'
+
+import { useState, useMemo, useEffect } from 'react'
+import * as Slider from '@radix-ui/react-slider'
+import * as Tooltip from '@radix-ui/react-tooltip'
+import {
+  Info,
+  Check,
+  AlertCircle,
+  ArrowRight,
+  ArrowLeft,
+  RotateCcw,
+  Building2,
+  Home,
+  Clock,
+  Briefcase,
+  Sparkles,
+  Plus,
+  User,
+  Edit3,
+} from 'lucide-react'
+import { formatCurrency } from '@/lib/format'
+import { useColorScheme } from '@/stores'
+import { getInsuranceTheme } from '@/lib/insurance-theme'
+import {
+  useGuidelines,
+  useGuidelinesActions,
+  useGuidelineTargets,
+  useHasConfiguredGuidelines,
+  useSelectedPersonId,
+  useReferenceMode,
+  useQuestionnaireAnswers,
+  useQuestionnaireRecommendations,
+} from '@/stores/coverageGuidelinesStore'
+import type { ReferenceMode } from '@/stores/coverageGuidelinesStore'
+import {
+  guidelineCoverageConfig,
+  wardClassConfig,
+  type GuidelineCoverageType,
+  type WardClass,
+} from '@/types/insurance'
+import { PersonSelector } from '@/components/ui/PersonSelector'
+import { CustomDropdown } from '@/components/modals/ScenarioEventModal/components/CustomDropdown'
+import { usePersonFilter } from '@/contexts/PersonFilterContext'
+import { useIncomesQuery } from '@/hooks/queries/useIncomesQuery'
+import { useExpensesQuery } from '@/hooks/queries/useExpensesQuery'
+import { useQuestionnaireAutoPopulate } from '@/hooks/useQuestionnaireAutoPopulate'
+import type { Frequency } from '@/types/financial'
+
+// Helper to calculate annual income from frequency
+const frequencyMultipliers: Record<Frequency, number> = {
+  weekly: 52,
+  biweekly: 26,
+  monthly: 12,
+  quarterly: 4,
+  annual: 1,
+  one_time: 0, // One-time doesn't contribute to annual income calculation
+}
+
+function calculateAnnualIncomeForPerson(
+  incomes: { personId?: string | null; amount: number; frequency: Frequency; endDate?: string }[],
+  personId: string
+): number {
+  const currentYear = new Date().getFullYear()
+  return incomes
+    .filter((income) => {
+      // Must belong to selected person
+      if (income.personId !== personId) return false
+      // Must be active (no end date or end date in future)
+      if (income.endDate) {
+        const endYear = new Date(income.endDate).getFullYear()
+        if (endYear < currentYear) return false
+      }
+      return true
+    })
+    .reduce((total, income) => {
+      const multiplier = frequencyMultipliers[income.frequency] || 0
+      return total + income.amount * multiplier
+    }, 0)
+}
+
+/**
+ * Calculate total annual expenses (household-level, no personId filtering).
+ * Only includes active expenses (no endDate or future endDate).
+ */
+function calculateAnnualExpenses(
+  expenses: { amount: number; frequency: Frequency; endDate?: string }[]
+): number {
+  const currentYear = new Date().getFullYear()
+  return expenses
+    .filter((expense) => {
+      if (expense.endDate) {
+        const endYear = new Date(expense.endDate).getFullYear()
+        if (endYear < currentYear) return false
+      }
+      return true
+    })
+    .reduce((total, expense) => {
+      const multiplier = frequencyMultipliers[expense.frequency] || 0
+      return total + expense.amount * multiplier
+    }, 0)
+}
+
+/**
+ * TODO(human): Format a coverage target amount as a multiplier of expenses.
+ * Decides whether to show annual or monthly comparison,
+ * how to round the multiplier, and what text to display.
+ */
+function formatExpenseMultiplier(
+  targetAmount: number,
+  annualExpenses: number
+): string {
+  // Placeholder — human will implement this
+  if (annualExpenses <= 0) return 'Add expenses to see this comparison'
+  const multiplier = targetAmount / annualExpenses
+  return `≈ ${multiplier.toFixed(1)}× your annual expenses`
+}
+
+// ============================================================================
+// REFERENCE MODE TOGGLE
+// ============================================================================
+
+function ReferenceModeToggle() {
+  const colorScheme = useColorScheme()
+  const monetWizard = getInsuranceTheme(colorScheme)
+  const referenceMode = useReferenceMode()
+  const { setReferenceMode } = useGuidelinesActions()
+
+  const options: { value: ReferenceMode; label: string }[] = [
+    { value: 'income', label: 'vs Income' },
+    { value: 'expenses', label: 'vs Expenses' },
+  ]
+
+  return (
+    <div
+      className="inline-flex rounded-lg p-0.5"
+      style={{
+        background: `${monetWizard.lavender}08`,
+        border: `1px solid ${monetWizard.cardBorder}`,
+      }}
+    >
+      {options.map((option) => {
+        const isActive = referenceMode === option.value
+        return (
+          <button
+            key={option.value}
+            type="button"
+            onClick={() => setReferenceMode(option.value)}
+            className="flex items-center gap-1.5 px-2.5 py-1 rounded-md text-xs font-medium transition-all duration-150"
+            style={{
+              background: isActive ? `${monetWizard.lavender}18` : 'transparent',
+              color: isActive ? monetWizard.textPrimary : monetWizard.textMuted,
+            }}
+          >
+            {option.label}
+          </button>
+        )
+      })}
+    </div>
+  )
+}
+
+// ============================================================================
+// WIZARD STEP INDICATOR (Monet Impressionist Style)
+// ============================================================================
+
+interface WizardStepIndicatorProps {
+  currentStep: number
+  totalSteps: number
+  stepLabels: string[]
+}
+
+function WizardStepIndicator({ currentStep, totalSteps, stepLabels }: WizardStepIndicatorProps) {
+  const colorScheme = useColorScheme()
+  const monetWizard = getInsuranceTheme(colorScheme)
+
+  return (
+    <div className="flex items-center justify-center mb-12">
+      {Array.from({ length: totalSteps }).map((_, index) => {
+        const stepNumber = index + 1
+        const isComplete = stepNumber < currentStep
+        const isCurrent = stepNumber === currentStep
+
+        return (
+          <div key={index} className="flex items-center">
+            <div className="flex flex-col items-center">
+              {/* Minimal step indicator */}
+              <div
+                className="flex h-8 w-8 items-center justify-center rounded-full transition-all duration-500"
+                style={{
+                  background: isComplete
+                    ? monetWizard.sage
+                    : isCurrent
+                      ? monetWizard.cardBgHover
+                      : 'transparent',
+                  border: `1.5px solid ${
+                    isComplete
+                      ? monetWizard.sage
+                      : isCurrent
+                        ? monetWizard.lavender
+                        : `${monetWizard.lavender}30`
+                  }`,
+                  boxShadow: isCurrent ? `0 2px 12px ${monetWizard.shadowSoft}` : 'none',
+                }}
+              >
+                {isComplete ? (
+                  <Check className="h-4 w-4 text-white" />
+                ) : (
+                  <span
+                    className="text-xs font-medium"
+                    style={{
+                      color: isCurrent ? monetWizard.lavender : monetWizard.textMuted,
+                    }}
+                  >
+                    {stepNumber}
+                  </span>
+                )}
+              </div>
+              <span
+                className="mt-2 text-[10px] uppercase tracking-wider"
+                style={{
+                  color: isCurrent ? monetWizard.textPrimary : monetWizard.textMuted,
+                }}
+              >
+                {stepLabels[index]}
+              </span>
+            </div>
+
+            {/* Thin connector line */}
+            {index < totalSteps - 1 && (
+              <div
+                className="mx-6 h-px w-12 transition-all duration-500"
+                style={{
+                  background: isComplete
+                    ? monetWizard.sage
+                    : `${monetWizard.lavender}25`,
+                }}
+              />
+            )}
+          </div>
+        )
+      })}
+    </div>
+  )
+}
+
+// ============================================================================
+// WIZARD STEP 1: PERSON & INCOME
+// ============================================================================
+
+interface WizardStep1Props {
+  onNext: () => void
+}
+
+function WizardStep1Income({ onNext }: WizardStep1Props) {
+  const colorScheme = useColorScheme()
+  const monetWizard = getInsuranceTheme(colorScheme)
+
+  const guidelines = useGuidelines()
+  const selectedPersonId = useSelectedPersonId()
+  const { setAnnualIncome, setSelectedPersonId } = useGuidelinesActions()
+  const { includedPersons } = usePersonFilter()
+  const { data: incomes = [] } = useIncomesQuery()
+
+  // Calculate annual income when person changes
+  const calculatedIncome = useMemo(() => {
+    if (!selectedPersonId) return 0
+    return calculateAnnualIncomeForPerson(incomes, selectedPersonId)
+  }, [incomes, selectedPersonId])
+
+  // Auto-select first person if none selected and persons exist
+  useEffect(() => {
+    if (!selectedPersonId && includedPersons.length > 0) {
+      setSelectedPersonId(includedPersons[0].id)
+    }
+  }, [selectedPersonId, includedPersons, setSelectedPersonId])
+
+  // Update store when calculated income changes
+  useEffect(() => {
+    if (calculatedIncome > 0) {
+      setAnnualIncome(calculatedIncome)
+    }
+  }, [calculatedIncome, setAnnualIncome])
+
+  const selectedPerson = includedPersons.find((p) => p.id === selectedPersonId)
+  const hasNoIncome = selectedPersonId && calculatedIncome === 0
+  const canProceed = guidelines.annualIncome > 0
+
+  return (
+    <div className="max-w-md mx-auto">
+      {/* Header - minimal */}
+      <div className="text-center mb-10">
+        <p
+          className="text-[11px] font-medium uppercase tracking-[0.15em] mb-3"
+          style={{ color: monetWizard.lavender }}
+        >
+          Step 1 of 3
+        </p>
+        <h2
+          className="text-2xl font-light tracking-tight mb-2"
+          style={{
+            color: monetWizard.textPrimary,
+          }}
+        >
+          Who are we planning for?
+        </h2>
+        <p className="text-sm" style={{ color: monetWizard.textMuted }}>
+          Select a person to calculate their coverage needs
+        </p>
+      </div>
+
+      {/* Person selector - glass card */}
+      <div
+        className="rounded-3xl p-6 mb-6 backdrop-blur-md"
+        style={{
+          background: monetWizard.cardBg,
+          border: `1px solid ${monetWizard.cardBorder}`,
+          boxShadow: `0 8px 32px ${monetWizard.shadowSoft}`,
+        }}
+      >
+        <label
+          className="block text-[10px] uppercase tracking-wider mb-3"
+          style={{ color: monetWizard.textMuted }}
+        >
+          Select person
+        </label>
+        <PersonSelector
+          value={selectedPersonId}
+          onChange={setSelectedPersonId}
+          placeholder="Select a person"
+          required
+          variant={colorScheme === 'monet' ? 'monet' : 'dark'}
+          showCreate={false}
+        />
+
+        {/* Income display */}
+        {selectedPersonId && (
+          <div
+            className="mt-6 pt-6"
+            style={{ borderTop: `1px solid ${monetWizard.cardBorder}` }}
+          >
+            <div className="flex items-center justify-between mb-3">
+              <span
+                className="text-[10px] uppercase tracking-wider"
+                style={{ color: monetWizard.textMuted }}
+              >
+                Annual income
+              </span>
+              {calculatedIncome > 0 && (
+                <span
+                  className="text-[10px] uppercase tracking-wider"
+                  style={{ color: monetWizard.sage }}
+                >
+                  Auto-detected
+                </span>
+              )}
+            </div>
+            <div
+              className="text-3xl font-light tabular-nums"
+              style={{
+                color: monetWizard.textPrimary,
+                  }}
+            >
+              {formatCurrency(calculatedIncome)}
+            </div>
+
+            {hasNoIncome && (
+              <div
+                className="mt-4 flex items-start gap-3 rounded-xl p-4"
+                style={{
+                  background: `${monetWizard.amber}08`,
+                  border: `1px solid ${monetWizard.amber}20`,
+                }}
+              >
+                <AlertCircle className="h-4 w-4 shrink-0 mt-0.5" style={{ color: monetWizard.amber }} />
+                <p className="text-xs" style={{ color: monetWizard.textSecondary }}>
+                  No income found for {selectedPerson?.name}. Add income in Financial Data first.
+                </p>
+              </div>
+            )}
+          </div>
+        )}
+      </div>
+
+      {/* Info box - subtle */}
+      <div
+        className="flex items-start gap-3 rounded-2xl p-4 mb-8"
+        style={{
+          background: `${monetWizard.lavender}08`,
+          border: `1px solid ${monetWizard.lavender}15`,
+        }}
+      >
+        <Info className="h-4 w-4 shrink-0 mt-0.5" style={{ color: monetWizard.lavender }} />
+        <p className="text-xs leading-relaxed" style={{ color: monetWizard.textMuted }}>
+          Coverage targets are calculated as multiples of income (e.g., 10× for life insurance).
+        </p>
+      </div>
+
+      {/* Next button - pill shape */}
+      <button
+        type="button"
+        onClick={onNext}
+        disabled={!canProceed}
+        className="w-full flex items-center justify-center gap-2 rounded-full px-6 py-4 text-sm font-medium uppercase tracking-wider transition-all duration-300"
+        style={{
+          background: canProceed ? monetWizard.sage : `${monetWizard.lavender}20`,
+          color: canProceed ? 'white' : monetWizard.textMuted,
+          boxShadow: canProceed ? `0 4px 20px ${monetWizard.sage}40` : 'none',
+          cursor: canProceed ? 'pointer' : 'not-allowed',
+        }}
+      >
+        Continue
+        <ArrowRight className="h-4 w-4" />
+      </button>
+    </div>
+  )
+}
+
+// ============================================================================
+// WIZARD STEP 2: COVERAGE MULTIPLIERS
+// ============================================================================
+
+interface WizardStep2Props {
+  onNext: () => void
+  onBack: () => void
+}
+
+// Educational tooltips for each coverage type
+const coverageEducation: Record<GuidelineCoverageType, { title: string; points: string[]; extra?: string[] }> = {
+  hospitalization: {
+    title: 'Why Hospitalization Coverage?',
+    points: [
+      'MediShield Life only covers B2/C wards with high co-pay',
+      'ISP (Integrated Shield Plan) covers higher ward classes',
+      'Riders reduce your out-of-pocket costs (but new rules apply from Apr 2026)',
+      'Hospital bills can easily exceed $100K for major surgeries',
+    ],
+    extra: [
+      '── Ward Classes ──',
+      'Class A: Single room, air-con, private bathroom. Highest premiums.',
+      'Class B1: 4-bed room, air-con. Good balance of comfort and cost.',
+      'Class B2+: 6-bed room, air-con. Affordable with decent comfort.',
+      'Class C: 8+ bed room, fan-cooled. Lowest premiums, covered by MediShield Life.',
+      '── About Riders ──',
+      'A rider is an add-on to your ISP that reduces co-payment and deductible.',
+      'Without rider: You pay deductible ($1,500-$3,500) + 5-10% of remaining bill.',
+      'With rider: Reduced but not zero out-of-pocket for covered treatments.',
+      '── NEW RULES (Apr 2026) ──',
+      '⚠️ From April 2026, new riders cannot fully cover deductibles.',
+      'New riders will be ~30% cheaper but require minimum $1,500-$3,500 deductible.',
+      'Co-pay remains 5% of bill after deductible, but cap doubles to $6,000/year.',
+      'Existing policies bought before Nov 2025 remain unchanged.',
+      'Policies bought Nov 2025 - Mar 2026 convert after Apr 2028.',
+    ],
+  },
+  life_tpd: {
+    title: 'Why Life/TPD Coverage?',
+    points: [
+      '10× income replaces earnings for ~10 years',
+      'Covers mortgage, children\'s education, daily expenses',
+      'TPD (Total Permanent Disability) pays if you can\'t work',
+      'DPS ($70K) from CPF is often insufficient alone',
+    ],
+  },
+  critical_illness: {
+    title: 'Why Critical Illness Coverage?',
+    points: [
+      'Pays lump sum on diagnosis (cancer, heart attack, stroke)',
+      '5× income covers treatment + income loss during recovery',
+      '1 in 4 Singaporeans will develop cancer by age 75',
+      'Covers expenses not covered by hospitalization plans',
+    ],
+  },
+  personal_accident: {
+    title: 'Why Personal Accident Coverage?',
+    points: [
+      'Covers accidental injuries and death',
+      'Often includes fractures, burns, disabilities',
+      'Usually very affordable premiums',
+      'Complements life insurance for accident scenarios',
+    ],
+  },
+}
+
+function CoverageMultiplierCard({
+  coverageType,
+  showEducation = false,
+  reasoning,
+  showInputs = false,
+  annualExpenses = 0,
+}: {
+  coverageType: GuidelineCoverageType
+  showEducation?: boolean
+  reasoning?: string
+  showInputs?: boolean
+  annualExpenses?: number
+}) {
+  const colorScheme = useColorScheme()
+  const monetWizard = getInsuranceTheme(colorScheme)
+
+  const guidelines = useGuidelines()
+  const targets = useGuidelineTargets()
+  const referenceMode = useReferenceMode()
+  const answers = useQuestionnaireAnswers()
+  const {
+    setMultiplier,
+    toggleCoverage,
+    setHospitalizationPreferences,
+    setLifeTpdAnswers,
+    setCriticalIllnessAnswers,
+    setPersonalAccidentAnswers,
+    applyQuestionnaireRecommendations,
+  } = useGuidelinesActions()
+
+  const config = guidelineCoverageConfig[coverageType]
+  const coverage = guidelines.coverages[coverageType]
+  const education = coverageEducation[coverageType]
+
+  const isHospitalization = coverageType === 'hospitalization'
+  const multiplier = isHospitalization ? 0 : ((coverage as { incomeMultiplier: number }).incomeMultiplier ?? 1)
+  const targetAmount = isHospitalization ? 0 : (targets[coverageType as keyof typeof targets] ?? 0)
+
+  // Subtle accent colors for active state
+  const accentColorMap: Record<string, string> = {
+    emerald: monetWizard.sage,
+    blue: monetWizard.blue,
+    purple: monetWizard.purple,
+    amber: monetWizard.amber,
+  }
+
+  const accent = accentColorMap[config.color] || monetWizard.lavender
+
+  // Helper to parse currency input (removes $, commas, and other non-numeric chars except . and -)
+  const parseCurrency = (value: string): number => {
+    const cleaned = value.replace(/[^0-9.\-]/g, '')
+    const num = parseFloat(cleaned)
+    return isNaN(num) ? 0 : Math.round(num)
+  }
+
+  // Helper to format number for input display
+  const formatInputCurrency = (value: number): string => {
+    if (value === 0) return ''
+    return Math.round(value).toLocaleString()
+  }
+
+  // Recompute recommendations when inputs change
+  const handleInputChange = () => {
+    // Small delay to allow state to update
+    setTimeout(() => applyQuestionnaireRecommendations(), 0)
+  }
+
+  return (
+    <div
+      className="group rounded-2xl p-6 transition-all duration-300 backdrop-blur-sm"
+      style={{
+        background: monetWizard.cardBg,
+        border: `1px solid ${coverage.isEnabled ? `${accent}25` : monetWizard.cardBorder}`,
+        boxShadow: coverage.isEnabled
+          ? `0 4px 24px ${accent}12`
+          : `0 2px 16px ${monetWizard.shadowSoft}`,
+      }}
+    >
+      {/* Header - horizontal layout */}
+      <div className="flex items-center justify-between">
+        <div className="flex items-center gap-4">
+          <div>
+            <div className="flex items-center gap-3">
+              <h3
+                className="text-sm font-medium tracking-tight"
+                style={{ color: monetWizard.textPrimary }}
+              >
+                {config.label}
+              </h3>
+              {!config.isRequired && (
+                <span
+                  className="text-[10px] uppercase tracking-wider"
+                  style={{ color: monetWizard.textMuted }}
+                >
+                  Optional
+                </span>
+              )}
+              {/* Learn More Tooltip */}
+              {showEducation && (
+                <Tooltip.Provider delayDuration={200}>
+                  <Tooltip.Root>
+                    <Tooltip.Trigger asChild>
+                      <button
+                        type="button"
+                        className="p-0.5 rounded-full transition-opacity hover:opacity-70"
+                      >
+                        <Info className="h-3.5 w-3.5" style={{ color: monetWizard.textMuted }} />
+                      </button>
+                    </Tooltip.Trigger>
+                    <Tooltip.Portal>
+                      <Tooltip.Content
+                        side="bottom"
+                        align="start"
+                        sideOffset={8}
+                        className="z-[9999] max-w-xs rounded-xl p-4 shadow-xl animate-in fade-in-0 zoom-in-95"
+                        style={{
+                          background: colorScheme === 'monet' ? '#ffffff' : '#1a1a1a',
+                          border: `1px solid ${monetWizard.cardBorder}`,
+                        }}
+                      >
+                        <p
+                          className="text-xs font-medium mb-2"
+                          style={{ color: monetWizard.textSecondary }}
+                        >
+                          {education.title}
+                        </p>
+                        <ul className="space-y-1.5">
+                          {education.points.map((point, i) => (
+                            <li
+                              key={i}
+                              className="flex items-start gap-2 text-xs leading-relaxed"
+                              style={{ color: monetWizard.textMuted }}
+                            >
+                              <span style={{ color: accent }}>·</span>
+                              {point}
+                            </li>
+                          ))}
+                        </ul>
+                        <Tooltip.Arrow style={{ fill: colorScheme === 'monet' ? '#ffffff' : '#1a1a1a' }} />
+                      </Tooltip.Content>
+                    </Tooltip.Portal>
+                  </Tooltip.Root>
+                </Tooltip.Provider>
+              )}
+            </div>
+            <p
+              className="text-xs mt-0.5"
+              style={{ color: monetWizard.textMuted }}
+            >
+              {config.description}
+            </p>
+          </div>
+        </div>
+
+        {/* Sleek toggle */}
+        <button
+          type="button"
+          onClick={() => toggleCoverage(coverageType)}
+          className="relative h-5 w-10 rounded-full transition-all duration-300 shrink-0"
+          style={{
+            background: coverage.isEnabled
+              ? accent
+              : `${monetWizard.lavender}25`,
+          }}
+        >
+          <span
+            className="absolute top-0.5 h-4 w-4 rounded-full bg-white transition-all duration-300"
+            style={{
+              left: coverage.isEnabled ? '22px' : '2px',
+              boxShadow: '0 1px 3px rgba(0,0,0,0.1)',
+            }}
+          />
+        </button>
+      </div>
+
+      {/* Content - when enabled */}
+      {coverage.isEnabled && (
+        <div className="mt-5 pt-5" style={{ borderTop: `1px solid ${monetWizard.cardBorder}` }}>
+          {isHospitalization ? (
+            // Hospitalization: minimal ward selection
+            <div className="space-y-4">
+              <div className="flex gap-2">
+                {(['A', 'B1', 'B2_plus', 'C'] as WardClass[]).map((ward) => {
+                  const wardConfig = wardClassConfig[ward]
+                  const isSelected =
+                    guidelines.coverages.hospitalization.preferredWardClass === ward
+
+                  return (
+                    <button
+                      key={ward}
+                      type="button"
+                      onClick={() => setHospitalizationPreferences({ preferredWardClass: ward })}
+                      className="flex-1 py-2.5 rounded-xl text-xs font-medium transition-all duration-200"
+                      style={{
+                        background: isSelected ? accent : monetWizard.surfaceBg,
+                        color: isSelected ? 'white' : monetWizard.textSecondary,
+                        boxShadow: isSelected ? `0 2px 8px ${accent}30` : 'none',
+                      }}
+                    >
+                      {wardConfig.label}
+                    </button>
+                  )
+                })}
+              </div>
+
+              {/* Rider toggle - inline */}
+              <div className="flex items-center justify-between">
+                <span
+                  className="text-xs"
+                  style={{ color: monetWizard.textMuted }}
+                >
+                  Include rider
+                </span>
+                <button
+                  type="button"
+                  onClick={() =>
+                    setHospitalizationPreferences({
+                      recommendsRider: !guidelines.coverages.hospitalization.recommendsRider,
+                    })
+                  }
+                  className="relative h-4 w-8 rounded-full transition-all duration-300"
+                  style={{
+                    background: guidelines.coverages.hospitalization.recommendsRider
+                      ? accent
+                      : `${monetWizard.lavender}25`,
+                  }}
+                >
+                  <span
+                    className="absolute top-0.5 h-3 w-3 rounded-full bg-white transition-all duration-300"
+                    style={{
+                      left: guidelines.coverages.hospitalization.recommendsRider ? '17px' : '2px',
+                      boxShadow: '0 1px 2px rgba(0,0,0,0.1)',
+                    }}
+                  />
+                </button>
+              </div>
+            </div>
+          ) : (
+            // Income-based: editable inputs layout
+            <div className="space-y-4">
+              {/* Editable Inputs - type-specific */}
+              {showInputs && coverageType === 'life_tpd' && (
+                <div
+                  className="rounded-xl p-4"
+                  style={{
+                    background: monetWizard.surfaceBg,
+                    border: `1px solid ${accent}25`,
+                  }}
+                >
+                  <p
+                    className="text-[10px] uppercase tracking-wider mb-3"
+                    style={{ color: accent }}
+                  >
+                    Your situation
+                  </p>
+                  <div className="grid grid-cols-2 gap-x-4 gap-y-3">
+                    <div>
+                      <label className="text-[10px] uppercase tracking-wider" style={{ color: monetWizard.textMuted }}>
+                        Dependents
+                      </label>
+                      <input
+                        type="number"
+                        min={0}
+                        max={10}
+                        value={answers.lifeTpd.dependentCount}
+                        onChange={(e) => {
+                          setLifeTpdAnswers({ dependentCount: parseInt(e.target.value) || 0 })
+                          handleInputChange()
+                        }}
+                        className="w-full mt-1 px-2 py-1.5 rounded-lg text-xs font-mono tabular-nums bg-transparent border focus:outline-none focus:ring-1"
+                        style={{
+                          color: monetWizard.textPrimary,
+                          borderColor: monetWizard.cardBorder,
+                        }}
+                      />
+                    </div>
+                    <div>
+                      <label className="text-[10px] uppercase tracking-wider" style={{ color: monetWizard.textMuted }}>
+                        Years to support
+                      </label>
+                      <input
+                        type="number"
+                        min={0}
+                        max={30}
+                        value={answers.lifeTpd.yearsUntilIndependent}
+                        onChange={(e) => {
+                          setLifeTpdAnswers({ yearsUntilIndependent: parseInt(e.target.value) || 0 })
+                          handleInputChange()
+                        }}
+                        className="w-full mt-1 px-2 py-1.5 rounded-lg text-xs font-mono tabular-nums bg-transparent border focus:outline-none focus:ring-1"
+                        style={{
+                          color: monetWizard.textPrimary,
+                          borderColor: monetWizard.cardBorder,
+                        }}
+                      />
+                    </div>
+                    <div>
+                      <label className="text-[10px] uppercase tracking-wider" style={{ color: monetWizard.textMuted }}>
+                        Mortgage ($)
+                      </label>
+                      <input
+                        type="text"
+                        value={formatInputCurrency(answers.lifeTpd.mortgageBalance)}
+                        onChange={(e) => {
+                          setLifeTpdAnswers({ mortgageBalance: parseCurrency(e.target.value) })
+                          handleInputChange()
+                        }}
+                        placeholder="0"
+                        className="w-full mt-1 px-2 py-1.5 rounded-lg text-xs font-mono tabular-nums bg-transparent border focus:outline-none focus:ring-1"
+                        style={{
+                          color: monetWizard.textPrimary,
+                          borderColor: monetWizard.cardBorder,
+                        }}
+                      />
+                    </div>
+                    <div>
+                      <label className="text-[10px] uppercase tracking-wider" style={{ color: monetWizard.textMuted }}>
+                        Other debts ($)
+                      </label>
+                      <input
+                        type="text"
+                        value={formatInputCurrency(answers.lifeTpd.otherDebts)}
+                        onChange={(e) => {
+                          setLifeTpdAnswers({ otherDebts: parseCurrency(e.target.value) })
+                          handleInputChange()
+                        }}
+                        placeholder="0"
+                        className="w-full mt-1 px-2 py-1.5 rounded-lg text-xs font-mono tabular-nums bg-transparent border focus:outline-none focus:ring-1"
+                        style={{
+                          color: monetWizard.textPrimary,
+                          borderColor: monetWizard.cardBorder,
+                        }}
+                      />
+                    </div>
+                    <div>
+                      <label className="text-[10px] uppercase tracking-wider" style={{ color: monetWizard.textMuted }}>
+                        Existing assets ($)
+                      </label>
+                      <input
+                        type="text"
+                        value={formatInputCurrency(answers.lifeTpd.existingAssets)}
+                        onChange={(e) => {
+                          setLifeTpdAnswers({ existingAssets: parseCurrency(e.target.value) })
+                          handleInputChange()
+                        }}
+                        placeholder="0"
+                        className="w-full mt-1 px-2 py-1.5 rounded-lg text-xs font-mono tabular-nums bg-transparent border focus:outline-none focus:ring-1"
+                        style={{
+                          color: monetWizard.textPrimary,
+                          borderColor: monetWizard.cardBorder,
+                        }}
+                      />
+                    </div>
+                  </div>
+                </div>
+              )}
+
+              {showInputs && coverageType === 'critical_illness' && (
+                <div
+                  className="rounded-xl p-4"
+                  style={{
+                    background: monetWizard.surfaceBg,
+                    border: `1px solid ${accent}25`,
+                  }}
+                >
+                  <p
+                    className="text-[10px] uppercase tracking-wider mb-3"
+                    style={{ color: accent }}
+                  >
+                    Your situation
+                  </p>
+                  <div className="grid grid-cols-2 gap-x-4 gap-y-3">
+                    <div>
+                      <label className="text-[10px] uppercase tracking-wider" style={{ color: monetWizard.textMuted }}>
+                        Emergency fund (months)
+                      </label>
+                      <input
+                        type="number"
+                        min={0}
+                        max={36}
+                        value={answers.criticalIllness.emergencyFundMonths}
+                        onChange={(e) => {
+                          setCriticalIllnessAnswers({ emergencyFundMonths: parseInt(e.target.value) || 0 })
+                          handleInputChange()
+                        }}
+                        className="w-full mt-1 px-2 py-1.5 rounded-lg text-xs font-mono tabular-nums bg-transparent border focus:outline-none focus:ring-1"
+                        style={{
+                          color: monetWizard.textPrimary,
+                          borderColor: monetWizard.cardBorder,
+                        }}
+                      />
+                    </div>
+                    <div>
+                      <label className="text-[10px] uppercase tracking-wider" style={{ color: monetWizard.textMuted }}>
+                        Recovery period (months)
+                      </label>
+                      <input
+                        type="number"
+                        min={0}
+                        max={36}
+                        value={answers.criticalIllness.expectedRecoveryMonths}
+                        onChange={(e) => {
+                          setCriticalIllnessAnswers({ expectedRecoveryMonths: parseInt(e.target.value) || 0 })
+                          handleInputChange()
+                        }}
+                        className="w-full mt-1 px-2 py-1.5 rounded-lg text-xs font-mono tabular-nums bg-transparent border focus:outline-none focus:ring-1"
+                        style={{
+                          color: monetWizard.textPrimary,
+                          borderColor: monetWizard.cardBorder,
+                        }}
+                      />
+                    </div>
+                    <div>
+                      <label className="text-[10px] uppercase tracking-wider" style={{ color: monetWizard.textMuted }}>
+                        Monthly expenses ($)
+                      </label>
+                      <input
+                        type="text"
+                        value={formatInputCurrency(answers.criticalIllness.monthlyExpenses)}
+                        onChange={(e) => {
+                          setCriticalIllnessAnswers({ monthlyExpenses: parseCurrency(e.target.value) })
+                          handleInputChange()
+                        }}
+                        placeholder="0"
+                        className="w-full mt-1 px-2 py-1.5 rounded-lg text-xs font-mono tabular-nums bg-transparent border focus:outline-none focus:ring-1"
+                        style={{
+                          color: monetWizard.textPrimary,
+                          borderColor: monetWizard.cardBorder,
+                        }}
+                      />
+                    </div>
+                    <div>
+                      <label className="text-[10px] uppercase tracking-wider" style={{ color: monetWizard.textMuted }}>
+                        Existing coverage ($)
+                      </label>
+                      <input
+                        type="text"
+                        value={formatInputCurrency(answers.criticalIllness.existingCiCoverage)}
+                        onChange={(e) => {
+                          setCriticalIllnessAnswers({ existingCiCoverage: parseCurrency(e.target.value) })
+                          handleInputChange()
+                        }}
+                        placeholder="0"
+                        className="w-full mt-1 px-2 py-1.5 rounded-lg text-xs font-mono tabular-nums bg-transparent border focus:outline-none focus:ring-1"
+                        style={{
+                          color: monetWizard.textPrimary,
+                          borderColor: monetWizard.cardBorder,
+                        }}
+                      />
+                    </div>
+                  </div>
+                </div>
+              )}
+
+              {showInputs && coverageType === 'personal_accident' && (
+                <div
+                  className="rounded-xl p-4"
+                  style={{
+                    background: monetWizard.surfaceBg,
+                    border: `1px solid ${accent}25`,
+                  }}
+                >
+                  <p
+                    className="text-[10px] uppercase tracking-wider mb-3"
+                    style={{ color: accent }}
+                  >
+                    Your situation
+                  </p>
+                  <div className="grid grid-cols-2 gap-x-4 gap-y-3">
+                    <div>
+                      <label className="text-[10px] uppercase tracking-wider block mb-1" style={{ color: monetWizard.textMuted }}>
+                        Occupation risk
+                      </label>
+                      <CustomDropdown
+                        value={answers.personalAccident.occupationRisk}
+                        onChange={(value) => {
+                          setPersonalAccidentAnswers({ occupationRisk: value as 'low' | 'medium' | 'high' })
+                          handleInputChange()
+                        }}
+                        options={[
+                          { value: 'low', label: 'Low (Office)' },
+                          { value: 'medium', label: 'Medium (Field)' },
+                          { value: 'high', label: 'High (Manual)' },
+                        ]}
+                        minWidth="100%"
+                        variant="monet"
+                      />
+                    </div>
+                    <div className="col-span-2">
+                      <label className="text-[10px] uppercase tracking-wider" style={{ color: monetWizard.textMuted }}>
+                        Existing PA coverage ($)
+                      </label>
+                      <input
+                        type="text"
+                        value={formatInputCurrency(answers.personalAccident.existingPaCoverage)}
+                        onChange={(e) => {
+                          setPersonalAccidentAnswers({ existingPaCoverage: parseCurrency(e.target.value) })
+                          handleInputChange()
+                        }}
+                        placeholder="0"
+                        className="w-full mt-1 px-2 py-1.5 rounded-lg text-xs font-mono tabular-nums bg-transparent border focus:outline-none focus:ring-1"
+                        style={{
+                          color: monetWizard.textPrimary,
+                          borderColor: monetWizard.cardBorder,
+                        }}
+                      />
+                    </div>
+                  </div>
+                </div>
+              )}
+
+              {/* Target amount - editable input */}
+              <div>
+                <div className="flex items-center justify-between mb-1">
+                  <p
+                    className="text-[10px] uppercase tracking-wider"
+                    style={{ color: monetWizard.textMuted }}
+                  >
+                    Coverage target
+                  </p>
+                  <ReferenceModeToggle />
+                </div>
+                <div className="flex items-baseline gap-1">
+                  <span className="text-xl" style={{ color: accent }}>$</span>
+                  <input
+                    type="text"
+                    value={formatInputCurrency(targetAmount as number)}
+                    onChange={(e) => {
+                      const newTarget = parseCurrency(e.target.value)
+                      const income = guidelines.annualIncome || 1
+                      const newMultiplier = Math.max(1, Math.min(20, Math.round(newTarget / income)))
+                      setMultiplier(coverageType, newMultiplier)
+                    }}
+                    className="text-2xl font-light font-mono tabular-nums bg-transparent border-b-2 focus:outline-none transition-colors"
+                    style={{
+                      color: accent,
+                                borderColor: `${accent}30`,
+                      width: `${Math.max(3, String(targetAmount).length) + 1}ch`,
+                    }}
+                  />
+                </div>
+                <p
+                  className="text-[11px] mt-1.5"
+                  style={{ color: monetWizard.textMuted }}
+                >
+                  {referenceMode === 'expenses'
+                    ? formatExpenseMultiplier(targetAmount as number, annualExpenses)
+                    : `≈ ${multiplier}× your annual income`}
+                </p>
+              </div>
+            </div>
+          )}
+
+          {/* Reasoning display - shows why this coverage was recommended */}
+          {reasoning && (
+            <div
+              className="flex items-start gap-2 mt-4 pt-4"
+              style={{ borderTop: `1px solid ${monetWizard.cardBorder}` }}
+            >
+              <Info className="h-3.5 w-3.5 shrink-0 mt-0.5" style={{ color: monetWizard.lavender }} />
+              <p
+                className="text-xs leading-relaxed"
+                style={{ color: monetWizard.textSecondary }}
+              >
+                {reasoning}
+              </p>
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  )
+}
+
+// ============================================================================
+// GUIDED QUESTIONNAIRE COMPONENTS
+// First-principles approach to coverage recommendations
+// ============================================================================
+
+type QuestionnaireSection = 'hospitalization' | 'life_tpd' | 'critical_illness' | 'personal_accident' | 'self_insurance'
+
+const sectionOrder: QuestionnaireSection[] = [
+  'hospitalization',
+  'life_tpd',
+  'critical_illness',
+  'personal_accident',
+  'self_insurance',
+]
+
+const sectionConfig: Record<QuestionnaireSection, { title: string; emoji: string; color: string }> = {
+  hospitalization: { title: 'Hospitalization', emoji: '🏥', color: 'emerald' },
+  life_tpd: { title: 'Life / TPD', emoji: '😇', color: 'blue' },
+  critical_illness: { title: 'Critical Illness', emoji: '🩺', color: 'purple' },
+  personal_accident: { title: 'Personal Accident', emoji: '🚗', color: 'amber' },
+  self_insurance: { title: 'Self-Insurance', emoji: '💰', color: 'slate' },
+}
+
+// Option card component for single/multiple choice questions (Monet style)
+function OptionCard({
+  isSelected,
+  onClick,
+  icon,
+  title,
+  description,
+  color = 'emerald',
+}: {
+  isSelected: boolean
+  onClick: () => void
+  icon: React.ReactNode
+  title: string
+  description: string
+  color?: string
+}) {
+  const colorScheme = useColorScheme()
+  const monetWizard = getInsuranceTheme(colorScheme)
+
+  // Monet-inspired color mapping
+  // Hex alpha: 18 ≈ 9%, 30 ≈ 19%, 60 ≈ 38%
+  const colorStyles: Record<string, { bg: string; border: string; accent: string }> = {
+    emerald: {
+      bg: `${monetWizard.sage}18`,
+      border: `${monetWizard.sage}60`,
+      accent: monetWizard.sage,
+    },
+    blue: {
+      bg: `${monetWizard.blue}18`,
+      border: `${monetWizard.blue}60`,
+      accent: monetWizard.blue,
+    },
+    purple: {
+      bg: `${monetWizard.purple}18`,
+      border: `${monetWizard.purple}60`,
+      accent: monetWizard.purple,
+    },
+    amber: {
+      bg: `${monetWizard.amber}18`,
+      border: `${monetWizard.amber}60`,
+      accent: monetWizard.amber,
+    },
+  }
+
+  const styles = colorStyles[color] || colorStyles.emerald
+
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      className="w-full rounded-2xl p-5 text-left transition-all duration-300 hover:scale-[1.01]"
+      style={{
+        background: isSelected ? styles.bg : monetWizard.cardBg,
+        border: `1px solid ${isSelected ? styles.border : monetWizard.cardBorder}`,
+        boxShadow: isSelected
+          ? `0 6px 20px ${monetWizard.shadowMedium}`
+          : `0 2px 10px ${monetWizard.shadowSoft}`,
+      }}
+    >
+      <div className="flex items-start gap-4">
+        <div
+          className="flex h-11 w-11 shrink-0 items-center justify-center rounded-xl"
+          style={{
+            background: isSelected
+              ? `${styles.accent}30`
+              : `${monetWizard.textMuted}12`,
+            border: `1px solid ${isSelected ? `${styles.accent}40` : `${monetWizard.textMuted}15`}`,
+          }}
+        >
+          {icon}
+        </div>
+        <div className="flex-1">
+          <p
+            className="font-medium"
+            style={{
+              color: isSelected ? monetWizard.textPrimary : monetWizard.textSecondary,
+            }}
+          >
+            {title}
+          </p>
+          <p
+            className="text-sm mt-1"
+            style={{ color: monetWizard.textMuted }}
+          >
+            {description}
+          </p>
+        </div>
+        {isSelected && (
+          <div
+            className="flex h-6 w-6 items-center justify-center rounded-full shrink-0"
+            style={{ background: monetWizard.sage }}
+          >
+            <Check className="h-4 w-4 text-white" />
+          </div>
+        )}
+      </div>
+    </button>
+  )
+}
+
+// Number input with label (Monet style)
+function NumberInput({
+  label,
+  value,
+  onChange,
+  placeholder = '0',
+  prefix = '$',
+  helpText,
+  preFilled,
+  preFilledSource,
+}: {
+  label: string
+  value: number
+  onChange: (value: number) => void
+  placeholder?: string
+  prefix?: string
+  helpText?: string
+  preFilled?: boolean
+  preFilledSource?: string
+}) {
+  const colorScheme = useColorScheme()
+  const monetWizard = getInsuranceTheme(colorScheme)
+
+  return (
+    <div>
+      <div className="flex items-center justify-between mb-2">
+        <label className="block text-sm" style={{ color: monetWizard.textSecondary }}>
+          {label}
+        </label>
+        {preFilled && value > 0 && (
+          <span
+            className="text-[10px] px-2 py-0.5 rounded-full"
+            style={{
+              background: `${monetWizard.sageLight}60`,
+              color: monetWizard.sageDark,
+            }}
+          >
+            {preFilledSource || 'Pre-filled'}
+          </span>
+        )}
+      </div>
+      <div className="relative">
+        {prefix && (
+          <span
+            className="absolute left-4 top-1/2 -translate-y-1/2"
+            style={{ color: monetWizard.textMuted }}
+          >
+            {prefix}
+          </span>
+        )}
+        <input
+          type="number"
+          value={value || ''}
+          onChange={(e) => onChange(parseFloat(e.target.value) || 0)}
+          placeholder={placeholder}
+          className="w-full rounded-xl text-sm py-3.5 transition-all duration-200"
+          style={{
+            background: monetWizard.inputBg,
+            border: `1px solid ${preFilled && value > 0 ? monetWizard.sage + '50' : monetWizard.cardBorder}`,
+            color: monetWizard.textPrimary,
+            paddingLeft: prefix ? '2rem' : '1rem',
+            paddingRight: '1rem',
+          }}
+        />
+      </div>
+      {helpText && (
+        <p className="text-xs mt-2" style={{ color: monetWizard.textMuted }}>
+          {helpText}
+        </p>
+      )}
+    </div>
+  )
+}
+
+// Section progress indicator (Monet style - flowing dots)
+function SectionProgressDots({ current, total }: { current: number; total: number }) {
+  const colorScheme = useColorScheme()
+  const monetWizard = getInsuranceTheme(colorScheme)
+
+  return (
+    <div className="flex items-center justify-center gap-2 mb-8">
+      {Array.from({ length: total }).map((_, i) => (
+        <div
+          key={i}
+          className="h-2 rounded-full transition-all duration-500"
+          style={{
+            width: i === current ? '1.5rem' : '0.5rem',
+            background: i === current
+              ? `linear-gradient(90deg, ${monetWizard.lavender}, ${monetWizard.lavenderLight})`
+              : i < current
+                ? monetWizard.sage
+                : monetWizard.cardBorder,
+          }}
+        />
+      ))}
+    </div>
+  )
+}
+
+// HOSPITALIZATION QUESTIONNAIRE
+function HospitalizationQuestionnaire({
+  onNext,
+  onBack,
+}: {
+  onNext: () => void
+  onBack: () => void
+}) {
+  const colorScheme = useColorScheme()
+  const monetWizard = getInsuranceTheme(colorScheme)
+
+  const answers = useQuestionnaireAnswers()
+  const { setHospitalizationAnswers } = useGuidelinesActions()
+  const [subStep, setSubStep] = useState(0)
+
+  const hospitalPref = answers.hospitalization.hospitalPreference
+
+  // Sub-step 0: Public vs Private choice
+  // Sub-step 1: Follow-up based on choice
+  const totalSubSteps = hospitalPref ? 2 : 1
+
+  const canProceed = subStep === 0 ? hospitalPref !== null : true
+
+  const handleNext = () => {
+    if (subStep < totalSubSteps - 1) {
+      setSubStep(subStep + 1)
+    } else {
+      onNext()
+    }
+  }
+
+  const handleBack = () => {
+    if (subStep > 0) {
+      setSubStep(subStep - 1)
+    } else {
+      onBack()
+    }
+  }
+
+  return (
+    <div className="max-w-xl mx-auto">
+      <SectionProgressDots current={subStep} total={totalSubSteps} />
+
+      {/* Header with inline info button */}
+      <div className="text-center mb-8">
+        <div className="flex items-center justify-center gap-2 mb-3">
+          <h2
+            className="text-2xl font-semibold"
+            style={{ color: monetWizard.textPrimary }}
+          >
+            Hospitalization Coverage
+          </h2>
+          <Tooltip.Provider delayDuration={200}>
+            <Tooltip.Root>
+              <Tooltip.Trigger asChild>
+                <button
+                  type="button"
+                  className="p-1 rounded-full transition-opacity hover:opacity-70"
+                >
+                  <Info className="h-4 w-4" style={{ color: monetWizard.textMuted }} />
+                </button>
+              </Tooltip.Trigger>
+              <Tooltip.Portal>
+                <Tooltip.Content
+                  side="bottom"
+                  align="center"
+                  sideOffset={8}
+                  className="z-[9999] max-w-sm rounded-xl p-4 shadow-xl animate-in fade-in-0 zoom-in-95"
+                  style={{
+                    background: colorScheme === 'monet' ? '#ffffff' : '#1a1a1a',
+                    border: `1px solid ${monetWizard.cardBorder}`,
+                  }}
+                >
+                  <div className="mb-3">
+                    <p className="text-xs font-medium mb-2" style={{ color: monetWizard.textPrimary }}>
+                      Private vs Public
+                    </p>
+                    <ul className="text-xs space-y-1" style={{ color: monetWizard.textSecondary }}>
+                      <li>• <strong>Private:</strong> Choose your specialist, shorter wait (days vs months)</li>
+                      <li>• <strong>Public:</strong> All ward classes (A, B1, B2+, C), government subsidies</li>
+                      <li>• Public Class A/B1 offers similar comfort at lower cost</li>
+                    </ul>
+                  </div>
+                  <div
+                    className="p-3 rounded-lg"
+                    style={{
+                      background: `${monetWizard.amber}15`,
+                      border: `1px solid ${monetWizard.amber}20`,
+                    }}
+                  >
+                    <p className="text-xs font-medium mb-1" style={{ color: monetWizard.amber }}>
+                      MOH Rules from April 2026
+                    </p>
+                    <p className="text-xs" style={{ color: monetWizard.textSecondary }}>
+                      New IP riders can no longer fully cover deductibles ($1,500–$3,500 minimum out-of-pocket).
+                      Existing policies bought before Nov 2025 are unaffected.
+                    </p>
+                  </div>
+                  <Tooltip.Arrow style={{ fill: colorScheme === 'monet' ? '#ffffff' : '#1a1a1a' }} />
+                </Tooltip.Content>
+              </Tooltip.Portal>
+            </Tooltip.Root>
+          </Tooltip.Provider>
+        </div>
+        <p style={{ color: monetWizard.textSecondary }}>
+          {subStep === 0
+            ? 'Where would you prefer to be treated?'
+            : hospitalPref === 'private'
+              ? 'Which room type do you prefer?'
+              : 'Which ward class suits you best?'}
+        </p>
+      </div>
+
+      {subStep === 0 ? (
+        // Step 0: Clean Public vs Private choice
+        <div className="space-y-3 mb-8">
+          <OptionCard
+            isSelected={hospitalPref === 'private'}
+            onClick={() => setHospitalizationAnswers({ hospitalPreference: 'private' })}
+            icon={<Building2 className="h-5 w-5 text-blue-400" />}
+            title="Private Hospital"
+            description="Choose your specialist, shorter wait times. Higher premiums."
+            color="blue"
+          />
+          <OptionCard
+            isSelected={hospitalPref === 'public'}
+            onClick={() => setHospitalizationAnswers({ hospitalPreference: 'public' })}
+            icon={<Home className="h-5 w-5 text-emerald-400" />}
+            title="Public Hospital"
+            description="Government subsidies, same medical quality. Lower premiums."
+            color="emerald"
+          />
+        </div>
+      ) : hospitalPref === 'private' ? (
+        // Step 1 (Private): Room type preference
+        <div className="space-y-3 mb-8">
+          <OptionCard
+            isSelected={answers.hospitalization.willingToPayPremium === true}
+            onClick={() => setHospitalizationAnswers({ willingToPayPremium: true })}
+            icon={<Sparkles className="h-5 w-5" style={{ color: monetWizard.amber }} />}
+            title="Single Room"
+            description="Private bathroom, full choice of doctors. ~$3,500 deductible from 2026."
+            color="amber"
+          />
+          <OptionCard
+            isSelected={answers.hospitalization.willingToPayPremium === false}
+            onClick={() => setHospitalizationAnswers({ willingToPayPremium: false })}
+            icon={<Check className="h-5 w-5" style={{ color: monetWizard.sage }} />}
+            title="Shared Room (2-4 beds)"
+            description="Air-conditioned with shared facilities. Lower premiums than single room."
+            color="emerald"
+          />
+
+          <p className="text-xs text-center pt-2" style={{ color: monetWizard.textMuted }}>
+            From Apr 2026: Minimum $3,500 deductible + 5% co-pay (capped at $6K/year)
+          </p>
+        </div>
+      ) : (
+        // Step 1 (Public): Ward class preference
+        <div className="space-y-3 mb-8">
+          <OptionCard
+            isSelected={answers.hospitalization.willingToPayPremium === true}
+            onClick={() => setHospitalizationAnswers({ willingToPayPremium: true, comfortableWithWait: false })}
+            icon={<Sparkles className="h-5 w-5" style={{ color: monetWizard.blue }} />}
+            title="Class A / B1"
+            description="Single room or 4-bed with air-con. Requires ISP upgrade. ~$2,500-3,500 deductible."
+            color="blue"
+          />
+          <OptionCard
+            isSelected={answers.hospitalization.willingToPayPremium === false && answers.hospitalization.comfortableWithWait === false}
+            onClick={() => setHospitalizationAnswers({ willingToPayPremium: false, comfortableWithWait: false })}
+            icon={<Check className="h-5 w-5" style={{ color: monetWizard.sage }} />}
+            title="Class B2+"
+            description="Air-con 6-bed rooms. Good subsidies. Requires ISP upgrade. ~$2,000 deductible."
+            color="emerald"
+          />
+          <OptionCard
+            isSelected={answers.hospitalization.comfortableWithWait === true && answers.hospitalization.willingToPayPremium !== true}
+            onClick={() => setHospitalizationAnswers({ willingToPayPremium: false, comfortableWithWait: true })}
+            icon={<Clock className="h-5 w-5" style={{ color: monetWizard.textMuted }} />}
+            title="Class C"
+            description="Fan-cooled open ward. Maximum subsidies. Covered by MediShield Life alone."
+            color="emerald"
+          />
+
+          <p className="text-xs text-center pt-2" style={{ color: monetWizard.textMuted }}>
+            MediShield Life covers Class B2/C. Class A/B1 needs an Integrated Shield Plan (ISP).
+          </p>
+        </div>
+      )}
+
+      {/* Navigation - Monet style */}
+      <div className="flex gap-3 justify-end">
+        <button
+          type="button"
+          onClick={handleBack}
+          className="flex items-center gap-2 rounded-xl px-5 py-3 text-sm font-medium transition-all duration-300 hover:scale-[1.02]"
+          style={{
+            background: monetWizard.cardBg,
+            border: `1px solid ${monetWizard.cardBorder}`,
+            color: monetWizard.textSecondary,
+          }}
+        >
+          <ArrowLeft className="h-4 w-4" />
+          Back
+        </button>
+        <button
+          type="button"
+          onClick={handleNext}
+          disabled={!canProceed}
+          className="flex items-center justify-center gap-2 rounded-xl px-6 py-3 text-sm font-medium transition-all duration-300 hover:scale-[1.02]"
+          style={{
+            background: canProceed
+              ? `linear-gradient(135deg, ${monetWizard.sageDark}, ${monetWizard.sage})`
+              : 'rgba(155, 155, 155, 0.2)',
+            color: canProceed ? 'white' : monetWizard.textMuted,
+            boxShadow: canProceed ? `0 4px 16px ${monetWizard.shadowMedium}` : 'none',
+            cursor: canProceed ? 'pointer' : 'not-allowed',
+          }}
+        >
+          Continue
+          <ArrowRight className="h-4 w-4" />
+        </button>
+      </div>
+    </div>
+  )
+}
+
+// LIFE/TPD QUESTIONNAIRE
+function LifeTpdQuestionnaire({
+  onNext,
+  onBack,
+}: {
+  onNext: () => void
+  onBack: () => void
+}) {
+  const colorScheme = useColorScheme()
+  const monetWizard = getInsuranceTheme(colorScheme)
+
+  const answers = useQuestionnaireAnswers()
+  const guidelines = useGuidelines()
+  const { setLifeTpdAnswers } = useGuidelinesActions()
+  const [subStep, setSubStep] = useState(0)
+  const selectedPersonId = useSelectedPersonId()
+  const autoPopulate = useQuestionnaireAutoPopulate(selectedPersonId)
+  const { includedPersons } = usePersonFilter()
+  const { data: incomes = [] } = useIncomesQuery()
+
+  // Other persons (excluding primary) as potential dependents
+  const otherPersons = useMemo(() => {
+    return includedPersons
+      .filter((p) => p.id !== selectedPersonId)
+      .map((p) => {
+        const today = new Date()
+        const birth = new Date(p.dateOfBirth)
+        let age = today.getFullYear() - birth.getFullYear()
+        const monthDiff = today.getMonth() - birth.getMonth()
+        if (monthDiff < 0 || (monthDiff === 0 && today.getDate() < birth.getDate())) {
+          age--
+        }
+        return { ...p, age: Math.max(0, age) }
+      })
+  }, [includedPersons, selectedPersonId])
+
+  // Derive dependent count and youngest age from selected person IDs
+  const handleDependentSelection = (personId: string) => {
+    const currentIds = answers.lifeTpd.dependentPersonIds || []
+    const isSelected = currentIds.includes(personId)
+    const newIds = isSelected
+      ? currentIds.filter((id) => id !== personId)
+      : [...currentIds, personId]
+
+    // Calculate youngest age from selected dependents
+    const selectedDependents = otherPersons.filter((p) => newIds.includes(p.id))
+    const youngestAge = selectedDependents.length > 0
+      ? Math.min(...selectedDependents.map((p) => p.age))
+      : null
+    const yearsUntilIndependent = youngestAge !== null ? Math.max(0, 22 - youngestAge) : 0
+
+    // If the deselected person was the spouse, clear spouse too
+    const spouseCleared = isSelected && personId === answers.lifeTpd.spousePersonId
+      ? { spousePersonId: null, spouseHasIncome: false, spouseIncome: 0 }
+      : {}
+
+    setLifeTpdAnswers({
+      dependentPersonIds: newIds,
+      dependentCount: newIds.length,
+      youngestDependentAge: youngestAge,
+      yearsUntilIndependent,
+      ...spouseCleared,
+    })
+  }
+
+  // Auto-calculate spouse income when spouse is selected
+  const spouseIncome = useMemo(() => {
+    if (!answers.lifeTpd.spousePersonId) return 0
+    return calculateAnnualIncomeForPerson(incomes, answers.lifeTpd.spousePersonId)
+  }, [incomes, answers.lifeTpd.spousePersonId])
+
+  const totalSubSteps = 2 // Dependents, then finances
+
+  const handleNext = () => {
+    if (subStep < totalSubSteps - 1) {
+      setSubStep(subStep + 1)
+    } else {
+      onNext()
+    }
+  }
+
+  const handleBack = () => {
+    if (subStep > 0) {
+      setSubStep(subStep - 1)
+    } else {
+      onBack()
+    }
+  }
+
+  // Calculate recommended coverage based on answers + financial data
+  const incomeReplacement = answers.lifeTpd.dependentCount > 0
+    ? guidelines.annualIncome * answers.lifeTpd.yearsUntilIndependent
+    : 0
+  const sanitizedObligations = Math.max(0, answers.lifeTpd.futureObligations)
+  const totalNeeded = incomeReplacement +
+    autoPopulate.computed.totalMortgage +
+    autoPopulate.computed.totalOtherDebts +
+    sanitizedObligations -
+    autoPopulate.computed.totalAssets
+
+  return (
+    <div className="max-w-xl mx-auto">
+      <SectionProgressDots current={subStep} total={totalSubSteps} />
+
+      {/* Header - Monet style */}
+      <div className="text-center mb-8">
+        <h2
+          className="text-2xl font-semibold mb-3"
+          style={{
+            color: monetWizard.textPrimary,
+          }}
+        >
+          Life / TPD Coverage
+        </h2>
+        <p style={{ color: monetWizard.textSecondary }}>
+          {subStep === 0
+            ? 'Who depends on your income?'
+            : 'What financial obligations need to be covered?'}
+        </p>
+      </div>
+
+      {subStep === 0 ? (
+        // Step 0: Dependents — select from persons list
+        <div className="space-y-5 mb-8">
+          <div>
+            <label className="block text-sm mb-3" style={{ color: monetWizard.textSecondary }}>
+              Who financially depends on you?
+            </label>
+
+            {otherPersons.length > 0 ? (
+              <div className="space-y-2">
+                {otherPersons.map((person) => {
+                  const isSelected = (answers.lifeTpd.dependentPersonIds || []).includes(person.id)
+                  return (
+                    <button
+                      key={person.id}
+                      type="button"
+                      onClick={() => handleDependentSelection(person.id)}
+                      className="w-full flex items-center justify-between rounded-xl px-4 py-3 transition-all duration-200"
+                      style={{
+                        background: isSelected ? `${monetWizard.blue}18` : monetWizard.surfaceBg,
+                        border: `1px solid ${isSelected ? `${monetWizard.blue}60` : monetWizard.cardBorder}`,
+                      }}
+                    >
+                      <div className="flex items-center gap-3">
+                        <div
+                          className="h-8 w-8 rounded-full flex items-center justify-center text-xs font-medium"
+                          style={{
+                            background: person.displayColor || monetWizard.blue,
+                            color: '#fff',
+                          }}
+                        >
+                          {person.name.charAt(0).toUpperCase()}
+                        </div>
+                        <div className="text-left">
+                          <p className="text-sm font-medium" style={{ color: monetWizard.textPrimary }}>
+                            {person.name}
+                          </p>
+                          <p className="text-xs" style={{ color: monetWizard.textMuted }}>
+                            Age {person.age}
+                            {person.relationship && person.relationship !== 'self'
+                              ? ` · ${person.relationship.charAt(0).toUpperCase() + person.relationship.slice(1)}`
+                              : person.age < 18 ? ' · Child' : person.age >= 65 ? ' · Elderly' : ''}
+                          </p>
+                        </div>
+                      </div>
+                      <div
+                        className="h-5 w-5 rounded-md flex items-center justify-center transition-all"
+                        style={{
+                          background: isSelected ? monetWizard.blue : 'transparent',
+                          border: `1.5px solid ${isSelected ? monetWizard.blue : monetWizard.cardBorder}`,
+                        }}
+                      >
+                        {isSelected && <Check className="h-3 w-3 text-white" />}
+                      </div>
+                    </button>
+                  )
+                })}
+              </div>
+            ) : (
+              <div
+                className="p-4 rounded-2xl text-center"
+                style={{
+                  background: monetWizard.surfaceBg,
+                  border: `1px solid ${monetWizard.cardBorder}`,
+                }}
+              >
+                <p className="text-sm" style={{ color: monetWizard.textMuted }}>
+                  No other persons added. Add family members in the main app to select them here.
+                </p>
+              </div>
+            )}
+
+            {(answers.lifeTpd.dependentPersonIds || []).length > 0 && (
+              <p className="text-xs mt-2" style={{ color: monetWizard.textMuted }}>
+                {answers.lifeTpd.dependentCount} dependent{answers.lifeTpd.dependentCount !== 1 ? 's' : ''} selected
+                {answers.lifeTpd.youngestDependentAge !== null && (
+                  <> · Youngest age {answers.lifeTpd.youngestDependentAge} · {answers.lifeTpd.yearsUntilIndependent} years until independent</>
+                )}
+              </p>
+            )}
+          </div>
+
+          {(answers.lifeTpd.dependentPersonIds || []).length > 0 && (
+            <div>
+              <label className="text-[10px] uppercase tracking-wider block mb-2" style={{ color: monetWizard.textMuted }}>
+                Spouse / Partner (has own income)
+              </label>
+              <PersonSelector
+                value={answers.lifeTpd.spousePersonId}
+                onChange={(personId) => {
+                  const hasIncome = personId ? calculateAnnualIncomeForPerson(incomes, personId) > 0 : false
+                  const income = personId ? calculateAnnualIncomeForPerson(incomes, personId) : 0
+                  setLifeTpdAnswers({
+                    spousePersonId: personId,
+                    spouseHasIncome: hasIncome,
+                    spouseIncome: income,
+                  })
+                }}
+                placeholder="None"
+                variant={colorScheme === 'monet' ? 'monet' : 'dark'}
+                showCreate={false}
+                excludePersonIds={[
+                  ...(selectedPersonId ? [selectedPersonId] : []),
+                  ...otherPersons.filter((p) => p.relationship === 'child').map((p) => p.id),
+                ]}
+              />
+              <p className="text-xs mt-1.5" style={{ color: monetWizard.textMuted }}>
+                {answers.lifeTpd.spousePersonId
+                  ? spouseIncome > 0
+                    ? `Annual income: ${formatCurrency(spouseIncome)} — reduces coverage needed`
+                    : 'No income found for this person'
+                  : 'Select if spouse/partner has their own income — this reduces coverage needed'}
+              </p>
+            </div>
+          )}
+
+          {(answers.lifeTpd.dependentPersonIds || []).length === 0 && otherPersons.length > 0 && (
+            <div
+              className="p-4 rounded-2xl"
+              style={{
+                background: `${monetWizard.sage}12`,
+                border: `1px solid ${monetWizard.sage}25`,
+              }}
+            >
+              <p className="text-sm" style={{ color: monetWizard.textSecondary }}>
+                <strong>No dependents?</strong> You may only need minimal coverage for final expenses
+                (funeral costs, outstanding debts). Consider if this changes in the future.
+              </p>
+            </div>
+          )}
+        </div>
+      ) : (
+        // Step 1: Financial obligations
+        <div className="space-y-5 mb-6">
+          {/* Auto-fetched financial summary */}
+          <div
+            className="rounded-2xl p-4 space-y-3"
+            style={{
+              background: monetWizard.surfaceBg,
+              border: `1px solid ${monetWizard.cardBorder}`,
+            }}
+          >
+            <div className="flex items-center gap-2 mb-1">
+              <Check className="h-3.5 w-3.5" style={{ color: monetWizard.sage }} />
+              <p className="text-[10px] uppercase tracking-wider" style={{ color: monetWizard.sage }}>
+                From your financial data
+              </p>
+            </div>
+
+            <div className="flex items-center justify-between">
+              <span className="text-sm" style={{ color: monetWizard.textSecondary }}>
+                Outstanding mortgage
+              </span>
+              <span className="text-sm font-mono tabular-nums font-medium" style={{ color: monetWizard.textPrimary }}>
+                {formatCurrency(autoPopulate.computed.totalMortgage)}
+              </span>
+            </div>
+
+            <div className="flex items-center justify-between">
+              <span className="text-sm" style={{ color: monetWizard.textSecondary }}>
+                Other debts
+              </span>
+              <span className="text-sm font-mono tabular-nums font-medium" style={{ color: monetWizard.textPrimary }}>
+                {formatCurrency(autoPopulate.computed.totalOtherDebts)}
+              </span>
+            </div>
+
+            <div
+              className="flex items-center justify-between pt-3"
+              style={{ borderTop: `1px solid ${monetWizard.cardBorder}` }}
+            >
+              <span className="text-sm" style={{ color: monetWizard.textSecondary }}>
+                Existing assets
+              </span>
+              <span className="text-sm font-mono tabular-nums font-medium" style={{ color: monetWizard.textPrimary }}>
+                {formatCurrency(autoPopulate.computed.totalAssets)}
+              </span>
+            </div>
+
+            {!autoPopulate.sources.liabilities && !autoPopulate.sources.assets && (
+              <p className="text-xs" style={{ color: monetWizard.textMuted }}>
+                No financial data found. Add liabilities and assets in the main app for automatic calculation.
+              </p>
+            )}
+          </div>
+
+          <NumberInput
+            label="Future obligations (children's education fund, etc.)"
+            value={Math.max(0, answers.lifeTpd.futureObligations)}
+            onChange={(value) => setLifeTpdAnswers({ futureObligations: Math.max(0, value) })}
+            helpText="University education in Singapore costs ~$50-100K per child"
+          />
+
+          {/* Calculated recommendation - Monet style */}
+          <div
+            className="p-4 rounded-2xl"
+            style={{
+              background: `${monetWizard.blueLight}40`,
+              border: `1px solid ${monetWizard.blue}25`,
+            }}
+          >
+            <div className="flex items-center justify-between mb-2">
+              <span className="text-sm" style={{ color: monetWizard.blue }}>Calculated coverage needed:</span>
+              <span className="font-mono tabular-nums font-semibold" style={{ color: monetWizard.textPrimary }}>
+                {formatCurrency(Math.max(0, totalNeeded))}
+              </span>
+            </div>
+            <p className="text-xs font-mono tabular-nums" style={{ color: monetWizard.textSecondary }}>
+              = {formatCurrency(incomeReplacement)} (income replacement) +
+              {formatCurrency(autoPopulate.computed.totalMortgage + autoPopulate.computed.totalOtherDebts)} (debts) +
+              {formatCurrency(sanitizedObligations)} (obligations) -
+              {formatCurrency(autoPopulate.computed.totalAssets)} (assets)
+            </p>
+          </div>
+        </div>
+      )}
+
+      {/* Navigation - Monet style */}
+      <div className="flex gap-3 justify-end">
+        <button
+          type="button"
+          onClick={handleBack}
+          className="flex items-center gap-2 rounded-xl px-5 py-3 text-sm font-medium transition-all duration-300 hover:scale-[1.02]"
+          style={{
+            background: monetWizard.cardBg,
+            border: `1px solid ${monetWizard.cardBorder}`,
+            color: monetWizard.textSecondary,
+          }}
+        >
+          <ArrowLeft className="h-4 w-4" />
+          Back
+        </button>
+        <button
+          type="button"
+          onClick={handleNext}
+          className="flex items-center justify-center gap-2 rounded-xl px-6 py-3 text-sm font-medium transition-all duration-300 hover:scale-[1.02]"
+          style={{
+            background: `linear-gradient(135deg, ${monetWizard.sageDark}, ${monetWizard.sage})`,
+            color: 'white',
+            boxShadow: `0 4px 16px ${monetWizard.shadowMedium}`,
+          }}
+        >
+          Continue
+          <ArrowRight className="h-4 w-4" />
+        </button>
+      </div>
+    </div>
+  )
+}
+
+// CRITICAL ILLNESS QUESTIONNAIRE
+function CriticalIllnessQuestionnaire({
+  onNext,
+  onBack,
+}: {
+  onNext: () => void
+  onBack: () => void
+}) {
+  const colorScheme = useColorScheme()
+  const monetWizard = getInsuranceTheme(colorScheme)
+
+  const answers = useQuestionnaireAnswers()
+  const guidelines = useGuidelines()
+  const { setCriticalIllnessAnswers } = useGuidelinesActions()
+
+  const monthlyIncome = guidelines.annualIncome / 12
+  const monthlyExpenses = answers.criticalIllness.monthlyExpenses || monthlyIncome * 0.7
+
+  // Calculate recommendation
+  const totalNeeded = (monthlyExpenses * answers.criticalIllness.expectedRecoveryMonths) -
+    (answers.criticalIllness.emergencyFundMonths * monthlyExpenses) -
+    answers.criticalIllness.existingCiCoverage
+
+  return (
+    <div className="max-w-xl mx-auto">
+      {/* Header - Monet style */}
+      <div className="text-center mb-8">
+        <h2
+          className="text-2xl font-semibold mb-3"
+          style={{
+            color: monetWizard.textPrimary,
+          }}
+        >
+          Critical Illness Coverage
+        </h2>
+        <p style={{ color: monetWizard.textSecondary }}>
+          Can you survive financially during a long recovery period?
+        </p>
+      </div>
+
+      <div className="space-y-5 mb-6">
+        <div>
+          <label className="block text-sm mb-3" style={{ color: monetWizard.textSecondary }}>
+            If diagnosed with a critical illness, how long would you need to recover?
+          </label>
+          <div
+            className="p-4 rounded-xl"
+            style={{
+              background: monetWizard.surfaceBg,
+              border: `1px solid ${monetWizard.cardBorder}`,
+            }}
+          >
+            <div className="flex items-center justify-between mb-3">
+              <div className="flex items-center gap-2">
+                <input
+                  type="text"
+                  inputMode="numeric"
+                  pattern="[0-9]*"
+                  value={answers.criticalIllness.expectedRecoveryMonths}
+                  onChange={(e) => {
+                    const raw = e.target.value
+                    if (raw === '') {
+                      setCriticalIllnessAnswers({ expectedRecoveryMonths: 0 })
+                      return
+                    }
+                    const val = parseInt(raw, 10)
+                    if (!isNaN(val) && val >= 0) {
+                      setCriticalIllnessAnswers({ expectedRecoveryMonths: val })
+                    }
+                  }}
+                  onBlur={(e) => {
+                    const val = parseInt(e.target.value, 10)
+                    if (isNaN(val) || val < 1) {
+                      setCriticalIllnessAnswers({ expectedRecoveryMonths: 12 })
+                    }
+                  }}
+                  className="w-20 text-2xl font-semibold tabular-nums text-center rounded-lg focus:outline-none focus:ring-2 transition-all"
+                  style={{
+                    color: monetWizard.textPrimary,
+                    background: monetWizard.cardBg,
+                    border: `1px solid ${monetWizard.cardBorder}`,
+                  }}
+                />
+                <span className="text-lg" style={{ color: monetWizard.textSecondary }}>months</span>
+              </div>
+              <span
+                className="text-xs px-2 py-1 rounded-lg"
+                style={{
+                  background: `${monetWizard.purpleLight}40`,
+                  color: monetWizard.purple,
+                }}
+              >
+                {answers.criticalIllness.expectedRecoveryMonths <= 6
+                  ? 'mild'
+                  : answers.criticalIllness.expectedRecoveryMonths <= 12
+                  ? 'typical'
+                  : answers.criticalIllness.expectedRecoveryMonths <= 24
+                  ? 'serious'
+                  : 'severe'}
+              </span>
+            </div>
+            <Slider.Root
+              className="relative flex items-center h-5 w-full select-none"
+              min={3}
+              max={48}
+              step={1}
+              value={[Math.min(48, Math.max(3, answers.criticalIllness.expectedRecoveryMonths))]}
+              onValueChange={(value) => setCriticalIllnessAnswers({ expectedRecoveryMonths: value[0] })}
+              aria-label="Recovery months"
+            >
+              <Slider.Track
+                className="relative h-2 w-full rounded-full"
+                style={{ background: monetWizard.cardBorder }}
+              >
+                <Slider.Range
+                  className="absolute h-full rounded-full"
+                  style={{ background: monetWizard.purple }}
+                />
+              </Slider.Track>
+              <Slider.Thumb
+                className="block h-5 w-5 rounded-full shadow-md focus:outline-none focus:ring-2 hover:scale-110 transition-transform cursor-grab active:cursor-grabbing"
+                style={{
+                  background: monetWizard.purple,
+                  border: '2px solid white',
+                  boxShadow: `0 2px 8px ${monetWizard.shadowMedium}`,
+                }}
+              />
+            </Slider.Root>
+            <div className="flex justify-between mt-2 text-xs" style={{ color: monetWizard.textMuted }}>
+              <span>3 mo</span>
+              <span>48 mo+</span>
+            </div>
+          </div>
+        </div>
+
+        <NumberInput
+          label="Monthly expenses if unable to work"
+          value={answers.criticalIllness.monthlyExpenses}
+          onChange={(value) => setCriticalIllnessAnswers({ monthlyExpenses: value })}
+          placeholder={Math.round(monthlyIncome * 0.7).toString()}
+          helpText={`Default estimate: 70% of monthly income (${formatCurrency(Math.round(monthlyIncome * 0.7))})`}
+        />
+
+        <div>
+          <label className="block text-sm mb-3" style={{ color: monetWizard.textSecondary }}>
+            How many months can your emergency fund cover?
+          </label>
+          <div
+            className="p-4 rounded-xl"
+            style={{
+              background: monetWizard.surfaceBg,
+              border: `1px solid ${monetWizard.cardBorder}`,
+            }}
+          >
+            <div className="flex items-center justify-between mb-3">
+              <div className="flex items-center gap-2">
+                <input
+                  type="text"
+                  inputMode="numeric"
+                  pattern="[0-9]*"
+                  value={answers.criticalIllness.emergencyFundMonths}
+                  onChange={(e) => {
+                    const raw = e.target.value
+                    if (raw === '') {
+                      setCriticalIllnessAnswers({ emergencyFundMonths: 0 })
+                      return
+                    }
+                    const val = parseInt(raw, 10)
+                    if (!isNaN(val) && val >= 0) {
+                      setCriticalIllnessAnswers({ emergencyFundMonths: val })
+                    }
+                  }}
+                  onBlur={(e) => {
+                    const val = parseInt(e.target.value, 10)
+                    if (isNaN(val) || val < 0) {
+                      setCriticalIllnessAnswers({ emergencyFundMonths: 0 })
+                    }
+                  }}
+                  className="w-20 text-2xl font-semibold tabular-nums text-center rounded-lg focus:outline-none focus:ring-2 transition-all"
+                  style={{
+                    color: monetWizard.textPrimary,
+                    background: monetWizard.cardBg,
+                    border: `1px solid ${monetWizard.cardBorder}`,
+                  }}
+                />
+                <span className="text-lg" style={{ color: monetWizard.textSecondary }}>months</span>
+              </div>
+              {answers.criticalIllness.emergencyFundMonths >= 6 && (
+                <span
+                  className="text-xs px-2 py-1 rounded-lg"
+                  style={{
+                    background: `${monetWizard.sageLight}40`,
+                    color: monetWizard.sageDark,
+                  }}
+                >
+                  {answers.criticalIllness.emergencyFundMonths >= 12 ? 'excellent' : 'good'}
+                </span>
+              )}
+            </div>
+            <Slider.Root
+              className="relative flex items-center h-5 w-full select-none"
+              min={0}
+              max={24}
+              step={1}
+              value={[Math.min(24, answers.criticalIllness.emergencyFundMonths)]}
+              onValueChange={(value) => setCriticalIllnessAnswers({ emergencyFundMonths: value[0] })}
+              aria-label="Emergency fund months"
+            >
+              <Slider.Track
+                className="relative h-2 w-full rounded-full"
+                style={{ background: monetWizard.cardBorder }}
+              >
+                <Slider.Range
+                  className="absolute h-full rounded-full"
+                  style={{ background: monetWizard.sage }}
+                />
+              </Slider.Track>
+              <Slider.Thumb
+                className="block h-5 w-5 rounded-full shadow-md focus:outline-none focus:ring-2 hover:scale-110 transition-transform cursor-grab active:cursor-grabbing"
+                style={{
+                  background: monetWizard.sage,
+                  border: '2px solid white',
+                  boxShadow: `0 2px 8px ${monetWizard.shadowMedium}`,
+                }}
+              />
+            </Slider.Root>
+            <div className="flex justify-between mt-2 text-xs" style={{ color: monetWizard.textMuted }}>
+              <span>0 mo</span>
+              <span>24 mo+</span>
+            </div>
+          </div>
+        </div>
+
+        <NumberInput
+          label="Existing CI coverage (employer or personal policies)"
+          value={answers.criticalIllness.existingCiCoverage}
+          onChange={(value) => setCriticalIllnessAnswers({ existingCiCoverage: value })}
+          placeholder="0"
+          helpText="Check your employment benefits and existing policies"
+        />
+
+        {/* Calculated recommendation - Monet style */}
+        <div
+          className="p-4 rounded-2xl"
+          style={{
+            background: `${monetWizard.purpleLight}40`,
+            border: `1px solid ${monetWizard.purple}25`,
+          }}
+        >
+          <div className="flex items-center justify-between mb-2">
+            <span className="text-sm" style={{ color: monetWizard.purple }}>Recommended CI coverage:</span>
+            <span className="font-mono tabular-nums font-semibold" style={{ color: monetWizard.textPrimary }}>
+              {formatCurrency(Math.max(0, totalNeeded))}
+            </span>
+          </div>
+          <p className="text-xs font-mono tabular-nums" style={{ color: monetWizard.textSecondary }}>
+            = ({formatCurrency(monthlyExpenses)} × {answers.criticalIllness.expectedRecoveryMonths} months) -
+            ({answers.criticalIllness.emergencyFundMonths} months emergency fund) -
+            ({formatCurrency(answers.criticalIllness.existingCiCoverage)} existing)
+          </p>
+        </div>
+
+        <div
+          className="p-4 rounded-2xl"
+          style={{
+            background: monetWizard.surfaceBg,
+            border: `1px solid ${monetWizard.cardBorder}`,
+          }}
+        >
+          <p className="text-xs" style={{ color: monetWizard.textMuted }}>
+            <strong style={{ color: monetWizard.textSecondary }}>Key insight:</strong> Critical illness coverage
+            replaces income during recovery. The payout is a lump sum, not monthly payments,
+            so you have flexibility in how you use it.
+          </p>
+        </div>
+      </div>
+
+      {/* Navigation - Monet style */}
+      <div className="flex gap-3 justify-end">
+        <button
+          type="button"
+          onClick={onBack}
+          className="flex items-center gap-2 rounded-xl px-5 py-3 text-sm font-medium transition-all duration-300 hover:scale-[1.02]"
+          style={{
+            background: monetWizard.cardBg,
+            border: `1px solid ${monetWizard.cardBorder}`,
+            color: monetWizard.textSecondary,
+          }}
+        >
+          <ArrowLeft className="h-4 w-4" />
+          Back
+        </button>
+        <button
+          type="button"
+          onClick={onNext}
+          className="flex items-center justify-center gap-2 rounded-xl px-6 py-3 text-sm font-medium transition-all duration-300 hover:scale-[1.02]"
+          style={{
+            background: `linear-gradient(135deg, ${monetWizard.sageDark}, ${monetWizard.sage})`,
+            color: 'white',
+            boxShadow: `0 4px 16px ${monetWizard.shadowMedium}`,
+          }}
+        >
+          Continue
+          <ArrowRight className="h-4 w-4" />
+        </button>
+      </div>
+    </div>
+  )
+}
+
+// PERSONAL ACCIDENT QUESTIONNAIRE
+function PersonalAccidentQuestionnaire({
+  onNext,
+  onBack,
+}: {
+  onNext: () => void
+  onBack: () => void
+}) {
+  const colorScheme = useColorScheme()
+  const monetWizard = getInsuranceTheme(colorScheme)
+
+  const answers = useQuestionnaireAnswers()
+  const { setPersonalAccidentAnswers } = useGuidelinesActions()
+
+  return (
+    <div className="max-w-xl mx-auto">
+      {/* Header - Monet style */}
+      <div className="text-center mb-8">
+        <h2
+          className="text-2xl font-semibold mb-3"
+          style={{
+            color: monetWizard.textPrimary,
+          }}
+        >
+          Personal Accident Coverage
+        </h2>
+        <p style={{ color: monetWizard.textSecondary }}>
+          How risky is your lifestyle and occupation?
+        </p>
+      </div>
+
+      <div className="space-y-5 mb-6">
+        <div>
+          <label className="block text-sm mb-3" style={{ color: monetWizard.textSecondary }}>
+            What's your occupation risk level?
+          </label>
+          <div className="space-y-2">
+            <OptionCard
+              isSelected={answers.personalAccident.occupationRisk === 'low'}
+              onClick={() => setPersonalAccidentAnswers({ occupationRisk: 'low' })}
+              icon={<Briefcase className="h-5 w-5" style={{ color: monetWizard.sage }} />}
+              title="Low Risk (Office/Desk job)"
+              description="Professional services, administrative, work-from-home"
+              color="emerald"
+            />
+            <OptionCard
+              isSelected={answers.personalAccident.occupationRisk === 'medium'}
+              onClick={() => setPersonalAccidentAnswers({ occupationRisk: 'medium' })}
+              icon={<Briefcase className="h-5 w-5" style={{ color: monetWizard.amber }} />}
+              title="Medium Risk (Field work/Healthcare)"
+              description="Sales, healthcare workers, teachers, light manual work"
+              color="amber"
+            />
+            <OptionCard
+              isSelected={answers.personalAccident.occupationRisk === 'high'}
+              onClick={() => setPersonalAccidentAnswers({ occupationRisk: 'high' })}
+              icon={<AlertCircle className="h-5 w-5" style={{ color: monetWizard.coralRose }} />}
+              title="High Risk (Manual labor/Dangerous)"
+              description="Construction, delivery riders, machinery operators"
+              color="amber"
+            />
+          </div>
+        </div>
+
+        <NumberInput
+          label="Existing PA coverage (employer or personal)"
+          value={answers.personalAccident.existingPaCoverage}
+          onChange={(value) => setPersonalAccidentAnswers({ existingPaCoverage: value })}
+          placeholder="0"
+        />
+      </div>
+
+      {/* Navigation - Monet style */}
+      <div className="flex gap-3 justify-end">
+        <button
+          type="button"
+          onClick={onBack}
+          className="flex items-center gap-2 rounded-xl px-5 py-3 text-sm font-medium transition-all duration-300 hover:scale-[1.02]"
+          style={{
+            background: monetWizard.cardBg,
+            border: `1px solid ${monetWizard.cardBorder}`,
+            color: monetWizard.textSecondary,
+          }}
+        >
+          <ArrowLeft className="h-4 w-4" />
+          Back
+        </button>
+        <button
+          type="button"
+          onClick={onNext}
+          className="flex items-center justify-center gap-2 rounded-xl px-6 py-3 text-sm font-medium transition-all duration-300 hover:scale-[1.02]"
+          style={{
+            background: `linear-gradient(135deg, ${monetWizard.sageDark}, ${monetWizard.sage})`,
+            color: 'white',
+            boxShadow: `0 4px 16px ${monetWizard.shadowMedium}`,
+          }}
+        >
+          Continue
+          <ArrowRight className="h-4 w-4" />
+        </button>
+      </div>
+    </div>
+  )
+}
+
+// SELF-INSURANCE QUESTIONNAIRE
+function SelfInsuranceQuestionnaire({
+  onNext,
+  onBack,
+}: {
+  onNext: () => void
+  onBack: () => void
+}) {
+  const colorScheme = useColorScheme()
+  const monetWizard = getInsuranceTheme(colorScheme)
+
+  const answers = useQuestionnaireAnswers()
+  const { setSelfInsuranceAnswers, applyQuestionnaireRecommendations } = useGuidelinesActions()
+  const recommendations = useQuestionnaireRecommendations()
+  const selectedPersonId = useSelectedPersonId()
+  const autoPopulate = useQuestionnaireAutoPopulate(selectedPersonId)
+
+  const handleContinue = () => {
+    // Apply all questionnaire recommendations to the guidelines
+    applyQuestionnaireRecommendations()
+    onNext()
+  }
+
+  return (
+    <div className="max-w-xl mx-auto">
+      {/* Header - Monet style */}
+      <div className="text-center mb-8">
+        <h2
+          className="text-2xl font-semibold mb-3"
+          style={{
+            color: monetWizard.textPrimary,
+          }}
+        >
+          Self-Insurance Capability
+        </h2>
+        <p style={{ color: monetWizard.textSecondary }}>
+          Can your assets cover some risks, reducing the need for insurance?
+        </p>
+      </div>
+
+      <div className="space-y-5 mb-6">
+        <NumberInput
+          label="Total liquid net worth (savings, investments, accessible assets)"
+          value={answers.selfInsurance.liquidNetWorth}
+          onChange={(value) => setSelfInsuranceAnswers({ liquidNetWorth: value })}
+          placeholder="0"
+          helpText="Assets you could access within 1-3 months if needed"
+          preFilled={autoPopulate.sources.assets}
+          preFilledSource="From assets"
+        />
+
+        <div
+          className="flex items-center gap-3 p-4 rounded-2xl"
+          style={{
+            background: monetWizard.surfaceBg,
+            border: `1px solid ${monetWizard.cardBorder}`,
+          }}
+        >
+          <button
+            type="button"
+            onClick={() => setSelfInsuranceAnswers({ willingToSelfInsure: !answers.selfInsurance.willingToSelfInsure })}
+            className="relative h-6 w-11 rounded-full transition-colors shrink-0"
+            style={{
+              background: answers.selfInsurance.willingToSelfInsure ? monetWizard.sage : monetWizard.cardBorder,
+            }}
+          >
+            <span
+              className="absolute top-0.5 h-5 w-5 rounded-full bg-white transition-all shadow-sm"
+              style={{
+                left: answers.selfInsurance.willingToSelfInsure ? '22px' : '2px',
+              }}
+            />
+          </button>
+          <div>
+            <p className="text-sm" style={{ color: monetWizard.textPrimary }}>Willing to use assets to cover insurance gaps</p>
+            <p className="text-xs" style={{ color: monetWizard.textMuted }}>This can reduce your recommended coverage amounts</p>
+          </div>
+        </div>
+
+        {answers.selfInsurance.willingToSelfInsure && (
+          <NumberInput
+            label="Keep this amount protected (don't use for self-insurance)"
+            value={answers.selfInsurance.selfInsuranceThreshold}
+            onChange={(value) => setSelfInsuranceAnswers({ selfInsuranceThreshold: value })}
+            placeholder="100000"
+            helpText="Assets above this threshold can offset insurance needs"
+          />
+        )}
+
+        {/* Preview of recommendations - Monet style */}
+        <div
+          className="rounded-2xl p-5"
+          style={{
+            background: `${monetWizard.sageLight}40`,
+            border: `1px solid ${monetWizard.sage}25`,
+          }}
+        >
+          <p className="text-sm font-medium mb-4" style={{ color: monetWizard.textPrimary }}>Based on your answers, we recommend:</p>
+          <div className="space-y-3">
+            <div className="flex items-center justify-between">
+              <span className="text-sm" style={{ color: monetWizard.textSecondary }}>Hospitalization</span>
+              <span className="text-sm" style={{ color: monetWizard.textPrimary }}>
+                {wardClassConfig[recommendations.hospitalization.wardClass].label}
+                {recommendations.hospitalization.rider && ' + Rider'}
+              </span>
+            </div>
+            <div className="flex items-center justify-between">
+              <span className="text-sm" style={{ color: monetWizard.textSecondary }}>Life / TPD</span>
+              <span className="text-sm font-mono tabular-nums" style={{ color: monetWizard.textPrimary }}>{formatCurrency(recommendations.lifeTpd)}</span>
+            </div>
+            <div className="flex items-center justify-between">
+              <span className="text-sm" style={{ color: monetWizard.textSecondary }}>Critical Illness</span>
+              <span className="text-sm font-mono tabular-nums" style={{ color: monetWizard.textPrimary }}>{formatCurrency(recommendations.criticalIllness)}</span>
+            </div>
+            <div className="flex items-center justify-between">
+              <span className="text-sm" style={{ color: monetWizard.textSecondary }}>Personal Accident</span>
+              <span className="text-sm font-mono tabular-nums" style={{ color: monetWizard.textPrimary }}>{formatCurrency(recommendations.personalAccident)}</span>
+            </div>
+          </div>
+        </div>
+
+        <div
+          className="p-4 rounded-2xl"
+          style={{
+            background: `${monetWizard.blueLight}40`,
+            border: `1px solid ${monetWizard.blue}25`,
+          }}
+        >
+          <p className="text-xs" style={{ color: monetWizard.blue }}>
+            <strong>Remember:</strong> These are personalized recommendations based on your
+            specific situation. You can adjust them in the next step.
+          </p>
+        </div>
+      </div>
+
+      {/* Navigation - Monet style */}
+      <div className="flex gap-3 justify-end">
+        <button
+          type="button"
+          onClick={onBack}
+          className="flex items-center gap-2 rounded-xl px-5 py-3 text-sm font-medium transition-all duration-300 hover:scale-[1.02]"
+          style={{
+            background: monetWizard.cardBg,
+            border: `1px solid ${monetWizard.cardBorder}`,
+            color: monetWizard.textSecondary,
+          }}
+        >
+          <ArrowLeft className="h-4 w-4" />
+          Back
+        </button>
+        <button
+          type="button"
+          onClick={handleContinue}
+          className="flex items-center justify-center gap-2 rounded-xl px-6 py-3 text-sm font-medium transition-all duration-300 hover:scale-[1.02]"
+          style={{
+            background: `linear-gradient(135deg, ${monetWizard.sageDark}, ${monetWizard.sage})`,
+            color: 'white',
+            boxShadow: `0 4px 16px ${monetWizard.shadowMedium}`,
+          }}
+        >
+          Apply Recommendations
+          <ArrowRight className="h-4 w-4" />
+        </button>
+      </div>
+    </div>
+  )
+}
+
+// MAIN WIZARD STEP 2 - Guided Questionnaire
+function WizardStep2Questionnaire({ onNext, onBack }: WizardStep2Props) {
+  const colorScheme = useColorScheme()
+  const monetWizard = getInsuranceTheme(colorScheme)
+
+  const [currentSection, setCurrentSection] = useState<QuestionnaireSection>('hospitalization')
+  const [hasAutoPopulated, setHasAutoPopulated] = useState(false)
+
+  const selectedPersonId = useSelectedPersonId()
+  const { setLifeTpdAnswers, setCriticalIllnessAnswers, setSelfInsuranceAnswers } = useGuidelinesActions()
+  const autoPopulateData = useQuestionnaireAutoPopulate(selectedPersonId)
+
+  // Auto-populate questionnaire data on first mount
+  useEffect(() => {
+    if (!hasAutoPopulated && !autoPopulateData.isLoading) {
+      // Only populate if we have actual data from the app
+      const { lifeTpd, criticalIllness, selfInsurance, sources } = autoPopulateData
+
+      // Populate Life/TPD answers if we have relevant data
+      if (sources.persons || sources.liabilities || sources.assets) {
+        setLifeTpdAnswers({
+          ...lifeTpd,
+          // Keep futureObligations as user input since we can't infer it
+        })
+      }
+
+      // Populate Critical Illness answers if we have income data
+      if (sources.income || sources.assets) {
+        setCriticalIllnessAnswers(criticalIllness)
+      }
+
+      // Populate Self Insurance answers if we have asset data
+      if (sources.assets) {
+        setSelfInsuranceAnswers(selfInsurance)
+      }
+
+      setHasAutoPopulated(true)
+    }
+  }, [
+    hasAutoPopulated,
+    autoPopulateData,
+    setLifeTpdAnswers,
+    setCriticalIllnessAnswers,
+    setSelfInsuranceAnswers,
+  ])
+
+  const currentIndex = sectionOrder.indexOf(currentSection)
+
+  const handleSectionNext = () => {
+    if (currentIndex < sectionOrder.length - 1) {
+      setCurrentSection(sectionOrder[currentIndex + 1])
+    } else {
+      onNext()
+    }
+  }
+
+  const handleSectionBack = () => {
+    if (currentIndex > 0) {
+      setCurrentSection(sectionOrder[currentIndex - 1])
+    } else {
+      onBack()
+    }
+  }
+
+  return (
+    <div>
+      {/* Section indicator - minimal pill style */}
+      <div className="flex items-center justify-center gap-1 mb-8">
+        {sectionOrder.map((section, i) => {
+          const config = sectionConfig[section]
+          const isCurrent = section === currentSection
+          const isPast = i < currentIndex
+
+          return (
+            <div
+              key={section}
+              className="flex items-center gap-1.5 px-3 py-1.5 rounded-full text-xs transition-all duration-300"
+              style={{
+                background: isCurrent ? monetWizard.cardBgHover : 'transparent',
+                color: isCurrent
+                  ? monetWizard.textPrimary
+                  : isPast
+                    ? monetWizard.sage
+                    : monetWizard.textMuted,
+                boxShadow: isCurrent ? '0 2px 12px rgba(155, 139, 180, 0.15)' : 'none',
+              }}
+            >
+              <span
+                className="font-medium"
+              >
+                {config.title}
+              </span>
+            </div>
+          )
+        })}
+      </div>
+
+      {/* Render current section questionnaire */}
+      {currentSection === 'hospitalization' && (
+        <HospitalizationQuestionnaire onNext={handleSectionNext} onBack={handleSectionBack} />
+      )}
+      {currentSection === 'life_tpd' && (
+        <LifeTpdQuestionnaire onNext={handleSectionNext} onBack={handleSectionBack} />
+      )}
+      {currentSection === 'critical_illness' && (
+        <CriticalIllnessQuestionnaire onNext={handleSectionNext} onBack={handleSectionBack} />
+      )}
+      {currentSection === 'personal_accident' && (
+        <PersonalAccidentQuestionnaire onNext={handleSectionNext} onBack={handleSectionBack} />
+      )}
+      {currentSection === 'self_insurance' && (
+        <SelfInsuranceQuestionnaire onNext={handleSectionNext} onBack={handleSectionBack} />
+      )}
+    </div>
+  )
+}
+
+// ============================================================================
+// WIZARD STEP 3: SUMMARY & BUDGET
+// ============================================================================
+
+interface WizardStep3Props {
+  onComplete: () => void
+  onBack: () => void
+}
+
+function WizardStep3Summary({ onComplete, onBack }: WizardStep3Props) {
+  const colorScheme = useColorScheme()
+  const monetWizard = getInsuranceTheme(colorScheme)
+
+  const guidelines = useGuidelines()
+  const targets = useGuidelineTargets()
+  const { setMaxPremiumPercentage } = useGuidelinesActions()
+
+  const percentage = Math.round(guidelines.maxPremiumPercentage * 100)
+
+  const coverageTypes: GuidelineCoverageType[] = [
+    'hospitalization',
+    'life_tpd',
+    'critical_illness',
+    'personal_accident',
+  ]
+
+  // Calculate slider fill percentage for gradient
+  const sliderFillPercent = ((percentage - 5) / 15) * 100
+
+  return (
+    <div className="max-w-lg mx-auto">
+      {/* Header - elegant Monet style */}
+      <div className="text-center mb-10">
+        <div
+          className="inline-flex h-16 w-16 items-center justify-center rounded-3xl mb-5"
+          style={{
+            background: `linear-gradient(145deg, ${monetWizard.sunlightGold}, ${monetWizard.sunlightGoldLight})`,
+            boxShadow: `0 8px 32px ${monetWizard.sunlightGold}30`,
+          }}
+        >
+          <Check className="h-7 w-7 text-white" />
+        </div>
+        <h2
+          className="text-2xl font-light tracking-tight mb-3"
+          style={{
+            color: monetWizard.textPrimary,
+          }}
+        >
+          Review your guidelines
+        </h2>
+        <p
+          className="text-sm"
+          style={{ color: monetWizard.textSecondary }}
+        >
+          Here&apos;s a summary of your coverage targets. You can always adjust these later.
+        </p>
+      </div>
+
+      {/* Summary card - glass morphism */}
+      <div
+        className="rounded-3xl p-6 mb-6 backdrop-blur-md"
+        style={{
+          background: monetWizard.cardBg,
+          border: `1px solid ${monetWizard.sage}25`,
+          boxShadow: `0 8px 32px ${monetWizard.sage}15`,
+        }}
+      >
+        <div
+          className="flex items-center justify-between mb-5 pb-5"
+          style={{ borderBottom: `1px solid ${monetWizard.textMuted}20` }}
+        >
+          <span style={{ color: monetWizard.textSecondary }}>Annual Income</span>
+          <span
+            className="text-xl font-semibold font-mono tabular-nums"
+            style={{ color: monetWizard.textPrimary }}
+          >
+            {formatCurrency(guidelines.annualIncome)}
+          </span>
+        </div>
+
+        <div className="space-y-4">
+          {coverageTypes.map((type) => {
+            const config = guidelineCoverageConfig[type]
+            const coverage = guidelines.coverages[type]
+
+            if (!coverage.isEnabled) {
+              return (
+                <div key={type} className="flex items-center justify-between opacity-50">
+                  <span style={{ color: monetWizard.textMuted }}>{config.shortLabel}</span>
+                  <span className="text-sm" style={{ color: monetWizard.textMuted }}>
+                    Disabled
+                  </span>
+                </div>
+              )
+            }
+
+            const isHospitalization = type === 'hospitalization'
+
+            return (
+              <div key={type} className="flex items-center justify-between">
+                <span style={{ color: monetWizard.textSecondary }}>{config.shortLabel}</span>
+                <span className="font-mono tabular-nums font-medium" style={{ color: monetWizard.textPrimary }}>
+                  {isHospitalization
+                    ? `${wardClassConfig[guidelines.coverages.hospitalization.preferredWardClass].label}${
+                        guidelines.coverages.hospitalization.recommendsRider ? ' + Rider' : ''
+                      }`
+                    : formatCurrency(targets[type as keyof typeof targets] as number)}
+                </span>
+              </div>
+            )
+          })}
+        </div>
+      </div>
+
+      {/* Premium budget - refined glass card */}
+      <div
+        className="rounded-3xl p-6 mb-10 backdrop-blur-md"
+        style={{
+          background: monetWizard.surfaceBg,
+          border: `1px solid ${monetWizard.cardBorder}`,
+          boxShadow: '0 4px 24px rgba(155, 139, 180, 0.08)',
+        }}
+      >
+        <div className="flex items-center justify-between mb-5">
+          <div>
+            <h3
+              className="font-medium text-sm"
+              style={{ color: monetWizard.textPrimary }}
+            >
+              Maximum Premium Budget
+            </h3>
+            <p className="text-xs mt-0.5" style={{ color: monetWizard.textMuted }}>
+              % of income you&apos;re willing to spend on insurance
+            </p>
+          </div>
+          <span
+            className="text-2xl font-semibold"
+            style={{ color: monetWizard.sage }}
+          >
+            {percentage}%
+          </span>
+        </div>
+
+        {/* Custom slider with Monet styling */}
+        <div className="relative h-8 flex items-center">
+          <input
+            type="range"
+            min={5}
+            max={20}
+            step={1}
+            value={percentage}
+            onChange={(e) => setMaxPremiumPercentage(parseInt(e.target.value) / 100)}
+            className="absolute inset-0 w-full h-full opacity-0 cursor-pointer z-10"
+          />
+          <div
+            className="absolute left-0 right-0 h-2 rounded-full"
+            style={{ background: `${monetWizard.sage}20` }}
+          />
+          <div
+            className="absolute left-0 h-2 rounded-full transition-all duration-150"
+            style={{
+              width: `${sliderFillPercent}%`,
+              background: `linear-gradient(90deg, ${monetWizard.sage}, ${monetWizard.sageLight})`,
+            }}
+          />
+          <div
+            className="absolute h-5 w-5 rounded-full transition-all duration-150"
+            style={{
+              left: `calc(${sliderFillPercent}% - 10px)`,
+              background: monetWizard.sage,
+              boxShadow: `0 2px 8px ${monetWizard.sage}40`,
+            }}
+          />
+        </div>
+        <div className="flex justify-between text-[10px] mt-2" style={{ color: monetWizard.textMuted }}>
+          <span>5%</span>
+          <span>10%</span>
+          <span>15%</span>
+          <span>20%</span>
+        </div>
+
+        <div
+          className="mt-5 p-4 rounded-2xl"
+          style={{
+            background: `${monetWizard.sage}10`,
+            border: `1px solid ${monetWizard.sage}20`,
+          }}
+        >
+          <div className="flex items-center justify-between">
+            <span className="text-sm" style={{ color: monetWizard.textSecondary }}>
+              Max annual premiums
+            </span>
+            <span className="font-mono tabular-nums font-semibold" style={{ color: monetWizard.sage }}>
+              ≤ {formatCurrency(targets.maxAnnualPremium)}
+            </span>
+          </div>
+          <p className="text-xs font-mono tabular-nums mt-1" style={{ color: monetWizard.textMuted }}>
+            ≈ {formatCurrency(Math.round(targets.maxAnnualPremium / 12))}/month
+          </p>
+        </div>
+      </div>
+
+      {/* Navigation - sleek pill buttons */}
+      <div className="flex gap-3">
+        <button
+          type="button"
+          onClick={onBack}
+          className="flex-1 rounded-full px-6 py-3.5 text-sm font-medium transition-all duration-300 hover:translate-y-[-1px]"
+          style={{
+            background: monetWizard.cardBg,
+            color: monetWizard.textSecondary,
+            border: `1px solid ${monetWizard.cardBorder}`,
+            boxShadow: '0 2px 12px rgba(155, 139, 180, 0.1)',
+          }}
+        >
+          Back
+        </button>
+        <button
+          type="button"
+          onClick={onComplete}
+          className="flex-1 flex items-center justify-center gap-2 rounded-full px-6 py-3.5 text-sm font-medium text-white transition-all duration-300 hover:translate-y-[-1px]"
+          style={{
+            background: monetWizard.sage,
+            boxShadow: `0 4px 20px ${monetWizard.sage}40`,
+          }}
+        >
+          <Check className="h-4 w-4" />
+          Save My Guidelines
+        </button>
+      </div>
+    </div>
+  )
+}
+
+// ============================================================================
+// CONFIGURED VIEW COMPONENTS
+// ============================================================================
+
+/**
+ * Person selector dropdown for guidelines
+ */
+function PersonSelectorBar() {
+  const colorScheme = useColorScheme()
+  const monetWizard = getInsuranceTheme(colorScheme)
+  const selectedPersonId = useSelectedPersonId()
+  const { setSelectedPersonId } = useGuidelinesActions()
+
+  return (
+    <div
+      className="flex items-center gap-3 rounded-2xl px-5 py-3 mb-6"
+      style={{
+        background: `${monetWizard.lavender}08`,
+        border: `1px solid ${monetWizard.lavender}15`,
+      }}
+    >
+      <User className="h-4 w-4 shrink-0" style={{ color: monetWizard.lavender }} />
+      <span className="text-sm" style={{ color: monetWizard.textSecondary }}>
+        Coverage for
+      </span>
+      <PersonSelector
+        value={selectedPersonId}
+        onChange={setSelectedPersonId}
+        placeholder="Select person"
+        variant={colorScheme === 'monet' ? 'monet' : 'dark'}
+        showCreate={false}
+      />
+    </div>
+  )
+}
+
+// ============================================================================
+// CONFIGURED VIEW (Edit mode - after wizard completion)
+// ============================================================================
+
+interface ConfiguredGuidelinesViewProps {
+  onAddPolicy?: () => void
+}
+
+function ConfiguredGuidelinesView({ onAddPolicy }: ConfiguredGuidelinesViewProps) {
+  const colorScheme = useColorScheme()
+  const monetWizard = getInsuranceTheme(colorScheme)
+
+  const guidelines = useGuidelines()
+  const targets = useGuidelineTargets()
+  const recommendations = useQuestionnaireRecommendations()
+  const referenceMode = useReferenceMode()
+  const selectedPersonId = useSelectedPersonId()
+  const { setMaxPremiumPercentage, resetToDefaults, unmarkAsConfigured, setLifeTpdAnswers } = useGuidelinesActions()
+  const [showResetConfirm, setShowResetConfirm] = useState(false)
+
+  // Fetch expenses for "vs Expenses" mode
+  const { data: expenses = [] } = useExpensesQuery()
+  const annualExpenses = useMemo(() => calculateAnnualExpenses(expenses), [expenses])
+
+  // Keep mortgage/assets in sync with current financial data
+  const autoPopulateData = useQuestionnaireAutoPopulate(selectedPersonId)
+  useEffect(() => {
+    if (!autoPopulateData.isLoading && (autoPopulateData.sources.liabilities || autoPopulateData.sources.assets)) {
+      setLifeTpdAnswers({
+        mortgageBalance: autoPopulateData.computed.totalMortgage,
+        otherDebts: autoPopulateData.computed.totalOtherDebts,
+        existingAssets: autoPopulateData.computed.totalAssets,
+      })
+    }
+  }, [
+    autoPopulateData.isLoading,
+    autoPopulateData.computed.totalMortgage,
+    autoPopulateData.computed.totalOtherDebts,
+    autoPopulateData.computed.totalAssets,
+    autoPopulateData.sources.liabilities,
+    autoPopulateData.sources.assets,
+    setLifeTpdAnswers,
+  ])
+
+  const percentage = Math.round(guidelines.maxPremiumPercentage * 100)
+
+  const coverageTypes: GuidelineCoverageType[] = [
+    'hospitalization',
+    'life_tpd',
+    'critical_illness',
+    'personal_accident',
+  ]
+
+  return (
+    <div className="py-10">
+      <div className="mx-auto max-w-5xl px-8">
+        {/* Header - minimal and elegant */}
+        <div className="flex items-end justify-between mb-10">
+          <div>
+            <p
+              className="text-[11px] font-medium uppercase tracking-[0.15em] mb-2"
+              style={{ color: monetWizard.lavender }}
+            >
+              Coverage Settings
+            </p>
+            <h2
+              className="text-2xl font-light tracking-tight"
+              style={{
+                color: monetWizard.textPrimary,
+                  }}
+            >
+              My Coverage Targets
+            </h2>
+          </div>
+          <div className="flex items-center gap-3">
+            <button
+              type="button"
+              onClick={unmarkAsConfigured}
+              className="flex items-center gap-2 px-4 py-2 text-xs font-medium uppercase tracking-wider transition-all duration-300 hover:opacity-70"
+              style={{ color: monetWizard.lavender }}
+            >
+              <Edit3 className="h-3.5 w-3.5" />
+              Edit Answers
+            </button>
+            <button
+              type="button"
+              onClick={() => setShowResetConfirm(true)}
+              className="flex items-center gap-2 px-4 py-2 text-xs font-medium uppercase tracking-wider transition-all duration-300 hover:opacity-70"
+              style={{ color: monetWizard.textMuted }}
+            >
+              <RotateCcw className="h-3.5 w-3.5" />
+              Reset
+            </button>
+            {onAddPolicy && (
+              <button
+                type="button"
+                onClick={onAddPolicy}
+                className="flex items-center gap-2 rounded-full px-6 py-2.5 text-xs font-medium uppercase tracking-wider text-white transition-all duration-300 hover:translate-y-[-1px]"
+                style={{
+                  background: monetWizard.sage,
+                  boxShadow: `0 4px 20px ${monetWizard.sage}40`,
+                }}
+              >
+                <Plus className="h-3.5 w-3.5" />
+                Add Policy
+              </button>
+            )}
+          </div>
+        </div>
+
+        {/* Reset confirmation - sleek inline alert */}
+        {showResetConfirm && (
+          <div
+            className="mb-8 px-6 py-4 rounded-2xl backdrop-blur-sm flex items-center justify-between"
+            style={{
+              background: `linear-gradient(135deg, ${monetWizard.amber}08, ${monetWizard.amber}12)`,
+              border: `1px solid ${monetWizard.amber}20`,
+            }}
+          >
+            <p className="text-sm" style={{ color: monetWizard.textSecondary }}>
+              Reset all guidelines to default values?
+            </p>
+            <div className="flex items-center gap-2">
+              <button
+                type="button"
+                onClick={() => setShowResetConfirm(false)}
+                className="px-4 py-1.5 text-xs font-medium uppercase tracking-wider transition-all"
+                style={{ color: monetWizard.textMuted }}
+              >
+                Cancel
+              </button>
+              <button
+                type="button"
+                onClick={() => {
+                  resetToDefaults()
+                  setShowResetConfirm(false)
+                }}
+                className="px-4 py-1.5 rounded-full text-xs font-medium text-white transition-all"
+                style={{ background: monetWizard.amber }}
+              >
+                Confirm
+              </button>
+            </div>
+          </div>
+        )}
+
+        {/* Person selector */}
+        <PersonSelectorBar />
+
+        <div className="grid lg:grid-cols-12 gap-8">
+          {/* Coverage cards - 8 columns */}
+          <div className="lg:col-span-8 space-y-3">
+            {coverageTypes.map((type) => {
+              // Map coverage type to reasoning key
+              const reasoningKey = type === 'life_tpd' ? 'lifeTpd' : type === 'critical_illness' ? 'criticalIllness' : type === 'personal_accident' ? 'personalAccident' : type
+              const reasoning = recommendations.reasoning[reasoningKey as keyof typeof recommendations.reasoning]
+              return (
+                <CoverageMultiplierCard
+                  key={type}
+                  coverageType={type}
+                  showEducation
+                  reasoning={reasoning}
+                  showInputs
+                  annualExpenses={annualExpenses}
+                />
+              )
+            })}
+          </div>
+
+          {/* Summary sidebar - 4 columns, sticky */}
+          <div className="lg:col-span-4">
+            <div className="sticky top-6 space-y-4">
+              {/* Summary card - glass effect */}
+              <div
+                className="rounded-3xl p-6 backdrop-blur-md"
+                style={{
+                  background: monetWizard.cardBg,
+                  border: `1px solid ${monetWizard.cardBorder}`,
+                  boxShadow: '0 8px 32px rgba(155, 139, 180, 0.08)',
+                }}
+              >
+                <div className="flex items-center justify-between mb-4">
+                  <p
+                    className="text-[10px] font-medium uppercase tracking-[0.2em]"
+                    style={{ color: monetWizard.textMuted }}
+                  >
+                    Your Targets
+                  </p>
+                  <ReferenceModeToggle />
+                </div>
+                <div className="space-y-3">
+                  {coverageTypes.map((type) => {
+                    const config = guidelineCoverageConfig[type]
+                    const coverage = guidelines.coverages[type]
+
+                    if (!coverage.isEnabled) return null
+
+                    const isHospitalization = type === 'hospitalization'
+
+                    return (
+                      <div
+                        key={type}
+                        className="flex items-center justify-between py-2"
+                        style={{
+                          borderBottom: `1px solid ${monetWizard.cardBorder}`,
+                        }}
+                      >
+                        <span
+                          className="text-sm"
+                          style={{ color: monetWizard.textSecondary }}
+                        >
+                          {config.shortLabel}
+                        </span>
+                        <div className="text-right">
+                          <span
+                            className="text-sm font-mono tabular-nums"
+                            style={{ color: monetWizard.textPrimary }}
+                          >
+                            {isHospitalization
+                              ? wardClassConfig[guidelines.coverages.hospitalization.preferredWardClass]
+                                  .label
+                              : formatCurrency(targets[type as keyof typeof targets] as number)}
+                          </span>
+                          {!isHospitalization && referenceMode === 'expenses' && (
+                            <p
+                              className="text-[10px] mt-0.5"
+                              style={{ color: monetWizard.textMuted }}
+                            >
+                              {formatExpenseMultiplier(
+                                targets[type as keyof typeof targets] as number,
+                                annualExpenses
+                              )}
+                            </p>
+                          )}
+                        </div>
+                      </div>
+                    )
+                  })}
+                </div>
+              </div>
+
+              {/* Premium budget - refined slider */}
+              <div
+                className="rounded-3xl p-6 backdrop-blur-md"
+                style={{
+                  background: monetWizard.cardBg,
+                  border: `1px solid ${monetWizard.cardBorder}`,
+                  boxShadow: '0 8px 32px rgba(155, 139, 180, 0.08)',
+                }}
+              >
+                <div className="flex items-baseline justify-between mb-5">
+                  <p
+                    className="text-[10px] font-medium uppercase tracking-[0.2em]"
+                    style={{ color: monetWizard.textMuted }}
+                  >
+                    Premium Budget
+                  </p>
+                  <span
+                    className="text-2xl font-light tabular-nums"
+                    style={{
+                      color: monetWizard.textPrimary,
+                              }}
+                  >
+                    {percentage}%
+                  </span>
+                </div>
+
+                {/* Custom sleek slider track */}
+                <div className="relative h-1 rounded-full mb-2" style={{ background: `${monetWizard.lavender}20` }}>
+                  <div
+                    className="absolute left-0 top-0 h-full rounded-full transition-all duration-200"
+                    style={{
+                      width: `${((percentage - 5) / 15) * 100}%`,
+                      background: `linear-gradient(90deg, ${monetWizard.lavender}60, ${monetWizard.sage}80)`,
+                    }}
+                  />
+                  <input
+                    type="range"
+                    min={5}
+                    max={20}
+                    step={1}
+                    value={percentage}
+                    onChange={(e) => setMaxPremiumPercentage(parseInt(e.target.value) / 100)}
+                    className="absolute inset-0 w-full h-full opacity-0 cursor-pointer"
+                  />
+                </div>
+
+                <div
+                  className="flex justify-between text-[10px] mb-4"
+                  style={{ color: monetWizard.textMuted }}
+                >
+                  <span>5%</span>
+                  <span>20%</span>
+                </div>
+
+                <div
+                  className="text-center pt-4"
+                  style={{ borderTop: `1px solid ${monetWizard.cardBorder}` }}
+                >
+                  <p
+                    className="text-xl font-mono tabular-nums"
+                    style={{ color: monetWizard.sage }}
+                  >
+                    {formatCurrency(targets.maxAnnualPremium)}
+                  </p>
+                  <p
+                    className="text-[10px] uppercase tracking-wider mt-1"
+                    style={{ color: monetWizard.textMuted }}
+                  >
+                    per year max
+                  </p>
+                </div>
+              </div>
+
+              {/* Last updated - subtle */}
+              <p
+                className="text-[10px] text-center tracking-wider"
+                style={{ color: monetWizard.textMuted }}
+              >
+                Updated{' '}
+                {new Date(guidelines.updatedAt).toLocaleDateString('en-SG', {
+                  day: 'numeric',
+                  month: 'short',
+                  year: 'numeric',
+                })}
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+// ============================================================================
+// MAIN COMPONENT
+// ============================================================================
+
+interface GuidelinesTabProps {
+  onNavigateToPolicy?: () => void
+}
+
+export function GuidelinesTab({ onNavigateToPolicy }: GuidelinesTabProps) {
+  const hasConfigured = useHasConfiguredGuidelines()
+  const { markAsConfigured } = useGuidelinesActions()
+  const [wizardStep, setWizardStep] = useState(1)
+
+  // If configured, show the editable guidelines view directly
+  if (hasConfigured) {
+    return <ConfiguredGuidelinesView onAddPolicy={onNavigateToPolicy} />
+  }
+
+  // Wizard flow for first-time setup
+  const stepLabels = ['Income', 'Questions', 'Review']
+
+  const handleComplete = () => {
+    markAsConfigured()
+  }
+
+  return (
+    <div className="py-8 px-6">
+      {/* Wizard step indicator */}
+      <WizardStepIndicator
+        currentStep={wizardStep}
+        totalSteps={3}
+        stepLabels={stepLabels}
+      />
+
+      {/* Wizard steps */}
+      {wizardStep === 1 && <WizardStep1Income onNext={() => setWizardStep(2)} />}
+      {wizardStep === 2 && (
+        <WizardStep2Questionnaire
+          onNext={() => setWizardStep(3)}
+          onBack={() => setWizardStep(1)}
+        />
+      )}
+      {wizardStep === 3 && (
+        <WizardStep3Summary onComplete={handleComplete} onBack={() => setWizardStep(2)} />
+      )}
+    </div>
+  )
+}
diff --git a/frontend/src/components/insurance/tabs/JourneyTab.tsx b/frontend/src/components/insurance/tabs/JourneyTab.tsx
new file mode 100644
index 000000000..96f91350a
--- /dev/null
+++ b/frontend/src/components/insurance/tabs/JourneyTab.tsx
@@ -0,0 +1,956 @@
+'use client'
+
+import { useMemo, useState, useRef, useCallback } from 'react'
+import {
+  Chart as ChartJS,
+  CategoryScale,
+  LinearScale,
+  PointElement,
+  LineElement,
+  Filler,
+  Tooltip,
+  type ChartOptions,
+  type ChartData,
+} from 'chart.js'
+import { Line } from 'react-chartjs-2'
+import { Shield, HeartPulse, Zap, AlertCircle, CheckCircle2, Calendar, GraduationCap, Home, Sunset } from 'lucide-react'
+import { cn } from '@/lib/utils'
+import { usePersonsQuery } from '@/hooks/queries/usePersonsQuery'
+import { useQuestionnaireAutoPopulate } from '@/hooks/useQuestionnaireAutoPopulate'
+import { usePersonFilter } from '@/contexts/PersonFilterContext'
+import { useColorScheme } from '@/stores'
+import { PersonSelector } from '@/components/ui/PersonSelector'
+import { getInsuranceTheme } from '@/lib/insurance-theme'
+import {
+  generateCoverageProjection,
+  calculateMilestones,
+  calculateAge,
+  formatCoverageAmount,
+  type PersonCoverageContext,
+  type CoverageMilestone,
+  type CoverageProjectionYear,
+} from '@/lib/coverage-journey-utils'
+
+// Register Chart.js components
+ChartJS.register(
+  CategoryScale,
+  LinearScale,
+  PointElement,
+  LineElement,
+  Filler,
+  Tooltip
+)
+
+// =============================================================================
+// Types
+// =============================================================================
+
+interface JourneyTabProps {
+  className?: string
+}
+
+// =============================================================================
+// Coverage Comparison (Light Theme)
+// =============================================================================
+
+function CoverageComparisonLight({
+  recommendedLifeTpd,
+  recommendedCriticalIllness,
+  recommendedPersonalAccident,
+}: {
+  recommendedLifeTpd: number
+  recommendedCriticalIllness: number
+  recommendedPersonalAccident: number
+}) {
+  const colorScheme = useColorScheme()
+  const monetColors = getInsuranceTheme(colorScheme)
+
+  const categories = [
+    { name: 'Life/TPD', icon: Shield, recommended: recommendedLifeTpd, current: 0 },
+    { name: 'Critical Illness', icon: HeartPulse, recommended: recommendedCriticalIllness, current: 0 },
+    { name: 'Personal Accident', icon: Zap, recommended: recommendedPersonalAccident, current: 0 },
+  ]
+
+  return (
+    <div className="space-y-3">
+      {/* Header */}
+      <div
+        className="flex items-center gap-4 pb-2"
+        style={{ borderBottom: '1px solid rgba(155, 139, 180, 0.15)' }}
+      >
+        <div className="flex-1 text-xs font-medium" style={{ color: monetColors.textMuted }}>
+          Category
+        </div>
+        <div className="w-28 text-right text-xs font-medium" style={{ color: monetColors.textMuted }}>
+          Recommended
+        </div>
+        <div className="w-28 text-right text-xs font-medium" style={{ color: monetColors.textMuted }}>
+          Current
+        </div>
+        <div className="w-28 text-right text-xs font-medium" style={{ color: monetColors.textMuted }}>
+          Status
+        </div>
+      </div>
+
+      {/* Rows */}
+      {categories.map((cat) => {
+        const Icon = cat.icon
+        const gap = cat.recommended - cat.current
+        const hasGap = gap > 0
+
+        return (
+          <div
+            key={cat.name}
+            className="flex items-center gap-4 py-3"
+            style={{ borderBottom: '1px solid rgba(155, 139, 180, 0.08)' }}
+          >
+            <div className="flex items-center gap-2 flex-1 min-w-0">
+              <Icon className="h-4 w-4" style={{ color: monetColors.lavender }} />
+              <span className="text-sm" style={{ color: monetColors.textSecondary }}>
+                {cat.name}
+              </span>
+            </div>
+            <div className="w-28 text-right">
+              <span
+                className="text-sm font-mono"
+                style={{ color: monetColors.textMuted }}
+              >
+                {formatCoverageAmount(cat.recommended)}
+              </span>
+            </div>
+            <div className="w-28 text-right">
+              <span
+                className="text-sm font-mono"
+                style={{ color: monetColors.textPrimary }}
+              >
+                {formatCoverageAmount(cat.current)}
+              </span>
+            </div>
+            <div className="w-28 flex items-center justify-end gap-1.5">
+              {hasGap ? (
+                <>
+                  <AlertCircle className="h-3.5 w-3.5" style={{ color: monetColors.coralRose }} />
+                  <span className="text-xs font-medium" style={{ color: monetColors.coralRose }}>
+                    Gap: {formatCoverageAmount(gap)}
+                  </span>
+                </>
+              ) : (
+                <>
+                  <CheckCircle2 className="h-3.5 w-3.5" style={{ color: monetColors.sage }} />
+                  <span className="text-xs font-medium" style={{ color: monetColors.sage }}>
+                    On Target
+                  </span>
+                </>
+              )}
+            </div>
+          </div>
+        )
+      })}
+    </div>
+  )
+}
+
+// =============================================================================
+// Milestone Cards (Light Theme)
+// =============================================================================
+
+function getMilestoneIcon(category: CoverageMilestone['category']) {
+  switch (category) {
+    case 'dependent':
+      return GraduationCap
+    case 'debt':
+      return Home
+    case 'retirement':
+      return Sunset
+    default:
+      return Calendar
+  }
+}
+
+function getMilestoneColor(category: CoverageMilestone['category'], theme: ReturnType<typeof getInsuranceTheme>, isMonet: boolean) {
+  switch (category) {
+    case 'dependent':
+      return {
+        bg: isMonet ? 'rgba(59, 130, 246, 0.12)' : 'rgba(59, 130, 246, 0.15)',
+        border: 'rgba(59, 130, 246, 0.25)',
+        text: '#3B82F6',
+      }
+    case 'debt':
+      return {
+        bg: isMonet ? `${theme.sage}18` : `${theme.sage}20`,
+        border: `${theme.sage}35`,
+        text: theme.sage,
+      }
+    case 'retirement':
+      return {
+        bg: isMonet ? `${theme.sunlightGold}25` : `${theme.amber}20`,
+        border: isMonet ? `${theme.sunlightGold}40` : `${theme.amber}35`,
+        text: isMonet ? '#8A7A5A' : theme.amber,
+      }
+    default:
+      return {
+        bg: `${theme.lavender}15`,
+        border: `${theme.lavender}25`,
+        text: theme.lavender,
+      }
+  }
+}
+
+function MilestoneAlertsLight({
+  milestones,
+  currentYear,
+}: {
+  milestones: CoverageMilestone[]
+  currentYear: number
+}) {
+  const colorScheme = useColorScheme()
+  const monetColors = getInsuranceTheme(colorScheme)
+  const isMonet = colorScheme === 'monet'
+
+  if (milestones.length === 0) {
+    return (
+      <div className="py-6 text-center">
+        <p className="text-sm" style={{ color: monetColors.textMuted }}>
+          No upcoming milestones detected
+        </p>
+      </div>
+    )
+  }
+
+  return (
+    <div className="space-y-3">
+      {milestones.map((milestone, idx) => {
+        const Icon = getMilestoneIcon(milestone.category)
+        const colors = getMilestoneColor(milestone.category, monetColors, isMonet)
+        const yearsAway = milestone.year - currentYear
+
+        return (
+          <div
+            key={idx}
+            className="px-4 py-3 rounded-xl transition-all duration-200 hover:shadow-md"
+            style={{
+              background: colors.bg,
+              border: `1px solid ${colors.border}`,
+            }}
+          >
+            <div className="flex items-start gap-3">
+              <div
+                className="p-2 rounded-lg"
+                style={{ background: monetColors.surfaceBg }}
+              >
+                <Icon className="h-4 w-4" style={{ color: colors.text }} />
+              </div>
+
+              <div className="flex-1 min-w-0">
+                <div className="flex items-center gap-2 mb-1">
+                  <span className="text-xs font-medium" style={{ color: monetColors.textMuted }}>
+                    {milestone.year}
+                  </span>
+                  <span className="text-[10px]" style={{ color: monetColors.textMuted }}>•</span>
+                  <span className="text-[10px]" style={{ color: monetColors.textMuted }}>
+                    {yearsAway === 1 ? 'In 1 year' : `In ${yearsAway} years`}
+                  </span>
+                </div>
+
+                <h4
+                  className="text-sm font-medium mb-0.5"
+                  style={{ color: monetColors.textPrimary }}
+                >
+                  {milestone.event}
+                </h4>
+
+                <p className="text-xs" style={{ color: monetColors.textSecondary }}>
+                  {milestone.description}
+                </p>
+
+                <div
+                  className="inline-flex items-center gap-1.5 px-2 py-1 rounded-lg mt-2 text-xs"
+                  style={{ background: monetColors.surfaceBg, color: colors.text }}
+                >
+                  {milestone.impact}
+                </div>
+              </div>
+            </div>
+          </div>
+        )
+      })}
+    </div>
+  )
+}
+
+// =============================================================================
+// Coverage Chart (Light Theme) - Interactive with Draggable Age Marker
+// =============================================================================
+
+function getChartColors(theme: ReturnType<typeof getInsuranceTheme>) {
+  return {
+    lifeTpd: {
+      line: theme.lavender,
+      fill: 'rgba(155, 139, 180, 0.2)',
+    },
+    criticalIllness: {
+      line: theme.sage,
+      fill: 'rgba(127, 178, 133, 0.15)',
+    },
+    personalAccident: {
+      line: theme.coralRose,
+      fill: 'rgba(232, 168, 152, 0.1)',
+    },
+    grid: 'rgba(155, 139, 180, 0.1)',
+    axis: theme.textMuted,
+  }
+}
+
+interface CoverageChartLightProps {
+  projections: CoverageProjectionYear[]
+  milestones: CoverageMilestone[]
+  currentAge: number
+  selectedAge: number
+  onAgeSelect: (age: number) => void
+}
+
+function CoverageChartLight({
+  projections,
+  milestones,
+  currentAge,
+  selectedAge,
+  onAgeSelect,
+}: CoverageChartLightProps) {
+  const colorScheme = useColorScheme()
+  const monetColors = getInsuranceTheme(colorScheme)
+  const CHART_COLORS_LIGHT = getChartColors(monetColors)
+
+  const chartRef = useRef<ChartJS<'line'> | null>(null)
+  const containerRef = useRef<HTMLDivElement>(null)
+
+  // Drag state for the age marker
+  const [isDraggingAge, setIsDraggingAge] = useState(false)
+
+  // Calculate chart area bounds
+  const getChartArea = useCallback(() => {
+    const chart = chartRef.current
+    if (!chart) return null
+    return chart.chartArea
+  }, [])
+
+  // Convert pixel X position to age
+  const pixelToAge = useCallback((pixelX: number): number => {
+    const chart = chartRef.current
+    const chartArea = getChartArea()
+    if (!chart || !chartArea) return selectedAge
+
+    // Calculate the relative position within the chart area
+    const relativeX = Math.max(0, Math.min(1, (pixelX - chartArea.left) / (chartArea.right - chartArea.left)))
+
+    // Map to age range
+    const minAge = projections[0]?.age ?? 25
+    const maxAge = projections[projections.length - 1]?.age ?? 75
+    const age = Math.round(minAge + relativeX * (maxAge - minAge))
+
+    return Math.max(minAge, Math.min(maxAge, age))
+  }, [projections, selectedAge, getChartArea])
+
+  // Calculate position of selected age marker
+  const selectedAgeIndex = useMemo(() => {
+    return projections.findIndex(p => p.age === selectedAge)
+  }, [projections, selectedAge])
+
+  const currentAgeIndex = useMemo(() => {
+    return projections.findIndex(p => p.age === currentAge)
+  }, [projections, currentAge])
+
+  const chartData: ChartData<'line'> = useMemo(() => {
+    const labels = projections.map(p => p.age.toString())
+
+    return {
+      labels,
+      datasets: [
+        {
+          label: 'Life/TPD',
+          data: projections.map(p => p.recommendedLifeTpd),
+          borderColor: CHART_COLORS_LIGHT.lifeTpd.line,
+          backgroundColor: CHART_COLORS_LIGHT.lifeTpd.fill,
+          fill: true,
+          tension: 0.4,
+          pointRadius: 0,
+          pointHoverRadius: 6,
+          pointHoverBackgroundColor: CHART_COLORS_LIGHT.lifeTpd.line,
+          pointHoverBorderColor: '#fff',
+          pointHoverBorderWidth: 2,
+          borderWidth: 2,
+        },
+        {
+          label: 'Critical Illness',
+          data: projections.map(p => p.recommendedCriticalIllness),
+          borderColor: CHART_COLORS_LIGHT.criticalIllness.line,
+          backgroundColor: CHART_COLORS_LIGHT.criticalIllness.fill,
+          fill: true,
+          tension: 0.4,
+          pointRadius: 0,
+          pointHoverRadius: 5,
+          pointHoverBackgroundColor: CHART_COLORS_LIGHT.criticalIllness.line,
+          pointHoverBorderColor: '#fff',
+          pointHoverBorderWidth: 2,
+          borderWidth: 1.5,
+        },
+        {
+          label: 'Personal Accident',
+          data: projections.map(p => p.recommendedPersonalAccident),
+          borderColor: CHART_COLORS_LIGHT.personalAccident.line,
+          backgroundColor: CHART_COLORS_LIGHT.personalAccident.fill,
+          fill: true,
+          tension: 0.4,
+          pointRadius: 0,
+          pointHoverRadius: 4,
+          pointHoverBackgroundColor: CHART_COLORS_LIGHT.personalAccident.line,
+          pointHoverBorderColor: '#fff',
+          pointHoverBorderWidth: 2,
+          borderWidth: 1,
+        },
+      ],
+    }
+  }, [projections])
+
+  // Handle mouse down on the age marker to start dragging
+  const handleMarkerMouseDown = useCallback((event: React.MouseEvent) => {
+    event.preventDefault()
+    event.stopPropagation()
+    setIsDraggingAge(true)
+  }, [])
+
+  // Handle mouse move during drag
+  const handleMouseMove = useCallback((event: React.MouseEvent<HTMLDivElement>) => {
+    if (!isDraggingAge) return
+
+    const rect = event.currentTarget.getBoundingClientRect()
+    const x = event.clientX - rect.left
+    const newAge = pixelToAge(x)
+
+    if (newAge !== selectedAge) {
+      onAgeSelect(newAge)
+    }
+  }, [isDraggingAge, pixelToAge, selectedAge, onAgeSelect])
+
+  // Handle mouse up - stop dragging
+  const handleMouseUp = useCallback(() => {
+    setIsDraggingAge(false)
+  }, [])
+
+  // Handle mouse leave - stop dragging
+  const handleMouseLeave = useCallback(() => {
+    if (isDraggingAge) {
+      setIsDraggingAge(false)
+    }
+  }, [isDraggingAge])
+
+  // Handle click on chart to select age
+  const handleChartClick = useCallback((event: React.MouseEvent<HTMLDivElement>) => {
+    if (isDraggingAge) return
+
+    const rect = event.currentTarget.getBoundingClientRect()
+    const x = event.clientX - rect.left
+    const newAge = pixelToAge(x)
+    onAgeSelect(newAge)
+  }, [isDraggingAge, pixelToAge, onAgeSelect])
+
+  const chartOptions: ChartOptions<'line'> = useMemo(() => {
+    return {
+      responsive: true,
+      maintainAspectRatio: false,
+      interaction: {
+        mode: 'index',
+        intersect: false,
+      },
+      plugins: {
+        legend: {
+          display: false,
+        },
+        tooltip: {
+          enabled: !isDraggingAge,
+          backgroundColor: monetColors.cardBgHover,
+          titleColor: monetColors.textPrimary,
+          bodyColor: monetColors.textSecondary,
+          borderColor: monetColors.cardBorder,
+          borderWidth: 1,
+          padding: 12,
+          cornerRadius: 8,
+          displayColors: true,
+          callbacks: {
+            title: (items) => {
+              if (items.length > 0) {
+                const age = projections[items[0].dataIndex]?.age
+                const isCurrent = age === currentAge
+                return `Age ${age}${isCurrent ? ' (Current)' : ''}`
+              }
+              return ''
+            },
+            label: (context) => {
+              const value = context.raw as number
+              return ` ${context.dataset.label}: ${formatCoverageAmount(value)}`
+            },
+          },
+        },
+      },
+      scales: {
+        x: {
+          grid: {
+            color: CHART_COLORS_LIGHT.grid,
+            drawTicks: false,
+          },
+          ticks: {
+            color: CHART_COLORS_LIGHT.axis,
+            font: {
+              size: 11,
+            },
+            maxRotation: 0,
+            callback: function(_value, index) {
+              const age = projections[index]?.age
+              if (age !== undefined && age % 10 === 0) {
+                return age
+              }
+              return ''
+            },
+          },
+          border: {
+            display: false,
+          },
+        },
+        y: {
+          grid: {
+            color: CHART_COLORS_LIGHT.grid,
+            drawTicks: false,
+          },
+          ticks: {
+            color: CHART_COLORS_LIGHT.axis,
+            font: {
+              size: 11,
+            },
+            callback: (value) => formatCoverageAmount(value as number),
+            maxTicksLimit: 5,
+          },
+          border: {
+            display: false,
+          },
+          beginAtZero: true,
+        },
+      },
+    }
+  }, [projections, currentAge, isDraggingAge])
+
+  const isCurrentAge = selectedAge === currentAge
+
+  return (
+    <div className="space-y-3">
+      {/* Header with selected age display */}
+      <div className="flex items-center justify-between">
+        <div className="flex items-center gap-2">
+          <span className="text-sm" style={{ color: monetColors.textSecondary }}>
+            Viewing age
+          </span>
+          <span
+            className="text-sm font-semibold px-2 py-0.5 rounded-lg"
+            style={{
+              background: isCurrentAge ? `${monetColors.sage}20` : `${monetColors.lavender}20`,
+              color: isCurrentAge ? monetColors.sage : monetColors.lavenderDark,
+            }}
+          >
+            {selectedAge}
+            {isCurrentAge && ' (You)'}
+          </span>
+        </div>
+        <span className="text-xs" style={{ color: monetColors.textMuted }}>
+          Drag the marker to explore
+        </span>
+      </div>
+
+      {/* Chart with drag handling */}
+      <div
+        ref={containerRef}
+        className="relative h-[240px] rounded-xl p-3"
+        style={{
+          background: monetColors.surfaceBg,
+          cursor: isDraggingAge ? 'ew-resize' : 'crosshair',
+        }}
+        onMouseMove={handleMouseMove}
+        onMouseUp={handleMouseUp}
+        onMouseLeave={handleMouseLeave}
+        onClick={handleChartClick}
+      >
+        <Line ref={chartRef} data={chartData} options={chartOptions} />
+
+        {/* Current age indicator (static) */}
+        {currentAgeIndex >= 0 && selectedAge !== currentAge && (
+          <div
+            className="absolute top-3 bottom-3 w-px pointer-events-none"
+            style={{
+              left: `calc(${(currentAgeIndex / (projections.length - 1)) * 100}% + 12px)`,
+              background: monetColors.textMuted,
+              opacity: 0.3,
+            }}
+          >
+            <div
+              className="absolute -top-1 left-1/2 -translate-x-1/2 px-1.5 py-0.5 rounded text-[9px] font-medium whitespace-nowrap"
+              style={{
+                background: 'rgba(155, 139, 180, 0.2)',
+                color: monetColors.textMuted,
+              }}
+            >
+              Current
+            </div>
+          </div>
+        )}
+
+        {/* Selected age marker (draggable) */}
+        {selectedAgeIndex >= 0 && (
+          <div
+            className="absolute top-3 bottom-3 w-0.5 transition-all"
+            style={{
+              left: `calc(${(selectedAgeIndex / (projections.length - 1)) * 100}% + 12px)`,
+              background: `linear-gradient(to bottom, ${monetColors.lavender}, ${monetColors.lavenderDark})`,
+              cursor: 'ew-resize',
+              zIndex: 10,
+            }}
+            onMouseDown={handleMarkerMouseDown}
+          >
+            {/* Drag handle at top */}
+            <div
+              className="absolute -top-2 left-1/2 -translate-x-1/2 flex flex-col items-center"
+              style={{ cursor: 'ew-resize' }}
+            >
+              <div
+                className="px-2 py-1 rounded-lg text-[10px] font-semibold whitespace-nowrap shadow-md"
+                style={{
+                  background: `linear-gradient(135deg, ${monetColors.lavender}, ${monetColors.lavenderDark})`,
+                  color: 'white',
+                }}
+              >
+                Age {selectedAge}
+              </div>
+              {/* Arrow pointing down */}
+              <div
+                className="w-0 h-0 border-l-4 border-r-4 border-t-4"
+                style={{
+                  borderLeftColor: 'transparent',
+                  borderRightColor: 'transparent',
+                  borderTopColor: monetColors.lavenderDark,
+                }}
+              />
+            </div>
+
+            {/* Drag affordance dots on the line */}
+            <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 flex flex-col gap-1">
+              <div className="w-1.5 h-1.5 rounded-full bg-white/80" />
+              <div className="w-1.5 h-1.5 rounded-full bg-white/80" />
+              <div className="w-1.5 h-1.5 rounded-full bg-white/80" />
+            </div>
+          </div>
+        )}
+
+        {/* Dragging indicator */}
+        {isDraggingAge && (
+          <div
+            className="absolute inset-0 rounded-xl pointer-events-none"
+            style={{
+              background: `${monetColors.lavender}05`,
+              border: `2px dashed ${monetColors.lavender}40`,
+            }}
+          />
+        )}
+
+        {/* Milestone markers on chart */}
+        {milestones.map((milestone, idx) => {
+          const minAge = projections[0]?.age ?? 25
+          const maxAge = projections[projections.length - 1]?.age ?? 75
+
+          // Skip milestones outside the chart range
+          if (milestone.age < minAge || milestone.age > maxAge) return null
+
+          const positionPercent = ((milestone.age - minAge) / (maxAge - minAge)) * 100
+          const Icon = getMilestoneIcon(milestone.category)
+          const colors = getMilestoneColor(milestone.category, monetColors, true)
+
+          return (
+            <div
+              key={idx}
+              className="absolute pointer-events-none"
+              style={{
+                left: `calc(${positionPercent}% + 12px)`,
+                top: '50%',
+                transform: 'translate(-50%, -50%)',
+                zIndex: 5,
+              }}
+              title={`${milestone.event} (Age ${milestone.age})`}
+            >
+              <div
+                className="flex items-center justify-center w-7 h-7 rounded-full shadow-md"
+                style={{
+                  background: colors.bg,
+                  border: `2px solid ${colors.border}`,
+                }}
+              >
+                <Icon className="h-3.5 w-3.5" style={{ color: colors.text }} />
+              </div>
+            </div>
+          )
+        })}
+      </div>
+
+      {/* Legend */}
+      <div className="flex items-center justify-center gap-6">
+        <div className="flex items-center gap-2">
+          <Shield className="h-3.5 w-3.5" style={{ color: monetColors.lavender }} />
+          <div className="w-3 h-0.5 rounded-full" style={{ background: monetColors.lavender }} />
+          <span className="text-xs" style={{ color: monetColors.textMuted }}>Life/TPD</span>
+        </div>
+        <div className="flex items-center gap-2">
+          <HeartPulse className="h-3.5 w-3.5" style={{ color: monetColors.sage }} />
+          <div className="w-3 h-0.5 rounded-full" style={{ background: monetColors.sage }} />
+          <span className="text-xs" style={{ color: monetColors.textMuted }}>Critical Illness</span>
+        </div>
+        <div className="flex items-center gap-2">
+          <Zap className="h-3.5 w-3.5" style={{ color: monetColors.coralRose }} />
+          <div className="w-3 h-0.5 rounded-full" style={{ background: monetColors.coralRose }} />
+          <span className="text-xs" style={{ color: monetColors.textMuted }}>Personal Accident</span>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+// =============================================================================
+// Main Component
+// =============================================================================
+
+export function JourneyTab({ className }: JourneyTabProps) {
+  const colorScheme = useColorScheme()
+  const monetColors = getInsuranceTheme(colorScheme)
+  const isMonet = colorScheme === 'monet'
+
+  const { includedPersons } = usePersonFilter()
+  const { data: persons, isLoading: personsLoading } = usePersonsQuery()
+
+  // Person selection state - default to first included person
+  const [selectedPersonId, setSelectedPersonId] = useState<string | null>(null)
+
+  // Initialize/update selected person when includedPersons changes
+  const effectivePersonId = selectedPersonId && includedPersons.some(p => p.id === selectedPersonId)
+    ? selectedPersonId
+    : includedPersons[0]?.id ?? null
+
+  const selectedPerson = persons?.find(p => p.id === effectivePersonId)
+
+  const autoPopulated = useQuestionnaireAutoPopulate(effectivePersonId)
+
+  const currentAge = selectedPerson ? calculateAge(selectedPerson.dateOfBirth) : 35
+  const [selectedAge, setSelectedAge] = useState(currentAge)
+
+  const coverageContext: PersonCoverageContext = useMemo(() => {
+    const dependents = (persons ?? [])
+      .filter(p => p.id !== effectivePersonId && p.isIncluded)
+      .map(p => ({
+        name: p.name,
+        age: calculateAge(p.dateOfBirth),
+      }))
+      .filter(d => d.age < 22)
+
+    return {
+      age: currentAge,
+      annualIncome: autoPopulated.computed.primaryPersonIncome || 60000,
+      dependents,
+      mortgageBalance: autoPopulated.computed.totalMortgage,
+      mortgageEndYear: autoPopulated.computed.totalMortgage > 0
+        ? new Date().getFullYear() + 25
+        : null,
+      retirementAge: 65,
+    }
+  }, [currentAge, autoPopulated, persons, effectivePersonId])
+
+  // Generate projections
+  const projections = useMemo(() => {
+    return generateCoverageProjection(coverageContext, 25, 75)
+  }, [coverageContext])
+
+  const milestones = useMemo(() => {
+    return calculateMilestones(coverageContext)
+  }, [coverageContext])
+
+  const selectedProjection = useMemo(() => {
+    return projections.find(p => p.age === selectedAge) ?? projections.find(p => p.age === currentAge)
+  }, [projections, selectedAge, currentAge])
+
+  const currentYear = new Date().getFullYear()
+  const isCurrentAge = selectedAge === currentAge
+  const yearsFromNow = selectedAge - currentAge
+
+  if (personsLoading || autoPopulated.isLoading) {
+    return (
+      <div className={cn('animate-pulse space-y-4 p-8', className)}>
+        <div className="h-12 bg-white/40 rounded-xl" />
+        <div className="h-[200px] bg-white/40 rounded-xl" />
+        <div className="h-32 bg-white/40 rounded-xl" />
+      </div>
+    )
+  }
+
+  if (!selectedPerson) {
+    return (
+      <div className={cn('text-center py-12', className)}>
+        <Shield className="h-12 w-12 mx-auto mb-4" style={{ color: monetColors.lavenderLight }} />
+        <p className="text-sm" style={{ color: monetColors.textMuted }}>
+          Select a person to view their coverage journey
+        </p>
+      </div>
+    )
+  }
+
+  return (
+    <div className={cn('space-y-6 p-8', className)}>
+      {/* Header */}
+      <div className="flex items-center justify-between gap-4">
+        <div>
+          <h2
+            className="text-xl font-semibold"
+            style={{
+              color: monetColors.textPrimary,
+              fontFamily: "'Cormorant Garamond', Georgia, serif",
+            }}
+          >
+            Coverage Journey
+          </h2>
+          <p className="text-sm mt-1" style={{ color: monetColors.textSecondary }}>
+            How your insurance needs change over time
+          </p>
+        </div>
+
+        {/* Person Selector */}
+        {includedPersons.length > 1 && (
+          <PersonSelector
+            value={effectivePersonId}
+            onChange={(id) => setSelectedPersonId(id)}
+            variant={isMonet ? 'monet' : 'dark'}
+            showCreate={false}
+            required
+            className="w-48"
+          />
+        )}
+        {includedPersons.length === 1 && selectedPerson && (
+          <div
+            className="flex items-center gap-2 px-3 py-2 rounded-xl"
+            style={{
+              background: monetColors.cardBg,
+              border: `1px solid ${monetColors.cardBorder}`,
+            }}
+          >
+            <span
+              className="w-2.5 h-2.5 rounded-full"
+              style={{ backgroundColor: selectedPerson.displayColor || '#64748b' }}
+            />
+            <span
+              className="text-sm font-medium"
+              style={{ color: monetColors.textPrimary }}
+            >
+              {selectedPerson.name}
+            </span>
+          </div>
+        )}
+      </div>
+
+      {/* Coverage Needs Chart */}
+      <div
+        className="px-5 py-4 rounded-2xl"
+        style={{
+          background: monetColors.cardBg,
+          boxShadow: `0 4px 20px ${monetColors.shadowSoft}`,
+          border: `1px solid ${monetColors.cardBorder}`,
+        }}
+      >
+        <div
+          className="text-xs font-medium uppercase tracking-wide mb-3"
+          style={{ color: monetColors.textMuted }}
+        >
+          Coverage Needs Over Time
+        </div>
+        <CoverageChartLight
+          projections={projections}
+          milestones={milestones}
+          currentAge={currentAge}
+          selectedAge={selectedAge}
+          onAgeSelect={setSelectedAge}
+        />
+      </div>
+
+
+
+      {/* Coverage Comparison + Milestones - Side by Side */}
+      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+        {/* Coverage Comparison */}
+        <div
+          className="px-5 py-4 rounded-2xl"
+          style={{
+            background: monetColors.cardBg,
+            boxShadow: `0 4px 20px ${monetColors.shadowSoft}`,
+            border: `1px solid ${monetColors.cardBorder}`,
+          }}
+        >
+          <div className="flex items-center justify-between mb-4">
+            <div>
+              <div
+                className="text-xs font-medium uppercase tracking-wide"
+                style={{ color: monetColors.textMuted }}
+              >
+                At Age {selectedAge}
+              </div>
+              <div className="text-sm mt-0.5" style={{ color: monetColors.textSecondary }}>
+                {isCurrentAge ? (
+                  <span style={{ color: monetColors.sage }}>Your current age</span>
+                ) : yearsFromNow > 0 ? (
+                  <span>{yearsFromNow} years from now</span>
+                ) : (
+                  <span>{Math.abs(yearsFromNow)} years ago</span>
+                )}
+              </div>
+            </div>
+            {!isCurrentAge && (
+              <button
+                type="button"
+                onClick={() => setSelectedAge(currentAge)}
+                className="text-xs transition-colors"
+                style={{ color: monetColors.lavender }}
+              >
+                ← Back to current
+              </button>
+            )}
+          </div>
+
+          {selectedProjection && (
+            <CoverageComparisonLight
+              recommendedLifeTpd={selectedProjection.recommendedLifeTpd}
+              recommendedCriticalIllness={selectedProjection.recommendedCriticalIllness}
+              recommendedPersonalAccident={selectedProjection.recommendedPersonalAccident}
+            />
+          )}
+        </div>
+
+        {/* Milestones */}
+        {milestones.length > 0 && (
+          <div
+            className="px-5 py-4 rounded-2xl"
+            style={{
+              background: monetColors.cardBg,
+              boxShadow: `0 4px 20px ${monetColors.shadowSoft}`,
+              border: `1px solid ${monetColors.cardBorder}`,
+            }}
+          >
+            <div
+              className="text-xs font-medium uppercase tracking-wide mb-3"
+              style={{ color: monetColors.textMuted }}
+            >
+              Upcoming Milestones
+            </div>
+            <MilestoneAlertsLight milestones={milestones} currentYear={currentYear} />
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}
diff --git a/frontend/src/components/insurance/tabs/PoliciesTab.tsx b/frontend/src/components/insurance/tabs/PoliciesTab.tsx
index e9f536893..e874ca19a 100644
--- a/frontend/src/components/insurance/tabs/PoliciesTab.tsx
+++ b/frontend/src/components/insurance/tabs/PoliciesTab.tsx
@@ -1,26 +1,43 @@
 'use client'
 
 import { useState } from 'react'
-import { FileText, Plus } from 'lucide-react'
+import { Plus, Shield } from 'lucide-react'
 import { AddPolicyModal } from '../modals/AddPolicyModal'
+import { useColorScheme } from '@/stores'
+import { getInsuranceTheme } from '@/lib/insurance-theme'
 
 export function PoliciesTab() {
   const [isModalOpen, setIsModalOpen] = useState(false)
+  const colorScheme = useColorScheme()
+  const monetColors = getInsuranceTheme(colorScheme)
+  const isMonet = colorScheme === 'monet'
 
   return (
-    <div className="space-y-6">
+    <div className="space-y-6 p-8">
       {/* Header */}
       <div className="flex items-center justify-between">
         <div>
-          <h2 className="text-xl font-semibold text-white">Your Policies</h2>
-          <p className="text-sm text-slate-400">
+          <h2
+            className="text-xl font-semibold"
+            style={{
+              color: monetColors.textPrimary,
+              fontFamily: "'Cormorant Garamond', Georgia, serif",
+            }}
+          >
+            Your Policies
+          </h2>
+          <p className="text-sm mt-1" style={{ color: monetColors.textSecondary }}>
             Manage all your insurance policies in one place
           </p>
         </div>
         <button
           type="button"
           onClick={() => setIsModalOpen(true)}
-          className="flex items-center gap-2 rounded-xl bg-gradient-to-r from-emerald-500 to-emerald-600 px-4 py-2.5 text-sm font-medium text-white shadow-lg shadow-emerald-500/20 transition-all hover:shadow-emerald-500/30"
+          className="flex items-center gap-2 rounded-xl px-4 py-2.5 text-sm font-medium text-white transition-all duration-200 hover:scale-105"
+          style={{
+            background: `linear-gradient(135deg, ${monetColors.lavender}, ${monetColors.lavenderDark})`,
+            boxShadow: `0 4px 16px ${monetColors.shadowSoft}`,
+          }}
         >
           <Plus className="h-4 w-4" />
           Add Policy
@@ -28,24 +45,59 @@ export function PoliciesTab() {
       </div>
 
       {/* Empty State */}
-      <div className="flex flex-col items-center justify-center rounded-2xl border border-white/[0.06] bg-white/[0.02] py-16">
-        <div className="flex h-16 w-16 items-center justify-center rounded-full bg-white/[0.03]">
-          <FileText className="h-8 w-8 text-slate-500" />
+      <div
+        className="flex flex-col items-center justify-center rounded-2xl py-16 backdrop-blur-sm"
+        style={{
+          background: monetColors.cardBg,
+          border: `1px solid ${monetColors.cardBorder}`,
+          boxShadow: `0 4px 20px ${monetColors.shadowSoft}`,
+        }}
+      >
+        <div
+          className="flex h-20 w-20 items-center justify-center rounded-2xl"
+          style={{
+            background: `linear-gradient(135deg, ${monetColors.lavenderLight}40, ${monetColors.cardBg})`,
+            border: `1px solid ${monetColors.lavenderLight}60`,
+          }}
+        >
+          <Shield className="h-10 w-10" style={{ color: monetColors.lavender }} />
         </div>
-        <h3 className="mt-4 text-lg font-medium text-white">No policies yet</h3>
-        <p className="mt-1 text-sm text-slate-400">
-          Add your insurance policies to track coverage and analyze gaps
+        <h3
+          className="mt-5 text-lg font-semibold"
+          style={{
+            color: monetColors.textPrimary,
+            fontFamily: isMonet ? "'Cormorant Garamond', Georgia, serif" : 'inherit',
+          }}
+        >
+          No policies yet
+        </h3>
+        <p className="mt-2 text-sm max-w-xs text-center" style={{ color: monetColors.textSecondary }}>
+          Add your insurance policies to track coverage and analyze gaps in your protection
         </p>
         <button
           type="button"
           onClick={() => setIsModalOpen(true)}
-          className="mt-6 flex items-center gap-2 rounded-xl border border-white/[0.1] bg-white/[0.03] px-4 py-2.5 text-sm font-medium text-white transition-all hover:bg-white/[0.05]"
+          className="mt-6 flex items-center gap-2 rounded-xl px-5 py-3 text-sm font-medium transition-all duration-200 hover:scale-105"
+          style={{
+            background: monetColors.cardBgHover,
+            border: `1px solid ${monetColors.lavender}40`,
+            color: monetColors.lavenderDark,
+            boxShadow: `0 2px 12px ${monetColors.shadowSoft}`,
+          }}
         >
           <Plus className="h-4 w-4" />
           Add Your First Policy
         </button>
       </div>
 
+      {/* Future: Policy List would go here */}
+      {/* Each policy card would use the Monet glass card pattern:
+          - background: 'rgba(255, 255, 255, 0.6)'
+          - border: '1px solid rgba(155, 139, 180, 0.15)'
+          - boxShadow: monetColors.shadowSoft
+          - rounded-2xl with hover scale effect
+      */}
+
       {/* Add Policy Modal */}
       <AddPolicyModal
         isOpen={isModalOpen}
diff --git a/frontend/src/components/landing-v2/CTASection.tsx b/frontend/src/components/landing-v2/CTASection.tsx
index 195efd14c..9910fd98f 100644
--- a/frontend/src/components/landing-v2/CTASection.tsx
+++ b/frontend/src/components/landing-v2/CTASection.tsx
@@ -84,11 +84,7 @@ export function CTASection() {
           animate={isInView ? { opacity: 1 } : {}}
           transition={{ duration: 0.6, delay: 0.3 }}
           className="text-sm text-[#8A8F98] mb-16"
-        >
-          Join{' '}
-          <span className="text-[#EDEDEF] font-medium">1,000+ Singaporeans</span>{' '}
-          mapping their financial futures
-        </motion.p>
+        />                  
 
         {/* Feature Cards */}
         <motion.div
@@ -122,10 +118,7 @@ export function CTASection() {
       <footer className="relative z-10 mt-24 md:mt-32 text-center">
         <div className="linear-rule mx-auto mb-6 w-24" />
         <p className="text-sm text-[#8A8F98]">
-          &copy; {new Date().getFullYear()} Assetra. All rights reserved.
-        </p>
-        <p className="mt-1 text-xs text-[#8A8F98]">
-          Built for Singaporeans, by Singaporeans
+          &copy; {new Date().getFullYear()} WealthProject. All rights reserved.
         </p>
       </footer>
     </section>
diff --git a/frontend/src/components/landing-v2/DemoSection.tsx b/frontend/src/components/landing-v2/DemoSection.tsx
index 6525c3315..651632a7e 100644
--- a/frontend/src/components/landing-v2/DemoSection.tsx
+++ b/frontend/src/components/landing-v2/DemoSection.tsx
@@ -347,10 +347,10 @@ export function DemoSection() {
           className="mt-8 text-center"
         >
           <p className="text-sm text-[#8A8F98]">
-            What takes hours in spreadsheets,
+            Tired of complicated spreadsheet formulas?
           </p>
           <p className="mt-1 text-lg font-medium text-blue-400">
-            Assetra does in seconds.
+            Achieve clarity without the complexity with WealthProject.
           </p>
         </motion.div>
       </div>
diff --git a/frontend/src/components/landing-v2/HeroSection.tsx b/frontend/src/components/landing-v2/HeroSection.tsx
index e746c5129..d95ed9fe3 100644
--- a/frontend/src/components/landing-v2/HeroSection.tsx
+++ b/frontend/src/components/landing-v2/HeroSection.tsx
@@ -36,19 +36,6 @@ export function HeroSection() {
         className="relative z-10 max-w-5xl mx-auto text-center"
         style={parallaxStyle}
       >
-        {/* Badge */}
-        <motion.div
-          initial={{ opacity: 0, y: 20 }}
-          animate={{ opacity: 1, y: 0 }}
-          transition={{ duration: 0.6, delay: 0.1 }}
-          className="inline-flex items-center gap-2 px-4 py-2 rounded-full border border-white/[0.06] bg-white/[0.03] mb-8"
-        >
-          <span className="w-2 h-2 rounded-full bg-blue-500 animate-pulse" />
-          <span className="text-xs font-medium tracking-wider text-[#8A8F98] uppercase">
-            Financial Planning for Singapore
-          </span>
-        </motion.div>
-
         {/* Main Headline */}
         <motion.h1
           initial={{ opacity: 0, y: 30 }}
@@ -100,32 +87,9 @@ export function HeroSection() {
           animate={{ opacity: 1 }}
           transition={{ duration: 0.6, delay: 0.7 }}
           className="mt-8 text-sm text-[#8A8F98]"
-        >
-          Trusted by{' '}
-          <span className="text-[#EDEDEF] font-medium">1,000+ Singaporeans</span>{' '}
-          planning their financial future
+        >          
         </motion.p>
-      </div>
-
-      {/* Scroll Indicator */}
-      <motion.div
-        initial={{ opacity: 0 }}
-        animate={{ opacity: 1 }}
-        transition={{ duration: 0.6, delay: 1 }}
-        className="absolute bottom-8 left-1/2 -translate-x-1/2 flex flex-col items-center gap-3"
-        style={{ opacity: 1 - scrollY * 2 }}
-      >
-        <span className="text-xs font-medium tracking-wider text-[#8A8F98] uppercase">
-          Scroll to explore
-        </span>
-        <motion.div
-          animate={{ y: [0, 8, 0] }}
-          transition={{ duration: 2, repeat: Infinity, ease: 'easeInOut' }}
-          className="w-6 h-10 rounded-full border border-white/[0.1] flex items-start justify-center p-2"
-        >
-          <div className="w-1 h-2 rounded-full bg-blue-500" />
-        </motion.div>
-      </motion.div>
+      </div>    
     </section>
   )
 }
diff --git a/frontend/src/components/landing-v2/Navigation.tsx b/frontend/src/components/landing-v2/Navigation.tsx
index ce60e5089..b02d50aa5 100644
--- a/frontend/src/components/landing-v2/Navigation.tsx
+++ b/frontend/src/components/landing-v2/Navigation.tsx
@@ -66,7 +66,7 @@ export function Navigation() {
               <div className="w-8 h-8 rounded-lg bg-gradient-to-br from-blue-500 to-blue-600 flex items-center justify-center">
                 <span className="text-white font-bold text-sm">A</span>
               </div>
-              <span>Assetra</span>
+              <span>WealthProject</span>
             </Link>
 
             {/* Desktop Navigation */}
diff --git a/frontend/src/components/landing-v2/PricingSection.tsx b/frontend/src/components/landing-v2/PricingSection.tsx
index 5eb444a99..89fff578b 100644
--- a/frontend/src/components/landing-v2/PricingSection.tsx
+++ b/frontend/src/components/landing-v2/PricingSection.tsx
@@ -6,58 +6,24 @@ import { motion, useInView } from 'framer-motion'
 import { Check, Sparkles } from 'lucide-react'
 import { SpotlightCard } from './SpotlightCard'
 
-const plans = [
-  {
-    name: 'Free',
-    price: '$0',
-    period: 'forever',
-    description: 'Perfect for getting started with financial planning',
-    features: [
-      '5-year net worth projection',
-      'Basic scenario modeling',
-      'CPF calculator',
-      'Single user',
-    ],
-    cta: 'Get Started',
-    href: '/dashboard',
-    popular: false,
-  },
-  {
-    name: 'Pro',
-    price: '$9',
-    period: '/month',
-    description: 'For serious planners who want the full picture',
-    features: [
-      '20-year net worth projection',
-      'Unlimited scenarios',
-      'Advanced CPF strategies',
-      'Goal tracking & milestones',
-      'AI-powered insights',
-      'Export to PDF/Excel',
-      'Priority support',
-    ],
-    cta: 'Start Free Trial',
-    href: '/dashboard',
-    popular: true,
-  },
-  {
-    name: 'Family',
-    price: '$19',
-    period: '/month',
-    description: 'Plan together with your partner or family',
-    features: [
-      'Everything in Pro',
-      'Up to 4 family members',
-      'Joint finances view',
-      'Family goal tracking',
-      'Shared scenarios',
-      'Legacy planning tools',
-    ],
-    cta: 'Start Free Trial',
-    href: '/dashboard',
-    popular: false,
-  },
-]
+const plan = {
+  name: 'Full Access',
+  price: '$0',
+  period: 'during trial',
+  description: 'Everything included while we\'re in early access. No credit card required.',
+  features: [
+    '20-year net worth projection',
+    'Unlimited scenarios',
+    'Advanced CPF strategies',
+    'Goal tracking & milestones',
+    'AI-powered insights',
+    'Export to PDF/Excel',
+    'Up to 4 family members',
+    'Joint finances view',
+  ],
+  cta: 'Get Started Free',
+  href: '/dashboard',
+}
 
 export function PricingSection() {
   const sectionRef = useRef<HTMLDivElement>(null)
@@ -89,81 +55,67 @@ export function PricingSection() {
             <span className="linear-text-accent">pricing</span>
           </h2>
           <p className="max-w-xl mx-auto text-lg text-[#8A8F98]">
-            Start free, upgrade when you need more. No hidden fees.
+            Full access to everything during our trial period. No credit card required.
           </p>
         </motion.div>
 
-        {/* Pricing Cards */}
-        <div className="grid grid-cols-1 md:grid-cols-3 gap-6 lg:gap-8">
-          {plans.map((plan, index) => (
-            <motion.div
-              key={plan.name}
-              initial={{ opacity: 0, y: 30 }}
-              animate={isInView ? { opacity: 1, y: 0 } : {}}
-              transition={{ duration: 0.6, delay: 0.1 + index * 0.1 }}
-              className={plan.popular ? 'md:-mt-4 md:mb-4' : ''}
-            >
-              <SpotlightCard
-                className={`relative h-full p-6 md:p-8 ${
-                  plan.popular ? 'border-blue-500/30' : ''
-                }`}
-              >
-                {/* Popular badge */}
-                {plan.popular && (
-                  <div className="absolute -top-3 left-1/2 -translate-x-1/2">
-                    <div className="flex items-center gap-1.5 px-3 py-1 rounded-full bg-blue-500/20 border border-blue-500/30">
-                      <Sparkles className="w-3 h-3 text-blue-400" />
-                      <span className="text-xs font-medium text-blue-400">
-                        Most Popular
-                      </span>
-                    </div>
-                  </div>
-                )}
+        {/* Pricing Card */}
+        <div className="max-w-md mx-auto">
+          <motion.div
+            initial={{ opacity: 0, y: 30 }}
+            animate={isInView ? { opacity: 1, y: 0 } : {}}
+            transition={{ duration: 0.6, delay: 0.1 }}
+          >
+            <SpotlightCard className="relative h-full p-6 md:p-8 border-blue-500/30">
+              {/* Trial badge */}
+              <div className="absolute -top-3 left-1/2 -translate-x-1/2">
+                <div className="flex items-center gap-1.5 px-3 py-1 rounded-full bg-blue-500/20 border border-blue-500/30">
+                  <Sparkles className="w-3 h-3 text-blue-400" />
+                  <span className="text-xs font-medium text-blue-400">
+                    Early Access
+                  </span>
+                </div>
+              </div>
 
-                <div className="flex flex-col h-full">
-                  {/* Plan name */}
-                  <h3 className="text-lg font-semibold text-[#EDEDEF] mb-2">
-                    {plan.name}
-                  </h3>
+              <div className="flex flex-col h-full">
+                {/* Plan name */}
+                <h3 className="text-lg font-semibold text-[#EDEDEF] mb-2">
+                  {plan.name}
+                </h3>
 
-                  {/* Price */}
-                  <div className="flex items-baseline gap-1 mb-2">
-                    <span className="text-4xl font-semibold text-[#EDEDEF]">
-                      {plan.price}
-                    </span>
-                    <span className="text-sm text-[#8A8F98]">{plan.period}</span>
-                  </div>
+                {/* Price */}
+                <div className="flex items-baseline gap-1 mb-2">
+                  <span className="text-4xl font-semibold text-[#EDEDEF]">
+                    {plan.price}
+                  </span>
+                  <span className="text-sm text-[#8A8F98]">{plan.period}</span>
+                </div>
 
-                  {/* Description */}
-                  <p className="text-sm text-[#8A8F98] mb-6">
-                    {plan.description}
-                  </p>
+                {/* Description */}
+                <p className="text-sm text-[#8A8F98] mb-6">
+                  {plan.description}
+                </p>
 
-                  {/* Features */}
-                  <ul className="flex-1 space-y-3 mb-8">
-                    {plan.features.map((feature) => (
-                      <li key={feature} className="flex items-start gap-3">
-                        <Check className="w-4 h-4 text-emerald-400 mt-0.5 shrink-0" />
-                        <span className="text-sm text-[#8A8F98]">{feature}</span>
-                      </li>
-                    ))}
-                  </ul>
+                {/* Features */}
+                <ul className="flex-1 space-y-3 mb-8">
+                  {plan.features.map((feature) => (
+                    <li key={feature} className="flex items-start gap-3">
+                      <Check className="w-4 h-4 text-emerald-400 mt-0.5 shrink-0" />
+                      <span className="text-sm text-[#8A8F98]">{feature}</span>
+                    </li>
+                  ))}
+                </ul>
 
-                  {/* CTA Button */}
-                  <Link
-                    href={plan.href}
-                    className={`w-full py-3 px-4 text-center text-sm font-medium rounded-lg transition-all duration-200 ${
-                      plan.popular
-                        ? 'linear-button-primary'
-                        : 'linear-button-secondary'
-                    }`}
-                  >
-                    {plan.cta}
-                  </Link>
-                </div>
-              </SpotlightCard>
-            </motion.div>
-          ))}
+                {/* CTA Button */}
+                <Link
+                  href={plan.href}
+                  className="w-full py-3 px-4 text-center text-sm font-medium rounded-lg transition-all duration-200 linear-button-primary"
+                >
+                  {plan.cta}
+                </Link>
+              </div>
+            </SpotlightCard>
+          </motion.div>
         </div>
 
         {/* FAQ or note */}
@@ -173,8 +125,6 @@ export function PricingSection() {
           transition={{ duration: 0.6, delay: 0.5 }}
           className="mt-12 text-center text-sm text-[#8A8F98]"
         >
-          All plans include a 14-day free trial. Cancel anytime.
-          <br />
           <span className="text-[#EDEDEF]">Questions?</span>{' '}
           <a href="mailto:hello@assetra.sg" className="text-blue-400 hover:text-blue-300 transition-colors">
             Get in touch
diff --git a/frontend/src/components/landing-v2/SingaporeSection.tsx b/frontend/src/components/landing-v2/SingaporeSection.tsx
index 2cf276ab5..76ca1d8da 100644
--- a/frontend/src/components/landing-v2/SingaporeSection.tsx
+++ b/frontend/src/components/landing-v2/SingaporeSection.tsx
@@ -201,7 +201,7 @@ export function SingaporeSection() {
           transition={{ duration: 0.8, delay: 0.2 }}
           className="mb-16"
         >
-          <SpotlightCard className="p-4 md:p-8 overflow-x-auto">
+          <SpotlightCard className="p-4 md:p-8 overflow-hidden">
             <div
               ref={containerRef}
               className="relative min-w-[700px] h-[380px] md:h-[420px]"
diff --git a/frontend/src/components/modals/CpfAccountFormModal/components/FormField.tsx b/frontend/src/components/modals/CpfAccountFormModal/components/FormField.tsx
index 859cfd306..528466a57 100644
--- a/frontend/src/components/modals/CpfAccountFormModal/components/FormField.tsx
+++ b/frontend/src/components/modals/CpfAccountFormModal/components/FormField.tsx
@@ -1,48 +1,5 @@
-"use client"
-
-import type { UseFormRegisterReturn } from 'react-hook-form'
-
-interface FormFieldProps {
-  label: string
-  type?: 'text' | 'number' | 'date'
-  step?: string
-  placeholder?: string
-  registration?: UseFormRegisterReturn
-  error?: string
-  hint?: string
-  required?: boolean
-}
-
-export function FormField({
-  label,
-  type = 'text',
-  step,
-  placeholder,
-  registration,
-  error,
-  hint,
-  required,
-}: FormFieldProps) {
-  return (
-    <div className="space-y-1.5">
-      <label className="block text-sm font-medium text-gray-200">
-        {label}
-        {required && <span className="ml-1 text-rose-400">*</span>}
-      </label>
-      <input
-        type={type}
-        step={step}
-        placeholder={placeholder}
-        required={required}
-        className={`w-full
-px-3 py-2
-rounded-lg border border-white/10 focus:border-emerald-400 focus:outline-none
-bg-white/5
-text-sm text-white placeholder:text-gray-500`}
-        {...registration}
-      />
-      {hint && !error && <p className="text-xs text-slate-500">{hint}</p>}
-      {error && <p className="text-xs text-rose-300">{error}</p>}
-    </div>
-  )
-}
+/**
+ * Re-export FormField from the shared UI component.
+ * This file is kept for backwards compatibility with existing imports.
+ */
+export { FormField, type FormFieldProps } from '@/components/ui/FormField'
diff --git a/frontend/src/components/modals/LayoutPreviewModal/LayoutPreviewItem.tsx b/frontend/src/components/modals/LayoutPreviewModal/LayoutPreviewItem.tsx
index 4ade1835c..3548a1e91 100644
--- a/frontend/src/components/modals/LayoutPreviewModal/LayoutPreviewItem.tsx
+++ b/frontend/src/components/modals/LayoutPreviewModal/LayoutPreviewItem.tsx
@@ -5,9 +5,10 @@ interface LayoutPreviewItemProps {
   option: LayoutOption
   isSelected: boolean
   onSelect: (id: DashboardLayout) => void
+  isMonet?: boolean
 }
 
-export function LayoutPreviewItem({ option, isSelected, onSelect }: LayoutPreviewItemProps) {
+export function LayoutPreviewItem({ option, isSelected, onSelect, isMonet = false }: LayoutPreviewItemProps) {
   return (
     <button
       type="button"
@@ -16,8 +17,12 @@ export function LayoutPreviewItem({ option, isSelected, onSelect }: LayoutPrevie
         'group flex flex-col items-center gap-3 p-4 rounded-xl transition-all duration-200',
         'border',
         isSelected
-          ? 'border-blue-500/40 bg-blue-500/10'
-          : 'border-white/[0.06] bg-white/[0.02] hover:border-white/[0.12] hover:bg-white/[0.04]'
+          ? isMonet
+            ? 'border-[var(--monet-lavender)]/40 bg-[var(--monet-lavender)]/10'
+            : 'border-blue-500/40 bg-blue-500/10'
+          : isMonet
+            ? 'border-[var(--monet-lavender)]/10 bg-[var(--monet-lavender)]/5 hover:border-[var(--monet-lavender)]/20 hover:bg-[var(--monet-lavender)]/10'
+            : 'border-white/[0.06] bg-white/[0.02] hover:border-white/[0.12] hover:bg-white/[0.04]'
       )}
     >
       {/* Layout visualization */}
@@ -25,12 +30,14 @@ export function LayoutPreviewItem({ option, isSelected, onSelect }: LayoutPrevie
         className={clsx(
           'w-32 h-24 rounded-lg overflow-hidden',
           'border',
-          isSelected ? 'border-blue-500/30' : 'border-white/[0.08]'
+          isSelected
+            ? isMonet ? 'border-[var(--monet-lavender)]/30' : 'border-blue-500/30'
+            : isMonet ? 'border-[var(--monet-lavender)]/15' : 'border-white/[0.08]'
         )}
       >
-        {option.id === 'stacked' && <StackedPreview isSelected={isSelected} />}
-        {option.id === 'chart-left' && <ChartLeftPreview isSelected={isSelected} />}
-        {option.id === 'chart-right' && <ChartRightPreview isSelected={isSelected} />}
+        {option.id === 'stacked' && <StackedPreview isSelected={isSelected} isMonet={isMonet} />}
+        {option.id === 'chart-left' && <ChartLeftPreview isSelected={isSelected} isMonet={isMonet} />}
+        {option.id === 'chart-right' && <ChartRightPreview isSelected={isSelected} isMonet={isMonet} />}
       </div>
 
       {/* Label and description */}
@@ -38,106 +45,129 @@ export function LayoutPreviewItem({ option, isSelected, onSelect }: LayoutPrevie
         <div
           className={clsx(
             'text-sm font-medium',
-            isSelected ? 'text-blue-400' : 'text-slate-200'
+            isSelected
+              ? isMonet ? 'text-[var(--monet-purple)]' : 'text-blue-400'
+              : isMonet ? 'text-[var(--monet-text-primary)]' : 'text-slate-200'
           )}
         >
           {option.label}
         </div>
-        <div className="text-xs text-slate-500 mt-0.5">{option.description}</div>
+        <div className={clsx(
+          'text-xs mt-0.5',
+          isMonet ? 'text-[var(--monet-text-muted)]' : 'text-slate-500'
+        )}>{option.description}</div>
       </div>
     </button>
   )
 }
 
-function StackedPreview({ isSelected }: { isSelected: boolean }) {
+function StackedPreview({ isSelected, isMonet }: { isSelected: boolean; isMonet: boolean }) {
+  const bgColor = isMonet ? 'bg-slate-100' : 'bg-[#0a0a0a]'
+  const chartBg = isSelected
+    ? isMonet ? 'bg-[var(--monet-lavender)]/20' : 'bg-blue-500/20'
+    : isMonet ? 'bg-[var(--monet-lavender)]/10' : 'bg-white/[0.06]'
+  const cardBg = isSelected
+    ? isMonet ? 'bg-[var(--monet-lavender)]/10' : 'bg-blue-500/10'
+    : isMonet ? 'bg-[var(--monet-lavender)]/5' : 'bg-white/[0.03]'
+  const strokeColor = isSelected
+    ? isMonet ? 'rgba(155, 139, 180, 0.6)' : 'rgba(59, 130, 246, 0.5)'
+    : isMonet ? 'rgba(155, 139, 180, 0.3)' : 'rgba(255, 255, 255, 0.15)'
+
   return (
-    <div className="h-full flex flex-col gap-1 p-1.5 bg-[#0a0a0a]">
+    <div className={clsx('h-full flex flex-col gap-1 p-1.5', bgColor)}>
       {/* Chart area - top */}
-      <div
-        className={clsx(
-          'flex-[3] rounded',
-          isSelected ? 'bg-blue-500/20' : 'bg-white/[0.06]'
-        )}
-      >
+      <div className={clsx('flex-[3] rounded', chartBg)}>
         {/* Chart line visualization */}
         <svg className="w-full h-full" preserveAspectRatio="none">
           <path
             d="M 5 70 Q 30 60, 50 50 T 95 30"
             fill="none"
-            stroke={isSelected ? 'rgba(59, 130, 246, 0.5)' : 'rgba(255, 255, 255, 0.15)'}
+            stroke={strokeColor}
             strokeWidth="2"
           />
         </svg>
       </div>
       {/* Cards area - bottom */}
       <div className="flex-[2] flex gap-1">
-        <div className={clsx('flex-1 rounded', isSelected ? 'bg-blue-500/10' : 'bg-white/[0.03]')}>
-          <CardGridPattern />
+        <div className={clsx('flex-1 rounded', cardBg)}>
+          <CardGridPattern isMonet={isMonet} />
         </div>
-        <div className={clsx('flex-1 rounded', isSelected ? 'bg-blue-500/10' : 'bg-white/[0.03]')}>
-          <CardGridPattern />
+        <div className={clsx('flex-1 rounded', cardBg)}>
+          <CardGridPattern isMonet={isMonet} />
         </div>
       </div>
     </div>
   )
 }
 
-function ChartLeftPreview({ isSelected }: { isSelected: boolean }) {
+function ChartLeftPreview({ isSelected, isMonet }: { isSelected: boolean; isMonet: boolean }) {
+  const bgColor = isMonet ? 'bg-slate-100' : 'bg-[#0a0a0a]'
+  const chartBg = isSelected
+    ? isMonet ? 'bg-[var(--monet-lavender)]/20' : 'bg-blue-500/20'
+    : isMonet ? 'bg-[var(--monet-lavender)]/10' : 'bg-white/[0.06]'
+  const cardBg = isSelected
+    ? isMonet ? 'bg-[var(--monet-lavender)]/10' : 'bg-blue-500/10'
+    : isMonet ? 'bg-[var(--monet-lavender)]/5' : 'bg-white/[0.03]'
+  const strokeColor = isSelected
+    ? isMonet ? 'rgba(155, 139, 180, 0.6)' : 'rgba(59, 130, 246, 0.5)'
+    : isMonet ? 'rgba(155, 139, 180, 0.3)' : 'rgba(255, 255, 255, 0.15)'
+
   return (
-    <div className="h-full flex gap-1 p-1.5 bg-[#0a0a0a]">
+    <div className={clsx('h-full flex gap-1 p-1.5', bgColor)}>
       {/* Chart area - left */}
-      <div
-        className={clsx(
-          'flex-[2] rounded',
-          isSelected ? 'bg-blue-500/20' : 'bg-white/[0.06]'
-        )}
-      >
+      <div className={clsx('flex-[2] rounded', chartBg)}>
         <svg className="w-full h-full" preserveAspectRatio="none">
           <path
             d="M 5 80 Q 30 70, 50 50 T 95 20"
             fill="none"
-            stroke={isSelected ? 'rgba(59, 130, 246, 0.5)' : 'rgba(255, 255, 255, 0.15)'}
+            stroke={strokeColor}
             strokeWidth="2"
           />
         </svg>
       </div>
       {/* Cards area - right */}
       <div className="flex-1 flex flex-col gap-1">
-        <div className={clsx('flex-1 rounded', isSelected ? 'bg-blue-500/10' : 'bg-white/[0.03]')}>
-          <CardGridPattern />
+        <div className={clsx('flex-1 rounded', cardBg)}>
+          <CardGridPattern isMonet={isMonet} />
         </div>
-        <div className={clsx('flex-1 rounded', isSelected ? 'bg-blue-500/10' : 'bg-white/[0.03]')}>
-          <CardGridPattern />
+        <div className={clsx('flex-1 rounded', cardBg)}>
+          <CardGridPattern isMonet={isMonet} />
         </div>
       </div>
     </div>
   )
 }
 
-function ChartRightPreview({ isSelected }: { isSelected: boolean }) {
+function ChartRightPreview({ isSelected, isMonet }: { isSelected: boolean; isMonet: boolean }) {
+  const bgColor = isMonet ? 'bg-slate-100' : 'bg-[#0a0a0a]'
+  const chartBg = isSelected
+    ? isMonet ? 'bg-[var(--monet-lavender)]/20' : 'bg-blue-500/20'
+    : isMonet ? 'bg-[var(--monet-lavender)]/10' : 'bg-white/[0.06]'
+  const cardBg = isSelected
+    ? isMonet ? 'bg-[var(--monet-lavender)]/10' : 'bg-blue-500/10'
+    : isMonet ? 'bg-[var(--monet-lavender)]/5' : 'bg-white/[0.03]'
+  const strokeColor = isSelected
+    ? isMonet ? 'rgba(155, 139, 180, 0.6)' : 'rgba(59, 130, 246, 0.5)'
+    : isMonet ? 'rgba(155, 139, 180, 0.3)' : 'rgba(255, 255, 255, 0.15)'
+
   return (
-    <div className="h-full flex gap-1 p-1.5 bg-[#0a0a0a]">
+    <div className={clsx('h-full flex gap-1 p-1.5', bgColor)}>
       {/* Cards area - left */}
       <div className="flex-1 flex flex-col gap-1">
-        <div className={clsx('flex-1 rounded', isSelected ? 'bg-blue-500/10' : 'bg-white/[0.03]')}>
-          <CardGridPattern />
+        <div className={clsx('flex-1 rounded', cardBg)}>
+          <CardGridPattern isMonet={isMonet} />
         </div>
-        <div className={clsx('flex-1 rounded', isSelected ? 'bg-blue-500/10' : 'bg-white/[0.03]')}>
-          <CardGridPattern />
+        <div className={clsx('flex-1 rounded', cardBg)}>
+          <CardGridPattern isMonet={isMonet} />
         </div>
       </div>
       {/* Chart area - right */}
-      <div
-        className={clsx(
-          'flex-[2] rounded',
-          isSelected ? 'bg-blue-500/20' : 'bg-white/[0.06]'
-        )}
-      >
+      <div className={clsx('flex-[2] rounded', chartBg)}>
         <svg className="w-full h-full" preserveAspectRatio="none">
           <path
             d="M 5 80 Q 30 70, 50 50 T 95 20"
             fill="none"
-            stroke={isSelected ? 'rgba(59, 130, 246, 0.5)' : 'rgba(255, 255, 255, 0.15)'}
+            stroke={strokeColor}
             strokeWidth="2"
           />
         </svg>
@@ -146,12 +176,15 @@ function ChartRightPreview({ isSelected }: { isSelected: boolean }) {
   )
 }
 
-function CardGridPattern() {
+function CardGridPattern({ isMonet }: { isMonet: boolean }) {
+  const lineColor = isMonet ? 'bg-[var(--monet-lavender)]/20' : 'bg-white/[0.08]'
+  const lineColorLight = isMonet ? 'bg-[var(--monet-lavender)]/10' : 'bg-white/[0.04]'
+
   return (
     <div className="h-full w-full p-1 flex flex-col gap-0.5">
-      <div className="h-1 w-3/4 rounded-sm bg-white/[0.08]" />
-      <div className="h-0.5 w-1/2 rounded-sm bg-white/[0.04]" />
-      <div className="h-0.5 w-2/3 rounded-sm bg-white/[0.04]" />
+      <div className={clsx('h-1 w-3/4 rounded-sm', lineColor)} />
+      <div className={clsx('h-0.5 w-1/2 rounded-sm', lineColorLight)} />
+      <div className={clsx('h-0.5 w-2/3 rounded-sm', lineColorLight)} />
     </div>
   )
 }
diff --git a/frontend/src/components/modals/LayoutPreviewModal/LayoutPreviewModal.tsx b/frontend/src/components/modals/LayoutPreviewModal/LayoutPreviewModal.tsx
index e268a4eb7..88a1cf8ea 100644
--- a/frontend/src/components/modals/LayoutPreviewModal/LayoutPreviewModal.tsx
+++ b/frontend/src/components/modals/LayoutPreviewModal/LayoutPreviewModal.tsx
@@ -6,6 +6,7 @@ import clsx from 'clsx'
 import { Modal } from '@/components/ui/Modal'
 import { LayoutPreviewItem } from './LayoutPreviewItem'
 import { LAYOUT_OPTIONS, type DashboardLayout } from './layoutTypes'
+import { useColorScheme } from '@/stores'
 
 interface LayoutPreviewModalProps {
   isOpen: boolean
@@ -20,6 +21,9 @@ export function LayoutPreviewModal({
   currentLayout,
   onLayoutChange,
 }: LayoutPreviewModalProps) {
+  const colorScheme = useColorScheme()
+  const isMonet = colorScheme === 'monet'
+
   const handleLayoutSelect = (layout: DashboardLayout) => {
     onLayoutChange(layout)
     onClose()
@@ -29,28 +33,35 @@ export function LayoutPreviewModal({
     <Modal
       isOpen={isOpen}
       onClose={onClose}
-      overlayClassName="bg-black/60 backdrop-blur-sm"
+      overlayClassName={isMonet ? 'bg-black/30 backdrop-blur-sm' : 'bg-black/60 backdrop-blur-sm'}
     >
       <div
         className={clsx(
           'w-[480px] max-w-[90vw]',
           'rounded-2xl',
-          'border border-white/[0.08]',
-          'bg-[#0c0c0c]',
-          'shadow-2xl'
+          'shadow-2xl',
+          isMonet
+            ? 'border border-[var(--monet-lavender)]/20 bg-white'
+            : 'border border-white/[0.08] bg-[#0c0c0c]'
         )}
       >
         {/* Header */}
-        <div className="flex items-center justify-between px-6 py-4 border-b border-white/[0.06]">
-          <h2 className="text-lg font-medium text-white">Choose Layout</h2>
+        <div className={clsx(
+          'flex items-center justify-between px-6 py-4 border-b',
+          isMonet ? 'border-[var(--monet-lavender)]/10' : 'border-white/[0.06]'
+        )}>
+          <h2 className={clsx(
+            'text-lg font-medium',
+            isMonet ? 'text-[var(--monet-text-primary)]' : 'text-white'
+          )}>Choose Layout</h2>
           <button
             type="button"
             onClick={onClose}
             className={clsx(
-              'p-1.5 rounded-lg',
-              'text-slate-400 hover:text-white',
-              'hover:bg-white/[0.06]',
-              'transition-colors'
+              'p-1.5 rounded-lg transition-colors',
+              isMonet
+                ? 'text-[var(--monet-text-muted)] hover:text-[var(--monet-text-primary)] hover:bg-[var(--monet-lavender)]/10'
+                : 'text-slate-400 hover:text-white hover:bg-white/[0.06]'
             )}
           >
             <X className="h-4 w-4" />
@@ -66,12 +77,16 @@ export function LayoutPreviewModal({
                 option={option}
                 isSelected={currentLayout === option.id}
                 onSelect={handleLayoutSelect}
+                isMonet={isMonet}
               />
             ))}
           </div>
 
           {/* Helper text */}
-          <p className="mt-4 text-center text-xs text-slate-500">
+          <p className={clsx(
+            'mt-4 text-center text-xs',
+            isMonet ? 'text-[var(--monet-text-muted)]' : 'text-slate-500'
+          )}>
             Side-by-side layouts require a minimum screen width of 1280px
           </p>
         </div>
diff --git a/frontend/src/components/modals/OnboardingWizardModal/OnboardingWizardModal.tsx b/frontend/src/components/modals/OnboardingWizardModal/OnboardingWizardModal.tsx
new file mode 100644
index 000000000..82a5d227d
--- /dev/null
+++ b/frontend/src/components/modals/OnboardingWizardModal/OnboardingWizardModal.tsx
@@ -0,0 +1,222 @@
+'use client'
+
+import { useCallback, useEffect, useRef, useState } from 'react'
+import { useMutation, useQueryClient, useQuery } from '@tanstack/react-query'
+import { X, AlertTriangle } from 'lucide-react'
+import { Modal } from '@/components/ui/Modal'
+import { cn } from '@/lib/utils'
+import { useColorScheme } from '@/stores'
+import { settingsApi } from '@/api/financial'
+import { QUERY_KEYS } from '@/lib/queryKeys'
+import type { UserSettings } from '@/types/financial'
+import { OnboardingWizardView } from './OnboardingWizardView'
+
+interface OnboardingWizardModalProps {
+  isOpen: boolean
+  onClose: () => void
+}
+
+export function OnboardingWizardModal({ isOpen, onClose }: OnboardingWizardModalProps) {
+  const colorScheme = useColorScheme()
+  const isMonet = colorScheme === 'monet'
+  const queryClient = useQueryClient()
+  const [showExitConfirm, setShowExitConfirm] = useState(false)
+  const showExitConfirmRef = useRef(false)
+
+  // Keep ref in sync so the keydown listener always sees current state
+  useEffect(() => {
+    showExitConfirmRef.current = showExitConfirm
+  }, [showExitConfirm])
+
+  // Intercept Escape at the document level before the Modal's handler
+  // When confirmation is showing, Escape should dismiss it (not close the modal)
+  useEffect(() => {
+    if (!isOpen) return
+
+    const handleEscapeIntercept = (e: KeyboardEvent) => {
+      if (e.key === 'Escape' && showExitConfirmRef.current) {
+        e.stopImmediatePropagation()
+        setShowExitConfirm(false)
+      }
+    }
+
+    // Use capture phase to fire before the Modal's listener
+    document.addEventListener('keydown', handleEscapeIntercept, true)
+    return () => document.removeEventListener('keydown', handleEscapeIntercept, true)
+  }, [isOpen])
+
+  // Get current settings for the mutation
+  const { data: userSettings } = useQuery({
+    queryKey: QUERY_KEYS.settings.user,
+    queryFn: () => settingsApi.getUserSettings(),
+    staleTime: 5 * 60 * 1000,
+  })
+
+  // Mark onboarding as completed
+  const markCompletedMutation = useMutation({
+    mutationFn: () => {
+      if (!userSettings) throw new Error('Settings not loaded')
+      return settingsApi.updateUserSettings({
+        ...userSettings,
+        onboardingCompleted: true,
+      })
+    },
+    onMutate: () => {
+      // Optimistically update the cache so Dashboard's auto-trigger useEffect
+      // immediately sees onboardingCompleted: true, preventing re-trigger on refresh
+      const currentSettings = queryClient.getQueryData<UserSettings>(QUERY_KEYS.settings.user)
+      if (currentSettings) {
+        queryClient.setQueryData<UserSettings>(QUERY_KEYS.settings.user, {
+          ...currentSettings,
+          onboardingCompleted: true,
+        })
+      }
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: QUERY_KEYS.settings.user })
+      // Also invalidate all financial data to pick up newly created items
+      queryClient.invalidateQueries({ queryKey: QUERY_KEYS.financial.all })
+    },
+  })
+
+  // Intercept close attempts (Escape, X button, overlay click) — show confirmation
+  const handleCloseAttempt = useCallback(() => {
+    setShowExitConfirm(true)
+  }, [])
+
+  // Confirm exit — actually close and mark completed
+  const handleConfirmExit = useCallback(() => {
+    setShowExitConfirm(false)
+    markCompletedMutation.mutate()
+    onClose()
+  }, [markCompletedMutation, onClose])
+
+  // Cancel exit — dismiss the confirmation and stay in wizard
+  const handleCancelExit = useCallback(() => {
+    setShowExitConfirm(false)
+  }, [])
+
+  // Handle skip/dismiss — explicit action, no confirmation needed
+  const handleSkipSetup = useCallback(() => {
+    markCompletedMutation.mutate()
+    onClose()
+  }, [markCompletedMutation, onClose])
+
+  // Handle wizard completion (from summary step) — no confirmation needed
+  const handleComplete = useCallback(() => {
+    markCompletedMutation.mutate()
+    onClose()
+  }, [markCompletedMutation, onClose])
+
+  return (
+    <Modal
+      isOpen={isOpen}
+      onClose={handleCloseAttempt}
+      overlayClassName={isMonet ? 'bg-black/30 backdrop-blur-sm' : 'bg-black/60 backdrop-blur-sm'}
+      className={cn(
+        'w-full max-w-[900px] max-h-[90vh] mx-4 sm:mx-6 rounded-2xl border overflow-hidden flex flex-col relative',
+        isMonet
+          ? 'border-[var(--monet-lavender)]/20 bg-white'
+          : 'border-white/[0.08] bg-[#0a0a0a]'
+      )}
+    >
+      {/* Header */}
+      <div className={cn(
+        'flex items-center justify-between px-4 sm:px-6 py-4 border-b flex-shrink-0',
+        isMonet
+          ? 'border-[var(--monet-lavender)]/10'
+          : 'border-white/[0.06]'
+      )}>
+        <h2 className={cn(
+          'text-base font-semibold',
+          isMonet ? 'text-[var(--monet-text-primary)]' : 'text-white'
+        )}>
+          Quick Start: Creating a financial plan
+        </h2>
+        <button
+          type="button"
+          onClick={handleCloseAttempt}
+          className={cn(
+            'p-1.5 rounded-lg transition-colors',
+            isMonet
+              ? 'text-[var(--monet-text-muted)] hover:text-[var(--monet-text-primary)] hover:bg-[var(--monet-lavender)]/10'
+              : 'text-slate-500 hover:text-white hover:bg-white/[0.05]'
+          )}
+        >
+          <X className="w-4 h-4" />
+        </button>
+      </div>
+
+      {/* Content */}
+      <div className="flex-1 min-h-0 flex flex-col overflow-hidden">
+        <OnboardingWizardView
+          onClose={handleComplete}
+          onSkipSetup={handleSkipSetup}
+          isMonet={isMonet}
+        />
+      </div>
+
+      {/* Exit Confirmation Overlay */}
+      {showExitConfirm && (
+        <div className="absolute inset-0 z-10 flex items-center justify-center bg-black/40 backdrop-blur-[2px] rounded-2xl">
+          <div className={cn(
+            'mx-6 w-full max-w-sm rounded-xl border p-5 shadow-xl',
+            isMonet
+              ? 'bg-white border-[var(--monet-lavender)]/20'
+              : 'bg-[#141414] border-white/[0.08]'
+          )}>
+            <div className="flex items-start gap-3 mb-4">
+              <div className={cn(
+                'flex-shrink-0 w-9 h-9 rounded-full flex items-center justify-center',
+                isMonet ? 'bg-amber-100' : 'bg-amber-500/15'
+              )}>
+                <AlertTriangle className={cn('w-4.5 h-4.5', isMonet ? 'text-amber-600' : 'text-amber-400')} />
+              </div>
+              <div>
+                <h3 className={cn(
+                  'text-sm font-semibold mb-1',
+                  isMonet ? 'text-[var(--monet-text-primary)]' : 'text-white'
+                )}>
+                  Exit setup?
+                </h3>
+                <p className={cn(
+                  'text-xs leading-relaxed',
+                  isMonet ? 'text-[var(--monet-text-secondary)]' : 'text-slate-400'
+                )}>
+                  Your progress won&apos;t be saved. You can always set up your financial plan later from the dashboard.
+                </p>
+              </div>
+            </div>
+
+            <div className="flex items-center justify-end gap-2">
+              <button
+                type="button"
+                onClick={handleCancelExit}
+                className={cn(
+                  'px-3.5 py-1.5 rounded-lg text-xs font-medium transition-colors',
+                  isMonet
+                    ? 'text-[var(--monet-text-secondary)] hover:bg-[var(--monet-lavender)]/10'
+                    : 'text-slate-400 hover:bg-white/[0.05]'
+                )}
+              >
+                Continue Setup
+              </button>
+              <button
+                type="button"
+                onClick={handleConfirmExit}
+                className={cn(
+                  'px-3.5 py-1.5 rounded-lg text-xs font-medium transition-colors',
+                  isMonet
+                    ? 'bg-rose-500 text-white hover:bg-rose-600'
+                    : 'bg-rose-500/15 text-rose-400 hover:bg-rose-500/25 border border-rose-500/25'
+                )}
+              >
+                Exit Setup
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+    </Modal>
+  )
+}
diff --git a/frontend/src/components/modals/OnboardingWizardModal/OnboardingWizardView.tsx b/frontend/src/components/modals/OnboardingWizardModal/OnboardingWizardView.tsx
new file mode 100644
index 000000000..f31e82501
--- /dev/null
+++ b/frontend/src/components/modals/OnboardingWizardModal/OnboardingWizardView.tsx
@@ -0,0 +1,267 @@
+'use client'
+
+import { useState, useCallback } from 'react'
+import { FormProvider } from 'react-hook-form'
+import { AnimatePresence, motion } from 'framer-motion'
+import { useOnboardingForm } from './hooks/useOnboardingForm'
+import { useOnboardingSubmit } from './hooks/useOnboardingSubmit'
+import { useLoadWizardProfile } from './hooks/useLoadWizardProfile'
+import { StepIndicator } from './components/StepIndicator'
+import { PersonalInfoStep } from './components/PersonalInfoStep'
+import { IncomeExpensesStep } from './components/IncomeExpensesStep'
+import { AssetsLiabilitiesStep } from './components/AssetsLiabilitiesStep'
+import { CpfAccountsStep } from './components/CpfAccountsStep'
+import { SummaryStep } from './components/SummaryStep'
+import { LoadSampleDataButton } from './components/LoadSampleDataButton'
+import type { StepStatus } from './types'
+
+interface OnboardingWizardViewProps {
+  onClose: () => void
+  onSkipSetup: () => void
+  isMonet: boolean
+}
+
+const STEP_ANIMATION = {
+  initial: { opacity: 0, x: 40 },
+  animate: { opacity: 1, x: 0 },
+  exit: { opacity: 0, x: -40 },
+  transition: { duration: 0.25, ease: 'easeInOut' as const },
+}
+
+const STEP_ANIMATION_BACK = {
+  initial: { opacity: 0, x: -40 },
+  animate: { opacity: 1, x: 0 },
+  exit: { opacity: 0, x: 40 },
+  transition: { duration: 0.25, ease: 'easeInOut' as const },
+}
+
+export function OnboardingWizardView({ onClose, onSkipSetup, isMonet }: OnboardingWizardViewProps) {
+  const { form } = useOnboardingForm()
+  const [currentStepIndex, setCurrentStepIndex] = useState(0)
+  const [stepStatuses, setStepStatuses] = useState<StepStatus[]>(['active', 'pending', 'pending', 'pending'])
+  const [animationDirection, setAnimationDirection] = useState<'forward' | 'back'>('forward')
+  const [showSummary, setShowSummary] = useState(false)
+
+  const { submitStep, isSubmitting, submissionError } = useOnboardingSubmit(form)
+  const { loadProfile } = useLoadWizardProfile()
+
+  // ─── Load sample profile ──────────────────────────────────────────────────
+
+  const handleLoadProfile = useCallback((profileId: string) => {
+    const success = loadProfile(profileId, form)
+    if (success) {
+      // Reset wizard navigation to step 0 with all steps active
+      setStepStatuses(['active', 'pending', 'pending', 'pending'])
+      setCurrentStepIndex(0)
+      setAnimationDirection('forward')
+      setShowSummary(false)
+    }
+  }, [loadProfile, form])
+
+  // ─── Navigation ─────────────────────────────────────────────────────────────
+
+  const goToStep = useCallback((targetIndex: number) => {
+    setAnimationDirection(targetIndex > currentStepIndex ? 'forward' : 'back')
+    setCurrentStepIndex(targetIndex)
+    setStepStatuses(prev => {
+      const next = [...prev]
+      next[targetIndex] = 'active'
+      return next
+    })
+  }, [currentStepIndex])
+
+  const handleNext = useCallback(async () => {
+    // Validate and submit current step
+    const success = await submitStep(currentStepIndex)
+    if (!success) return
+
+    // Mark current step completed
+    setStepStatuses(prev => {
+      const next = [...prev]
+      next[currentStepIndex] = 'completed'
+      return next
+    })
+
+    if (currentStepIndex < 3) {
+      // Advance to next step
+      setAnimationDirection('forward')
+      const nextIndex = currentStepIndex + 1
+      setCurrentStepIndex(nextIndex)
+      setStepStatuses(prev => {
+        const next = [...prev]
+        next[nextIndex] = 'active'
+        return next
+      })
+    } else {
+      // Last step → show summary
+      setShowSummary(true)
+    }
+  }, [currentStepIndex, submitStep])
+
+  const handleBack = useCallback(() => {
+    if (currentStepIndex > 0) {
+      setAnimationDirection('back')
+      setCurrentStepIndex(currentStepIndex - 1)
+    }
+  }, [currentStepIndex])
+
+
+  const handleStepClick = useCallback((stepIndex: number) => {
+    goToStep(stepIndex)
+  }, [goToStep])
+
+  // ─── Render ─────────────────────────────────────────────────────────────────
+
+  const animation = animationDirection === 'forward' ? STEP_ANIMATION : STEP_ANIMATION_BACK
+
+  const stepComponents = [
+    <PersonalInfoStep key="personal" isMonet={isMonet} />,
+    <IncomeExpensesStep key="income" isMonet={isMonet} />,
+    <AssetsLiabilitiesStep key="assets" isMonet={isMonet} />,
+    <CpfAccountsStep key="cpf" isMonet={isMonet} />,
+  ]
+
+  const handleBackFromSummary = useCallback(() => {
+    setShowSummary(false)
+    // Go back to the last step (CPF Accounts)
+    setAnimationDirection('back')
+    setCurrentStepIndex(3)
+    setStepStatuses(prev => {
+      const next = [...prev]
+      next[3] = 'active'
+      return next
+    })
+  }, [])
+
+  const handleStepClickFromSummary = useCallback((stepIndex: number) => {
+    setShowSummary(false)
+    setAnimationDirection('back')
+    setCurrentStepIndex(stepIndex)
+    setStepStatuses(prev => {
+      const next = [...prev]
+      next[stepIndex] = 'active'
+      return next
+    })
+  }, [])
+
+  if (showSummary) {
+    return (
+      <FormProvider {...form}>
+        <div className="flex flex-col h-full">
+          {/* Step Indicator — still visible so users can click back */}
+          <StepIndicator
+            currentStepIndex={-1}
+            stepStatuses={stepStatuses}
+            onStepClick={handleStepClickFromSummary}
+            isMonet={isMonet}
+          />
+          <div className={isMonet ? 'border-t border-[var(--monet-lavender)]/10' : 'border-t border-white/[0.06]'} />
+
+          <div className="flex-1 overflow-y-auto">
+            <SummaryStep
+              stepStatuses={stepStatuses}
+              onClose={onClose}
+              onBack={handleBackFromSummary}
+              isMonet={isMonet}
+            />
+          </div>
+        </div>
+      </FormProvider>
+    )
+  }
+
+  return (
+    <FormProvider {...form}>
+      <div className="flex flex-col h-full">
+        {/* Step Indicator */}
+        <StepIndicator
+          currentStepIndex={currentStepIndex}
+          stepStatuses={stepStatuses}
+          onStepClick={handleStepClick}
+          isMonet={isMonet}
+        />
+
+        {/* Divider */}
+        <div className={isMonet ? 'border-t border-[var(--monet-lavender)]/10' : 'border-t border-white/[0.06]'} />
+
+        {/* Step Content */}
+        <div className="flex-1 min-h-0 overflow-y-auto px-4 sm:px-6 py-5">
+          <AnimatePresence mode="wait">
+            <motion.div
+              key={currentStepIndex}
+              initial={animation.initial}
+              animate={animation.animate}
+              exit={animation.exit}
+              transition={animation.transition}
+            >
+              {stepComponents[currentStepIndex]}
+            </motion.div>
+          </AnimatePresence>
+
+          {/* Error message */}
+          {submissionError && (
+            <div className="mt-4 px-4 py-3 rounded-xl border border-rose-500/20 bg-rose-500/5">
+              <p className="text-sm text-rose-400">{submissionError}</p>
+            </div>
+          )}
+        </div>
+
+        {/* Footer */}
+        <div className={`flex-shrink-0 px-4 sm:px-6 py-3 border-t ${
+          isMonet ? 'border-[var(--monet-lavender)]/10' : 'border-white/[0.06]'
+        }`}>
+          <div className="flex items-center justify-between">
+            {/* Left side: Skip Setup + Load Sample */}
+            <div className="flex items-center gap-3">
+              <button
+                type="button"
+                onClick={onSkipSetup}
+                className={`text-xs font-medium transition-colors ${
+                  isMonet
+                    ? 'text-[var(--monet-text-muted)] hover:text-[var(--monet-text-secondary)]'
+                    : 'text-slate-600 hover:text-slate-400'
+                }`}
+              >
+                Skip Setup
+              </button>
+              <span className={`text-xs ${isMonet ? 'text-[var(--monet-text-muted)]/30' : 'text-slate-700'}`}>·</span>
+              <LoadSampleDataButton
+                onLoadProfile={handleLoadProfile}
+                isMonet={isMonet}
+              />
+            </div>
+
+            {/* Right side: Back + Next */}
+            <div className="flex items-center gap-2">
+              {currentStepIndex > 0 && (
+                <button
+                  type="button"
+                  onClick={handleBack}
+                  className={`px-3 py-1.5 rounded-lg text-xs font-medium transition-all ${
+                    isMonet
+                      ? 'text-[var(--monet-text-secondary)] hover:bg-[var(--monet-lavender)]/10'
+                      : 'text-slate-400 hover:bg-white/[0.05]'
+                  }`}
+                >
+                  &larr; Back
+                </button>
+              )}
+              <button
+                type="button"
+                onClick={handleNext}
+                disabled={isSubmitting}
+                className={`px-4 py-1.5 rounded-lg text-xs font-medium transition-all ${
+                  isMonet
+                    ? 'bg-[var(--monet-sage)] text-white hover:bg-[var(--monet-sage)]/90'
+                    : 'bg-emerald-500/15 text-emerald-400 hover:bg-emerald-500/25 border border-emerald-500/25'
+                } disabled:opacity-50`}
+              >
+                {isSubmitting ? 'Saving...' : currentStepIndex === 3 ? 'Finish \u2192' : 'Next \u2192'}
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </FormProvider>
+  )
+}
diff --git a/frontend/src/components/modals/OnboardingWizardModal/components/AssetRow.tsx b/frontend/src/components/modals/OnboardingWizardModal/components/AssetRow.tsx
new file mode 100644
index 000000000..71a0d2762
--- /dev/null
+++ b/frontend/src/components/modals/OnboardingWizardModal/components/AssetRow.tsx
@@ -0,0 +1,193 @@
+import { useFormContext } from 'react-hook-form'
+import { Trash2 } from 'lucide-react'
+import { motion } from 'framer-motion'
+import { cn } from '@/lib/utils'
+import { formatCurrency } from '@/lib/format'
+import { CurrencyInput } from '@/components/ui/CurrencyInput'
+import { CustomDropdown } from '@/components/modals/ScenarioEventModal/components/CustomDropdown'
+import type { OnboardingFormData } from '../types'
+import { ASSET_CATEGORY_LABELS } from '../types'
+import { ASSET_CATEGORY_ICONS } from './incomeExpensesConstants'
+
+const ASSET_CATEGORY_OPTIONS = Object.entries(ASSET_CATEGORY_LABELS).map(([value, label]) => ({
+  value,
+  label: `${ASSET_CATEGORY_ICONS[value] ?? ''} ${label}`,
+}))
+
+interface AssetRowProps {
+  fieldIndex: number
+  isExpanded: boolean
+  onToggle: () => void
+  onRemove: () => void
+  isMonet: boolean
+}
+
+export function AssetRow({
+  fieldIndex,
+  isExpanded,
+  onToggle,
+  onRemove,
+  isMonet,
+}: AssetRowProps) {
+  const { watch, setValue, register, formState: { errors } } = useFormContext<OnboardingFormData>()
+  const asset = watch(`assets.${fieldIndex}`)
+  const fieldErrors = errors.assets?.[fieldIndex]
+
+  if (!asset) return null
+
+  const categoryIcon = ASSET_CATEGORY_ICONS[asset.category] ?? '📦'
+  const categoryLabel = ASSET_CATEGORY_LABELS[asset.category] ?? asset.category
+
+  const getInputClass = (hasError?: boolean) => cn(
+    'w-full py-2 px-3 rounded-lg text-sm transition-colors focus:outline-none',
+    hasError
+      ? 'border border-rose-500/40 bg-rose-500/5 text-white placeholder:text-slate-600 focus:border-rose-500/60'
+      : isMonet
+        ? 'bg-[var(--monet-lavender)]/5 border border-[var(--monet-lavender)]/15 text-[var(--monet-text-primary)] placeholder:text-[var(--monet-text-muted)] focus:border-[var(--monet-sage)]/40'
+        : 'bg-white/[0.03] border border-white/[0.06] text-white placeholder:text-slate-600 focus:border-blue-500/30 focus:bg-blue-500/[0.06]'
+  )
+
+  // ─── Collapsed row ────────────────────────────────────────────────────────
+  const hasAnyError = !!fieldErrors
+  const displayName = asset.name || 'Untitled'
+  const displayAmount = asset.currentValue > 0 ? formatCurrency(asset.currentValue) : '—'
+
+  if (!isExpanded) {
+    return (
+      <div
+        onClick={onToggle}
+        className={cn(
+          'group flex items-center gap-3 px-3 py-2.5 rounded-xl cursor-pointer transition-all',
+          hasAnyError
+            ? 'border border-rose-500/30 bg-rose-500/5 hover:border-rose-500/40'
+            : isMonet
+              ? 'hover:bg-[var(--monet-lavender)]/5 border border-transparent hover:border-[var(--monet-lavender)]/10'
+              : 'hover:bg-white/[0.02] border border-transparent hover:border-white/[0.06]'
+        )}
+      >
+        <span className="text-base flex-shrink-0">{categoryIcon}</span>
+        <span className={cn(
+          'flex-1 text-sm truncate',
+          isMonet ? 'text-[var(--monet-text-primary)]' : 'text-slate-200'
+        )}>
+          {displayName} · {categoryLabel}
+        </span>
+        <span className={cn(
+          'flex-shrink-0 text-sm font-mono tabular-nums',
+          isMonet ? 'text-[var(--monet-sage)]' : 'text-emerald-400'
+        )}>
+          {displayAmount}
+        </span>
+        <button
+          type="button"
+          onClick={(e) => { e.stopPropagation(); onRemove() }}
+          className={cn(
+            'flex-shrink-0 p-1 rounded-lg transition-all opacity-0 group-hover:opacity-100',
+            isMonet
+              ? 'text-[var(--monet-text-muted)] hover:text-rose-500 hover:bg-rose-50'
+              : 'text-slate-600 hover:text-rose-400 hover:bg-rose-500/10'
+          )}
+        >
+          <Trash2 className="w-3.5 h-3.5" />
+        </button>
+      </div>
+    )
+  }
+
+  // ─── Expanded row ─────────────────────────────────────────────────────────
+  return (
+    <motion.div
+      initial={{ height: 0, opacity: 0 }}
+      animate={{ height: 'auto', opacity: 1 }}
+      exit={{ height: 0, opacity: 0 }}
+      transition={{ duration: 0.2, ease: 'easeInOut' }}
+      className="overflow-hidden"
+    >
+      <div
+        className={cn(
+          'rounded-xl border p-4 space-y-3',
+          isMonet
+            ? 'border-[var(--monet-sage)]/20 bg-[var(--monet-lavender)]/5'
+            : 'border-white/[0.08] bg-white/[0.02]'
+        )}
+      >
+        {/* Row 1: Name + Current Value */}
+        <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
+          <div>
+            <label className={cn('text-[10px] font-medium uppercase tracking-wider mb-1 block', isMonet ? 'text-[var(--monet-text-muted)]' : 'text-slate-600')}>
+              Name
+            </label>
+            <input
+              {...register(`assets.${fieldIndex}.name`)}
+              placeholder="e.g. Emergency Fund"
+              className={getInputClass(!!fieldErrors?.name)}
+              autoFocus
+            />
+          </div>
+          <div>
+            <label className={cn('text-[10px] font-medium uppercase tracking-wider mb-1 block', isMonet ? 'text-[var(--monet-text-muted)]' : 'text-slate-600')}>
+              Current Value
+            </label>
+            <CurrencyInput
+              value={asset.currentValue}
+              onChange={(val) => setValue(`assets.${fieldIndex}.currentValue`, val)}
+              size="sm"
+            />
+          </div>
+        </div>
+
+        {/* Row 2: Category + Growth Rate */}
+        <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
+          <div>
+            <label className={cn('text-[10px] font-medium uppercase tracking-wider mb-1 block', isMonet ? 'text-[var(--monet-text-muted)]' : 'text-slate-600')}>
+              Category
+            </label>
+            <CustomDropdown
+              value={asset.category}
+              onChange={(val) => setValue(`assets.${fieldIndex}.category`, val as any)}
+              options={ASSET_CATEGORY_OPTIONS}
+              variant={isMonet ? 'monet' : 'dark'}
+              minWidth="100%"
+            />
+          </div>
+          <div>
+            <label className={cn('text-[10px] font-medium uppercase tracking-wider mb-1 block', isMonet ? 'text-[var(--monet-text-muted)]' : 'text-slate-600')}>
+              Annual Growth Rate
+            </label>
+            <CurrencyInput
+              value={asset.growthRate}
+              onChange={(val) => setValue(`assets.${fieldIndex}.growthRate`, val)}
+              isPercentage
+              size="sm"
+            />
+          </div>
+        </div>
+
+        {/* Collapse / Delete actions */}
+        <div className="flex items-center justify-between pt-1">
+          <button
+            type="button"
+            onClick={onToggle}
+            className={cn(
+              'text-xs transition-colors',
+              isMonet ? 'text-[var(--monet-text-muted)] hover:text-[var(--monet-text-secondary)]' : 'text-slate-500 hover:text-slate-300'
+            )}
+          >
+            Done
+          </button>
+          <button
+            type="button"
+            onClick={onRemove}
+            className={cn(
+              'flex items-center gap-1 text-xs transition-colors',
+              isMonet ? 'text-rose-400 hover:text-rose-500' : 'text-rose-400/60 hover:text-rose-400'
+            )}
+          >
+            <Trash2 className="w-3 h-3" />
+            Remove
+          </button>
+        </div>
+      </div>
+    </motion.div>
+  )
+}
diff --git a/frontend/src/components/modals/OnboardingWizardModal/components/AssetsLiabilitiesStep.tsx b/frontend/src/components/modals/OnboardingWizardModal/components/AssetsLiabilitiesStep.tsx
new file mode 100644
index 000000000..e5b516a4e
--- /dev/null
+++ b/frontend/src/components/modals/OnboardingWizardModal/components/AssetsLiabilitiesStep.tsx
@@ -0,0 +1,206 @@
+import { useState } from 'react'
+import { useFormContext, useFieldArray } from 'react-hook-form'
+import { Plus } from 'lucide-react'
+import { AnimatePresence, motion } from 'framer-motion'
+import { cn } from '@/lib/utils'
+import { generateUUID } from '@/lib/utils'
+import { formatCurrency } from '@/lib/format'
+import type { OnboardingFormData, OnboardingAsset, OnboardingLiability } from '../types'
+import { AssetRow } from './AssetRow'
+import { LiabilityRow } from './LiabilityRow'
+
+interface AssetsLiabilitiesStepProps {
+  isMonet: boolean
+}
+
+function createEmptyAsset(): OnboardingAsset {
+  return {
+    tempId: generateUUID(),
+    serverId: null,
+    name: '',
+    category: 'cash_savings',
+    currentValue: 0,
+    growthRate: 3,
+  }
+}
+
+function createEmptyLiability(): OnboardingLiability {
+  return {
+    tempId: generateUUID(),
+    serverId: null,
+    name: '',
+    category: 'mortgage',
+    currentBalance: 0,
+    interestRateApr: 0,
+    minimumPayment: 0,
+  }
+}
+
+const rowAnimation = {
+  initial: { opacity: 0, y: -8 },
+  animate: { opacity: 1, y: 0 },
+  exit: { opacity: 0, y: 8, transition: { duration: 0.15 } },
+  transition: { duration: 0.2 },
+}
+
+export function AssetsLiabilitiesStep({ isMonet }: AssetsLiabilitiesStepProps) {
+  const { watch, control } = useFormContext<OnboardingFormData>()
+  const { fields: assetFields, append: appendAsset, remove: removeAsset } = useFieldArray({ control, name: 'assets' })
+  const { fields: liabilityFields, append: appendLiability, remove: removeLiability } = useFieldArray({ control, name: 'liabilities' })
+
+  const assets = watch('assets')
+  const liabilities = watch('liabilities')
+
+  // ─── Accordion state ────────────────────────────────────────────────────
+  const [expandedRowId, setExpandedRowId] = useState<string | null>(null)
+
+  const assetTotal = assets.reduce((sum, a) => sum + (a.currentValue ?? 0), 0)
+  const liabilityTotal = liabilities.reduce((sum, l) => sum + (l.currentBalance ?? 0), 0)
+
+  // ─── Add handlers (new rows start expanded) ────────────────────────────
+  const handleAddAsset = () => {
+    appendAsset(createEmptyAsset())
+    setExpandedRowId(`asset-${assetFields.length}`)
+  }
+
+  const handleAddLiability = () => {
+    appendLiability(createEmptyLiability())
+    setExpandedRowId(`liability-${liabilityFields.length}`)
+  }
+
+  const handleRemoveAsset = (index: number) => {
+    if (expandedRowId === `asset-${index}`) setExpandedRowId(null)
+    removeAsset(index)
+  }
+
+  const handleRemoveLiability = (index: number) => {
+    if (expandedRowId === `liability-${index}`) setExpandedRowId(null)
+    removeLiability(index)
+  }
+
+  const addButtonClass = cn(
+    'flex items-center gap-1.5 text-xs font-medium transition-colors mt-3',
+    isMonet ? 'text-[var(--monet-sage)]' : 'text-emerald-400 hover:text-emerald-300'
+  )
+
+  return (
+    <div className="space-y-5">
+      {/* ─── Assets ────────────────────────────────────────────────────────── */}
+      <div className={cn(
+        'rounded-2xl border p-4',
+        isMonet
+          ? 'border-[var(--monet-lavender)]/10 bg-[var(--monet-lavender)]/3'
+          : 'border-white/[0.06] bg-white/[0.02]'
+      )}>
+        <div className="flex items-center justify-between mb-1">
+          <h3 className={cn('text-sm font-semibold', isMonet ? 'text-[var(--monet-text-primary)]' : 'text-white')}>
+            Assets
+          </h3>
+          <span className={cn(
+            'text-lg font-semibold font-mono tabular-nums',
+            isMonet ? 'text-[var(--monet-sage)]' : 'text-emerald-400'
+          )}>
+            {formatCurrency(assetTotal)}
+          </span>
+        </div>
+        <p className={cn('text-xs mb-4', isMonet ? 'text-[var(--monet-text-muted)]' : 'text-slate-500')}>
+          What you own — savings, investments, property, etc.
+        </p>
+
+        <div className="space-y-1">
+          <AnimatePresence mode="popLayout">
+            {assetFields.map((field, index) => (
+              <motion.div key={field.id} {...rowAnimation}>
+                <AssetRow
+                  fieldIndex={index}
+                  isExpanded={expandedRowId === `asset-${index}`}
+                  onToggle={() =>
+                    setExpandedRowId(
+                      expandedRowId === `asset-${index}` ? null : `asset-${index}`
+                    )
+                  }
+                  onRemove={() => handleRemoveAsset(index)}
+                  isMonet={isMonet}
+                />
+              </motion.div>
+            ))}
+          </AnimatePresence>
+
+          {/* Empty state */}
+          {assetFields.length === 0 && (
+            <div className={cn(
+              'text-center py-4 rounded-xl border border-dashed',
+              isMonet ? 'border-[var(--monet-lavender)]/15 text-[var(--monet-text-muted)]' : 'border-white/[0.08] text-slate-600'
+            )}>
+              <p className="text-xs">No assets added yet. Add your savings or investments to track your net worth.</p>
+            </div>
+          )}
+        </div>
+
+        <button type="button" onClick={handleAddAsset} className={addButtonClass}>
+          <Plus className="w-3.5 h-3.5" />
+          Add asset
+        </button>
+      </div>
+
+      {/* ─── Liabilities ───────────────────────────────────────────────────── */}
+      <div className={cn(
+        'rounded-2xl border p-4',
+        isMonet
+          ? 'border-[var(--monet-lavender)]/10 bg-[var(--monet-lavender)]/3'
+          : 'border-white/[0.06] bg-white/[0.02]'
+      )}>
+        <div className="flex items-center justify-between mb-1">
+          <h3 className={cn('text-sm font-semibold', isMonet ? 'text-[var(--monet-text-primary)]' : 'text-white')}>
+            Liabilities
+          </h3>
+          <span className={cn(
+            'text-lg font-semibold font-mono tabular-nums',
+            isMonet ? 'text-rose-500' : 'text-rose-400'
+          )}>
+            ({formatCurrency(liabilityTotal)})
+          </span>
+        </div>
+        <p className={cn('text-xs mb-4', isMonet ? 'text-[var(--monet-text-muted)]' : 'text-slate-500')}>
+          What you owe — mortgages, loans, credit cards, etc.
+        </p>
+
+        <div className="space-y-1">
+          <AnimatePresence mode="popLayout">
+            {liabilityFields.map((field, index) => (
+              <motion.div key={field.id} {...rowAnimation}>
+                <LiabilityRow
+                  fieldIndex={index}
+                  isExpanded={expandedRowId === `liability-${index}`}
+                  onToggle={() =>
+                    setExpandedRowId(
+                      expandedRowId === `liability-${index}` ? null : `liability-${index}`
+                    )
+                  }
+                  onRemove={() => handleRemoveLiability(index)}
+                  isMonet={isMonet}
+                />
+              </motion.div>
+            ))}
+          </AnimatePresence>
+
+          {/* Empty state */}
+          {liabilityFields.length === 0 && (
+            <div className={cn(
+              'text-center py-4 rounded-xl border border-dashed',
+              isMonet ? 'border-[var(--monet-lavender)]/15 text-[var(--monet-text-muted)]' : 'border-white/[0.08] text-slate-600'
+            )}>
+              <p className="text-xs">No liabilities added yet. Track your debts for a complete financial picture.</p>
+            </div>
+          )}
+        </div>
+
+        <button type="button" onClick={handleAddLiability} className={addButtonClass}>
+          <Plus className="w-3.5 h-3.5" />
+          Add liability
+        </button>
+      </div>
+
+    </div>
+  )
+}
diff --git a/frontend/src/components/modals/OnboardingWizardModal/components/CpfAccountsStep.tsx b/frontend/src/components/modals/OnboardingWizardModal/components/CpfAccountsStep.tsx
new file mode 100644
index 000000000..09ea8f2f6
--- /dev/null
+++ b/frontend/src/components/modals/OnboardingWizardModal/components/CpfAccountsStep.tsx
@@ -0,0 +1,201 @@
+import { useEffect } from 'react'
+import { useFormContext } from 'react-hook-form'
+import { Info } from 'lucide-react'
+import { cn } from '@/lib/utils'
+import { generateUUID } from '@/lib/utils'
+import { CurrencyInput } from '@/components/ui/CurrencyInput'
+import type { OnboardingFormData } from '../types'
+
+interface CpfAccountsStepProps {
+  isMonet: boolean
+}
+
+export function CpfAccountsStep({ isMonet }: CpfAccountsStepProps) {
+  const { watch, setValue } = useFormContext<OnboardingFormData>()
+  const persons = watch('persons')
+  const cpfAccounts = watch('cpfAccounts')
+
+  // Filter to only citizen/PR persons
+  const eligiblePersons = persons.filter(
+    (p) => p.residencyStatus === 'citizen' || p.residencyStatus === 'pr'
+  )
+
+  // Auto-populate CPF entries for eligible persons on mount
+  useEffect(() => {
+    const existingPersonTempIds = new Set(cpfAccounts.map((c) => c.personTempId))
+    const newEntries = eligiblePersons
+      .filter((p) => !existingPersonTempIds.has(p.tempId))
+      .map((p) => ({
+        tempId: generateUUID(),
+        serverId: null,
+        personTempId: p.tempId,
+        oaBalance: 0,
+        saBalance: 0,
+        maBalance: 0,
+        raBalance: 0,
+      }))
+
+    if (newEntries.length > 0) {
+      setValue('cpfAccounts', [...cpfAccounts, ...newEntries])
+    }
+    // Only run on mount or when persons change
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [eligiblePersons.length])
+
+  const labelClass = cn(
+    'text-xs font-medium mb-1.5',
+    isMonet ? 'text-[var(--monet-text-secondary)]' : 'text-slate-400'
+  )
+
+  // ─── No eligible persons ──────────────────────────────────────────────────
+
+  if (eligiblePersons.length === 0) {
+    return (
+      <div className="flex flex-col items-center justify-center py-16 text-center">
+        <div className={cn(
+          'w-12 h-12 rounded-full flex items-center justify-center mb-4',
+          isMonet ? 'bg-[var(--monet-lavender)]/10' : 'bg-blue-500/10'
+        )}>
+          <Info className={cn('w-6 h-6', isMonet ? 'text-[var(--monet-sage)]' : 'text-blue-400')} />
+        </div>
+        <h3 className={cn(
+          'text-sm font-semibold mb-2',
+          isMonet ? 'text-[var(--monet-text-primary)]' : 'text-white'
+        )}>
+          Not Applicable
+        </h3>
+        <p className={cn(
+          'text-xs max-w-sm',
+          isMonet ? 'text-[var(--monet-text-muted)]' : 'text-slate-500'
+        )}>
+          CPF accounts are only applicable for Singapore Citizens and Permanent Residents.
+          None of your household members have Citizen or PR residency status.
+        </p>
+      </div>
+    )
+  }
+
+  // ─── CPF balance entry cards ──────────────────────────────────────────────
+
+  return (
+    <div className="space-y-5">
+      <div>
+        <h3 className={cn('text-sm font-semibold', isMonet ? 'text-[var(--monet-text-primary)]' : 'text-white')}>
+          CPF Account Balances
+        </h3>
+        <p className={cn('text-xs mt-0.5', isMonet ? 'text-[var(--monet-text-muted)]' : 'text-slate-500')}>
+          Enter your current CPF balances (check cpf.gov.sg)
+        </p>
+      </div>
+
+      {eligiblePersons.map((person) => {
+        const cpfIndex = cpfAccounts.findIndex((c) => c.personTempId === person.tempId)
+        if (cpfIndex === -1) return null
+
+        const statusLabel = person.residencyStatus === 'pr'
+          ? `PR${person.prGrantDate ? ` since ${new Date(person.prGrantDate).getFullYear()}` : ''}`
+          : 'Citizen'
+
+        return (
+          <div
+            key={person.tempId}
+            className={cn(
+              'rounded-xl border p-4',
+              isMonet
+                ? 'border-[var(--monet-lavender)]/15 bg-[var(--monet-lavender)]/[0.03]'
+                : 'border-white/[0.06] bg-white/[0.02]'
+            )}
+          >
+            {/* Person header */}
+            <div className="flex items-center gap-2 mb-4">
+              <div
+                className="w-2.5 h-2.5 rounded-full"
+                style={{ backgroundColor: person.displayColor }}
+              />
+              <span className={cn(
+                'text-sm font-medium',
+                isMonet ? 'text-[var(--monet-text-primary)]' : 'text-white'
+              )}>
+                {person.name || 'Unnamed'}
+              </span>
+              <span className={cn(
+                'text-xs',
+                isMonet ? 'text-[var(--monet-text-muted)]' : 'text-slate-500'
+              )}>
+                ({statusLabel})
+              </span>
+            </div>
+
+            {/* 2x2 grid of CPF accounts */}
+            <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
+              <div className={cn(
+                'rounded-lg border p-3',
+                isMonet
+                  ? 'border-[var(--monet-lavender)]/10 bg-white/50'
+                  : 'border-white/[0.04] bg-white/[0.02]'
+              )}>
+                <label className={labelClass}>Ordinary Account (OA)</label>
+                <CurrencyInput
+                  value={cpfAccounts[cpfIndex]?.oaBalance ?? 0}
+                  onChange={(val) => setValue(`cpfAccounts.${cpfIndex}.oaBalance`, val)}
+                  size="sm"
+                />
+              </div>
+
+              <div className={cn(
+                'rounded-lg border p-3',
+                isMonet
+                  ? 'border-[var(--monet-lavender)]/10 bg-white/50'
+                  : 'border-white/[0.04] bg-white/[0.02]'
+              )}>
+                <label className={labelClass}>Special Account (SA)</label>
+                <CurrencyInput
+                  value={cpfAccounts[cpfIndex]?.saBalance ?? 0}
+                  onChange={(val) => setValue(`cpfAccounts.${cpfIndex}.saBalance`, val)}
+                  size="sm"
+                />
+              </div>
+
+              <div className={cn(
+                'rounded-lg border p-3',
+                isMonet
+                  ? 'border-[var(--monet-lavender)]/10 bg-white/50'
+                  : 'border-white/[0.04] bg-white/[0.02]'
+              )}>
+                <label className={labelClass}>MediSave Account (MA)</label>
+                <CurrencyInput
+                  value={cpfAccounts[cpfIndex]?.maBalance ?? 0}
+                  onChange={(val) => setValue(`cpfAccounts.${cpfIndex}.maBalance`, val)}
+                  size="sm"
+                />
+              </div>
+
+              <div className={cn(
+                'rounded-lg border p-3',
+                isMonet
+                  ? 'border-[var(--monet-lavender)]/10 bg-white/50'
+                  : 'border-white/[0.04] bg-white/[0.02]'
+              )}>
+                <label className={labelClass}>Retirement Account (RA)</label>
+                <CurrencyInput
+                  value={cpfAccounts[cpfIndex]?.raBalance ?? 0}
+                  onChange={(val) => setValue(`cpfAccounts.${cpfIndex}.raBalance`, val)}
+                  size="sm"
+                />
+              </div>
+            </div>
+
+            {/* RA info note */}
+            <p className={cn(
+              'text-[10px] mt-3 flex items-center gap-1.5',
+              isMonet ? 'text-[var(--monet-text-muted)]' : 'text-slate-600'
+            )}>
+              <Info className="w-3 h-3 flex-shrink-0" />
+              RA is created at age 55. Leave as $0 if you&apos;re under 55.
+            </p>
+          </div>
+        )
+      })}
+    </div>
+  )
+}
diff --git a/frontend/src/components/modals/OnboardingWizardModal/components/DefaultAssumptions.tsx b/frontend/src/components/modals/OnboardingWizardModal/components/DefaultAssumptions.tsx
new file mode 100644
index 000000000..108aa2750
--- /dev/null
+++ b/frontend/src/components/modals/OnboardingWizardModal/components/DefaultAssumptions.tsx
@@ -0,0 +1,91 @@
+import { Settings } from 'lucide-react'
+import { cn } from '@/lib/utils'
+import { CurrencyInput } from '@/components/ui/CurrencyInput'
+import { CustomDropdown } from '@/components/modals/ScenarioEventModal/components/CustomDropdown'
+import { FREQUENCY_LABELS } from '../types'
+
+const FREQUENCY_OPTIONS = Object.entries(FREQUENCY_LABELS).map(([value, label]) => ({ value, label }))
+
+interface DefaultAssumptionsProps {
+  incomeGrowthDefault: number
+  setIncomeGrowthDefault: (v: number) => void
+  expenseGrowthDefault: number
+  setExpenseGrowthDefault: (v: number) => void
+  frequencyDefault: string
+  setFrequencyDefault: (v: string) => void
+  isMonet: boolean
+}
+
+export function DefaultAssumptions({
+  incomeGrowthDefault,
+  setIncomeGrowthDefault,
+  expenseGrowthDefault,
+  setExpenseGrowthDefault,
+  frequencyDefault,
+  setFrequencyDefault,
+  isMonet,
+}: DefaultAssumptionsProps) {
+  return (
+    <div
+      className={cn(
+        'flex flex-wrap items-center gap-x-4 gap-y-2 rounded-xl border px-4 py-2.5',
+        isMonet
+          ? 'border-[var(--monet-lavender)]/10 bg-[var(--monet-lavender)]/3'
+          : 'border-white/[0.06] bg-white/[0.02]'
+      )}
+    >
+      <div className="flex items-center gap-1.5">
+        <Settings className={cn('w-3.5 h-3.5', isMonet ? 'text-[var(--monet-text-muted)]' : 'text-slate-500')} />
+        <span className={cn('text-xs font-medium', isMonet ? 'text-[var(--monet-text-muted)]' : 'text-slate-500')}>
+          Defaults
+        </span>
+      </div>
+
+      {/* Income growth */}
+      <div className="flex items-center gap-1.5">
+        <span className={cn('text-xs', isMonet ? 'text-[var(--monet-text-muted)]' : 'text-slate-500')}>
+          Income growth:
+        </span>
+        <div className="w-16">
+          <CurrencyInput
+            value={incomeGrowthDefault}
+            onChange={setIncomeGrowthDefault}
+            isPercentage
+            size="sm"
+          />
+        </div>
+      </div>
+
+      {/* Expense inflation */}
+      <div className="flex items-center gap-1.5">
+        <span className={cn('text-xs', isMonet ? 'text-[var(--monet-text-muted)]' : 'text-slate-500')}>
+          Expense inflation:
+        </span>
+        <div className="w-16">
+          <CurrencyInput
+            value={expenseGrowthDefault}
+            onChange={setExpenseGrowthDefault}
+            isPercentage
+            size="sm"
+          />
+        </div>
+      </div>
+
+      {/* Frequency */}
+      <div className="flex items-center gap-1.5">
+        <span className={cn('text-xs', isMonet ? 'text-[var(--monet-text-muted)]' : 'text-slate-500')}>
+          Frequency:
+        </span>
+        <div className="w-28">
+          <CustomDropdown
+            value={frequencyDefault}
+            onChange={setFrequencyDefault}
+            options={FREQUENCY_OPTIONS}
+            variant={isMonet ? 'monet' : 'dark'}
+            minWidth="100%"
+          />
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/frontend/src/components/modals/OnboardingWizardModal/components/ExpenseRow.tsx b/frontend/src/components/modals/OnboardingWizardModal/components/ExpenseRow.tsx
new file mode 100644
index 000000000..043d55a5f
--- /dev/null
+++ b/frontend/src/components/modals/OnboardingWizardModal/components/ExpenseRow.tsx
@@ -0,0 +1,229 @@
+import { useFormContext } from 'react-hook-form'
+import { Trash2 } from 'lucide-react'
+import { motion } from 'framer-motion'
+import { cn } from '@/lib/utils'
+import { CurrencyInput } from '@/components/ui/CurrencyInput'
+import { CustomDropdown } from '@/components/modals/ScenarioEventModal/components/CustomDropdown'
+import type { OnboardingFormData } from '../types'
+import {
+  EXPENSE_CATEGORY_LABELS,
+  FREQUENCY_LABELS,
+} from '../types'
+import { EXPENSE_CATEGORY_ICONS } from './incomeExpensesConstants'
+import { formatCollapsedLabel, formatCollapsedAmount } from './collapsedSummaryUtils'
+
+const EXPENSE_CATEGORY_OPTIONS = Object.entries(EXPENSE_CATEGORY_LABELS).map(([value, label]) => ({
+  value,
+  label: `${EXPENSE_CATEGORY_ICONS[value] ?? ''} ${label}`,
+}))
+
+const FREQUENCY_OPTIONS = Object.entries(FREQUENCY_LABELS).map(([value, label]) => ({ value, label }))
+
+interface ExpenseRowProps {
+  fieldIndex: number
+  isExpanded: boolean
+  onToggle: () => void
+  onRemove: () => void
+  isMonet: boolean
+  defaults: { growthRate: number; frequency: string }
+}
+
+export function ExpenseRow({
+  fieldIndex,
+  isExpanded,
+  onToggle,
+  onRemove,
+  isMonet,
+  defaults,
+}: ExpenseRowProps) {
+  const { watch, setValue, register, formState: { errors } } = useFormContext<OnboardingFormData>()
+  const expense = watch(`expenses.${fieldIndex}`)
+  const fieldErrors = errors.expenses?.[fieldIndex]
+
+  if (!expense) return null
+
+  const categoryIcon = EXPENSE_CATEGORY_ICONS[expense.category] ?? '📦'
+  const categoryLabel = EXPENSE_CATEGORY_LABELS[expense.category] ?? expense.category
+
+  const getInputClass = (hasError?: boolean) => cn(
+    'w-full py-2 px-3 rounded-lg text-sm transition-colors focus:outline-none',
+    hasError
+      ? 'border border-rose-500/40 bg-rose-500/5 text-white placeholder:text-slate-600 focus:border-rose-500/60'
+      : isMonet
+        ? 'bg-[var(--monet-lavender)]/5 border border-[var(--monet-lavender)]/15 text-[var(--monet-text-primary)] placeholder:text-[var(--monet-text-muted)] focus:border-[var(--monet-sage)]/40'
+        : 'bg-white/[0.03] border border-white/[0.06] text-white placeholder:text-slate-600 focus:border-blue-500/30 focus:bg-blue-500/[0.06]'
+  )
+
+  const matchesDefault = (field: 'growthRate' | 'frequency') => {
+    if (field === 'growthRate') return expense.growthRate === defaults.growthRate
+    return expense.frequency === defaults.frequency
+  }
+
+  // ─── Collapsed row ────────────────────────────────────────────────────────
+  const hasAnyError = !!fieldErrors
+
+  if (!isExpanded) {
+    return (
+      <div
+        onClick={onToggle}
+        className={cn(
+          'group flex items-center gap-3 px-3 py-2.5 rounded-xl cursor-pointer transition-all',
+          hasAnyError
+            ? 'border border-rose-500/30 bg-rose-500/5 hover:border-rose-500/40'
+            : isMonet
+              ? 'hover:bg-[var(--monet-lavender)]/5 border border-transparent hover:border-[var(--monet-lavender)]/10'
+              : 'hover:bg-white/[0.02] border border-transparent hover:border-white/[0.06]'
+        )}
+      >
+        <span className="text-base flex-shrink-0">{categoryIcon}</span>
+        <span className={cn(
+          'flex-1 text-sm truncate',
+          isMonet ? 'text-[var(--monet-text-primary)]' : 'text-slate-200'
+        )}>
+          {formatCollapsedLabel(expense.name, categoryLabel)}
+        </span>
+        <span className={cn(
+          'flex-shrink-0 text-sm font-mono tabular-nums',
+          isMonet ? 'text-rose-500' : 'text-rose-400'
+        )}>
+          {formatCollapsedAmount(expense.amount, expense.frequency)}
+        </span>
+        <button
+          type="button"
+          onClick={(e) => { e.stopPropagation(); onRemove() }}
+          className={cn(
+            'flex-shrink-0 p-1 rounded-lg transition-all opacity-0 group-hover:opacity-100',
+            isMonet
+              ? 'text-[var(--monet-text-muted)] hover:text-rose-500 hover:bg-rose-50'
+              : 'text-slate-600 hover:text-rose-400 hover:bg-rose-500/10'
+          )}
+        >
+          <Trash2 className="w-3.5 h-3.5" />
+        </button>
+      </div>
+    )
+  }
+
+  // ─── Expanded row ─────────────────────────────────────────────────────────
+  return (
+    <motion.div
+      initial={{ height: 0, opacity: 0 }}
+      animate={{ height: 'auto', opacity: 1 }}
+      exit={{ height: 0, opacity: 0 }}
+      transition={{ duration: 0.2, ease: 'easeInOut' }}
+      className="overflow-hidden"
+    >
+      <div
+        className={cn(
+          'rounded-xl border p-4 space-y-3',
+          isMonet
+            ? 'border-[var(--monet-sage)]/20 bg-[var(--monet-lavender)]/5'
+            : 'border-white/[0.08] bg-white/[0.02]'
+        )}
+      >
+        {/* Row 1: Name + Amount */}
+        <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
+          <div>
+            <label className={cn('text-[10px] font-medium uppercase tracking-wider mb-1 block', isMonet ? 'text-[var(--monet-text-muted)]' : 'text-slate-600')}>
+              Name
+            </label>
+            <input
+              {...register(`expenses.${fieldIndex}.name`)}
+              placeholder="e.g. Monthly Rent"
+              className={getInputClass(!!fieldErrors?.name)}
+              autoFocus
+            />
+          </div>
+          <div>
+            <label className={cn('text-[10px] font-medium uppercase tracking-wider mb-1 block', isMonet ? 'text-[var(--monet-text-muted)]' : 'text-slate-600')}>
+              Amount
+            </label>
+            <CurrencyInput
+              value={expense.amount}
+              onChange={(val) => setValue(`expenses.${fieldIndex}.amount`, val)}
+              size="sm"
+            />
+          </div>
+        </div>
+
+        {/* Row 2: Frequency + Category */}
+        <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
+          <div>
+            <label className={cn(
+              'text-[10px] font-medium uppercase tracking-wider mb-1 block',
+              isMonet ? 'text-[var(--monet-text-muted)]' : 'text-slate-600'
+            )}>
+              Frequency
+              {matchesDefault('frequency') && (
+                <span className={cn('ml-1.5 normal-case tracking-normal', isMonet ? 'text-[var(--monet-text-muted)]/60' : 'text-slate-700')}>(default)</span>
+              )}
+            </label>
+            <CustomDropdown
+              value={expense.frequency}
+              onChange={(val) => setValue(`expenses.${fieldIndex}.frequency`, val as any)}
+              options={FREQUENCY_OPTIONS}
+              variant={isMonet ? 'monet' : 'dark'}
+              minWidth="100%"
+            />
+          </div>
+          <div>
+            <label className={cn('text-[10px] font-medium uppercase tracking-wider mb-1 block', isMonet ? 'text-[var(--monet-text-muted)]' : 'text-slate-600')}>
+              Category
+            </label>
+            <CustomDropdown
+              value={expense.category}
+              onChange={(val) => setValue(`expenses.${fieldIndex}.category`, val as any)}
+              options={EXPENSE_CATEGORY_OPTIONS}
+              variant={isMonet ? 'monet' : 'dark'}
+              minWidth="100%"
+            />
+          </div>
+        </div>
+
+        {/* Row 3: Growth Rate */}
+        <div className="max-w-[200px]">
+          <label className={cn(
+            'text-[10px] font-medium uppercase tracking-wider mb-1 block',
+            isMonet ? 'text-[var(--monet-text-muted)]' : 'text-slate-600'
+          )}>
+            Annual Inflation
+            {matchesDefault('growthRate') && (
+              <span className={cn('ml-1.5 normal-case tracking-normal', isMonet ? 'text-[var(--monet-text-muted)]/60' : 'text-slate-700')}>(default)</span>
+            )}
+          </label>
+          <CurrencyInput
+            value={expense.growthRate}
+            onChange={(val) => setValue(`expenses.${fieldIndex}.growthRate`, val)}
+            isPercentage
+            size="sm"
+          />
+        </div>
+
+        {/* Collapse / Delete actions */}
+        <div className="flex items-center justify-between pt-1">
+          <button
+            type="button"
+            onClick={onToggle}
+            className={cn(
+              'text-xs transition-colors',
+              isMonet ? 'text-[var(--monet-text-muted)] hover:text-[var(--monet-text-secondary)]' : 'text-slate-500 hover:text-slate-300'
+            )}
+          >
+            Done
+          </button>
+          <button
+            type="button"
+            onClick={onRemove}
+            className={cn(
+              'flex items-center gap-1 text-xs transition-colors',
+              isMonet ? 'text-rose-400 hover:text-rose-500' : 'text-rose-400/60 hover:text-rose-400'
+            )}
+          >
+            <Trash2 className="w-3 h-3" />
+            Remove
+          </button>
+        </div>
+      </div>
+    </motion.div>
+  )
+}
diff --git a/frontend/src/components/modals/OnboardingWizardModal/components/IncomeExpensesStep.tsx b/frontend/src/components/modals/OnboardingWizardModal/components/IncomeExpensesStep.tsx
new file mode 100644
index 000000000..aea2910fb
--- /dev/null
+++ b/frontend/src/components/modals/OnboardingWizardModal/components/IncomeExpensesStep.tsx
@@ -0,0 +1,270 @@
+import { useState } from 'react'
+import { useFormContext, useFieldArray } from 'react-hook-form'
+import { Plus } from 'lucide-react'
+import { AnimatePresence, motion } from 'framer-motion'
+import { cn } from '@/lib/utils'
+import { formatCurrency } from '@/lib/format'
+import { createDefaultIncome, createDefaultExpense } from '../hooks/useOnboardingForm'
+import type { OnboardingFormData } from '../types'
+import { RELATIONSHIP_LABELS } from '../types'
+import { IncomeRow } from './IncomeRow'
+import { ExpenseRow } from './ExpenseRow'
+
+interface IncomeExpensesStepProps {
+  isMonet: boolean
+}
+
+const ROLE_COLORS: Record<string, string> = {
+  self: '#10b981',
+  spouse: '#3b82f6',
+  child: '#8b5cf6',
+  parent: '#f59e0b',
+  sibling: '#06b6d4',
+  other: '#ec4899',
+}
+
+const rowAnimation = {
+  initial: { opacity: 0, y: -8 },
+  animate: { opacity: 1, y: 0 },
+  exit: { opacity: 0, y: 8, transition: { duration: 0.15 } },
+  transition: { duration: 0.2 },
+}
+
+export function IncomeExpensesStep({ isMonet }: IncomeExpensesStepProps) {
+  const { watch, control } = useFormContext<OnboardingFormData>()
+  const { fields: incomeFields, append: appendIncome, remove: removeIncome } = useFieldArray({ control, name: 'incomes' })
+  const { fields: expenseFields, append: appendExpense, remove: removeExpense } = useFieldArray({ control, name: 'expenses' })
+
+  const persons = watch('persons')
+  const incomes = watch('incomes')
+  const expenses = watch('expenses')
+
+  // ─── Accordion state ────────────────────────────────────────────────────
+  const [expandedRowId, setExpandedRowId] = useState<string | null>(null)
+
+  // ─── Default assumptions for new rows ──────────────────────────────────
+  const incomeGrowthDefault = 3
+  const expenseGrowthDefault = 2
+  const frequencyDefault = 'monthly'
+
+  // ─── Monthly equivalent helper ──────────────────────────────────────────
+  const toMonthly = (amount: number, frequency: string) =>
+    frequency === 'annual' ? amount / 12
+    : frequency === 'quarterly' ? amount / 3
+    : frequency === 'weekly' ? amount * 4.33
+    : frequency === 'biweekly' ? amount * 2.17
+    : amount
+
+  const incomeTotal = incomes.reduce((sum, inc) => sum + toMonthly(inc.amount, inc.frequency), 0)
+  const expenseTotal = expenses.reduce((sum, exp) => sum + toMonthly(exp.amount, exp.frequency), 0)
+
+  // ─── Group incomes by person ────────────────────────────────────────────
+  const incomesByPerson = persons.map((person) => {
+    const indices: number[] = []
+    incomeFields.forEach((_field, index) => {
+      if (incomes[index]?.personTempId === person.tempId) {
+        indices.push(index)
+      }
+    })
+    return { person, indices }
+  })
+
+  const isPersonEligibleForCpf = (personTempId: string): boolean => {
+    const person = persons.find(p => p.tempId === personTempId)
+    return person?.residencyStatus === 'citizen' || person?.residencyStatus === 'pr'
+  }
+
+  // ─── Add handlers (new rows start expanded) ────────────────────────────
+  const handleAddIncome = (personTempId: string) => {
+    const newIncome = createDefaultIncome(personTempId, {
+      growthRate: incomeGrowthDefault,
+      frequency: frequencyDefault as any,
+    })
+    appendIncome(newIncome)
+    // New row at end of incomes array → will be the last index
+    setExpandedRowId(`income-${incomeFields.length}`)
+  }
+
+  const handleAddExpense = () => {
+    const newExpense = createDefaultExpense({
+      growthRate: expenseGrowthDefault,
+      frequency: frequencyDefault as any,
+    })
+    appendExpense(newExpense)
+    setExpandedRowId(`expense-${expenseFields.length}`)
+  }
+
+  const handleRemoveIncome = (index: number) => {
+    if (expandedRowId === `income-${index}`) setExpandedRowId(null)
+    removeIncome(index)
+  }
+
+  const handleRemoveExpense = (index: number) => {
+    if (expandedRowId === `expense-${index}`) setExpandedRowId(null)
+    removeExpense(index)
+  }
+
+  const addButtonClass = cn(
+    'flex items-center gap-1.5 text-xs font-medium transition-colors mt-3',
+    isMonet ? 'text-[var(--monet-sage)]' : 'text-emerald-400 hover:text-emerald-300'
+  )
+
+  return (
+    <div className="space-y-5">
+      {/* ─── Income Sources ────────────────────────────────────────────────── */}
+      <div className={cn(
+        'rounded-2xl border p-4',
+        isMonet
+          ? 'border-[var(--monet-lavender)]/10 bg-[var(--monet-lavender)]/3'
+          : 'border-white/[0.06] bg-white/[0.02]'
+      )}>
+        <div className="flex items-center justify-between mb-1">
+          <h3 className={cn('text-sm font-semibold', isMonet ? 'text-[var(--monet-text-primary)]' : 'text-white')}>
+            Income Sources
+          </h3>
+          <span className={cn(
+            'text-lg font-semibold font-mono tabular-nums',
+            isMonet ? 'text-[var(--monet-sage)]' : 'text-emerald-400'
+          )}>
+            {formatCurrency(incomeTotal)}/mo
+          </span>
+        </div>
+        <p className={cn('text-xs mb-4', isMonet ? 'text-[var(--monet-text-muted)]' : 'text-slate-500')}>
+          Salaries, bonuses, rental income, etc.
+        </p>
+
+        <div className="space-y-4">
+          {incomesByPerson.map(({ person, indices }) => {
+            const roleColor = ROLE_COLORS[person.relationship] ?? ROLE_COLORS.other
+            const personName = person.name || 'Unnamed'
+            const personLabel = person.relationship === 'self'
+              ? personName
+              : `${personName} (${RELATIONSHIP_LABELS[person.relationship] || 'Member'})`
+            const cpfEligible = isPersonEligibleForCpf(person.tempId)
+
+            return (
+              <div key={person.tempId}>
+                {/* Person header */}
+                <div className="flex items-center gap-2 mb-2">
+                  <div className="w-2 h-2 rounded-full" style={{ backgroundColor: roleColor }} />
+                  <span className={cn(
+                    'text-xs font-semibold uppercase tracking-wider',
+                    isMonet ? 'text-[var(--monet-text-secondary)]' : 'text-slate-400'
+                  )}>
+                    {personLabel}
+                  </span>
+                </div>
+
+                {/* Income rows */}
+                <div className="space-y-1">
+                  <AnimatePresence mode="popLayout">
+                    {indices.map((fieldIndex) => (
+                      <motion.div key={incomeFields[fieldIndex].id} {...rowAnimation}>
+                        <IncomeRow
+                          fieldIndex={fieldIndex}
+                          isExpanded={expandedRowId === `income-${fieldIndex}`}
+                          onToggle={() =>
+                            setExpandedRowId(
+                              expandedRowId === `income-${fieldIndex}` ? null : `income-${fieldIndex}`
+                            )
+                          }
+                          onRemove={() => handleRemoveIncome(fieldIndex)}
+                          cpfEligible={cpfEligible}
+                          isMonet={isMonet}
+                          defaults={{ growthRate: incomeGrowthDefault, frequency: frequencyDefault }}
+                        />
+                      </motion.div>
+                    ))}
+                  </AnimatePresence>
+
+                  {/* Empty state */}
+                  {indices.length === 0 && (
+                    <div className={cn(
+                      'text-center py-4 rounded-xl border border-dashed',
+                      isMonet ? 'border-[var(--monet-lavender)]/15 text-[var(--monet-text-muted)]' : 'border-white/[0.08] text-slate-600'
+                    )}>
+                      <p className="text-xs">No income sources yet. Add your salary or other income to get started.</p>
+                    </div>
+                  )}
+                </div>
+
+                {/* Add button per person */}
+                <button
+                  type="button"
+                  onClick={() => handleAddIncome(person.tempId)}
+                  className={addButtonClass}
+                >
+                  <Plus className="w-3.5 h-3.5" />
+                  Add income for {personName}
+                </button>
+              </div>
+            )
+          })}
+        </div>
+      </div>
+
+      {/* ─── Recurring Expenses ────────────────────────────────────────────── */}
+      <div className={cn(
+        'rounded-2xl border p-4',
+        isMonet
+          ? 'border-[var(--monet-lavender)]/10 bg-[var(--monet-lavender)]/3'
+          : 'border-white/[0.06] bg-white/[0.02]'
+      )}>
+        <div className="flex items-center justify-between mb-1">
+          <h3 className={cn('text-sm font-semibold', isMonet ? 'text-[var(--monet-text-primary)]' : 'text-white')}>
+            Recurring Expenses
+          </h3>
+          <span className={cn(
+            'text-lg font-semibold font-mono tabular-nums',
+            isMonet ? 'text-rose-500' : 'text-rose-400'
+          )}>
+            {formatCurrency(expenseTotal)}/mo
+          </span>
+        </div>
+        <p className={cn('text-xs mb-4', isMonet ? 'text-[var(--monet-text-muted)]' : 'text-slate-500')}>
+          Housing, transport, food, utilities, etc.
+        </p>
+
+        <div className="space-y-1">
+          <AnimatePresence mode="popLayout">
+            {expenseFields.map((field, index) => (
+              <motion.div key={field.id} {...rowAnimation}>
+                <ExpenseRow
+                  fieldIndex={index}
+                  isExpanded={expandedRowId === `expense-${index}`}
+                  onToggle={() =>
+                    setExpandedRowId(
+                      expandedRowId === `expense-${index}` ? null : `expense-${index}`
+                    )
+                  }
+                  onRemove={() => handleRemoveExpense(index)}
+                  isMonet={isMonet}
+                  defaults={{ growthRate: expenseGrowthDefault, frequency: frequencyDefault }}
+                />
+              </motion.div>
+            ))}
+          </AnimatePresence>
+
+          {/* Empty state */}
+          {expenseFields.length === 0 && (
+            <div className={cn(
+              'text-center py-4 rounded-xl border border-dashed',
+              isMonet ? 'border-[var(--monet-lavender)]/15 text-[var(--monet-text-muted)]' : 'border-white/[0.08] text-slate-600'
+            )}>
+              <p className="text-xs">No expenses added yet. Tracking spending helps build an accurate plan.</p>
+            </div>
+          )}
+        </div>
+
+        <button
+          type="button"
+          onClick={handleAddExpense}
+          className={addButtonClass}
+        >
+          <Plus className="w-3.5 h-3.5" />
+          Add expense
+        </button>
+      </div>
+    </div>
+  )
+}
diff --git a/frontend/src/components/modals/OnboardingWizardModal/components/IncomeRow.tsx b/frontend/src/components/modals/OnboardingWizardModal/components/IncomeRow.tsx
new file mode 100644
index 000000000..59dab8547
--- /dev/null
+++ b/frontend/src/components/modals/OnboardingWizardModal/components/IncomeRow.tsx
@@ -0,0 +1,350 @@
+import { useFormContext } from 'react-hook-form'
+import { Trash2, Info } from 'lucide-react'
+import { AnimatePresence, motion } from 'framer-motion'
+import { cn } from '@/lib/utils'
+import { CurrencyInput } from '@/components/ui/CurrencyInput'
+import { CustomDropdown } from '@/components/modals/ScenarioEventModal/components/CustomDropdown'
+import type { OnboardingFormData } from '../types'
+import {
+  INCOME_CATEGORY_LABELS,
+  FREQUENCY_LABELS,
+} from '../types'
+import { INCOME_CATEGORY_ICONS, CPF_DEFAULT_CATEGORIES } from './incomeExpensesConstants'
+import { formatCollapsedLabel, formatCollapsedAmount } from './collapsedSummaryUtils'
+
+const INCOME_CATEGORY_OPTIONS = Object.entries(INCOME_CATEGORY_LABELS).map(([value, label]) => ({
+  value,
+  label: `${INCOME_CATEGORY_ICONS[value] ?? ''} ${label}`,
+}))
+
+const FREQUENCY_OPTIONS = Object.entries(FREQUENCY_LABELS).map(([value, label]) => ({ value, label }))
+
+const CPF_WAGE_OPTIONS = [
+  { value: 'ow', label: 'Ordinary Wages (OW)' },
+  { value: 'aw', label: 'Additional Wages (AW)' },
+]
+
+interface IncomeRowProps {
+  fieldIndex: number
+  isExpanded: boolean
+  onToggle: () => void
+  onRemove: () => void
+  cpfEligible: boolean
+  isMonet: boolean
+  defaults: { growthRate: number; frequency: string }
+}
+
+export function IncomeRow({
+  fieldIndex,
+  isExpanded,
+  onToggle,
+  onRemove,
+  cpfEligible,
+  isMonet,
+  defaults,
+}: IncomeRowProps) {
+  const { watch, setValue, register, formState: { errors } } = useFormContext<OnboardingFormData>()
+  const income = watch(`incomes.${fieldIndex}`)
+  const fieldErrors = errors.incomes?.[fieldIndex]
+
+  if (!income) return null
+
+  const cpfApplies = income.cpfWageType !== null
+  const categoryIcon = INCOME_CATEGORY_ICONS[income.category] ?? '📋'
+  const categoryLabel = INCOME_CATEGORY_LABELS[income.category] ?? income.category
+
+  const handleCpfToggle = (applies: boolean) => {
+    if (applies) {
+      const defaultType = CPF_DEFAULT_CATEGORIES.has(income.category) ? 'ow' : 'ow'
+      setValue(`incomes.${fieldIndex}.cpfWageType`, defaultType)
+    } else {
+      setValue(`incomes.${fieldIndex}.cpfWageType`, null)
+    }
+  }
+
+  const handleCategoryChange = (newCategory: string) => {
+    setValue(`incomes.${fieldIndex}.category`, newCategory as any)
+    // Auto-toggle CPF based on new category
+    if (cpfEligible) {
+      if (CPF_DEFAULT_CATEGORIES.has(newCategory)) {
+        setValue(`incomes.${fieldIndex}.cpfWageType`, 'ow')
+      } else {
+        setValue(`incomes.${fieldIndex}.cpfWageType`, null)
+      }
+    }
+  }
+
+  const getInputClass = (hasError?: boolean) => cn(
+    'w-full py-2 px-3 rounded-lg text-sm transition-colors focus:outline-none',
+    hasError
+      ? 'border border-rose-500/40 bg-rose-500/5 text-white placeholder:text-slate-600 focus:border-rose-500/60'
+      : isMonet
+        ? 'bg-[var(--monet-lavender)]/5 border border-[var(--monet-lavender)]/15 text-[var(--monet-text-primary)] placeholder:text-[var(--monet-text-muted)] focus:border-[var(--monet-sage)]/40'
+        : 'bg-white/[0.03] border border-white/[0.06] text-white placeholder:text-slate-600 focus:border-blue-500/30 focus:bg-blue-500/[0.06]'
+  )
+
+  const matchesDefault = (field: 'growthRate' | 'frequency') => {
+    if (field === 'growthRate') return income.growthRate === defaults.growthRate
+    return income.frequency === defaults.frequency
+  }
+
+  const hasAnyError = !!fieldErrors
+
+  // ─── Collapsed row ────────────────────────────────────────────────────────
+  if (!isExpanded) {
+    return (
+      <div
+        onClick={onToggle}
+        className={cn(
+          'group flex items-center gap-3 px-3 py-2.5 rounded-xl cursor-pointer transition-all',
+          hasAnyError
+            ? 'border border-rose-500/30 bg-rose-500/5 hover:border-rose-500/40'
+            : isMonet
+              ? 'hover:bg-[var(--monet-lavender)]/5 border border-transparent hover:border-[var(--monet-lavender)]/10'
+              : 'hover:bg-white/[0.02] border border-transparent hover:border-white/[0.06]'
+        )}
+      >
+        <span className="text-base flex-shrink-0">{categoryIcon}</span>
+        <span className={cn(
+          'flex-1 text-sm truncate',
+          isMonet ? 'text-[var(--monet-text-primary)]' : 'text-slate-200'
+        )}>
+          {formatCollapsedLabel(income.name, categoryLabel)}
+        </span>
+        <span className={cn(
+          'flex-shrink-0 text-sm font-mono tabular-nums',
+          isMonet ? 'text-[var(--monet-sage)]' : 'text-emerald-400'
+        )}>
+          {formatCollapsedAmount(income.amount, income.frequency)}
+        </span>
+        <button
+          type="button"
+          onClick={(e) => { e.stopPropagation(); onRemove() }}
+          className={cn(
+            'flex-shrink-0 p-1 rounded-lg transition-all opacity-0 group-hover:opacity-100',
+            isMonet
+              ? 'text-[var(--monet-text-muted)] hover:text-rose-500 hover:bg-rose-50'
+              : 'text-slate-600 hover:text-rose-400 hover:bg-rose-500/10'
+          )}
+        >
+          <Trash2 className="w-3.5 h-3.5" />
+        </button>
+      </div>
+    )
+  }
+
+  // ─── Expanded row ─────────────────────────────────────────────────────────
+  return (
+    <motion.div
+      initial={{ height: 0, opacity: 0 }}
+      animate={{ height: 'auto', opacity: 1 }}
+      exit={{ height: 0, opacity: 0 }}
+      transition={{ duration: 0.2, ease: 'easeInOut' }}
+      className="overflow-hidden"
+    >
+      <div
+        className={cn(
+          'rounded-xl border p-4 space-y-3',
+          isMonet
+            ? 'border-[var(--monet-sage)]/20 bg-[var(--monet-lavender)]/5'
+            : 'border-white/[0.08] bg-white/[0.02]'
+        )}
+      >
+        {/* Row 1: Name + Amount */}
+        <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
+          <div>
+            <label className={cn('text-[10px] font-medium uppercase tracking-wider mb-1 block', isMonet ? 'text-[var(--monet-text-muted)]' : 'text-slate-600')}>
+              Name
+            </label>
+            <input
+              {...register(`incomes.${fieldIndex}.name`)}
+              placeholder="e.g. Monthly Salary"
+              className={getInputClass(!!fieldErrors?.name)}
+              autoFocus
+            />
+          </div>
+          <div>
+            <label className={cn('text-[10px] font-medium uppercase tracking-wider mb-1 block', isMonet ? 'text-[var(--monet-text-muted)]' : 'text-slate-600')}>
+              Amount
+            </label>
+            <CurrencyInput
+              value={income.amount}
+              onChange={(val) => setValue(`incomes.${fieldIndex}.amount`, val)}
+              size="sm"
+            />
+          </div>
+        </div>
+
+        {/* Row 2: Frequency + Category */}
+        <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
+          <div>
+            <label className={cn(
+              'text-[10px] font-medium uppercase tracking-wider mb-1 block',
+              isMonet ? 'text-[var(--monet-text-muted)]' : 'text-slate-600'
+            )}>
+              Frequency
+              {matchesDefault('frequency') && (
+                <span className={cn('ml-1.5 normal-case tracking-normal', isMonet ? 'text-[var(--monet-text-muted)]/60' : 'text-slate-700')}>(default)</span>
+              )}
+            </label>
+            <CustomDropdown
+              value={income.frequency}
+              onChange={(val) => setValue(`incomes.${fieldIndex}.frequency`, val as any)}
+              options={FREQUENCY_OPTIONS}
+              variant={isMonet ? 'monet' : 'dark'}
+              minWidth="100%"
+            />
+          </div>
+          <div>
+            <label className={cn('text-[10px] font-medium uppercase tracking-wider mb-1 block', isMonet ? 'text-[var(--monet-text-muted)]' : 'text-slate-600')}>
+              Category
+            </label>
+            <CustomDropdown
+              value={income.category}
+              onChange={handleCategoryChange}
+              options={INCOME_CATEGORY_OPTIONS}
+              variant={isMonet ? 'monet' : 'dark'}
+              minWidth="100%"
+            />
+          </div>
+        </div>
+
+        {/* Row 3: CPF Section (only for eligible persons) */}
+        {cpfEligible && (
+          <div className="space-y-2">
+            <label className={cn('text-[10px] font-medium uppercase tracking-wider block', isMonet ? 'text-[var(--monet-text-muted)]' : 'text-slate-600')}>
+              CPF Contribution
+            </label>
+            <div className="flex items-center gap-3 flex-wrap">
+              {/* Toggle: CPF applies? */}
+              <div className={cn(
+                'inline-flex rounded-lg p-0.5 border',
+                isMonet
+                  ? 'bg-[var(--monet-lavender)]/5 border-[var(--monet-lavender)]/15'
+                  : 'bg-white/[0.03] border-white/[0.08]'
+              )}>
+                <button
+                  type="button"
+                  onClick={() => handleCpfToggle(true)}
+                  className={cn(
+                    'px-3 py-1.5 rounded-md text-xs font-medium transition-all duration-150',
+                    cpfApplies
+                      ? isMonet
+                        ? 'bg-[var(--monet-sage)]/15 text-[var(--monet-sage)] shadow-sm'
+                        : 'bg-emerald-500/15 text-emerald-400 shadow-sm'
+                      : isMonet
+                        ? 'text-[var(--monet-text-muted)]'
+                        : 'text-slate-500 hover:text-slate-300'
+                  )}
+                >
+                  Yes
+                </button>
+                <button
+                  type="button"
+                  onClick={() => handleCpfToggle(false)}
+                  className={cn(
+                    'px-3 py-1.5 rounded-md text-xs font-medium transition-all duration-150',
+                    !cpfApplies
+                      ? isMonet
+                        ? 'bg-[var(--monet-lavender)]/15 text-[var(--monet-text-primary)] shadow-sm'
+                        : 'bg-white/[0.1] text-white shadow-sm'
+                      : isMonet
+                        ? 'text-[var(--monet-text-muted)]'
+                        : 'text-slate-500 hover:text-slate-300'
+                  )}
+                >
+                  No
+                </button>
+              </div>
+
+              {/* Wage Type dropdown (inline, right of toggle) */}
+              <AnimatePresence>
+                {cpfApplies && (
+                  <motion.div
+                    initial={{ width: 0, opacity: 0 }}
+                    animate={{ width: 'auto', opacity: 1 }}
+                    exit={{ width: 0, opacity: 0 }}
+                    transition={{ duration: 0.15 }}
+                    className="overflow-hidden"
+                  >
+                    <div className="flex items-center gap-2">
+                      <CustomDropdown
+                        value={income.cpfWageType ?? 'ow'}
+                        onChange={(val) => setValue(`incomes.${fieldIndex}.cpfWageType`, val as any)}
+                        options={CPF_WAGE_OPTIONS}
+                        variant={isMonet ? 'monet' : 'dark'}
+                        minWidth="180px"
+                      />
+                      <div className="relative group">
+                        <Info className={cn(
+                          'w-3.5 h-3.5 cursor-help',
+                          isMonet ? 'text-[var(--monet-text-muted)]' : 'text-slate-600'
+                        )} />
+                        <div className={cn(
+                          'absolute bottom-full left-1/2 -translate-x-1/2 mb-2 w-56 p-2.5 rounded-lg text-[11px] leading-relaxed',
+                          'opacity-0 pointer-events-none group-hover:opacity-100 group-hover:pointer-events-auto transition-opacity z-50',
+                          isMonet
+                            ? 'bg-white border border-[var(--monet-lavender)]/20 text-[var(--monet-text-secondary)] shadow-lg'
+                            : 'bg-[#1a1a2e] border border-white/10 text-slate-300 shadow-xl'
+                        )}>
+                          <p className="font-semibold mb-1">OW — Ordinary Wages</p>
+                          <p className="mb-1.5">Regular monthly salary. Subject to the OW ceiling ($6,800/mo) for CPF contributions.</p>
+                          <p className="font-semibold mb-1">AW — Additional Wages</p>
+                          <p>Bonuses, commissions, etc. Subject to a separate annual AW ceiling.</p>
+                        </div>
+                      </div>
+                    </div>
+                  </motion.div>
+                )}
+              </AnimatePresence>
+            </div>
+          </div>
+        )}
+
+        {/* Row 4: Growth Rate */}
+        <div className="max-w-[200px]">
+          <label className={cn(
+            'text-[10px] font-medium uppercase tracking-wider mb-1 block',
+            isMonet ? 'text-[var(--monet-text-muted)]' : 'text-slate-600'
+          )}>
+            Annual Growth
+            {matchesDefault('growthRate') && (
+              <span className={cn('ml-1.5 normal-case tracking-normal', isMonet ? 'text-[var(--monet-text-muted)]/60' : 'text-slate-700')}>(default)</span>
+            )}
+          </label>
+          <CurrencyInput
+            value={income.growthRate}
+            onChange={(val) => setValue(`incomes.${fieldIndex}.growthRate`, val)}
+            isPercentage
+            size="sm"
+          />
+        </div>
+
+        {/* Collapse / Delete actions */}
+        <div className="flex items-center justify-between pt-1">
+          <button
+            type="button"
+            onClick={onToggle}
+            className={cn(
+              'text-xs transition-colors',
+              isMonet ? 'text-[var(--monet-text-muted)] hover:text-[var(--monet-text-secondary)]' : 'text-slate-500 hover:text-slate-300'
+            )}
+          >
+            Done
+          </button>
+          <button
+            type="button"
+            onClick={onRemove}
+            className={cn(
+              'flex items-center gap-1 text-xs transition-colors',
+              isMonet ? 'text-rose-400 hover:text-rose-500' : 'text-rose-400/60 hover:text-rose-400'
+            )}
+          >
+            <Trash2 className="w-3 h-3" />
+            Remove
+          </button>
+        </div>
+      </div>
+    </motion.div>
+  )
+}
diff --git a/frontend/src/components/modals/OnboardingWizardModal/components/LiabilityRow.tsx b/frontend/src/components/modals/OnboardingWizardModal/components/LiabilityRow.tsx
new file mode 100644
index 000000000..2ef214b7d
--- /dev/null
+++ b/frontend/src/components/modals/OnboardingWizardModal/components/LiabilityRow.tsx
@@ -0,0 +1,205 @@
+import { useFormContext } from 'react-hook-form'
+import { Trash2 } from 'lucide-react'
+import { motion } from 'framer-motion'
+import { cn } from '@/lib/utils'
+import { formatCurrency } from '@/lib/format'
+import { CurrencyInput } from '@/components/ui/CurrencyInput'
+import { CustomDropdown } from '@/components/modals/ScenarioEventModal/components/CustomDropdown'
+import type { OnboardingFormData } from '../types'
+import { LIABILITY_CATEGORY_LABELS } from '../types'
+import { LIABILITY_CATEGORY_ICONS } from './incomeExpensesConstants'
+
+const LIABILITY_CATEGORY_OPTIONS = Object.entries(LIABILITY_CATEGORY_LABELS).map(([value, label]) => ({
+  value,
+  label: `${LIABILITY_CATEGORY_ICONS[value] ?? ''} ${label}`,
+}))
+
+interface LiabilityRowProps {
+  fieldIndex: number
+  isExpanded: boolean
+  onToggle: () => void
+  onRemove: () => void
+  isMonet: boolean
+}
+
+export function LiabilityRow({
+  fieldIndex,
+  isExpanded,
+  onToggle,
+  onRemove,
+  isMonet,
+}: LiabilityRowProps) {
+  const { watch, setValue, register, formState: { errors } } = useFormContext<OnboardingFormData>()
+  const liability = watch(`liabilities.${fieldIndex}`)
+  const fieldErrors = errors.liabilities?.[fieldIndex]
+
+  if (!liability) return null
+
+  const categoryIcon = LIABILITY_CATEGORY_ICONS[liability.category] ?? '📋'
+  const categoryLabel = LIABILITY_CATEGORY_LABELS[liability.category] ?? liability.category
+
+  const getInputClass = (hasError?: boolean) => cn(
+    'w-full py-2 px-3 rounded-lg text-sm transition-colors focus:outline-none',
+    hasError
+      ? 'border border-rose-500/40 bg-rose-500/5 text-white placeholder:text-slate-600 focus:border-rose-500/60'
+      : isMonet
+        ? 'bg-[var(--monet-lavender)]/5 border border-[var(--monet-lavender)]/15 text-[var(--monet-text-primary)] placeholder:text-[var(--monet-text-muted)] focus:border-[var(--monet-sage)]/40'
+        : 'bg-white/[0.03] border border-white/[0.06] text-white placeholder:text-slate-600 focus:border-blue-500/30 focus:bg-blue-500/[0.06]'
+  )
+
+  // ─── Collapsed row ────────────────────────────────────────────────────────
+  const hasAnyError = !!fieldErrors
+  const displayName = liability.name || 'Untitled'
+  const displayAmount = liability.currentBalance > 0 ? `(${formatCurrency(liability.currentBalance)})` : '—'
+
+  if (!isExpanded) {
+    return (
+      <div
+        onClick={onToggle}
+        className={cn(
+          'group flex items-center gap-3 px-3 py-2.5 rounded-xl cursor-pointer transition-all',
+          hasAnyError
+            ? 'border border-rose-500/30 bg-rose-500/5 hover:border-rose-500/40'
+            : isMonet
+              ? 'hover:bg-[var(--monet-lavender)]/5 border border-transparent hover:border-[var(--monet-lavender)]/10'
+              : 'hover:bg-white/[0.02] border border-transparent hover:border-white/[0.06]'
+        )}
+      >
+        <span className="text-base flex-shrink-0">{categoryIcon}</span>
+        <span className={cn(
+          'flex-1 text-sm truncate',
+          isMonet ? 'text-[var(--monet-text-primary)]' : 'text-slate-200'
+        )}>
+          {displayName} · {categoryLabel}
+        </span>
+        <span className={cn(
+          'flex-shrink-0 text-sm font-mono tabular-nums',
+          isMonet ? 'text-rose-500' : 'text-rose-400'
+        )}>
+          {displayAmount}
+        </span>
+        <button
+          type="button"
+          onClick={(e) => { e.stopPropagation(); onRemove() }}
+          className={cn(
+            'flex-shrink-0 p-1 rounded-lg transition-all opacity-0 group-hover:opacity-100',
+            isMonet
+              ? 'text-[var(--monet-text-muted)] hover:text-rose-500 hover:bg-rose-50'
+              : 'text-slate-600 hover:text-rose-400 hover:bg-rose-500/10'
+          )}
+        >
+          <Trash2 className="w-3.5 h-3.5" />
+        </button>
+      </div>
+    )
+  }
+
+  // ─── Expanded row ─────────────────────────────────────────────────────────
+  return (
+    <motion.div
+      initial={{ height: 0, opacity: 0 }}
+      animate={{ height: 'auto', opacity: 1 }}
+      exit={{ height: 0, opacity: 0 }}
+      transition={{ duration: 0.2, ease: 'easeInOut' }}
+      className="overflow-hidden"
+    >
+      <div
+        className={cn(
+          'rounded-xl border p-4 space-y-3',
+          isMonet
+            ? 'border-[var(--monet-sage)]/20 bg-[var(--monet-lavender)]/5'
+            : 'border-white/[0.08] bg-white/[0.02]'
+        )}
+      >
+        {/* Row 1: Name + Balance */}
+        <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
+          <div>
+            <label className={cn('text-[10px] font-medium uppercase tracking-wider mb-1 block', isMonet ? 'text-[var(--monet-text-muted)]' : 'text-slate-600')}>
+              Name
+            </label>
+            <input
+              {...register(`liabilities.${fieldIndex}.name`)}
+              placeholder="e.g. Home Mortgage"
+              className={getInputClass(!!fieldErrors?.name)}
+              autoFocus
+            />
+          </div>
+          <div>
+            <label className={cn('text-[10px] font-medium uppercase tracking-wider mb-1 block', isMonet ? 'text-[var(--monet-text-muted)]' : 'text-slate-600')}>
+              Outstanding Balance
+            </label>
+            <CurrencyInput
+              value={liability.currentBalance}
+              onChange={(val) => setValue(`liabilities.${fieldIndex}.currentBalance`, val)}
+              size="sm"
+            />
+          </div>
+        </div>
+
+        {/* Row 2: Category + APR */}
+        <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
+          <div>
+            <label className={cn('text-[10px] font-medium uppercase tracking-wider mb-1 block', isMonet ? 'text-[var(--monet-text-muted)]' : 'text-slate-600')}>
+              Category
+            </label>
+            <CustomDropdown
+              value={liability.category}
+              onChange={(val) => setValue(`liabilities.${fieldIndex}.category`, val as any)}
+              options={LIABILITY_CATEGORY_OPTIONS}
+              variant={isMonet ? 'monet' : 'dark'}
+              minWidth="100%"
+            />
+          </div>
+          <div>
+            <label className={cn('text-[10px] font-medium uppercase tracking-wider mb-1 block', isMonet ? 'text-[var(--monet-text-muted)]' : 'text-slate-600')}>
+              Interest Rate (APR)
+            </label>
+            <CurrencyInput
+              value={liability.interestRateApr}
+              onChange={(val) => setValue(`liabilities.${fieldIndex}.interestRateApr`, val)}
+              isPercentage
+              size="sm"
+            />
+          </div>
+        </div>
+
+        {/* Row 3: Minimum Payment */}
+        <div className="max-w-[200px]">
+          <label className={cn('text-[10px] font-medium uppercase tracking-wider mb-1 block', isMonet ? 'text-[var(--monet-text-muted)]' : 'text-slate-600')}>
+            Min. Monthly Payment
+          </label>
+          <CurrencyInput
+            value={liability.minimumPayment}
+            onChange={(val) => setValue(`liabilities.${fieldIndex}.minimumPayment`, val)}
+            size="sm"
+          />
+        </div>
+
+        {/* Collapse / Delete actions */}
+        <div className="flex items-center justify-between pt-1">
+          <button
+            type="button"
+            onClick={onToggle}
+            className={cn(
+              'text-xs transition-colors',
+              isMonet ? 'text-[var(--monet-text-muted)] hover:text-[var(--monet-text-secondary)]' : 'text-slate-500 hover:text-slate-300'
+            )}
+          >
+            Done
+          </button>
+          <button
+            type="button"
+            onClick={onRemove}
+            className={cn(
+              'flex items-center gap-1 text-xs transition-colors',
+              isMonet ? 'text-rose-400 hover:text-rose-500' : 'text-rose-400/60 hover:text-rose-400'
+            )}
+          >
+            <Trash2 className="w-3 h-3" />
+            Remove
+          </button>
+        </div>
+      </div>
+    </motion.div>
+  )
+}
diff --git a/frontend/src/components/modals/OnboardingWizardModal/components/LoadSampleDataButton.tsx b/frontend/src/components/modals/OnboardingWizardModal/components/LoadSampleDataButton.tsx
new file mode 100644
index 000000000..b6cd525e4
--- /dev/null
+++ b/frontend/src/components/modals/OnboardingWizardModal/components/LoadSampleDataButton.tsx
@@ -0,0 +1,112 @@
+'use client'
+
+import { useState, useRef, useEffect } from 'react'
+import { ClipboardList, ChevronUp } from 'lucide-react'
+import { FINANCIAL_PROFILES } from '../../ProfileSelectionModal/profileConfigs'
+
+// Profile display metadata (emoji icons for the popover list)
+const PROFILE_EMOJIS: Record<string, string> = {
+  'single-early-career': '🎓',
+  'dink': '💑',
+  'dink-kids-planned': '👶',
+  'single-income-family': '🏠',
+  'fire-focused': '🔥',
+}
+
+interface LoadSampleDataButtonProps {
+  onLoadProfile: (profileId: string) => void
+  isMonet: boolean
+}
+
+export function LoadSampleDataButton({ onLoadProfile, isMonet }: LoadSampleDataButtonProps) {
+  const [isOpen, setIsOpen] = useState(false)
+  const containerRef = useRef<HTMLDivElement>(null)
+
+  // Close popover on outside click
+  useEffect(() => {
+    if (!isOpen) return
+    function handleClickOutside(event: MouseEvent) {
+      if (containerRef.current && !containerRef.current.contains(event.target as Node)) {
+        setIsOpen(false)
+      }
+    }
+    document.addEventListener('mousedown', handleClickOutside)
+    return () => document.removeEventListener('mousedown', handleClickOutside)
+  }, [isOpen])
+
+  // Close on escape
+  useEffect(() => {
+    if (!isOpen) return
+    function handleEscape(event: KeyboardEvent) {
+      if (event.key === 'Escape') setIsOpen(false)
+    }
+    document.addEventListener('keydown', handleEscape)
+    return () => document.removeEventListener('keydown', handleEscape)
+  }, [isOpen])
+
+  const selectableProfiles = FINANCIAL_PROFILES.filter((p) => p.id !== 'blank-slate')
+
+  return (
+    <div ref={containerRef} className="relative">
+      {/* Trigger button */}
+      <button
+        type="button"
+        onClick={() => setIsOpen((prev) => !prev)}
+        className={`flex items-center gap-1.5 text-xs font-medium transition-colors ${
+          isMonet
+            ? 'text-[var(--monet-text-muted)] hover:text-[var(--monet-text-secondary)]'
+            : 'text-slate-600 hover:text-slate-400'
+        }`}
+      >
+        <ClipboardList className="h-3.5 w-3.5" />
+        Load Sample
+        <ChevronUp
+          className={`h-3 w-3 transition-transform duration-150 ${isOpen ? '' : 'rotate-180'}`}
+        />
+      </button>
+
+      {/* Popover — opens upward */}
+      {isOpen && (
+        <div
+          className={`absolute bottom-full left-0 mb-2 w-56 max-h-80 overflow-y-auto rounded-xl border p-1.5 z-50 ${
+            isMonet
+              ? 'bg-white border-[var(--monet-lavender)]/20 shadow-lg shadow-black/10'
+              : 'bg-[rgba(10,10,10,0.95)] border-white/[0.08] shadow-xl backdrop-blur-xl'
+          }`}
+        >
+          {selectableProfiles.map((profile) => (
+            <button
+              key={profile.id}
+              type="button"
+              onClick={() => {
+                onLoadProfile(profile.id)
+                setIsOpen(false)
+              }}
+              className={`w-full flex items-start gap-2.5 px-2.5 py-2 rounded-lg text-left transition-all duration-150 ${
+                isMonet
+                  ? 'hover:bg-[var(--monet-lavender)]/10'
+                  : 'hover:bg-white/[0.06]'
+              }`}
+            >
+              <span className="text-base leading-none mt-0.5">
+                {PROFILE_EMOJIS[profile.id] ?? '📋'}
+              </span>
+              <div className="min-w-0 flex-1">
+                <div className={`text-xs font-medium ${
+                  isMonet ? 'text-[var(--monet-text-primary)]' : 'text-slate-200'
+                }`}>
+                  {profile.name}
+                </div>
+                <div className={`text-[11px] leading-tight mt-0.5 ${
+                  isMonet ? 'text-[var(--monet-text-muted)]' : 'text-slate-500'
+                }`}>
+                  {profile.tagline}
+                </div>
+              </div>
+            </button>
+          ))}
+        </div>
+      )}
+    </div>
+  )
+}
diff --git a/frontend/src/components/modals/OnboardingWizardModal/components/PersonCard.tsx b/frontend/src/components/modals/OnboardingWizardModal/components/PersonCard.tsx
new file mode 100644
index 000000000..4f236523b
--- /dev/null
+++ b/frontend/src/components/modals/OnboardingWizardModal/components/PersonCard.tsx
@@ -0,0 +1,239 @@
+import { useFormContext } from 'react-hook-form'
+import { Trash2 } from 'lucide-react'
+import { cn } from '@/lib/utils'
+import { CustomDropdown } from '@/components/modals/ScenarioEventModal/components/CustomDropdown'
+import { DatePicker } from '@/components/ui/DatePicker'
+import { AnimatePresence, motion } from 'framer-motion'
+import type { OnboardingFormData, OnboardingPerson } from '../types'
+import { RELATIONSHIP_OPTIONS } from '../types'
+
+interface PersonCardProps {
+  index: number
+  person: OnboardingPerson
+  isSelf: boolean
+  onRemove: () => void
+  isMonet: boolean
+}
+
+const GENDER_OPTIONS = [
+  { value: 'male' as const, label: 'Male' },
+  { value: 'female' as const, label: 'Female' },
+]
+
+const RESIDENCY_OPTIONS = [
+  { value: 'citizen' as const, label: 'Citizen' },
+  { value: 'pr' as const, label: 'PR' },
+]
+
+export function PersonCard({ index, person, isSelf, onRemove, isMonet }: PersonCardProps) {
+  const { register, setValue, watch, formState: { errors } } = useFormContext<OnboardingFormData>()
+  const residencyStatus = watch(`persons.${index}.residencyStatus`)
+  const relationship = watch(`persons.${index}.relationship`)
+  const dateOfBirth = watch(`persons.${index}.dateOfBirth`)
+  const prGrantDate = watch(`persons.${index}.prGrantDate`)
+  const todayString = new Date().toISOString().split('T')[0]
+  const isChild = relationship === 'child'
+  const isOtherRelationship = relationship === 'other'
+
+  const fieldPrefix = `persons.${index}` as const
+
+  const personErrors = errors.persons?.[index]
+
+  const getInputClass = (fieldName?: keyof NonNullable<typeof personErrors>) => {
+    const hasError = fieldName && personErrors?.[fieldName]
+    return cn(
+      'w-full py-2 px-3 rounded-lg text-sm transition-colors focus:outline-none',
+      hasError
+        ? 'border border-rose-500/40 bg-rose-500/5 text-white placeholder:text-slate-600 focus:border-rose-500/60'
+        : isMonet
+          ? 'bg-[var(--monet-lavender)]/5 border border-[var(--monet-lavender)]/15 text-[var(--monet-text-primary)] placeholder:text-[var(--monet-text-muted)] focus:border-[var(--monet-sage)]/40'
+          : 'bg-white/[0.03] border border-white/[0.06] text-white placeholder:text-slate-600 focus:border-blue-500/30 focus:bg-blue-500/[0.06]'
+    )
+  }
+
+  // Fallback for fields that don't need error state
+  const inputClass = getInputClass()
+
+  const labelClass = cn(
+    'text-xs font-medium mb-1',
+    isMonet ? 'text-[var(--monet-text-secondary)]' : 'text-slate-400'
+  )
+
+  return (
+    <div
+      className={cn(
+        'rounded-xl border p-4 transition-colors',
+        isMonet
+          ? 'border-[var(--monet-lavender)]/15 bg-[var(--monet-lavender)]/[0.03]'
+          : 'border-white/[0.06] bg-white/[0.02]'
+      )}
+    >
+      {/* Card header - delete button only for non-self members */}
+      {!isSelf && (
+        <div className="flex items-center justify-end mb-4">
+          <button
+            type="button"
+            onClick={onRemove}
+            className={cn(
+              'p-1 rounded-md transition-colors',
+              isMonet
+                ? 'text-[var(--monet-text-muted)] hover:text-rose-500 hover:bg-rose-50'
+                : 'text-slate-600 hover:text-rose-400 hover:bg-rose-500/10'
+            )}
+          >
+            <Trash2 className="w-3.5 h-3.5" />
+          </button>
+        </div>
+      )}
+
+      {/* Row 1: Name, DOB, Gender */}
+      <div className="grid grid-cols-1 sm:grid-cols-3 gap-3 mb-3">
+        <div>
+          <label className={labelClass}>Name</label>
+          <input
+            {...register(`${fieldPrefix}.name`)}
+            placeholder="Full name"
+            className={getInputClass('name')}
+          />
+        </div>
+        <div>
+          <label className={labelClass}>Date of Birth</label>
+          <DatePicker
+            value={dateOfBirth || undefined}
+            onChange={(val) => setValue(`${fieldPrefix}.dateOfBirth`, val)}
+            placeholder="Select date"
+            maxDate={todayString}
+            variant={isMonet ? 'monet' : 'dark'}
+            hasError={!!personErrors?.dateOfBirth}
+          />
+        </div>
+        <div>
+          <label className={labelClass}>Gender</label>
+          <CustomDropdown
+            value={person.gender}
+            onChange={(val) => setValue(`${fieldPrefix}.gender`, val)}
+            options={GENDER_OPTIONS}
+            variant={isMonet ? 'monet' : 'dark'}
+            minWidth="100%"
+          />
+        </div>
+      </div>
+
+      {/* Row 2: Residency, PR Grant Date, Retirement Age / Relationship */}
+      <div className="grid grid-cols-1 sm:grid-cols-3 gap-3">
+        {isSelf ? (
+          <>
+            <div>
+              <label className={labelClass}>Residency Status</label>
+              <CustomDropdown
+                value={residencyStatus}
+                onChange={(val) => setValue(`${fieldPrefix}.residencyStatus`, val as 'citizen' | 'pr')}
+                options={RESIDENCY_OPTIONS}
+                variant={isMonet ? 'monet' : 'dark'}
+                minWidth="100%"
+              />
+            </div>
+            <AnimatePresence mode="wait">
+              {residencyStatus === 'pr' && (
+                <motion.div
+                  initial={{ opacity: 0, height: 0 }}
+                  animate={{ opacity: 1, height: 'auto' }}
+                  exit={{ opacity: 0, height: 0 }}
+                  transition={{ duration: 0.2 }}
+                >
+                  <label className={labelClass}>PR Grant Date</label>
+                  <DatePicker
+                    value={prGrantDate || undefined}
+                    onChange={(val) => setValue(`${fieldPrefix}.prGrantDate`, val)}
+                    placeholder="Select date"
+                    maxDate={todayString}
+                    variant={isMonet ? 'monet' : 'dark'}
+                  />
+                </motion.div>
+              )}
+            </AnimatePresence>
+            {!isChild && (
+              <div>
+                <label className={labelClass}>Retirement Age</label>
+                <input
+                  type="number"
+                  min={50}
+                  max={100}
+                  {...register(`${fieldPrefix}.retirementAge`, { valueAsNumber: true })}
+                  className={inputClass}
+                />
+              </div>
+            )}
+          </>
+        ) : (
+          <>
+            <div>
+              <label className={labelClass}>Relationship</label>
+              <CustomDropdown
+                value={relationship}
+                onChange={(val) => {
+                  setValue(`${fieldPrefix}.relationship`, val)
+                  if (val !== 'other') setValue(`${fieldPrefix}.customRelationship`, '')
+                }}
+                options={[...RELATIONSHIP_OPTIONS]}
+                variant={isMonet ? 'monet' : 'dark'}
+                minWidth="100%"
+              />
+            </div>
+            {isOtherRelationship && (
+              <div>
+                <label className={labelClass}>Specify Relationship</label>
+                <input
+                  {...register(`${fieldPrefix}.customRelationship`)}
+                  placeholder="e.g. Uncle, Cousin, Partner"
+                  className={inputClass}
+                />
+              </div>
+            )}
+            <div>
+              <label className={labelClass}>Residency Status</label>
+              <CustomDropdown
+                value={residencyStatus}
+                onChange={(val) => setValue(`${fieldPrefix}.residencyStatus`, val as 'citizen' | 'pr')}
+                options={RESIDENCY_OPTIONS}
+                variant={isMonet ? 'monet' : 'dark'}
+                minWidth="100%"
+              />
+            </div>
+            <AnimatePresence mode="wait">
+              {residencyStatus === 'pr' ? (
+                <motion.div
+                  key="pr-date"
+                  initial={{ opacity: 0, height: 0 }}
+                  animate={{ opacity: 1, height: 'auto' }}
+                  exit={{ opacity: 0, height: 0 }}
+                  transition={{ duration: 0.2 }}
+                >
+                  <label className={labelClass}>PR Grant Date</label>
+                  <DatePicker
+                    value={prGrantDate || undefined}
+                    onChange={(val) => setValue(`${fieldPrefix}.prGrantDate`, val)}
+                    placeholder="Select date"
+                    maxDate={todayString}
+                    variant={isMonet ? 'monet' : 'dark'}
+                  />
+                </motion.div>
+              ) : !isChild ? (
+                <div>
+                  <label className={labelClass}>Retirement Age</label>
+                  <input
+                    type="number"
+                    min={50}
+                    max={100}
+                    {...register(`${fieldPrefix}.retirementAge`, { valueAsNumber: true })}
+                    className={inputClass}
+                  />
+                </div>
+              ) : null}
+            </AnimatePresence>
+          </>
+        )}
+      </div>
+    </div>
+  )
+}
diff --git a/frontend/src/components/modals/OnboardingWizardModal/components/PersonalInfoStep.tsx b/frontend/src/components/modals/OnboardingWizardModal/components/PersonalInfoStep.tsx
new file mode 100644
index 000000000..f3e2ab869
--- /dev/null
+++ b/frontend/src/components/modals/OnboardingWizardModal/components/PersonalInfoStep.tsx
@@ -0,0 +1,138 @@
+import { useFormContext, useFieldArray } from 'react-hook-form'
+import { Plus } from 'lucide-react'
+import { cn } from '@/lib/utils'
+import { generateUUID } from '@/lib/utils'
+import { PERSON_COLORS } from '@/types/person'
+import { PersonCard } from './PersonCard'
+import type { OnboardingFormData, OnboardingPerson } from '../types'
+
+interface PersonalInfoStepProps {
+  isMonet: boolean
+}
+
+export function PersonalInfoStep({ isMonet }: PersonalInfoStepProps) {
+  const { watch, register, control } = useFormContext<OnboardingFormData>()
+  const { fields, append, remove } = useFieldArray({ control, name: 'persons' })
+  const persons = watch('persons')
+
+  const handleAddPerson = () => {
+    const colorIndex = persons.length % PERSON_COLORS.length
+    const newPerson: OnboardingPerson = {
+      tempId: generateUUID(),
+      serverId: null,
+      name: '',
+      dateOfBirth: '',
+      gender: 'male',
+      residencyStatus: 'citizen',
+      prGrantDate: null,
+      relationship: persons.length === 1 ? 'spouse' : 'child',
+      customRelationship: '',
+      retirementAge: 65,
+      displayColor: PERSON_COLORS[colorIndex],
+    }
+    append(newPerson)
+  }
+
+  const handleRemovePerson = (index: number) => {
+    if (index === 0) return // Can't remove self
+
+    // TODO(human): Cascade-remove linked data when a person is deleted
+    // When a person is removed from Step 1, any incomes (Step 2) and CPF entries (Step 4)
+    // that reference this person's tempId should also be removed from the form.
+    // The person's tempId is: persons[index].tempId
+    // Incomes link via: income.personTempId
+    // CPF accounts link via: cpf.personTempId
+    // Implement the cascade logic below, then call remove(index) at the end.
+
+    remove(index)
+  }
+
+  const inputClass = cn(
+    'w-full py-2 px-3 rounded-lg text-sm transition-colors focus:outline-none',
+    isMonet
+      ? 'bg-[var(--monet-lavender)]/5 border border-[var(--monet-lavender)]/15 text-[var(--monet-text-primary)] placeholder:text-[var(--monet-text-muted)] focus:border-[var(--monet-sage)]/40'
+      : 'bg-white/[0.03] border border-white/[0.06] text-white placeholder:text-slate-600 focus:border-blue-500/30 focus:bg-blue-500/[0.06]'
+  )
+
+  return (
+    <div className="space-y-5">
+      {/* Section header */}
+      <div>
+        <h3 className={cn(
+          'text-sm font-semibold',
+          isMonet ? 'text-[var(--monet-text-primary)]' : 'text-white'
+        )}>
+          Household Members
+        </h3>
+        <p className={cn(
+          'text-xs mt-0.5',
+          isMonet ? 'text-[var(--monet-text-muted)]' : 'text-slate-500'
+        )}>
+          Tell us about yourself and your household
+        </p>
+      </div>
+
+      {/* Person cards */}
+      <div className="space-y-3">
+        {fields.map((field, index) => (
+          <PersonCard
+            key={field.id}
+            index={index}
+            person={persons[index]}
+            isSelf={index === 0}
+            onRemove={() => handleRemovePerson(index)}
+            isMonet={isMonet}
+          />
+        ))}
+      </div>
+
+      {/* Add button */}
+      <button
+        type="button"
+        onClick={handleAddPerson}
+        className={cn(
+          'flex items-center gap-1.5 text-xs font-medium transition-colors',
+          isMonet
+            ? 'text-[var(--monet-sage)] hover:text-[var(--monet-sage-dark)]'
+            : 'text-emerald-400 hover:text-emerald-300'
+        )}
+      >
+        <Plus className="w-3.5 h-3.5" />
+        Add Household Member
+      </button>
+
+      {/* Planning Horizon */}
+      <div className={cn(
+        'border-t pt-4 mt-4',
+        isMonet ? 'border-[var(--monet-lavender)]/10' : 'border-white/[0.06]'
+      )}>
+        <h4 className={cn(
+          'text-xs font-semibold uppercase tracking-wider mb-3',
+          isMonet ? 'text-[var(--monet-text-secondary)]' : 'text-slate-400'
+        )}>
+          Planning Horizon
+        </h4>
+        <div className="flex items-center gap-3">
+          <span className={cn(
+            'text-sm',
+            isMonet ? 'text-[var(--monet-text-secondary)]' : 'text-slate-300'
+          )}>
+            Years to project from now
+          </span>
+          <input
+            type="number"
+            min={1}
+            max={80}
+            {...register('projectionYears', { valueAsNumber: true })}
+            className={cn(inputClass, 'w-20 text-center')}
+          />
+          <span className={cn(
+            'text-xs',
+            isMonet ? 'text-[var(--monet-text-muted)]' : 'text-slate-500'
+          )}>
+          </span>
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/frontend/src/components/modals/OnboardingWizardModal/components/StepIndicator.tsx b/frontend/src/components/modals/OnboardingWizardModal/components/StepIndicator.tsx
new file mode 100644
index 000000000..6805ba65e
--- /dev/null
+++ b/frontend/src/components/modals/OnboardingWizardModal/components/StepIndicator.tsx
@@ -0,0 +1,87 @@
+import { Check, Minus } from 'lucide-react'
+import { cn } from '@/lib/utils'
+import { ONBOARDING_STEPS, type StepStatus } from '../types'
+
+interface StepIndicatorProps {
+  currentStepIndex: number
+  stepStatuses: StepStatus[]
+  onStepClick: (stepIndex: number) => void
+  isMonet: boolean
+}
+
+export function StepIndicator({ currentStepIndex, stepStatuses, onStepClick, isMonet }: StepIndicatorProps) {
+  return (
+    <div className="flex items-center justify-center gap-0 py-4 px-6">
+      {ONBOARDING_STEPS.map((step, index) => {
+        const status = stepStatuses[index]
+        const isActive = index === currentStepIndex
+        const isClickable = status === 'completed' || status === 'skipped'
+
+        return (
+          <div key={step.key} className="flex items-center">
+            {/* Step circle + label */}
+            <button
+              type="button"
+              onClick={() => isClickable && onStepClick(index)}
+              disabled={!isClickable}
+              className={cn(
+                'flex flex-col items-center gap-1.5 group',
+                isClickable ? 'cursor-pointer' : 'cursor-default'
+              )}
+            >
+              {/* Circle */}
+              <div
+                className={cn(
+                  'flex items-center justify-center w-8 h-8 rounded-full text-xs font-semibold transition-all duration-200',
+                  isActive && !isMonet && 'border-2 border-emerald-400 bg-emerald-500/15 text-white',
+                  isActive && isMonet && 'border-2 border-[var(--monet-sage)] bg-[var(--monet-sage)]/15 text-[var(--monet-text-primary)]',
+                  status === 'completed' && !isMonet && 'bg-emerald-500 text-white',
+                  status === 'completed' && isMonet && 'bg-[var(--monet-sage)] text-white',
+                  status === 'skipped' && !isMonet && 'bg-amber-500/80 text-white',
+                  status === 'skipped' && isMonet && 'bg-amber-500/60 text-white',
+                  status === 'pending' && !isMonet && 'border border-slate-600 text-slate-600',
+                  status === 'pending' && isMonet && 'border border-[var(--monet-lavender)]/30 text-[var(--monet-text-muted)]',
+                )}
+              >
+                {status === 'completed' ? (
+                  <Check className="w-4 h-4" />
+                ) : status === 'skipped' ? (
+                  <Minus className="w-4 h-4" />
+                ) : (
+                  index + 1
+                )}
+              </div>
+
+              {/* Label */}
+              <span
+                className={cn(
+                  'text-[10px] font-medium whitespace-nowrap transition-colors',
+                  isActive && !isMonet && 'text-white',
+                  isActive && isMonet && 'text-[var(--monet-text-primary)]',
+                  (status === 'completed' || status === 'skipped') && !isMonet && 'text-slate-400 group-hover:text-slate-300',
+                  (status === 'completed' || status === 'skipped') && isMonet && 'text-[var(--monet-text-secondary)] group-hover:text-[var(--monet-text-primary)]',
+                  status === 'pending' && !isMonet && 'text-slate-600',
+                  status === 'pending' && isMonet && 'text-[var(--monet-text-muted)]',
+                )}
+              >
+                {step.label}
+              </span>
+            </button>
+
+            {/* Connector line between steps */}
+            {index < ONBOARDING_STEPS.length - 1 && (
+              <div
+                className={cn(
+                  'w-12 sm:w-20 h-px mx-2 mt-[-18px]',
+                  (status === 'completed' || status === 'skipped')
+                    ? isMonet ? 'bg-[var(--monet-sage)]/40' : 'bg-emerald-500/40'
+                    : isMonet ? 'bg-[var(--monet-lavender)]/15' : 'bg-white/[0.06]'
+                )}
+              />
+            )}
+          </div>
+        )
+      })}
+    </div>
+  )
+}
diff --git a/frontend/src/components/modals/OnboardingWizardModal/components/SummaryStep.tsx b/frontend/src/components/modals/OnboardingWizardModal/components/SummaryStep.tsx
new file mode 100644
index 000000000..4efb91f03
--- /dev/null
+++ b/frontend/src/components/modals/OnboardingWizardModal/components/SummaryStep.tsx
@@ -0,0 +1,184 @@
+import { useFormContext } from 'react-hook-form'
+import { CheckCircle2, Users, Wallet, CreditCard, TrendingUp, TrendingDown, Landmark, Info } from 'lucide-react'
+import { cn } from '@/lib/utils'
+import { formatCurrency } from '@/lib/format'
+import { ONBOARDING_STEPS, type StepStatus, type OnboardingFormData } from '../types'
+
+interface SummaryStepProps {
+  stepStatuses: StepStatus[]
+  onClose: () => void
+  onBack?: () => void
+  isMonet: boolean
+}
+
+export function SummaryStep({ stepStatuses, onClose, onBack, isMonet }: SummaryStepProps) {
+  const { getValues } = useFormContext<OnboardingFormData>()
+  const { persons, incomes, expenses, assets, liabilities, cpfAccounts } = getValues()
+
+  // Only count non-empty entries
+  const personCount = persons.filter(p => p.name.trim()).length
+  const incomeCount = incomes.filter(i => i.amount > 0).length
+  const expenseCount = expenses.filter(e => e.amount > 0).length
+  const assetCount = assets.filter(a => a.currentValue > 0).length
+  const liabilityCount = liabilities.filter(l => l.currentBalance > 0).length
+  const cpfPersonCount = cpfAccounts.filter(c => c.oaBalance > 0 || c.saBalance > 0 || c.maBalance > 0 || c.raBalance > 0).length
+  const cpfSubAccountCount = cpfAccounts.reduce((count, c) => {
+    return count + (c.oaBalance > 0 ? 1 : 0) + (c.saBalance > 0 ? 1 : 0) + (c.maBalance > 0 ? 1 : 0) + (c.raBalance > 0 ? 1 : 0)
+  }, 0)
+
+  // Totals
+  const incomeMonthlyTotal = incomes.reduce((sum, inc) => {
+    if (inc.amount <= 0) return sum
+    const monthlyAmount = inc.frequency === 'annual' ? inc.amount / 12
+      : inc.frequency === 'quarterly' ? inc.amount / 3
+      : inc.frequency === 'weekly' ? inc.amount * 4.33
+      : inc.frequency === 'biweekly' ? inc.amount * 2.17
+      : inc.amount
+    return sum + monthlyAmount
+  }, 0)
+
+  const expenseMonthlyTotal = expenses.reduce((sum, exp) => {
+    if (exp.amount <= 0) return sum
+    const monthlyAmount = exp.frequency === 'annual' ? exp.amount / 12
+      : exp.frequency === 'quarterly' ? exp.amount / 3
+      : exp.frequency === 'weekly' ? exp.amount * 4.33
+      : exp.frequency === 'biweekly' ? exp.amount * 2.17
+      : exp.amount
+    return sum + monthlyAmount
+  }, 0)
+
+  const assetTotal = assets.reduce((sum, a) => sum + (a.currentValue ?? 0), 0)
+  const liabilityTotal = liabilities.reduce((sum, l) => sum + (l.currentBalance ?? 0), 0)
+  const cpfTotal = cpfAccounts.reduce((sum, c) => sum + c.oaBalance + c.saBalance + c.maBalance + c.raBalance, 0)
+
+  const skippedSteps = ONBOARDING_STEPS
+    .filter((_, idx) => stepStatuses[idx] === 'skipped')
+    .map(s => s.label)
+
+  const personNames = persons
+    .filter(p => p.name.trim())
+    .map(p => p.name.trim())
+    .join(', ')
+
+  const summaryItems = [
+    { icon: Users, label: `${personCount} Household Member${personCount !== 1 ? 's' : ''}`, detail: personNames, show: personCount > 0 },
+    { icon: Wallet, label: `${incomeCount} Income Source${incomeCount !== 1 ? 's' : ''}`, detail: `${formatCurrency(incomeMonthlyTotal)}/mo total`, show: incomeCount > 0 },
+    { icon: CreditCard, label: `${expenseCount} Recurring Expense${expenseCount !== 1 ? 's' : ''}`, detail: `${formatCurrency(expenseMonthlyTotal)}/mo total`, show: expenseCount > 0 },
+    { icon: TrendingUp, label: `${assetCount} Asset${assetCount !== 1 ? 's' : ''}`, detail: `${formatCurrency(assetTotal)} total`, show: assetCount > 0 },
+    { icon: TrendingDown, label: `${liabilityCount} Liabilit${liabilityCount !== 1 ? 'ies' : 'y'}`, detail: `(${formatCurrency(liabilityTotal)}) total`, show: liabilityCount > 0 },
+    { icon: Landmark, label: `${cpfSubAccountCount} CPF Sub-account${cpfSubAccountCount !== 1 ? 's' : ''}`, detail: `${formatCurrency(cpfTotal)} combined`, show: cpfPersonCount > 0 },
+  ]
+
+  return (
+    <div className="flex flex-col items-center py-8 px-6">
+      {/* Success icon */}
+      <div className={cn(
+        'w-14 h-14 rounded-full flex items-center justify-center mb-4',
+        isMonet ? 'bg-[var(--monet-sage)]/15' : 'bg-emerald-500/15'
+      )}>
+        <CheckCircle2 className={cn('w-7 h-7', isMonet ? 'text-[var(--monet-sage)]' : 'text-emerald-400')} />
+      </div>
+
+      <h3 className={cn(
+        'text-lg font-semibold mb-6',
+        isMonet ? 'text-[var(--monet-text-primary)]' : 'text-white'
+      )}>
+        Your Plan is Ready!
+      </h3>
+
+      {/* Summary card */}
+      <div className={cn(
+        'w-full max-w-md rounded-xl border p-5 mb-6',
+        isMonet
+          ? 'border-[var(--monet-lavender)]/15 bg-[var(--monet-lavender)]/[0.03]'
+          : 'border-white/[0.06] bg-white/[0.02]'
+      )}>
+        <h4 className={cn(
+          'text-xs font-semibold uppercase tracking-wider mb-4',
+          isMonet ? 'text-[var(--monet-text-secondary)]' : 'text-slate-400'
+        )}>
+          What We Set Up
+        </h4>
+
+        <div className="space-y-3">
+          {summaryItems.filter(item => item.show).map((item) => (
+            <div key={item.label} className="flex items-center gap-3">
+              <item.icon className={cn('w-4 h-4 flex-shrink-0', isMonet ? 'text-[var(--monet-sage)]' : 'text-emerald-400')} />
+              <span className={cn('text-sm flex-1', isMonet ? 'text-[var(--monet-text-primary)]' : 'text-slate-300')}>
+                {item.label}
+              </span>
+              <span className={cn(
+                'text-xs font-mono tabular-nums',
+                isMonet ? 'text-[var(--monet-text-muted)]' : 'text-slate-500'
+              )}>
+                {item.detail}
+              </span>
+            </div>
+          ))}
+
+          {summaryItems.every(item => !item.show) && (
+            <p className={cn('text-xs text-center py-2', isMonet ? 'text-[var(--monet-text-muted)]' : 'text-slate-600')}>
+              No data was added during setup.
+            </p>
+          )}
+        </div>
+
+        {skippedSteps.length > 0 && (
+          <div className={cn(
+            'mt-4 pt-3 border-t flex items-center gap-2',
+            isMonet ? 'border-[var(--monet-lavender)]/10' : 'border-white/[0.04]'
+          )}>
+            <span className="text-amber-400/80 text-xs">⊘</span>
+            <span className={cn('text-xs', isMonet ? 'text-[var(--monet-text-muted)]' : 'text-slate-500')}>
+              Skipped: {skippedSteps.join(', ')}
+            </span>
+          </div>
+        )}
+      </div>
+
+      {/* Info banner */}
+      <div className={cn(
+        'w-full max-w-md flex items-start gap-2.5 px-4 py-3 rounded-xl border mb-6',
+        isMonet
+          ? 'border-[var(--monet-lavender)]/15 bg-[var(--monet-lavender)]/5'
+          : 'border-blue-500/15 bg-blue-500/5'
+      )}>
+        <Info className={cn('w-4 h-4 mt-0.5 flex-shrink-0', isMonet ? 'text-[var(--monet-sage)]' : 'text-blue-400')} />
+        <p className={cn('text-xs', isMonet ? 'text-[var(--monet-text-secondary)]' : 'text-slate-400')}>
+          You can fine-tune your financial data anytime from the dashboard.
+          Add scenario events to test &ldquo;what-if&rdquo; situations, explore CPF projections, or set up insurance coverage analysis.
+        </p>
+      </div>
+
+      {/* Action buttons */}
+      <div className="flex items-center gap-3">
+        {onBack && (
+          <button
+            type="button"
+            onClick={onBack}
+            className={cn(
+              'px-4 py-2.5 rounded-lg text-sm font-medium transition-all',
+              isMonet
+                ? 'text-[var(--monet-text-secondary)] hover:bg-[var(--monet-lavender)]/10'
+                : 'text-slate-400 hover:bg-white/[0.05]'
+            )}
+          >
+            &larr; Back to Edit
+          </button>
+        )}
+        <button
+          type="button"
+          onClick={onClose}
+          className={cn(
+            'px-6 py-2.5 rounded-lg text-sm font-medium transition-all',
+            isMonet
+              ? 'bg-[var(--monet-sage)] text-white hover:bg-[var(--monet-sage)]/90'
+              : 'bg-emerald-500/15 text-emerald-400 hover:bg-emerald-500/25 border border-emerald-500/25'
+          )}
+        >
+          Go to Dashboard &rarr;
+        </button>
+      </div>
+    </div>
+  )
+}
diff --git a/frontend/src/components/modals/OnboardingWizardModal/components/collapsedSummaryUtils.ts b/frontend/src/components/modals/OnboardingWizardModal/components/collapsedSummaryUtils.ts
new file mode 100644
index 000000000..a18588d8d
--- /dev/null
+++ b/frontend/src/components/modals/OnboardingWizardModal/components/collapsedSummaryUtils.ts
@@ -0,0 +1,26 @@
+import { formatCurrency } from '@/lib/format'
+
+/** Frequency → short display suffix mapping */
+const FREQUENCY_SUFFIXES: Record<string, string> = {
+  weekly: '/wk',
+  biweekly: '/2wk',
+  monthly: '/mo',
+  quarterly: '/qtr',
+  annual: '/yr',
+}
+
+/**
+ * Returns the left-side label: "Name · Category"
+ */
+export function formatCollapsedLabel(name: string, categoryLabel: string): string {
+  const displayName = name || 'Untitled'
+  return `${displayName} · ${categoryLabel}`
+}
+
+/**
+ * Returns the right-side amount: "$5,000/mo" or "—"
+ */
+export function formatCollapsedAmount(amount: number, frequency: string): string {
+  const suffix = FREQUENCY_SUFFIXES[frequency] ?? '/mo'
+  return amount > 0 ? `${formatCurrency(amount)}${suffix}` : '—'
+}
diff --git a/frontend/src/components/modals/OnboardingWizardModal/components/incomeExpensesConstants.ts b/frontend/src/components/modals/OnboardingWizardModal/components/incomeExpensesConstants.ts
new file mode 100644
index 000000000..46e46f8d7
--- /dev/null
+++ b/frontend/src/components/modals/OnboardingWizardModal/components/incomeExpensesConstants.ts
@@ -0,0 +1,41 @@
+// ─── Category icons for collapsed row summaries and dropdown options ──────────
+
+export const INCOME_CATEGORY_ICONS: Record<string, string> = {
+  salary: '💼',
+  bonus: '🎁',
+  rental: '🏘',
+  freelance: '💻',
+  dividend: '📈',
+  other: '📋',
+}
+
+export const EXPENSE_CATEGORY_ICONS: Record<string, string> = {
+  housing: '🏠',
+  transport: '🚗',
+  food: '🍽',
+  utilities: '⚡',
+  insurance: '🛡',
+  living: '💰',
+  other: '📦',
+}
+
+export const ASSET_CATEGORY_ICONS: Record<string, string> = {
+  cash_savings: '💵',
+  stocks_etfs: '📊',
+  bonds: '🏦',
+  property: '🏘',
+  vehicle: '🚗',
+  other: '📦',
+}
+
+export const LIABILITY_CATEGORY_ICONS: Record<string, string> = {
+  mortgage: '🏠',
+  car_loan: '🚗',
+  student_loan: '🎓',
+  credit_card: '💳',
+  personal_loan: '🤝',
+  other: '📋',
+}
+
+/** Income categories that default to CPF-eligible (Yes toggle) */
+export const CPF_DEFAULT_CATEGORIES = new Set(['salary', 'bonus'])
diff --git a/frontend/src/components/modals/OnboardingWizardModal/hooks/useLoadWizardProfile.ts b/frontend/src/components/modals/OnboardingWizardModal/hooks/useLoadWizardProfile.ts
new file mode 100644
index 000000000..d664a979b
--- /dev/null
+++ b/frontend/src/components/modals/OnboardingWizardModal/hooks/useLoadWizardProfile.ts
@@ -0,0 +1,172 @@
+import { useCallback, useState } from 'react'
+import type { UseFormReturn } from 'react-hook-form'
+import { generateUUID } from '@/lib/utils'
+import { PERSON_COLORS } from '@/types/person'
+import { FINANCIAL_PROFILES } from '../../ProfileSelectionModal/profileConfigs'
+import type { ProfilePersonConfig } from '../../ProfileSelectionModal/types'
+import type {
+  OnboardingFormData,
+  OnboardingPerson,
+  OnboardingIncome,
+  OnboardingExpense,
+  OnboardingAsset,
+  OnboardingCpf,
+} from '../types'
+
+// ─── Age → Date of Birth ─────────────────────────────────────────────────────
+
+function ageToDob(age: number): string {
+  const today = new Date()
+  const birthYear = today.getFullYear() - age
+  // Use Jan 1 as a sensible default birthday
+  return `${birthYear}-01-01`
+}
+
+// ─── Person mapping ──────────────────────────────────────────────────────────
+
+function mapPerson(
+  person: ProfilePersonConfig,
+  index: number,
+): OnboardingPerson {
+  const isFirst = index === 0
+  return {
+    tempId: generateUUID(),
+    serverId: null,
+    name: person.name,
+    dateOfBirth: ageToDob(person.age),
+    gender: 'male', // Default — user can change
+    residencyStatus: person.residencyStatus,
+    prGrantDate: null,
+    relationship: isFirst ? 'self' : 'spouse',
+    customRelationship: '',
+    retirementAge: 65,
+    displayColor: person.displayColor || PERSON_COLORS[index % PERSON_COLORS.length],
+  }
+}
+
+// ─── Income mapping ──────────────────────────────────────────────────────────
+
+function mapIncome(
+  person: ProfilePersonConfig,
+  personTempId: string,
+): OnboardingIncome | null {
+  if (!person.income) return null
+  return {
+    tempId: generateUUID(),
+    serverId: null,
+    personTempId,
+    name: person.income.name,
+    amount: person.income.amount,
+    frequency: 'monthly',
+    category: 'salary',
+    cpfWageType: person.income.cpfWageType ?? 'ow',
+    growthRate: person.income.growthRate,
+  }
+}
+
+// ─── Expense generation ──────────────────────────────────────────────────────
+
+function generateDefaultExpenses(householdMonthlyIncome: number): OnboardingExpense[] {
+  if (householdMonthlyIncome <= 0) return []
+
+  const expenseTemplates: { name: string; category: OnboardingExpense['category']; ratio: number; growthRate: number }[] = [
+    { name: 'Housing & Rent', category: 'housing', ratio: 0.25, growthRate: 3 },
+    { name: 'Food & Dining', category: 'food', ratio: 0.12, growthRate: 3 },
+    { name: 'Transport', category: 'transport', ratio: 0.08, growthRate: 2 },
+  ]
+
+  return expenseTemplates.map((template) => ({
+    tempId: generateUUID(),
+    serverId: null,
+    name: template.name,
+    amount: Math.round(householdMonthlyIncome * template.ratio),
+    frequency: 'monthly' as const,
+    category: template.category,
+    growthRate: template.growthRate,
+  }))
+}
+
+// ─── CPF mapping ─────────────────────────────────────────────────────────────
+
+function mapCpf(
+  person: ProfilePersonConfig,
+  personTempId: string,
+): OnboardingCpf {
+  return {
+    tempId: generateUUID(),
+    serverId: null,
+    personTempId,
+    oaBalance: person.cpfBalances.oa,
+    saBalance: person.cpfBalances.sa,
+    maBalance: person.cpfBalances.ma,
+    raBalance: 0,
+  }
+}
+
+// ─── Full conversion ─────────────────────────────────────────────────────────
+
+function profileToFormData(profileId: string): OnboardingFormData | null {
+  const profile = FINANCIAL_PROFILES.find((p) => p.id === profileId)
+  if (!profile || profile.persons.length === 0) return null
+
+  const persons: OnboardingPerson[] = profile.persons.map(mapPerson)
+  const incomes: OnboardingIncome[] = []
+  const cpfAccounts: OnboardingCpf[] = []
+
+  for (let i = 0; i < profile.persons.length; i++) {
+    const personConfig = profile.persons[i]
+    const personTempId = persons[i].tempId
+
+    const income = mapIncome(personConfig, personTempId)
+    if (income) incomes.push(income)
+
+    cpfAccounts.push(mapCpf(personConfig, personTempId))
+  }
+
+  // Total household monthly income for expense/asset scaling
+  const householdMonthlyIncome = incomes.reduce((sum, inc) => sum + inc.amount, 0)
+
+  const expenses = generateDefaultExpenses(householdMonthlyIncome)
+
+  // Emergency fund: 3 months of income as cash savings
+  const assets: OnboardingAsset[] = householdMonthlyIncome > 0
+    ? [{
+        tempId: generateUUID(),
+        serverId: null,
+        name: 'Emergency Fund',
+        category: 'cash_savings',
+        currentValue: Math.round(householdMonthlyIncome * 3),
+        growthRate: 1.5,
+      }]
+    : []
+
+  return {
+    persons,
+    projectionYears: 30,
+    incomes,
+    expenses,
+    assets,
+    liabilities: [],
+    cpfAccounts,
+  }
+}
+
+// ─── Hook ────────────────────────────────────────────────────────────────────
+
+export function useLoadWizardProfile() {
+  const [isProfileLoaded, setIsProfileLoaded] = useState(false)
+
+  const loadProfile = useCallback(
+    (profileId: string, form: UseFormReturn<OnboardingFormData>): boolean => {
+      const formData = profileToFormData(profileId)
+      if (!formData) return false
+
+      form.reset(formData)
+      setIsProfileLoaded(true)
+      return true
+    },
+    [],
+  )
+
+  return { loadProfile, isProfileLoaded }
+}
diff --git a/frontend/src/components/modals/OnboardingWizardModal/hooks/useOnboardingForm.ts b/frontend/src/components/modals/OnboardingWizardModal/hooks/useOnboardingForm.ts
new file mode 100644
index 000000000..f4764c599
--- /dev/null
+++ b/frontend/src/components/modals/OnboardingWizardModal/hooks/useOnboardingForm.ts
@@ -0,0 +1,102 @@
+import { useForm } from 'react-hook-form'
+import { zodResolver } from '@hookform/resolvers/zod'
+import { generateUUID } from '@/lib/utils'
+import { PERSON_COLORS } from '@/types/person'
+import {
+  onboardingFormSchema,
+  type OnboardingFormData,
+  type OnboardingPerson,
+  type OnboardingIncome,
+  type OnboardingExpense,
+} from '../types'
+
+// ─── Default person (self) ────────────────────────────────────────────────────
+
+function createDefaultSelfPerson(): OnboardingPerson {
+  return {
+    tempId: generateUUID(),
+    serverId: null,
+    name: '',
+    dateOfBirth: '',
+    gender: 'male',
+    residencyStatus: 'citizen',
+    prGrantDate: null,
+    relationship: 'self',
+    customRelationship: '',
+    retirementAge: 65,
+    displayColor: PERSON_COLORS[0],
+  }
+}
+
+// ─── Default income row ───────────────────────────────────────────────────────
+
+interface IncomeOverrides {
+  growthRate?: number
+  frequency?: 'weekly' | 'biweekly' | 'monthly' | 'quarterly' | 'annual'
+}
+
+export function createDefaultIncome(
+  personTempId: string,
+  overrides?: IncomeOverrides,
+): OnboardingIncome {
+  return {
+    tempId: generateUUID(),
+    serverId: null,
+    personTempId,
+    name: '',
+    amount: 0,
+    frequency: overrides?.frequency ?? 'monthly',
+    category: 'salary',
+    cpfWageType: 'ow',
+    growthRate: overrides?.growthRate ?? 3,
+  }
+}
+
+// ─── Default expense row ──────────────────────────────────────────────────────
+
+interface ExpenseOverrides {
+  growthRate?: number
+  frequency?: 'weekly' | 'biweekly' | 'monthly' | 'quarterly' | 'annual'
+}
+
+export function createDefaultExpense(
+  overrides?: ExpenseOverrides,
+): OnboardingExpense {
+  return {
+    tempId: generateUUID(),
+    serverId: null,
+    name: '',
+    amount: 0,
+    frequency: overrides?.frequency ?? 'monthly',
+    category: 'living',
+    growthRate: overrides?.growthRate ?? 2,
+  }
+}
+
+// ─── Form defaults ────────────────────────────────────────────────────────────
+
+function createDefaultFormValues(): OnboardingFormData {
+  const selfPerson = createDefaultSelfPerson()
+
+  return {
+    persons: [selfPerson],
+    projectionYears: 30,
+    incomes: [],
+    expenses: [],
+    assets: [],
+    liabilities: [],
+    cpfAccounts: [],
+  }
+}
+
+// ─── Hook ─────────────────────────────────────────────────────────────────────
+
+export function useOnboardingForm() {
+  const form = useForm<OnboardingFormData>({
+    resolver: zodResolver(onboardingFormSchema),
+    defaultValues: createDefaultFormValues(),
+    mode: 'onSubmit', // Only validate on step submit, not on every change
+  })
+
+  return { form }
+}
diff --git a/frontend/src/components/modals/OnboardingWizardModal/hooks/useOnboardingSubmit.ts b/frontend/src/components/modals/OnboardingWizardModal/hooks/useOnboardingSubmit.ts
new file mode 100644
index 000000000..4aa5c1f3e
--- /dev/null
+++ b/frontend/src/components/modals/OnboardingWizardModal/hooks/useOnboardingSubmit.ts
@@ -0,0 +1,269 @@
+import { useState, useRef, useCallback } from 'react'
+import type { UseFormReturn } from 'react-hook-form'
+import { useQueryClient } from '@tanstack/react-query'
+import { personsApi } from '@/api/financial/persons'
+import { createIncome } from '@/api/financial/incomes'
+import { createExpense } from '@/api/financial/expenses'
+import { createAsset } from '@/api/financial/assets'
+import { createLiability } from '@/api/financial/liabilities'
+import { createCPFAccount } from '@/api/financial/cpf'
+import { settingsApi } from '@/api/financial/settings'
+import { QUERY_KEYS } from '@/lib/queryKeys'
+import type { OnboardingFormData } from '../types'
+import type { FieldErrors } from 'react-hook-form'
+
+/** Recursively extract the first human-readable error message from nested FieldErrors. */
+function extractFirstErrorMessage(errors: FieldErrors): string | null {
+  for (const value of Object.values(errors)) {
+    if (!value) continue
+    if (typeof value.message === 'string' && value.message) return value.message
+    // Nested (e.g. array fields like persons.0.dateOfBirth)
+    if (typeof value === 'object') {
+      const nested = extractFirstErrorMessage(value as FieldErrors)
+      if (nested) return nested
+    }
+  }
+  return null
+}
+
+/**
+ * Maps tempId → serverId for persons created in Step 1.
+ * Used by Steps 2 and 4 to resolve person foreign keys.
+ */
+type PersonIdMap = Map<string, string>
+
+export function useOnboardingSubmit(form: UseFormReturn<OnboardingFormData>) {
+  const [isSubmitting, setIsSubmitting] = useState(false)
+  const [submissionError, setSubmissionError] = useState<string | null>(null)
+  const queryClient = useQueryClient()
+
+  // Persistent map across steps: tempId → serverId
+  const personIdMapRef = useRef<PersonIdMap>(new Map())
+
+  // ─── Step 1: Create persons + update planning horizon ─────────────────────
+
+  const submitStep1 = useCallback(async (): Promise<boolean> => {
+    const { persons, projectionYears } = form.getValues()
+
+    // Validate at least one person with a name
+    const validPersons = persons.filter(p => p.name.trim())
+    if (validPersons.length === 0) {
+      setSubmissionError('Please add at least one person with a name.')
+      return false
+    }
+
+    for (const person of validPersons) {
+      // Skip if already saved
+      if (person.serverId) {
+        personIdMapRef.current.set(person.tempId, person.serverId)
+        continue
+      }
+
+      const created = await personsApi.createPerson({
+        name: person.name.trim(),
+        dateOfBirth: person.dateOfBirth,
+        gender: person.gender,
+        residencyStatus: person.residencyStatus,
+        prGrantDate: person.residencyStatus === 'pr' ? (person.prGrantDate ?? undefined) : undefined,
+        displayColor: person.displayColor,
+        relationship: (person.relationship?.toLowerCase() ?? 'self') as 'self' | 'spouse' | 'child' | 'parent' | 'sibling' | 'other',
+      })
+
+      // Store mapping and update form
+      personIdMapRef.current.set(person.tempId, created.id)
+      const personIndex = persons.findIndex(p => p.tempId === person.tempId)
+      if (personIndex >= 0) {
+        form.setValue(`persons.${personIndex}.serverId`, created.id)
+      }
+    }
+
+    // Compute terminal age from oldest person's current age + projection years
+    const oldestPersonAge = validPersons.reduce((maxAge, person) => {
+      const birthDate = new Date(person.dateOfBirth)
+      const today = new Date()
+      const age = today.getFullYear() - birthDate.getFullYear()
+      return Math.max(maxAge, age)
+    }, 0)
+    const terminalAge = oldestPersonAge + projectionYears
+
+    // Update terminal age setting
+    try {
+      const currentSettings = await settingsApi.getUserSettings()
+      await settingsApi.updateUserSettings({
+        ...currentSettings,
+        terminalAge,
+      })
+    } catch {
+      // Non-critical — don't block step progression
+    }
+
+    queryClient.invalidateQueries({ queryKey: QUERY_KEYS.financial.persons })
+    return true
+  }, [form, queryClient])
+
+  // ─── Step 2: Create incomes + expenses ────────────────────────────────────
+
+  const submitStep2 = useCallback(async (): Promise<boolean> => {
+    const { incomes, expenses } = form.getValues()
+
+    // Create incomes
+    for (let i = 0; i < incomes.length; i++) {
+      const income = incomes[i]
+      if (income.serverId || income.amount <= 0) continue
+
+      const personServerId = personIdMapRef.current.get(income.personTempId)
+
+      const created = await createIncome({
+        name: income.name.trim() || 'Salary',
+        personId: personServerId ?? null,
+        amount: income.amount,
+        frequency: income.frequency,
+        startDate: new Date().toISOString(),
+        category: income.category,
+        growthRate: income.growthRate,
+        cpfWageType: income.cpfWageType,
+      })
+
+      form.setValue(`incomes.${i}.serverId`, created.id)
+    }
+
+    // Create expenses
+    for (let i = 0; i < expenses.length; i++) {
+      const expense = expenses[i]
+      if (expense.serverId || expense.amount <= 0) continue
+
+      const created = await createExpense({
+        name: expense.name.trim() || 'Expense',
+        amount: expense.amount,
+        frequency: expense.frequency,
+        category: expense.category,
+        growthRate: expense.growthRate,
+      })
+
+      form.setValue(`expenses.${i}.serverId`, created.id)
+    }
+
+    queryClient.invalidateQueries({ queryKey: QUERY_KEYS.financial.incomes })
+    queryClient.invalidateQueries({ queryKey: QUERY_KEYS.financial.expenses })
+    return true
+  }, [form, queryClient])
+
+  // ─── Step 3: Create assets + liabilities ──────────────────────────────────
+
+  const submitStep3 = useCallback(async (): Promise<boolean> => {
+    const { assets, liabilities } = form.getValues()
+
+    for (let i = 0; i < assets.length; i++) {
+      const asset = assets[i]
+      if (asset.serverId || asset.currentValue <= 0) continue
+
+      const created = await createAsset({
+        name: asset.name.trim() || 'Asset',
+        category: asset.category,
+        currentValue: asset.currentValue,
+        annualGrowthRate: asset.growthRate,
+      })
+
+      form.setValue(`assets.${i}.serverId`, created.id)
+    }
+
+    for (let i = 0; i < liabilities.length; i++) {
+      const liability = liabilities[i]
+      if (liability.serverId || liability.currentBalance <= 0) continue
+
+      const created = await createLiability({
+        name: liability.name.trim() || 'Liability',
+        category: liability.category,
+        currentBalance: liability.currentBalance,
+        interestRateApr: liability.interestRateApr,
+        minimumPayment: liability.minimumPayment,
+      })
+
+      form.setValue(`liabilities.${i}.serverId`, created.id)
+    }
+
+    queryClient.invalidateQueries({ queryKey: QUERY_KEYS.financial.assets })
+    queryClient.invalidateQueries({ queryKey: QUERY_KEYS.financial.liabilities })
+    // cash_savings assets are routed to cash accounts table on the backend
+    queryClient.invalidateQueries({ queryKey: QUERY_KEYS.financial.cashAccounts })
+    return true
+  }, [form, queryClient])
+
+  // ─── Step 4: Create CPF accounts ──────────────────────────────────────────
+  // TODO(human): Implement the CPF account creation logic
+  const submitStep4 = useCallback(async (): Promise<boolean> => {
+    const { cpfAccounts } = form.getValues()
+
+    for (let i = 0; i < cpfAccounts.length; i++) {
+      const cpf = cpfAccounts[i]
+      if (cpf.serverId) continue
+
+      const personServerId = personIdMapRef.current.get(cpf.personTempId)
+      if (!personServerId) continue // Person wasn't created (Step 1 was skipped)
+
+      // Only create if at least one balance is > 0
+      const hasBalance = cpf.oaBalance > 0 || cpf.saBalance > 0 || cpf.maBalance > 0 || cpf.raBalance > 0
+      if (!hasBalance) continue
+
+      const created = await createCPFAccount({
+        personId: personServerId,
+        oaBalance: cpf.oaBalance,
+        saBalance: cpf.saBalance,
+        maBalance: cpf.maBalance,
+        raBalance: cpf.raBalance,
+      })
+
+      form.setValue(`cpfAccounts.${i}.serverId`, created.id)
+    }
+
+    queryClient.invalidateQueries({ queryKey: QUERY_KEYS.financial.cpf })
+    return true
+  }, [form, queryClient])
+
+  // ─── Step dispatcher ──────────────────────────────────────────────────────
+
+  const stepSubmitters = [submitStep1, submitStep2, submitStep3, submitStep4]
+
+  // Fields to validate per step (triggers formState.errors for red borders)
+  const stepFieldNames: Record<number, string[]> = {
+    0: ['persons', 'projectionYears'],
+    1: ['incomes', 'expenses'],
+    2: ['assets', 'liabilities'],
+    3: ['cpfAccounts'],
+  }
+
+  const submitStep = useCallback(async (stepIndex: number): Promise<boolean> => {
+    setIsSubmitting(true)
+    setSubmissionError(null)
+
+    // Trigger field-level validation so formState.errors populates (red borders)
+    const fieldsToValidate = stepFieldNames[stepIndex]
+    if (fieldsToValidate) {
+      const isValid = await form.trigger(fieldsToValidate as any)
+      if (!isValid) {
+        // Surface the first validation error so the user knows what's missing
+        const errors = form.formState.errors
+        const firstErrorMessage = extractFirstErrorMessage(errors)
+        if (firstErrorMessage) {
+          setSubmissionError(firstErrorMessage)
+        }
+        setIsSubmitting(false)
+        return false
+      }
+    }
+
+    try {
+      const submitter = stepSubmitters[stepIndex]
+      if (!submitter) return true
+      return await submitter()
+    } catch (error) {
+      const message = error instanceof Error ? error.message : 'Failed to save. Please try again.'
+      setSubmissionError(message)
+      return false
+    } finally {
+      setIsSubmitting(false)
+    }
+  }, [stepSubmitters, form])
+
+  return { submitStep, isSubmitting, submissionError }
+}
diff --git a/frontend/src/components/modals/OnboardingWizardModal/types.ts b/frontend/src/components/modals/OnboardingWizardModal/types.ts
new file mode 100644
index 000000000..c673df989
--- /dev/null
+++ b/frontend/src/components/modals/OnboardingWizardModal/types.ts
@@ -0,0 +1,191 @@
+import { z } from 'zod'
+import type { Gender } from '@/types/person'
+import type { ResidencyStatus } from '@/types/cpf'
+
+// ─── Step status tracking ─────────────────────────────────────────────────────
+
+export type StepStatus = 'pending' | 'active' | 'completed' | 'skipped'
+
+export const ONBOARDING_STEPS = [
+  { key: 'personal', label: 'Personal Info' },
+  { key: 'income', label: 'Income & Expenses' },
+  { key: 'assets', label: 'Assets & Liabilities' },
+  { key: 'cpf', label: 'CPF Accounts' },
+] as const
+
+export type StepKey = (typeof ONBOARDING_STEPS)[number]['key']
+
+// ─── Person form entry ────────────────────────────────────────────────────────
+
+export const onboardingPersonSchema = z.object({
+  tempId: z.string(), // Client-side ID for tracking
+  serverId: z.string().nullable(), // API-assigned ID after creation
+  name: z.string().min(1, 'Name is required'),
+  dateOfBirth: z.string().min(1, 'Date of birth is required'),
+  gender: z.enum(['male', 'female']) as z.ZodType<Gender>,
+  residencyStatus: z.enum(['citizen', 'pr']) as z.ZodType<ResidencyStatus>,
+  prGrantDate: z.string().nullable(),
+  relationship: z.string().min(1, 'Relationship is required'),
+  customRelationship: z.string(),
+  retirementAge: z.number().min(50).max(100),
+  displayColor: z.string(),
+})
+
+export type OnboardingPerson = z.infer<typeof onboardingPersonSchema>
+
+// ─── Income form entry ────────────────────────────────────────────────────────
+
+export const onboardingIncomeSchema = z.object({
+  tempId: z.string(),
+  serverId: z.string().nullable(),
+  personTempId: z.string(), // Links to person.tempId
+  name: z.string().min(1, 'Name is required'),
+  amount: z.number().min(0, 'Amount must be positive'),
+  frequency: z.enum(['weekly', 'biweekly', 'monthly', 'quarterly', 'annual']),
+  category: z.enum(['salary', 'bonus', 'rental', 'freelance', 'dividend', 'other']),
+  cpfWageType: z.enum(['ow', 'aw']).nullable(),
+  growthRate: z.number(),
+})
+
+export type OnboardingIncome = z.infer<typeof onboardingIncomeSchema>
+
+// ─── Expense form entry ───────────────────────────────────────────────────────
+
+export const onboardingExpenseSchema = z.object({
+  tempId: z.string(),
+  serverId: z.string().nullable(),
+  name: z.string().min(1, 'Name is required'),
+  amount: z.number().min(0, 'Amount must be positive'),
+  frequency: z.enum(['weekly', 'biweekly', 'monthly', 'quarterly', 'annual']),
+  category: z.enum(['housing', 'transport', 'food', 'utilities', 'insurance', 'living', 'other']),
+  growthRate: z.number(),
+})
+
+export type OnboardingExpense = z.infer<typeof onboardingExpenseSchema>
+
+// ─── Asset form entry ─────────────────────────────────────────────────────────
+
+export const onboardingAssetSchema = z.object({
+  tempId: z.string(),
+  serverId: z.string().nullable(),
+  name: z.string().min(1, 'Name is required'),
+  category: z.enum(['cash_savings', 'stocks_etfs', 'bonds', 'property', 'vehicle', 'other']),
+  currentValue: z.number().min(0),
+  growthRate: z.number(),
+})
+
+export type OnboardingAsset = z.infer<typeof onboardingAssetSchema>
+
+// ─── Liability form entry ─────────────────────────────────────────────────────
+
+export const onboardingLiabilitySchema = z.object({
+  tempId: z.string(),
+  serverId: z.string().nullable(),
+  name: z.string().min(1, 'Name is required'),
+  category: z.enum(['mortgage', 'car_loan', 'student_loan', 'credit_card', 'personal_loan', 'other']),
+  currentBalance: z.number().min(0),
+  interestRateApr: z.number().min(0),
+  minimumPayment: z.number().min(0),
+})
+
+export type OnboardingLiability = z.infer<typeof onboardingLiabilitySchema>
+
+// ─── CPF form entry ───────────────────────────────────────────────────────────
+
+export const onboardingCpfSchema = z.object({
+  tempId: z.string(),
+  serverId: z.string().nullable(),
+  personTempId: z.string(), // Links to person.tempId
+  oaBalance: z.number().min(0),
+  saBalance: z.number().min(0),
+  maBalance: z.number().min(0),
+  raBalance: z.number().min(0),
+})
+
+export type OnboardingCpf = z.infer<typeof onboardingCpfSchema>
+
+// ─── Full onboarding form data ────────────────────────────────────────────────
+
+export const onboardingFormSchema = z.object({
+  // Step 1
+  persons: z.array(onboardingPersonSchema).min(1, 'At least one person is required'),
+  projectionYears: z.number().min(1).max(80),
+
+  // Step 2
+  incomes: z.array(onboardingIncomeSchema),
+  expenses: z.array(onboardingExpenseSchema),
+
+  // Step 3
+  assets: z.array(onboardingAssetSchema),
+  liabilities: z.array(onboardingLiabilitySchema),
+
+  // Step 4
+  cpfAccounts: z.array(onboardingCpfSchema),
+})
+
+export type OnboardingFormData = z.infer<typeof onboardingFormSchema>
+
+// ─── Category label maps ──────────────────────────────────────────────────────
+
+export const INCOME_CATEGORY_LABELS: Record<string, string> = {
+  salary: 'Salary',
+  bonus: 'Bonus',
+  rental: 'Rental Income',
+  freelance: 'Freelance',
+  dividend: 'Dividend',
+  other: 'Other',
+}
+
+export const EXPENSE_CATEGORY_LABELS: Record<string, string> = {
+  housing: 'Housing',
+  transport: 'Transport',
+  food: 'Food & Dining',
+  utilities: 'Utilities',
+  insurance: 'Insurance',
+  living: 'Living Expenses',
+  other: 'Other',
+}
+
+export const ASSET_CATEGORY_LABELS: Record<string, string> = {
+  cash_savings: 'Cash & Savings',
+  stocks_etfs: 'Stocks & ETFs',
+  bonds: 'Bonds',
+  property: 'Property',
+  vehicle: 'Vehicle',
+  other: 'Other',
+}
+
+export const LIABILITY_CATEGORY_LABELS: Record<string, string> = {
+  mortgage: 'Mortgage',
+  car_loan: 'Car Loan',
+  student_loan: 'Student Loan',
+  credit_card: 'Credit Card',
+  personal_loan: 'Personal Loan',
+  other: 'Other',
+}
+
+export const RELATIONSHIP_LABELS: Record<string, string> = {
+  self: 'Self',
+  spouse: 'Spouse',
+  child: 'Child',
+  parent: 'Parent',
+  sibling: 'Sibling',
+  other: 'Other',
+}
+
+/** Dropdown options for non-self persons */
+export const RELATIONSHIP_OPTIONS = [
+  { value: 'spouse', label: 'Spouse' },
+  { value: 'child', label: 'Child' },
+  { value: 'parent', label: 'Parent' },
+  { value: 'sibling', label: 'Sibling' },
+  { value: 'other', label: 'Other' },
+] as const
+
+export const FREQUENCY_LABELS: Record<string, string> = {
+  weekly: 'Weekly',
+  biweekly: 'Fortnightly',
+  monthly: 'Monthly',
+  quarterly: 'Quarterly',
+  annual: 'Annually',
+}
diff --git a/frontend/src/components/modals/PersonsModal/PersonsModal.tsx b/frontend/src/components/modals/PersonsModal/PersonsModal.tsx
index 9c1701bdc..c1b15f735 100644
--- a/frontend/src/components/modals/PersonsModal/PersonsModal.tsx
+++ b/frontend/src/components/modals/PersonsModal/PersonsModal.tsx
@@ -2,7 +2,9 @@
 
 import { useState, useEffect, useCallback, useMemo } from 'react'
 import { Users, Plus, Trash2, Pencil, X, Check, Briefcase, Save, Calendar, Flag } from 'lucide-react'
+import { clsx } from 'clsx'
 import { Modal } from '@/components/ui/Modal'
+import { useColorScheme } from '@/stores'
 import { usePersonFilter } from '@/contexts/PersonFilterContext'
 import {
   useCreatePersonMutation,
@@ -41,6 +43,8 @@ interface PendingChanges {
 }
 
 export function PersonsModal({ isOpen, onClose }: PersonsModalProps) {
+  const colorScheme = useColorScheme()
+  const isMonet = colorScheme === 'monet'
   const { persons, isLoading } = usePersonFilter()
   const [editingId, setEditingId] = useState<string | null>(null)
   const [editName, setEditName] = useState('')
@@ -308,16 +312,27 @@ export function PersonsModal({ isOpen, onClose }: PersonsModalProps) {
     <Modal
       isOpen={isOpen}
       onClose={isPending ? undefined : handleClose}
-      overlayClassName="bg-black/60"
-      className="flex flex-col overflow-hidden w-full max-w-md mx-4 rounded-xl border border-white/[0.08] bg-[#0a0a0a] shadow-2xl"
+      overlayClassName={isMonet ? 'bg-black/30 backdrop-blur-sm' : 'bg-black/60'}
+      className={clsx(
+        'flex flex-col overflow-hidden w-full max-w-md mx-4 rounded-xl border shadow-2xl',
+        isMonet
+          ? 'border-[var(--monet-lavender)]/20 bg-white/95 backdrop-blur-xl'
+          : 'border-white/[0.08] bg-[#0a0a0a]'
+      )}
     >
       {/* Header */}
-      <div className="flex items-center justify-between px-5 py-4 border-b border-white/[0.06]">
+      <div className={clsx(
+        'flex items-center justify-between px-5 py-4 border-b',
+        isMonet ? 'border-[var(--monet-lavender)]/10' : 'border-white/[0.06]'
+      )}>
         <div className="flex items-center gap-2">
-          <Users className="h-5 w-5 text-slate-400" />
-          <h2 className="text-lg font-semibold text-slate-200">Manage Persons</h2>
+          <Users className={clsx('h-5 w-5', isMonet ? 'text-[var(--monet-text-muted)]' : 'text-slate-400')} />
+          <h2 className={clsx('text-lg font-semibold', isMonet ? 'text-[var(--monet-text-primary)]' : 'text-slate-200')}>Manage Persons</h2>
           {hasUnsavedChanges && (
-            <span className="px-1.5 py-0.5 rounded text-[10px] font-medium bg-amber-500/20 text-amber-400">
+            <span className={clsx(
+              'px-1.5 py-0.5 rounded text-[10px] font-medium',
+              isMonet ? 'bg-amber-500/15 text-amber-600' : 'bg-amber-500/20 text-amber-400'
+            )}>
               Unsaved
             </span>
           )}
@@ -326,15 +341,23 @@ export function PersonsModal({ isOpen, onClose }: PersonsModalProps) {
           type="button"
           onClick={handleClose}
           disabled={isPending}
-          className="p-1.5 rounded-md text-slate-400 hover:text-slate-200 hover:bg-white/[0.06] transition-colors disabled:opacity-50"
+          className={clsx(
+            'p-1.5 rounded-md transition-colors disabled:opacity-50',
+            isMonet
+              ? 'text-[var(--monet-text-muted)] hover:text-[var(--monet-text-primary)] hover:bg-[var(--monet-lavender)]/10'
+              : 'text-slate-400 hover:text-slate-200 hover:bg-white/[0.06]'
+          )}
         >
           <X className="h-4 w-4" />
         </button>
       </div>
 
       {/* Description */}
-      <div className="px-5 py-3 border-b border-white/[0.06] bg-white/[0.02]">
-        <p className="text-xs text-slate-500">
+      <div className={clsx(
+        'px-5 py-3 border-b',
+        isMonet ? 'border-[var(--monet-lavender)]/10 bg-[var(--monet-lavender)]/5' : 'border-white/[0.06] bg-white/[0.02]'
+      )}>
+        <p className={clsx('text-xs', isMonet ? 'text-[var(--monet-text-muted)]' : 'text-slate-500')}>
           Toggle persons to include/exclude their financial data from calculations.
           Excluded persons won&apos;t appear in dropdowns.
         </p>
@@ -343,15 +366,18 @@ export function PersonsModal({ isOpen, onClose }: PersonsModalProps) {
       {/* Content */}
       <div className="flex-1 overflow-y-auto p-4 max-h-[400px]">
         {isLoading ? (
-          <div className="text-center py-8 text-slate-400">Loading...</div>
+          <div className={clsx('text-center py-8', isMonet ? 'text-[var(--monet-text-muted)]' : 'text-slate-400')}>Loading...</div>
         ) : persons.length === 0 && !isAdding ? (
           <div className="text-center py-8">
-            <Users className="h-12 w-12 text-slate-700 mx-auto mb-3" />
-            <p className="text-slate-500 text-sm mb-4">No persons created yet</p>
+            <Users className={clsx('h-12 w-12 mx-auto mb-3', isMonet ? 'text-[var(--monet-lavender)]/30' : 'text-slate-700')} />
+            <p className={clsx('text-sm mb-4', isMonet ? 'text-[var(--monet-text-muted)]' : 'text-slate-500')}>No persons created yet</p>
             <button
               type="button"
               onClick={handleStartAdd}
-              className="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-lg bg-blue-600 hover:bg-blue-700 text-sm text-white transition-colors"
+              className={clsx(
+                'inline-flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-sm text-white transition-colors',
+                isMonet ? 'bg-[var(--monet-purple)] hover:bg-[var(--monet-purple)]/90' : 'bg-blue-600 hover:bg-blue-700'
+              )}
             >
               <Plus className="h-3.5 w-3.5" />
               Add Person
@@ -368,24 +394,31 @@ export function PersonsModal({ isOpen, onClose }: PersonsModalProps) {
               return (
                 <div
                   key={person.id}
-                  className={`flex items-center gap-3 p-3 rounded-lg border transition-all ${
+                  className={clsx(
+                    'flex items-center gap-3 p-3 rounded-lg border transition-all',
                     effectiveIncluded
-                      ? 'border-white/[0.08] bg-white/[0.02]'
-                      : 'border-white/[0.04] bg-transparent opacity-60'
-                  } ${hasPendingChanges ? 'ring-1 ring-amber-500/30' : ''}`}
+                      ? (isMonet ? 'border-[var(--monet-lavender)]/15 bg-[var(--monet-lavender)]/5' : 'border-white/[0.08] bg-white/[0.02]')
+                      : (isMonet ? 'border-[var(--monet-lavender)]/10 bg-transparent opacity-60' : 'border-white/[0.04] bg-transparent opacity-60'),
+                    hasPendingChanges && (isMonet ? 'ring-1 ring-amber-500/40' : 'ring-1 ring-amber-500/30')
+                  )}
                 >
                   {editingId === person.id ? (
                     // Edit mode - expanded form
                     <div className="flex-1 space-y-3">
                       {/* Row 1: Color and Name */}
                       <div className="flex items-center gap-3">
-                        <ColorPicker value={editColor} onChange={setEditColor} />
+                        <ColorPicker value={editColor} onChange={setEditColor} isMonet={isMonet} />
                         <input
                           type="text"
                           value={editName}
                           onChange={(e) => setEditName(e.target.value)}
                           placeholder="Name"
-                          className="flex-1 bg-white/[0.05] border border-white/[0.1] rounded-md px-2.5 py-1.5 text-sm text-white focus:outline-none focus:border-blue-500"
+                          className={clsx(
+                            'flex-1 rounded-md px-2.5 py-1.5 text-sm focus:outline-none',
+                            isMonet
+                              ? 'bg-white border border-[var(--monet-lavender)]/20 text-[var(--monet-text-primary)] focus:border-[var(--monet-purple)]'
+                              : 'bg-white/[0.05] border border-white/[0.1] text-white focus:border-blue-500'
+                          )}
                           autoFocus
                         />
                       </div>
@@ -393,42 +426,57 @@ export function PersonsModal({ isOpen, onClose }: PersonsModalProps) {
                       {/* Row 2: Date of Birth, Gender, Residency Status */}
                       <div className="grid grid-cols-3 gap-3">
                         <div>
-                          <label className="block text-xs text-slate-500 mb-1">Date of Birth</label>
+                          <label className={clsx('block text-xs mb-1', isMonet ? 'text-[var(--monet-text-muted)]' : 'text-slate-500')}>Date of Birth</label>
                           <div className="relative">
-                            <Calendar className="absolute left-2.5 top-1/2 -translate-y-1/2 h-3.5 w-3.5 text-slate-500" />
+                            <Calendar className={clsx('absolute left-2.5 top-1/2 -translate-y-1/2 h-3.5 w-3.5', isMonet ? 'text-[var(--monet-text-muted)]' : 'text-slate-500')} />
                             <input
                               type="date"
                               value={editDateOfBirth}
                               onChange={(e) => setEditDateOfBirth(e.target.value)}
-                              className="w-full bg-white/[0.05] border border-white/[0.1] rounded-md pl-8 pr-2.5 py-1.5 text-sm text-white focus:outline-none focus:border-blue-500"
+                              className={clsx(
+                                'w-full rounded-md pl-8 pr-2.5 py-1.5 text-sm focus:outline-none',
+                                isMonet
+                                  ? 'bg-white border border-[var(--monet-lavender)]/20 text-[var(--monet-text-primary)] focus:border-[var(--monet-purple)]'
+                                  : 'bg-white/[0.05] border border-white/[0.1] text-white focus:border-blue-500'
+                              )}
                             />
                           </div>
                         </div>
                         <div>
-                          <label className="block text-xs text-slate-500 mb-1">Gender</label>
+                          <label className={clsx('block text-xs mb-1', isMonet ? 'text-[var(--monet-text-muted)]' : 'text-slate-500')}>Gender</label>
                           <select
                             value={editGender}
                             onChange={(e) => setEditGender(e.target.value as Gender)}
-                            className="w-full bg-white/[0.05] border border-white/[0.1] rounded-md px-2.5 py-1.5 text-sm text-white focus:outline-none focus:border-blue-500 appearance-none cursor-pointer"
+                            className={clsx(
+                              'w-full rounded-md px-2.5 py-1.5 text-sm focus:outline-none appearance-none cursor-pointer',
+                              isMonet
+                                ? 'bg-white border border-[var(--monet-lavender)]/20 text-[var(--monet-text-primary)] focus:border-[var(--monet-purple)]'
+                                : 'bg-white/[0.05] border border-white/[0.1] text-white focus:border-blue-500'
+                            )}
                           >
                             {genderOptions.map(option => (
-                              <option key={option.value} value={option.value} className="bg-[#1a1a1a]">
+                              <option key={option.value} value={option.value} className={isMonet ? 'bg-white' : 'bg-[#1a1a1a]'}>
                                 {option.label}
                               </option>
                             ))}
                           </select>
                         </div>
                         <div>
-                          <label className="block text-xs text-slate-500 mb-1">Residency</label>
+                          <label className={clsx('block text-xs mb-1', isMonet ? 'text-[var(--monet-text-muted)]' : 'text-slate-500')}>Residency</label>
                           <div className="relative">
-                            <Flag className="absolute left-2.5 top-1/2 -translate-y-1/2 h-3.5 w-3.5 text-slate-500" />
+                            <Flag className={clsx('absolute left-2.5 top-1/2 -translate-y-1/2 h-3.5 w-3.5', isMonet ? 'text-[var(--monet-text-muted)]' : 'text-slate-500')} />
                             <select
                               value={editResidencyStatus}
                               onChange={(e) => setEditResidencyStatus(e.target.value as ResidencyStatus)}
-                              className="w-full bg-white/[0.05] border border-white/[0.1] rounded-md pl-8 pr-2.5 py-1.5 text-sm text-white focus:outline-none focus:border-blue-500 appearance-none cursor-pointer"
+                              className={clsx(
+                                'w-full rounded-md pl-8 pr-2.5 py-1.5 text-sm focus:outline-none appearance-none cursor-pointer',
+                                isMonet
+                                  ? 'bg-white border border-[var(--monet-lavender)]/20 text-[var(--monet-text-primary)] focus:border-[var(--monet-purple)]'
+                                  : 'bg-white/[0.05] border border-white/[0.1] text-white focus:border-blue-500'
+                              )}
                             >
                               {residencyStatusOptions.map(option => (
-                                <option key={option.value} value={option.value} className="bg-[#1a1a1a]">
+                                <option key={option.value} value={option.value} className={isMonet ? 'bg-white' : 'bg-[#1a1a1a]'}>
                                   {option.label}
                                 </option>
                               ))}
@@ -440,14 +488,19 @@ export function PersonsModal({ isOpen, onClose }: PersonsModalProps) {
                       {/* Row 3: PR Grant Date (conditional) */}
                       {editResidencyStatus !== 'citizen' && (
                         <div>
-                          <label className="block text-xs text-slate-500 mb-1">PR Grant Date</label>
+                          <label className={clsx('block text-xs mb-1', isMonet ? 'text-[var(--monet-text-muted)]' : 'text-slate-500')}>PR Grant Date</label>
                           <div className="relative">
-                            <Calendar className="absolute left-2.5 top-1/2 -translate-y-1/2 h-3.5 w-3.5 text-slate-500" />
+                            <Calendar className={clsx('absolute left-2.5 top-1/2 -translate-y-1/2 h-3.5 w-3.5', isMonet ? 'text-[var(--monet-text-muted)]' : 'text-slate-500')} />
                             <input
                               type="date"
                               value={editPrGrantDate}
                               onChange={(e) => setEditPrGrantDate(e.target.value)}
-                              className="w-full bg-white/[0.05] border border-white/[0.1] rounded-md pl-8 pr-2.5 py-1.5 text-sm text-white focus:outline-none focus:border-blue-500"
+                              className={clsx(
+                                'w-full rounded-md pl-8 pr-2.5 py-1.5 text-sm focus:outline-none',
+                                isMonet
+                                  ? 'bg-white border border-[var(--monet-lavender)]/20 text-[var(--monet-text-primary)] focus:border-[var(--monet-purple)]'
+                                  : 'bg-white/[0.05] border border-white/[0.1] text-white focus:border-blue-500'
+                              )}
                             />
                           </div>
                         </div>
@@ -458,7 +511,12 @@ export function PersonsModal({ isOpen, onClose }: PersonsModalProps) {
                         <button
                           type="button"
                           onClick={handleCancelEdit}
-                          className="px-3 py-1.5 rounded-md text-sm text-slate-400 hover:text-slate-200 hover:bg-white/[0.06] transition-colors"
+                          className={clsx(
+                            'px-3 py-1.5 rounded-md text-sm transition-colors',
+                            isMonet
+                              ? 'text-[var(--monet-text-muted)] hover:text-[var(--monet-text-primary)] hover:bg-[var(--monet-lavender)]/10'
+                              : 'text-slate-400 hover:text-slate-200 hover:bg-white/[0.06]'
+                          )}
                         >
                           Cancel
                         </button>
@@ -466,7 +524,12 @@ export function PersonsModal({ isOpen, onClose }: PersonsModalProps) {
                           type="button"
                           onClick={handleConfirmEdit}
                           disabled={!editName.trim() || !editDateOfBirth}
-                          className="px-3 py-1.5 rounded-md text-sm text-emerald-400 bg-emerald-500/10 hover:bg-emerald-500/20 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+                          className={clsx(
+                            'px-3 py-1.5 rounded-md text-sm transition-colors disabled:opacity-50 disabled:cursor-not-allowed',
+                            isMonet
+                              ? 'text-emerald-600 bg-emerald-500/10 hover:bg-emerald-500/20'
+                              : 'text-emerald-400 bg-emerald-500/10 hover:bg-emerald-500/20'
+                          )}
                         >
                           Apply
                         </button>
@@ -479,11 +542,12 @@ export function PersonsModal({ isOpen, onClose }: PersonsModalProps) {
                       <button
                         type="button"
                         onClick={() => handleToggle(person)}
-                        className={`flex-shrink-0 w-5 h-5 rounded border-2 flex items-center justify-center transition-colors ${
+                        className={clsx(
+                          'flex-shrink-0 w-5 h-5 rounded border-2 flex items-center justify-center transition-colors',
                           effectiveIncluded
-                            ? 'bg-blue-600 border-blue-600'
-                            : 'border-slate-600 hover:border-slate-500'
-                        }`}
+                            ? (isMonet ? 'bg-[var(--monet-purple)] border-[var(--monet-purple)]' : 'bg-blue-600 border-blue-600')
+                            : (isMonet ? 'border-[var(--monet-lavender)]/40 hover:border-[var(--monet-lavender)]/60' : 'border-slate-600 hover:border-slate-500')
+                        )}
                       >
                         {effectiveIncluded && <Check className="h-3 w-3 text-white" />}
                       </button>
@@ -496,9 +560,9 @@ export function PersonsModal({ isOpen, onClose }: PersonsModalProps) {
 
                       {/* Name and stats */}
                       <div className="flex-1 min-w-0">
-                        <div className="text-sm font-medium text-white truncate">{effectivePerson.name}</div>
+                        <div className={clsx('text-sm font-medium truncate', isMonet ? 'text-[var(--monet-text-primary)]' : 'text-white')}>{effectivePerson.name}</div>
                         {(person.incomeCount ?? 0) > 0 && (
-                          <div className="flex items-center gap-1 text-xs text-slate-500">
+                          <div className={clsx('flex items-center gap-1 text-xs', isMonet ? 'text-[var(--monet-text-muted)]' : 'text-slate-500')}>
                             <Briefcase className="h-3 w-3" />
                             {person.incomeCount} income{person.incomeCount === 1 ? '' : 's'}
                           </div>
@@ -509,7 +573,12 @@ export function PersonsModal({ isOpen, onClose }: PersonsModalProps) {
                       <button
                         type="button"
                         onClick={() => handleStartEdit(person)}
-                        className="p-1.5 rounded-md text-slate-400 hover:text-slate-200 hover:bg-white/[0.06] transition-colors"
+                        className={clsx(
+                          'p-1.5 rounded-md transition-colors',
+                          isMonet
+                            ? 'text-[var(--monet-text-muted)] hover:text-[var(--monet-text-primary)] hover:bg-[var(--monet-lavender)]/10'
+                            : 'text-slate-400 hover:text-slate-200 hover:bg-white/[0.06]'
+                        )}
                       >
                         <Pencil className="h-3.5 w-3.5" />
                       </button>
@@ -517,7 +586,12 @@ export function PersonsModal({ isOpen, onClose }: PersonsModalProps) {
                         type="button"
                         onClick={() => handleDelete(person)}
                         disabled={deleteMutation.isPending}
-                        className="p-1.5 rounded-md text-slate-400 hover:text-red-400 hover:bg-red-500/10 transition-colors disabled:opacity-50"
+                        className={clsx(
+                          'p-1.5 rounded-md transition-colors disabled:opacity-50',
+                          isMonet
+                            ? 'text-[var(--monet-text-muted)] hover:text-red-600 hover:bg-red-500/10'
+                            : 'text-slate-400 hover:text-red-400 hover:bg-red-500/10'
+                        )}
                       >
                         <Trash2 className="h-3.5 w-3.5" />
                       </button>
@@ -529,16 +603,24 @@ export function PersonsModal({ isOpen, onClose }: PersonsModalProps) {
 
             {/* Add new person form */}
             {isAdding && (
-              <div className="p-3 rounded-lg border border-blue-500/30 bg-blue-500/5 space-y-3">
+              <div className={clsx(
+                'p-3 rounded-lg border space-y-3',
+                isMonet ? 'border-[var(--monet-purple)]/30 bg-[var(--monet-purple)]/5' : 'border-blue-500/30 bg-blue-500/5'
+              )}>
                 {/* Row 1: Color and Name */}
                 <div className="flex items-center gap-3">
-                  <ColorPicker value={newColor} onChange={setNewColor} />
+                  <ColorPicker value={newColor} onChange={setNewColor} isMonet={isMonet} />
                   <input
                     type="text"
                     value={newName}
                     onChange={(e) => setNewName(e.target.value)}
                     placeholder="Person name"
-                    className="flex-1 bg-white/[0.05] border border-white/[0.1] rounded-md px-2.5 py-1.5 text-sm text-white placeholder:text-slate-500 focus:outline-none focus:border-blue-500"
+                    className={clsx(
+                      'flex-1 rounded-md px-2.5 py-1.5 text-sm focus:outline-none',
+                      isMonet
+                        ? 'bg-white border border-[var(--monet-lavender)]/20 text-[var(--monet-text-primary)] placeholder:text-[var(--monet-text-muted)] focus:border-[var(--monet-purple)]'
+                        : 'bg-white/[0.05] border border-white/[0.1] text-white placeholder:text-slate-500 focus:border-blue-500'
+                    )}
                     autoFocus
                   />
                 </div>
@@ -546,42 +628,57 @@ export function PersonsModal({ isOpen, onClose }: PersonsModalProps) {
                 {/* Row 2: Date of Birth, Gender, Residency Status */}
                 <div className="grid grid-cols-3 gap-3">
                   <div>
-                    <label className="block text-xs text-slate-500 mb-1">Date of Birth *</label>
+                    <label className={clsx('block text-xs mb-1', isMonet ? 'text-[var(--monet-text-muted)]' : 'text-slate-500')}>Date of Birth *</label>
                     <div className="relative">
-                      <Calendar className="absolute left-2.5 top-1/2 -translate-y-1/2 h-3.5 w-3.5 text-slate-500" />
+                      <Calendar className={clsx('absolute left-2.5 top-1/2 -translate-y-1/2 h-3.5 w-3.5', isMonet ? 'text-[var(--monet-text-muted)]' : 'text-slate-500')} />
                       <input
                         type="date"
                         value={newDateOfBirth}
                         onChange={(e) => setNewDateOfBirth(e.target.value)}
-                        className="w-full bg-white/[0.05] border border-white/[0.1] rounded-md pl-8 pr-2.5 py-1.5 text-sm text-white focus:outline-none focus:border-blue-500"
+                        className={clsx(
+                          'w-full rounded-md pl-8 pr-2.5 py-1.5 text-sm focus:outline-none',
+                          isMonet
+                            ? 'bg-white border border-[var(--monet-lavender)]/20 text-[var(--monet-text-primary)] focus:border-[var(--monet-purple)]'
+                            : 'bg-white/[0.05] border border-white/[0.1] text-white focus:border-blue-500'
+                        )}
                       />
                     </div>
                   </div>
                   <div>
-                    <label className="block text-xs text-slate-500 mb-1">Gender *</label>
+                    <label className={clsx('block text-xs mb-1', isMonet ? 'text-[var(--monet-text-muted)]' : 'text-slate-500')}>Gender *</label>
                     <select
                       value={newGender}
                       onChange={(e) => setNewGender(e.target.value as Gender)}
-                      className="w-full bg-white/[0.05] border border-white/[0.1] rounded-md px-2.5 py-1.5 text-sm text-white focus:outline-none focus:border-blue-500 appearance-none cursor-pointer"
+                      className={clsx(
+                        'w-full rounded-md px-2.5 py-1.5 text-sm focus:outline-none appearance-none cursor-pointer',
+                        isMonet
+                          ? 'bg-white border border-[var(--monet-lavender)]/20 text-[var(--monet-text-primary)] focus:border-[var(--monet-purple)]'
+                          : 'bg-white/[0.05] border border-white/[0.1] text-white focus:border-blue-500'
+                      )}
                     >
                       {genderOptions.map(option => (
-                        <option key={option.value} value={option.value} className="bg-[#1a1a1a]">
+                        <option key={option.value} value={option.value} className={isMonet ? 'bg-white' : 'bg-[#1a1a1a]'}>
                           {option.label}
                         </option>
                       ))}
                     </select>
                   </div>
                   <div>
-                    <label className="block text-xs text-slate-500 mb-1">Residency</label>
+                    <label className={clsx('block text-xs mb-1', isMonet ? 'text-[var(--monet-text-muted)]' : 'text-slate-500')}>Residency</label>
                     <div className="relative">
-                      <Flag className="absolute left-2.5 top-1/2 -translate-y-1/2 h-3.5 w-3.5 text-slate-500" />
+                      <Flag className={clsx('absolute left-2.5 top-1/2 -translate-y-1/2 h-3.5 w-3.5', isMonet ? 'text-[var(--monet-text-muted)]' : 'text-slate-500')} />
                       <select
                         value={newResidencyStatus}
                         onChange={(e) => setNewResidencyStatus(e.target.value as ResidencyStatus)}
-                        className="w-full bg-white/[0.05] border border-white/[0.1] rounded-md pl-8 pr-2.5 py-1.5 text-sm text-white focus:outline-none focus:border-blue-500 appearance-none cursor-pointer"
+                        className={clsx(
+                          'w-full rounded-md pl-8 pr-2.5 py-1.5 text-sm focus:outline-none appearance-none cursor-pointer',
+                          isMonet
+                            ? 'bg-white border border-[var(--monet-lavender)]/20 text-[var(--monet-text-primary)] focus:border-[var(--monet-purple)]'
+                            : 'bg-white/[0.05] border border-white/[0.1] text-white focus:border-blue-500'
+                        )}
                       >
                         {residencyStatusOptions.map(option => (
-                          <option key={option.value} value={option.value} className="bg-[#1a1a1a]">
+                          <option key={option.value} value={option.value} className={isMonet ? 'bg-white' : 'bg-[#1a1a1a]'}>
                             {option.label}
                           </option>
                         ))}
@@ -593,14 +690,19 @@ export function PersonsModal({ isOpen, onClose }: PersonsModalProps) {
                 {/* Row 3: PR Grant Date (conditional) */}
                 {newResidencyStatus !== 'citizen' && (
                   <div>
-                    <label className="block text-xs text-slate-500 mb-1">PR Grant Date</label>
+                    <label className={clsx('block text-xs mb-1', isMonet ? 'text-[var(--monet-text-muted)]' : 'text-slate-500')}>PR Grant Date</label>
                     <div className="relative">
-                      <Calendar className="absolute left-2.5 top-1/2 -translate-y-1/2 h-3.5 w-3.5 text-slate-500" />
+                      <Calendar className={clsx('absolute left-2.5 top-1/2 -translate-y-1/2 h-3.5 w-3.5', isMonet ? 'text-[var(--monet-text-muted)]' : 'text-slate-500')} />
                       <input
                         type="date"
                         value={newPrGrantDate}
                         onChange={(e) => setNewPrGrantDate(e.target.value)}
-                        className="w-full bg-white/[0.05] border border-white/[0.1] rounded-md pl-8 pr-2.5 py-1.5 text-sm text-white focus:outline-none focus:border-blue-500"
+                        className={clsx(
+                          'w-full rounded-md pl-8 pr-2.5 py-1.5 text-sm focus:outline-none',
+                          isMonet
+                            ? 'bg-white border border-[var(--monet-lavender)]/20 text-[var(--monet-text-primary)] focus:border-[var(--monet-purple)]'
+                            : 'bg-white/[0.05] border border-white/[0.1] text-white focus:border-blue-500'
+                        )}
                       />
                     </div>
                   </div>
@@ -611,7 +713,12 @@ export function PersonsModal({ isOpen, onClose }: PersonsModalProps) {
                   <button
                     type="button"
                     onClick={handleCancelAdd}
-                    className="px-3 py-1.5 rounded-md text-sm text-slate-400 hover:text-slate-200 hover:bg-white/[0.06] transition-colors"
+                    className={clsx(
+                      'px-3 py-1.5 rounded-md text-sm transition-colors',
+                      isMonet
+                        ? 'text-[var(--monet-text-muted)] hover:text-[var(--monet-text-primary)] hover:bg-[var(--monet-lavender)]/10'
+                        : 'text-slate-400 hover:text-slate-200 hover:bg-white/[0.06]'
+                    )}
                   >
                     Cancel
                   </button>
@@ -619,7 +726,10 @@ export function PersonsModal({ isOpen, onClose }: PersonsModalProps) {
                     type="button"
                     onClick={handleConfirmAdd}
                     disabled={createMutation.isPending || !newName.trim() || !newDateOfBirth}
-                    className="px-3 py-1.5 rounded-md text-sm text-white bg-blue-600 hover:bg-blue-700 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+                    className={clsx(
+                      'px-3 py-1.5 rounded-md text-sm text-white transition-colors disabled:opacity-50 disabled:cursor-not-allowed',
+                      isMonet ? 'bg-[var(--monet-purple)] hover:bg-[var(--monet-purple)]/90' : 'bg-blue-600 hover:bg-blue-700'
+                    )}
                   >
                     {createMutation.isPending ? 'Creating...' : 'Create Person'}
                   </button>
@@ -631,8 +741,11 @@ export function PersonsModal({ isOpen, onClose }: PersonsModalProps) {
       </div>
 
       {/* Footer */}
-      <div className="flex items-center justify-between px-5 py-3 border-t border-white/[0.06]">
-        <div className="text-xs text-slate-500">
+      <div className={clsx(
+        'flex items-center justify-between px-5 py-3 border-t',
+        isMonet ? 'border-[var(--monet-lavender)]/10' : 'border-white/[0.06]'
+      )}>
+        <div className={clsx('text-xs', isMonet ? 'text-[var(--monet-text-muted)]' : 'text-slate-500')}>
           {includedCount} of {persons.length} included
         </div>
         <div className="flex items-center gap-2">
@@ -642,7 +755,12 @@ export function PersonsModal({ isOpen, onClose }: PersonsModalProps) {
                 type="button"
                 onClick={handleDiscard}
                 disabled={isPending}
-                className="px-3 py-1.5 rounded-lg text-sm text-slate-400 hover:text-slate-200 hover:bg-white/[0.06] transition-colors disabled:opacity-50"
+                className={clsx(
+                  'px-3 py-1.5 rounded-lg text-sm transition-colors disabled:opacity-50',
+                  isMonet
+                    ? 'text-[var(--monet-text-muted)] hover:text-[var(--monet-text-primary)] hover:bg-[var(--monet-lavender)]/10'
+                    : 'text-slate-400 hover:text-slate-200 hover:bg-white/[0.06]'
+                )}
               >
                 Discard
               </button>
@@ -662,7 +780,12 @@ export function PersonsModal({ isOpen, onClose }: PersonsModalProps) {
                 type="button"
                 onClick={handleStartAdd}
                 disabled={isPending}
-                className="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-sm text-slate-300 hover:text-white hover:bg-white/[0.06] transition-colors disabled:opacity-50"
+                className={clsx(
+                  'inline-flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-sm transition-colors disabled:opacity-50',
+                  isMonet
+                    ? 'text-[var(--monet-text-secondary)] hover:text-[var(--monet-text-primary)] hover:bg-[var(--monet-lavender)]/10'
+                    : 'text-slate-300 hover:text-white hover:bg-white/[0.06]'
+                )}
               >
                 <Plus className="h-3.5 w-3.5" />
                 Add Person
@@ -678,9 +801,10 @@ export function PersonsModal({ isOpen, onClose }: PersonsModalProps) {
 interface ColorPickerProps {
   value: string
   onChange: (color: string) => void
+  isMonet?: boolean
 }
 
-function ColorPicker({ value, onChange }: ColorPickerProps) {
+function ColorPicker({ value, onChange, isMonet = false }: ColorPickerProps) {
   const [isOpen, setIsOpen] = useState(false)
 
   return (
@@ -688,11 +812,21 @@ function ColorPicker({ value, onChange }: ColorPickerProps) {
       <button
         type="button"
         onClick={() => setIsOpen(!isOpen)}
-        className="w-6 h-6 rounded-md border-2 border-white/10 hover:border-white/20 transition-colors"
+        className={clsx(
+          'w-6 h-6 rounded-md border-2 transition-colors',
+          isMonet
+            ? 'border-[var(--monet-lavender)]/20 hover:border-[var(--monet-lavender)]/40'
+            : 'border-white/10 hover:border-white/20'
+        )}
         style={{ backgroundColor: value || '#64748b' }}
       />
       {isOpen && (
-        <div className="absolute left-0 top-full mt-1 z-50 p-2 rounded-lg bg-[#1a1a1a] border border-white/[0.1] shadow-xl">
+        <div className={clsx(
+          'absolute left-0 top-full mt-1 z-50 p-2 rounded-lg border shadow-xl',
+          isMonet
+            ? 'bg-white border-[var(--monet-lavender)]/20'
+            : 'bg-[#1a1a1a] border-white/[0.1]'
+        )}>
           <div className="grid grid-cols-4 gap-1">
             {PERSON_COLORS.map((color) => (
               <button
@@ -702,9 +836,10 @@ function ColorPicker({ value, onChange }: ColorPickerProps) {
                   onChange(color)
                   setIsOpen(false)
                 }}
-                className={`w-6 h-6 rounded-md transition-transform hover:scale-110 ${
-                  value === color ? 'ring-2 ring-white ring-offset-2 ring-offset-[#1a1a1a]' : ''
-                }`}
+                className={clsx(
+                  'w-6 h-6 rounded-md transition-transform hover:scale-110',
+                  value === color && (isMonet ? 'ring-2 ring-[var(--monet-purple)] ring-offset-2 ring-offset-white' : 'ring-2 ring-white ring-offset-2 ring-offset-[#1a1a1a]')
+                )}
                 style={{ backgroundColor: color }}
               />
             ))}
diff --git a/frontend/src/components/modals/PostResetChoiceModal.tsx b/frontend/src/components/modals/PostResetChoiceModal.tsx
new file mode 100644
index 000000000..d142325f2
--- /dev/null
+++ b/frontend/src/components/modals/PostResetChoiceModal.tsx
@@ -0,0 +1,98 @@
+import { useEffect, useRef } from 'react'
+import { createPortal } from 'react-dom'
+import { AnimatePresence, motion } from 'framer-motion'
+import { LayoutDashboard, Sparkles } from 'lucide-react'
+import { cn } from '@/lib/utils'
+
+interface PostResetChoiceModalProps {
+  isOpen: boolean
+  onDashboard: () => void
+  onWizard: () => void
+}
+
+export function PostResetChoiceModal({ isOpen, onDashboard, onWizard }: PostResetChoiceModalProps) {
+  const overlayRef = useRef<HTMLDivElement>(null)
+
+  useEffect(() => {
+    if (!isOpen) return
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') onDashboard()
+    }
+    document.addEventListener('keydown', handleKeyDown)
+    return () => document.removeEventListener('keydown', handleKeyDown)
+  }, [isOpen, onDashboard])
+
+  if (typeof window === 'undefined') return null
+
+  return createPortal(
+    <AnimatePresence>
+      {isOpen && (
+        <motion.div
+          ref={overlayRef}
+          initial={{ opacity: 0 }}
+          animate={{ opacity: 1 }}
+          exit={{ opacity: 0 }}
+          transition={{ duration: 0.2 }}
+          className="fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-sm"
+          onClick={(e) => { if (e.target === overlayRef.current) onDashboard() }}
+        >
+          <motion.div
+            initial={{ opacity: 0, scale: 0.95, y: 10 }}
+            animate={{ opacity: 1, scale: 1, y: 0 }}
+            exit={{ opacity: 0, scale: 0.95, y: 10 }}
+            transition={{ duration: 0.2, ease: 'easeOut' }}
+            className="w-full max-w-lg mx-4"
+          >
+            <div className="rounded-2xl border border-white/[0.08] bg-[#060a12] p-8 shadow-2xl">
+              <h2 className="text-xl font-semibold text-white text-center mb-2">
+                Fresh start — what's next?
+              </h2>
+              <p className="text-sm text-slate-400 text-center mb-8">
+                Your data has been cleared. How would you like to proceed?
+              </p>
+
+              <div className="grid grid-cols-2 gap-4">
+                {/* Dashboard option */}
+                <button
+                  type="button"
+                  onClick={onDashboard}
+                  className={cn(
+                    'group flex flex-col items-center gap-3 rounded-xl border p-6 transition-all',
+                    'border-white/[0.06] bg-white/[0.02] hover:border-white/[0.12] hover:bg-white/[0.04]'
+                  )}
+                >
+                  <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-slate-500/15">
+                    <LayoutDashboard className="h-5 w-5 text-slate-400 group-hover:text-slate-300 transition-colors" />
+                  </div>
+                  <div className="text-center">
+                    <p className="text-sm font-medium text-white">Dashboard</p>
+                    <p className="text-xs text-slate-500 mt-0.5">Jump right in and add data manually</p>
+                  </div>
+                </button>
+
+                {/* Wizard option */}
+                <button
+                  type="button"
+                  onClick={onWizard}
+                  className={cn(
+                    'group flex flex-col items-center gap-3 rounded-xl border p-6 transition-all',
+                    'border-emerald-500/20 bg-emerald-500/5 hover:border-emerald-500/30 hover:bg-emerald-500/10'
+                  )}
+                >
+                  <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-emerald-500/15">
+                    <Sparkles className="h-5 w-5 text-emerald-400 group-hover:text-emerald-300 transition-colors" />
+                  </div>
+                  <div className="text-center">
+                    <p className="text-sm font-medium text-white">Quick Setup</p>
+                    <p className="text-xs text-slate-500 mt-0.5">Guided wizard to get started fast</p>
+                  </div>
+                </button>
+              </div>
+            </div>
+          </motion.div>
+        </motion.div>
+      )}
+    </AnimatePresence>,
+    document.body,
+  )
+}
diff --git a/frontend/src/components/modals/PropertyPlannerModal/PropertyPlannerModal.tsx b/frontend/src/components/modals/PropertyPlannerModal/PropertyPlannerModal.tsx
index 97c880534..464999d2d 100644
--- a/frontend/src/components/modals/PropertyPlannerModal/PropertyPlannerModal.tsx
+++ b/frontend/src/components/modals/PropertyPlannerModal/PropertyPlannerModal.tsx
@@ -6,6 +6,7 @@ import { PropertyPlannerView, type FooterState, type HeaderState } from './Prope
 import { Save, Loader2 } from 'lucide-react'
 import { cn } from '@/lib/utils'
 import { PropertyPlannerModalHeader } from './components/PropertyPlannerModalHeader'
+import { useColorScheme } from '@/stores'
 
 interface PropertyPlannerModalProps {
   isOpen: boolean
@@ -17,6 +18,8 @@ interface PropertyPlannerModalProps {
 }
 
 export function PropertyPlannerModal({ isOpen, onClose, initialScenarioId, onJumpToDate }: PropertyPlannerModalProps) {
+  const colorScheme = useColorScheme()
+  const isMonet = colorScheme === 'monet'
   const [footerState, setFooterState] = useState<FooterState | null>(null)
   const [headerState, setHeaderState] = useState<HeaderState | null>(null)
 
@@ -41,10 +44,15 @@ export function PropertyPlannerModal({ isOpen, onClose, initialScenarioId, onJum
     <Modal
       isOpen={isOpen}
       onClose={handleClose}
-      overlayClassName="bg-black/60 backdrop-blur-sm"
-      className="w-full max-w-[1200px] min-h-[50vh] max-h-[90vh] mx-4 sm:mx-6 rounded-2xl border border-white/[0.08] bg-[#0a0a0a] overflow-hidden flex flex-col"
+      overlayClassName={isMonet ? "bg-black/30 backdrop-blur-sm" : "bg-black/60 backdrop-blur-sm"}
+      className={cn(
+        "w-full max-w-[1200px] min-h-[50vh] max-h-[90vh] mx-4 sm:mx-6 rounded-2xl border overflow-hidden flex flex-col",
+        isMonet
+          ? "border-[var(--monet-lavender)]/20 bg-white"
+          : "border-white/[0.08] bg-[#0a0a0a]"
+      )}
     >
-      <PropertyPlannerModalHeader headerState={headerState} onClose={handleClose} />
+      <PropertyPlannerModalHeader headerState={headerState} onClose={handleClose} isMonet={isMonet} />
 
       {/* Modal Content */}
       <div className="flex-1 overflow-y-auto">
@@ -54,15 +62,24 @@ export function PropertyPlannerModal({ isOpen, onClose, initialScenarioId, onJum
           onFooterStateChange={handleFooterStateChange}
           onHeaderStateChange={handleHeaderStateChange}
           onJumpToDate={onJumpToDate}
+          isMonet={isMonet}
         />
       </div>
 
       {/* Modal Footer - only show when editing */}
       {footerState?.isEditing && (
-        <div className="flex-shrink-0 px-4 sm:px-6 py-3 sm:py-4 border-t border-white/[0.06] bg-[#0a0a0a]">
+        <div className={cn(
+          "flex-shrink-0 px-4 sm:px-6 py-3 sm:py-4 border-t",
+          isMonet
+            ? "border-[var(--monet-lavender)]/10 bg-white"
+            : "border-white/[0.06] bg-[#0a0a0a]"
+        )}>
           <div className="flex items-center justify-end">
             {footerState.isSaving ? (
-              <div className="flex items-center gap-2 px-4 py-2 text-slate-400">
+              <div className={cn(
+                "flex items-center gap-2 px-4 py-2",
+                isMonet ? "text-[var(--monet-text-muted)]" : "text-slate-400"
+              )}>
                 <Loader2 className="w-4 h-4 animate-spin" />
                 <span className="text-sm font-medium">Saving...</span>
               </div>
@@ -75,7 +92,9 @@ export function PropertyPlannerModal({ isOpen, onClose, initialScenarioId, onJum
                   "flex items-center gap-2 px-4 py-2 rounded-lg text-sm font-medium transition-all",
                   footerState.hasChanges
                     ? "bg-emerald-500/15 text-emerald-400 hover:bg-emerald-500/25 border border-emerald-500/25"
-                    : "bg-white/[0.03] text-slate-500 border border-white/[0.06] cursor-not-allowed"
+                    : isMonet
+                      ? "bg-[var(--monet-lavender)]/5 text-[var(--monet-text-muted)] border border-[var(--monet-lavender)]/10 cursor-not-allowed"
+                      : "bg-white/[0.03] text-slate-500 border border-white/[0.06] cursor-not-allowed"
                 )}
               >
                 <Save className="w-4 h-4" />
diff --git a/frontend/src/components/modals/PropertyPlannerModal/PropertyPlannerView.tsx b/frontend/src/components/modals/PropertyPlannerModal/PropertyPlannerView.tsx
index a78cabac5..e38c02c12 100644
--- a/frontend/src/components/modals/PropertyPlannerModal/PropertyPlannerView.tsx
+++ b/frontend/src/components/modals/PropertyPlannerModal/PropertyPlannerView.tsx
@@ -432,9 +432,11 @@ interface PropertyPlannerViewProps {
   onHeaderStateChange?: (state: HeaderState | null) => void
   /** Callback to jump to a specific date on the timeline */
   onJumpToDate?: (year: number, month: number) => void
+  /** Whether Monet theme is active */
+  isMonet?: boolean
 }
 
-export function PropertyPlannerView({ onClose, initialScenarioId, onFooterStateChange, onHeaderStateChange, onJumpToDate }: PropertyPlannerViewProps) {
+export function PropertyPlannerView({ onClose, initialScenarioId, onFooterStateChange, onHeaderStateChange, onJumpToDate, isMonet = false }: PropertyPlannerViewProps) {
   // API hooks
   const { data: apiScenarios, isLoading } = usePropertyPlannerV2ScenariosQuery()
   const createMutation = useCreatePropertyPlannerV2ScenarioMutation()
@@ -683,6 +685,7 @@ export function PropertyPlannerView({ onClose, initialScenarioId, onFooterStateC
               onAddScenario={handleAddScenario}
               isEmbedded={isEmbedded}
               isLoading={isLoading}
+              isMonet={isMonet}
             />
           ) : (
             <ScenarioDetailView
diff --git a/frontend/src/components/modals/PropertyPlannerModal/components/PropertyPlannerModalHeader.tsx b/frontend/src/components/modals/PropertyPlannerModal/components/PropertyPlannerModalHeader.tsx
index c2ffac49c..193d0decc 100644
--- a/frontend/src/components/modals/PropertyPlannerModal/components/PropertyPlannerModalHeader.tsx
+++ b/frontend/src/components/modals/PropertyPlannerModal/components/PropertyPlannerModalHeader.tsx
@@ -1,6 +1,7 @@
 "use client"
 
 import { Building2, X, ArrowLeft, ExternalLink } from 'lucide-react'
+import { cn } from '@/lib/utils'
 import { IconPicker } from '@/components/modals/ScenarioEventModal/components/IconPicker'
 import { CustomDropdown } from '@/components/modals/ScenarioEventModal/components/CustomDropdown'
 import { propertyOptions } from '../constants'
@@ -10,21 +11,30 @@ import type { HeaderState } from '../PropertyPlannerView'
 interface PropertyPlannerModalHeaderProps {
   headerState: HeaderState | null
   onClose: () => void
+  isMonet?: boolean
 }
 
-export function PropertyPlannerModalHeader({ headerState, onClose }: PropertyPlannerModalHeaderProps) {
+export function PropertyPlannerModalHeader({ headerState, onClose, isMonet = false }: PropertyPlannerModalHeaderProps) {
   return (
-    <div className="flex-shrink-0 px-4 sm:px-6 pt-4 sm:pt-6 pb-3 sm:pb-4 border-b border-white/[0.06]">
+    <div className={cn(
+      "flex-shrink-0 px-4 sm:px-6 pt-4 sm:pt-6 pb-3 sm:pb-4 border-b",
+      isMonet ? "border-[var(--monet-lavender)]/10" : "border-white/[0.06]"
+    )}>
       <div className="flex items-center justify-between gap-3">
         {headerState ? (
-          <EditModeHeader headerState={headerState} />
+          <EditModeHeader headerState={headerState} isMonet={isMonet} />
         ) : (
-          <ListModeHeader />
+          <ListModeHeader isMonet={isMonet} />
         )}
         <button
           type="button"
           onClick={onClose}
-          className="p-1.5 rounded-lg hover:bg-white/[0.08] text-slate-400 hover:text-white transition-colors flex-shrink-0"
+          className={cn(
+            "p-1.5 rounded-lg transition-colors flex-shrink-0",
+            isMonet
+              ? "hover:bg-[var(--monet-lavender)]/10 text-[var(--monet-text-muted)] hover:text-[var(--monet-text-primary)]"
+              : "hover:bg-white/[0.08] text-slate-400 hover:text-white"
+          )}
           aria-label="Close modal"
         >
           <X className="w-5 h-5" />
@@ -42,7 +52,7 @@ export function PropertyPlannerModalHeader({ headerState, onClose }: PropertyPla
  * - Jump to date button
  * - Property type dropdown
  */
-function EditModeHeader({ headerState }: { headerState: HeaderState }) {
+function EditModeHeader({ headerState, isMonet }: { headerState: HeaderState; isMonet: boolean }) {
   const handleJumpToDate = () => {
     if (!headerState.onJumpToDate || !headerState.loanStartMonth) return
 
@@ -60,7 +70,12 @@ function EditModeHeader({ headerState }: { headerState: HeaderState }) {
       <button
         type="button"
         onClick={headerState.onBack}
-        className="p-2 rounded-xl bg-white/[0.03] border border-white/[0.06] text-slate-400 hover:text-white hover:bg-white/[0.06] transition-all flex-shrink-0"
+        className={cn(
+          "p-2 rounded-xl border transition-all flex-shrink-0",
+          isMonet
+            ? "bg-[var(--monet-lavender)]/5 border-[var(--monet-lavender)]/15 text-[var(--monet-text-muted)] hover:text-[var(--monet-text-primary)] hover:bg-[var(--monet-lavender)]/10"
+            : "bg-white/[0.03] border-white/[0.06] text-slate-400 hover:text-white hover:bg-white/[0.06]"
+        )}
       >
         <ArrowLeft className="w-5 h-5" />
       </button>
@@ -79,7 +94,12 @@ function EditModeHeader({ headerState }: { headerState: HeaderState }) {
           type="text"
           value={headerState.name}
           onChange={(e) => headerState.onNameChange(e.target.value)}
-          className="text-lg sm:text-xl font-semibold text-white tracking-tight bg-transparent border-none outline-none focus:ring-0 placeholder:text-slate-600 hover:bg-white/[0.03] focus:bg-white/[0.05] rounded-lg px-2 py-1 -ml-2 transition-colors min-w-0 flex-1"
+          className={cn(
+            "text-lg sm:text-xl font-semibold tracking-tight bg-transparent border-none outline-none focus:ring-0 rounded-lg px-2 py-1 -ml-2 transition-colors min-w-0 flex-1",
+            isMonet
+              ? "text-[var(--monet-text-primary)] placeholder:text-[var(--monet-text-muted)] hover:bg-[var(--monet-lavender)]/5 focus:bg-[var(--monet-lavender)]/10"
+              : "text-white placeholder:text-slate-600 hover:bg-white/[0.03] focus:bg-white/[0.05]"
+          )}
           placeholder="Scenario name"
         />
 
@@ -87,7 +107,12 @@ function EditModeHeader({ headerState }: { headerState: HeaderState }) {
           <button
             type="button"
             onClick={handleJumpToDate}
-            className="p-2 rounded-xl bg-white/[0.03] border border-white/[0.06] text-slate-400 hover:text-blue-400 hover:border-blue-500/40 hover:bg-white/[0.05] transition-all flex-shrink-0"
+            className={cn(
+              "p-2 rounded-xl border transition-all flex-shrink-0",
+              isMonet
+                ? "bg-[var(--monet-lavender)]/5 border-[var(--monet-lavender)]/15 text-[var(--monet-text-muted)] hover:text-blue-500 hover:border-blue-500/40 hover:bg-blue-500/5"
+                : "bg-white/[0.03] border-white/[0.06] text-slate-400 hover:text-blue-400 hover:border-blue-500/40 hover:bg-white/[0.05]"
+            )}
             title="Jump to purchase date on timeline"
           >
             <ExternalLink className="w-4 h-4" />
@@ -111,15 +136,26 @@ function EditModeHeader({ headerState }: { headerState: HeaderState }) {
 /**
  * List mode header: Shows generic property scenarios title
  */
-function ListModeHeader() {
+function ListModeHeader({ isMonet }: { isMonet: boolean }) {
   return (
     <div className="flex items-center gap-2.5 sm:gap-3">
-      <div className="w-8 h-8 sm:w-10 sm:h-10 rounded-lg sm:rounded-xl bg-gradient-to-br from-violet-500/20 to-violet-600/5 border border-violet-500/20 flex items-center justify-center flex-shrink-0">
+      <div className={cn(
+        "w-8 h-8 sm:w-10 sm:h-10 rounded-lg sm:rounded-xl bg-gradient-to-br border flex items-center justify-center flex-shrink-0",
+        isMonet
+          ? "from-violet-500/15 to-violet-600/5 border-violet-500/15"
+          : "from-violet-500/20 to-violet-600/5 border-violet-500/20"
+      )}>
         <Building2 className="w-4 h-4 sm:w-5 sm:h-5 text-violet-400" />
       </div>
       <div className="min-w-0">
-        <h2 className="text-base sm:text-lg font-semibold text-white tracking-tight">Property Scenarios</h2>
-        <p className="text-xs sm:text-sm text-slate-500 truncate">Create and compare different property purchase scenarios</p>
+        <h2 className={cn(
+          "text-base sm:text-lg font-semibold tracking-tight",
+          isMonet ? "text-[var(--monet-text-primary)]" : "text-white"
+        )}>Property Scenarios</h2>
+        <p className={cn(
+          "text-xs sm:text-sm truncate",
+          isMonet ? "text-[var(--monet-text-muted)]" : "text-slate-500"
+        )}>Create and compare different property purchase scenarios</p>
       </div>
     </div>
   )
diff --git a/frontend/src/components/modals/PropertyPlannerModal/components/ScenarioList.tsx b/frontend/src/components/modals/PropertyPlannerModal/components/ScenarioList.tsx
index 3530fbd29..071a4b211 100644
--- a/frontend/src/components/modals/PropertyPlannerModal/components/ScenarioList.tsx
+++ b/frontend/src/components/modals/PropertyPlannerModal/components/ScenarioList.tsx
@@ -36,6 +36,7 @@ interface ScenarioListProps {
   onAddScenario: (scenario: PropertyScenario) => void
   isEmbedded: boolean
   isLoading?: boolean
+  isMonet?: boolean
 }
 
 function getDefaultSaleInputs(loanStartMonth: string, propertyPrice: number) {
@@ -61,6 +62,7 @@ export function ScenarioList({
   onAddScenario,
   isEmbedded,
   isLoading = false,
+  isMonet = false,
 }: ScenarioListProps) {
   const [isCreatingNew, setIsCreatingNew] = useState(false)
   const [newRowName, setNewRowName] = useState('')
@@ -117,7 +119,12 @@ export function ScenarioList({
     >
       {!isEmbedded && (
         <motion.div initial={{ opacity: 0, x: -10 }} animate={{ opacity: 1, x: 0 }} transition={{ delay: 0.05 }} className="mb-12">
-          <Link href="/dashboard" className="inline-flex items-center gap-2 text-slate-500 hover:text-slate-300 transition-colors text-sm font-medium">
+          <Link href="/dashboard" className={cn(
+            "inline-flex items-center gap-2 transition-colors text-sm font-medium",
+            isMonet
+              ? "text-[var(--monet-text-muted)] hover:text-[var(--monet-text-primary)]"
+              : "text-slate-500 hover:text-slate-300"
+          )}>
             <ArrowLeft className="w-4 h-4" />
             Back to Dashboard
           </Link>
@@ -126,10 +133,16 @@ export function ScenarioList({
 
       {!isEmbedded && (
         <div className="mb-8">
-          <motion.h1 className="text-3xl md:text-4xl font-semibold text-white mb-2 tracking-tight" initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }} transition={{ delay: 0.1 }}>
+          <motion.h1 className={cn(
+            "text-3xl md:text-4xl font-semibold mb-2 tracking-tight",
+            isMonet ? "text-[var(--monet-text-primary)]" : "text-white"
+          )} initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }} transition={{ delay: 0.1 }}>
             Property Scenarios
           </motion.h1>
-          <motion.p className="text-sm text-slate-500" initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }} transition={{ delay: 0.15 }}>
+          <motion.p className={cn(
+            "text-sm",
+            isMonet ? "text-[var(--monet-text-muted)]" : "text-slate-500"
+          )} initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }} transition={{ delay: 0.15 }}>
             Create and compare different property purchase scenarios
           </motion.p>
         </div>
@@ -138,17 +151,20 @@ export function ScenarioList({
       <motion.div className="space-y-2" initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }} transition={{ delay: 0.2 }}>
         {isLoading ? (
           <div className="flex items-center justify-center py-12">
-            <Loader2 className="w-6 h-6 text-slate-400 animate-spin" />
+            <Loader2 className={cn("w-6 h-6 animate-spin", isMonet ? "text-[var(--monet-text-muted)]" : "text-slate-400")} />
           </div>
         ) : scenarios.length === 0 ? (
           <div className="text-center py-12">
-            <p className="text-sm text-slate-500 mb-4">No property scenarios yet</p>
-            <p className="text-xs text-slate-600">Create your first scenario to start planning</p>
+            <p className={cn("text-sm mb-4", isMonet ? "text-[var(--monet-text-muted)]" : "text-slate-500")}>No property scenarios yet</p>
+            <p className={cn("text-xs", isMonet ? "text-[var(--monet-text-muted)]/70" : "text-slate-600")}>Create your first scenario to start planning</p>
           </div>
         ) : (
           <>
             <div className="flex items-center gap-4 px-4 pb-1">
-              <span className="text-[10px] uppercase tracking-wider text-slate-600 font-medium w-5 text-center" title="Include in timeline projections">Active</span>
+              <span className={cn(
+                "text-[10px] uppercase tracking-wider font-medium w-5 text-center",
+                isMonet ? "text-[var(--monet-text-muted)]" : "text-slate-600"
+              )} title="Include in timeline projections">Active</span>
             </div>
             {scenarios.map((scenario, index) => {
           const option = propertyOptions.find(o => o.id === scenario.propertyType)
@@ -160,7 +176,13 @@ export function ScenarioList({
               transition={{ delay: 0.05 * index }}
               className={cn(
                 "group flex items-center gap-4 p-4 rounded-xl border transition-all cursor-pointer",
-                scenario.isIncluded ? "bg-white/[0.03] border-white/[0.08] hover:bg-white/[0.05]" : "bg-white/[0.01] border-white/[0.04] opacity-60 hover:opacity-80"
+                scenario.isIncluded
+                  ? isMonet
+                    ? "bg-[var(--monet-lavender)]/5 border-[var(--monet-lavender)]/15 hover:bg-[var(--monet-lavender)]/10"
+                    : "bg-white/[0.03] border-white/[0.08] hover:bg-white/[0.05]"
+                  : isMonet
+                    ? "bg-[var(--monet-lavender)]/[0.02] border-[var(--monet-lavender)]/10 opacity-60 hover:opacity-80"
+                    : "bg-white/[0.01] border-white/[0.04] opacity-60 hover:opacity-80"
               )}
               onClick={() => onEditScenario(scenario)}
             >
@@ -169,7 +191,11 @@ export function ScenarioList({
                 onClick={(e) => { e.stopPropagation(); onToggleInclude(scenario.id) }}
                 className={cn(
                   "w-5 h-5 rounded border-2 flex items-center justify-center transition-colors shrink-0",
-                  scenario.isIncluded ? "bg-emerald-500 border-emerald-500" : "bg-transparent border-slate-600 hover:border-slate-500"
+                  scenario.isIncluded
+                    ? "bg-emerald-500 border-emerald-500"
+                    : isMonet
+                      ? "bg-transparent border-[var(--monet-lavender)]/40 hover:border-[var(--monet-lavender)]/60"
+                      : "bg-transparent border-slate-600 hover:border-slate-500"
                 )}
               >
                 {scenario.isIncluded && <Check className="w-3 h-3 text-white" />}
@@ -187,19 +213,36 @@ export function ScenarioList({
 
               <div className="flex-1 min-w-0">
                 <div className="flex items-center gap-2 mb-0.5">
-                  <span className="text-sm font-medium text-white truncate">{scenario.name}</span>
-                  <span className={cn("text-xs px-2 py-0.5 rounded-md", option?.accentColor || 'text-slate-400', "bg-white/[0.04]")}>{option?.title}</span>
+                  <span className={cn(
+                    "text-sm font-medium truncate",
+                    isMonet ? "text-[var(--monet-text-primary)]" : "text-white"
+                  )}>{scenario.name}</span>
+                  <span className={cn(
+                    "text-xs px-2 py-0.5 rounded-md",
+                    option?.accentColor || 'text-slate-400',
+                    isMonet ? "bg-[var(--monet-lavender)]/10" : "bg-white/[0.04]"
+                  )}>{option?.title}</span>
                 </div>
-                <div className="text-xs text-slate-500">
+                <div className={cn("text-xs", isMonet ? "text-[var(--monet-text-muted)]" : "text-slate-500")}>
                   {formatCurrency(scenario.inputs.propertyPrice)} · {scenario.inputs.loanTermYears}yr loan
                 </div>
               </div>
 
               <div className="flex items-center gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
-                <button type="button" onClick={(e) => { e.stopPropagation(); onEditScenario(scenario) }} className="p-2 rounded-lg hover:bg-white/10 text-slate-400 hover:text-white transition-colors">
+                <button type="button" onClick={(e) => { e.stopPropagation(); onEditScenario(scenario) }} className={cn(
+                  "p-2 rounded-lg transition-colors",
+                  isMonet
+                    ? "hover:bg-[var(--monet-lavender)]/10 text-[var(--monet-text-muted)] hover:text-[var(--monet-text-primary)]"
+                    : "hover:bg-white/10 text-slate-400 hover:text-white"
+                )}>
                   <Pencil className="w-4 h-4" />
                 </button>
-                <button type="button" onClick={(e) => { e.stopPropagation(); onDeleteScenario(scenario.id) }} className="p-2 rounded-lg hover:bg-red-500/20 text-slate-400 hover:text-red-400 transition-colors">
+                <button type="button" onClick={(e) => { e.stopPropagation(); onDeleteScenario(scenario.id) }} className={cn(
+                  "p-2 rounded-lg transition-colors",
+                  isMonet
+                    ? "hover:bg-red-500/10 text-[var(--monet-text-muted)] hover:text-red-500"
+                    : "hover:bg-red-500/20 text-slate-400 hover:text-red-400"
+                )}>
                   <Trash2 className="w-4 h-4" />
                 </button>
               </div>
@@ -217,7 +260,12 @@ export function ScenarioList({
               exit={{ opacity: 0, height: 0, overflow: 'hidden' }}
               transition={{ overflow: { delay: 0.15 } }}
             >
-              <div className="flex items-center gap-3 p-4 rounded-xl border border-emerald-500/30 bg-emerald-500/5">
+              <div className={cn(
+                "flex items-center gap-3 p-4 rounded-xl border",
+                isMonet
+                  ? "border-emerald-500/20 bg-emerald-500/5"
+                  : "border-emerald-500/30 bg-emerald-500/5"
+              )}>
                 <IconPicker
                   iconName={newRowIcon}
                   iconColor={newRowIconColor}
@@ -231,7 +279,12 @@ export function ScenarioList({
                   value={newRowName}
                   onChange={(e) => setNewRowName(e.target.value)}
                   placeholder="Scenario name"
-                  className="w-40 rounded-lg bg-white/[0.05] border-white/[0.1] text-white text-sm py-2 px-3 focus:border-emerald-500/50 placeholder:text-slate-500"
+                  className={cn(
+                    "w-40 rounded-lg text-sm py-2 px-3 focus:border-emerald-500/50",
+                    isMonet
+                      ? "bg-[var(--monet-lavender)]/5 border-[var(--monet-lavender)]/20 text-[var(--monet-text-primary)] placeholder:text-[var(--monet-text-muted)]"
+                      : "bg-white/[0.05] border-white/[0.1] text-white placeholder:text-slate-500"
+                  )}
                   autoFocus
                 />
                 <CustomSelect
@@ -247,7 +300,12 @@ export function ScenarioList({
                   <button type="button" onClick={handleConfirmNewRow} className="p-2 rounded-lg bg-emerald-500/20 hover:bg-emerald-500/30 text-emerald-400 transition-colors">
                     <Check className="w-4 h-4" />
                   </button>
-                  <button type="button" onClick={handleCancelNewRow} className="p-2 rounded-lg hover:bg-white/10 text-slate-400 hover:text-white transition-colors">
+                  <button type="button" onClick={handleCancelNewRow} className={cn(
+                    "p-2 rounded-lg transition-colors",
+                    isMonet
+                      ? "hover:bg-[var(--monet-lavender)]/10 text-[var(--monet-text-muted)] hover:text-[var(--monet-text-primary)]"
+                      : "hover:bg-white/10 text-slate-400 hover:text-white"
+                  )}>
                     <X className="w-4 h-4" />
                   </button>
                 </div>
@@ -260,7 +318,12 @@ export function ScenarioList({
           <motion.button
             type="button"
             onClick={handleStartNewRow}
-            className="w-full flex items-center justify-center gap-2 p-4 rounded-xl border border-dashed border-white/[0.08] text-slate-500 hover:text-slate-300 hover:border-white/[0.15] hover:bg-white/[0.02] transition-all"
+            className={cn(
+              "w-full flex items-center justify-center gap-2 p-4 rounded-xl border border-dashed transition-all",
+              isMonet
+                ? "border-[var(--monet-lavender)]/20 text-[var(--monet-text-muted)] hover:text-[var(--monet-text-primary)] hover:border-[var(--monet-lavender)]/30 hover:bg-[var(--monet-lavender)]/5"
+                : "border-white/[0.08] text-slate-500 hover:text-slate-300 hover:border-white/[0.15] hover:bg-white/[0.02]"
+            )}
             whileHover={{ scale: 1.005 }}
             whileTap={{ scale: 0.995 }}
           >
diff --git a/frontend/src/components/modals/ScenarioEventModal/components/CustomDropdown.tsx b/frontend/src/components/modals/ScenarioEventModal/components/CustomDropdown.tsx
index c68628838..d0169887a 100644
--- a/frontend/src/components/modals/ScenarioEventModal/components/CustomDropdown.tsx
+++ b/frontend/src/components/modals/ScenarioEventModal/components/CustomDropdown.tsx
@@ -1,218 +1,4 @@
-"use client"
-
-import { useState, useRef, useEffect, type ReactNode } from 'react'
-import { createPortal } from 'react-dom'
-import * as LucideIcons from 'lucide-react'
-import type { LucideIcon } from 'lucide-react'
-
-const ChevronDownIcon = LucideIcons.ChevronDown as LucideIcon | undefined
-const CheckIcon = LucideIcons.Check as LucideIcon | undefined
-
-export interface DropdownOption<T extends string = string> {
-  value: T
-  label: string
-  icon?: ReactNode
-  iconColor?: string
-}
-
-export interface DropdownGroup<T extends string = string> {
-  label: string
-  options: DropdownOption<T>[]
-}
-
-interface CustomDropdownProps<T extends string = string> {
-  value: T
-  onChange: (value: T) => void
-  options?: DropdownOption<T>[]
-  groups?: DropdownGroup<T>[]
-  disabled?: boolean
-  minWidth?: string
-  showIcon?: boolean
-  icon?: ReactNode
-  iconColor?: string
-  className?: string
-}
-
-export function CustomDropdown<T extends string = string>({
-  value,
-  onChange,
-  options,
-  groups,
-  disabled,
-  minWidth = '140px',
-  showIcon = false,
-  icon,
-  iconColor,
-  className = '',
-}: CustomDropdownProps<T>) {
-  const [isOpen, setIsOpen] = useState(false)
-  const [dropdownPosition, setDropdownPosition] = useState<{ top: number; left: number; width: number } | null>(null)
-  const ref = useRef<HTMLDivElement>(null)
-  const buttonRef = useRef<HTMLButtonElement>(null)
-  const menuRef = useRef<HTMLDivElement>(null)
-
-  // Find label for current value
-  const getLabel = () => {
-    if (options) {
-      const opt = options.find(o => o.value === value)
-      return opt?.label ?? value
-    }
-    if (groups) {
-      for (const group of groups) {
-        const opt = group.options.find(o => o.value === value)
-        if (opt) return opt.label
-      }
-    }
-    return value
-  }
-
-  // Handle opening - calculate position synchronously before render
-  const handleOpen = () => {
-    if (disabled) return
-    if (!isOpen && buttonRef.current) {
-      const rect = buttonRef.current.getBoundingClientRect()
-      setDropdownPosition({
-        top: rect.bottom + 4,
-        left: rect.left,
-        width: rect.width,
-      })
-    }
-    setIsOpen(!isOpen)
-  }
-
-  // Clear position when closed
-  useEffect(() => {
-    if (!isOpen) {
-      setDropdownPosition(null)
-    }
-  }, [isOpen])
-
-  // Close on outside click (check both button container and portaled menu)
-  useEffect(() => {
-    const handleClickOutside = (e: MouseEvent) => {
-      const target = e.target as Node
-      const clickedInsideButton = ref.current?.contains(target)
-      const clickedInsideMenu = menuRef.current?.contains(target)
-      if (!clickedInsideButton && !clickedInsideMenu) {
-        setIsOpen(false)
-      }
-    }
-    document.addEventListener('mousedown', handleClickOutside)
-    return () => document.removeEventListener('mousedown', handleClickOutside)
-  }, [])
-
-  const handleSelect = (val: T) => {
-    onChange(val)
-    setIsOpen(false)
-  }
-
-  const renderOption = (option: DropdownOption<T>) => {
-    const isSelected = option.value === value
-    return (
-      <button
-        key={option.value}
-        type="button"
-        onClick={() => handleSelect(option.value)}
-        className={`
-          w-full flex items-center gap-2
-          px-3 py-2
-          text-sm text-left
-          transition-all duration-150
-          ${isSelected
-            ? 'bg-blue-500/15 text-white'
-            : 'text-slate-300 hover:bg-white/[0.05]'
-          }
-        `}
-      >
-        {showIcon && option.icon && (
-          <span className={`w-4 shrink-0 ${option.iconColor || ''}`}>
-            {option.icon}
-          </span>
-        )}
-        {!showIcon && (
-          <span className="w-4 shrink-0">
-            {isSelected && CheckIcon && (
-              <CheckIcon className="h-3.5 w-3.5 text-blue-400" />
-            )}
-          </span>
-        )}
-        <span className="truncate">{option.label}</span>
-        {showIcon && isSelected && CheckIcon && (
-          <CheckIcon className="h-3.5 w-3.5 text-blue-400 ml-auto" />
-        )}
-      </button>
-    )
-  }
-
-  const dropdownMenu = isOpen && dropdownPosition && typeof document !== 'undefined' ? createPortal(
-    <div
-      ref={menuRef}
-      className="
-        fixed z-[9999]
-        rounded-xl
-        border border-white/[0.12]
-        bg-[#0c0c0c]
-        shadow-2xl shadow-black/60
-        overflow-hidden
-        animate-in fade-in slide-in-from-top-2 duration-150
-        max-h-[300px] overflow-y-auto
-      "
-      style={{
-        top: dropdownPosition.top,
-        left: dropdownPosition.left,
-        minWidth: Math.max(dropdownPosition.width, parseInt(minWidth) || 140),
-      }}
-    >
-      {groups ? (
-        groups.map((group) => (
-          <div key={group.label}>
-            <div className="px-3 py-2 text-[10px] font-semibold uppercase tracking-wider text-slate-500 bg-white/[0.02] sticky top-0">
-              {group.label}
-            </div>
-            {group.options.map(renderOption)}
-          </div>
-        ))
-      ) : (
-        options?.map(renderOption)
-      )}
-    </div>,
-    document.body
-  ) : null
-
-  return (
-    <div className={`relative ${className}`} ref={ref}>
-      <button
-        ref={buttonRef}
-        type="button"
-        onClick={handleOpen}
-        disabled={disabled}
-        className={`
-          flex items-center justify-between gap-2
-          ${showIcon ? 'pl-8' : 'pl-3'} pr-8 py-2
-          rounded-lg
-          border border-white/[0.08] hover:border-white/[0.15]
-          bg-white/[0.03] hover:bg-white/[0.05]
-          text-sm text-white text-left
-          disabled:opacity-50 disabled:cursor-not-allowed
-          transition-all duration-200
-          ${isOpen ? 'border-blue-500/40' : ''}
-        `}
-        style={{ minWidth }}
-      >
-        {showIcon && icon && (
-          <div className={`absolute left-2.5 top-1/2 -translate-y-1/2 ${iconColor || ''}`}>
-            {icon}
-          </div>
-        )}
-        <span className="truncate">{getLabel()}</span>
-        {ChevronDownIcon && (
-          <ChevronDownIcon
-            className={`absolute right-2.5 top-1/2 -translate-y-1/2 h-3.5 w-3.5 text-slate-500 transition-transform duration-200 ${isOpen ? 'rotate-180' : ''}`}
-          />
-        )}
-      </button>
-
-      {dropdownMenu}
-    </div>
-  )
-}
+// Canonical location: @/components/ui/CustomDropdown
+// This re-export maintains backward compatibility for existing imports.
+export { CustomDropdown } from '@/components/ui/CustomDropdown'
+export type { DropdownOption, DropdownGroup } from '@/components/ui/CustomDropdown'
diff --git a/frontend/src/components/modals/ScenarioEventModal/components/IconPicker.tsx b/frontend/src/components/modals/ScenarioEventModal/components/IconPicker.tsx
index d5f39acda..e64913d14 100644
--- a/frontend/src/components/modals/ScenarioEventModal/components/IconPicker.tsx
+++ b/frontend/src/components/modals/ScenarioEventModal/components/IconPicker.tsx
@@ -1,352 +1,3 @@
-"use client"
-
-import * as LucideIcons from 'lucide-react'
-import { useState, useRef, useEffect, useCallback } from 'react'
-import { createPortal } from 'react-dom'
-import type { ComponentType, RefObject } from 'react'
-
-const SearchIcon = LucideIcons.Search as ComponentType<{ className?: string }>
-const PaletteIcon = LucideIcons.Palette as ComponentType<{ className?: string }>
-const CheckIcon = LucideIcons.Check as ComponentType<{ className?: string }>
-
-const ICON_OPTIONS = Object.entries(LucideIcons)
-  .filter(([key, component]) => {
-    if (key === 'default' || key === 'createLucideIcon') return false
-    const type = typeof component
-    return type === 'function' || type === 'object'
-  })
-  .map(([key, component]) => {
-    const kebab = key
-      .replace(/([a-z0-9])([A-Z])/g, '$1-$2')
-      .replace(/_/g, '-')
-      .toLowerCase()
-    return { name: kebab, label: kebab, Icon: component as ComponentType<{ className?: string }> }
-  })
-
-const PRESET_COLORS = [
-  '#ef4444', '#f97316', '#eab308', '#22c55e', '#14b8a6',
-  '#06b6d4', '#3b82f6', '#6366f1', '#a855f7', '#ec4899',
-  '#f43f5e', '#84cc16', '#10b981', '#0ea5e9', '#8b5cf6',
-]
-
-function useClickOutside(ref: RefObject<HTMLElement | null>, handler: () => void) {
-  useEffect(() => {
-    const listener = (event: MouseEvent | TouchEvent) => {
-      if (!ref.current || ref.current.contains(event.target as Node)) return
-      handler()
-    }
-    document.addEventListener('mousedown', listener)
-    document.addEventListener('touchstart', listener)
-    return () => {
-      document.removeEventListener('mousedown', listener)
-      document.removeEventListener('touchstart', listener)
-    }
-  }, [ref, handler])
-}
-
-interface IconPickerProps {
-  iconName: string
-  iconColor: string
-  searchQuery: string
-  onIconChange: (name: string) => void
-  onColorChange: (color: string) => void
-  onSearchChange: (query: string) => void
-  disabled?: boolean
-  /** Use compact styling with smaller size */
-  compact?: boolean
-}
-
-export function IconPicker({
-  iconName,
-  iconColor,
-  searchQuery,
-  onIconChange,
-  onColorChange,
-  onSearchChange,
-  disabled,
-  compact,
-}: IconPickerProps) {
-  const [isOpen, setIsOpen] = useState(false)
-  const [activeTab, setActiveTab] = useState<'icon' | 'color'>('icon')
-  const [popoverPosition, setPopoverPosition] = useState({ top: 0, left: 0 })
-  const triggerRef = useRef<HTMLButtonElement>(null)
-  const popoverRef = useRef<HTMLDivElement>(null)
-  const inputRef = useRef<HTMLInputElement>(null)
-
-  // Update popover position based on trigger button location
-  const updatePosition = useCallback(() => {
-    if (triggerRef.current) {
-      const rect = triggerRef.current.getBoundingClientRect()
-      setPopoverPosition({
-        top: rect.bottom + 8, // 8px gap below trigger
-        left: rect.left,
-      })
-    }
-  }, [])
-
-  useClickOutside(popoverRef, () => setIsOpen(false))
-
-  // Update position when opening and on scroll/resize
-  useEffect(() => {
-    if (isOpen) {
-      updatePosition()
-      window.addEventListener('scroll', updatePosition, true)
-      window.addEventListener('resize', updatePosition)
-      return () => {
-        window.removeEventListener('scroll', updatePosition, true)
-        window.removeEventListener('resize', updatePosition)
-      }
-    }
-  }, [isOpen, updatePosition])
-
-  const SelectedIcon = ICON_OPTIONS.find((opt) => opt.name === iconName)?.Icon
-  const searchTerm = searchQuery.trim().toLowerCase()
-  const hasSearch = searchTerm.length > 0
-  const filteredIcons = hasSearch
-    ? ICON_OPTIONS.filter(
-        (opt) => opt.name.toLowerCase().includes(searchTerm) || opt.label.toLowerCase().includes(searchTerm)
-      ).slice(0, 24)
-    : ICON_OPTIONS.slice(0, 24)
-
-  useEffect(() => {
-    if (isOpen && activeTab === 'icon' && inputRef.current) {
-      inputRef.current.focus()
-    }
-  }, [isOpen, activeTab])
-
-  const handleIconSelect = (name: string) => {
-    onIconChange(name)
-    onSearchChange(name)
-  }
-
-  return (
-    <div className="relative">
-      {/* Trigger Button - Icon badge that sits inline */}
-      <button
-        ref={triggerRef}
-        type="button"
-        onClick={() => !disabled && setIsOpen(!isOpen)}
-        disabled={disabled}
-        className={`
-          group relative flex items-center justify-center
-          ${compact ? 'h-7 w-7 rounded-lg border' : 'h-[42px] w-[42px] rounded-xl border-2'}
-          border-white/[0.08] hover:border-white/[0.2]
-          transition-all duration-200
-          disabled:opacity-50 disabled:cursor-not-allowed
-          overflow-hidden
-          ${isOpen ? 'border-white/[0.25] ring-2 ring-white/[0.1]' : ''}
-        `}
-        style={{ backgroundColor: iconColor || '#1f2937' }}
-        aria-label="Change icon"
-      >
-        {/* Subtle inner glow - only for non-compact */}
-        {!compact && (
-          <div
-            className="absolute inset-0 opacity-30"
-            style={{
-              background: `radial-gradient(circle at 30% 30%, rgba(255,255,255,0.3), transparent 60%)`
-            }}
-          />
-        )}
-
-        {/* Icon */}
-        {SelectedIcon ? (
-          <SelectedIcon className={`relative ${compact ? 'h-3.5 w-3.5' : 'h-5 w-5'} text-white drop-shadow-sm`} />
-        ) : (
-          <div className={`relative ${compact ? 'h-3.5 w-3.5' : 'h-5 w-5'} rounded bg-white/20`} />
-        )}
-
-      </button>
-
-      {/* Popover - rendered via portal to avoid clipping in scrollable containers */}
-      {isOpen && typeof document !== 'undefined' && createPortal(
-        <div
-          ref={popoverRef}
-          style={{
-            position: 'fixed',
-            top: popoverPosition.top,
-            left: popoverPosition.left,
-            zIndex: 9999,
-          }}
-          className={`
-            w-72
-            rounded-2xl
-            border border-white/[0.12]
-            bg-[#0c0c0c]
-            shadow-2xl shadow-black/60
-            overflow-hidden
-            animate-in fade-in slide-in-from-top-2 duration-200
-          `}
-        >
-          {/* Tab Header */}
-          <div className="flex border-b border-white/[0.08]">
-            <button
-              type="button"
-              onClick={() => setActiveTab('icon')}
-              className={`
-                flex-1 flex items-center justify-center gap-2
-                px-4 py-3
-                text-xs font-medium uppercase tracking-wider
-                transition-all duration-200
-                ${activeTab === 'icon'
-                  ? 'text-white bg-white/[0.05] border-b-2 border-white/30'
-                  : 'text-slate-500 hover:text-slate-300 hover:bg-white/[0.02]'}
-              `}
-            >
-              <SearchIcon className="h-3.5 w-3.5" />
-              Icon
-            </button>
-            <button
-              type="button"
-              onClick={() => setActiveTab('color')}
-              className={`
-                flex-1 flex items-center justify-center gap-2
-                px-4 py-3
-                text-xs font-medium uppercase tracking-wider
-                transition-all duration-200
-                ${activeTab === 'color'
-                  ? 'text-white bg-white/[0.05] border-b-2 border-white/30'
-                  : 'text-slate-500 hover:text-slate-300 hover:bg-white/[0.02]'}
-              `}
-            >
-              <PaletteIcon className="h-3.5 w-3.5" />
-              Color
-            </button>
-          </div>
-
-          {/* Icon Tab Content */}
-          {activeTab === 'icon' && (
-            <div className="p-3">
-              {/* Search Input */}
-              <div className="relative mb-3">
-                <SearchIcon className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-slate-500" />
-                <input
-                  ref={inputRef}
-                  value={searchQuery}
-                  onChange={(e) => onSearchChange(e.target.value)}
-                  className={`
-                    w-full pl-9 pr-3 py-2.5
-                    rounded-xl
-                    border border-white/[0.08] focus:border-white/[0.2]
-                    bg-white/[0.03] focus:bg-white/[0.05]
-                    text-sm text-white placeholder:text-slate-500
-                    outline-none
-                    transition-all duration-200
-                  `}
-                  placeholder="Search icons..."
-                />
-              </div>
-
-              {/* Icon Grid */}
-              <div className="grid grid-cols-6 gap-1.5 max-h-48 overflow-y-auto custom-scrollbar pr-1">
-                {filteredIcons.map((opt) => {
-                  const isSelected = opt.name === iconName
-                  return (
-                    <button
-                      key={opt.name}
-                      type="button"
-                      onClick={() => handleIconSelect(opt.name)}
-                      title={opt.label}
-                      className={`
-                        relative flex items-center justify-center
-                        h-10 w-10
-                        rounded-lg
-                        border transition-all duration-200
-                        ${isSelected
-                          ? 'border-white/30 bg-white/[0.1]'
-                          : 'border-transparent hover:border-white/[0.1] hover:bg-white/[0.05]'}
-                      `}
-                    >
-                      <opt.Icon className={`h-4 w-4 ${isSelected ? 'text-white' : 'text-slate-400'}`} />
-                      {isSelected && (
-                        <div className="absolute -top-1 -right-1 h-3 w-3 rounded-full bg-emerald-500 flex items-center justify-center">
-                          <CheckIcon className="h-2 w-2 text-white" />
-                        </div>
-                      )}
-                    </button>
-                  )
-                })}
-              </div>
-
-              {hasSearch && filteredIcons.length === 0 && (
-                <div className="py-8 text-center text-xs text-slate-500">
-                  No icons match &ldquo;{searchTerm}&rdquo;
-                </div>
-              )}
-            </div>
-          )}
-
-          {/* Color Tab Content */}
-          {activeTab === 'color' && (
-            <div className="p-4">
-              {/* Preset Colors */}
-              <div className="grid grid-cols-5 gap-2 mb-4">
-                {PRESET_COLORS.map((color) => {
-                  const isSelected = color === iconColor
-                  return (
-                    <button
-                      key={color}
-                      type="button"
-                      onClick={() => onColorChange(color)}
-                      className={`
-                        relative h-10 w-10
-                        rounded-xl
-                        border-2 transition-all duration-200
-                        hover:scale-110
-                        ${isSelected
-                          ? 'border-white/50 ring-2 ring-white/20'
-                          : 'border-white/[0.08] hover:border-white/[0.2]'}
-                      `}
-                      style={{ backgroundColor: color }}
-                    >
-                      {/* Inner shine */}
-                      <div
-                        className="absolute inset-0 rounded-[10px] opacity-40"
-                        style={{
-                          background: 'linear-gradient(135deg, rgba(255,255,255,0.3) 0%, transparent 50%)'
-                        }}
-                      />
-                      {isSelected && (
-                        <div className="absolute inset-0 flex items-center justify-center">
-                          <CheckIcon className="h-4 w-4 text-white drop-shadow-md" />
-                        </div>
-                      )}
-                    </button>
-                  )
-                })}
-              </div>
-
-              {/* Custom Color Picker */}
-              <div className="flex items-center gap-3 pt-3 border-t border-white/[0.08]">
-                <span className="text-xs text-slate-400 uppercase tracking-wider">Custom</span>
-                <div className="relative flex-1">
-                  <input
-                    type="color"
-                    value={iconColor}
-                    onChange={(e) => onColorChange(e.target.value)}
-                    className={`
-                      h-10 w-full
-                      rounded-xl
-                      border border-white/[0.08]
-                      bg-transparent
-                      cursor-pointer
-                      [&::-webkit-color-swatch-wrapper]:p-1
-                      [&::-webkit-color-swatch]:rounded-lg
-                      [&::-webkit-color-swatch]:border-none
-                    `}
-                  />
-                </div>
-                <div
-                  className="h-8 px-3 flex items-center rounded-lg bg-white/[0.05] text-xs text-slate-300 font-mono"
-                >
-                  {iconColor.toUpperCase()}
-                </div>
-              </div>
-            </div>
-          )}
-        </div>,
-        document.body
-      )}
-    </div>
-  )
-}
+// Canonical location: @/components/ui/IconPicker
+// This re-export maintains backward compatibility for existing imports.
+export { IconPicker } from '@/components/ui/IconPicker'
diff --git a/frontend/src/components/modals/SettingsModal/components/GeneralSettings.tsx b/frontend/src/components/modals/SettingsModal/components/GeneralSettings.tsx
index c355c9589..ddc50d9e8 100644
--- a/frontend/src/components/modals/SettingsModal/components/GeneralSettings.tsx
+++ b/frontend/src/components/modals/SettingsModal/components/GeneralSettings.tsx
@@ -2,6 +2,7 @@
 
 import type { UserSettings, YearDisplayFormat } from '@/types/financial'
 import { CustomSelect } from '@/components/ui/CustomSelect'
+import { ToggleSwitch } from '@/components/ui/ToggleSwitch'
 
 interface GeneralSettingsProps {
   settings: UserSettings
@@ -88,81 +89,30 @@ text-slate-200`}
       </div>
 
       <div className="pt-4 border-t border-white/[0.06]">
-        <div className="flex items-center justify-between">
-          <div>
-            <label className="block text-sm font-medium text-slate-300">
-              Group Items by Category
-            </label>
-            <p className="text-xs text-slate-500 mt-1">
-              Organize financial items into collapsible category sections
-            </p>
-          </div>
-          <button
-            type="button"
-            onClick={() => onGroupItemsByCategoryChange(!settings.groupItemsByCategory)}
-            className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors ${
-              settings.groupItemsByCategory ? 'bg-blue-600' : 'bg-slate-600'
-            }`}
-          >
-            <span
-              className={`inline-block h-4 w-4 transform rounded-full bg-white transition-transform ${
-                settings.groupItemsByCategory ? 'translate-x-6' : 'translate-x-1'
-              }`}
-            />
-          </button>
-        </div>
+        <ToggleSwitch
+          checked={settings.groupItemsByCategory}
+          onChange={onGroupItemsByCategoryChange}
+          label="Group Items by Category"
+          description="Organize financial items into collapsible category sections"
+        />
       </div>
 
       <div className="pt-4 border-t border-white/[0.06]">
-        <div className="flex items-center justify-between">
-          <div>
-            <label className="block text-sm font-medium text-slate-300">
-              Chart Picture-in-Picture
-            </label>
-            <p className="text-xs text-slate-500 mt-1">
-              Show a mini floating chart when scrolling past the main chart
-            </p>
-          </div>
-          <button
-            type="button"
-            onClick={() => onChartPictureInPictureChange(!settings.chartPictureInPicture)}
-            className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors ${
-              settings.chartPictureInPicture ? 'bg-blue-600' : 'bg-slate-600'
-            }`}
-          >
-            <span
-              className={`inline-block h-4 w-4 transform rounded-full bg-white transition-transform ${
-                settings.chartPictureInPicture ? 'translate-x-6' : 'translate-x-1'
-              }`}
-            />
-          </button>
-        </div>
+        <ToggleSwitch
+          checked={settings.chartPictureInPicture}
+          onChange={onChartPictureInPictureChange}
+          label="Chart Picture-in-Picture"
+          description="Show a mini floating chart when scrolling past the main chart"
+        />
       </div>
 
       <div className="pt-4 border-t border-white/[0.06]">
-        <div className="flex items-center justify-between">
-          <div>
-            <label className="block text-sm font-medium text-slate-300">
-              Auto-Execute AI Actions
-            </label>
-            <p className="text-xs text-slate-500 mt-1">
-              Execute AI-suggested changes immediately without confirmation
-            </p>
-          </div>
-          <button
-            type="button"
-            onClick={() => onAutoExecuteToolsChange(!settings.autoExecuteTools)}
-            className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors ${
-              settings.autoExecuteTools ? 'bg-blue-600' : 'bg-slate-600'
-            }`}
-          >
-            <span
-              className={`inline-block h-4 w-4 transform rounded-full bg-white transition-transform ${
-                settings.autoExecuteTools ? 'translate-x-6' : 'translate-x-1'
-              }`}
-            />
-          </button>
-        </div>
+        <ToggleSwitch
+          checked={settings.autoExecuteTools}
+          onChange={onAutoExecuteToolsChange}
+          label="Auto-Execute AI Actions"
+          description="Execute AI-suggested changes immediately without confirmation"
+        />
         {settings.autoExecuteTools && (
           <p className="mt-2 text-xs text-amber-400">
             ⚠️ Actions will be executed immediately. Use with caution.
diff --git a/frontend/src/components/modals/SettingsModal/hooks/useSettingsForm.ts b/frontend/src/components/modals/SettingsModal/hooks/useSettingsForm.ts
index 14944ad16..e00284831 100644
--- a/frontend/src/components/modals/SettingsModal/hooks/useSettingsForm.ts
+++ b/frontend/src/components/modals/SettingsModal/hooks/useSettingsForm.ts
@@ -154,6 +154,7 @@ export function useSettingsForm({ isOpen, onClose }: UseSettingsFormOptions): Us
     timeResolution: settings?.timeResolution ?? 'yearly',
     compoundingFrequency: settings?.compoundingFrequency ?? 'monthly',
     dashboardLayout: settings?.dashboardLayout ?? 'stacked',
+    onboardingCompleted: settings?.onboardingCompleted ?? false,
   }
 
   // Build backward-compatible editedConfigs from RHF form state
diff --git a/frontend/src/components/providers/ThemeProvider.tsx b/frontend/src/components/providers/ThemeProvider.tsx
new file mode 100644
index 000000000..8e4622f98
--- /dev/null
+++ b/frontend/src/components/providers/ThemeProvider.tsx
@@ -0,0 +1,50 @@
+'use client'
+
+import { useEffect, useState, ReactNode } from 'react'
+import { useColorScheme } from '@/stores'
+
+interface ThemeProviderProps {
+  children: ReactNode
+}
+
+/**
+ * ThemeProvider - Applies the color scheme class to the document root.
+ *
+ * This component handles:
+ * - Reading the color scheme from Zustand store (with localStorage persistence)
+ * - Applying 'dark' or 'monet' class to the <html> element
+ * - Handling hydration to prevent flash of wrong theme
+ */
+export function ThemeProvider({ children }: ThemeProviderProps) {
+  const colorScheme = useColorScheme()
+  const [mounted, setMounted] = useState(false)
+
+  // Handle hydration - only apply theme class after mount to avoid mismatch
+  useEffect(() => {
+    setMounted(true)
+  }, [])
+
+  // Apply theme class to document root
+  useEffect(() => {
+    if (!mounted) return
+
+    const root = document.documentElement
+
+    // Remove existing theme classes
+    root.classList.remove('dark', 'monet')
+
+    // Add current theme class
+    root.classList.add(colorScheme)
+
+    // Update body background based on theme
+    if (colorScheme === 'monet') {
+      document.body.style.background = 'linear-gradient(135deg, #FAF8F5 0%, #F0F4F8 50%, #FFFEF9 100%)'
+      document.body.style.color = '#3D3D3D'
+    } else {
+      document.body.style.background = '#000'
+      document.body.style.color = '#fff'
+    }
+  }, [colorScheme, mounted])
+
+  return <>{children}</>
+}
diff --git a/frontend/src/components/ui/ColorSchemeToggle.tsx b/frontend/src/components/ui/ColorSchemeToggle.tsx
new file mode 100644
index 000000000..3da26e255
--- /dev/null
+++ b/frontend/src/components/ui/ColorSchemeToggle.tsx
@@ -0,0 +1,52 @@
+'use client'
+
+import { Moon, Palette } from 'lucide-react'
+import clsx from 'clsx'
+import { useColorScheme, useColorSchemeActions } from '@/stores'
+
+interface ColorSchemeToggleProps {
+  className?: string
+}
+
+/**
+ * ColorSchemeToggle - Toggles between dark and Monet (impressionist) themes.
+ *
+ * Displays a contextual icon based on the current theme:
+ * - Dark mode: Moon icon
+ * - Monet mode: Palette icon (representing the artistic theme)
+ */
+export function ColorSchemeToggle({ className }: ColorSchemeToggleProps) {
+  const colorScheme = useColorScheme()
+  const { toggleColorScheme } = useColorSchemeActions()
+
+  const renderIcon = () => {
+    const iconClass = 'h-3.5 w-3.5 transition-transform duration-200'
+
+    if (colorScheme === 'dark') {
+      return <Moon className={iconClass} />
+    }
+    return <Palette className={clsx(iconClass, 'rotate-12')} />
+  }
+
+  return (
+    <button
+      type="button"
+      onClick={toggleColorScheme}
+      className={clsx(
+        'flex items-center justify-center',
+        'h-7 w-7',
+        'rounded-full',
+        'hover:bg-white/5',
+        'transition-all duration-200',
+        colorScheme === 'dark'
+          ? 'text-slate-500 hover:text-slate-300'
+          : 'text-[var(--monet-lavender)] hover:text-[var(--monet-lavender-dark)]',
+        className
+      )}
+      title={colorScheme === 'dark' ? 'Switch to Monet theme' : 'Switch to dark theme'}
+      aria-label={`Current theme: ${colorScheme}. Click to toggle.`}
+    >
+      {renderIcon()}
+    </button>
+  )
+}
diff --git a/frontend/src/components/ui/CurrencyInput.stories.tsx b/frontend/src/components/ui/CurrencyInput.stories.tsx
new file mode 100644
index 000000000..8777ab19b
--- /dev/null
+++ b/frontend/src/components/ui/CurrencyInput.stories.tsx
@@ -0,0 +1,81 @@
+import type { Meta, StoryFn } from '@storybook/react'
+import { useState } from 'react'
+import { CurrencyInput, InlineCurrencyInput } from './CurrencyInput'
+
+const meta: Meta<typeof CurrencyInput> = {
+  title: 'UI/CurrencyInput',
+  component: CurrencyInput,
+  tags: ['autodocs'],
+  parameters: {
+    backgrounds: { default: 'dark' },
+  },
+  argTypes: {
+    isPercentage: { control: 'boolean' },
+    size: { control: 'select', options: ['default', 'sm'] },
+    maxValue: { control: 'number' },
+  },
+}
+
+export default meta
+
+// Interactive wrapper to manage state
+function CurrencyInputDemo(props: {
+  initialValue?: number
+  isPercentage?: boolean
+  size?: 'default' | 'sm'
+  maxValue?: number
+  placeholder?: string
+}) {
+  const [value, setValue] = useState(props.initialValue ?? 0)
+  return (
+    <div className="w-48">
+      <CurrencyInput
+        value={value}
+        onChange={setValue}
+        isPercentage={props.isPercentage}
+        size={props.size}
+        maxValue={props.maxValue}
+        placeholder={props.placeholder}
+      />
+      <p className="mt-2 text-xs text-slate-500 font-mono">
+        Raw value: {value}
+      </p>
+    </div>
+  )
+}
+
+export const Dollar: StoryFn = () => <CurrencyInputDemo initialValue={50000} />
+
+export const Percentage: StoryFn = () => <CurrencyInputDemo initialValue={7.5} isPercentage />
+
+export const WithMaxValue: StoryFn = () => <CurrencyInputDemo initialValue={0} maxValue={100} isPercentage />
+WithMaxValue.parameters = {
+  docs: { description: { story: 'Capped at 100%. Try typing a larger number.' } },
+}
+
+export const LargerSize: StoryFn = () => <CurrencyInputDemo initialValue={1250000} size="sm" />
+
+export const Empty: StoryFn = () => <CurrencyInputDemo placeholder="Enter amount" />
+
+// InlineCurrencyInput stories
+
+function InlineDemo(props: { isPercentage?: boolean; initialValue?: number }) {
+  const [value, setValue] = useState(props.initialValue ?? 0)
+  return (
+    <div className="flex items-center gap-3">
+      <span className="text-xs text-slate-400">Amount:</span>
+      <InlineCurrencyInput
+        value={value}
+        onChange={setValue}
+        isPercentage={props.isPercentage}
+      />
+      <span className="text-xs text-slate-500 font-mono">{value}</span>
+    </div>
+  )
+}
+
+export const InlineDollar: StoryFn = () => <InlineDemo initialValue={2500} />
+InlineDollar.storyName = 'Inline — Dollar'
+
+export const InlinePercentage: StoryFn = () => <InlineDemo initialValue={8.5} isPercentage />
+InlinePercentage.storyName = 'Inline — Percentage'
diff --git a/frontend/src/components/ui/CurrencyInput.tsx b/frontend/src/components/ui/CurrencyInput.tsx
index 7de2e578d..cdfe9d014 100644
--- a/frontend/src/components/ui/CurrencyInput.tsx
+++ b/frontend/src/components/ui/CurrencyInput.tsx
@@ -39,7 +39,7 @@ export function CurrencyInput({
   return (
     <div className={cn("relative", className)}>
       {!isPercentage && (
-        <span className={cn("absolute left-3 top-1/2 -translate-y-1/2 text-slate-500", textSize)}>$</span>
+        <span className={cn("absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground", textSize)}>$</span>
       )}
       <input
         type="text"
@@ -48,13 +48,13 @@ export function CurrencyInput({
         onChange={handleChange}
         placeholder={placeholder}
         className={cn(
-          "w-full py-2 rounded-lg bg-white/[0.03] border border-white/[0.06] text-white font-mono tabular-nums focus:outline-none focus:border-white/20 placeholder:text-slate-600",
+          "w-full py-2 rounded-lg bg-white/[0.03] border border-white/[0.06] text-foreground font-mono tabular-nums focus:outline-none focus:border-white/20 placeholder:text-muted-foreground",
           textSize,
           isPercentage ? "pl-3 pr-6" : "pl-7 pr-3"
         )}
       />
       {isPercentage && (
-        <span className={cn("absolute right-3 top-1/2 -translate-y-1/2 text-slate-500", textSize)}>%</span>
+        <span className={cn("absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground", textSize)}>%</span>
       )}
     </div>
   )
@@ -88,7 +88,7 @@ export function InlineCurrencyInput({
   return (
     <div className={cn("flex items-center flex-1 h-8 px-2.5 rounded-lg border border-white/[0.06] bg-white/[0.02]", className)}>
       {!isPercentage && (
-        <span className="text-slate-500 text-xs">$</span>
+        <span className="text-muted-foreground text-xs">$</span>
       )}
       <input
         type="text"
@@ -96,10 +96,10 @@ export function InlineCurrencyInput({
         value={value === 0 ? '' : value.toLocaleString()}
         onChange={handleChange}
         placeholder={placeholder}
-        className="flex-1 min-w-0 bg-transparent border-0 outline-none text-white text-xs font-mono tabular-nums placeholder:text-slate-600 ml-1"
+        className="flex-1 min-w-0 bg-transparent border-0 outline-none text-foreground text-xs font-mono tabular-nums placeholder:text-muted-foreground ml-1"
       />
       {isPercentage && (
-        <span className="text-slate-500 text-xs ml-1">%</span>
+        <span className="text-muted-foreground text-xs ml-1">%</span>
       )}
     </div>
   )
diff --git a/frontend/src/components/ui/CustomDropdown.stories.tsx b/frontend/src/components/ui/CustomDropdown.stories.tsx
new file mode 100644
index 000000000..57838aee8
--- /dev/null
+++ b/frontend/src/components/ui/CustomDropdown.stories.tsx
@@ -0,0 +1,101 @@
+import type { Meta, StoryFn } from '@storybook/react'
+import { useState } from 'react'
+import { CustomDropdown, type DropdownOption, type DropdownGroup } from './CustomDropdown'
+import { TrendingUp, TrendingDown, Wallet, PiggyBank, Landmark } from 'lucide-react'
+
+const meta: Meta<typeof CustomDropdown> = {
+  title: 'UI/CustomDropdown',
+  component: CustomDropdown,
+  tags: ['autodocs'],
+  parameters: {
+    backgrounds: { default: 'dark' },
+  },
+}
+
+export default meta
+
+// State wrapper — CustomDropdown is a controlled component
+function DropdownDemo<T extends string = string>(props: {
+  options?: DropdownOption<T>[]
+  groups?: DropdownGroup<T>[]
+  initialValue: T
+  showIcon?: boolean
+  icon?: React.ReactNode
+  iconColor?: string
+  variant?: 'dark' | 'monet'
+  disabled?: boolean
+  minWidth?: string
+}) {
+  const { initialValue, ...rest } = props
+  const [value, setValue] = useState<T>(initialValue)
+  return <CustomDropdown value={value} onChange={setValue} {...rest} />
+}
+
+// --- Stories ---
+
+const frequencyOptions: DropdownOption[] = [
+  { value: 'monthly', label: 'Monthly' },
+  { value: 'quarterly', label: 'Quarterly' },
+  { value: 'semi-annually', label: 'Semi-Annually' },
+  { value: 'annually', label: 'Annually' },
+]
+
+export const FlatOptions: StoryFn = () => (
+  <DropdownDemo options={frequencyOptions} initialValue="monthly" />
+)
+
+const assetGroups: DropdownGroup[] = [
+  {
+    label: 'Liquid Assets',
+    options: [
+      { value: 'cash', label: 'Cash & Savings' },
+      { value: 'stocks', label: 'Stocks' },
+      { value: 'bonds', label: 'Bonds' },
+    ],
+  },
+  {
+    label: 'Illiquid Assets',
+    options: [
+      { value: 'property', label: 'Real Estate' },
+      { value: 'business', label: 'Business Equity' },
+      { value: 'collectibles', label: 'Collectibles' },
+    ],
+  },
+]
+
+export const GroupedOptions: StoryFn = () => (
+  <DropdownDemo groups={assetGroups} initialValue="stocks" minWidth="200px" />
+)
+
+const iconOptions: DropdownOption[] = [
+  { value: 'income', label: 'Income', icon: <TrendingUp className="h-4 w-4" />, iconColor: 'text-emerald-400' },
+  { value: 'expense', label: 'Expense', icon: <TrendingDown className="h-4 w-4" />, iconColor: 'text-rose-400' },
+  { value: 'savings', label: 'Savings', icon: <PiggyBank className="h-4 w-4" />, iconColor: 'text-blue-400' },
+  { value: 'investment', label: 'Investment', icon: <Landmark className="h-4 w-4" />, iconColor: 'text-amber-400' },
+]
+
+export const WithIcons: StoryFn = () => (
+  <DropdownDemo
+    options={iconOptions}
+    initialValue="income"
+    showIcon
+    icon={<Wallet className="h-4 w-4" />}
+    iconColor="text-emerald-400"
+    minWidth="180px"
+  />
+)
+
+export const MonetTheme: StoryFn = () => (
+  <DropdownDemo
+    options={frequencyOptions}
+    initialValue="quarterly"
+    variant="monet"
+  />
+)
+MonetTheme.parameters = {
+  backgrounds: { default: 'monet' },
+}
+
+export const Disabled: StoryFn = () => (
+  <DropdownDemo options={frequencyOptions} initialValue="monthly" disabled />
+)
diff --git a/frontend/src/components/ui/CustomDropdown.tsx b/frontend/src/components/ui/CustomDropdown.tsx
new file mode 100644
index 000000000..4d0289dca
--- /dev/null
+++ b/frontend/src/components/ui/CustomDropdown.tsx
@@ -0,0 +1,256 @@
+"use client"
+
+import { useState, useRef, useEffect, type ReactNode } from 'react'
+import { createPortal } from 'react-dom'
+import * as LucideIcons from 'lucide-react'
+import type { LucideIcon } from 'lucide-react'
+
+const ChevronDownIcon = LucideIcons.ChevronDown as LucideIcon | undefined
+const CheckIcon = LucideIcons.Check as LucideIcon | undefined
+
+export interface DropdownOption<T extends string = string> {
+  value: T
+  label: string
+  icon?: ReactNode
+  iconColor?: string
+}
+
+export interface DropdownGroup<T extends string = string> {
+  label: string
+  options: DropdownOption<T>[]
+}
+
+interface CustomDropdownProps<T extends string = string> {
+  value: T
+  onChange: (value: T) => void
+  options?: DropdownOption<T>[]
+  groups?: DropdownGroup<T>[]
+  disabled?: boolean
+  minWidth?: string
+  showIcon?: boolean
+  icon?: ReactNode
+  iconColor?: string
+  className?: string
+  /** Visual theme: 'dark' (default) or 'monet' for light impressionist style */
+  variant?: 'dark' | 'monet'
+}
+
+// Monet theme colors
+const monetTheme = {
+  cardBg: 'rgba(255, 255, 255, 0.85)',
+  cardBorder: 'rgba(155, 139, 180, 0.2)',
+  dropdownBg: 'rgba(255, 255, 255, 0.98)',
+  dropdownBorder: 'rgba(155, 139, 180, 0.25)',
+  textPrimary: '#3D3D3D',
+  textSecondary: '#6B6B6B',
+  textMuted: '#9B9B9B',
+  sage: '#7FB285',
+  hoverBg: 'rgba(127, 178, 133, 0.1)',
+  selectedBg: 'rgba(127, 178, 133, 0.15)',
+}
+
+export function CustomDropdown<T extends string = string>({
+  value,
+  onChange,
+  options,
+  groups,
+  disabled,
+  minWidth = '140px',
+  showIcon = false,
+  icon,
+  iconColor,
+  className = '',
+  variant = 'dark',
+}: CustomDropdownProps<T>) {
+  const isMonet = variant === 'monet'
+  const [isOpen, setIsOpen] = useState(false)
+  const [dropdownPosition, setDropdownPosition] = useState<{ top: number; left: number; width: number } | null>(null)
+  const ref = useRef<HTMLDivElement>(null)
+  const buttonRef = useRef<HTMLButtonElement>(null)
+  const menuRef = useRef<HTMLDivElement>(null)
+
+  // Find label for current value
+  const getLabel = () => {
+    if (options) {
+      const opt = options.find(o => o.value === value)
+      return opt?.label ?? value
+    }
+    if (groups) {
+      for (const group of groups) {
+        const opt = group.options.find(o => o.value === value)
+        if (opt) return opt.label
+      }
+    }
+    return value
+  }
+
+  // Handle opening - calculate position synchronously before render
+  const handleOpen = () => {
+    if (disabled) return
+    if (!isOpen && buttonRef.current) {
+      const rect = buttonRef.current.getBoundingClientRect()
+      setDropdownPosition({
+        top: rect.bottom + 4,
+        left: rect.left,
+        width: rect.width,
+      })
+    }
+    setIsOpen(!isOpen)
+  }
+
+  // Clear position when closed
+  useEffect(() => {
+    if (!isOpen) {
+      setDropdownPosition(null)
+    }
+  }, [isOpen])
+
+  // Close on outside click (check both button container and portaled menu)
+  useEffect(() => {
+    const handleClickOutside = (e: MouseEvent) => {
+      const target = e.target as Node
+      const clickedInsideButton = ref.current?.contains(target)
+      const clickedInsideMenu = menuRef.current?.contains(target)
+      if (!clickedInsideButton && !clickedInsideMenu) {
+        setIsOpen(false)
+      }
+    }
+    document.addEventListener('mousedown', handleClickOutside)
+    return () => document.removeEventListener('mousedown', handleClickOutside)
+  }, [])
+
+  const handleSelect = (val: T) => {
+    onChange(val)
+    setIsOpen(false)
+  }
+
+  const renderOption = (option: DropdownOption<T>) => {
+    const isSelected = option.value === value
+    return (
+      <button
+        key={option.value}
+        type="button"
+        onClick={() => handleSelect(option.value)}
+        className="w-full flex items-center gap-2 px-3 py-2 text-sm text-left transition-all duration-150"
+        style={isMonet ? {
+          background: isSelected ? monetTheme.selectedBg : 'transparent',
+          color: isSelected ? monetTheme.textPrimary : monetTheme.textSecondary,
+        } : {
+          background: isSelected ? 'rgba(59, 130, 246, 0.15)' : 'transparent',
+          color: isSelected ? 'white' : '#cbd5e1',
+        }}
+        onMouseEnter={(e) => {
+          if (!isSelected) {
+            e.currentTarget.style.background = isMonet ? monetTheme.hoverBg : 'rgba(255, 255, 255, 0.05)'
+          }
+        }}
+        onMouseLeave={(e) => {
+          if (!isSelected) {
+            e.currentTarget.style.background = 'transparent'
+          } else {
+            e.currentTarget.style.background = isMonet ? monetTheme.selectedBg : 'rgba(59, 130, 246, 0.15)'
+          }
+        }}
+      >
+        {showIcon && option.icon && (
+          <span className={`w-4 shrink-0 ${option.iconColor || ''}`}>
+            {option.icon}
+          </span>
+        )}
+        {!showIcon && (
+          <span className="w-4 shrink-0">
+            {isSelected && CheckIcon && (
+              <CheckIcon className="h-3.5 w-3.5" style={{ color: isMonet ? monetTheme.sage : '#60a5fa' }} />
+            )}
+          </span>
+        )}
+        <span className="truncate">{option.label}</span>
+        {showIcon && isSelected && CheckIcon && (
+          <CheckIcon className="h-3.5 w-3.5 ml-auto" style={{ color: isMonet ? monetTheme.sage : '#60a5fa' }} />
+        )}
+      </button>
+    )
+  }
+
+  const dropdownMenu = isOpen && dropdownPosition && typeof document !== 'undefined' ? createPortal(
+    <div
+      ref={menuRef}
+      className="fixed z-[9999] rounded-xl overflow-hidden animate-in fade-in slide-in-from-top-2 duration-150 max-h-[300px] overflow-y-auto"
+      style={{
+        top: dropdownPosition.top,
+        left: dropdownPosition.left,
+        minWidth: Math.max(dropdownPosition.width, parseInt(minWidth) || 140),
+        background: isMonet ? monetTheme.dropdownBg : '#0c0c0c',
+        border: `1px solid ${isMonet ? monetTheme.dropdownBorder : 'rgba(255, 255, 255, 0.12)'}`,
+        boxShadow: isMonet ? '0 8px 32px rgba(155, 139, 180, 0.2)' : '0 25px 50px -12px rgba(0, 0, 0, 0.6)',
+        backdropFilter: isMonet ? 'blur(12px)' : undefined,
+      }}
+    >
+      {groups ? (
+        groups.map((group) => (
+          <div key={group.label}>
+            <div
+              className="px-3 py-2 text-[10px] font-semibold uppercase tracking-wider sticky top-0"
+              style={{
+                color: isMonet ? monetTheme.textMuted : '#64748b',
+                background: isMonet ? 'rgba(255, 255, 255, 0.5)' : 'rgba(255, 255, 255, 0.02)',
+              }}
+            >
+              {group.label}
+            </div>
+            {group.options.map(renderOption)}
+          </div>
+        ))
+      ) : (
+        options?.map(renderOption)
+      )}
+    </div>,
+    document.body
+  ) : null
+
+  return (
+    <div className={`relative ${className}`} ref={ref}>
+      <button
+        ref={buttonRef}
+        type="button"
+        onClick={handleOpen}
+        disabled={disabled}
+        className={`
+          flex items-center justify-between gap-2
+          ${showIcon ? 'pl-8' : 'pl-3'} pr-8 py-2
+          rounded-lg
+          text-sm text-left
+          disabled:opacity-50 disabled:cursor-not-allowed
+          transition-all duration-200
+        `}
+        style={isMonet ? {
+          minWidth,
+          background: monetTheme.cardBg,
+          border: `1px solid ${isOpen ? monetTheme.sage : monetTheme.cardBorder}`,
+          color: monetTheme.textPrimary,
+          boxShadow: isOpen ? `0 0 0 2px ${monetTheme.sage}20` : undefined,
+        } : {
+          minWidth,
+          background: 'rgba(255, 255, 255, 0.03)',
+          border: `1px solid ${isOpen ? 'rgba(59, 130, 246, 0.4)' : 'rgba(255, 255, 255, 0.08)'}`,
+          color: 'white',
+        }}
+      >
+        {showIcon && icon && (
+          <div className={`absolute left-2.5 top-1/2 -translate-y-1/2 ${iconColor || ''}`}>
+            {icon}
+          </div>
+        )}
+        <span className="truncate">{getLabel()}</span>
+        {ChevronDownIcon && (
+          <ChevronDownIcon
+            className={`absolute right-2.5 top-1/2 -translate-y-1/2 h-3.5 w-3.5 transition-transform duration-200 ${isOpen ? 'rotate-180' : ''}`}
+            style={{ color: isMonet ? monetTheme.textMuted : '#64748b' }}
+          />
+        )}
+      </button>
+
+      {dropdownMenu}
+    </div>
+  )
+}
diff --git a/frontend/src/components/ui/CustomSelect.stories.tsx b/frontend/src/components/ui/CustomSelect.stories.tsx
new file mode 100644
index 000000000..d8f2942aa
--- /dev/null
+++ b/frontend/src/components/ui/CustomSelect.stories.tsx
@@ -0,0 +1,103 @@
+import type { Meta, StoryFn } from '@storybook/react'
+import { useState } from 'react'
+import { CustomSelect, type SelectOption } from './CustomSelect'
+
+const meta: Meta<typeof CustomSelect> = {
+  title: 'UI/CustomSelect',
+  component: CustomSelect,
+  tags: ['autodocs'],
+  parameters: {
+    backgrounds: { default: 'dark' },
+  },
+  argTypes: {
+    variant: {
+      control: 'select',
+      options: ['default', 'compact', 'minimal'],
+    },
+    disabled: { control: 'boolean' },
+  },
+}
+
+export default meta
+
+const sampleOptions: SelectOption[] = [
+  { value: 'monthly', label: 'Monthly' },
+  { value: 'quarterly', label: 'Quarterly' },
+  { value: 'annually', label: 'Annually' },
+]
+
+const categoryOptions: SelectOption[] = [
+  { value: 'housing', label: 'Housing' },
+  { value: 'transport', label: 'Transportation' },
+  { value: 'food', label: 'Food & Dining' },
+  { value: 'utilities', label: 'Utilities' },
+  { value: 'healthcare', label: 'Healthcare' },
+  { value: 'entertainment', label: 'Entertainment' },
+  { value: 'other', label: 'Other', disabled: true },
+]
+
+function SelectDemo(props: {
+  options: SelectOption[]
+  variant?: 'default' | 'compact' | 'minimal'
+  placeholder?: string
+  disabled?: boolean
+  initialValue?: string | number
+}) {
+  const [value, setValue] = useState<string | number>(props.initialValue ?? '')
+  return (
+    <div className="w-56">
+      <CustomSelect
+        value={value}
+        onChange={setValue}
+        options={props.options}
+        variant={props.variant}
+        placeholder={props.placeholder}
+        disabled={props.disabled}
+      />
+    </div>
+  )
+}
+
+export const Default: StoryFn = () => (
+  <SelectDemo options={sampleOptions} initialValue="monthly" />
+)
+
+export const Compact: StoryFn = () => (
+  <SelectDemo options={sampleOptions} variant="compact" initialValue="quarterly" />
+)
+
+export const Minimal: StoryFn = () => (
+  <SelectDemo options={sampleOptions} variant="minimal" initialValue="annually" />
+)
+
+export const WithPlaceholder: StoryFn = () => (
+  <SelectDemo options={categoryOptions} placeholder="Select category..." />
+)
+
+export const WithDisabledOption: StoryFn = () => (
+  <SelectDemo options={categoryOptions} placeholder="Select category..." />
+)
+WithDisabledOption.parameters = {
+  docs: { description: { story: 'The "Other" option is disabled and cannot be selected.' } },
+}
+
+export const Disabled: StoryFn = () => (
+  <SelectDemo options={sampleOptions} initialValue="monthly" disabled />
+)
+
+export const AllVariants: StoryFn = () => (
+  <div className="flex flex-col gap-6">
+    <div>
+      <p className="text-xs text-slate-500 mb-2">Default</p>
+      <SelectDemo options={sampleOptions} initialValue="monthly" />
+    </div>
+    <div>
+      <p className="text-xs text-slate-500 mb-2">Compact</p>
+      <SelectDemo options={sampleOptions} variant="compact" initialValue="quarterly" />
+    </div>
+    <div>
+      <p className="text-xs text-slate-500 mb-2">Minimal</p>
+      <SelectDemo options={sampleOptions} variant="minimal" initialValue="annually" />
+    </div>
+  </div>
+)
diff --git a/frontend/src/components/ui/DatePicker.tsx b/frontend/src/components/ui/DatePicker.tsx
new file mode 100644
index 000000000..4d1b3e3ee
--- /dev/null
+++ b/frontend/src/components/ui/DatePicker.tsx
@@ -0,0 +1,400 @@
+"use client"
+
+import { useState, useEffect, useMemo } from 'react'
+import { Button, Dialog, DialogTrigger, Popover } from 'react-aria-components'
+import { ChevronLeft, ChevronRight, CalendarIcon } from 'lucide-react'
+import { cn } from '@/lib/utils'
+
+interface DatePickerProps {
+  value?: string // YYYY-MM-DD format
+  onChange: (value: string) => void
+  placeholder?: string
+  disabled?: boolean
+  className?: string
+  /** Minimum selectable date in YYYY-MM-DD format */
+  minDate?: string
+  /** Maximum selectable date in YYYY-MM-DD format */
+  maxDate?: string
+  /** Visual variant */
+  variant?: 'dark' | 'monet'
+  /** Show error border (validation failed) */
+  hasError?: boolean
+}
+
+const DAYS_OF_WEEK = ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa']
+
+const MONTHS_SHORT = [
+  'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
+  'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec',
+]
+
+const MONTHS_FULL = [
+  'January', 'February', 'March', 'April', 'May', 'June',
+  'July', 'August', 'September', 'October', 'November', 'December',
+]
+
+function getDaysInMonth(year: number, month: number): number {
+  return new Date(year, month + 1, 0).getDate()
+}
+
+function getFirstDayOfMonth(year: number, month: number): number {
+  return new Date(year, month, 1).getDay()
+}
+
+function parseDate(dateStr: string | undefined): { year: number; month: number; day: number } | null {
+  if (!dateStr) return null
+  const [yearStr, monthStr, dayStr] = dateStr.split('-')
+  const year = parseInt(yearStr)
+  const month = parseInt(monthStr) - 1 // 0-indexed
+  const day = parseInt(dayStr)
+  if (isNaN(year) || isNaN(month) || isNaN(day)) return null
+  return { year, month, day }
+}
+
+function formatDateString(year: number, month: number, day: number): string {
+  return `${year}-${String(month + 1).padStart(2, '0')}-${String(day).padStart(2, '0')}`
+}
+
+export function DatePicker({
+  value,
+  onChange,
+  placeholder = 'Select date',
+  disabled,
+  className,
+  minDate,
+  maxDate,
+  variant = 'dark',
+  hasError,
+}: DatePickerProps) {
+  const [isOpen, setIsOpen] = useState(false)
+  const [viewMode, setViewMode] = useState<'days' | 'months' | 'years'>('days')
+
+  const isMonet = variant === 'monet'
+  const parsed = parseDate(value)
+  const parsedMin = parseDate(minDate)
+  const parsedMax = parseDate(maxDate)
+
+  const today = useMemo(() => {
+    const now = new Date()
+    return { year: now.getFullYear(), month: now.getMonth(), day: now.getDate() }
+  }, [])
+
+  const [viewYear, setViewYear] = useState(parsed?.year ?? today.year)
+  const [viewMonth, setViewMonth] = useState(parsed?.month ?? today.month)
+
+  // Sync view when value changes
+  useEffect(() => {
+    if (parsed) {
+      setViewYear(parsed.year)
+      setViewMonth(parsed.month)
+    }
+  }, [value]) // eslint-disable-line react-hooks/exhaustive-deps
+
+  const isDayDisabled = (year: number, month: number, day: number): boolean => {
+    if (parsedMin) {
+      const minVal = parsedMin.year * 10000 + parsedMin.month * 100 + parsedMin.day
+      const dayVal = year * 10000 + month * 100 + day
+      if (dayVal < minVal) return true
+    }
+    if (parsedMax) {
+      const maxVal = parsedMax.year * 10000 + parsedMax.month * 100 + parsedMax.day
+      const dayVal = year * 10000 + month * 100 + day
+      if (dayVal > maxVal) return true
+    }
+    return false
+  }
+
+  const isMonthDisabled = (monthIndex: number): boolean => {
+    if (parsedMin && viewYear < parsedMin.year) return true
+    if (parsedMin && viewYear === parsedMin.year && monthIndex < parsedMin.month) return true
+    if (parsedMax && viewYear > parsedMax.year) return true
+    if (parsedMax && viewYear === parsedMax.year && monthIndex > parsedMax.month) return true
+    return false
+  }
+
+  const canGoPreviousMonth = (): boolean => {
+    if (!parsedMin) return true
+    if (viewYear > parsedMin.year) return true
+    if (viewYear === parsedMin.year && viewMonth > parsedMin.month) return true
+    return false
+  }
+
+  const canGoNextMonth = (): boolean => {
+    if (!parsedMax) return true
+    if (viewYear < parsedMax.year) return true
+    if (viewYear === parsedMax.year && viewMonth < parsedMax.month) return true
+    return false
+  }
+
+  const handleDaySelect = (day: number) => {
+    onChange(formatDateString(viewYear, viewMonth, day))
+    setIsOpen(false)
+  }
+
+  const handleMonthSelect = (monthIndex: number) => {
+    setViewMonth(monthIndex)
+    setViewMode('days')
+  }
+
+  const handleYearSelect = (year: number) => {
+    setViewYear(year)
+    setViewMode('months')
+  }
+
+  const goToPreviousMonth = () => {
+    if (viewMonth === 0) {
+      setViewMonth(11)
+      setViewYear(viewYear - 1)
+    } else {
+      setViewMonth(viewMonth - 1)
+    }
+  }
+
+  const goToNextMonth = () => {
+    if (viewMonth === 11) {
+      setViewMonth(0)
+      setViewYear(viewYear + 1)
+    } else {
+      setViewMonth(viewMonth + 1)
+    }
+  }
+
+  const formatDisplay = (): string | null => {
+    if (!parsed) return null
+    return `${parsed.day} ${MONTHS_SHORT[parsed.month]} ${parsed.year}`
+  }
+
+  // Build day grid
+  const daysInMonth = getDaysInMonth(viewYear, viewMonth)
+  const firstDay = getFirstDayOfMonth(viewYear, viewMonth)
+
+  // Year grid calculations
+  const yearGridStart = Math.floor(viewYear / 12) * 12
+  const yearGridEnd = yearGridStart + 11
+
+  // Theme classes
+  const popoverClass = cn(
+    'min-w-[280px] p-4 rounded-xl border outline-none shadow-2xl',
+    isMonet
+      ? 'bg-white border-[var(--monet-lavender)]/20'
+      : 'bg-[#0f172a] border-white/10'
+  )
+
+  const navButtonClass = cn(
+    'p-1.5 rounded-lg focus:outline-none transition-colors disabled:opacity-30 disabled:cursor-not-allowed',
+    isMonet
+      ? 'text-[var(--monet-text-muted)] hover:text-[var(--monet-text-primary)] hover:bg-[var(--monet-lavender)]/10'
+      : 'text-gray-400 hover:text-white hover:bg-white/10'
+  )
+
+  const headerTextClass = cn(
+    'text-sm font-semibold transition-colors px-2 py-1 rounded',
+    isMonet
+      ? 'text-[var(--monet-text-primary)] hover:text-[var(--monet-sage)] hover:bg-[var(--monet-lavender)]/10'
+      : 'text-white hover:text-blue-400 hover:bg-white/5'
+  )
+
+  const dayOfWeekClass = cn(
+    'text-[10px] font-medium uppercase',
+    isMonet ? 'text-[var(--monet-text-muted)]' : 'text-gray-500'
+  )
+
+  const triggerClass = cn(
+    'flex items-center gap-2 rounded-lg border text-left text-sm transition-colors focus:outline-none disabled:opacity-50 px-3 py-2 w-full',
+    hasError
+      ? 'border-rose-500/40 bg-rose-500/5 focus:border-rose-500/60'
+      : isMonet
+        ? 'bg-[var(--monet-lavender)]/5 border-[var(--monet-lavender)]/15 hover:border-[var(--monet-sage)]/40 focus:border-[var(--monet-sage)]/40'
+        : 'bg-white/[0.03] border-white/[0.06] hover:border-white/20 focus:border-blue-500/50',
+    className
+  )
+
+  const getDayButtonClass = (day: number, isCurrentMonth: boolean) => {
+    const isSelected = parsed && parsed.year === viewYear && parsed.month === viewMonth && parsed.day === day
+    const isToday = today.year === viewYear && today.month === viewMonth && today.day === day
+    const isDisabledDay = !isCurrentMonth || isDayDisabled(viewYear, viewMonth, day)
+
+    return cn(
+      'h-8 w-8 rounded-lg text-xs font-medium transition-colors focus:outline-none',
+      isDisabledDay && (isMonet ? 'text-gray-300 cursor-not-allowed' : 'text-gray-700 cursor-not-allowed'),
+      !isDisabledDay && isSelected && 'bg-blue-500 text-white',
+      !isDisabledDay && !isSelected && isToday && (
+        isMonet
+          ? 'ring-1 ring-[var(--monet-sage)] text-[var(--monet-sage)]'
+          : 'ring-1 ring-blue-500 text-blue-400'
+      ),
+      !isDisabledDay && !isSelected && !isToday && (
+        isMonet
+          ? 'text-[var(--monet-text-primary)] hover:bg-[var(--monet-lavender)]/15'
+          : 'text-gray-300 hover:bg-white/10'
+      ),
+    )
+  }
+
+  const getGridCellClass = (isSelected: boolean, isDisabledCell: boolean) => {
+    return cn(
+      'rounded-lg px-3 py-2 text-xs font-medium transition-colors focus:outline-none',
+      isDisabledCell && (isMonet ? 'text-gray-300 cursor-not-allowed' : 'text-gray-600 cursor-not-allowed'),
+      !isDisabledCell && isSelected && 'bg-blue-500 text-white',
+      !isDisabledCell && !isSelected && (
+        isMonet
+          ? 'text-[var(--monet-text-primary)] hover:bg-[var(--monet-lavender)]/15'
+          : 'text-gray-300 hover:bg-white/10'
+      ),
+    )
+  }
+
+  return (
+    <DialogTrigger isOpen={isOpen} onOpenChange={(open) => {
+      setIsOpen(open)
+      if (!open) setViewMode('days')
+    }}>
+      <Button isDisabled={disabled} className={triggerClass}>
+        <CalendarIcon className={cn(
+          'h-3.5 w-3.5 shrink-0',
+          isMonet ? 'text-[var(--monet-text-muted)]' : 'text-slate-500'
+        )} />
+        <span className={cn(
+          'flex-1',
+          value
+            ? (isMonet ? 'text-[var(--monet-text-primary)]' : 'text-white')
+            : (isMonet ? 'text-[var(--monet-text-muted)]' : 'text-slate-600')
+        )}>
+          {formatDisplay() || placeholder}
+        </span>
+      </Button>
+      <Popover
+        placement="bottom start"
+        className="z-50 entering:animate-in exiting:animate-out entering:fade-in entering:zoom-in-95 exiting:fade-out exiting:zoom-out-95"
+      >
+        <Dialog className={popoverClass}>
+          {viewMode === 'years' ? (
+            <>
+              {/* Decade navigation */}
+              <div className="flex items-center justify-between mb-3">
+                <button type="button" onClick={() => setViewYear(y => y - 12)} className={navButtonClass}>
+                  <ChevronLeft className="h-4 w-4" />
+                </button>
+                <span className={cn('text-sm font-semibold', isMonet ? 'text-[var(--monet-text-primary)]' : 'text-white')}>
+                  {yearGridStart} – {yearGridEnd}
+                </span>
+                <button type="button" onClick={() => setViewYear(y => y + 12)} className={navButtonClass}>
+                  <ChevronRight className="h-4 w-4" />
+                </button>
+              </div>
+              <div className="grid grid-cols-3 gap-1.5">
+                {Array.from({ length: 12 }, (_, i) => yearGridStart + i).map((year) => {
+                  const isSelected = year === viewYear
+                  const isYearDisabled =
+                    (parsedMin !== null && year < (parsedMin?.year ?? 0)) ||
+                    (parsedMax !== null && year > (parsedMax?.year ?? 9999))
+                  return (
+                    <button
+                      key={year}
+                      type="button"
+                      disabled={isYearDisabled}
+                      onClick={() => handleYearSelect(year)}
+                      className={getGridCellClass(isSelected, isYearDisabled)}
+                    >
+                      {year}
+                    </button>
+                  )
+                })}
+              </div>
+            </>
+          ) : viewMode === 'months' ? (
+            <>
+              {/* Year navigation */}
+              <div className="flex items-center justify-between mb-3">
+                <button type="button" onClick={() => setViewYear(y => y - 1)} className={navButtonClass}>
+                  <ChevronLeft className="h-4 w-4" />
+                </button>
+                <button type="button" onClick={() => setViewMode('years')} className={headerTextClass}>
+                  {viewYear}
+                </button>
+                <button type="button" onClick={() => setViewYear(y => y + 1)} className={navButtonClass}>
+                  <ChevronRight className="h-4 w-4" />
+                </button>
+              </div>
+              <div className="grid grid-cols-3 gap-1.5">
+                {MONTHS_SHORT.map((monthLabel, index) => {
+                  const isSelected = viewMonth === index
+                  const isDisabledMonth = isMonthDisabled(index)
+                  return (
+                    <button
+                      key={monthLabel}
+                      type="button"
+                      disabled={isDisabledMonth}
+                      onClick={() => handleMonthSelect(index)}
+                      className={getGridCellClass(isSelected, isDisabledMonth)}
+                    >
+                      {monthLabel}
+                    </button>
+                  )
+                })}
+              </div>
+            </>
+          ) : (
+            <>
+              {/* Month/year navigation */}
+              <div className="flex items-center justify-between mb-3">
+                <button
+                  type="button"
+                  onClick={goToPreviousMonth}
+                  disabled={!canGoPreviousMonth()}
+                  className={navButtonClass}
+                >
+                  <ChevronLeft className="h-4 w-4" />
+                </button>
+                <button type="button" onClick={() => setViewMode('months')} className={headerTextClass}>
+                  {MONTHS_FULL[viewMonth]} {viewYear}
+                </button>
+                <button
+                  type="button"
+                  onClick={goToNextMonth}
+                  disabled={!canGoNextMonth()}
+                  className={navButtonClass}
+                >
+                  <ChevronRight className="h-4 w-4" />
+                </button>
+              </div>
+
+              {/* Day-of-week headers */}
+              <div className="grid grid-cols-7 gap-0.5 mb-1">
+                {DAYS_OF_WEEK.map((dayLabel) => (
+                  <div key={dayLabel} className={cn('h-8 flex items-center justify-center', dayOfWeekClass)}>
+                    {dayLabel}
+                  </div>
+                ))}
+              </div>
+
+              {/* Day grid */}
+              <div className="grid grid-cols-7 gap-0.5">
+                {/* Empty cells for days before the 1st */}
+                {Array.from({ length: firstDay }, (_, i) => (
+                  <div key={`empty-${i}`} className="h-8 w-8" />
+                ))}
+                {/* Day buttons */}
+                {Array.from({ length: daysInMonth }, (_, i) => {
+                  const day = i + 1
+                  const isDisabledDay = isDayDisabled(viewYear, viewMonth, day)
+                  return (
+                    <button
+                      key={day}
+                      type="button"
+                      disabled={isDisabledDay}
+                      onClick={() => handleDaySelect(day)}
+                      className={cn('flex items-center justify-center', getDayButtonClass(day, true))}
+                    >
+                      {day}
+                    </button>
+                  )
+                })}
+              </div>
+            </>
+          )}
+        </Dialog>
+      </Popover>
+    </DialogTrigger>
+  )
+}
diff --git a/frontend/src/components/ui/FormField.stories.tsx b/frontend/src/components/ui/FormField.stories.tsx
new file mode 100644
index 000000000..36373c30d
--- /dev/null
+++ b/frontend/src/components/ui/FormField.stories.tsx
@@ -0,0 +1,161 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { FormField } from './FormField'
+
+const meta = {
+  title: 'UI/FormField',
+  component: FormField,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'centered',
+  },
+  args: {
+    label: 'Field Label',
+  },
+  argTypes: {
+    type: {
+      control: 'select',
+      options: ['text', 'number', 'date', 'email', 'password'],
+    },
+    layout: {
+      control: 'select',
+      options: ['vertical', 'horizontal'],
+    },
+  },
+} satisfies Meta<typeof FormField>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+// --- Basic ---
+
+export const Default: Story = {
+  args: {
+    label: 'Full Name',
+    placeholder: 'John Doe',
+  },
+}
+
+export const WithError: Story = {
+  args: {
+    label: 'Email Address',
+    type: 'email',
+    placeholder: 'name@example.com',
+    error: 'Please enter a valid email address',
+    defaultValue: 'not-an-email',
+  },
+}
+
+export const WithHint: Story = {
+  args: {
+    label: 'Starting Age',
+    type: 'number',
+    hint: 'Your current age, used to calculate timeline years',
+    defaultValue: 30,
+  },
+}
+
+export const Required: Story = {
+  args: {
+    label: 'Salary',
+    type: 'number',
+    required: true,
+    placeholder: '0.00',
+  },
+}
+
+export const NumberWithSuffix: Story = {
+  name: 'Number with Suffix (%)',
+  args: {
+    label: 'Growth Rate',
+    type: 'number',
+    step: '0.1',
+    defaultValue: 7.5,
+    suffix: '%',
+  },
+}
+
+export const Password: Story = {
+  args: {
+    label: 'Password',
+    type: 'password',
+    placeholder: 'Enter password',
+    required: true,
+  },
+}
+
+// --- Layouts ---
+
+export const Horizontal: Story = {
+  args: {
+    label: 'Growth Rate',
+    type: 'number',
+    layout: 'horizontal',
+    hint: 'Annual expected return',
+    defaultValue: 7.5,
+    suffix: '%',
+    inputClassName: 'w-24',
+  },
+}
+
+export const TwoColumnGrid: Story = {
+  name: '2-Column Form Grid',
+  render: () => (
+    <div className="grid grid-cols-2 gap-4 w-96">
+      <FormField label="Ordinary Account" type="number" placeholder="45000.00" />
+      <FormField label="Special Account" type="number" placeholder="20000.00" />
+      <FormField label="MediSave Account" type="number" placeholder="15000.00" />
+      <FormField label="Retirement Account" type="number" placeholder="0.00" />
+    </div>
+  ),
+}
+
+// --- Compositions ---
+
+export const LoginForm: Story = {
+  name: 'Login Form',
+  render: () => (
+    <div className="w-80 space-y-4">
+      <FormField
+        label="Email"
+        type="email"
+        placeholder="name@example.com"
+      />
+      <FormField
+        label="Password"
+        type="password"
+        placeholder="Enter password"
+      />
+    </div>
+  ),
+}
+
+export const SettingsFields: Story = {
+  name: 'Settings Fields',
+  render: () => (
+    <div className="w-96 space-y-6">
+      <FormField
+        label="Starting Age"
+        type="number"
+        hint="Your current age, used to calculate timeline years"
+        defaultValue={30}
+        inputClassName="w-32"
+      />
+      <FormField
+        label="Terminal Age"
+        type="number"
+        hint="Planning horizon end age (e.g., retirement age)"
+        defaultValue={65}
+        inputClassName="w-32"
+      />
+      <FormField
+        label="Inflation Rate"
+        type="number"
+        step="0.1"
+        hint="Expected annual inflation"
+        defaultValue={3.0}
+        suffix="%"
+        inputClassName="w-24"
+      />
+    </div>
+  ),
+}
diff --git a/frontend/src/components/ui/FormField.tsx b/frontend/src/components/ui/FormField.tsx
new file mode 100644
index 000000000..2d24c165d
--- /dev/null
+++ b/frontend/src/components/ui/FormField.tsx
@@ -0,0 +1,139 @@
+"use client"
+
+import * as React from "react"
+import type { UseFormRegisterReturn } from "react-hook-form"
+import { cn } from "@/lib/utils"
+import { useTheme } from "@/lib/theme"
+
+export interface FormFieldProps {
+  label: string
+  hint?: string
+  error?: string
+  required?: boolean
+  type?: "text" | "number" | "date" | "email" | "password"
+  registration?: UseFormRegisterReturn
+  placeholder?: string
+  step?: string
+  defaultValue?: string | number
+  suffix?: string
+  layout?: "vertical" | "horizontal"
+  className?: string
+  inputClassName?: string
+  disabled?: boolean
+  min?: number | string
+  max?: number | string
+  value?: string | number
+  onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void
+}
+
+const FormField = React.forwardRef<HTMLInputElement, FormFieldProps>(
+  (
+    {
+      label,
+      hint,
+      error,
+      required,
+      type = "text",
+      registration,
+      placeholder,
+      step,
+      defaultValue,
+      suffix,
+      layout = "vertical",
+      className,
+      inputClassName,
+      disabled,
+      min,
+      max,
+      value,
+      onChange,
+    },
+    ref
+  ) => {
+    const { isMonet, theme } = useTheme()
+
+    const inputBaseClasses = cn(
+      "w-full px-3 py-2 rounded-lg border text-sm focus:outline-none transition-colors",
+      isMonet
+        ? "border-[var(--monet-lavender)]/20 bg-white/80 text-slate-700 placeholder:text-slate-400 focus:border-[var(--monet-lavender)]/40"
+        : "border-white/10 bg-white/5 text-white placeholder:text-gray-500 focus:border-emerald-400",
+      error && "border-rose-400/50 focus:border-rose-400",
+      disabled && "opacity-50 cursor-not-allowed",
+      inputClassName
+    )
+
+    const labelClasses = cn(
+      "block text-sm font-medium",
+      isMonet ? "text-slate-700" : "text-gray-200"
+    )
+
+    const hintClasses = cn(
+      "text-xs",
+      isMonet ? "text-slate-500" : "text-slate-500"
+    )
+
+    const inputElement = (
+      <div className={cn("relative", suffix && "flex items-center gap-2")}>
+        <input
+          ref={ref}
+          type={type}
+          step={step}
+          placeholder={placeholder}
+          defaultValue={defaultValue}
+          required={required}
+          disabled={disabled}
+          min={min}
+          max={max}
+          value={value}
+          onChange={onChange}
+          className={inputBaseClasses}
+          style={
+            isMonet
+              ? {
+                  background: theme.inputBg,
+                  color: theme.inputText,
+                }
+              : undefined
+          }
+          {...registration}
+        />
+        {suffix && (
+          <span className={cn("text-sm shrink-0", isMonet ? "text-slate-500" : "text-slate-400")}>
+            {suffix}
+          </span>
+        )}
+      </div>
+    )
+
+    if (layout === "horizontal") {
+      return (
+        <div className={cn("flex items-center justify-between gap-4", className)}>
+          <div className="flex-1">
+            <label className={labelClasses}>
+              {label}
+              {required && <span className="ml-1 text-rose-400">*</span>}
+            </label>
+            {hint && !error && <p className={cn(hintClasses, "mt-0.5")}>{hint}</p>}
+          </div>
+          <div className="w-auto shrink-0">{inputElement}</div>
+          {error && <p className="text-xs text-rose-300 w-full">{error}</p>}
+        </div>
+      )
+    }
+
+    return (
+      <div className={cn("space-y-1.5", className)}>
+        <label className={labelClasses}>
+          {label}
+          {required && <span className="ml-1 text-rose-400">*</span>}
+        </label>
+        {hint && !error && <p className={hintClasses}>{hint}</p>}
+        {inputElement}
+        {error && <p className="text-xs text-rose-300">{error}</p>}
+      </div>
+    )
+  }
+)
+FormField.displayName = "FormField"
+
+export { FormField }
diff --git a/frontend/src/components/ui/GlassButton.stories.tsx b/frontend/src/components/ui/GlassButton.stories.tsx
new file mode 100644
index 000000000..1bbd328fa
--- /dev/null
+++ b/frontend/src/components/ui/GlassButton.stories.tsx
@@ -0,0 +1,150 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { GlassButton } from './GlassButton'
+import { Plus, Settings, Trash2, Download, ArrowRight, LogIn, X } from 'lucide-react'
+
+const meta = {
+  title: 'UI/GlassButton',
+  component: GlassButton,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'centered',
+  },
+  argTypes: {
+    variant: {
+      control: 'select',
+      options: ['primary', 'secondary', 'destructive', 'ghost', 'icon'],
+    },
+    size: {
+      control: 'select',
+      options: ['sm', 'default', 'lg', 'full'],
+    },
+    loading: { control: 'boolean' },
+    disabled: { control: 'boolean' },
+  },
+} satisfies Meta<typeof GlassButton>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+// --- Variants ---
+
+export const Primary: Story = {
+  args: { children: 'Save Changes' },
+}
+
+export const Secondary: Story = {
+  args: { variant: 'secondary', children: 'Cancel' },
+}
+
+export const Destructive: Story = {
+  args: { variant: 'destructive', children: 'Delete Account' },
+}
+
+export const Ghost: Story = {
+  args: { variant: 'ghost', children: 'Skip for now' },
+}
+
+export const Icon: Story = {
+  args: { variant: 'icon', icon: <X className="h-4 w-4" />, 'aria-label': 'Close' },
+}
+
+export const AllVariants: Story = {
+  name: 'All Variants',
+  render: () => (
+    <div className="flex flex-wrap items-center gap-3">
+      <GlassButton variant="primary">Primary</GlassButton>
+      <GlassButton variant="secondary">Secondary</GlassButton>
+      <GlassButton variant="destructive">Destructive</GlassButton>
+      <GlassButton variant="ghost">Ghost</GlassButton>
+      <GlassButton variant="icon" icon={<Settings className="h-4 w-4" />} aria-label="Settings" />
+    </div>
+  ),
+}
+
+// --- Sizes ---
+
+export const AllSizes: Story = {
+  name: 'All Sizes',
+  render: () => (
+    <div className="flex flex-wrap items-center gap-3">
+      <GlassButton size="sm">Small</GlassButton>
+      <GlassButton size="default">Default</GlassButton>
+      <GlassButton size="lg">Large</GlassButton>
+    </div>
+  ),
+}
+
+export const FullWidth: Story = {
+  render: () => (
+    <div className="w-80">
+      <GlassButton size="full">Sign In</GlassButton>
+    </div>
+  ),
+}
+
+// --- With Icons ---
+
+export const WithIcons: Story = {
+  name: 'With Icons',
+  render: () => (
+    <div className="flex flex-wrap items-center gap-3">
+      <GlassButton icon={<Plus className="h-4 w-4" />}>Add Item</GlassButton>
+      <GlassButton variant="secondary" icon={<Download className="h-4 w-4" />}>Export</GlassButton>
+      <GlassButton variant="destructive" icon={<Trash2 className="h-4 w-4" />}>Delete</GlassButton>
+      <GlassButton variant="ghost" icon={<ArrowRight className="h-4 w-4" />}>Next</GlassButton>
+    </div>
+  ),
+}
+
+// --- States ---
+
+export const Loading: Story = {
+  args: { loading: true, children: 'Saving...' },
+}
+
+export const Disabled: Story = {
+  args: { disabled: true, children: 'Disabled' },
+}
+
+// --- Compositions ---
+
+export const ActionPair: Story = {
+  name: 'Action Pair (Cancel + Save)',
+  render: () => (
+    <div className="flex gap-3">
+      <GlassButton variant="secondary">Cancel</GlassButton>
+      <GlassButton variant="primary">Save Changes</GlassButton>
+    </div>
+  ),
+}
+
+export const SidebarNav: Story = {
+  name: 'Sidebar Navigation',
+  render: () => (
+    <div className="flex flex-col gap-1 w-56">
+      <GlassButton variant="ghost" className="justify-start" icon={<Settings className="h-4 w-4" />}>
+        General
+      </GlassButton>
+      <GlassButton variant="ghost" className="justify-start bg-white/[0.08] text-white" icon={<Download className="h-4 w-4" />}>
+        Export
+      </GlassButton>
+      <GlassButton variant="ghost" className="justify-start" icon={<Trash2 className="h-4 w-4" />}>
+        Danger Zone
+      </GlassButton>
+    </div>
+  ),
+}
+
+export const LoginButtons: Story = {
+  name: 'Login Page Buttons',
+  render: () => (
+    <div className="flex flex-col gap-3 w-80">
+      <GlassButton size="full" icon={<LogIn className="h-4 w-4" />}>
+        Sign In
+      </GlassButton>
+      <GlassButton variant="secondary" size="full">
+        Create Account
+      </GlassButton>
+    </div>
+  ),
+}
diff --git a/frontend/src/components/ui/GlassButton.tsx b/frontend/src/components/ui/GlassButton.tsx
new file mode 100644
index 000000000..eff862e98
--- /dev/null
+++ b/frontend/src/components/ui/GlassButton.tsx
@@ -0,0 +1,111 @@
+"use client"
+
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+import { cn } from "@/lib/utils"
+import { useTheme } from "@/lib/theme"
+import { Loader2 } from "lucide-react"
+
+const glassButtonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-lg text-sm font-medium transition-all duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/20 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        primary:
+          "bg-emerald-500 hover:bg-emerald-600 text-white",
+        secondary:
+          "border border-white/10 bg-white/5 hover:bg-white/10 text-gray-200",
+        destructive:
+          "bg-rose-500/15 text-rose-400 hover:bg-rose-500/25 border border-rose-500/20",
+        ghost:
+          "text-slate-400 hover:bg-white/5 hover:text-slate-300",
+        icon:
+          "h-8 w-8 rounded-full bg-white/5 hover:bg-white/10 text-slate-300",
+      },
+      size: {
+        sm: "py-1.5 px-3 text-xs",
+        default: "py-2 px-4 text-sm",
+        lg: "py-2.5 px-5 text-sm",
+        full: "w-full py-2.5 px-4 text-sm",
+      },
+    },
+    defaultVariants: {
+      variant: "primary",
+      size: "default",
+    },
+    compoundVariants: [
+      {
+        variant: "icon",
+        className: "p-0",
+      },
+    ],
+  }
+)
+
+export interface GlassButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof glassButtonVariants> {
+  loading?: boolean
+  icon?: React.ReactNode
+}
+
+const GlassButton = React.forwardRef<HTMLButtonElement, GlassButtonProps>(
+  ({ className, variant, size, loading, icon, children, disabled, style, ...props }, ref) => {
+    const { isMonet, theme } = useTheme()
+
+    const monetStyles: React.CSSProperties | undefined = isMonet
+      ? getMonetStyleOverrides(variant ?? "primary", theme)
+      : undefined
+
+    return (
+      <button
+        className={cn(glassButtonVariants({ variant, size, className }))}
+        ref={ref}
+        disabled={disabled || loading}
+        style={{ ...monetStyles, ...style }}
+        {...props}
+      >
+        {loading ? (
+          <Loader2 className="h-4 w-4 animate-spin" />
+        ) : icon ? (
+          <span className="[&_svg]:h-4 [&_svg]:w-4">{icon}</span>
+        ) : null}
+        {children}
+      </button>
+    )
+  }
+)
+GlassButton.displayName = "GlassButton"
+
+function getMonetStyleOverrides(
+  variant: string,
+  theme: ReturnType<typeof useTheme>["theme"]
+): React.CSSProperties {
+  switch (variant) {
+    case "primary":
+      return {
+        background: theme.buttonPrimaryBg,
+        color: theme.buttonPrimaryText,
+        border: "none",
+      }
+    case "secondary":
+      return {
+        background: theme.buttonSecondaryBg,
+        color: theme.buttonSecondaryText,
+        borderColor: theme.buttonSecondaryBorder,
+      }
+    case "ghost":
+      return {
+        color: theme.textSecondary,
+      }
+    case "icon":
+      return {
+        background: theme.controlBg,
+        color: theme.textSecondary,
+      }
+    default:
+      return {}
+  }
+}
+
+export { GlassButton, glassButtonVariants }
diff --git a/frontend/src/components/ui/GlassCard.stories.tsx b/frontend/src/components/ui/GlassCard.stories.tsx
new file mode 100644
index 000000000..982ef51c3
--- /dev/null
+++ b/frontend/src/components/ui/GlassCard.stories.tsx
@@ -0,0 +1,215 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { GlassCard, GlassCardHeader, GlassCardContent, GlassCardFooter } from './GlassCard'
+import { GlassButton } from './GlassButton'
+import { TrendingUp, TrendingDown, DollarSign, Briefcase, Home, Landmark } from 'lucide-react'
+
+const meta = {
+  title: 'UI/GlassCard',
+  component: GlassCard,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'padded',
+  },
+  argTypes: {
+    variant: {
+      control: 'select',
+      options: ['surface', 'elevated', 'glass', 'status'],
+    },
+    padding: {
+      control: 'select',
+      options: ['none', 'compact', 'default', 'spacious'],
+    },
+    hover: { control: 'boolean' },
+    statusColor: {
+      control: 'select',
+      options: ['emerald', 'amber', 'rose', 'blue'],
+    },
+  },
+} satisfies Meta<typeof GlassCard>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+// --- Variants ---
+
+export const Surface: Story = {
+  args: {
+    variant: 'surface',
+    className: 'w-80',
+    children: (
+      <p className="text-sm text-slate-300">Surface card — the default, subtle container.</p>
+    ),
+  },
+}
+
+export const Elevated: Story = {
+  args: {
+    variant: 'elevated',
+    className: 'w-80',
+    children: (
+      <p className="text-sm text-slate-300">Elevated card — slightly more prominent.</p>
+    ),
+  },
+}
+
+export const Glass: Story = {
+  args: {
+    variant: 'glass',
+    className: 'w-80',
+    children: (
+      <p className="text-sm text-slate-300">Glass card — frosted glass with backdrop blur.</p>
+    ),
+  },
+}
+
+// --- Summary Stat Card ---
+
+export const SummaryStat: Story = {
+  name: 'Summary Stat',
+  render: () => (
+    <GlassCard variant="surface" padding="compact" hover className="w-48">
+      <div className="flex items-center gap-2">
+        <div className="h-2 w-2 rounded-full shrink-0 bg-blue-500" />
+        <span className="text-[10px] font-medium uppercase tracking-wider text-slate-400">Net Worth</span>
+      </div>
+      <p className="mt-1 text-xl font-semibold tracking-tight text-slate-100 font-mono tabular-nums">
+        $1,234,567
+      </p>
+      <div className="mt-1 flex items-center gap-1">
+        <TrendingUp className="h-3 w-3 text-emerald-400" />
+        <span className="text-xs font-mono text-emerald-400">+12.4%</span>
+      </div>
+    </GlassCard>
+  ),
+}
+
+// --- Summary Cards Row ---
+
+export const SummaryCardsRow: Story = {
+  name: 'Summary Cards Row',
+  render: () => (
+    <div className="flex gap-3">
+      {[
+        { label: 'Net Worth', value: '$1,234,567', color: 'bg-blue-500', trend: '+12.4%', trendUp: true },
+        { label: 'Assets', value: '$1,890,000', color: 'bg-emerald-500', trend: '+8.2%', trendUp: true },
+        { label: 'Liabilities', value: '($655,433)', color: 'bg-rose-500', trend: '-3.1%', trendUp: false },
+      ].map((item) => (
+        <GlassCard key={item.label} variant="surface" padding="compact" hover className="flex-1">
+          <div className="flex items-center gap-2">
+            <div className={`h-2 w-2 rounded-full shrink-0 ${item.color}`} />
+            <span className="text-[10px] font-medium uppercase tracking-wider text-slate-400">{item.label}</span>
+          </div>
+          <p className="mt-1 text-xl font-semibold tracking-tight text-slate-100 font-mono tabular-nums">
+            {item.value}
+          </p>
+          <div className="mt-1 flex items-center gap-1">
+            {item.trendUp ? <TrendingUp className="h-3 w-3 text-emerald-400" /> : <TrendingDown className="h-3 w-3 text-rose-400" />}
+            <span className={`text-xs font-mono ${item.trendUp ? 'text-emerald-400' : 'text-rose-400'}`}>{item.trend}</span>
+          </div>
+        </GlassCard>
+      ))}
+    </div>
+  ),
+}
+
+// --- Category Card (with compound parts) ---
+
+export const CategoryCard: Story = {
+  name: 'Category Card',
+  render: () => (
+    <GlassCard variant="elevated" padding="none" className="w-80 overflow-hidden">
+      <GlassCardHeader className="px-4 py-3">
+        <div className="flex items-center gap-2">
+          <div className="flex items-center justify-center h-7 w-7 rounded-lg bg-emerald-500/15">
+            <DollarSign className="h-4 w-4 text-emerald-400" />
+          </div>
+          <span className="text-sm font-medium text-slate-200">Income</span>
+        </div>
+        <span className="text-sm font-semibold font-mono tabular-nums text-emerald-400">$8,500</span>
+      </GlassCardHeader>
+      <GlassCardContent className="p-3 space-y-2 py-0">
+        {[
+          { name: 'Salary', amount: '$7,000', icon: Briefcase },
+          { name: 'Rental Income', amount: '$1,200', icon: Home },
+          { name: 'Investments', amount: '$300', icon: Landmark },
+        ].map((item) => (
+          <div key={item.name} className="flex items-center justify-between px-2 py-1.5 rounded-lg hover:bg-white/[0.03] transition-colors">
+            <div className="flex items-center gap-2">
+              <item.icon className="h-3.5 w-3.5 text-slate-500" />
+              <span className="text-sm text-slate-300">{item.name}</span>
+            </div>
+            <span className="text-sm font-mono tabular-nums text-slate-200">{item.amount}</span>
+          </div>
+        ))}
+      </GlassCardContent>
+    </GlassCard>
+  ),
+}
+
+// --- Status-Colored Cards ---
+
+export const StatusCards: Story = {
+  name: 'Status-Colored Cards',
+  render: () => (
+    <div className="flex gap-3">
+      <GlassCard variant="status" statusColor="emerald" className="flex-1">
+        <span className="text-xs font-medium text-emerald-400">Covered</span>
+        <p className="mt-1 text-lg font-semibold text-emerald-300">85%</p>
+      </GlassCard>
+      <GlassCard variant="status" statusColor="amber" className="flex-1">
+        <span className="text-xs font-medium text-amber-400">Partial</span>
+        <p className="mt-1 text-lg font-semibold text-amber-300">10%</p>
+      </GlassCard>
+      <GlassCard variant="status" statusColor="rose" className="flex-1">
+        <span className="text-xs font-medium text-rose-400">Gap</span>
+        <p className="mt-1 text-lg font-semibold text-rose-300">5%</p>
+      </GlassCard>
+    </div>
+  ),
+}
+
+// --- Modal Container ---
+
+export const ModalContainer: Story = {
+  name: 'Modal Container',
+  render: () => (
+    <GlassCard variant="elevated" padding="spacious" className="w-full max-w-lg shadow-2xl">
+      <div className="mb-6 flex items-center justify-between">
+        <div>
+          <p className="text-xs uppercase tracking-wide text-blue-300">Settings</p>
+          <h2 className="text-lg font-semibold text-white">General Settings</h2>
+        </div>
+        <GlassButton variant="icon" aria-label="Close">✕</GlassButton>
+      </div>
+      <div className="space-y-4">
+        <div className="space-y-1.5">
+          <label className="block text-sm font-medium text-gray-200">Display Name</label>
+          <input
+            defaultValue="John Doe"
+            className="w-full px-3 py-2 rounded-lg border border-white/10 focus:border-emerald-400 focus:outline-none bg-white/5 text-sm text-white placeholder:text-gray-500"
+          />
+        </div>
+      </div>
+      <GlassCardFooter className="pt-6">
+        <GlassButton variant="secondary" className="flex-1">Cancel</GlassButton>
+        <GlassButton variant="primary" className="flex-1">Save Changes</GlassButton>
+      </GlassCardFooter>
+    </GlassCard>
+  ),
+}
+
+// --- Glass Panel ---
+
+export const GlassPanel: Story = {
+  name: 'Glass Panel',
+  render: () => (
+    <GlassCard variant="glass" padding="spacious" className="w-80">
+      <h3 className="text-lg font-semibold text-white">Net Worth</h3>
+      <p className="text-sm text-slate-400 mt-1">Your total financial snapshot</p>
+      <p className="text-3xl font-bold font-mono tabular-nums text-emerald-400 mt-4">
+        $1,234,567
+      </p>
+      <p className="mt-1 text-xs text-slate-500">+12.4% from last month</p>
+    </GlassCard>
+  ),
+}
diff --git a/frontend/src/components/ui/GlassCard.tsx b/frontend/src/components/ui/GlassCard.tsx
new file mode 100644
index 000000000..921fefaa4
--- /dev/null
+++ b/frontend/src/components/ui/GlassCard.tsx
@@ -0,0 +1,165 @@
+"use client"
+
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+import { cn } from "@/lib/utils"
+import { useTheme } from "@/lib/theme"
+
+// --- Status color mapping ---
+const statusColorMap = {
+  emerald: {
+    dark: "border-emerald-500/20 bg-emerald-500/5",
+    monet: "border-emerald-400/30 bg-emerald-50",
+  },
+  amber: {
+    dark: "border-amber-500/20 bg-amber-500/5",
+    monet: "border-amber-400/30 bg-amber-50",
+  },
+  rose: {
+    dark: "border-rose-500/20 bg-rose-500/5",
+    monet: "border-rose-400/30 bg-rose-50",
+  },
+  blue: {
+    dark: "border-blue-500/20 bg-blue-500/5",
+    monet: "border-blue-400/30 bg-blue-50",
+  },
+} as const
+
+export type StatusColor = keyof typeof statusColorMap
+
+// --- Card variants ---
+const glassCardVariants = cva("rounded-2xl border transition-all", {
+  variants: {
+    variant: {
+      surface: "border-white/[0.08] bg-[#0a0a0a]/40",
+      elevated: "border-white/[0.08] bg-[#0a0a0a]/60",
+      glass: "border-white/[0.06] bg-white/[0.02] backdrop-blur-xl",
+      status: "", // handled dynamically via statusColor prop
+    },
+    padding: {
+      none: "",
+      compact: "p-3",
+      default: "p-4",
+      spacious: "p-6",
+    },
+    hover: {
+      true: "",
+      false: "",
+    },
+  },
+  compoundVariants: [
+    {
+      variant: "surface",
+      hover: true,
+      className: "hover:border-white/[0.12]",
+    },
+    {
+      variant: "elevated",
+      hover: true,
+      className: "hover:border-white/[0.12]",
+    },
+    {
+      variant: "glass",
+      hover: true,
+      className: "hover:border-white/[0.1]",
+    },
+  ],
+  defaultVariants: {
+    variant: "surface",
+    padding: "default",
+    hover: false,
+  },
+})
+
+export interface GlassCardProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof glassCardVariants> {
+  statusColor?: StatusColor
+}
+
+function GlassCard({
+  className,
+  variant,
+  padding,
+  hover,
+  statusColor,
+  style,
+  children,
+  ...props
+}: GlassCardProps) {
+  const { isMonet, theme } = useTheme()
+
+  const monetStyleOverrides: React.CSSProperties | undefined = isMonet
+    ? variant === "status" && statusColor
+      ? undefined // use Tailwind classes for status colors in monet
+      : {
+          background: variant === "glass" ? theme.cardBg : theme.cardBg,
+          borderColor: theme.cardBorder,
+        }
+    : undefined
+
+  const statusClasses =
+    variant === "status" && statusColor
+      ? statusColorMap[statusColor][isMonet ? "monet" : "dark"]
+      : undefined
+
+  return (
+    <div
+      className={cn(
+        glassCardVariants({ variant: variant === "status" ? "status" : variant, padding, hover }),
+        statusClasses,
+        className
+      )}
+      style={{ ...monetStyleOverrides, ...style }}
+      {...props}
+    >
+      {children}
+    </div>
+  )
+}
+
+// --- Compound sub-components ---
+
+function GlassCardHeader({ className, children, ...props }: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      className={cn("flex items-center justify-between pb-3 border-b border-white/[0.06]", className)}
+      {...props}
+    >
+      {children}
+    </div>
+  )
+}
+
+function GlassCardContent({ className, children, ...props }: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div className={cn("py-3", className)} {...props}>
+      {children}
+    </div>
+  )
+}
+
+function GlassCardFooter({ className, children, ...props }: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      className={cn("flex items-center gap-3 pt-3 border-t border-white/[0.06]", className)}
+      {...props}
+    >
+      {children}
+    </div>
+  )
+}
+
+// Attach sub-components
+GlassCard.displayName = "GlassCard"
+GlassCardHeader.displayName = "GlassCard.Header"
+GlassCardContent.displayName = "GlassCard.Content"
+GlassCardFooter.displayName = "GlassCard.Footer"
+
+export {
+  GlassCard,
+  GlassCardHeader,
+  GlassCardContent,
+  GlassCardFooter,
+  glassCardVariants,
+}
diff --git a/frontend/src/components/ui/IconPicker.tsx b/frontend/src/components/ui/IconPicker.tsx
new file mode 100644
index 000000000..d5f39acda
--- /dev/null
+++ b/frontend/src/components/ui/IconPicker.tsx
@@ -0,0 +1,352 @@
+"use client"
+
+import * as LucideIcons from 'lucide-react'
+import { useState, useRef, useEffect, useCallback } from 'react'
+import { createPortal } from 'react-dom'
+import type { ComponentType, RefObject } from 'react'
+
+const SearchIcon = LucideIcons.Search as ComponentType<{ className?: string }>
+const PaletteIcon = LucideIcons.Palette as ComponentType<{ className?: string }>
+const CheckIcon = LucideIcons.Check as ComponentType<{ className?: string }>
+
+const ICON_OPTIONS = Object.entries(LucideIcons)
+  .filter(([key, component]) => {
+    if (key === 'default' || key === 'createLucideIcon') return false
+    const type = typeof component
+    return type === 'function' || type === 'object'
+  })
+  .map(([key, component]) => {
+    const kebab = key
+      .replace(/([a-z0-9])([A-Z])/g, '$1-$2')
+      .replace(/_/g, '-')
+      .toLowerCase()
+    return { name: kebab, label: kebab, Icon: component as ComponentType<{ className?: string }> }
+  })
+
+const PRESET_COLORS = [
+  '#ef4444', '#f97316', '#eab308', '#22c55e', '#14b8a6',
+  '#06b6d4', '#3b82f6', '#6366f1', '#a855f7', '#ec4899',
+  '#f43f5e', '#84cc16', '#10b981', '#0ea5e9', '#8b5cf6',
+]
+
+function useClickOutside(ref: RefObject<HTMLElement | null>, handler: () => void) {
+  useEffect(() => {
+    const listener = (event: MouseEvent | TouchEvent) => {
+      if (!ref.current || ref.current.contains(event.target as Node)) return
+      handler()
+    }
+    document.addEventListener('mousedown', listener)
+    document.addEventListener('touchstart', listener)
+    return () => {
+      document.removeEventListener('mousedown', listener)
+      document.removeEventListener('touchstart', listener)
+    }
+  }, [ref, handler])
+}
+
+interface IconPickerProps {
+  iconName: string
+  iconColor: string
+  searchQuery: string
+  onIconChange: (name: string) => void
+  onColorChange: (color: string) => void
+  onSearchChange: (query: string) => void
+  disabled?: boolean
+  /** Use compact styling with smaller size */
+  compact?: boolean
+}
+
+export function IconPicker({
+  iconName,
+  iconColor,
+  searchQuery,
+  onIconChange,
+  onColorChange,
+  onSearchChange,
+  disabled,
+  compact,
+}: IconPickerProps) {
+  const [isOpen, setIsOpen] = useState(false)
+  const [activeTab, setActiveTab] = useState<'icon' | 'color'>('icon')
+  const [popoverPosition, setPopoverPosition] = useState({ top: 0, left: 0 })
+  const triggerRef = useRef<HTMLButtonElement>(null)
+  const popoverRef = useRef<HTMLDivElement>(null)
+  const inputRef = useRef<HTMLInputElement>(null)
+
+  // Update popover position based on trigger button location
+  const updatePosition = useCallback(() => {
+    if (triggerRef.current) {
+      const rect = triggerRef.current.getBoundingClientRect()
+      setPopoverPosition({
+        top: rect.bottom + 8, // 8px gap below trigger
+        left: rect.left,
+      })
+    }
+  }, [])
+
+  useClickOutside(popoverRef, () => setIsOpen(false))
+
+  // Update position when opening and on scroll/resize
+  useEffect(() => {
+    if (isOpen) {
+      updatePosition()
+      window.addEventListener('scroll', updatePosition, true)
+      window.addEventListener('resize', updatePosition)
+      return () => {
+        window.removeEventListener('scroll', updatePosition, true)
+        window.removeEventListener('resize', updatePosition)
+      }
+    }
+  }, [isOpen, updatePosition])
+
+  const SelectedIcon = ICON_OPTIONS.find((opt) => opt.name === iconName)?.Icon
+  const searchTerm = searchQuery.trim().toLowerCase()
+  const hasSearch = searchTerm.length > 0
+  const filteredIcons = hasSearch
+    ? ICON_OPTIONS.filter(
+        (opt) => opt.name.toLowerCase().includes(searchTerm) || opt.label.toLowerCase().includes(searchTerm)
+      ).slice(0, 24)
+    : ICON_OPTIONS.slice(0, 24)
+
+  useEffect(() => {
+    if (isOpen && activeTab === 'icon' && inputRef.current) {
+      inputRef.current.focus()
+    }
+  }, [isOpen, activeTab])
+
+  const handleIconSelect = (name: string) => {
+    onIconChange(name)
+    onSearchChange(name)
+  }
+
+  return (
+    <div className="relative">
+      {/* Trigger Button - Icon badge that sits inline */}
+      <button
+        ref={triggerRef}
+        type="button"
+        onClick={() => !disabled && setIsOpen(!isOpen)}
+        disabled={disabled}
+        className={`
+          group relative flex items-center justify-center
+          ${compact ? 'h-7 w-7 rounded-lg border' : 'h-[42px] w-[42px] rounded-xl border-2'}
+          border-white/[0.08] hover:border-white/[0.2]
+          transition-all duration-200
+          disabled:opacity-50 disabled:cursor-not-allowed
+          overflow-hidden
+          ${isOpen ? 'border-white/[0.25] ring-2 ring-white/[0.1]' : ''}
+        `}
+        style={{ backgroundColor: iconColor || '#1f2937' }}
+        aria-label="Change icon"
+      >
+        {/* Subtle inner glow - only for non-compact */}
+        {!compact && (
+          <div
+            className="absolute inset-0 opacity-30"
+            style={{
+              background: `radial-gradient(circle at 30% 30%, rgba(255,255,255,0.3), transparent 60%)`
+            }}
+          />
+        )}
+
+        {/* Icon */}
+        {SelectedIcon ? (
+          <SelectedIcon className={`relative ${compact ? 'h-3.5 w-3.5' : 'h-5 w-5'} text-white drop-shadow-sm`} />
+        ) : (
+          <div className={`relative ${compact ? 'h-3.5 w-3.5' : 'h-5 w-5'} rounded bg-white/20`} />
+        )}
+
+      </button>
+
+      {/* Popover - rendered via portal to avoid clipping in scrollable containers */}
+      {isOpen && typeof document !== 'undefined' && createPortal(
+        <div
+          ref={popoverRef}
+          style={{
+            position: 'fixed',
+            top: popoverPosition.top,
+            left: popoverPosition.left,
+            zIndex: 9999,
+          }}
+          className={`
+            w-72
+            rounded-2xl
+            border border-white/[0.12]
+            bg-[#0c0c0c]
+            shadow-2xl shadow-black/60
+            overflow-hidden
+            animate-in fade-in slide-in-from-top-2 duration-200
+          `}
+        >
+          {/* Tab Header */}
+          <div className="flex border-b border-white/[0.08]">
+            <button
+              type="button"
+              onClick={() => setActiveTab('icon')}
+              className={`
+                flex-1 flex items-center justify-center gap-2
+                px-4 py-3
+                text-xs font-medium uppercase tracking-wider
+                transition-all duration-200
+                ${activeTab === 'icon'
+                  ? 'text-white bg-white/[0.05] border-b-2 border-white/30'
+                  : 'text-slate-500 hover:text-slate-300 hover:bg-white/[0.02]'}
+              `}
+            >
+              <SearchIcon className="h-3.5 w-3.5" />
+              Icon
+            </button>
+            <button
+              type="button"
+              onClick={() => setActiveTab('color')}
+              className={`
+                flex-1 flex items-center justify-center gap-2
+                px-4 py-3
+                text-xs font-medium uppercase tracking-wider
+                transition-all duration-200
+                ${activeTab === 'color'
+                  ? 'text-white bg-white/[0.05] border-b-2 border-white/30'
+                  : 'text-slate-500 hover:text-slate-300 hover:bg-white/[0.02]'}
+              `}
+            >
+              <PaletteIcon className="h-3.5 w-3.5" />
+              Color
+            </button>
+          </div>
+
+          {/* Icon Tab Content */}
+          {activeTab === 'icon' && (
+            <div className="p-3">
+              {/* Search Input */}
+              <div className="relative mb-3">
+                <SearchIcon className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-slate-500" />
+                <input
+                  ref={inputRef}
+                  value={searchQuery}
+                  onChange={(e) => onSearchChange(e.target.value)}
+                  className={`
+                    w-full pl-9 pr-3 py-2.5
+                    rounded-xl
+                    border border-white/[0.08] focus:border-white/[0.2]
+                    bg-white/[0.03] focus:bg-white/[0.05]
+                    text-sm text-white placeholder:text-slate-500
+                    outline-none
+                    transition-all duration-200
+                  `}
+                  placeholder="Search icons..."
+                />
+              </div>
+
+              {/* Icon Grid */}
+              <div className="grid grid-cols-6 gap-1.5 max-h-48 overflow-y-auto custom-scrollbar pr-1">
+                {filteredIcons.map((opt) => {
+                  const isSelected = opt.name === iconName
+                  return (
+                    <button
+                      key={opt.name}
+                      type="button"
+                      onClick={() => handleIconSelect(opt.name)}
+                      title={opt.label}
+                      className={`
+                        relative flex items-center justify-center
+                        h-10 w-10
+                        rounded-lg
+                        border transition-all duration-200
+                        ${isSelected
+                          ? 'border-white/30 bg-white/[0.1]'
+                          : 'border-transparent hover:border-white/[0.1] hover:bg-white/[0.05]'}
+                      `}
+                    >
+                      <opt.Icon className={`h-4 w-4 ${isSelected ? 'text-white' : 'text-slate-400'}`} />
+                      {isSelected && (
+                        <div className="absolute -top-1 -right-1 h-3 w-3 rounded-full bg-emerald-500 flex items-center justify-center">
+                          <CheckIcon className="h-2 w-2 text-white" />
+                        </div>
+                      )}
+                    </button>
+                  )
+                })}
+              </div>
+
+              {hasSearch && filteredIcons.length === 0 && (
+                <div className="py-8 text-center text-xs text-slate-500">
+                  No icons match &ldquo;{searchTerm}&rdquo;
+                </div>
+              )}
+            </div>
+          )}
+
+          {/* Color Tab Content */}
+          {activeTab === 'color' && (
+            <div className="p-4">
+              {/* Preset Colors */}
+              <div className="grid grid-cols-5 gap-2 mb-4">
+                {PRESET_COLORS.map((color) => {
+                  const isSelected = color === iconColor
+                  return (
+                    <button
+                      key={color}
+                      type="button"
+                      onClick={() => onColorChange(color)}
+                      className={`
+                        relative h-10 w-10
+                        rounded-xl
+                        border-2 transition-all duration-200
+                        hover:scale-110
+                        ${isSelected
+                          ? 'border-white/50 ring-2 ring-white/20'
+                          : 'border-white/[0.08] hover:border-white/[0.2]'}
+                      `}
+                      style={{ backgroundColor: color }}
+                    >
+                      {/* Inner shine */}
+                      <div
+                        className="absolute inset-0 rounded-[10px] opacity-40"
+                        style={{
+                          background: 'linear-gradient(135deg, rgba(255,255,255,0.3) 0%, transparent 50%)'
+                        }}
+                      />
+                      {isSelected && (
+                        <div className="absolute inset-0 flex items-center justify-center">
+                          <CheckIcon className="h-4 w-4 text-white drop-shadow-md" />
+                        </div>
+                      )}
+                    </button>
+                  )
+                })}
+              </div>
+
+              {/* Custom Color Picker */}
+              <div className="flex items-center gap-3 pt-3 border-t border-white/[0.08]">
+                <span className="text-xs text-slate-400 uppercase tracking-wider">Custom</span>
+                <div className="relative flex-1">
+                  <input
+                    type="color"
+                    value={iconColor}
+                    onChange={(e) => onColorChange(e.target.value)}
+                    className={`
+                      h-10 w-full
+                      rounded-xl
+                      border border-white/[0.08]
+                      bg-transparent
+                      cursor-pointer
+                      [&::-webkit-color-swatch-wrapper]:p-1
+                      [&::-webkit-color-swatch]:rounded-lg
+                      [&::-webkit-color-swatch]:border-none
+                    `}
+                  />
+                </div>
+                <div
+                  className="h-8 px-3 flex items-center rounded-lg bg-white/[0.05] text-xs text-slate-300 font-mono"
+                >
+                  {iconColor.toUpperCase()}
+                </div>
+              </div>
+            </div>
+          )}
+        </div>,
+        document.body
+      )}
+    </div>
+  )
+}
diff --git a/frontend/src/components/ui/PersonSelector.tsx b/frontend/src/components/ui/PersonSelector.tsx
index 9b6157015..1fd7506d7 100644
--- a/frontend/src/components/ui/PersonSelector.tsx
+++ b/frontend/src/components/ui/PersonSelector.tsx
@@ -14,12 +14,33 @@ interface PersonSelectorProps {
   className?: string
   required?: boolean
   error?: boolean
+  /** Visual theme: 'dark' (default) or 'monet' for light impressionist style */
+  variant?: 'dark' | 'monet'
+  /** Whether to show the "Add new person" option */
+  showCreate?: boolean
+  /** Person IDs to exclude from the dropdown */
+  excludePersonIds?: string[]
 }
 
 /**
  * Dropdown to select a person, with inline creation capability.
  * Only shows included persons.
  */
+// Monet theme colors
+const monetTheme = {
+  cardBg: 'rgba(255, 255, 255, 0.7)',
+  cardBorder: 'rgba(155, 139, 180, 0.15)',
+  dropdownBg: 'rgba(255, 255, 255, 0.95)',
+  dropdownBorder: 'rgba(155, 139, 180, 0.2)',
+  textPrimary: '#3D3D3D',
+  textSecondary: '#6B6B6B',
+  textMuted: '#9B9B9B',
+  sage: '#7FB285',
+  sageLight: '#B5D4B8',
+  hoverBg: 'rgba(127, 178, 133, 0.1)',
+  selectedBg: 'rgba(127, 178, 133, 0.15)',
+}
+
 export function PersonSelector({
   value,
   onChange,
@@ -28,8 +49,15 @@ export function PersonSelector({
   className = '',
   required = false,
   error = false,
+  variant = 'dark',
+  showCreate = true,
+  excludePersonIds = [],
 }: PersonSelectorProps) {
-  const { includedPersons, persons } = usePersonFilter()
+  const isMonet = variant === 'monet'
+  const { includedPersons: allIncludedPersons, persons } = usePersonFilter()
+  const includedPersons = excludePersonIds.length > 0
+    ? allIncludedPersons.filter((p) => !excludePersonIds.includes(p.id))
+    : allIncludedPersons
   const createMutation = useCreatePersonMutation()
 
   const [isOpen, setIsOpen] = useState(false)
@@ -104,14 +132,20 @@ export function PersonSelector({
         className={`
           flex items-center justify-between gap-2 w-full
           px-3.5 py-2.5
-          rounded-lg border
-          bg-white/[0.03]
+          rounded-xl border
           text-left text-sm
-          transition-all
-          ${error ? 'border-red-500/50' : 'border-white/[0.08]'}
-          ${disabled ? 'opacity-50 cursor-not-allowed' : 'hover:border-white/[0.15] focus:border-emerald-500 focus:outline-none focus:ring-1 focus:ring-emerald-500/20'}
-          ${isOpen ? 'border-emerald-500 ring-1 ring-emerald-500/20' : ''}
+          transition-all duration-200
+          ${disabled ? 'opacity-50 cursor-not-allowed' : ''}
         `}
+        style={isMonet ? {
+          background: monetTheme.cardBg,
+          border: `1px solid ${error ? '#E8A898' : isOpen ? monetTheme.sage : monetTheme.cardBorder}`,
+          boxShadow: isOpen ? `0 0 0 2px ${monetTheme.sage}20` : 'none',
+        } : {
+          background: 'rgba(255, 255, 255, 0.03)',
+          border: `1px solid ${error ? 'rgba(239, 68, 68, 0.5)' : isOpen ? '#10b981' : 'rgba(255, 255, 255, 0.08)'}`,
+          boxShadow: isOpen ? '0 0 0 1px rgba(16, 185, 129, 0.2)' : 'none',
+        }}
       >
         <div className="flex items-center gap-2 min-w-0">
           {selectedPerson ? (
@@ -120,38 +154,67 @@ export function PersonSelector({
                 className="w-2.5 h-2.5 rounded-full flex-shrink-0"
                 style={{ backgroundColor: selectedPerson.displayColor || '#64748b' }}
               />
-              <span className="text-white truncate">{selectedPerson.name}</span>
+              <span
+                className="truncate"
+                style={{ color: isMonet ? monetTheme.textPrimary : 'white' }}
+              >
+                {selectedPerson.name}
+              </span>
+              {selectedPerson.relationship && selectedPerson.relationship !== 'self' && (
+                <span
+                  className="text-[10px] flex-shrink-0"
+                  style={{ color: isMonet ? monetTheme.textMuted : '#6b7280' }}
+                >
+                  ({selectedPerson.relationship})
+                </span>
+              )}
             </>
           ) : (
-            <span className="text-gray-500">{placeholder}</span>
+            <span style={{ color: isMonet ? monetTheme.textMuted : '#6b7280' }}>
+              {placeholder}
+            </span>
           )}
         </div>
         <ChevronDown
-          className={`h-4 w-4 flex-shrink-0 text-gray-400 transition-transform ${isOpen ? 'rotate-180' : ''}`}
+          className={`h-4 w-4 flex-shrink-0 transition-transform ${isOpen ? 'rotate-180' : ''}`}
+          style={{ color: isMonet ? monetTheme.textMuted : '#9ca3af' }}
         />
       </button>
 
       {/* Dropdown */}
       {isOpen && (
-        <div className="absolute left-0 right-0 top-full z-50 mt-1 rounded-lg border border-white/[0.12] bg-[#0c0c0c] shadow-xl shadow-black/50 overflow-hidden">
+        <div
+          className="absolute left-0 top-full z-50 mt-1 rounded-xl overflow-hidden min-w-max"
+          style={isMonet ? {
+            background: monetTheme.dropdownBg,
+            border: `1px solid ${monetTheme.dropdownBorder}`,
+            boxShadow: '0 8px 32px rgba(155, 139, 180, 0.15)',
+            backdropFilter: 'blur(12px)',
+          } : {
+            background: '#0c0c0c',
+            border: '1px solid rgba(255, 255, 255, 0.12)',
+            boxShadow: '0 25px 50px -12px rgba(0, 0, 0, 0.5)',
+          }}
+        >
           <div className="max-h-48 overflow-y-auto py-1 custom-scrollbar">
             {/* Unassigned option - only show if not required */}
             {!required && (
               <button
                 type="button"
                 onClick={() => handleSelect(null)}
-                className={`
-                  w-full flex items-center gap-2
-                  px-3 py-2
-                  text-sm text-left
-                  transition-all
-                  ${!value ? 'bg-emerald-500/15 text-white' : 'text-slate-300 hover:bg-white/[0.05]'}
-                `}
+                className="w-full flex items-center gap-2 px-3 py-2.5 text-sm text-left transition-all"
+                style={isMonet ? {
+                  background: !value ? monetTheme.selectedBg : 'transparent',
+                  color: monetTheme.textMuted,
+                } : {
+                  background: !value ? 'rgba(16, 185, 129, 0.15)' : 'transparent',
+                  color: !value ? 'white' : '#cbd5e1',
+                }}
               >
                 <span className="w-4 flex-shrink-0">
-                  {!value && <Check className="h-4 w-4 text-emerald-400" />}
+                  {!value && <Check className="h-4 w-4" style={isMonet ? { color: monetTheme.sage } : { color: '#34d399' }} />}
                 </span>
-                <span className="text-gray-400 italic">Unassigned</span>
+                <span className="italic">Unassigned</span>
               </button>
             )}
 
@@ -163,94 +226,147 @@ export function PersonSelector({
                   key={person.id}
                   type="button"
                   onClick={() => handleSelect(person.id)}
-                  className={`
-                    w-full flex items-center gap-2
-                    px-3 py-2
-                    text-sm text-left
-                    transition-all
-                    ${isSelected ? 'bg-emerald-500/15 text-white' : 'text-slate-300 hover:bg-white/[0.05]'}
-                  `}
+                  className="w-full flex items-center gap-2 px-3 py-2.5 text-sm text-left transition-all"
+                  style={isMonet ? {
+                    background: isSelected ? monetTheme.selectedBg : 'transparent',
+                    color: isSelected ? monetTheme.textPrimary : monetTheme.textSecondary,
+                  } : {
+                    background: isSelected ? 'rgba(16, 185, 129, 0.15)' : 'transparent',
+                    color: isSelected ? 'white' : '#cbd5e1',
+                  }}
+                  onMouseEnter={(e) => {
+                    if (!isSelected && isMonet) {
+                      e.currentTarget.style.background = monetTheme.hoverBg
+                    } else if (!isSelected) {
+                      e.currentTarget.style.background = 'rgba(255, 255, 255, 0.05)'
+                    }
+                  }}
+                  onMouseLeave={(e) => {
+                    if (!isSelected) {
+                      e.currentTarget.style.background = 'transparent'
+                    }
+                  }}
                 >
                   <span className="w-4 flex-shrink-0">
-                    {isSelected && <Check className="h-4 w-4 text-emerald-400" />}
+                    {isSelected && <Check className="h-4 w-4" style={isMonet ? { color: monetTheme.sage } : { color: '#34d399' }} />}
                   </span>
                   <span
                     className="w-2.5 h-2.5 rounded-full flex-shrink-0"
                     style={{ backgroundColor: person.displayColor || '#64748b' }}
                   />
                   <span className="truncate">{person.name}</span>
+                  {person.relationship && person.relationship !== 'self' && (
+                    <span
+                      className="text-[10px] ml-1 flex-shrink-0"
+                      style={{ color: isMonet ? monetTheme.textMuted : '#6b7280' }}
+                    >
+                      ({person.relationship})
+                    </span>
+                  )}
                 </button>
               )
             })}
 
             {includedPersons.length === 0 && (
-              <div className="px-3 py-2 text-xs text-gray-500 italic">
+              <div
+                className="px-3 py-2 text-xs italic"
+                style={isMonet ? { color: monetTheme.textMuted } : { color: '#6b7280' }}
+              >
                 No persons available
               </div>
             )}
           </div>
 
-          {/* Create new person */}
-          <div className="border-t border-white/[0.08]">
-            {isCreating ? (
-              <div className="p-2 space-y-2">
-                {/* Name row */}
-                <div className="flex items-center gap-2">
-                  <User className="h-4 w-4 text-gray-400 flex-shrink-0" />
-                  <input
-                    ref={inputRef}
-                    type="text"
-                    value={newName}
-                    onChange={(e) => setNewName(e.target.value)}
-                    placeholder="Person name"
-                    className="flex-1 bg-white/[0.05] border border-white/[0.1] rounded-md px-2 py-1 text-sm text-white placeholder:text-gray-500 focus:outline-none focus:border-emerald-500"
-                    onKeyDown={(e) => {
-                      if (e.key === 'Escape') {
-                        handleCancelCreate()
-                      }
-                    }}
-                  />
-                </div>
-                {/* Date of birth row */}
-                <div className="flex items-center gap-2">
-                  <Calendar className="h-4 w-4 text-gray-400 flex-shrink-0" />
-                  <input
-                    type="date"
-                    value={newDateOfBirth}
-                    onChange={(e) => setNewDateOfBirth(e.target.value)}
-                    className="flex-1 bg-white/[0.05] border border-white/[0.1] rounded-md px-2 py-1 text-sm text-white focus:outline-none focus:border-emerald-500"
-                  />
-                </div>
-                {/* Action buttons */}
-                <div className="flex items-center justify-end gap-1 pt-1">
-                  <button
-                    type="button"
-                    onClick={handleCancelCreate}
-                    className="px-2 py-1 rounded-md text-xs text-gray-400 hover:bg-white/[0.06]"
-                  >
-                    Cancel
-                  </button>
-                  <button
-                    type="button"
-                    onClick={handleConfirmCreate}
-                    disabled={!newName.trim() || !newDateOfBirth || createMutation.isPending}
-                    className="px-2 py-1 rounded-md text-xs text-emerald-400 bg-emerald-500/10 hover:bg-emerald-500/20 disabled:opacity-50"
-                  >
-                    {createMutation.isPending ? 'Creating...' : 'Create'}
-                  </button>
+          {/* Create new person - only show if showCreate is true */}
+          {showCreate && (
+            <div style={isMonet ? { borderTop: `1px solid ${monetTheme.cardBorder}` } : { borderTop: '1px solid rgba(255, 255, 255, 0.08)' }}>
+              {isCreating ? (
+                <div className="p-2 space-y-2">
+                  {/* Name row */}
+                  <div className="flex items-center gap-2">
+                    <User className="h-4 w-4 flex-shrink-0" style={isMonet ? { color: monetTheme.textMuted } : { color: '#9ca3af' }} />
+                    <input
+                      ref={inputRef}
+                      type="text"
+                      value={newName}
+                      onChange={(e) => setNewName(e.target.value)}
+                      placeholder="Person name"
+                      className="flex-1 rounded-md px-2 py-1 text-sm focus:outline-none"
+                      style={isMonet ? {
+                        background: 'rgba(255, 255, 255, 0.5)',
+                        border: `1px solid ${monetTheme.cardBorder}`,
+                        color: monetTheme.textPrimary,
+                      } : {
+                        background: 'rgba(255, 255, 255, 0.05)',
+                        border: '1px solid rgba(255, 255, 255, 0.1)',
+                        color: 'white',
+                      }}
+                      onKeyDown={(e) => {
+                        if (e.key === 'Escape') {
+                          handleCancelCreate()
+                        }
+                      }}
+                    />
+                  </div>
+                  {/* Date of birth row */}
+                  <div className="flex items-center gap-2">
+                    <Calendar className="h-4 w-4 flex-shrink-0" style={isMonet ? { color: monetTheme.textMuted } : { color: '#9ca3af' }} />
+                    <input
+                      type="date"
+                      value={newDateOfBirth}
+                      onChange={(e) => setNewDateOfBirth(e.target.value)}
+                      className="flex-1 rounded-md px-2 py-1 text-sm focus:outline-none"
+                      style={isMonet ? {
+                        background: 'rgba(255, 255, 255, 0.5)',
+                        border: `1px solid ${monetTheme.cardBorder}`,
+                        color: monetTheme.textPrimary,
+                      } : {
+                        background: 'rgba(255, 255, 255, 0.05)',
+                        border: '1px solid rgba(255, 255, 255, 0.1)',
+                        color: 'white',
+                      }}
+                    />
+                  </div>
+                  {/* Action buttons */}
+                  <div className="flex items-center justify-end gap-1 pt-1">
+                    <button
+                      type="button"
+                      onClick={handleCancelCreate}
+                      className="px-2 py-1 rounded-md text-xs"
+                      style={isMonet ? { color: monetTheme.textMuted } : { color: '#9ca3af' }}
+                    >
+                      Cancel
+                    </button>
+                    <button
+                      type="button"
+                      onClick={handleConfirmCreate}
+                      disabled={!newName.trim() || !newDateOfBirth || createMutation.isPending}
+                      className="px-2 py-1 rounded-md text-xs disabled:opacity-50"
+                      style={isMonet ? {
+                        color: monetTheme.sage,
+                        background: monetTheme.selectedBg,
+                      } : {
+                        color: '#34d399',
+                        background: 'rgba(16, 185, 129, 0.1)',
+                      }}
+                    >
+                      {createMutation.isPending ? 'Creating...' : 'Create'}
+                    </button>
+                  </div>
                 </div>
-              </div>
-            ) : (
-              <button
-                type="button"
-                onClick={handleStartCreate}
-                className="flex items-center gap-2 w-full px-3 py-2 text-sm text-emerald-400 hover:bg-emerald-500/10 transition-colors"
-              >
-                <Plus className="h-4 w-4" />
-                <span>Add new person</span>
-              </button>
-            )}
-          </div>
+              ) : (
+                <button
+                  type="button"
+                  onClick={handleStartCreate}
+                  className="flex items-center gap-2 w-full px-3 py-2.5 text-sm transition-colors"
+                  style={isMonet ? { color: monetTheme.sage } : { color: '#34d399' }}
+                >
+                  <Plus className="h-4 w-4" />
+                  <span>Add new person</span>
+                </button>
+              )}
+            </div>
+          )}
         </div>
       )}
     </div>
diff --git a/frontend/src/components/ui/SegmentedControl.stories.tsx b/frontend/src/components/ui/SegmentedControl.stories.tsx
new file mode 100644
index 000000000..43587718a
--- /dev/null
+++ b/frontend/src/components/ui/SegmentedControl.stories.tsx
@@ -0,0 +1,84 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { useState } from 'react'
+import { SegmentedControl } from './SegmentedControl'
+import { BarChart3, LineChart, Table } from 'lucide-react'
+
+const meta = {
+  title: 'UI/SegmentedControl',
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'centered',
+  },
+} satisfies Meta
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+// --- Basic ---
+
+export const TwoOptions: Story = {
+  render: () => {
+    const [value, setValue] = useState('monthly')
+    return (
+      <SegmentedControl
+        value={value}
+        onChange={setValue}
+        options={[
+          { value: 'monthly', label: 'Monthly' },
+          { value: 'yearly', label: 'Yearly' },
+        ]}
+      />
+    )
+  },
+}
+
+export const ThreeOptions: Story = {
+  render: () => {
+    const [value, setValue] = useState('chart')
+    return (
+      <SegmentedControl
+        value={value}
+        onChange={setValue}
+        options={[
+          { value: 'chart', label: 'Chart' },
+          { value: 'table', label: 'Table' },
+          { value: 'summary', label: 'Summary' },
+        ]}
+      />
+    )
+  },
+}
+
+export const WithIcons: Story = {
+  render: () => {
+    const [value, setValue] = useState('line')
+    return (
+      <SegmentedControl
+        value={value}
+        onChange={setValue}
+        options={[
+          { value: 'line', label: 'Line', icon: <LineChart /> },
+          { value: 'bar', label: 'Bar', icon: <BarChart3 /> },
+          { value: 'table', label: 'Table', icon: <Table /> },
+        ]}
+      />
+    )
+  },
+}
+
+export const SmallSize: Story = {
+  render: () => {
+    const [value, setValue] = useState('nominal')
+    return (
+      <SegmentedControl
+        value={value}
+        onChange={setValue}
+        size="sm"
+        options={[
+          { value: 'nominal', label: 'Nominal' },
+          { value: 'real', label: 'Real' },
+        ]}
+      />
+    )
+  },
+}
diff --git a/frontend/src/components/ui/SegmentedControl.tsx b/frontend/src/components/ui/SegmentedControl.tsx
new file mode 100644
index 000000000..79ea5bbd7
--- /dev/null
+++ b/frontend/src/components/ui/SegmentedControl.tsx
@@ -0,0 +1,76 @@
+"use client"
+
+import * as React from "react"
+import { cn } from "@/lib/utils"
+import { useTheme } from "@/lib/theme"
+
+export interface SegmentedControlOption {
+  value: string
+  label: string
+  icon?: React.ReactNode
+}
+
+export interface SegmentedControlProps {
+  options: SegmentedControlOption[]
+  value: string
+  onChange: (value: string) => void
+  size?: "sm" | "default"
+  className?: string
+}
+
+function SegmentedControl({
+  options,
+  value,
+  onChange,
+  size = "default",
+  className,
+}: SegmentedControlProps) {
+  const { isMonet } = useTheme()
+
+  const containerClasses = cn(
+    "inline-flex p-0.5 border",
+    size === "sm" ? "rounded-md" : "rounded-lg",
+    isMonet
+      ? "bg-white/60 border-[var(--monet-lavender)]/20"
+      : "bg-white/[0.03] border-white/[0.08]",
+    className
+  )
+
+  return (
+    <div className={containerClasses}>
+      {options.map((option) => {
+        const isActive = option.value === value
+
+        const buttonClasses = cn(
+          "flex items-center gap-1.5 font-medium transition-all duration-150",
+          size === "sm"
+            ? "px-2 py-0.5 rounded text-[11px]"
+            : "px-2.5 py-1 rounded-md text-xs",
+          isActive
+            ? isMonet
+              ? "bg-[var(--monet-lavender)]/15 text-[var(--monet-text-primary)] shadow-sm"
+              : "bg-white/[0.1] text-white shadow-sm"
+            : isMonet
+              ? "text-slate-500 hover:text-slate-700"
+              : "text-slate-500 hover:text-slate-300"
+        )
+
+        return (
+          <button
+            key={option.value}
+            type="button"
+            onClick={() => onChange(option.value)}
+            className={buttonClasses}
+          >
+            {option.icon && (
+              <span className="[&_svg]:h-3.5 [&_svg]:w-3.5">{option.icon}</span>
+            )}
+            {option.label}
+          </button>
+        )
+      })}
+    </div>
+  )
+}
+
+export { SegmentedControl }
diff --git a/frontend/src/components/ui/StatusBadge.stories.tsx b/frontend/src/components/ui/StatusBadge.stories.tsx
new file mode 100644
index 000000000..dfb4352d7
--- /dev/null
+++ b/frontend/src/components/ui/StatusBadge.stories.tsx
@@ -0,0 +1,120 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { StatusBadge } from './StatusBadge'
+import { CheckCircle2, AlertTriangle, XCircle, Clock, Shield, Info } from 'lucide-react'
+
+const meta = {
+  title: 'UI/StatusBadge',
+  component: StatusBadge,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'centered',
+  },
+  argTypes: {
+    status: {
+      control: 'select',
+      options: ['success', 'warning', 'danger', 'info', 'neutral', 'purple'],
+    },
+    size: {
+      control: 'select',
+      options: ['sm', 'md', 'lg'],
+    },
+  },
+} satisfies Meta<typeof StatusBadge>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+// --- Single Status ---
+
+export const Success: Story = {
+  args: { status: 'success', children: 'Active', icon: <CheckCircle2 /> },
+}
+
+export const Warning: Story = {
+  args: { status: 'warning', children: 'Pending', icon: <AlertTriangle /> },
+}
+
+export const Danger: Story = {
+  args: { status: 'danger', children: 'Overdue', icon: <XCircle /> },
+}
+
+export const InfoStatus: Story = {
+  args: { status: 'info', children: 'New', icon: <Info /> },
+}
+
+export const Neutral: Story = {
+  args: { status: 'neutral', children: 'Draft', icon: <Clock /> },
+}
+
+export const Purple: Story = {
+  args: { status: 'purple', children: 'Premium' },
+}
+
+// --- All Statuses ---
+
+export const AllStatuses: Story = {
+  name: 'All Statuses',
+  render: () => (
+    <div className="flex flex-wrap gap-2">
+      <StatusBadge status="success" icon={<CheckCircle2 />}>Active</StatusBadge>
+      <StatusBadge status="warning" icon={<AlertTriangle />}>Pending</StatusBadge>
+      <StatusBadge status="danger" icon={<XCircle />}>Overdue</StatusBadge>
+      <StatusBadge status="info" icon={<Info />}>New</StatusBadge>
+      <StatusBadge status="neutral" icon={<Clock />}>Draft</StatusBadge>
+      <StatusBadge status="purple">Premium</StatusBadge>
+    </div>
+  ),
+}
+
+// --- All Sizes ---
+
+export const AllSizes: Story = {
+  name: 'All Sizes',
+  render: () => (
+    <div className="flex flex-col gap-4">
+      <div className="flex items-center gap-2">
+        <span className="text-xs text-slate-500 w-8">sm</span>
+        <StatusBadge status="success" size="sm" icon={<Shield />}>Covered</StatusBadge>
+        <StatusBadge status="warning" size="sm">Partial</StatusBadge>
+      </div>
+      <div className="flex items-center gap-2">
+        <span className="text-xs text-slate-500 w-8">md</span>
+        <StatusBadge status="success" size="md" icon={<Shield />}>Covered</StatusBadge>
+        <StatusBadge status="warning" size="md">Partial</StatusBadge>
+      </div>
+      <div className="flex items-center gap-2">
+        <span className="text-xs text-slate-500 w-8">lg</span>
+        <StatusBadge status="success" size="lg" icon={<Shield />}>Covered</StatusBadge>
+        <StatusBadge status="warning" size="lg">Partial</StatusBadge>
+      </div>
+    </div>
+  ),
+}
+
+// --- In Context ---
+
+export const InlineInCard: Story = {
+  name: 'Inline in Card',
+  render: () => (
+    <div className="flex items-center gap-3 px-4 py-3 rounded-lg border border-white/[0.06] bg-[#111111] w-80">
+      <div className="flex-1">
+        <span className="text-sm text-slate-200">Life Insurance</span>
+        <p className="text-xs text-slate-500 mt-0.5">$500k coverage</p>
+      </div>
+      <StatusBadge status="success" icon={<CheckCircle2 />}>Active</StatusBadge>
+    </div>
+  ),
+}
+
+export const CoverageBadges: Story = {
+  name: 'Coverage Badges',
+  render: () => (
+    <div className="flex flex-wrap gap-2">
+      <StatusBadge status="success" icon={<Shield />}>Life</StatusBadge>
+      <StatusBadge status="success" icon={<Shield />}>Health</StatusBadge>
+      <StatusBadge status="warning" icon={<AlertTriangle />}>Disability</StatusBadge>
+      <StatusBadge status="danger" icon={<XCircle />}>Critical Illness</StatusBadge>
+      <StatusBadge status="neutral" icon={<Clock />}>Long-term Care</StatusBadge>
+    </div>
+  ),
+}
diff --git a/frontend/src/components/ui/StatusBadge.tsx b/frontend/src/components/ui/StatusBadge.tsx
new file mode 100644
index 000000000..6b120a3f3
--- /dev/null
+++ b/frontend/src/components/ui/StatusBadge.tsx
@@ -0,0 +1,70 @@
+"use client"
+
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+import { cn } from "@/lib/utils"
+
+// TODO(human): Define the statusBadgeVariants using CVA.
+//
+// Base classes (already provided):
+//   "inline-flex items-center gap-1.5 rounded-full border font-medium"
+//
+// You need to define two variant axes:
+//
+// 1. `status` — each maps to a color using the opacity pattern:
+//      bg-{color}-500/15, text-{color}-400, border-{color}-500/20
+//    Statuses: success (emerald), warning (amber), danger (rose),
+//              info (blue), neutral (slate), purple (violet)
+//
+// 2. `size` — sm, md (default), lg:
+//      sm:  "px-2 py-0.5 text-[10px]"
+//      md:  "px-3 py-1 text-xs"
+//      lg:  "px-4 py-1.5 text-sm"
+//
+// Default variants: status → "neutral", size → "md"
+//
+const statusBadgeVariants = cva(
+  "inline-flex items-center gap-1.5 rounded-full border font-medium",
+  {
+    variants: {
+      // TODO(human): Replace these placeholder classes with proper color mappings.
+      // Each status should use the opacity pattern: bg-{color}-500/15, text-{color}-400, border-{color}-500/20
+      // Statuses → color: success→emerald, warning→amber, danger→rose, info→blue, neutral→slate, purple→violet
+      status: {
+        success: "",  // e.g. "bg-emerald-500/15 text-emerald-400 border-emerald-500/20"
+        warning: "",  // e.g. "bg-amber-500/15 text-amber-400 border-amber-500/20"
+        danger: "",   // e.g. "bg-rose-500/15 text-rose-400 border-rose-500/20"
+        info: "",     // e.g. "bg-blue-500/15 text-blue-400 border-blue-500/20"
+        neutral: "",  // e.g. "bg-slate-500/15 text-slate-400 border-slate-500/20"
+        purple: "",   // e.g. "bg-violet-500/15 text-violet-400 border-violet-500/20"
+      },
+      // Sizes: sm, md (default), lg
+      size: {
+        sm: "",   // e.g. "px-2 py-0.5 text-[10px]"
+        md: "",   // e.g. "px-3 py-1 text-xs"
+        lg: "",   // e.g. "px-4 py-1.5 text-sm"
+      },
+    },
+    defaultVariants: {
+      status: "neutral",
+      size: "md",
+    },
+  }
+)
+
+export interface StatusBadgeProps
+  extends React.HTMLAttributes<HTMLSpanElement>,
+    VariantProps<typeof statusBadgeVariants> {
+  icon?: React.ReactNode
+}
+
+function StatusBadge({ className, status, size, icon, children, ...props }: StatusBadgeProps) {
+  return (
+    <span className={cn(statusBadgeVariants({ status, size, className }))} {...props}>
+      {icon && <span className="[&_svg]:h-3 [&_svg]:w-3">{icon}</span>}
+      {children}
+    </span>
+  )
+}
+
+export { StatusBadge, statusBadgeVariants }
diff --git a/frontend/src/components/ui/ToggleSwitch.stories.tsx b/frontend/src/components/ui/ToggleSwitch.stories.tsx
new file mode 100644
index 000000000..ef76c3731
--- /dev/null
+++ b/frontend/src/components/ui/ToggleSwitch.stories.tsx
@@ -0,0 +1,114 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { useState } from 'react'
+import { ToggleSwitch } from './ToggleSwitch'
+
+const meta = {
+  title: 'UI/ToggleSwitch',
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'centered',
+  },
+} satisfies Meta
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+// --- Basic ---
+
+export const On: Story = {
+  render: () => {
+    const [checked, setChecked] = useState(true)
+    return <ToggleSwitch checked={checked} onChange={setChecked} />
+  },
+}
+
+export const Off: Story = {
+  render: () => {
+    const [checked, setChecked] = useState(false)
+    return <ToggleSwitch checked={checked} onChange={setChecked} />
+  },
+}
+
+export const WithLabel: Story = {
+  render: () => {
+    const [checked, setChecked] = useState(true)
+    return (
+      <div className="w-96">
+        <ToggleSwitch
+          checked={checked}
+          onChange={setChecked}
+          label="Dark Mode"
+        />
+      </div>
+    )
+  },
+}
+
+export const WithDescription: Story = {
+  render: () => {
+    const [checked, setChecked] = useState(false)
+    return (
+      <div className="w-96">
+        <ToggleSwitch
+          checked={checked}
+          onChange={setChecked}
+          label="Auto-Execute AI Actions"
+          description="Execute AI-suggested changes immediately without confirmation"
+        />
+      </div>
+    )
+  },
+}
+
+export const Disabled: Story = {
+  render: () => (
+    <div className="flex gap-6">
+      <ToggleSwitch checked={false} onChange={() => {}} disabled />
+      <ToggleSwitch checked={true} onChange={() => {}} disabled />
+    </div>
+  ),
+}
+
+// --- Settings Row Context ---
+
+export const SettingsRows: Story = {
+  name: 'Settings Rows',
+  render: () => {
+    const [groupItems, setGroupItems] = useState(true)
+    const [pipMode, setPipMode] = useState(false)
+    const [autoExecute, setAutoExecute] = useState(false)
+    return (
+      <div className="w-[28rem] space-y-0">
+        <div className="py-4 border-b border-white/[0.06]">
+          <ToggleSwitch
+            checked={groupItems}
+            onChange={setGroupItems}
+            label="Group Items by Category"
+            description="Organize financial items into collapsible category sections"
+          />
+        </div>
+        <div className="py-4 border-b border-white/[0.06]">
+          <ToggleSwitch
+            checked={pipMode}
+            onChange={setPipMode}
+            label="Chart Picture-in-Picture"
+            description="Show a mini floating chart when scrolling past the main chart"
+          />
+        </div>
+        <div className="py-4">
+          <ToggleSwitch
+            checked={autoExecute}
+            onChange={setAutoExecute}
+            label="Auto-Execute AI Actions"
+            description="Execute AI-suggested changes immediately without confirmation"
+          />
+          {autoExecute && (
+            <p className="mt-2 text-xs text-amber-400">
+              ⚠️ Actions will be executed immediately. Use with caution.
+            </p>
+          )}
+        </div>
+      </div>
+    )
+  },
+}
diff --git a/frontend/src/components/ui/ToggleSwitch.tsx b/frontend/src/components/ui/ToggleSwitch.tsx
new file mode 100644
index 000000000..38bb4920d
--- /dev/null
+++ b/frontend/src/components/ui/ToggleSwitch.tsx
@@ -0,0 +1,87 @@
+"use client"
+
+import * as React from "react"
+import { cn } from "@/lib/utils"
+import { useTheme } from "@/lib/theme"
+
+export interface ToggleSwitchProps {
+  checked: boolean
+  onChange: (checked: boolean) => void
+  label?: string
+  description?: string
+  disabled?: boolean
+  className?: string
+}
+
+function ToggleSwitch({
+  checked,
+  onChange,
+  label,
+  description,
+  disabled = false,
+  className,
+}: ToggleSwitchProps) {
+  const { isMonet } = useTheme()
+
+  const trackClasses = cn(
+    "relative inline-flex h-6 w-11 items-center rounded-full transition-colors shrink-0",
+    disabled && "opacity-50 cursor-not-allowed",
+    checked
+      ? isMonet
+        ? "bg-[var(--monet-lavender)]"
+        : "bg-blue-600"
+      : isMonet
+        ? "bg-slate-300"
+        : "bg-slate-600"
+  )
+
+  const thumbClasses = cn(
+    "inline-block h-4 w-4 transform rounded-full bg-white transition-transform",
+    checked ? "translate-x-6" : "translate-x-1"
+  )
+
+  const toggle = (
+    <button
+      type="button"
+      role="switch"
+      aria-checked={checked}
+      disabled={disabled}
+      onClick={() => onChange(!checked)}
+      className={trackClasses}
+    >
+      <span className={thumbClasses} />
+    </button>
+  )
+
+  if (!label) {
+    return toggle
+  }
+
+  return (
+    <div className={cn("flex items-center justify-between", className)}>
+      <div>
+        <label
+          className={cn(
+            "block text-sm font-medium",
+            isMonet ? "text-slate-700" : "text-slate-300"
+          )}
+        >
+          {label}
+        </label>
+        {description && (
+          <p
+            className={cn(
+              "text-xs mt-1",
+              isMonet ? "text-slate-500" : "text-slate-500"
+            )}
+          >
+            {description}
+          </p>
+        )}
+      </div>
+      {toggle}
+    </div>
+  )
+}
+
+export { ToggleSwitch }
diff --git a/frontend/src/components/ui/badge.stories.tsx b/frontend/src/components/ui/badge.stories.tsx
new file mode 100644
index 000000000..65282ccea
--- /dev/null
+++ b/frontend/src/components/ui/badge.stories.tsx
@@ -0,0 +1,47 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { Badge } from './badge'
+
+const meta = {
+  title: 'UI/Badge',
+  component: Badge,
+  tags: ['autodocs'],
+  argTypes: {
+    variant: {
+      control: 'select',
+      options: ['default', 'secondary', 'destructive', 'outline'],
+    },
+  },
+} satisfies Meta<typeof Badge>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+// --- Base Variants ---
+
+export const Default: Story = {
+  args: { children: 'Badge' },
+}
+
+export const Secondary: Story = {
+  args: { variant: 'secondary', children: 'Secondary' },
+}
+
+export const Destructive: Story = {
+  args: { variant: 'destructive', children: 'Destructive' },
+}
+
+export const Outline: Story = {
+  args: { variant: 'outline', children: 'Outline' },
+}
+
+export const AllVariants: Story = {
+  render: () => (
+    <div className="flex flex-wrap gap-2">
+      <Badge>Default</Badge>
+      <Badge variant="secondary">Secondary</Badge>
+      <Badge variant="destructive">Destructive</Badge>
+      <Badge variant="outline">Outline</Badge>
+    </div>
+  ),
+}
+
diff --git a/frontend/src/components/ui/button.stories.tsx b/frontend/src/components/ui/button.stories.tsx
new file mode 100644
index 000000000..6db17339a
--- /dev/null
+++ b/frontend/src/components/ui/button.stories.tsx
@@ -0,0 +1,134 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { Button } from './button'
+import { ChevronRight, Mail, Loader2, Plus, Trash2 } from 'lucide-react'
+
+const meta = {
+  title: 'UI/Button',
+  component: Button,
+  tags: ['autodocs'],
+  argTypes: {
+    variant: {
+      control: 'select',
+      options: ['default', 'destructive', 'outline', 'secondary', 'ghost', 'link'],
+    },
+    size: {
+      control: 'select',
+      options: ['default', 'sm', 'lg', 'icon'],
+    },
+    disabled: { control: 'boolean' },
+    asChild: { table: { disable: true } },
+  },
+} satisfies Meta<typeof Button>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+// --- CVA Variants (base component) ---
+
+export const Default: Story = {
+  args: { children: 'Button' },
+}
+
+export const Destructive: Story = {
+  args: { variant: 'destructive', children: 'Delete' },
+}
+
+export const Outline: Story = {
+  args: { variant: 'outline', children: 'Outline' },
+}
+
+export const Secondary: Story = {
+  args: { variant: 'secondary', children: 'Secondary' },
+}
+
+export const Ghost: Story = {
+  args: { variant: 'ghost', children: 'Ghost' },
+}
+
+export const Link: Story = {
+  args: { variant: 'link', children: 'Link Button' },
+}
+
+// --- Sizes ---
+
+export const Small: Story = {
+  args: { size: 'sm', children: 'Small' },
+}
+
+export const Large: Story = {
+  args: { size: 'lg', children: 'Large' },
+}
+
+export const Icon: Story = {
+  args: { size: 'icon', children: <Plus className="h-4 w-4" /> },
+}
+
+// --- With Icons ---
+
+export const WithLeadingIcon: Story = {
+  args: {
+    children: (
+      <>
+        <Mail className="h-4 w-4" />
+        Login with Email
+      </>
+    ),
+  },
+}
+
+export const WithTrailingIcon: Story = {
+  args: {
+    children: (
+      <>
+        Next
+        <ChevronRight className="h-4 w-4" />
+      </>
+    ),
+  },
+}
+
+// --- States ---
+
+export const Disabled: Story = {
+  args: { children: 'Disabled', disabled: true },
+}
+
+export const Loading: Story = {
+  args: {
+    disabled: true,
+    children: (
+      <>
+        <Loader2 className="h-4 w-4 animate-spin" />
+        Please wait
+      </>
+    ),
+  },
+}
+
+export const DestructiveWithIcon: Story = {
+  args: {
+    variant: 'destructive',
+    children: (
+      <>
+        <Trash2 className="h-4 w-4" />
+        Delete Account
+      </>
+    ),
+  },
+}
+
+// --- All Variants Grid ---
+
+export const AllVariants: Story = {
+  render: () => (
+    <div className="flex flex-wrap gap-3">
+      <Button variant="default">Default</Button>
+      <Button variant="secondary">Secondary</Button>
+      <Button variant="outline">Outline</Button>
+      <Button variant="ghost">Ghost</Button>
+      <Button variant="link">Link</Button>
+      <Button variant="destructive">Destructive</Button>
+    </div>
+  ),
+}
+
diff --git a/frontend/src/components/ui/card.stories.tsx b/frontend/src/components/ui/card.stories.tsx
new file mode 100644
index 000000000..b78b960da
--- /dev/null
+++ b/frontend/src/components/ui/card.stories.tsx
@@ -0,0 +1,37 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from './card'
+import { Button } from './button'
+
+const meta = {
+  title: 'UI/Card',
+  component: Card,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'padded',
+  },
+} satisfies Meta<typeof Card>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+// --- Base Component ---
+
+export const Default: Story = {
+  render: () => (
+    <Card className="w-[350px]">
+      <CardHeader>
+        <CardTitle>Card Title</CardTitle>
+        <CardDescription>Card description goes here.</CardDescription>
+      </CardHeader>
+      <CardContent>
+        <p className="text-sm text-muted-foreground">
+          This is the card content area.
+        </p>
+      </CardContent>
+      <CardFooter>
+        <Button className="w-full">Action</Button>
+      </CardFooter>
+    </Card>
+  ),
+}
+
diff --git a/frontend/src/components/ui/input.stories.tsx b/frontend/src/components/ui/input.stories.tsx
new file mode 100644
index 000000000..a747bd92d
--- /dev/null
+++ b/frontend/src/components/ui/input.stories.tsx
@@ -0,0 +1,46 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { Input } from './input'
+
+const meta = {
+  title: 'UI/Input',
+  component: Input,
+  tags: ['autodocs'],
+  argTypes: {
+    type: {
+      control: 'select',
+      options: ['text', 'email', 'password', 'number', 'search', 'tel', 'url'],
+    },
+    disabled: { control: 'boolean' },
+    placeholder: { control: 'text' },
+  },
+} satisfies Meta<typeof Input>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+// --- Base Component Variants ---
+
+export const Default: Story = {
+  args: { placeholder: 'Enter text...' },
+}
+
+export const Email: Story = {
+  args: { type: 'email', placeholder: 'name@example.com' },
+}
+
+export const Password: Story = {
+  args: { type: 'password', placeholder: 'Enter password' },
+}
+
+export const Number: Story = {
+  args: { type: 'number', placeholder: '0' },
+}
+
+export const Disabled: Story = {
+  args: { placeholder: 'Disabled input', disabled: true },
+}
+
+export const WithValue: Story = {
+  args: { defaultValue: 'Hello World' },
+}
+
diff --git a/frontend/src/hooks/queries/useFinancialMutations.ts b/frontend/src/hooks/queries/useFinancialMutations.ts
index 561169fb6..67b94a626 100644
--- a/frontend/src/hooks/queries/useFinancialMutations.ts
+++ b/frontend/src/hooks/queries/useFinancialMutations.ts
@@ -1,8 +1,10 @@
 import { useMutation, useQueryClient } from '@tanstack/react-query'
-import { financialApi } from '@/api/financial'
+import { financialApi, settingsApi } from '@/api/financial'
 import { QUERY_KEYS } from '@/lib/queryKeys'
 import { propertyPlannerV2Keys } from './usePropertyPlannerV2Query'
 import { PERSONS_QUERY_KEY } from './usePersonsQuery'
+import type { UserSettings } from '@/types/financial'
+import { useFeatureModulesStore } from '@/stores/featureModulesStore'
 
 export { useLoadSampleDataMutation } from './useLoadSampleDataMutation'
 
@@ -11,7 +13,7 @@ export function useDeleteAllFinancialDataMutation() {
 
   return useMutation({
     mutationFn: () => financialApi.resetAllUserData(),
-    onSuccess: () => {
+    onSuccess: async () => {
       // Clear all caches
       queryClient.setQueryData(QUERY_KEYS.financial.assets, [])
       queryClient.setQueryData(QUERY_KEYS.financial.liabilities, [])
@@ -21,8 +23,25 @@ export function useDeleteAllFinancialDataMutation() {
       queryClient.setQueryData(propertyPlannerV2Keys.list(), [])
       queryClient.setQueryData(PERSONS_QUERY_KEY, [])
 
+      // Reset onboardingCompleted so the wizard can re-trigger after a fresh start
+      try {
+        const currentSettings = queryClient.getQueryData<UserSettings>(QUERY_KEYS.settings.user)
+        if (currentSettings?.onboardingCompleted) {
+          await settingsApi.updateUserSettings({
+            ...currentSettings,
+            onboardingCompleted: false,
+          })
+          queryClient.invalidateQueries({ queryKey: QUERY_KEYS.settings.user })
+        }
+      } catch {
+        // Non-critical — wizard trigger will still work on next page load
+      }
+
       // Invalidate all financial queries with single call
       queryClient.invalidateQueries({ queryKey: QUERY_KEYS.financial.all })
+
+      // Show post-reset choice modal (Dashboard vs Wizard)
+      useFeatureModulesStore.getState().openPostResetChoice()
     },
   })
 }
diff --git a/frontend/src/hooks/queries/useLoadSampleDataMutation.ts b/frontend/src/hooks/queries/useLoadSampleDataMutation.ts
index 4276cfac6..a572c6ed5 100644
--- a/frontend/src/hooks/queries/useLoadSampleDataMutation.ts
+++ b/frontend/src/hooks/queries/useLoadSampleDataMutation.ts
@@ -1,16 +1,18 @@
 import { useMutation, useQueryClient } from '@tanstack/react-query'
-import { financialApi, propertyPlannerV2Api, personsApi, cashAccountsApi, fundFlowRulesApi } from '@/api/financial'
+import { financialApi, propertyPlannerV2Api, personsApi, cashAccountsApi, fundFlowRulesApi, settingsApi } from '@/api/financial'
 import type { CashAccount } from '@/types/financial'
 import type { CPFAccount } from '@/types/cpf'
 import type { ScenarioEvent } from '@/types/scenario'
 import type { PropertyScenarioFull } from '@/types/propertyPlannerV2'
 import type { Person } from '@/types/person'
 import type { FundFlowRuleCreatePayload } from '@/types/fundFlowRules'
+import type { UserSettings } from '@/types/financial'
 import { QUERY_KEYS } from '@/lib/queryKeys'
 import { CPF_QUERY_KEY } from './useCpfQuery'
 import { propertyPlannerV2Keys } from './usePropertyPlannerV2Query'
 import { PERSONS_QUERY_KEY } from './usePersonsQuery'
 import { getProfileGenerator } from '@/components/modals/ProfileSelectionModal/profileGenerators'
+import { useFeatureModulesStore } from '@/stores/featureModulesStore'
 
 /**
  * Mutation hook for loading a financial profile template.
@@ -346,7 +348,41 @@ export function useLoadSampleDataMutation() {
         persons: createdPersons,
       }
     },
-    onSuccess: (data) => {
+    onSuccess: async (data) => {
+      // Sync onboardingCompleted based on whether the profile has data
+      try {
+        const currentSettings = queryClient.getQueryData<UserSettings>(QUERY_KEYS.settings.user)
+        if (data.persons.length === 0) {
+          // Blank profile: reset so wizard auto-triggers
+          if (currentSettings?.onboardingCompleted) {
+            queryClient.setQueryData<UserSettings>(QUERY_KEYS.settings.user, {
+              ...currentSettings,
+              onboardingCompleted: false,
+            })
+            settingsApi.updateUserSettings({
+              ...currentSettings,
+              onboardingCompleted: false,
+            })
+          }
+          useFeatureModulesStore.getState().openPostResetChoice()
+        } else {
+          // Non-blank profile: mark onboarding complete so wizard doesn't
+          // re-trigger on refresh
+          if (currentSettings && !currentSettings.onboardingCompleted) {
+            queryClient.setQueryData<UserSettings>(QUERY_KEYS.settings.user, {
+              ...currentSettings,
+              onboardingCompleted: true,
+            })
+            settingsApi.updateUserSettings({
+              ...currentSettings,
+              onboardingCompleted: true,
+            })
+          }
+        }
+      } catch {
+        // Non-critical — wizard trigger will still work on next page load
+      }
+
       // Update all caches with the new data
       queryClient.setQueryData(QUERY_KEYS.financial.assets, data.assets)
       queryClient.setQueryData(QUERY_KEYS.financial.investments, data.investments)
diff --git a/frontend/src/hooks/useQuestionnaireAutoPopulate.ts b/frontend/src/hooks/useQuestionnaireAutoPopulate.ts
new file mode 100644
index 000000000..fdd0c0ef7
--- /dev/null
+++ b/frontend/src/hooks/useQuestionnaireAutoPopulate.ts
@@ -0,0 +1,304 @@
+'use client'
+
+import { useMemo } from 'react'
+import { usePersonsQuery } from '@/hooks/queries/usePersonsQuery'
+import { useIncomesQuery } from '@/hooks/queries/useIncomesQuery'
+import { useLiabilitiesQuery } from '@/hooks/queries/useLiabilitiesQuery'
+import { useAssetsQuery } from '@/hooks/queries/useAssetsQuery'
+import type { Frequency } from '@/types/financial'
+import type {
+  LifeTpdAnswers,
+  CriticalIllnessAnswers,
+  SelfInsuranceAnswers,
+} from '@/stores/coverageGuidelinesStore'
+
+// Frequency multipliers to convert to annual
+const frequencyMultipliers: Record<Frequency, number> = {
+  weekly: 52,
+  biweekly: 26,
+  monthly: 12,
+  quarterly: 4,
+  annual: 1,
+  one_time: 0,
+}
+
+/**
+ * Calculate age from date of birth
+ */
+function calculateAge(dateOfBirth: string): number {
+  const today = new Date()
+  const birth = new Date(dateOfBirth)
+  let age = today.getFullYear() - birth.getFullYear()
+  const monthDiff = today.getMonth() - birth.getMonth()
+  if (monthDiff < 0 || (monthDiff === 0 && today.getDate() < birth.getDate())) {
+    age--
+  }
+  return Math.max(0, age)
+}
+
+/**
+ * Estimate years until a dependent is financially independent
+ * Assumes independence at age 22 (university graduation)
+ */
+function yearsUntilIndependent(age: number): number {
+  const independenceAge = 22
+  return Math.max(0, independenceAge - age)
+}
+
+/**
+ * Categories that indicate liquid assets (accessible for emergencies/self-insurance)
+ */
+const LIQUID_ASSET_CATEGORIES = [
+  'cash',
+  'savings',
+  'checking',
+  'money_market',
+  'stocks',
+  'bonds',
+  'etf',
+  'mutual_fund',
+  'investment',
+  'brokerage',
+]
+
+/**
+ * Categories that indicate mortgage debt
+ */
+const MORTGAGE_CATEGORIES = ['mortgage', 'home_loan', 'housing_loan', 'hdb_loan']
+
+export interface AutoPopulatedData {
+  // Life/TPD data
+  lifeTpd: Partial<LifeTpdAnswers>
+  // Critical Illness data
+  criticalIllness: Partial<CriticalIllnessAnswers>
+  // Self Insurance data
+  selfInsurance: Partial<SelfInsuranceAnswers>
+  // Computed values for display
+  computed: {
+    totalAnnualIncome: number
+    primaryPersonIncome: number
+    spouseIncome: number
+    totalMortgage: number
+    totalOtherDebts: number
+    totalLiquidAssets: number
+    totalAssets: number
+    dependentCount: number
+    youngestDependentAge: number | null
+    hasSpouse: boolean
+    spouseHasIncome: boolean
+  }
+  // Data source indicators (to show user what was auto-filled)
+  sources: {
+    income: boolean
+    liabilities: boolean
+    assets: boolean
+    persons: boolean
+  }
+  // Loading state
+  isLoading: boolean
+}
+
+/**
+ * Hook to auto-populate questionnaire data from existing app data
+ *
+ * @param selectedPersonId - The person ID for whom we're calculating coverage
+ */
+export function useQuestionnaireAutoPopulate(selectedPersonId: string | null): AutoPopulatedData {
+  const { data: persons, isLoading: personsLoading } = usePersonsQuery()
+  const { data: incomes, isLoading: incomesLoading } = useIncomesQuery()
+  const { data: liabilities, isLoading: liabilitiesLoading } = useLiabilitiesQuery()
+  const { data: assets, isLoading: assetsLoading } = useAssetsQuery()
+
+  const isLoading = personsLoading || incomesLoading || liabilitiesLoading || assetsLoading
+
+  return useMemo(() => {
+    // Default empty result
+    const emptyResult: AutoPopulatedData = {
+      lifeTpd: {},
+      criticalIllness: {},
+      selfInsurance: {},
+      computed: {
+        totalAnnualIncome: 0,
+        primaryPersonIncome: 0,
+        spouseIncome: 0,
+        totalMortgage: 0,
+        totalOtherDebts: 0,
+        totalLiquidAssets: 0,
+        totalAssets: 0,
+        dependentCount: 0,
+        youngestDependentAge: null,
+        hasSpouse: false,
+        spouseHasIncome: false,
+      },
+      sources: {
+        income: false,
+        liabilities: false,
+        assets: false,
+        persons: false,
+      },
+      isLoading,
+    }
+
+    if (isLoading) return emptyResult
+
+    // ─────────────────────────────────────────────────────────
+    // PERSONS: Calculate dependents and spouse info
+    // ─────────────────────────────────────────────────────────
+    const includedPersons = persons?.filter(p => p.isIncluded) ?? []
+    const primaryPerson = selectedPersonId
+      ? includedPersons.find(p => p.id === selectedPersonId)
+      : includedPersons[0]
+
+    // Other persons (potential spouse + dependents)
+    const otherPersons = includedPersons.filter(p => p.id !== primaryPerson?.id)
+
+    // Compute age for each person
+    const personsWithAge = otherPersons.map(p => ({
+      ...p,
+      age: calculateAge(p.dateOfBirth),
+    }))
+
+    // Identify spouse using relationship field, fallback to first adult (18+) if no relationship set
+    const spouse = personsWithAge.find(p => p.relationship === 'spouse')
+      ?? personsWithAge.find(p => p.age >= 18 && (!p.relationship || p.relationship === 'self'))
+      ?? null
+
+    // Dependents: persons with relationship 'child', or fallback to age < 22 if no relationship set
+    const dependents = personsWithAge.filter(p =>
+      p.relationship === 'child'
+      || ((!p.relationship || p.relationship === 'self') && p.age < 22 && p.id !== spouse?.id)
+    )
+
+    const youngestDependent = dependents.length > 0
+      ? dependents.reduce((youngest, p) => p.age < youngest.age ? p : youngest)
+      : null
+
+    // ─────────────────────────────────────────────────────────
+    // INCOME: Calculate annual income for primary person and spouse
+    // ─────────────────────────────────────────────────────────
+    const activeIncomes = incomes?.filter(inc => {
+      if (inc.endDate && new Date(inc.endDate) < new Date()) return false
+      return true
+    }) ?? []
+
+    // Primary person's income
+    const primaryPersonIncomes = activeIncomes.filter(inc => inc.personId === primaryPerson?.id)
+    const primaryPersonIncome = primaryPersonIncomes.reduce((sum, inc) => {
+      const multiplier = frequencyMultipliers[inc.frequency as Frequency] || 0
+      return sum + (inc.amount * multiplier)
+    }, 0)
+
+    // Spouse's income (if spouse exists)
+    const spouseIncomes = spouse
+      ? activeIncomes.filter(inc => inc.personId === spouse.id)
+      : []
+    const spouseIncome = spouseIncomes.reduce((sum, inc) => {
+      const multiplier = frequencyMultipliers[inc.frequency as Frequency] || 0
+      return sum + (inc.amount * multiplier)
+    }, 0)
+
+    // Total household income
+    const totalAnnualIncome = activeIncomes.reduce((sum, inc) => {
+      const multiplier = frequencyMultipliers[inc.frequency as Frequency] || 0
+      return sum + (inc.amount * multiplier)
+    }, 0)
+
+    // ─────────────────────────────────────────────────────────
+    // LIABILITIES: Calculate mortgage and other debts
+    // ─────────────────────────────────────────────────────────
+    const activeLiabilities = liabilities?.filter(lib => {
+      if (lib.endDate && new Date(lib.endDate) < new Date()) return false
+      return true
+    }) ?? []
+
+    const mortgageDebts = activeLiabilities.filter(lib =>
+      MORTGAGE_CATEGORIES.some(cat => lib.category.toLowerCase().includes(cat))
+    )
+    const totalMortgage = mortgageDebts.reduce((sum, lib) => sum + lib.currentBalance, 0)
+
+    const otherDebts = activeLiabilities.filter(lib =>
+      !MORTGAGE_CATEGORIES.some(cat => lib.category.toLowerCase().includes(cat))
+    )
+    const totalOtherDebts = otherDebts.reduce((sum, lib) => sum + lib.currentBalance, 0)
+
+    // ─────────────────────────────────────────────────────────
+    // ASSETS: Calculate liquid assets and total assets
+    // ─────────────────────────────────────────────────────────
+    const activeAssets = assets?.filter(asset => {
+      if (asset.endDate && new Date(asset.endDate) < new Date()) return false
+      return true
+    }) ?? []
+
+    const liquidAssets = activeAssets.filter(asset =>
+      LIQUID_ASSET_CATEGORIES.some(cat => asset.category.toLowerCase().includes(cat))
+    )
+    const totalLiquidAssets = liquidAssets.reduce((sum, asset) => sum + asset.currentValue, 0)
+    const totalAssets = activeAssets.reduce((sum, asset) => sum + asset.currentValue, 0)
+
+    // ─────────────────────────────────────────────────────────
+    // BUILD QUESTIONNAIRE PRE-POPULATION DATA
+    // ─────────────────────────────────────────────────────────
+
+    const hasSpouse = !!spouse
+    const spouseHasIncome = spouseIncome > 0
+
+    // Life/TPD answers
+    const lifeTpdData: Partial<LifeTpdAnswers> = {
+      dependentPersonIds: dependents.map(d => d.id),
+      dependentCount: dependents.length,
+      youngestDependentAge: youngestDependent?.age ?? null,
+      yearsUntilIndependent: youngestDependent
+        ? yearsUntilIndependent(youngestDependent.age)
+        : 0,
+      mortgageBalance: totalMortgage,
+      otherDebts: totalOtherDebts,
+      existingAssets: totalAssets,
+      spousePersonId: spouse?.id ?? null,
+      spouseHasIncome,
+      spouseIncome: spouseHasIncome ? spouseIncome : 0,
+    }
+
+    // Critical Illness answers
+    // Estimate emergency fund months based on liquid assets / monthly expenses
+    const estimatedMonthlyExpenses = primaryPersonIncome / 12 * 0.7 // Assume 70% of income goes to expenses
+    const emergencyFundMonths = estimatedMonthlyExpenses > 0
+      ? Math.round(totalLiquidAssets / estimatedMonthlyExpenses)
+      : 0
+
+    const criticalIllnessData: Partial<CriticalIllnessAnswers> = {
+      emergencyFundMonths: Math.min(emergencyFundMonths, 24), // Cap at 24 months
+      monthlyExpenses: Math.round(estimatedMonthlyExpenses),
+    }
+
+    // Self Insurance answers
+    const selfInsuranceData: Partial<SelfInsuranceAnswers> = {
+      liquidNetWorth: totalLiquidAssets,
+    }
+
+    return {
+      lifeTpd: lifeTpdData,
+      criticalIllness: criticalIllnessData,
+      selfInsurance: selfInsuranceData,
+      computed: {
+        totalAnnualIncome,
+        primaryPersonIncome,
+        spouseIncome,
+        totalMortgage,
+        totalOtherDebts,
+        totalLiquidAssets,
+        totalAssets,
+        dependentCount: dependents.length,
+        youngestDependentAge: youngestDependent?.age ?? null,
+        hasSpouse,
+        spouseHasIncome,
+      },
+      sources: {
+        income: activeIncomes.length > 0,
+        liabilities: activeLiabilities.length > 0,
+        assets: activeAssets.length > 0,
+        persons: includedPersons.length > 0,
+      },
+      isLoading: false,
+    }
+  }, [persons, incomes, liabilities, assets, selectedPersonId, isLoading])
+}
diff --git a/frontend/src/lib/coverage-journey-utils.ts b/frontend/src/lib/coverage-journey-utils.ts
new file mode 100644
index 000000000..f5827c62c
--- /dev/null
+++ b/frontend/src/lib/coverage-journey-utils.ts
@@ -0,0 +1,539 @@
+/**
+ * Coverage Journey Utilities
+ *
+ * Calculations for life stage detection, coverage projections, and milestone alerts.
+ * Used by the Coverage Journey view to show how insurance needs change over time.
+ */
+
+// =============================================================================
+// Types
+// =============================================================================
+
+/**
+ * Life stages that affect insurance coverage needs
+ */
+export type LifeStage =
+  | 'young_professional'  // 22-30, no dependents
+  | 'new_parent'          // First child under 5
+  | 'growing_family'      // Multiple dependents, peak need
+  | 'empty_nester'        // Kids independent, mortgage winding down
+  | 'pre_retirement'      // 55-65, transitioning
+  | 'retired'             // 65+, health focus
+
+export interface LifeStageInfo {
+  stage: LifeStage
+  label: string
+  description: string
+  ageRange: string
+  coveragePriority: 'life' | 'health' | 'balanced'
+}
+
+export interface CoverageProjectionYear {
+  age: number
+  year: number
+  // Recommended coverage amounts
+  recommendedLifeTpd: number
+  recommendedCriticalIllness: number
+  recommendedPersonalAccident: number
+  // Current coverage (from policies - future phase)
+  currentLifeTpd: number
+  currentCriticalIllness: number
+  currentPersonalAccident: number
+}
+
+export interface CoverageMilestone {
+  year: number
+  age: number
+  event: string
+  description: string
+  impact: string
+  coverageChange: number // Positive = increase, negative = decrease
+  category: 'dependent' | 'debt' | 'retirement' | 'health'
+}
+
+export interface PersonCoverageContext {
+  age: number
+  annualIncome: number
+  dependents: Array<{ name: string; age: number }>
+  mortgageBalance: number
+  mortgageEndYear: number | null
+  retirementAge: number
+}
+
+// =============================================================================
+// Life Stage Detection
+// =============================================================================
+
+export const LIFE_STAGE_INFO: Record<LifeStage, Omit<LifeStageInfo, 'stage'>> = {
+  young_professional: {
+    label: 'Young Professional',
+    description: 'Building foundation, minimal dependents',
+    ageRange: '22-30',
+    coveragePriority: 'balanced',
+  },
+  new_parent: {
+    label: 'New Parent',
+    description: 'First child, growing responsibilities',
+    ageRange: '25-40',
+    coveragePriority: 'life',
+  },
+  growing_family: {
+    label: 'Growing Family',
+    description: 'Peak protection years, dependents rely on income',
+    ageRange: '30-50',
+    coveragePriority: 'life',
+  },
+  empty_nester: {
+    label: 'Empty Nester',
+    description: 'Kids independent, reducing obligations',
+    ageRange: '50-65',
+    coveragePriority: 'balanced',
+  },
+  pre_retirement: {
+    label: 'Pre-Retirement',
+    description: 'Transitioning focus to health coverage',
+    ageRange: '55-65',
+    coveragePriority: 'health',
+  },
+  retired: {
+    label: 'Retired',
+    description: 'Health coverage is primary concern',
+    ageRange: '65+',
+    coveragePriority: 'health',
+  },
+}
+
+/**
+ * Detect life stage based on age and dependents
+ */
+export function detectLifeStage(
+  age: number,
+  dependents: Array<{ age: number }> = []
+): LifeStage {
+  const hasDependents = dependents.length > 0
+  const hasYoungChildren = dependents.some(d => d.age < 5)
+  const hasSchoolAgeChildren = dependents.some(d => d.age >= 5 && d.age < 22)
+  const youngestDependentAge = dependents.length > 0
+    ? Math.min(...dependents.map(d => d.age))
+    : null
+
+  // Retirement (65+)
+  if (age >= 65) {
+    return 'retired'
+  }
+
+  // Pre-retirement (55-65, transitioning)
+  if (age >= 55) {
+    // Still has dependents? Stay in growing family
+    if (hasDependents && hasSchoolAgeChildren) {
+      return 'growing_family'
+    }
+    return 'pre_retirement'
+  }
+
+  // Empty nester (50-65, kids independent)
+  if (age >= 50 && !hasDependents) {
+    return 'empty_nester'
+  }
+
+  // Growing family (30-50, multiple/older dependents)
+  if (hasDependents && (dependents.length > 1 || (youngestDependentAge && youngestDependentAge >= 5))) {
+    return 'growing_family'
+  }
+
+  // New parent (has young children under 5)
+  if (hasYoungChildren) {
+    return 'new_parent'
+  }
+
+  // Young professional (22-30, no dependents)
+  if (age < 30 && !hasDependents) {
+    return 'young_professional'
+  }
+
+  // Default: growing family if has dependents, empty nester otherwise
+  if (hasDependents) {
+    return 'growing_family'
+  }
+
+  return age >= 50 ? 'empty_nester' : 'young_professional'
+}
+
+/**
+ * Get full life stage info with label and description
+ */
+export function getLifeStageInfo(stage: LifeStage): LifeStageInfo {
+  return {
+    stage,
+    ...LIFE_STAGE_INFO[stage],
+  }
+}
+
+// =============================================================================
+// Coverage Projections
+// =============================================================================
+
+/**
+ * Income multiplier for life/TPD coverage based on life stage
+ */
+function getLifeTpdMultiplier(age: number, dependentCount: number): number {
+  if (age >= 65) return 1 // Legacy planning only
+  if (age >= 55) return dependentCount > 0 ? 5 : 3
+  if (age >= 50) return dependentCount > 0 ? 6 : 4
+  if (dependentCount > 1) return 10 // Growing family
+  if (dependentCount === 1) return 8 // New parent
+  return 3 // Young professional
+}
+
+/**
+ * Income multiplier for critical illness coverage
+ */
+function getCriticalIllnessMultiplier(age: number): number {
+  if (age >= 65) return 1
+  if (age >= 55) return 2
+  if (age >= 40) return 3
+  return 2
+}
+
+/**
+ * Calculate recommended coverage at a specific age
+ */
+export function calculateRecommendedCoverage(
+  age: number,
+  context: PersonCoverageContext
+): Omit<CoverageProjectionYear, 'year' | 'currentLifeTpd' | 'currentCriticalIllness' | 'currentPersonalAccident'> {
+  // Adjust dependents count based on age (they grow up!)
+  const yearsFromNow = age - context.age
+  const activeDependents = context.dependents.filter(d => {
+    const futureAge = d.age + yearsFromNow
+    return futureAge < 22 // Assumed independence age
+  })
+
+  // Calculate mortgage remaining
+  const mortgageRemaining = context.mortgageEndYear && context.mortgageEndYear > new Date().getFullYear() + yearsFromNow
+    ? context.mortgageBalance * Math.max(0, 1 - (yearsFromNow / 25)) // Rough linear paydown
+    : 0
+
+  // Life/TPD: Income replacement + mortgage + dependents
+  const incomeMultiplier = getLifeTpdMultiplier(age, activeDependents.length)
+  const dependentCost = activeDependents.reduce((sum, d) => {
+    const yearsOfSupport = Math.max(0, 22 - (d.age + yearsFromNow))
+    return sum + (yearsOfSupport * 30000) // ~$30k/year per dependent
+  }, 0)
+
+  const recommendedLifeTpd = Math.round(
+    (context.annualIncome * incomeMultiplier) + mortgageRemaining + dependentCost
+  )
+
+  // Critical illness: 2-4 years of expenses for recovery
+  const ciMultiplier = getCriticalIllnessMultiplier(age)
+  const recommendedCriticalIllness = Math.round(context.annualIncome * ciMultiplier * 0.7) // 70% of income as expenses
+
+  // Personal accident: 1-2x income
+  const paMultiplier = age >= 55 ? 1 : 2
+  const recommendedPersonalAccident = Math.round(context.annualIncome * paMultiplier)
+
+  return {
+    age,
+    recommendedLifeTpd: Math.max(0, recommendedLifeTpd),
+    recommendedCriticalIllness: Math.max(0, recommendedCriticalIllness),
+    recommendedPersonalAccident: Math.max(0, recommendedPersonalAccident),
+  }
+}
+
+/**
+ * Generate coverage projection for a range of ages
+ */
+export function generateCoverageProjection(
+  context: PersonCoverageContext,
+  fromAge?: number,
+  toAge?: number
+): CoverageProjectionYear[] {
+  const startAge = fromAge ?? Math.max(22, context.age - 5)
+  const endAge = toAge ?? 75
+  const currentYear = new Date().getFullYear()
+
+  const projections: CoverageProjectionYear[] = []
+
+  for (let age = startAge; age <= endAge; age++) {
+    const yearsFromNow = age - context.age
+    const year = currentYear + yearsFromNow
+
+    const recommended = calculateRecommendedCoverage(age, context)
+
+    projections.push({
+      ...recommended,
+      year,
+      // Current coverage placeholder (to be filled from actual policies)
+      currentLifeTpd: 0,
+      currentCriticalIllness: 0,
+      currentPersonalAccident: 0,
+    })
+  }
+
+  return projections
+}
+
+// =============================================================================
+// Milestone Calculations
+// =============================================================================
+
+const INDEPENDENCE_AGE = 22
+
+/**
+ * Calculate coverage milestones based on life events
+ */
+export function calculateMilestones(context: PersonCoverageContext): CoverageMilestone[] {
+  const milestones: CoverageMilestone[] = []
+  const currentYear = new Date().getFullYear()
+
+  // Dependent independence milestones
+  for (const dependent of context.dependents) {
+    const yearsUntilIndependent = Math.max(0, INDEPENDENCE_AGE - dependent.age)
+    if (yearsUntilIndependent > 0) {
+      const independenceYear = currentYear + yearsUntilIndependent
+      const ageAtMilestone = context.age + yearsUntilIndependent
+
+      // Estimate coverage reduction (years of support * annual cost)
+      const coverageReduction = -240000 // ~$240k reduction per dependent
+
+      milestones.push({
+        year: independenceYear,
+        age: ageAtMilestone,
+        event: `${dependent.name} turns ${INDEPENDENCE_AGE}`,
+        description: `${dependent.name} becomes financially independent`,
+        impact: `Coverage need drops ~$240K`,
+        coverageChange: coverageReduction,
+        category: 'dependent',
+      })
+    }
+  }
+
+  // Mortgage payoff milestone
+  if (context.mortgageEndYear && context.mortgageBalance > 0) {
+    const yearsUntilPayoff = context.mortgageEndYear - currentYear
+    if (yearsUntilPayoff > 0 && yearsUntilPayoff <= 30) {
+      milestones.push({
+        year: context.mortgageEndYear,
+        age: context.age + yearsUntilPayoff,
+        event: 'Mortgage paid off',
+        description: 'No longer need to cover outstanding home loan',
+        impact: `Coverage need drops ~$${Math.round(context.mortgageBalance / 1000)}K`,
+        coverageChange: -context.mortgageBalance,
+        category: 'debt',
+      })
+    }
+  }
+
+  // Retirement milestone
+  const yearsUntilRetirement = context.retirementAge - context.age
+  if (yearsUntilRetirement > 0) {
+    milestones.push({
+      year: currentYear + yearsUntilRetirement,
+      age: context.retirementAge,
+      event: 'Retirement',
+      description: 'Coverage focus shifts from income protection to health',
+      impact: 'Life/TPD becomes optional, hospitalization becomes priority',
+      coverageChange: 0, // Shift, not reduction
+      category: 'retirement',
+    })
+  }
+
+  // Sort by year
+  return milestones.sort((a, b) => a.year - b.year)
+}
+
+// =============================================================================
+// Helper Functions
+// =============================================================================
+
+/**
+ * Calculate age from date of birth
+ */
+export function calculateAge(dateOfBirth: string): number {
+  const today = new Date()
+  const birth = new Date(dateOfBirth)
+  let age = today.getFullYear() - birth.getFullYear()
+  const monthDiff = today.getMonth() - birth.getMonth()
+  if (monthDiff < 0 || (monthDiff === 0 && today.getDate() < birth.getDate())) {
+    age--
+  }
+  return age
+}
+
+/**
+ * Format coverage amount for display
+ */
+export function formatCoverageAmount(amount: number): string {
+  if (amount >= 1000000) {
+    return `$${(amount / 1000000).toFixed(1)}M`
+  }
+  if (amount >= 1000) {
+    return `$${Math.round(amount / 1000)}K`
+  }
+  return `$${amount}`
+}
+
+/**
+ * Get life stage emoji
+ */
+export function getLifeStageEmoji(stage: LifeStage): string {
+  const emojis: Record<LifeStage, string> = {
+    young_professional: '🌱',
+    new_parent: '👶',
+    growing_family: '🏠',
+    empty_nester: '🍂',
+    pre_retirement: '🌅',
+    retired: '☀️',
+  }
+  return emojis[stage]
+}
+
+// =============================================================================
+// Control Point Interpolation
+// =============================================================================
+
+import type { CoverageControlPoint, InterpolationMode } from '@/types/insurance'
+
+/**
+ * Linear interpolation between two values
+ */
+function lerp(start: number, end: number, t: number): number {
+  return start + (end - start) * t
+}
+
+/**
+ * Smooth (cubic) interpolation for more natural curves
+ */
+function smoothstep(start: number, end: number, t: number): number {
+  // Cubic smoothstep: 3t² - 2t³
+  const smoothT = t * t * (3 - 2 * t)
+  return start + (end - start) * smoothT
+}
+
+/**
+ * Interpolate a single coverage value based on control points
+ */
+function interpolateValue(
+  age: number,
+  before: { age: number; value: number | null } | null,
+  after: { age: number; value: number | null } | null,
+  autoCalculatedValue: number,
+  interpolationMode: InterpolationMode
+): number {
+  // If no control points, use auto-calculated
+  if (!before && !after) {
+    return autoCalculatedValue
+  }
+
+  // If only before exists, use its value (or auto if null)
+  if (before && !after) {
+    return before.value ?? autoCalculatedValue
+  }
+
+  // If only after exists, use auto-calculated (we're before any control points)
+  if (!before && after) {
+    return autoCalculatedValue
+  }
+
+  // Both exist - interpolate
+  if (before && after) {
+    const beforeValue = before.value ?? autoCalculatedValue
+    const afterValue = after.value ?? autoCalculatedValue
+
+    // Step mode: jump at the control point
+    if (interpolationMode === 'step') {
+      return beforeValue
+    }
+
+    // Calculate interpolation factor
+    const t = (age - before.age) / (after.age - before.age)
+
+    if (interpolationMode === 'smooth') {
+      return Math.round(smoothstep(beforeValue, afterValue, t))
+    }
+
+    // Default: linear
+    return Math.round(lerp(beforeValue, afterValue, t))
+  }
+
+  return autoCalculatedValue
+}
+
+/**
+ * Apply control points to coverage projections with interpolation.
+ * Control points override auto-calculated values; ages between control points
+ * are interpolated.
+ */
+export function interpolateCoverageWithControlPoints(
+  projections: CoverageProjectionYear[],
+  controlPoints: CoverageControlPoint[],
+  interpolationMode: InterpolationMode = 'linear'
+): CoverageProjectionYear[] {
+  if (controlPoints.length === 0) {
+    return projections
+  }
+
+  // Sort control points by age
+  const sortedPoints = [...controlPoints].sort((a, b) => a.age - b.age)
+
+  return projections.map((proj) => {
+    // Find exact match first
+    const exactMatch = sortedPoints.find((p) => p.age === proj.age)
+    if (exactMatch) {
+      return {
+        ...proj,
+        recommendedLifeTpd: exactMatch.lifeTpd ?? proj.recommendedLifeTpd,
+        recommendedCriticalIllness:
+          exactMatch.criticalIllness ?? proj.recommendedCriticalIllness,
+        recommendedPersonalAccident:
+          exactMatch.personalAccident ?? proj.recommendedPersonalAccident,
+      }
+    }
+
+    // Find surrounding control points
+    let before: CoverageControlPoint | null = null
+    let after: CoverageControlPoint | null = null
+
+    for (const point of sortedPoints) {
+      if (point.age < proj.age) {
+        before = point
+      } else if (point.age > proj.age && !after) {
+        after = point
+        break
+      }
+    }
+
+    // Interpolate each coverage type
+    const interpolatedLifeTpd = interpolateValue(
+      proj.age,
+      before ? { age: before.age, value: before.lifeTpd } : null,
+      after ? { age: after.age, value: after.lifeTpd } : null,
+      proj.recommendedLifeTpd,
+      interpolationMode
+    )
+
+    const interpolatedCriticalIllness = interpolateValue(
+      proj.age,
+      before ? { age: before.age, value: before.criticalIllness } : null,
+      after ? { age: after.age, value: after.criticalIllness } : null,
+      proj.recommendedCriticalIllness,
+      interpolationMode
+    )
+
+    const interpolatedPersonalAccident = interpolateValue(
+      proj.age,
+      before ? { age: before.age, value: before.personalAccident } : null,
+      after ? { age: after.age, value: after.personalAccident } : null,
+      proj.recommendedPersonalAccident,
+      interpolationMode
+    )
+
+    return {
+      ...proj,
+      recommendedLifeTpd: interpolatedLifeTpd,
+      recommendedCriticalIllness: interpolatedCriticalIllness,
+      recommendedPersonalAccident: interpolatedPersonalAccident,
+    }
+  })
+}
diff --git a/frontend/src/lib/theme.ts b/frontend/src/lib/theme.ts
index 922b92a46..c16d6f5c7 100644
--- a/frontend/src/lib/theme.ts
+++ b/frontend/src/lib/theme.ts
@@ -299,3 +299,248 @@ export function useTheme() {
 export { monetTheme as insuranceMonetTheme, darkTheme as insuranceDarkTheme }
 export const getInsuranceTheme = getTheme
 export type InsuranceTheme = AppTheme
+
+// ============================================
+// TAILWIND CLASS PATTERNS
+// ============================================
+// Pre-composed Tailwind classes for common UI patterns.
+// Use with: const { classes } = useTheme()
+//           <div className={classes.dropdown.container}>
+
+/**
+ * Theme-aware Tailwind class strings for Monet theme
+ */
+export const monetClasses = {
+  // Dropdown/Menu containers
+  dropdown: {
+    container: 'border border-[var(--monet-lavender)]/20 bg-white rounded-xl shadow-2xl',
+    backdrop: 'fixed inset-0',
+  },
+
+  // Menu items
+  menuItem: {
+    base: 'flex items-start gap-3 w-full px-4 py-3 text-left text-sm transition text-[var(--monet-text-primary)]',
+    withBorder: 'border-b border-[var(--monet-lavender)]/10',
+    hover: 'hover:bg-[var(--monet-lavender)]/5',
+    hoverSage: 'hover:bg-[var(--monet-sage)]/10',
+    hoverGold: 'hover:bg-[var(--monet-gold)]/10',
+    disabled: 'cursor-not-allowed opacity-60',
+  },
+
+  // Menu item text
+  menuText: {
+    primary: 'font-medium text-[var(--monet-text-primary)]',
+    secondary: 'text-xs text-[var(--monet-text-muted)]',
+    disabled: 'text-slate-500',
+    disabledSecondary: 'text-slate-400',
+  },
+
+  // Icon badges (colored icon containers)
+  iconBadge: {
+    base: 'mt-0.5 p-2 rounded-lg border',
+    violet: 'border-violet-400/30 bg-violet-100 text-violet-600',
+    emerald: 'border-emerald-400/30 bg-emerald-100 text-emerald-600',
+    amber: 'border-amber-400/30 bg-amber-100 text-amber-600',
+    purple: 'border-purple-400/30 bg-purple-100 text-purple-600',
+    blue: 'border-blue-400/30 bg-blue-100 text-blue-600',
+    rose: 'border-rose-400/30 bg-rose-100 text-rose-600',
+    disabled: 'border-slate-200 bg-slate-100 text-slate-400',
+  },
+
+  // Cards
+  card: {
+    base: 'rounded-2xl border border-[var(--monet-lavender)]/20 bg-white/70 backdrop-blur-xl',
+    hover: 'hover:border-[var(--monet-lavender)]/30 hover:bg-white/80',
+  },
+
+  // Controls (buttons, selects, etc.)
+  control: {
+    base: 'rounded-xl border border-[var(--monet-lavender)]/20 bg-white/60 backdrop-blur-sm',
+    hover: 'hover:bg-[var(--monet-lavender)]/10',
+  },
+
+  // Dividers
+  divider: {
+    horizontal: 'border-t border-[var(--monet-lavender)]/10',
+    vertical: 'w-px bg-[var(--monet-lavender)]/20',
+  },
+
+  // Text hierarchy
+  text: {
+    primary: 'text-[var(--monet-text-primary)]',
+    secondary: 'text-[var(--monet-text-secondary)]',
+    muted: 'text-[var(--monet-text-muted)]',
+  },
+
+  // Select/Dropdown fields
+  select: {
+    trigger: 'text-slate-700',
+    triggerOpen: 'text-blue-600',
+    option: 'text-slate-700 hover:bg-slate-50',
+    optionSelected: 'bg-blue-50 text-blue-700',
+    check: 'text-blue-600',
+  },
+
+  // Icons
+  icon: {
+    muted: 'text-[var(--monet-text-muted)]',
+    primary: 'text-[var(--monet-lavender)]',
+    search: 'text-[var(--monet-text-muted)]',
+  },
+
+  // Header/Toolbar
+  toolbar: {
+    container: 'border border-[var(--monet-lavender)]/20 bg-white/60 backdrop-blur-sm',
+    divider: 'border-[var(--monet-lavender)]/20',
+    verticalDivider: 'h-4 w-px bg-[var(--monet-lavender)]/20',
+  },
+
+  // Input
+  input: {
+    base: 'bg-transparent placeholder-[var(--monet-text-muted)] text-[var(--monet-text-primary)]',
+  },
+
+  // Toolbar buttons (icon buttons in headers)
+  toolbarButton: {
+    base: 'flex items-center justify-center h-7 w-7 rounded-full disabled:opacity-60 transition',
+    default: 'hover:bg-[var(--monet-lavender)]/10 hover:text-[var(--monet-lavender-dark)] text-[var(--monet-text-muted)]',
+    danger: 'hover:bg-rose-500/10 hover:text-[var(--monet-coral-dark)] text-[var(--monet-coral)]',
+    active: 'hover:bg-[var(--monet-lavender)]/10 hover:text-[var(--monet-lavender-dark)] text-[var(--monet-text-secondary)]',
+  },
+}
+
+/**
+ * Theme-aware Tailwind class strings for Dark theme
+ */
+export const darkClasses = {
+  // Dropdown/Menu containers
+  dropdown: {
+    container: 'border border-white/[0.08] bg-[#0a0a0a] rounded-xl shadow-2xl',
+    backdrop: 'fixed inset-0',
+  },
+
+  // Menu items
+  menuItem: {
+    base: 'flex items-start gap-3 w-full px-4 py-3 text-left text-sm transition text-slate-200',
+    withBorder: 'border-b border-white/[0.04]',
+    hover: 'hover:bg-white/5',
+    hoverSage: 'hover:bg-white/5',
+    hoverGold: 'hover:bg-white/5',
+    disabled: 'cursor-not-allowed opacity-60',
+  },
+
+  // Menu item text
+  menuText: {
+    primary: 'font-medium text-slate-200',
+    secondary: 'text-xs text-slate-400',
+    disabled: 'text-slate-400',
+    disabledSecondary: 'text-slate-500',
+  },
+
+  // Icon badges (colored icon containers)
+  iconBadge: {
+    base: 'mt-0.5 p-2 rounded-lg border',
+    violet: 'border-violet-500/20 bg-violet-500/10 text-violet-400',
+    emerald: 'border-emerald-500/20 bg-emerald-500/10 text-emerald-400',
+    amber: 'border-amber-500/20 bg-amber-500/10 text-amber-400',
+    purple: 'border-purple-500/20 bg-purple-500/10 text-purple-400',
+    blue: 'border-blue-500/20 bg-blue-500/10 text-blue-400',
+    rose: 'border-rose-500/20 bg-rose-500/10 text-rose-400',
+    disabled: 'border-white/[0.06] bg-white/[0.02] text-slate-500',
+  },
+
+  // Cards
+  card: {
+    base: 'rounded-2xl border border-white/[0.08] bg-[#0a0a0a]/80',
+    hover: 'hover:border-white/[0.12] hover:bg-[#0a0a0a]/90',
+  },
+
+  // Controls (buttons, selects, etc.)
+  control: {
+    base: 'rounded-xl border border-white/[0.08] bg-white/[0.02]',
+    hover: 'hover:bg-white/[0.04]',
+  },
+
+  // Dividers
+  divider: {
+    horizontal: 'border-t border-white/[0.08]',
+    vertical: 'w-px bg-white/[0.06]',
+  },
+
+  // Text hierarchy
+  text: {
+    primary: 'text-white',
+    secondary: 'text-slate-300',
+    muted: 'text-slate-400',
+  },
+
+  // Select/Dropdown fields
+  select: {
+    trigger: 'text-white',
+    triggerOpen: 'text-blue-400',
+    option: 'text-slate-300 hover:bg-white/[0.05]',
+    optionSelected: 'bg-blue-500/15 text-white',
+    check: 'text-blue-400',
+  },
+
+  // Icons
+  icon: {
+    muted: 'text-slate-500',
+    primary: 'text-blue-400/70',
+    search: 'text-slate-500',
+  },
+
+  // Header/Toolbar
+  toolbar: {
+    container: 'border border-white/[0.06] bg-white/[0.02] backdrop-blur-sm',
+    divider: 'border-white/[0.06]',
+    verticalDivider: 'h-4 w-px bg-white/[0.06]',
+  },
+
+  // Input
+  input: {
+    base: 'bg-transparent placeholder-slate-600 text-slate-300',
+  },
+
+  // Toolbar buttons (icon buttons in headers)
+  toolbarButton: {
+    base: 'flex items-center justify-center h-7 w-7 rounded-full disabled:opacity-60 transition',
+    default: 'hover:bg-white/5 hover:text-slate-300 text-slate-500',
+    danger: 'hover:bg-rose-500/10 hover:text-rose-300 text-rose-400/70',
+    active: 'hover:bg-white/5 hover:text-slate-200 text-slate-400',
+  },
+}
+
+export type ThemeClasses = typeof monetClasses
+
+/**
+ * Get theme classes based on color scheme
+ */
+export function getThemeClasses(colorScheme: ColorScheme): ThemeClasses {
+  return colorScheme === 'monet' ? monetClasses : darkClasses
+}
+
+/**
+ * Extended hook with theme classes
+ *
+ * Usage:
+ *   const { theme, classes, isMonet } = useTheme()
+ *   <div className={classes.dropdown.container}>
+ */
+export function useThemeClasses() {
+  const colorScheme = useColorScheme()
+  const isMonet = colorScheme === 'monet'
+  const theme = isMonet ? monetTheme : darkTheme
+  const classes = isMonet ? monetClasses : darkClasses
+
+  return {
+    theme,
+    classes,
+    isMonet,
+    colorScheme,
+    monetTheme,
+    darkTheme,
+    monetClasses,
+    darkClasses,
+  }
+}
diff --git a/frontend/src/stores/coverageControlPointsStore.ts b/frontend/src/stores/coverageControlPointsStore.ts
new file mode 100644
index 000000000..7474962a7
--- /dev/null
+++ b/frontend/src/stores/coverageControlPointsStore.ts
@@ -0,0 +1,205 @@
+import { create } from 'zustand'
+import { useShallow } from 'zustand/react/shallow'
+import { devtools, persist } from 'zustand/middleware'
+import { generateUUID } from '@/lib/utils'
+import type { CoverageControlPoint, InterpolationMode } from '@/types/insurance'
+
+// ============================================
+// TYPES
+// ============================================
+
+interface CoverageControlPointsState {
+  // Data
+  controlPoints: CoverageControlPoint[]
+
+  // Display settings
+  interpolationMode: InterpolationMode
+  showRecommendedBaseline: boolean
+
+  // Actions
+  addControlPoint: (
+    point: Omit<CoverageControlPoint, 'id' | 'createdAt' | 'updatedAt'>
+  ) => CoverageControlPoint
+  updateControlPoint: (id: string, updates: Partial<CoverageControlPoint>) => void
+  deleteControlPoint: (id: string) => void
+
+  // Settings
+  setInterpolationMode: (mode: InterpolationMode) => void
+  setShowRecommendedBaseline: (show: boolean) => void
+
+  // Bulk actions
+  resetToRecommended: (personId: string) => void
+  clearAllControlPoints: () => void
+}
+
+// ============================================
+// STORE
+// ============================================
+
+const initialState = {
+  controlPoints: [] as CoverageControlPoint[],
+  interpolationMode: 'linear' as InterpolationMode,
+  showRecommendedBaseline: true,
+}
+
+export const useCoverageControlPointsStore = create<CoverageControlPointsState>()(
+  devtools(
+    persist(
+      (set) => ({
+        ...initialState,
+
+        // Add a new control point
+        addControlPoint: (pointData) => {
+          const now = new Date().toISOString()
+          const newPoint: CoverageControlPoint = {
+            ...pointData,
+            id: generateUUID(),
+            createdAt: now,
+            updatedAt: now,
+          }
+
+          set((state) => ({
+            controlPoints: [...state.controlPoints, newPoint].sort(
+              (a, b) => a.age - b.age
+            ),
+          }))
+
+          return newPoint
+        },
+
+        // Update an existing control point
+        updateControlPoint: (id, updates) =>
+          set((state) => ({
+            controlPoints: state.controlPoints
+              .map((point) =>
+                point.id === id
+                  ? { ...point, ...updates, updatedAt: new Date().toISOString() }
+                  : point
+              )
+              .sort((a, b) => a.age - b.age),
+          })),
+
+        // Delete a control point
+        deleteControlPoint: (id) =>
+          set((state) => ({
+            controlPoints: state.controlPoints.filter((point) => point.id !== id),
+          })),
+
+        // Settings
+        setInterpolationMode: (mode) => set({ interpolationMode: mode }),
+
+        setShowRecommendedBaseline: (show) => set({ showRecommendedBaseline: show }),
+
+        // Reset control points for a specific person
+        resetToRecommended: (personId) =>
+          set((state) => ({
+            controlPoints: state.controlPoints.filter(
+              (point) => point.personId !== personId
+            ),
+          })),
+
+        // Clear all control points
+        clearAllControlPoints: () =>
+          set({
+            controlPoints: [],
+          }),
+      }),
+      {
+        name: 'coverage-control-points-storage',
+        partialize: (state) => ({
+          controlPoints: state.controlPoints,
+          interpolationMode: state.interpolationMode,
+          showRecommendedBaseline: state.showRecommendedBaseline,
+        }),
+      }
+    ),
+    { name: 'coverage-control-points-store' }
+  )
+)
+
+// ============================================
+// SELECTORS
+// ============================================
+
+/**
+ * Get all control points
+ */
+export const useControlPoints = () =>
+  useCoverageControlPointsStore((s) => s.controlPoints)
+
+/**
+ * Get control points for a specific person
+ * Uses useShallow to prevent infinite loops from .filter() creating new array references
+ */
+export const useControlPointsForPerson = (personId: string | null) =>
+  useCoverageControlPointsStore(
+    useShallow((s) =>
+      personId
+        ? s.controlPoints.filter((p) => p.personId === personId)
+        : []
+    )
+  )
+
+/**
+ * Get interpolation mode
+ */
+export const useInterpolationMode = () =>
+  useCoverageControlPointsStore((s) => s.interpolationMode)
+
+/**
+ * Get baseline visibility setting
+ */
+export const useShowRecommendedBaseline = () =>
+  useCoverageControlPointsStore((s) => s.showRecommendedBaseline)
+
+/**
+ * Get all actions
+ */
+export const useControlPointsActions = () =>
+  useCoverageControlPointsStore(
+    useShallow((s) => ({
+      addControlPoint: s.addControlPoint,
+      updateControlPoint: s.updateControlPoint,
+      deleteControlPoint: s.deleteControlPoint,
+      setInterpolationMode: s.setInterpolationMode,
+      setShowRecommendedBaseline: s.setShowRecommendedBaseline,
+      resetToRecommended: s.resetToRecommended,
+      clearAllControlPoints: s.clearAllControlPoints,
+    }))
+  )
+
+// ============================================
+// HELPER: Find control point at exact age
+// ============================================
+
+export function findControlPointAtAge(
+  controlPoints: CoverageControlPoint[],
+  age: number
+): CoverageControlPoint | undefined {
+  return controlPoints.find((p) => p.age === age)
+}
+
+// ============================================
+// HELPER: Find surrounding control points for interpolation
+// ============================================
+
+export function findSurroundingControlPoints(
+  controlPoints: CoverageControlPoint[],
+  age: number
+): { before: CoverageControlPoint | null; after: CoverageControlPoint | null } {
+  const sorted = [...controlPoints].sort((a, b) => a.age - b.age)
+
+  let before: CoverageControlPoint | null = null
+  let after: CoverageControlPoint | null = null
+
+  for (const point of sorted) {
+    if (point.age <= age) {
+      before = point
+    } else if (point.age > age && !after) {
+      after = point
+      break
+    }
+  }
+
+  return { before, after }
+}
diff --git a/frontend/src/stores/coverageGuidelinesStore.ts b/frontend/src/stores/coverageGuidelinesStore.ts
new file mode 100644
index 000000000..866269b14
--- /dev/null
+++ b/frontend/src/stores/coverageGuidelinesStore.ts
@@ -0,0 +1,646 @@
+import { create } from 'zustand'
+import { useShallow } from 'zustand/react/shallow'
+import { devtools, persist } from 'zustand/middleware'
+import type {
+  UserCoverageGuidelines,
+  GuidelinesPreset,
+  GuidelineCoverageType,
+  WardClass,
+} from '@/types/insurance'
+import {
+  createDefaultGuidelines,
+  guidelinesPresets,
+  calculateGuidelineTargets,
+} from '@/types/insurance'
+
+// ============================================
+// QUESTIONNAIRE TYPES
+// ============================================
+
+/**
+ * Hospitalization first-principles questions
+ * The fundamental choice: Public vs Private hospital
+ */
+export interface HospitalizationAnswers {
+  /** Primary choice: prefer private or public hospital? */
+  hospitalPreference: 'private' | 'public' | null
+  /** Reason for choice (for user reflection) */
+  preferenceReason?: 'doctor_choice' | 'wait_time' | 'cost' | 'other'
+  /** If private: willing to pay out-of-pocket for premium comfort? */
+  willingToPayPremium?: boolean
+  /** If public: comfortable with longer wait times? */
+  comfortableWithWait?: boolean
+}
+
+/**
+ * Life/TPD first-principles questions
+ * Core question: Who depends on my income?
+ */
+export interface LifeTpdAnswers {
+  /** Selected dependent person IDs */
+  dependentPersonIds: string[]
+  /** Number of financial dependents (not self-sufficient) */
+  dependentCount: number
+  /** Age of youngest dependent */
+  youngestDependentAge: number | null
+  /** Years until youngest is financially independent */
+  yearsUntilIndependent: number
+  /** Outstanding mortgage balance */
+  mortgageBalance: number
+  /** Other debts (car loans, education loans, etc.) */
+  otherDebts: number
+  /** Future obligations (children's education, etc.) */
+  futureObligations: number
+  /** Existing assets that could cover expenses (savings, investments) */
+  existingAssets: number
+  /** Selected spouse person ID */
+  spousePersonId: string | null
+  /** Spouse has own income? (derived from spousePersonId's incomes) */
+  spouseHasIncome: boolean
+  /** Spouse's annual income if applicable */
+  spouseIncome: number
+}
+
+/**
+ * Critical Illness first-principles questions
+ * Core question: Can I survive 2 years without income?
+ */
+export interface CriticalIllnessAnswers {
+  /** Months of expenses covered by emergency fund */
+  emergencyFundMonths: number
+  /** Expected recovery period if diagnosed (months) */
+  expectedRecoveryMonths: number
+  /** Family support available during recovery? */
+  hasFamilySupport: boolean
+  /** Monthly expenses if unable to work */
+  monthlyExpenses: number
+  /** Existing CI coverage from employer or policies */
+  existingCiCoverage: number
+}
+
+/**
+ * Personal Accident first-principles questions
+ * Core question: How risky is my lifestyle/occupation?
+ */
+export interface PersonalAccidentAnswers {
+  /** Occupation risk level */
+  occupationRisk: 'low' | 'medium' | 'high'
+  /** Active lifestyle (sports, adventure activities)? */
+  activeLifestyle: boolean
+  /** Commute method (affects accident risk) */
+  commuteMethod: 'public_transport' | 'car' | 'motorcycle' | 'cycling' | 'walking'
+  /** Existing employer PA coverage */
+  existingPaCoverage: number
+}
+
+/**
+ * Self-insurance consideration
+ * High net worth individuals may not need full coverage
+ */
+export interface SelfInsuranceAnswers {
+  /** Total liquid net worth (savings, investments, accessible assets) */
+  liquidNetWorth: number
+  /** Willing to use assets to cover insurance gaps? */
+  willingToSelfInsure: boolean
+  /** Threshold below which they want insurance coverage */
+  selfInsuranceThreshold: number
+}
+
+/**
+ * Complete questionnaire answers
+ */
+export interface CoverageQuestionnaireAnswers {
+  hospitalization: HospitalizationAnswers
+  lifeTpd: LifeTpdAnswers
+  criticalIllness: CriticalIllnessAnswers
+  personalAccident: PersonalAccidentAnswers
+  selfInsurance: SelfInsuranceAnswers
+}
+
+/**
+ * Default questionnaire answers
+ */
+export function createDefaultQuestionnaireAnswers(): CoverageQuestionnaireAnswers {
+  return {
+    hospitalization: {
+      hospitalPreference: null,
+    },
+    lifeTpd: {
+      dependentPersonIds: [],
+      dependentCount: 0,
+      youngestDependentAge: null,
+      yearsUntilIndependent: 0,
+      mortgageBalance: 0,
+      otherDebts: 0,
+      futureObligations: 0,
+      existingAssets: 0,
+      spousePersonId: null,
+      spouseHasIncome: false,
+      spouseIncome: 0,
+    },
+    criticalIllness: {
+      emergencyFundMonths: 6,
+      expectedRecoveryMonths: 12,
+      hasFamilySupport: true,
+      monthlyExpenses: 0,
+      existingCiCoverage: 0,
+    },
+    personalAccident: {
+      occupationRisk: 'low',
+      activeLifestyle: false,
+      commuteMethod: 'public_transport',
+      existingPaCoverage: 0,
+    },
+    selfInsurance: {
+      liquidNetWorth: 0,
+      willingToSelfInsure: false,
+      selfInsuranceThreshold: 100000,
+    },
+  }
+}
+
+/**
+ * Calculate recommended coverage from questionnaire answers
+ */
+export function calculateRecommendedCoverage(
+  answers: CoverageQuestionnaireAnswers,
+  annualIncome: number
+): {
+  hospitalization: { wardClass: WardClass; rider: boolean }
+  lifeTpd: number
+  criticalIllness: number
+  personalAccident: number
+  reasoning: {
+    hospitalization: string
+    lifeTpd: string
+    criticalIllness: string
+    personalAccident: string
+  }
+} {
+  const { hospitalization, lifeTpd, criticalIllness, personalAccident, selfInsurance } = answers
+
+  // Hospitalization: based on private vs public preference and ward class
+  let wardClass: WardClass = 'B1'
+  let rider = true
+  let hospitalizationReason = ''
+
+  if (hospitalization.hospitalPreference === 'private') {
+    // Private hospitals only offer Class A equivalent coverage
+    wardClass = 'A'
+    rider = true
+    hospitalizationReason = hospitalization.willingToPayPremium
+      ? 'Private hospital preference with single room comfort.'
+      : 'Private hospital preference. Note: Private ISPs cover Class A wards.'
+  } else if (hospitalization.hospitalPreference === 'public') {
+    // Public hospitals offer all ward classes (A, B1, B2+, C)
+    if (hospitalization.willingToPayPremium) {
+      // Wants premium comfort in public hospital
+      wardClass = 'B1' // B1 is good balance for public hospital Class A/B1 preference
+      rider = true
+      hospitalizationReason = 'Public hospital Class A/B1 preference. ISP upgrade recommended.'
+    } else if (hospitalization.comfortableWithWait) {
+      // Comfortable with Class C
+      wardClass = 'C'
+      rider = false // MediShield Life covers Class C
+      hospitalizationReason = 'Public hospital Class C preference. MediShield Life provides coverage.'
+    } else {
+      // Class B2+ preference
+      wardClass = 'B2_plus'
+      rider = true
+      hospitalizationReason = 'Public hospital Class B2+ preference. ISP recommended for better coverage.'
+    }
+  } else {
+    hospitalizationReason = 'Standard recommendation: B1 ward with rider for balanced coverage.'
+  }
+
+  // Life/TPD: formula-based
+  // = (Annual income × years until independent) + debts + obligations - assets
+  const incomeReplacement = lifeTpd.dependentCount > 0
+    ? annualIncome * lifeTpd.yearsUntilIndependent
+    : 0
+  const lifeTpdRaw =
+    incomeReplacement +
+    lifeTpd.mortgageBalance +
+    lifeTpd.otherDebts +
+    lifeTpd.futureObligations -
+    lifeTpd.existingAssets
+
+  // Apply self-insurance reduction
+  let lifeTpdFinal = Math.max(0, lifeTpdRaw)
+  if (selfInsurance.willingToSelfInsure && selfInsurance.liquidNetWorth > selfInsurance.selfInsuranceThreshold) {
+    lifeTpdFinal = Math.max(0, lifeTpdFinal - (selfInsurance.liquidNetWorth - selfInsurance.selfInsuranceThreshold))
+  }
+
+  const lifeTpdReason = lifeTpd.dependentCount > 0
+    ? `${lifeTpd.dependentCount} dependent(s), ${lifeTpd.yearsUntilIndependent} years of support needed. Includes debts and obligations.`
+    : 'No dependents identified. Consider minimum coverage for final expenses only.'
+
+  // Critical Illness: recovery income + ongoing costs
+  const recoveryMonths = criticalIllness.expectedRecoveryMonths
+  const monthlyNeed = criticalIllness.monthlyExpenses || annualIncome / 12
+  const ciRaw =
+    (monthlyNeed * recoveryMonths) -
+    (criticalIllness.emergencyFundMonths * monthlyNeed) -
+    criticalIllness.existingCiCoverage
+
+  let ciFinal = Math.max(0, ciRaw)
+  if (selfInsurance.willingToSelfInsure) {
+    ciFinal = Math.max(0, ciFinal - selfInsurance.liquidNetWorth * 0.3) // Use up to 30% of assets for CI
+  }
+
+  const ciReason = `${recoveryMonths} months recovery period. ${criticalIllness.emergencyFundMonths} months covered by emergency fund.`
+
+  // Personal Accident: risk-based
+  const basePA = annualIncome * 2 // 2x income as base
+  const riskMultiplier = personalAccident.occupationRisk === 'high' ? 1.5
+    : personalAccident.occupationRisk === 'medium' ? 1.25 : 1
+  const lifestyleMultiplier = personalAccident.activeLifestyle ? 1.25 : 1
+  const commuteMultiplier = personalAccident.commuteMethod === 'motorcycle' ? 1.5
+    : personalAccident.commuteMethod === 'cycling' ? 1.25 : 1
+
+  const paRaw = basePA * riskMultiplier * lifestyleMultiplier * commuteMultiplier - personalAccident.existingPaCoverage
+  const paFinal = Math.max(0, paRaw)
+
+  const paReason = `${personalAccident.occupationRisk} risk occupation, ${personalAccident.activeLifestyle ? 'active' : 'moderate'} lifestyle.`
+
+  return {
+    hospitalization: { wardClass, rider },
+    lifeTpd: Math.round(lifeTpdFinal),
+    criticalIllness: Math.round(ciFinal),
+    personalAccident: Math.round(paFinal),
+    reasoning: {
+      hospitalization: hospitalizationReason,
+      lifeTpd: lifeTpdReason,
+      criticalIllness: ciReason,
+      personalAccident: paReason,
+    },
+  }
+}
+
+// ============================================
+// TYPES
+// ============================================
+
+export type ReferenceMode = 'income' | 'expenses'
+
+export interface CoverageGuidelinesState {
+  // Guidelines data
+  guidelines: UserCoverageGuidelines
+  hasConfiguredGuidelines: boolean
+  selectedPersonId: string | null
+
+  // Questionnaire answers
+  questionnaireAnswers: CoverageQuestionnaireAnswers
+
+  // UI state
+  isEditing: boolean
+  referenceMode: ReferenceMode
+
+  // Actions
+  setSelectedPersonId: (personId: string | null) => void
+  setReferenceMode: (mode: ReferenceMode) => void
+  setAnnualIncome: (income: number) => void
+  setMaxPremiumPercentage: (percentage: number) => void
+  applyPreset: (preset: Exclude<GuidelinesPreset, 'custom'>) => void
+  setMultiplier: (coverageType: GuidelineCoverageType, multiplier: number) => void
+  toggleCoverage: (coverageType: GuidelineCoverageType) => void
+  setHospitalizationPreferences: (prefs: {
+    preferredWardClass?: WardClass
+    recommendsRider?: boolean
+  }) => void
+  setNotes: (coverageType: GuidelineCoverageType, notes: string) => void
+  resetToDefaults: () => void
+  setIsEditing: (isEditing: boolean) => void
+  markAsConfigured: () => void
+  unmarkAsConfigured: () => void
+
+  // Questionnaire actions
+  setHospitalizationAnswers: (answers: Partial<HospitalizationAnswers>) => void
+  setLifeTpdAnswers: (answers: Partial<LifeTpdAnswers>) => void
+  setCriticalIllnessAnswers: (answers: Partial<CriticalIllnessAnswers>) => void
+  setPersonalAccidentAnswers: (answers: Partial<PersonalAccidentAnswers>) => void
+  setSelfInsuranceAnswers: (answers: Partial<SelfInsuranceAnswers>) => void
+  applyQuestionnaireRecommendations: () => void
+}
+
+// ============================================
+// STORE
+// ============================================
+
+const initialState = {
+  guidelines: createDefaultGuidelines(),
+  hasConfiguredGuidelines: false,
+  selectedPersonId: null as string | null,
+  questionnaireAnswers: createDefaultQuestionnaireAnswers(),
+  isEditing: false,
+  referenceMode: 'income' as ReferenceMode,
+}
+
+export const useCoverageGuidelinesStore = create<CoverageGuidelinesState>()(
+  devtools(
+    persist(
+      (set) => ({
+        ...initialState,
+
+        // Person selection
+        setSelectedPersonId: (personId) => set({ selectedPersonId: personId }),
+
+        // Reference mode toggle
+        setReferenceMode: (mode) => set({ referenceMode: mode }),
+
+        // Income and budget
+        setAnnualIncome: (income) =>
+          set((state) => ({
+            guidelines: {
+              ...state.guidelines,
+              annualIncome: income,
+              preset: 'custom',
+              updatedAt: new Date().toISOString(),
+            },
+          })),
+
+        setMaxPremiumPercentage: (percentage) =>
+          set((state) => ({
+            guidelines: {
+              ...state.guidelines,
+              maxPremiumPercentage: Math.max(0, Math.min(0.25, percentage)),
+              preset: 'custom',
+              updatedAt: new Date().toISOString(),
+            },
+          })),
+
+        // Preset application
+        applyPreset: (preset) =>
+          set((state) => {
+            const presetConfig = guidelinesPresets[preset]
+            return {
+              guidelines: {
+                ...state.guidelines,
+                preset,
+                maxPremiumPercentage: presetConfig.maxPremiumPercentage,
+                coverages: {
+                  ...state.guidelines.coverages,
+                  life_tpd: {
+                    ...state.guidelines.coverages.life_tpd,
+                    incomeMultiplier: presetConfig.life_tpd,
+                  },
+                  critical_illness: {
+                    ...state.guidelines.coverages.critical_illness,
+                    incomeMultiplier: presetConfig.critical_illness,
+                  },
+                  personal_accident: {
+                    ...state.guidelines.coverages.personal_accident,
+                    incomeMultiplier: presetConfig.personal_accident,
+                  },
+                },
+                updatedAt: new Date().toISOString(),
+              },
+            }
+          }),
+
+        // Individual multiplier adjustment
+        setMultiplier: (coverageType, multiplier) =>
+          set((state) => {
+            if (coverageType === 'hospitalization') return state
+
+            return {
+              guidelines: {
+                ...state.guidelines,
+                preset: 'custom',
+                coverages: {
+                  ...state.guidelines.coverages,
+                  [coverageType]: {
+                    ...state.guidelines.coverages[coverageType],
+                    incomeMultiplier: Math.max(0, Math.min(20, multiplier)),
+                  },
+                },
+                updatedAt: new Date().toISOString(),
+              },
+            }
+          }),
+
+        // Toggle coverage enabled/disabled
+        toggleCoverage: (coverageType) =>
+          set((state) => ({
+            guidelines: {
+              ...state.guidelines,
+              preset: 'custom',
+              coverages: {
+                ...state.guidelines.coverages,
+                [coverageType]: {
+                  ...state.guidelines.coverages[coverageType],
+                  isEnabled: !state.guidelines.coverages[coverageType].isEnabled,
+                },
+              },
+              updatedAt: new Date().toISOString(),
+            },
+          })),
+
+        // Hospitalization-specific settings
+        setHospitalizationPreferences: (prefs) =>
+          set((state) => ({
+            guidelines: {
+              ...state.guidelines,
+              preset: 'custom',
+              coverages: {
+                ...state.guidelines.coverages,
+                hospitalization: {
+                  ...state.guidelines.coverages.hospitalization,
+                  ...(prefs.preferredWardClass !== undefined && {
+                    preferredWardClass: prefs.preferredWardClass,
+                  }),
+                  ...(prefs.recommendsRider !== undefined && {
+                    recommendsRider: prefs.recommendsRider,
+                  }),
+                },
+              },
+              updatedAt: new Date().toISOString(),
+            },
+          })),
+
+        // Notes
+        setNotes: (coverageType, notes) =>
+          set((state) => ({
+            guidelines: {
+              ...state.guidelines,
+              coverages: {
+                ...state.guidelines.coverages,
+                [coverageType]: {
+                  ...state.guidelines.coverages[coverageType],
+                  notes,
+                },
+              },
+              updatedAt: new Date().toISOString(),
+            },
+          })),
+
+        // Reset
+        resetToDefaults: () =>
+          set({
+            guidelines: createDefaultGuidelines(),
+            hasConfiguredGuidelines: false,
+            selectedPersonId: null,
+            questionnaireAnswers: createDefaultQuestionnaireAnswers(),
+          }),
+
+        // UI state
+        setIsEditing: (isEditing) => set({ isEditing }),
+
+        markAsConfigured: () => set({ hasConfiguredGuidelines: true }),
+
+        // Return to wizard without clearing questionnaire answers
+        unmarkAsConfigured: () => set({ hasConfiguredGuidelines: false }),
+
+        // Questionnaire actions
+        setHospitalizationAnswers: (answers) =>
+          set((state) => ({
+            questionnaireAnswers: {
+              ...state.questionnaireAnswers,
+              hospitalization: { ...state.questionnaireAnswers.hospitalization, ...answers },
+            },
+          })),
+
+        setLifeTpdAnswers: (answers) =>
+          set((state) => ({
+            questionnaireAnswers: {
+              ...state.questionnaireAnswers,
+              lifeTpd: { ...state.questionnaireAnswers.lifeTpd, ...answers },
+            },
+          })),
+
+        setCriticalIllnessAnswers: (answers) =>
+          set((state) => ({
+            questionnaireAnswers: {
+              ...state.questionnaireAnswers,
+              criticalIllness: { ...state.questionnaireAnswers.criticalIllness, ...answers },
+            },
+          })),
+
+        setPersonalAccidentAnswers: (answers) =>
+          set((state) => ({
+            questionnaireAnswers: {
+              ...state.questionnaireAnswers,
+              personalAccident: { ...state.questionnaireAnswers.personalAccident, ...answers },
+            },
+          })),
+
+        setSelfInsuranceAnswers: (answers) =>
+          set((state) => ({
+            questionnaireAnswers: {
+              ...state.questionnaireAnswers,
+              selfInsurance: { ...state.questionnaireAnswers.selfInsurance, ...answers },
+            },
+          })),
+
+        applyQuestionnaireRecommendations: () =>
+          set((state) => {
+            const recommendations = calculateRecommendedCoverage(
+              state.questionnaireAnswers,
+              state.guidelines.annualIncome
+            )
+
+            // Convert recommended coverage to income multipliers for the guidelines
+            const annualIncome = state.guidelines.annualIncome || 60000
+            const lifeTpdMultiplier = Math.max(1, Math.round(recommendations.lifeTpd / annualIncome))
+            const ciMultiplier = Math.max(1, Math.round(recommendations.criticalIllness / annualIncome))
+            const paMultiplier = Math.max(1, Math.round(recommendations.personalAccident / annualIncome))
+
+            return {
+              guidelines: {
+                ...state.guidelines,
+                preset: 'custom',
+                coverages: {
+                  ...state.guidelines.coverages,
+                  hospitalization: {
+                    ...state.guidelines.coverages.hospitalization,
+                    preferredWardClass: recommendations.hospitalization.wardClass,
+                    recommendsRider: recommendations.hospitalization.rider,
+                  },
+                  life_tpd: {
+                    ...state.guidelines.coverages.life_tpd,
+                    incomeMultiplier: lifeTpdMultiplier,
+                  },
+                  critical_illness: {
+                    ...state.guidelines.coverages.critical_illness,
+                    incomeMultiplier: ciMultiplier,
+                  },
+                  personal_accident: {
+                    ...state.guidelines.coverages.personal_accident,
+                    incomeMultiplier: paMultiplier,
+                  },
+                },
+                updatedAt: new Date().toISOString(),
+              },
+            }
+          }),
+      }),
+      {
+        name: 'coverage-guidelines-storage',
+        partialize: (state) => ({
+          guidelines: state.guidelines,
+          hasConfiguredGuidelines: state.hasConfiguredGuidelines,
+          selectedPersonId: state.selectedPersonId,
+          questionnaireAnswers: state.questionnaireAnswers,
+          referenceMode: state.referenceMode,
+        }),
+      }
+    ),
+    { name: 'coverage-guidelines-store' }
+  )
+)
+
+// ============================================
+// SELECTORS
+// ============================================
+
+export const useGuidelines = () => useCoverageGuidelinesStore((s) => s.guidelines)
+export const useHasConfiguredGuidelines = () =>
+  useCoverageGuidelinesStore((s) => s.hasConfiguredGuidelines)
+export const useSelectedPersonId = () =>
+  useCoverageGuidelinesStore((s) => s.selectedPersonId)
+export const useIsEditingGuidelines = () => useCoverageGuidelinesStore((s) => s.isEditing)
+export const useReferenceMode = () => useCoverageGuidelinesStore((s) => s.referenceMode)
+
+// Computed selector for target amounts
+export const useGuidelineTargets = () => {
+  const guidelines = useCoverageGuidelinesStore((s) => s.guidelines)
+  return calculateGuidelineTargets(guidelines)
+}
+
+// Questionnaire answers selector
+export const useQuestionnaireAnswers = () =>
+  useCoverageGuidelinesStore((s) => s.questionnaireAnswers)
+
+// Computed selector for recommendations based on questionnaire
+export const useQuestionnaireRecommendations = () => {
+  const answers = useCoverageGuidelinesStore((s) => s.questionnaireAnswers)
+  const income = useCoverageGuidelinesStore((s) => s.guidelines.annualIncome)
+  return calculateRecommendedCoverage(answers, income)
+}
+
+// Actions selector - useShallow prevents infinite loops from new object references
+export const useGuidelinesActions = () =>
+  useCoverageGuidelinesStore(
+    useShallow((s) => ({
+      setSelectedPersonId: s.setSelectedPersonId,
+      setReferenceMode: s.setReferenceMode,
+      setAnnualIncome: s.setAnnualIncome,
+      setMaxPremiumPercentage: s.setMaxPremiumPercentage,
+      applyPreset: s.applyPreset,
+      setMultiplier: s.setMultiplier,
+      toggleCoverage: s.toggleCoverage,
+      setHospitalizationPreferences: s.setHospitalizationPreferences,
+      setNotes: s.setNotes,
+      resetToDefaults: s.resetToDefaults,
+      setIsEditing: s.setIsEditing,
+      markAsConfigured: s.markAsConfigured,
+      unmarkAsConfigured: s.unmarkAsConfigured,
+      // Questionnaire actions
+      setHospitalizationAnswers: s.setHospitalizationAnswers,
+      setLifeTpdAnswers: s.setLifeTpdAnswers,
+      setCriticalIllnessAnswers: s.setCriticalIllnessAnswers,
+      setPersonalAccidentAnswers: s.setPersonalAccidentAnswers,
+      setSelfInsuranceAnswers: s.setSelfInsuranceAnswers,
+      applyQuestionnaireRecommendations: s.applyQuestionnaireRecommendations,
+    }))
+  )
diff --git a/frontend/src/stores/cpfLifeEstimateStore.ts b/frontend/src/stores/cpfLifeEstimateStore.ts
index e0bbf75a4..0e3ea7cf3 100644
--- a/frontend/src/stores/cpfLifeEstimateStore.ts
+++ b/frontend/src/stores/cpfLifeEstimateStore.ts
@@ -1,4 +1,5 @@
 import { create } from 'zustand'
+import { useShallow } from 'zustand/react/shallow'
 import { devtools } from 'zustand/middleware'
 import type { CPFLifeEstimateResponse } from '@/api/financial/cpf'
 
@@ -114,14 +115,16 @@ export const useCpfLifeEstimateMode = () =>
  * Select all inputs needed for the API call
  */
 export const useCpfLifeEstimateInputs = () =>
-  useCpfLifeEstimateStore((s) => ({
-    mode: s.mode,
-    cpfAccountId: s.cpfAccountId,
-    birthYear: s.birthYear,
-    gender: s.gender,
-    raBalanceAt65: s.raBalanceAt65,
-    payoutStartAge: s.payoutStartAge,
-  }))
+  useCpfLifeEstimateStore(
+    useShallow((s) => ({
+      mode: s.mode,
+      cpfAccountId: s.cpfAccountId,
+      birthYear: s.birthYear,
+      gender: s.gender,
+      raBalanceAt65: s.raBalanceAt65,
+      payoutStartAge: s.payoutStartAge,
+    }))
+  )
 
 /**
  * Select the last cached result
@@ -133,17 +136,19 @@ export const useCpfLifeEstimateResult = () =>
  * Select all actions for updating inputs
  */
 export const useCpfLifeEstimateActions = () =>
-  useCpfLifeEstimateStore((s) => ({
-    setMode: s.setMode,
-    setCpfAccountId: s.setCpfAccountId,
-    setBirthYear: s.setBirthYear,
-    setGender: s.setGender,
-    setRaBalanceAt65: s.setRaBalanceAt65,
-    setPayoutStartAge: s.setPayoutStartAge,
-    setLastResult: s.setLastResult,
-    reset: s.reset,
-    resetInputs: s.resetInputs,
-  }))
+  useCpfLifeEstimateStore(
+    useShallow((s) => ({
+      setMode: s.setMode,
+      setCpfAccountId: s.setCpfAccountId,
+      setBirthYear: s.setBirthYear,
+      setGender: s.setGender,
+      setRaBalanceAt65: s.setRaBalanceAt65,
+      setPayoutStartAge: s.setPayoutStartAge,
+      setLastResult: s.setLastResult,
+      reset: s.reset,
+      resetInputs: s.resetInputs,
+    }))
+  )
 
 /**
  * Check if the current inputs are valid for calculation
diff --git a/frontend/src/stores/featureModulesStore.ts b/frontend/src/stores/featureModulesStore.ts
index 903d0de49..499f0c29b 100644
--- a/frontend/src/stores/featureModulesStore.ts
+++ b/frontend/src/stores/featureModulesStore.ts
@@ -18,6 +18,8 @@ export interface FeatureModulesState {
   showPropertyPlanner: boolean
   propertyScenarioToEdit: string | null
   showLayoutModal: boolean
+  showOnboardingWizard: boolean
+  showPostResetChoice: boolean
 
   // Chat sidebar state
   isChatCollapsed: boolean
@@ -43,6 +45,14 @@ export interface FeatureModulesState {
   openLayoutModal: () => void
   closeLayoutModal: () => void
 
+  // Actions - Onboarding Wizard
+  openOnboardingWizard: () => void
+  closeOnboardingWizard: () => void
+
+  // Actions - Post-reset choice (Start Fresh flow)
+  openPostResetChoice: () => void
+  closePostResetChoice: () => void
+
   // Actions - Chat sidebar
   toggleChat: () => void
   collapseChat: () => void
@@ -64,6 +74,8 @@ const initialState = {
   showPropertyPlanner: false,
   propertyScenarioToEdit: null,
   showLayoutModal: false,
+  showOnboardingWizard: false,
+  showPostResetChoice: false,
   isChatCollapsed: true,
   isHistoryOpen: false,
   dashboardLayout: 'stacked' as DashboardLayout,
@@ -101,6 +113,14 @@ export const useFeatureModulesStore = create<FeatureModulesState>()(
       openLayoutModal: () => set({ showLayoutModal: true }),
       closeLayoutModal: () => set({ showLayoutModal: false }),
 
+      // Onboarding Wizard
+      openOnboardingWizard: () => set({ showOnboardingWizard: true }),
+      closeOnboardingWizard: () => set({ showOnboardingWizard: false }),
+
+      // Post-reset choice
+      openPostResetChoice: () => set({ showPostResetChoice: true }),
+      closePostResetChoice: () => set({ showPostResetChoice: false }),
+
       // Chat sidebar
       toggleChat: () => set((state) => ({ isChatCollapsed: !state.isChatCollapsed })),
       collapseChat: () => set({ isChatCollapsed: true }),
diff --git a/frontend/src/stores/personFilterStore.ts b/frontend/src/stores/personFilterStore.ts
index de3af8df0..1fd4706e1 100644
--- a/frontend/src/stores/personFilterStore.ts
+++ b/frontend/src/stores/personFilterStore.ts
@@ -1,4 +1,5 @@
 import { create } from 'zustand'
+import { useShallow } from 'zustand/react/shallow'
 import { devtools } from 'zustand/middleware'
 
 // ============================================
@@ -36,7 +37,9 @@ export const usePersonFilterStore = create<PersonFilterState>()(
 
 export const usePersonsModalOpen = () => usePersonFilterStore((s) => s.isPersonsModalOpen)
 export const usePersonsModalActions = () =>
-  usePersonFilterStore((s) => ({
-    openPersonsModal: s.openPersonsModal,
-    closePersonsModal: s.closePersonsModal,
-  }))
+  usePersonFilterStore(
+    useShallow((s) => ({
+      openPersonsModal: s.openPersonsModal,
+      closePersonsModal: s.closePersonsModal,
+    }))
+  )
diff --git a/frontend/src/stores/taxModeStore.ts b/frontend/src/stores/taxModeStore.ts
index fa043c1a6..0fe3018f9 100644
--- a/frontend/src/stores/taxModeStore.ts
+++ b/frontend/src/stores/taxModeStore.ts
@@ -1,4 +1,5 @@
 import { create } from 'zustand'
+import { useShallow } from 'zustand/react/shallow'
 import { devtools } from 'zustand/middleware'
 import type { TaxResidencyStatus, TaxRelief, TaxCalculationResult } from '@/lib/taxCalculations'
 
@@ -108,13 +109,15 @@ export const useTaxResidencyStatus = () => useTaxModeStore((s) => s.residencySta
 
 // Combined selector for components that need multiple values
 export const useTaxModeActions = () =>
-  useTaxModeStore((s) => ({
-    toggleTaxMode: s.toggleTaxMode,
-    enableTaxMode: s.enableTaxMode,
-    disableTaxMode: s.disableTaxMode,
-    setViewMode: s.setViewMode,
-    setSelectedYearTaxData: s.setSelectedYearTaxData,
-    setResidencyStatus: s.setResidencyStatus,
-    updateRelief: s.updateRelief,
-    resetReliefs: s.resetReliefs,
-  }))
+  useTaxModeStore(
+    useShallow((s) => ({
+      toggleTaxMode: s.toggleTaxMode,
+      enableTaxMode: s.enableTaxMode,
+      disableTaxMode: s.disableTaxMode,
+      setViewMode: s.setViewMode,
+      setSelectedYearTaxData: s.setSelectedYearTaxData,
+      setResidencyStatus: s.setResidencyStatus,
+      updateRelief: s.updateRelief,
+      resetReliefs: s.resetReliefs,
+    }))
+  )
diff --git a/frontend/src/styles/globals.css b/frontend/src/styles/globals.css
index a99a2e06d..27e453343 100644
--- a/frontend/src/styles/globals.css
+++ b/frontend/src/styles/globals.css
@@ -61,6 +61,72 @@
   --chart-5: 340 75% 55%;
 }
 
+/* ============================================
+   MONET THEME - Impressionist-inspired palette
+   Soft pastels, dreamy gradients, painterly textures
+   ============================================ */
+.monet {
+  /* Backgrounds - warm cream to pale blue */
+  --monet-bg-cream: #FAF8F5;
+  --monet-bg-pale-blue: #F0F4F8;
+  --monet-bg-warm-white: #FFFEF9;
+
+  /* Primary - Wisteria/Lavender (from his garden paintings) */
+  --monet-lavender: #9B8BB4;
+  --monet-lavender-light: #C4B8D9;
+  --monet-lavender-dark: #7A6B94;
+
+  /* Accent - Coral Rose (water lily pinks) */
+  --monet-coral: #E8A898;
+  --monet-coral-light: #F5D4CC;
+  --monet-coral-dark: #D4847A;
+
+  /* Success - Sage Green (lily pads, gardens) */
+  --monet-sage: #7FB285;
+  --monet-sage-light: #B5D4B8;
+  --monet-sage-dark: #5A8A5E;
+
+  /* Gold - Sunlight on water */
+  --monet-gold: #D4C5A9;
+  --monet-gold-light: #EDE6D8;
+  --monet-gold-dark: #B8A87D;
+
+  /* Text */
+  --monet-text-primary: #3D3D3D;
+  --monet-text-secondary: #6B6B6B;
+  --monet-text-muted: #9B9B9B;
+
+  /* Shadows */
+  --monet-shadow-soft: rgba(155, 139, 180, 0.12);
+  --monet-shadow-medium: rgba(155, 139, 180, 0.18);
+
+  /* Override base tokens for Monet theme */
+  --background: 40 33% 97%;
+  --foreground: 0 0% 24%;
+  --card: 40 33% 97%;
+  --card-foreground: 0 0% 24%;
+  --popover: 0 0% 100%;
+  --popover-foreground: 0 0% 24%;
+  --primary: 263 17% 62%;
+  --primary-foreground: 0 0% 100%;
+  --secondary: 263 27% 90%;
+  --secondary-foreground: 263 17% 45%;
+  --muted: 210 22% 96%;
+  --muted-foreground: 0 0% 42%;
+  --accent: 263 27% 90%;
+  --accent-foreground: 263 17% 45%;
+  --destructive: 9 62% 75%;
+  --destructive-foreground: 0 0% 100%;
+  --border: 263 20% 85%;
+  --input: 263 20% 85%;
+  --ring: 263 17% 62%;
+  --chart-1: 263 17% 62%;
+  --chart-2: 136 26% 60%;
+  --chart-3: 9 62% 75%;
+  --chart-4: 43 32% 75%;
+  --chart-5: 263 27% 80%;
+}
+
 @layer base {
   body {
     @apply bg-background text-foreground;
diff --git a/frontend/src/types/financial.ts b/frontend/src/types/financial.ts
index e2af1e186..48dda52ee 100644
--- a/frontend/src/types/financial.ts
+++ b/frontend/src/types/financial.ts
@@ -225,5 +225,7 @@ export type UserSettings = {
   chartPictureInPicture: boolean
   /** Dashboard layout preference: stacked (default), chart-left, or chart-right */
   dashboardLayout: DashboardLayout
+  /** Whether the onboarding wizard has been completed or dismissed */
+  onboardingCompleted: boolean
   updatedAt?: string
 }
diff --git a/frontend/src/types/insurance.ts b/frontend/src/types/insurance.ts
index 2656058fa..27b8249c2 100644
--- a/frontend/src/types/insurance.ts
+++ b/frontend/src/types/insurance.ts
@@ -979,6 +979,447 @@ export const defaultSGAssumptions: SGMedicalCostAssumptions = {
   },
 }
 
+// ============================================================================
+// USER-CONFIGURABLE COVERAGE GUIDELINES
+// "Captain of Your Ship" - users define their own coverage targets
+// ============================================================================
+
+/**
+ * Coverage type identifier for user guidelines
+ * Maps to display icons:
+ * - hospitalization: 🏥
+ * - life_tpd: 😇 (guardian angel)
+ * - critical_illness: 🩺
+ * - personal_accident: 🚗
+ */
+export type GuidelineCoverageType =
+  | 'hospitalization'
+  | 'life_tpd'
+  | 'critical_illness'
+  | 'personal_accident'
+
+/**
+ * Configuration for a single coverage guideline
+ */
+export interface CoverageGuidelineConfig {
+  type: GuidelineCoverageType
+  /** Multiplier of annual income (e.g., 10 = 10× income) */
+  incomeMultiplier: number
+  /** Whether this coverage is required or optional */
+  isRequired: boolean
+  /** Whether the user has enabled this guideline */
+  isEnabled: boolean
+  /** Custom notes from the user */
+  notes?: string
+}
+
+/**
+ * Hospitalization-specific guideline (not income-based)
+ */
+export interface HospitalizationGuideline {
+  type: 'hospitalization'
+  /** Must have ISP upgrade from MediShield Life */
+  requiresIspUpgrade: boolean
+  /** Preferred ward class */
+  preferredWardClass: WardClass
+  /** Whether rider is recommended */
+  recommendsRider: boolean
+  isEnabled: boolean
+  notes?: string
+}
+
+/**
+ * Preset configuration levels
+ */
+export type GuidelinesPreset = 'lean' | 'standard' | 'comprehensive' | 'custom'
+
+/**
+ * User's complete coverage guidelines configuration
+ */
+export interface UserCoverageGuidelines {
+  /** User's annual income (base for calculations) */
+  annualIncome: number
+
+  /** Maximum premium as percentage of income (e.g., 0.10 = 10%) */
+  maxPremiumPercentage: number
+
+  /** Selected preset or 'custom' if manually configured */
+  preset: GuidelinesPreset
+
+  /** Individual coverage configurations */
+  coverages: {
+    hospitalization: HospitalizationGuideline
+    life_tpd: CoverageGuidelineConfig
+    critical_illness: CoverageGuidelineConfig
+    personal_accident: CoverageGuidelineConfig
+  }
+
+  /** When these guidelines were last updated */
+  updatedAt: string
+}
+
+/**
+ * Preset multiplier configurations
+ */
+export const guidelinesPresets: Record<
+  Exclude<GuidelinesPreset, 'custom'>,
+  {
+    label: string
+    description: string
+    life_tpd: number
+    critical_illness: number
+    personal_accident: number
+    maxPremiumPercentage: number
+  }
+> = {
+  lean: {
+    label: 'Lean',
+    description: 'Basic protection with lower premiums',
+    life_tpd: 5,
+    critical_illness: 3,
+    personal_accident: 3,
+    maxPremiumPercentage: 0.05,
+  },
+  standard: {
+    label: 'Standard',
+    description: 'Balanced coverage for most situations',
+    life_tpd: 10,
+    critical_illness: 5,
+    personal_accident: 5,
+    maxPremiumPercentage: 0.1,
+  },
+  comprehensive: {
+    label: 'Comprehensive',
+    description: 'Maximum protection for peace of mind',
+    life_tpd: 15,
+    critical_illness: 7,
+    personal_accident: 10,
+    maxPremiumPercentage: 0.15,
+  },
+}
+
+/**
+ * Coverage type display configuration
+ */
+export const guidelineCoverageConfig: Record<
+  GuidelineCoverageType,
+  {
+    label: string
+    shortLabel: string
+    emoji: string
+    color: string
+    description: string
+    defaultMultiplier: number
+    isRequired: boolean
+  }
+> = {
+  hospitalization: {
+    label: 'Hospitalization',
+    shortLabel: 'Hospital',
+    emoji: '🏥',
+    color: 'emerald',
+    description: 'Must upgrade from MediShield Life to ISP',
+    defaultMultiplier: 0, // Not income-based
+    isRequired: true,
+  },
+  life_tpd: {
+    label: 'Life / TPD',
+    shortLabel: 'Life',
+    emoji: '😇',
+    color: 'blue',
+    description: 'Death and Total Permanent Disability coverage',
+    defaultMultiplier: 10,
+    isRequired: true,
+  },
+  critical_illness: {
+    label: 'Critical Illness',
+    shortLabel: 'CI',
+    emoji: '🩺',
+    color: 'purple',
+    description: 'Lump-sum payout on diagnosis of major illness',
+    defaultMultiplier: 5,
+    isRequired: true,
+  },
+  personal_accident: {
+    label: 'Personal Accident',
+    shortLabel: 'PA',
+    emoji: '🚗',
+    color: 'amber',
+    description: 'Coverage for accidental injuries',
+    defaultMultiplier: 5,
+    isRequired: true,
+  },
+}
+
+/**
+ * Helper to create default guidelines
+ */
+export function createDefaultGuidelines(
+  annualIncome: number = 60000
+): UserCoverageGuidelines {
+  return {
+    annualIncome,
+    maxPremiumPercentage: 0.1,
+    preset: 'standard',
+    coverages: {
+      hospitalization: {
+        type: 'hospitalization',
+        requiresIspUpgrade: true,
+        preferredWardClass: 'B1',
+        recommendsRider: true,
+        isEnabled: true,
+      },
+      life_tpd: {
+        type: 'life_tpd',
+        incomeMultiplier: 10,
+        isRequired: true,
+        isEnabled: true,
+      },
+      critical_illness: {
+        type: 'critical_illness',
+        incomeMultiplier: 5,
+        isRequired: true,
+        isEnabled: true,
+      },
+      personal_accident: {
+        type: 'personal_accident',
+        incomeMultiplier: 5,
+        isRequired: true,
+        isEnabled: true,
+      },
+    },
+    updatedAt: new Date().toISOString(),
+  }
+}
+
+/**
+ * Calculate target coverage amounts from guidelines
+ */
+export function calculateGuidelineTargets(guidelines: UserCoverageGuidelines): {
+  life_tpd: number
+  critical_illness: number
+  personal_accident: number
+  maxAnnualPremium: number
+} {
+  const { annualIncome, maxPremiumPercentage, coverages } = guidelines
+
+  return {
+    life_tpd: coverages.life_tpd.isEnabled
+      ? annualIncome * coverages.life_tpd.incomeMultiplier
+      : 0,
+    critical_illness: coverages.critical_illness.isEnabled
+      ? annualIncome * coverages.critical_illness.incomeMultiplier
+      : 0,
+    personal_accident: coverages.personal_accident.isEnabled
+      ? annualIncome * coverages.personal_accident.incomeMultiplier
+      : 0,
+    maxAnnualPremium: annualIncome * maxPremiumPercentage,
+  }
+}
+
+// ============================================================================
+// COVERAGE STATUS & PROTECTION SCORE
+// ============================================================================
+
+/**
+ * Status for a single coverage category
+ */
+export interface CoverageCategoryStatus {
+  category: GuidelineCoverageType
+  label: string
+  target: number
+  current: number
+  gap: number
+  percentage: number // 0-100, capped at 100
+  status: 'covered' | 'partial' | 'gap' | 'disabled'
+}
+
+/**
+ * Overall coverage status for a person (used by dashboard)
+ */
+export interface PersonCoverageStatus {
+  personId: string
+  personName: string
+  annualIncome: number
+  categories: CoverageCategoryStatus[]
+  protectionScore: number // 0-100
+  gapCount: number
+  totalMonthlyPremium: number
+  totalAnnualPremium: number
+  premiumBudget: number
+  premiumPercentageUsed: number
+}
+
+/**
+ * Category weights for protection score calculation
+ * Life/TPD is weighted highest as it protects dependents
+ */
+const PROTECTION_SCORE_WEIGHTS: Record<GuidelineCoverageType, number> = {
+  hospitalization: 0.25,
+  life_tpd: 0.35,
+  critical_illness: 0.25,
+  personal_accident: 0.15,
+}
+
+/**
+ * Calculate protection score from coverage status
+ * Returns weighted average of coverage percentages (0-100)
+ */
+export function calculateProtectionScore(
+  guidelines: UserCoverageGuidelines,
+  currentCoverage: {
+    hospitalization: boolean // true if has valid ISP
+    life_tpd: number
+    critical_illness: number
+    personal_accident: number
+  }
+): number {
+  const targets = calculateGuidelineTargets(guidelines)
+  const { coverages } = guidelines
+
+  let totalWeight = 0
+  let weightedScore = 0
+
+  // Hospitalization: binary (covered or not)
+  if (coverages.hospitalization.isEnabled) {
+    const score = currentCoverage.hospitalization ? 100 : 0
+    weightedScore += score * PROTECTION_SCORE_WEIGHTS.hospitalization
+    totalWeight += PROTECTION_SCORE_WEIGHTS.hospitalization
+  }
+
+  // Life/TPD
+  if (coverages.life_tpd.isEnabled && targets.life_tpd > 0) {
+    const score = Math.min(100, (currentCoverage.life_tpd / targets.life_tpd) * 100)
+    weightedScore += score * PROTECTION_SCORE_WEIGHTS.life_tpd
+    totalWeight += PROTECTION_SCORE_WEIGHTS.life_tpd
+  }
+
+  // Critical Illness
+  if (coverages.critical_illness.isEnabled && targets.critical_illness > 0) {
+    const score = Math.min(100, (currentCoverage.critical_illness / targets.critical_illness) * 100)
+    weightedScore += score * PROTECTION_SCORE_WEIGHTS.critical_illness
+    totalWeight += PROTECTION_SCORE_WEIGHTS.critical_illness
+  }
+
+  // Personal Accident
+  if (coverages.personal_accident.isEnabled && targets.personal_accident > 0) {
+    const score = Math.min(100, (currentCoverage.personal_accident / targets.personal_accident) * 100)
+    weightedScore += score * PROTECTION_SCORE_WEIGHTS.personal_accident
+    totalWeight += PROTECTION_SCORE_WEIGHTS.personal_accident
+  }
+
+  // Return weighted average, or 0 if no categories enabled
+  return totalWeight > 0 ? Math.round(weightedScore / totalWeight) : 0
+}
+
+/**
+ * Build full coverage status for dashboard display
+ */
+export function buildCoverageStatus(
+  guidelines: UserCoverageGuidelines,
+  personId: string,
+  personName: string,
+  currentCoverage: {
+    hospitalization: boolean
+    life_tpd: number
+    critical_illness: number
+    personal_accident: number
+  },
+  premiumData: {
+    monthlyPremium: number
+    annualPremium: number
+  }
+): PersonCoverageStatus {
+  const targets = calculateGuidelineTargets(guidelines)
+  const { coverages, annualIncome } = guidelines
+
+  const categories: CoverageCategoryStatus[] = []
+
+  // Hospitalization (binary)
+  if (coverages.hospitalization.isEnabled) {
+    categories.push({
+      category: 'hospitalization',
+      label: `Ward ${coverages.hospitalization.preferredWardClass}${coverages.hospitalization.recommendsRider ? ' + Rider' : ''}`,
+      target: 0, // Not applicable for hospitalization
+      current: 0,
+      gap: 0,
+      percentage: currentCoverage.hospitalization ? 100 : 0,
+      status: currentCoverage.hospitalization ? 'covered' : 'gap',
+    })
+  }
+
+  // Life/TPD
+  if (coverages.life_tpd.isEnabled) {
+    const target = targets.life_tpd
+    const current = currentCoverage.life_tpd
+    const gap = Math.max(0, target - current)
+    const percentage = target > 0 ? Math.min(100, (current / target) * 100) : 0
+    categories.push({
+      category: 'life_tpd',
+      label: 'Life / TPD',
+      target,
+      current,
+      gap,
+      percentage: Math.round(percentage),
+      status: percentage >= 100 ? 'covered' : percentage > 0 ? 'partial' : 'gap',
+    })
+  }
+
+  // Critical Illness
+  if (coverages.critical_illness.isEnabled) {
+    const target = targets.critical_illness
+    const current = currentCoverage.critical_illness
+    const gap = Math.max(0, target - current)
+    const percentage = target > 0 ? Math.min(100, (current / target) * 100) : 0
+    categories.push({
+      category: 'critical_illness',
+      label: 'Critical Illness',
+      target,
+      current,
+      gap,
+      percentage: Math.round(percentage),
+      status: percentage >= 100 ? 'covered' : percentage > 0 ? 'partial' : 'gap',
+    })
+  }
+
+  // Personal Accident
+  if (coverages.personal_accident.isEnabled) {
+    const target = targets.personal_accident
+    const current = currentCoverage.personal_accident
+    const gap = Math.max(0, target - current)
+    const percentage = target > 0 ? Math.min(100, (current / target) * 100) : 0
+    categories.push({
+      category: 'personal_accident',
+      label: 'Personal Accident',
+      target,
+      current,
+      gap,
+      percentage: Math.round(percentage),
+      status: percentage >= 100 ? 'covered' : percentage > 0 ? 'partial' : 'gap',
+    })
+  }
+
+  const protectionScore = calculateProtectionScore(guidelines, currentCoverage)
+  const gapCount = categories.filter((c) => c.status === 'gap' || c.status === 'partial').length
+  const premiumBudget = targets.maxAnnualPremium
+  const premiumPercentageUsed = premiumBudget > 0
+    ? Math.round((premiumData.annualPremium / premiumBudget) * 100)
+    : 0
+
+  return {
+    personId,
+    personName,
+    annualIncome,
+    categories,
+    protectionScore,
+    gapCount,
+    totalMonthlyPremium: premiumData.monthlyPremium,
+    totalAnnualPremium: premiumData.annualPremium,
+    premiumBudget,
+    premiumPercentageUsed,
+  }
+}
+
 // ============================================================================
 // DEPRECATION NOTICE
 // ============================================================================
@@ -992,3 +1433,40 @@ export interface ProtectionScoreDeprecated extends ProtectionScore {
   /** @deprecated */
   overall: number
 }
+
+// ============================================================================
+// COVERAGE CONTROL POINTS
+// User-defined anchor points for coverage projections over time
+// Inspired by Projection Lab's control points feature
+// ============================================================================
+
+/**
+ * A user-defined anchor point for coverage at a specific age.
+ * Values that are null will use the auto-calculated recommendation.
+ */
+export interface CoverageControlPoint {
+  id: string
+  personId: string
+  age: number
+
+  /** Life/TPD coverage amount. Null = use auto-calculated. */
+  lifeTpd: number | null
+  /** Critical Illness coverage amount. Null = use auto-calculated. */
+  criticalIllness: number | null
+  /** Personal Accident coverage amount. Null = use auto-calculated. */
+  personalAccident: number | null
+
+  /** Optional user note explaining this control point */
+  reason?: string
+
+  createdAt: string
+  updatedAt: string
+}
+
+/**
+ * Interpolation mode between control points
+ * - linear: Straight line between points
+ * - smooth: Curved interpolation (bezier-style)
+ * - step: Jump directly at point age (no interpolation)
+ */
+export type InterpolationMode = 'linear' | 'smooth' | 'step'
diff --git a/frontend/src/types/person.ts b/frontend/src/types/person.ts
index 10d7fccf3..c8bb1638d 100644
--- a/frontend/src/types/person.ts
+++ b/frontend/src/types/person.ts
@@ -9,6 +9,11 @@ import type { ResidencyStatus } from './cpf'
  */
 export type Gender = 'male' | 'female'
 
+/**
+ * Relationship type indicating how a person relates to the primary household member.
+ */
+export type Relationship = 'self' | 'spouse' | 'child' | 'parent' | 'sibling' | 'other'
+
 /**
  * Person represents a household member for income/CPF ownership and filtering.
  * Now includes personal attributes previously stored on CPF accounts:
@@ -27,6 +32,7 @@ export const personSchema = z.object({
   gender: z.enum(['male', 'female']) as z.ZodType<Gender>, // Required for CPF LIFE calculations
   residencyStatus: z.enum(['citizen', 'pr']) as z.ZodType<ResidencyStatus>,
   prGrantDate: z.string().optional().nullable(), // ISO date format, required if residencyStatus='pr'
+  relationship: z.enum(['self', 'spouse', 'child', 'parent', 'sibling', 'other']).default('self') as z.ZodType<Relationship>,
   createdAt: z.string(),
   updatedAt: z.string(),
   // Stats populated by ListPersonsWithStats endpoint
@@ -43,6 +49,7 @@ export interface PersonCreatePayload {
   gender: Gender // Required for CPF LIFE calculations
   residencyStatus?: ResidencyStatus // Defaults to 'citizen'
   prGrantDate?: string // Optional, format: YYYY-MM-DD
+  relationship?: Relationship // Defaults to 'self'
 }
 
 export interface PersonUpdatePayload {
@@ -53,6 +60,7 @@ export interface PersonUpdatePayload {
   gender?: Gender
   residencyStatus?: ResidencyStatus
   prGrantDate?: string | null // Can be cleared by passing null
+  relationship?: Relationship
 }
 
 /**
diff --git a/specs/in-progress/coverage-dashboard-ui.md b/specs/in-progress/coverage-dashboard-ui.md
new file mode 100644
index 000000000..59a13cf84
--- /dev/null
+++ b/specs/in-progress/coverage-dashboard-ui.md
@@ -0,0 +1,871 @@
+# Coverage Protection Dashboard by Person
+
+## Summary
+Create a visual dashboard showing coverage targets vs actual coverage per person, with gap analysis and protection score. **Phase 1 focuses on UI with empty state** (0% coverage until policies are integrated).
+
+---
+
+## ASCII Design: Coverage Dashboard (Empty State - Phase 1)
+
+After the wizard is completed, show a **Coverage Dashboard** view. Initially shows 0% coverage since no policies are linked yet:
+
+```
+┌─────────────────────────────────────────────────────────────────────────────────┐
+│  My Coverage                                              [Edit Targets] [⟳]    │
+├─────────────────────────────────────────────────────────────────────────────────┤
+│                                                                                 │
+│  ┌───────────────────────────────────────────────────────────────────────────┐  │
+│  │                                                                           │  │
+│  │  ┌─────────────────────────────────┐   ┌───────────────────────────────┐ │  │
+│  │  │  👤 John Tan          [$120K/yr]│   │  PROTECTION SCORE             │ │  │
+│  │  │     [Change Person ▼]           │   │                               │ │  │
+│  │  └─────────────────────────────────┘   │        ╭─────────╮            │ │  │
+│  │                                        │       ╱           ╲           │ │  │
+│  │                                        │      │             │          │ │  │
+│  │                                        │      │     0%      │          │ │  │
+│  │                                        │      │             │          │ │  │
+│  │                                        │       ╲           ╱           │ │  │
+│  │                                        │        ╰─────────╯            │ │  │
+│  │                                        │                               │ │  │
+│  │                                        │   Add policies to see your    │ │  │
+│  │                                        │   protection score            │ │  │
+│  │                                        └───────────────────────────────┘ │  │
+│  │                                                                           │  │
+│  └───────────────────────────────────────────────────────────────────────────┘  │
+│                                                                                 │
+│  ┌───────────────────────────────────────────────────────────────────────────┐  │
+│  │  COVERAGE TARGETS                                                         │  │
+│  │  ─────────────────────────────────────────────────────────────────────    │  │
+│  │                                                                           │  │
+│  │  🏥 Hospitalization                                         ⚠ No Policy  │  │
+│  │     Target: Ward A + Rider                                                │  │
+│  │     ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░   0%      │  │
+│  │                                                                           │  │
+│  │  ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─     │  │
+│  │                                                                           │  │
+│  │  🛡️ Life / TPD                                              ⚠ No Policy  │  │
+│  │     Target: $1.2M (10× income)                                            │  │
+│  │     ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░   0%      │  │
+│  │                                                                           │  │
+│  │  ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─     │  │
+│  │                                                                           │  │
+│  │  💊 Critical Illness                                        ⚠ No Policy  │  │
+│  │     Target: $600K (5× income)                                             │  │
+│  │     ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░   0%      │  │
+│  │                                                                           │  │
+│  │  ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─     │  │
+│  │                                                                           │  │
+│  │  ⚡ Personal Accident                                       ⚠ No Policy  │  │
+│  │     Target: $360K (3× income)                                             │  │
+│  │     ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░   0%      │  │
+│  │                                                                           │  │
+│  └───────────────────────────────────────────────────────────────────────────┘  │
+│                                                                                 │
+│  ┌───────────────────────────────────────────────────────────────────────────┐  │
+│  │  PREMIUM BUDGET                                                           │  │
+│  │  ─────────────────────────────────────────────────────────────────────    │  │
+│  │                                                                           │  │
+│  │  Budget: $12,000/year (10% of income)            Current: $0/year         │  │
+│  │  ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░   0%       │  │
+│  │  $12,000 remaining                                                        │  │
+│  │                                                                           │  │
+│  └───────────────────────────────────────────────────────────────────────────┘  │
+│                                                                                 │
+│  ┌───────────────────────────────────────────────────────────────────────────┐  │
+│  │                                                                           │  │
+│  │     ┌──────────────────────────────────────────────────────────────┐     │  │
+│  │     │           + Add Your First Policy to Track Coverage          │     │  │
+│  │     └──────────────────────────────────────────────────────────────┘     │  │
+│  │                                                                           │  │
+│  └───────────────────────────────────────────────────────────────────────────┘  │
+│                                                                                 │
+└─────────────────────────────────────────────────────────────────────────────────┘
+```
+
+---
+
+## Circular Gauge Component Detail
+
+The protection score gauge uses an SVG circle with stroke-dasharray for the progress arc:
+
+```
+                    ╭─────────────────╮
+                   ╱                   ╲
+                  ╱    ┌───────────┐    ╲
+                 │     │    67%    │     │
+                 │     │           │     │
+                 │     │  ◉ Good   │     │     ← Status text below percentage
+                 │     └───────────┘     │
+                  ╲    ╭───────────╮    ╱
+                   ╲  ╱             ╲  ╱
+                    ╰─────────────────╯
+
+                    ↑ Colored arc shows progress
+                      (emerald for good, amber for partial, red for gap)
+
+Score Thresholds:
+  - 80-100%: "Well Protected" (emerald)
+  - 50-79%:  "Partial Coverage" (amber)
+  - 0-49%:   "Needs Attention" (red)
+```
+
+**Gauge Implementation (SVG):**
+```
+┌─────────────────────────────────────┐
+│                                     │
+│           ╱‾‾‾‾‾‾‾‾‾‾‾╲             │   ← Background circle (gray)
+│          │    ╱‾‾‾╲    │            │
+│          │   │ 67% │   │            │   ← Progress arc overlay (colored)
+│          │    ╲___╱    │            │
+│           ╲___________╱             │   ← Stroke-dasharray controls fill
+│                                     │
+│         2 gaps to address           │   ← Summary text
+│                                     │
+└─────────────────────────────────────┘
+```
+
+---
+
+## Coverage Progress Bar Component Detail
+
+Each category has its own progress bar with contextual information:
+
+```
+┌─────────────────────────────────────────────────────────────────────────────┐
+│                                                                             │
+│  🛡️ Life / TPD                                                   ⚠ Gap     │
+│     ───────────────────────────────────────────────────────────────         │
+│                                                                             │
+│     Target: $1.2M  •  Current: $800K  •  Gap: $400K                         │
+│                                                                             │
+│     ████████████████████████████████░░░░░░░░░░░░░░░░░░░░   67%              │
+│     ↑ filled portion (emerald)      ↑ empty portion (gray)                  │
+│                                                                             │
+└─────────────────────────────────────────────────────────────────────────────┘
+
+Status Badge Colors:
+  - "✓ Covered" → emerald badge
+  - "⚠ Gap"     → amber badge
+  - "⚠ No Policy" → gray/muted badge
+```
+
+**Hospitalization (Binary - no dollar amounts):**
+```
+┌─────────────────────────────────────────────────────────────────────────────┐
+│                                                                             │
+│  🏥 Hospitalization                                            ✓ Covered    │
+│     ───────────────────────────────────────────────────────────────         │
+│                                                                             │
+│     Ward A + Rider                    ← Just shows the coverage type        │
+│                                                                             │
+│     ████████████████████████████████████████████████████████   100%         │
+│                                                                             │
+└─────────────────────────────────────────────────────────────────────────────┘
+```
+
+---
+
+## With Policies (Future State - Phase 2)
+
+Once policies are linked, the dashboard shows actual coverage:
+
+```
+┌─────────────────────────────────────────────────────────────────────────────────┐
+│  My Coverage                                              [Edit Targets] [⟳]    │
+├─────────────────────────────────────────────────────────────────────────────────┤
+│                                                                                 │
+│  ┌───────────────────────────────────────────────────────────────────────────┐  │
+│  │                                                                           │  │
+│  │  ┌─────────────────────────────────┐   ┌───────────────────────────────┐ │  │
+│  │  │  👤 John Tan          [$120K/yr]│   │  PROTECTION SCORE             │ │  │
+│  │  │     [Change Person ▼]           │   │                               │ │  │
+│  │  └─────────────────────────────────┘   │        ╭─────────╮            │ │  │
+│  │                                        │       ╱ ██████████╲           │ │  │
+│  │                                        │      │ ██████████ │          │ │  │
+│  │                                        │      │     67%     │          │ │  │
+│  │                                        │      │  ██████████ │          │ │  │
+│  │                                        │       ╲ █████████ ╱           │ │  │
+│  │                                        │        ╰─────────╯            │ │  │
+│  │                                        │                               │ │  │
+│  │                                        │      ⚠ Partial Coverage       │ │  │
+│  │                                        │      2 gaps need attention    │ │  │
+│  │                                        └───────────────────────────────┘ │  │
+│  │                                                                           │  │
+│  └───────────────────────────────────────────────────────────────────────────┘  │
+│                                                                                 │
+│  ┌───────────────────────────────────────────────────────────────────────────┐  │
+│  │  COVERAGE BY CATEGORY                                                     │  │
+│  │  ─────────────────────────────────────────────────────────────────────    │  │
+│  │                                                                           │  │
+│  │  🏥 Hospitalization                                         ✓ Covered    │  │
+│  │     Ward A + Rider                                                        │  │
+│  │     ████████████████████████████████████████████████████████████  100%   │  │
+│  │                                                                           │  │
+│  │  ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─     │  │
+│  │                                                                           │  │
+│  │  🛡️ Life / TPD                                               ⚠ Gap       │  │
+│  │     Target: $1.2M  •  Current: $800K  •  Gap: $400K                       │  │
+│  │     ███████████████████████████████████░░░░░░░░░░░░░░░░░░░░░░░░   67%    │  │
+│  │                                                                           │  │
+│  │  ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─     │  │
+│  │                                                                           │  │
+│  │  💊 Critical Illness                                         ⚠ Gap       │  │
+│  │     Target: $600K  •  Current: $200K  •  Gap: $400K                       │  │
+│  │     ███████████░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░   33%    │  │
+│  │                                                                           │  │
+│  │  ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─     │  │
+│  │                                                                           │  │
+│  │  ⚡ Personal Accident                                        ✓ Covered   │  │
+│  │     Target: $360K  •  Current: $500K  •  Excess: +$140K                   │  │
+│  │     ████████████████████████████████████████████████████████████  100%+  │  │
+│  │                                                                           │  │
+│  └───────────────────────────────────────────────────────────────────────────┘  │
+│                                                                                 │
+│  ┌───────────────────────────────────────────────────────────────────────────┐  │
+│  │  PREMIUM SUMMARY                                                          │  │
+│  │  ─────────────────────────────────────────────────────────────────────    │  │
+│  │                                                                           │  │
+│  │  Monthly: $450    Annual: $5,400    Budget: $12,000 (10%)                 │  │
+│  │  ███████████████████████████░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░   45%    │  │
+│  │  Using 45% of budget  •  $6,600 remaining                                 │  │
+│  │                                                                           │  │
+│  └───────────────────────────────────────────────────────────────────────────┘  │
+│                                                                                 │
+│  ┌───────────────────────────────────────────────────────────────────────────┐  │
+│  │  QUICK ACTIONS                                                            │  │
+│  │                                                                           │  │
+│  │  ┌─────────────────┐  ┌─────────────────┐  ┌─────────────────┐           │  │
+│  │  │   + Add Policy  │  │  📊 View Gaps   │  │  ⚙ Edit Targets │           │  │
+│  │  └─────────────────┘  └─────────────────┘  └─────────────────┘           │  │
+│  │                                                                           │  │
+│  └───────────────────────────────────────────────────────────────────────────┘  │
+│                                                                                 │
+└─────────────────────────────────────────────────────────────────────────────────┘
+```
+
+---
+
+## Layout Options
+
+**Option A: Side-by-side (Current plan)**
+```
+┌──────────────────────────────────┬────────────────────────────────────────────┐
+│  PERSON SELECTOR                 │  PROTECTION SCORE                          │
+│  👤 John Tan                     │        ╭─────╮                             │
+│  $120K/year                      │       │ 67% │                             │
+│                                  │        ╰─────╯                             │
+└──────────────────────────────────┴────────────────────────────────────────────┘
+```
+
+**Option B: Stacked (Mobile-friendly)**
+```
+┌─────────────────────────────────────────────────────────────────────────────────┐
+│  👤 John Tan                                               $120K/year           │
+├─────────────────────────────────────────────────────────────────────────────────┤
+│                             ╭─────────╮                                         │
+│                            │   67%   │                                         │
+│                             ╰─────────╯                                         │
+│                         Partial Coverage                                        │
+└─────────────────────────────────────────────────────────────────────────────────┘
+```
+
+---
+
+## Data Flow
+
+```
+┌─────────────────┐     ┌─────────────────┐     ┌─────────────────┐
+│  Guidelines     │     │  Policies       │     │  Coverage       │
+│  Store          │     │  (Phase 2)      │     │  Dashboard      │
+│                 │     │                 │     │                 │
+│ • selectedPerson│────▶│ • Query by      │────▶│ • Target vs     │
+│ • annualIncome  │     │   personId      │     │   Actual        │
+│ • multipliers   │     │ • Sum coverage  │     │ • Gap calc      │
+│ • targets       │     │   by category   │     │ • Score %       │
+└─────────────────┘     └─────────────────┘     └─────────────────┘
+
+Phase 1: Guidelines Store → Dashboard (0% coverage, targets only)
+Phase 2: + Policies → Dashboard (actual coverage shown)
+```
+
+---
+
+## Protection Score Calculation
+
+```
+score = weightedAverage(
+  hospitalization: hasValidISP ? 100 : 0,           weight: 0.25
+  life_tpd: min(100, (current / target) * 100),     weight: 0.35
+  critical_illness: min(100, (current / target) * 100), weight: 0.25
+  personal_accident: min(100, (current / target) * 100), weight: 0.15
+)
+```
+
+---
+
+## Component Structure
+
+```
+CoverageDashboard
+├── DashboardHeader
+│   ├── Title "My Coverage"
+│   ├── Edit Targets button
+│   └── Reset button
+├── PersonScoreSection (flex row)
+│   ├── PersonCard
+│   │   ├── Person name + color dot
+│   │   ├── Annual income display
+│   │   └── Change Person dropdown
+│   └── ProtectionScoreGauge
+│       ├── SVG circular progress
+│       ├── Percentage text
+│       └── Status message
+├── CoverageCategoryList
+│   └── CoverageCategoryRow × 4
+│       ├── Category icon + label
+│       ├── Status badge (Covered/Gap/No Policy)
+│       ├── Target/Current/Gap amounts
+│       └── Progress bar
+├── PremiumBudgetSection
+│   ├── Budget info (monthly/annual)
+│   ├── Progress bar
+│   └── Remaining amount
+└── QuickActionsSection
+    └── Add Policy button (prominent CTA)
+```
+
+---
+
+## Files to Modify
+
+### 1. `frontend/src/types/insurance.ts` ✅ DONE
+- Added `CoverageCategoryStatus` interface
+- Added `CoverageStatus` interface
+- Added `calculateProtectionScore()` function
+- Added `buildCoverageStatus()` function
+
+### 2. `frontend/src/components/insurance/CoverageDashboard.tsx` (NEW)
+Main dashboard component containing:
+- `ProtectionScoreGauge` - SVG circular gauge
+- `CoverageCategoryRow` - Individual category with progress bar
+- `PremiumBudgetBar` - Budget utilization display
+- `CoverageDashboard` - Main orchestrating component
+
+### 3. `frontend/src/components/insurance/tabs/GuidelinesTab.tsx`
+- Replace `ConfiguredGuidelinesView` with import of `CoverageDashboard`
+
+---
+
+## Implementation Notes
+
+**SVG Circular Gauge:**
+- Use `stroke-dasharray` and `stroke-dashoffset` for progress
+- Circle with radius ~45, stroke-width ~10
+- Background circle in gray, progress arc in color
+- Animate with CSS transition on stroke-dashoffset
+
+**Progress Bars:**
+- Simple div with width percentage
+- Background: `bg-white/[0.1]`
+- Fill: `bg-emerald-500` (covered), `bg-amber-500` (partial), `bg-slate-600` (empty)
+
+**Empty State:**
+- All progress at 0%
+- Protection score shows 0%
+- Prominent CTA to add first policy
+- Targets still visible so user knows what they're working toward
+
+---
+
+## Verification
+
+1. Complete wizard → See coverage dashboard (empty state)
+2. Dashboard shows targets with 0%
+3. Circular gauge displays 0% with "Add policies" message
+4. Person selector changes income and targets
+5. TypeScript: `cd frontend && npx tsc --noEmit`
+
+---
+
+## Questions for Review
+
+1. **Layout**: Side-by-side (Option A) or stacked (Option B) for person+score section?
+2. **Empty state CTA**: Single prominent button or include "View Gaps" as secondary action?
+3. **Category icons**: Use emojis (🏥🛡️💊⚡) or Lucide icons?
+
+---
+
+# Coverage Journey View (Age-Based Planning)
+
+## Concept
+
+A dedicated view showing how insurance coverage needs evolve over a lifetime, personalized to the user's life stage and family situation. Combines:
+1. Life Stage context
+2. Coverage Curve visualization
+3. Interactive Age Slider
+4. Milestone Alerts
+
+---
+
+## Full Page View (Desktop)
+
+```
+╔════════════════════════════════════════════════════════════════════════════════╗
+║                                                                                ║
+║   Coverage Journey                                           [• Alex ▾]       ║
+║   ─────────────────────────────────────────────────────────────────────────── ║
+║                                                                                ║
+║   ┌─────────────────────────────────────────────────────────────────────────┐ ║
+║   │                                                                         │ ║
+║   │   Your Life Stage                                                       │ ║
+║   │                                                                         │ ║
+║   │   ┌───────────┐ ┌───────────┐ ┌─────────────┐ ┌────────────┐ ┌───────┐ │ ║
+║   │   │   Young   │ │    New    │ │  ● Growing  │ │   Empty    │ │Retired│ │ ║
+║   │   │   Prof    │ │   Parent  │ │    Family   │ │   Nester   │ │       │ │ ║
+║   │   └───────────┘ └───────────┘ └─────────────┘ └────────────┘ └───────┘ │ ║
+║   │        ○              ○              ●              ○            ○      │ ║
+║   │                                                                         │ ║
+║   │   You're in: Growing Family                                             │ ║
+║   │   Peak protection years • Dependents rely on your income                │ ║
+║   │                                                                         │ ║
+║   └─────────────────────────────────────────────────────────────────────────┘ ║
+║                                                                                ║
+║   ┌─────────────────────────────────────────────────────────────────────────┐ ║
+║   │                                                                         │ ║
+║   │   Coverage Needs Over Time                                              │ ║
+║   │                                                                         │ ║
+║   │   $1.2M ┤                                                               │ ║
+║   │         │           ╭─────────────╮                                     │ ║
+║   │   $1.0M ┤          ╱               ╲                                    │ ║
+║   │         │         ╱                 ╲                                   │ ║
+║   │   $800K ┤        ╱        ●          ╲                                  │ ║
+║   │         │       ╱     YOU ARE         ╲                                 │ ║
+║   │   $600K ┤      ╱       HERE            ╲                                │ ║
+║   │         │     ╱                         ╲                               │ ║
+║   │   $400K ┤    ╱                           ╲____                          │ ║
+║   │         │   ╱                                 ╲____                     │ ║
+║   │   $200K ┤  ╱                                       ╲____                │ ║
+║   │         │ ╱                                             ╲____           │ ║
+║   │       0 ┼─┬─────┬─────┬─────┬─────┬─────┬─────┬─────┬─────┬────→       │ ║
+║   │         25     30     35     40     45     50     55     60     65      │ ║
+║   │                  │            ↑            │            │               │ ║
+║   │                  │         Age 38          │            │               │ ║
+║   │            1st child     (current)    Kids grad    Retirement           │ ║
+║   │                                                                         │ ║
+║   │   ─────────────────────────────────────────────────────────────────    │ ║
+║   │                                                                         │ ║
+║   │   Explore:  25 [═══════════●═══════════════════════════════════] 75    │ ║
+║   │                         Age 38                                          │ ║
+║   │                                                                         │ ║
+║   └─────────────────────────────────────────────────────────────────────────┘ ║
+║                                                                                ║
+║   ┌─────────────────────────────────────────────────────────────────────────┐ ║
+║   │                                                                         │ ║
+║   │   At Age 38 (Current)                                                   │ ║
+║   │                                                                         │ ║
+║   │   ┌──────────────────┬──────────────┬──────────────┬──────────────────┐│ ║
+║   │   │     Category     │  Recommended │    Current   │    Status        ││ ║
+║   │   ├──────────────────┼──────────────┼──────────────┼──────────────────┤│ ║
+║   │   │ 🛡️ Life/TPD      │    $960,000  │    $960,000  │  ✓ On Target    ││ ║
+║   │   │ 💗 Critical Ill  │     $80,000  │     $60,000  │  ⚠ Gap: $20K    ││ ║
+║   │   │ 🏥 Hospital      │     Ward B1  │     Ward B1  │  ✓ Covered      ││ ║
+║   │   │ ⚡ Accident      │    $120,000  │    $120,000  │  ✓ On Target    ││ ║
+║   │   └──────────────────┴──────────────┴──────────────┴──────────────────┘│ ║
+║   │                                                                         │ ║
+║   └─────────────────────────────────────────────────────────────────────────┘ ║
+║                                                                                ║
+║   ┌─────────────────────────────────────────────────────────────────────────┐ ║
+║   │                                                                         │ ║
+║   │   Upcoming Milestones                                                   │ ║
+║   │                                                                         │ ║
+║   │   ┌─────────────────────────────────────────────────────────────────┐  │ ║
+║   │   │                                                                 │  │ ║
+║   │   │  ○───────────────○───────────────○───────────────○             │  │ ║
+║   │   │  │               │               │               │             │  │ ║
+║   │   │  2026            2031            2038            2050          │  │ ║
+║   │   │  NOW             Emma 22         Mortgage        Retirement    │  │ ║
+║   │   │                                  Paid Off                      │  │ ║
+║   │   │                                                                 │  │ ║
+║   │   └─────────────────────────────────────────────────────────────────┘  │ ║
+║   │                                                                         │ ║
+║   │   ┌─────────────────────────────────────────────────────────────────┐  │ ║
+║   │   │  📅  2031 • In 5 years                                          │  │ ║
+║   │   │  ─────────────────────────────────────────────────────────────  │  │ ║
+║   │   │  Emma turns 22 and becomes financially independent              │  │ ║
+║   │   │                                                                 │  │ ║
+║   │   │  Impact on coverage:                                            │  │ ║
+║   │   │  • Life/TPD need drops from $960K → $720K  (−$240K)            │  │ ║
+║   │   │  • Consider reducing premium by ~$800/year                      │  │ ║
+║   │   │                                                                 │  │ ║
+║   │   │  [Set Reminder]                                                 │  │ ║
+║   │   └─────────────────────────────────────────────────────────────────┘  │ ║
+║   │                                                                         │ ║
+║   │   ┌─────────────────────────────────────────────────────────────────┐  │ ║
+║   │   │  📅  2038 • In 12 years                                         │  │ ║
+║   │   │  ─────────────────────────────────────────────────────────────  │  │ ║
+║   │   │  Mortgage fully paid off                                        │  │ ║
+║   │   │                                                                 │  │ ║
+║   │   │  Impact on coverage:                                            │  │ ║
+║   │   │  • Life/TPD need drops from $720K → $400K  (−$320K)            │  │ ║
+║   │   │  • No longer need to cover outstanding home loan                │  │ ║
+║   │   │                                                                 │  │ ║
+║   │   └─────────────────────────────────────────────────────────────────┘  │ ║
+║   │                                                                         │ ║
+║   │   ┌─────────────────────────────────────────────────────────────────┐  │ ║
+║   │   │  📅  2050 • At age 62                                           │  │ ║
+║   │   │  ─────────────────────────────────────────────────────────────  │  │ ║
+║   │   │  Retirement                                                     │  │ ║
+║   │   │                                                                 │  │ ║
+║   │   │  Coverage focus shifts:                                         │  │ ║
+║   │   │  • Life/TPD becomes optional (no dependents, no debt)          │  │ ║
+║   │   │  • Hospitalization becomes priority (age-related health)        │  │ ║
+║   │   │  • Consider upgrading ward class for retirement years           │  │ ║
+║   │   │                                                                 │  │ ║
+║   │   └─────────────────────────────────────────────────────────────────┘  │ ║
+║   │                                                                         │ ║
+║   └─────────────────────────────────────────────────────────────────────────┘ ║
+║                                                                                ║
+╚════════════════════════════════════════════════════════════════════════════════╝
+```
+
+---
+
+## Age Slider Interaction States
+
+### State: Current Age (38)
+```
+┌─────────────────────────────────────────────────────────────────┐
+│                                                                 │
+│   Explore:  25 [═══════════●═══════════════════════════] 75    │
+│                         Age 38                                  │
+│                          ↑                                      │
+│                    (Your current age)                           │
+│                                                                 │
+│   ┌─────────────────────────────────────────────────────────┐  │
+│   │  At Age 38 (Current)                     📍 YOU ARE HERE │  │
+│   │                                                          │  │
+│   │  Life/TPD        $960,000  needed                        │  │
+│   │  Critical Ill     $80,000  needed                        │  │
+│   │  Hospital         Ward B1  minimum                       │  │
+│   │  Accident        $120,000  needed                        │  │
+│   └─────────────────────────────────────────────────────────┘  │
+│                                                                 │
+└─────────────────────────────────────────────────────────────────┘
+```
+
+### State: Dragged to Age 45
+```
+┌─────────────────────────────────────────────────────────────────┐
+│                                                                 │
+│   Explore:  25 [═══════════════════●═══════════════════] 75    │
+│                                  Age 45                         │
+│                                    ↑                            │
+│                          (7 years from now)                     │
+│                                                                 │
+│   ┌─────────────────────────────────────────────────────────┐  │
+│   │  At Age 45                              📅 IN 7 YEARS    │  │
+│   │                                                          │  │
+│   │  Life/TPD        $720,000  needed   (↓ $240K from now)  │  │
+│   │  Critical Ill     $80,000  needed   (same)               │  │
+│   │  Hospital         Ward B1  minimum  (same)               │  │
+│   │  Accident        $100,000  needed   (↓ $20K from now)   │  │
+│   │                                                          │  │
+│   │  Why the change?                                         │  │
+│   │  • Emma turned 22 and is now independent                 │  │
+│   └─────────────────────────────────────────────────────────┘  │
+│                                                                 │
+└─────────────────────────────────────────────────────────────────┘
+```
+
+### State: Dragged to Age 65
+```
+┌─────────────────────────────────────────────────────────────────┐
+│                                                                 │
+│   Explore:  25 [═══════════════════════════════════●═══] 75    │
+│                                                  Age 65         │
+│                                                    ↑            │
+│                                         (27 years from now)     │
+│                                                                 │
+│   ┌─────────────────────────────────────────────────────────┐  │
+│   │  At Age 65                           🌅 RETIREMENT       │  │
+│   │                                                          │  │
+│   │  Life/TPD        $100,000  optional  (↓ $860K from now) │  │
+│   │  Critical Ill     $50,000  optional  (↓ $30K)           │  │
+│   │  Hospital      Ward A/B1+  priority  (↑ upgrade)        │  │
+│   │  Accident         $50,000  optional  (↓ $70K)           │  │
+│   │                                                          │  │
+│   │  Why the change?                                         │  │
+│   │  • No dependents relying on income                       │  │
+│   │  • Mortgage paid off                                     │  │
+│   │  • CPF LIFE provides baseline income                     │  │
+│   │  • Health coverage becomes primary concern               │  │
+│   └─────────────────────────────────────────────────────────┘  │
+│                                                                 │
+└─────────────────────────────────────────────────────────────────┘
+```
+
+---
+
+## Life Stage Cards
+
+### Young Professional (22-30, no dependents)
+```
+┌─────────────────────────────────────────────────────────────────┐
+│                                                                 │
+│   🌱 Young Professional                                         │
+│   ─────────────────────────────────────────────────────────────│
+│                                                                 │
+│   Age range: 22-30                                              │
+│   Typical situation: Single or newly married, no children       │
+│                                                                 │
+│   Coverage priorities:                                          │
+│                                                                 │
+│   ████████████████████░░░░ Hospitalization (Essential)          │
+│   Ward B2+ minimum. You're healthy now but accidents happen.   │
+│                                                                 │
+│   ████████░░░░░░░░░░░░░░░░ Life/TPD (Low)                       │
+│   2-3x income. Mainly to cover debts if any.                   │
+│                                                                 │
+│   ████████░░░░░░░░░░░░░░░░ Critical Illness (Low)               │
+│   1-2x income. Emergency fund substitute.                       │
+│                                                                 │
+│   ████░░░░░░░░░░░░░░░░░░░░ Personal Accident (Optional)         │
+│   Nice to have if physically active.                            │
+│                                                                 │
+│   💡 Focus: Build emergency fund first, basic coverage second   │
+│                                                                 │
+└─────────────────────────────────────────────────────────────────┘
+```
+
+### Growing Family (30-50, dependents)
+```
+┌─────────────────────────────────────────────────────────────────┐
+│                                                                 │
+│   🏠 Growing Family                                             │
+│   ─────────────────────────────────────────────────────────────│
+│                                                                 │
+│   Age range: 30-50                                              │
+│   Typical situation: Married, children, mortgage                │
+│                                                                 │
+│   Coverage priorities:                                          │
+│                                                                 │
+│   ████████████████████████ Life/TPD (CRITICAL)                  │
+│   8-12x income. Family depends on your income.                 │
+│   Include: mortgage + kids' education + 5-10yr expenses        │
+│                                                                 │
+│   ████████████████████░░░░ Hospitalization (Essential)          │
+│   Ward B1+. Can't afford downtime during peak earning years.   │
+│                                                                 │
+│   ████████████████░░░░░░░░ Critical Illness (Important)         │
+│   3-5x income. Recovery period without working.                │
+│                                                                 │
+│   ████████████░░░░░░░░░░░░ Personal Accident (Moderate)         │
+│   2x income. Additional protection during active years.        │
+│                                                                 │
+│   ⚠️ This is your PEAK protection period. Don't underinsure.   │
+│                                                                 │
+└─────────────────────────────────────────────────────────────────┘
+```
+
+### Empty Nester (50-65, kids independent)
+```
+┌─────────────────────────────────────────────────────────────────┐
+│                                                                 │
+│   🍂 Empty Nester                                               │
+│   ─────────────────────────────────────────────────────────────│
+│                                                                 │
+│   Age range: 50-65                                              │
+│   Typical situation: Kids independent, mortgage reducing        │
+│                                                                 │
+│   Coverage priorities:                                          │
+│                                                                 │
+│   ████████████████████░░░░ Hospitalization (Priority)           │
+│   Ward B1+. Health concerns increase with age.                 │
+│                                                                 │
+│   ████████████░░░░░░░░░░░░ Life/TPD (Decreasing)                │
+│   3-5x income. Only need to cover remaining debts + spouse.    │
+│                                                                 │
+│   ████████████░░░░░░░░░░░░ Critical Illness (Important)         │
+│   2-3x income. Higher risk age group.                          │
+│                                                                 │
+│   ████████░░░░░░░░░░░░░░░░ Personal Accident (Lower)            │
+│   1x income. Less active lifestyle.                            │
+│                                                                 │
+│   💡 Review and reduce life coverage as debts clear            │
+│                                                                 │
+└─────────────────────────────────────────────────────────────────┘
+```
+
+### Retirement (65+)
+```
+┌─────────────────────────────────────────────────────────────────┐
+│                                                                 │
+│   🌅 Retirement                                                 │
+│   ─────────────────────────────────────────────────────────────│
+│                                                                 │
+│   Age range: 65+                                                │
+│   Typical situation: No dependents, no debt, CPF LIFE income   │
+│                                                                 │
+│   Coverage priorities:                                          │
+│                                                                 │
+│   ████████████████████████ Hospitalization (ESSENTIAL)          │
+│   Ward A or B1. This is your main concern now.                 │
+│   Consider: Lifetime guarantee, no co-pay riders               │
+│                                                                 │
+│   ████████░░░░░░░░░░░░░░░░ Life/TPD (Optional)                  │
+│   Legacy planning only. Not for income replacement.            │
+│                                                                 │
+│   ████████░░░░░░░░░░░░░░░░ Critical Illness (Low)               │
+│   If affordable. May be expensive at this age.                 │
+│                                                                 │
+│   ████░░░░░░░░░░░░░░░░░░░░ Personal Accident (Optional)         │
+│   Consider if still active.                                    │
+│                                                                 │
+│   💡 Focus shifts from income protection to health coverage    │
+│                                                                 │
+└─────────────────────────────────────────────────────────────────┘
+```
+
+---
+
+## Multi-Category Coverage Curve
+
+```
+┌─────────────────────────────────────────────────────────────────────────────┐
+│                                                                             │
+│   Coverage Needs by Category                              [Combined ▾]      │
+│                                                                             │
+│                                                                             │
+│   $1.2M ┤                                                                   │
+│         │           ╭─────────────╮                                         │
+│   $1.0M ┤          ╱               ╲                                        │
+│         │         ╱    Life/TPD     ╲                                       │
+│   $800K ┤        ╱         ●         ╲                                      │
+│         │       ╱                     ╲                                     │
+│   $600K ┤      ╱                       ╲                                    │
+│         │     ╱                         ╲                                   │
+│   $400K ┤    ╱                           ╲____                              │
+│         │   ╱   ╭───────────────────────╮     ╲____                         │
+│   $200K ┤  ╱   ╱  Critical Illness       ╲         ╲____                    │
+│         │ ╱   ╱ ╭────────────────────────────────────╮  ╲___                │
+│   $100K ┼╱───╱─╱  Personal Accident                   ╲────╲____            │
+│         │   ╱                                                    ╲___       │
+│       0 ┼──┬─────┬─────┬─────┬─────┬─────┬─────┬─────┬─────┬────→          │
+│         25      30     35     40     45     50     55     60     65         │
+│                                      ↑                                      │
+│                                   Age 40                                    │
+│                                                                             │
+│   Legend:  ━━━ Life/TPD   ─── Critical Illness   ··· Accident              │
+│                                                                             │
+└─────────────────────────────────────────────────────────────────────────────┘
+```
+
+---
+
+## Mobile Layout (Stacked)
+
+```
+┌──────────────────────────────┐
+│                              │
+│   Coverage Journey           │
+│   ──────────────────────────│
+│                              │
+│   [• Alex ▾]                 │
+│                              │
+│   ┌──────────────────────┐  │
+│   │  🏠 Growing Family    │  │
+│   │  Peak protection     │  │
+│   └──────────────────────┘  │
+│                              │
+│   ┌──────────────────────┐  │
+│   │        ╭──╮          │  │
+│   │       ╱    ╲         │  │
+│   │      ╱  ●   ╲        │  │
+│   │     ╱        ╲___    │  │
+│   │    ╱              ╲  │  │
+│   │   ─┬──┬──┬──┬──┬──→  │  │
+│   │   25 35 45 55 65     │  │
+│   │                      │  │
+│   │   Age: [════●════]   │  │
+│   │           38         │  │
+│   └──────────────────────┘  │
+│                              │
+│   At Age 38                  │
+│   ┌──────────────────────┐  │
+│   │ Life/TPD    $960K ✓  │  │
+│   │ Critical    $60K  ⚠  │  │
+│   │ Hospital    B1    ✓  │  │
+│   │ Accident    $120K ✓  │  │
+│   └──────────────────────┘  │
+│                              │
+│   Milestones                 │
+│   ┌──────────────────────┐  │
+│   │ 📅 2031              │  │
+│   │ Emma turns 22        │  │
+│   │ Coverage ↓ $240K     │  │
+│   └──────────────────────┘  │
+│   ┌──────────────────────┐  │
+│   │ 📅 2038              │  │
+│   │ Mortgage paid        │  │
+│   │ Coverage ↓ $320K     │  │
+│   └──────────────────────┘  │
+│                              │
+└──────────────────────────────┘
+```
+
+---
+
+## Coverage Journey - Data Types
+
+```tsx
+type LifeStage =
+  | 'young_professional'  // 22-30, no dependents
+  | 'new_parent'          // First child under 5
+  | 'growing_family'      // Multiple dependents, peak need
+  | 'empty_nester'        // Kids independent, mortgage winding down
+  | 'pre_retirement'      // 55-65, transitioning
+  | 'retired'             // 65+, health focus
+
+interface CoverageProjectionYear {
+  age: number
+  year: number
+  recommendedLifeTpd: number
+  recommendedCriticalIllness: number
+  currentLifeTpd: number
+  currentCriticalIllness: number
+}
+
+interface CoverageMilestone {
+  year: number
+  age: number
+  event: string
+  impact: string  // e.g., "Coverage need drops $240K"
+  category: 'dependent' | 'debt' | 'retirement' | 'health'
+}
+```
+
+---
+
+## Coverage Journey - Files to Create
+
+**New files:**
+- `frontend/src/components/insurance/CoverageJourney.tsx` - Main view
+- `frontend/src/components/insurance/CoverageNeedsCurve.tsx` - Chart
+- `frontend/src/components/insurance/LifeStagePills.tsx` - Stage selector
+- `frontend/src/components/insurance/MilestoneAlerts.tsx` - Alerts
+- `frontend/src/lib/coverage-journey-utils.ts` - Calculations
+
+**Modify:**
+- `frontend/src/stores/coverageGuidelinesStore.ts` - Add life stage
+- `frontend/src/components/insurance/InsuranceTabs.tsx` - Add Journey tab
+
+---
+
+## Coverage Journey - Verification
+
+1. Life stage auto-detects correctly based on age/dependents
+2. Coverage curve shows realistic shape (peaks in 30s-40s, declines after)
+3. Age slider updates comparison table in real-time
+4. Milestones calculate correctly from dependent ages
+5. Responsive on mobile (stack vertically)
+6. TypeScript compiles: `npx tsc --noEmit`
diff --git a/specs/in-progress/coverage-guidelines-ui.md b/specs/in-progress/coverage-guidelines-ui.md
new file mode 100644
index 000000000..0ef30acd6
--- /dev/null
+++ b/specs/in-progress/coverage-guidelines-ui.md
@@ -0,0 +1,385 @@
+# Coverage Guidelines UI Specification
+
+## Overview
+
+A user-configurable insurance coverage guidelines system that allows users to define their own coverage targets based on income multipliers. This replaces generic LIA benchmarks with personalized "Captain of Your Ship" guidelines.
+
+## Philosophy
+
+- Users define their OWN coverage targets, not industry benchmarks
+- Coverage expressed as multiples of annual income (e.g., 10× for Life/TPD)
+- Hospitalization is ward-class based, not income-based
+- Premium budget constraint: ≤ X% of income
+- 5 independent risk layers, not a combined "protection score"
+
+---
+
+## Coverage Types & Icons
+
+| Type | Emoji | Color | Multiplier | Required |
+|------|-------|-------|------------|----------|
+| Hospitalization | 🏥 | emerald | N/A (ward class) | Yes |
+| Life / TPD | 😇 | blue | 10× (default) | Yes |
+| Critical Illness | 🩺 | purple | 5× (default) | Yes |
+| Personal Accident | 🚗 | amber | 5× (default) | No (optional) |
+
+### Icon Design Decision
+- Rejected: 💀 (skull) for Life/TPD - too morbid
+- Chosen: 😇 (smiling face with halo) - "guardian angel" vibe
+
+---
+
+## Presets
+
+| Preset | Life/TPD | CI | PA | Premium Budget |
+|--------|----------|----|----|----------------|
+| 🌱 Lean | 5× | 3× | 3× | 5% |
+| ⚖️ Standard | 10× | 5× | 5× | 10% |
+| 🛡️ Comprehensive | 15× | 7× | 10× | 15% |
+
+---
+
+## User Flow
+
+### First-Time Users: 3-Step Wizard
+
+```
+┌─────────────────────────────────────────────────────────────────┐
+│                    STEP INDICATOR                                │
+│                                                                  │
+│      ●────────────○────────────○                                │
+│    Income      Coverage      Review                             │
+│   (current)                                                     │
+└─────────────────────────────────────────────────────────────────┘
+```
+
+### Returning Users: Configured View
+Direct access to editable dashboard with all coverage cards and summary sidebar.
+
+---
+
+## Wizard Step 1: Income
+
+```
+┌─────────────────────────────────────────────────────────────────┐
+│                                                                  │
+│                         💵                                       │
+│                                                                  │
+│            What's your annual income?                           │
+│                                                                  │
+│    Your coverage targets are calculated as multiples            │
+│    of your income. This helps ensure you're adequately          │
+│    protected.                                                   │
+│                                                                  │
+│  ┌─────────────────────────────────────────────────────────┐   │
+│  │  Annual gross income (before tax)                        │   │
+│  │                                                          │   │
+│  │  $  ┌──────────────────────────────────────────┐        │   │
+│  │     │                                  80,000  │        │   │
+│  │     └──────────────────────────────────────────┘        │   │
+│  │                                                          │   │
+│  │  ┌─────┐ ┌─────┐ ┌──────┐ ┌──────┐ ┌──────┐            │   │
+│  │  │$50K │ │$80K │ │$100K │ │$150K │ │$200K │            │   │
+│  │  └─────┘ └─────┘ └──────┘ └──────┘ └──────┘            │   │
+│  └─────────────────────────────────────────────────────────┘   │
+│                                                                  │
+│  ┌─────────────────────────────────────────────────────────┐   │
+│  │ ℹ️  Why does income matter?                              │   │
+│  │                                                          │   │
+│  │ Insurance coverage is typically expressed as multiples   │   │
+│  │ of annual income (e.g., 10× for life insurance). This   │   │
+│  │ ensures your dependents can maintain their lifestyle    │   │
+│  │ if something happens to you.                            │   │
+│  └─────────────────────────────────────────────────────────┘   │
+│                                                                  │
+│            ┌────────────────────────────────┐                   │
+│            │     Continue            →      │                   │
+│            └────────────────────────────────┘                   │
+│                                                                  │
+└─────────────────────────────────────────────────────────────────┘
+```
+
+---
+
+## Wizard Step 2: Coverage Multipliers
+
+```
+┌─────────────────────────────────────────────────────────────────┐
+│                                                                  │
+│                         ✨                                       │
+│                                                                  │
+│            Set your coverage targets                            │
+│                                                                  │
+│    Choose a preset or customize each coverage type.             │
+│    Remember: these are YOUR guidelines.                         │
+│                                                                  │
+│  ┌─────────────────────────────────────────────────────────┐   │
+│  │    PRESETS                                               │   │
+│  │                                                          │   │
+│  │  ┌───────────┐  ┌───────────┐  ┌───────────┐           │   │
+│  │  │    🌱     │  │    ⚖️     │  │    🛡️     │           │   │
+│  │  │   Lean    │  │ Standard  │  │Comprehen- │           │   │
+│  │  │  5× Life  │  │ 10× Life  │  │sive 15×   │           │   │
+│  │  │  3× CI    │  │  5× CI    │  │   7× CI   │           │   │
+│  │  └───────────┘  └───────────┘  └───────────┘           │   │
+│  └─────────────────────────────────────────────────────────┘   │
+│                                                                  │
+│  ┌─────────────────────────────────────────────────────────┐   │
+│  │ 🏥  Hospitalization                           [ON/OFF]   │   │
+│  │     Must upgrade from MediShield Life to ISP             │   │
+│  │                                                          │   │
+│  │     Ward Class:  ┌───┐ ┌───┐ ┌────┐ ┌───┐              │   │
+│  │                  │ A │ │B1 │ │B2+ │ │ C │              │   │
+│  │                  └───┘ └───┘ └────┘ └───┘              │   │
+│  │                                                          │   │
+│  │     ☑️ Include rider (reduces co-pay)                    │   │
+│  └─────────────────────────────────────────────────────────┘   │
+│                                                                  │
+│  ┌─────────────────────────────────────────────────────────┐   │
+│  │ 😇  Life / TPD                     ❓        [ON/OFF]   │   │
+│  │     Death and Total Permanent Disability coverage        │   │
+│  │                                                          │   │
+│  │     10× income                              $800,000     │   │
+│  │     ├────────────────●──────────────────────────┤       │   │
+│  │     1×              10×                        20×       │   │
+│  └─────────────────────────────────────────────────────────┘   │
+│                                                                  │
+│  ┌─────────────────────────────────────────────────────────┐   │
+│  │ 🩺  Critical Illness                 ❓        [ON/OFF]   │   │
+│  │     Lump-sum payout on diagnosis of major illness        │   │
+│  │                                                          │   │
+│  │     5× income                               $400,000     │   │
+│  │     ├──────────●────────────────────────────────┤       │   │
+│  │     1×         5×                              20×       │   │
+│  └─────────────────────────────────────────────────────────┘   │
+│                                                                  │
+│  ┌─────────────────────────────────────────────────────────┐   │
+│  │ 🚗  Personal Accident      (Optional)  ❓      [ON/OFF]   │   │
+│  │     Coverage for accidental injuries                     │   │
+│  │                                                          │   │
+│  │     5× income                               $400,000     │   │
+│  │     ├──────────●────────────────────────────────┤       │   │
+│  │     1×         5×                              20×       │   │
+│  └─────────────────────────────────────────────────────────┘   │
+│                                                                  │
+│       ┌──────────────┐    ┌────────────────────────────┐       │
+│       │     Back     │    │     Continue         →     │       │
+│       └──────────────┘    └────────────────────────────┘       │
+│                                                                  │
+└─────────────────────────────────────────────────────────────────┘
+```
+
+### Educational Tooltips (on ❓ hover)
+
+**Life/TPD:**
+```
+┌──────────────────────────────────────┐
+│ Why Life/TPD Coverage?               │
+│                                      │
+│ ✓ 10× income replaces earnings for   │
+│   ~10 years                          │
+│ ✓ Covers mortgage, children's        │
+│   education, daily expenses          │
+│ ✓ TPD pays if you can't work         │
+│ ✓ DPS ($70K) from CPF is often       │
+│   insufficient alone                 │
+└──────────────────────────────────────┘
+```
+
+**Critical Illness:**
+```
+┌──────────────────────────────────────┐
+│ Why Critical Illness Coverage?       │
+│                                      │
+│ ✓ Pays lump sum on diagnosis         │
+│   (cancer, heart attack, stroke)     │
+│ ✓ 5× income covers treatment +       │
+│   income loss during recovery        │
+│ ✓ 1 in 4 Singaporeans will develop   │
+│   cancer by age 75                   │
+│ ✓ Covers expenses not covered by     │
+│   hospitalization plans              │
+└──────────────────────────────────────┘
+```
+
+---
+
+## Wizard Step 3: Review & Budget
+
+```
+┌─────────────────────────────────────────────────────────────────┐
+│                                                                  │
+│                         ✓                                        │
+│                                                                  │
+│            Review your guidelines                               │
+│                                                                  │
+│    Here's a summary of your coverage targets.                   │
+│    You can always adjust these later.                           │
+│                                                                  │
+│  ┌─────────────────────────────────────────────────────────┐   │
+│  │  SUMMARY                                                 │   │
+│  │  ─────────────────────────────────────────────────────  │   │
+│  │  Annual Income                             $80,000      │   │
+│  │  ─────────────────────────────────────────────────────  │   │
+│  │                                                          │   │
+│  │  🏥  Hospital        Class B1 + Rider                   │   │
+│  │  😇  Life/TPD        $800,000  (10×)                    │   │
+│  │  🩺  Critical Illness $400,000  (5×)                    │   │
+│  │  🚗  Personal Accident $400,000  (5×)                   │   │
+│  └─────────────────────────────────────────────────────────┘   │
+│                                                                  │
+│  ┌─────────────────────────────────────────────────────────┐   │
+│  │  MAXIMUM PREMIUM BUDGET                                  │   │
+│  │                                                          │   │
+│  │  % of income you're willing to spend on insurance       │   │
+│  │                                                          │   │
+│  │                                                    10%   │   │
+│  │  ├────────────────────●─────────────────────────────┤   │   │
+│  │  5%                  10%                          20%   │   │
+│  │                                                          │   │
+│  │  ┌─────────────────────────────────────────────────┐   │   │
+│  │  │  Max annual premiums          ≤ $8,000          │   │   │
+│  │  │  ≈ $667/month                                   │   │   │
+│  │  └─────────────────────────────────────────────────┘   │   │
+│  └─────────────────────────────────────────────────────────┘   │
+│                                                                  │
+│       ┌──────────────┐    ┌────────────────────────────┐       │
+│       │     Back     │    │  ✓  Save My Guidelines     │       │
+│       └──────────────┘    └────────────────────────────┘       │
+│                                                                  │
+└─────────────────────────────────────────────────────────────────┘
+```
+
+---
+
+## Configured View (After Wizard)
+
+```
+┌─────────────────────────────────────────────────────────────────────────────┐
+│                                                                              │
+│  ⚙️  My Coverage Guidelines                              [🔄 Reset]         │
+│  Your personal coverage targets based on $80,000/year income                │
+│                                                                              │
+│  ┌─────────────────────────────────────────┐  ┌──────────────────────────┐ │
+│  │                                         │  │  COVERAGE TARGETS        │ │
+│  │  ┌─────────────────────────────────┐   │  │  ──────────────────────  │ │
+│  │  │ 🏥  Hospitalization    [ON/OFF] │   │  │                          │ │
+│  │  │     Must upgrade to ISP         │   │  │  🏥 Hospital   Class B1  │ │
+│  │  │                                 │   │  │  😇 Life      $800,000   │ │
+│  │  │  Ward: ┌─┐ ┌──┐ ┌───┐ ┌─┐      │   │  │  🩺 CI        $400,000   │ │
+│  │  │        │A│ │B1│ │B2+│ │C│      │   │  │  🚗 PA        $400,000   │ │
+│  │  │        └─┘ └──┘ └───┘ └─┘      │   │  │                          │ │
+│  │  │                                 │   │  └──────────────────────────┘ │
+│  │  │  ☑️ Include rider               │   │                               │
+│  │  └─────────────────────────────────┘   │  ┌──────────────────────────┐ │
+│  │                                         │  │  PREMIUM BUDGET          │ │
+│  │  ┌─────────────────────────────────┐   │  │  ──────────────────────  │ │
+│  │  │ 😇  Life / TPD    ❓  [ON/OFF]  │   │  │                    10%   │ │
+│  │  │     Death and TPD coverage      │   │  │  ├────────●──────────┤  │ │
+│  │  │                                 │   │  │  5%      10%       20%  │ │
+│  │  │     10× income        $800,000  │   │  │                          │ │
+│  │  │     ├────────●──────────────┤   │   │  │   ≤ $8,000/year         │ │
+│  │  │     1×      10×            20×  │   │  └──────────────────────────┘ │
+│  │  └─────────────────────────────────┘   │                               │
+│  │                                         │  Last updated: 19 Jan 2026   │
+│  │  ┌─────────────────────────────────┐   │                               │
+│  │  │ 🩺  Critical Illness  ❓ [ON]    │   │                               │
+│  │  │     5× income         $400,000  │   │                               │
+│  │  │     ├────●──────────────────┤   │   │                               │
+│  │  └─────────────────────────────────┘   │                               │
+│  │                                         │                               │
+│  │  ┌─────────────────────────────────┐   │                               │
+│  │  │ 🚗  Personal Accident (Optional) │   │                               │
+│  │  │     5× income         $400,000  │   │                               │
+│  │  │     ├────●──────────────────┤   │   │                               │
+│  │  └─────────────────────────────────┘   │                               │
+│  │                                         │                               │
+│  └─────────────────────────────────────────┘                               │
+│                                                                              │
+└─────────────────────────────────────────────────────────────────────────────┘
+```
+
+---
+
+## Component Architecture
+
+```
+GuidelinesTab
+├── (hasConfigured = false) → Wizard Flow
+│   ├── WizardStepIndicator
+│   ├── WizardStep1Income
+│   ├── WizardStep2Multipliers
+│   │   └── CoverageMultiplierCard (×4)
+│   │       └── Educational Tooltip (on hover)
+│   └── WizardStep3Summary
+│
+└── (hasConfigured = true) → ConfiguredGuidelinesView
+    ├── Header with Reset button
+    ├── CoverageMultiplierCard (×4)
+    └── Summary Sidebar
+        ├── Coverage Targets Card
+        ├── Premium Budget Slider
+        └── Last Updated timestamp
+```
+
+---
+
+## State Management (Zustand)
+
+```typescript
+interface CoverageGuidelinesState {
+  guidelines: UserCoverageGuidelines
+  hasConfiguredGuidelines: boolean
+  isEditing: boolean
+
+  // Actions
+  setAnnualIncome: (income: number) => void
+  setMaxPremiumPercentage: (percentage: number) => void
+  applyPreset: (preset: GuidelinesPreset) => void
+  setMultiplier: (coverageType: GuidelineCoverageType, multiplier: number) => void
+  toggleCoverage: (coverageType: GuidelineCoverageType) => void
+  setHospitalizationPreferences: (prefs: {...}) => void
+  resetToDefaults: () => void
+  markAsConfigured: () => void
+}
+```
+
+**Persistence:** Uses Zustand's `persist` middleware to save to localStorage.
+
+---
+
+## Integration Points
+
+1. **Insurance Planner Page** (`/insurance-planner`)
+   - New "My Guidelines" tab added to `InsuranceTabs`
+   - Third tab after "Overview" and "Policies"
+
+2. **Overview Tab**
+   - Can reference user's guidelines when showing gap analysis
+   - Compare actual coverage vs. user-defined targets
+
+3. **Future: Stress Testing**
+   - Guidelines inform what "adequate coverage" means
+   - Stress tests can check if policies meet user's targets
+
+---
+
+## Files Created/Modified
+
+| File | Purpose |
+|------|---------|
+| `types/insurance.ts` | Added `UserCoverageGuidelines`, `GuidelineCoverageType`, presets, helpers |
+| `stores/coverageGuidelinesStore.ts` | Zustand store with persist middleware |
+| `components/insurance/tabs/GuidelinesTab.tsx` | Main component with wizard + configured view |
+| `components/insurance/InsuranceTabs.tsx` | Added "My Guidelines" tab |
+| `app/insurance-planner/page.tsx` | Wired up GuidelinesTab |
+
+---
+
+## Design Tokens
+
+- **Card gradients:** `from-{color}-500/20 to-{color}-500/5`
+- **Active borders:** `border-{color}-500/30`
+- **Step indicator:** Emerald for active/complete, white/20 for inactive
+- **Slider thumb:** `bg-emerald-500` with shadow
+- **Educational tooltip:** `bg-[#0a0f18]` with `border-white/[0.1]`
diff --git a/specs/onboarding-wizard-spec.md b/specs/onboarding-wizard-spec.md
new file mode 100644
index 000000000..ffd46fe5b
--- /dev/null
+++ b/specs/onboarding-wizard-spec.md
@@ -0,0 +1,637 @@
+# Onboarding Wizard - Financial Plan Setup Specification
+
+## Overview
+
+A one-time guided onboarding wizard that helps new users set up their financial plan on first login. Automatically triggers when a user has no existing financial data. If the user skips/dismisses the wizard, it will not appear again. Follows the existing `PropertyPlannerModal` architecture pattern (React Hook Form + FormProvider, Zustand store, Framer Motion transitions).
+
+**Key Principles:**
+- **One-time only** — auto-triggers for new users, never re-appears after skip/completion
+- Guided but flexible — every step can be skipped with "Complete Later"
+- Progressive save — each step saves to API immediately, no data loss on close
+- Reuses existing API endpoints and mutation hooks — no backend changes needed
+
+---
+
+## Trigger Logic
+
+The wizard auto-opens when ALL of these conditions are true:
+1. User is authenticated and on the dashboard
+2. User has **zero persons** (no financial data yet)
+3. User has **not previously dismissed** the wizard (`onboardingCompleted` flag in UserSettings is `false` or absent)
+
+When the user clicks "Skip Setup" (dismiss) or completes the wizard:
+- Set `onboardingCompleted: true` in UserSettings via API
+- Wizard never appears again
+
+```
+┌─────────────────────────────────────────────────────────────────────┐
+│                                                                     │
+│   New User Signs Up → Redirected to Dashboard                       │
+│       │                                                             │
+│       ├─ Check: persons.length === 0 AND !onboardingCompleted?      │
+│       │                                                             │
+│       ├─ YES → Auto-open Onboarding Wizard Modal                    │
+│       │         │                                                   │
+│       │         ├──► Step 1: Personal Info ──────────►              │
+│       │         ├──► Step 2: Income & Expenses ──────►              │
+│       │         ├──► Step 3: Assets & Liabilities ───►              │
+│       │         ├──► Step 4: CPF Accounts ───────────►              │
+│       │         └──► Step 5: Summary ─────────────────► Close       │
+│       │                                                             │
+│       │         OR: [Skip Setup] → set onboardingCompleted = true   │
+│       │                           → close wizard, show dashboard    │
+│       │                                                             │
+│       └─ NO → Show dashboard normally                               │
+│                                                                     │
+└─────────────────────────────────────────────────────────────────────┘
+```
+
+---
+
+## Step Indicator Bar
+
+Appears at the top of Steps 1-4. Hidden on the Summary step (Step 5).
+
+```
+┌─────────────────────────────────────────────────────────────────────────────┐
+│                                                                             │
+│    ①─────────②─────────③─────────④                                          │
+│  Personal    Income &   Assets &    CPF                                     │
+│   Info      Expenses  Liabilities  Accounts                                 │
+│                                                                             │
+│  States:                                                                    │
+│    ● Active  = emerald border, white number, filled bg                      │
+│    ✓ Done    = green bg, white checkmark icon                               │
+│    ⊘ Skipped = amber bg, dash icon                                          │
+│    ○ Future  = slate-600 border, dimmed number, not clickable               │
+│                                                                             │
+│  Clicking a completed/skipped step navigates back to it.                    │
+│  Future steps are disabled until the current step is completed/skipped.     │
+│                                                                             │
+└─────────────────────────────────────────────────────────────────────────────┘
+```
+
+### Footer Layout (Steps 1-4)
+```
+[Skip Setup]    [Complete Later →]                    [← Back]  [Next →]
+```
+
+- **"Skip Setup"** (left-most) — dismisses the entire wizard permanently. Sets `onboardingCompleted = true`.
+- **"Complete Later →"** — skips only this step, advances to next.
+- **"Next →"** — validates + saves current step, advances. On Step 4, becomes **"Finish →"**.
+- **"← Back"** — goes to previous step (hidden on Step 1).
+
+---
+
+## Step 1: Personal Info & Retirement
+
+```
+┌─────────────────────────────────────────────────────────────────────────────┐
+│  Set Up Your Financial Plan                                           [X]  │
+├─────────────────────────────────────────────────────────────────────────────┤
+│                                                                             │
+│    ●─────────○─────────○─────────○                                          │
+│  Personal    Income &   Assets &    CPF                                     │
+│   Info      Expenses  Liabilities  Accounts                                 │
+│                                                                             │
+├─────────────────────────────────────────────────────────────────────────────┤
+│                                                                             │
+│  Household Members                                                          │
+│  Tell us about yourself and your household                                  │
+│                                                                             │
+│  ┌─ 🟢 YOURSELF ────────────────────────────────────────────────────────┐  │
+│  │                                                                       │  │
+│  │  Name                    Date of Birth          Gender                │  │
+│  │  ┌──────────────────┐    ┌──────────────────┐   ┌──────────────┐     │  │
+│  │  │ John Doe         │    │ 15/03/1990       │   │ Male     ▼   │     │  │
+│  │  └──────────────────┘    └──────────────────┘   └──────────────┘     │  │
+│  │                                                                       │  │
+│  │  Residency Status        PR Grant Date           Retirement Age       │  │
+│  │  ┌──────────────────┐    ┌──────────────────┐   ┌──────────────┐     │  │
+│  │  │ Citizen      ▼   │    │ (hidden)         │   │ 65           │     │  │
+│  │  └──────────────────┘    └──────────────────┘   └──────────────┘     │  │
+│  │                                                                       │  │
+│  └───────────────────────────────────────────────────────────────────────┘  │
+│                                                                             │
+│  ┌─ 🔵 SPOUSE ──────────────────────────────────────────────────── [🗑] ─┐  │
+│  │                                                                       │  │
+│  │  Name                    Date of Birth          Gender                │  │
+│  │  ┌──────────────────┐    ┌──────────────────┐   ┌──────────────┐     │  │
+│  │  │ Jane Doe         │    │ 22/07/1992       │   │ Female   ▼   │     │  │
+│  │  └──────────────────┘    └──────────────────┘   └──────────────┘     │  │
+│  │                                                                       │  │
+│  │  Residency Status        PR Grant Date           Retirement Age       │  │
+│  │  ┌──────────────────┐    ┌──────────────────┐   ┌──────────────┐     │  │
+│  │  │ PR           ▼   │    │ 01/06/2018       │   │ 62           │     │  │
+│  │  └──────────────────┘    └──────────────────┘   └──────────────┘     │  │
+│  │                                                                       │  │
+│  └───────────────────────────────────────────────────────────────────────┘  │
+│                                                                             │
+│  ┌─ 🟣 DEPENDENT ───────────────────────────────────────────────── [🗑] ─┐  │
+│  │                                                                       │  │
+│  │  Name                    Date of Birth          Gender                │  │
+│  │  ┌──────────────────┐    ┌──────────────────┐   ┌──────────────┐     │  │
+│  │  │ Emily Doe        │    │ 10/01/2020       │   │ Female   ▼   │     │  │
+│  │  └──────────────────┘    └──────────────────┘   └──────────────┘     │  │
+│  │                                                                       │  │
+│  │  Relationship                                                         │  │
+│  │  ┌──────────────────┐                                                 │  │
+│  │  │ Child        ▼   │    (No retirement age for dependents)           │  │
+│  │  └──────────────────┘                                                 │  │
+│  │                                                                       │  │
+│  └───────────────────────────────────────────────────────────────────────┘  │
+│                                                                             │
+│  [+ Add Household Member]                                                   │
+│                                                                             │
+│  ── Planning Horizon ────────────────────────────────────────────────────── │
+│                                                                             │
+│  Plan until age   ┌──────┐                                                  │
+│                   │  90  │   How far into the future to project              │
+│                   └──────┘                                                   │
+│                                                                             │
+├─────────────────────────────────────────────────────────────────────────────┤
+│  [Skip Setup]   Complete Later →                           [← Back] [Next →]│
+└─────────────────────────────────────────────────────────────────────────────┘
+```
+
+### Step 1 Details
+
+| Field | Type | Required | Default | Notes |
+|-------|------|----------|---------|-------|
+| Name | Text input | Yes | `''` | Min 1 char |
+| Date of Birth | Date input | Yes | `''` | YYYY-MM-DD format |
+| Gender | CustomDropdown | Yes | `'male'` | Options: Male, Female |
+| Residency Status | CustomDropdown | Yes | `'citizen'` | Options: Citizen, PR |
+| PR Grant Date | Date input | Conditional | `null` | Only shown when status = PR |
+| Relationship | CustomDropdown | Yes | `'self'` (first) | Options: Self, Spouse, Child, Parent, Other |
+| Retirement Age | Number input | No | `65` | Hidden for children. Range: 50-100 |
+| Planning Horizon | Number input | No | `90` | Maps to `terminalAge` in UserSettings |
+
+**Behavior:**
+- First person card is labeled "YOURSELF" and cannot be deleted, relationship locked to "self"
+- Color auto-assigned from palette (🟢, 🔵, 🟣, 🟡...)
+- PR Grant Date field appears/disappears with animation when toggling residency
+
+---
+
+## Step 2: Income & Expenses
+
+```
+┌─────────────────────────────────────────────────────────────────────────────┐
+│  Set Up Your Financial Plan                                           [X]  │
+├─────────────────────────────────────────────────────────────────────────────┤
+│                                                                             │
+│    ✓─────────●─────────○─────────○                                          │
+│  Personal    Income &   Assets &    CPF                                     │
+│   Info      Expenses  Liabilities  Accounts                                 │
+│                                                                             │
+├─────────────────────────────────────────────────────────────────────────────┤
+│                                                                             │
+│  Income Sources                                              Total: $8,500  │
+│                                                                             │
+│  ┌───────────────────────────────────────────────────────────────────────┐  │
+│  │                                                                       │  │
+│  │  Person          Name            Amount     Freq      Category        │  │
+│  │  ┌──────────┐   ┌────────────┐  ┌────────┐ ┌───────┐ ┌───────────┐  │  │
+│  │  │ 🟢 John ▼│   │ Salary     │  │ $7,000 │ │Monthly│ │ Salary  ▼ │  │  │
+│  │  └──────────┘   └────────────┘  └────────┘ └───────┘ └───────────┘  │  │
+│  │                                                                       │  │
+│  │  CPF Wage Type   Growth Rate                                          │  │
+│  │  ┌──────────┐   ┌────────────┐                                  [🗑] │  │
+│  │  │  OW    ▼ │   │ 3%         │                                       │  │
+│  │  └──────────┘   └────────────┘                                       │  │
+│  │                                                                       │  │
+│  │  ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─   │  │
+│  │                                                                       │  │
+│  │  Person          Name            Amount     Freq      Category        │  │
+│  │  ┌──────────┐   ┌────────────┐  ┌────────┐ ┌───────┐ ┌───────────┐  │  │
+│  │  │ 🔵 Jane ▼│   │ Salary     │  │ $1,500 │ │Monthly│ │ Salary  ▼ │  │  │
+│  │  └──────────┘   └────────────┘  └────────┘ └───────┘ └───────────┘  │  │
+│  │                                                                       │  │
+│  │  CPF Wage Type   Growth Rate                                          │  │
+│  │  ┌──────────┐   ┌────────────┐                                  [🗑] │  │
+│  │  │  OW    ▼ │   │ 3%         │                                       │  │
+│  │  └──────────┘   └────────────┘                                       │  │
+│  │                                                                       │  │
+│  └───────────────────────────────────────────────────────────────────────┘  │
+│                                                                             │
+│  [+ Add Income Source]                                                      │
+│                                                                             │
+│  ── ── ── ── ── ── ── ── ── ── ── ── ── ── ── ── ── ── ── ── ── ── ── ── │
+│                                                                             │
+│  Recurring Expenses                                          Total: $4,200  │
+│                                                                             │
+│  ┌───────────────────────────────────────────────────────────────────────┐  │
+│  │                                                                       │  │
+│  │  Name              Amount       Freq        Category    Growth        │  │
+│  │  ┌──────────────┐  ┌────────┐  ┌─────────┐ ┌─────────┐ ┌──────┐     │  │
+│  │  │ Rent         │  │ $2,500 │  │ Monthly │ │Housing ▼│ │ 2%   │ [🗑]│  │
+│  │  └──────────────┘  └────────┘  └─────────┘ └─────────┘ └──────┘     │  │
+│  │                                                                       │  │
+│  │  ┌──────────────┐  ┌────────┐  ┌─────────┐ ┌─────────┐ ┌──────┐     │  │
+│  │  │ Living       │  │ $1,200 │  │ Monthly │ │Living  ▼│ │ 2%   │ [🗑]│  │
+│  │  └──────────────┘  └────────┘  └─────────┘ └─────────┘ └──────┘     │  │
+│  │                                                                       │  │
+│  │  ┌──────────────┐  ┌────────┐  ┌─────────┐ ┌─────────┐ ┌──────┐     │  │
+│  │  │ Transport    │  │  $500  │  │ Monthly │ │Transprt▼│ │ 2%   │ [🗑]│  │
+│  │  └──────────────┘  └────────┘  └─────────┘ └─────────┘ └──────┘     │  │
+│  │                                                                       │  │
+│  └───────────────────────────────────────────────────────────────────────┘  │
+│                                                                             │
+│  [+ Add Expense]                                                            │
+│                                                                             │
+├─────────────────────────────────────────────────────────────────────────────┤
+│  [Skip Setup]   Complete Later →                           [← Back] [Next →]│
+└─────────────────────────────────────────────────────────────────────────────┘
+```
+
+### Step 2 Details
+
+**Income Fields:**
+
+| Field | Type | Required | Default | Notes |
+|-------|------|----------|---------|-------|
+| Person | CustomDropdown | Yes | First person | Populated from Step 1 persons |
+| Name | Text input | Yes | `'Salary'` | |
+| Amount | CurrencyInput | Yes | `0` | |
+| Frequency | CustomDropdown | Yes | `'monthly'` | monthly, annually, quarterly, fortnightly, weekly |
+| Category | CustomDropdown | Yes | `'salary'` | salary, bonus, rental, freelance, dividend, other |
+| CPF Wage Type | CustomDropdown | Conditional | `'ow'` | Only for citizen/PR persons. Options: OW, AW |
+| Growth Rate | Percentage input | No | `3` | Annual growth rate |
+
+**Expense Fields:**
+
+| Field | Type | Required | Default | Notes |
+|-------|------|----------|---------|-------|
+| Name | Text input | Yes | `'Living Expenses'` | |
+| Amount | CurrencyInput | Yes | `0` | |
+| Frequency | CustomDropdown | Yes | `'monthly'` | Same options as income |
+| Category | CustomDropdown | Yes | `'living'` | housing, transport, food, utilities, insurance, living, other |
+| Growth Rate | Percentage input | No | `2` | Annual inflation/growth |
+
+**Pre-populated defaults:** One salary row linked to first person, one "Living Expenses" row.
+
+---
+
+## Step 3: Assets & Liabilities
+
+```
+┌─────────────────────────────────────────────────────────────────────────────┐
+│  Set Up Your Financial Plan                                           [X]  │
+├─────────────────────────────────────────────────────────────────────────────┤
+│                                                                             │
+│    ✓─────────✓─────────●─────────○                                          │
+│  Personal    Income &   Assets &    CPF                                     │
+│   Info      Expenses  Liabilities  Accounts                                 │
+│                                                                             │
+├─────────────────────────────────────────────────────────────────────────────┤
+│                                                                             │
+│  Assets                                                   Total: $185,000   │
+│  What you own — savings, investments, property, etc.                        │
+│                                                                             │
+│  ┌───────────────────────────────────────────────────────────────────────┐  │
+│  │                                                                       │  │
+│  │  Name              Category       Current Value    Growth Rate        │  │
+│  │  ┌──────────────┐  ┌───────────┐  ┌────────────┐  ┌──────────┐      │  │
+│  │  │ Savings      │  │ Cash    ▼ │  │  $50,000   │  │   1.5%   │  [🗑]│  │
+│  │  └──────────────┘  └───────────┘  └────────────┘  └──────────┘      │  │
+│  │                                                                       │  │
+│  │  ┌──────────────┐  ┌───────────┐  ┌────────────┐  ┌──────────┐      │  │
+│  │  │ Stock ETFs   │  │ Stocks  ▼ │  │ $120,000   │  │   7.0%   │  [🗑]│  │
+│  │  └──────────────┘  └───────────┘  └────────────┘  └──────────┘      │  │
+│  │                                                                       │  │
+│  │  ┌──────────────┐  ┌───────────┐  ┌────────────┐  ┌──────────┐      │  │
+│  │  │ Car          │  │ Vehicle ▼ │  │  $15,000   │  │  (5.0%)  │  [🗑]│  │
+│  │  └──────────────┘  └───────────┘  └────────────┘  └──────────┘      │  │
+│  │                                                                       │  │
+│  └───────────────────────────────────────────────────────────────────────┘  │
+│                                                                             │
+│  [+ Add Asset]                                                              │
+│                                                                             │
+│  ── ── ── ── ── ── ── ── ── ── ── ── ── ── ── ── ── ── ── ── ── ── ── ── │
+│                                                                             │
+│  Liabilities                                              Total: ($320,000) │
+│  What you owe — mortgages, loans, credit cards, etc.                        │
+│                                                                             │
+│  ┌───────────────────────────────────────────────────────────────────────┐  │
+│  │                                                                       │  │
+│  │  Name           Category      Balance      APR      Min Payment      │  │
+│  │  ┌────────────┐ ┌──────────┐  ┌──────────┐ ┌──────┐ ┌──────────┐    │  │
+│  │  │ Mortgage   │ │Mortgage▼ │  │ $300,000 │ │ 2.5% │ │ $1,500   │[🗑]│  │
+│  │  └────────────┘ └──────────┘  └──────────┘ └──────┘ └──────────┘    │  │
+│  │                                                                       │  │
+│  │  ┌────────────┐ ┌──────────┐  ┌──────────┐ ┌──────┐ ┌──────────┐    │  │
+│  │  │ Car Loan   │ │Car Loan▼ │  │  $20,000 │ │ 3.5% │ │   $400   │[🗑]│  │
+│  │  └────────────┘ └──────────┘  └──────────┘ └──────┘ └──────────┘    │  │
+│  │                                                                       │  │
+│  └───────────────────────────────────────────────────────────────────────┘  │
+│                                                                             │
+│  [+ Add Liability]                                                          │
+│                                                                             │
+│  ┌─ 💡 ──────────────────────────────────────────────────────────────────┐  │
+│  │  No assets yet? That's okay! You can add them later from the          │  │
+│  │  dashboard. This step is completely optional.                          │  │
+│  └───────────────────────────────────────────────────────────────────────┘  │
+│                                                                             │
+├─────────────────────────────────────────────────────────────────────────────┤
+│  [Skip Setup]   Complete Later →                           [← Back] [Next →]│
+└─────────────────────────────────────────────────────────────────────────────┘
+```
+
+### Step 3 Details
+
+**Asset Fields:**
+
+| Field | Type | Required | Default | Notes |
+|-------|------|----------|---------|-------|
+| Name | Text input | Yes | `''` | |
+| Category | CustomDropdown | Yes | `'cash_savings'` | cash_savings, stocks_etfs, bonds, property, vehicle, other |
+| Current Value | CurrencyInput | Yes | `0` | |
+| Growth Rate | Percentage input | No | `3` | Can be negative for depreciating assets |
+
+**Liability Fields:**
+
+| Field | Type | Required | Default | Notes |
+|-------|------|----------|---------|-------|
+| Name | Text input | Yes | `''` | |
+| Category | CustomDropdown | Yes | `'mortgage'` | mortgage, car_loan, student_loan, credit_card, personal_loan, other |
+| Current Balance | CurrencyInput | Yes | `0` | |
+| Interest Rate APR | Percentage input | No | `0` | |
+| Minimum Payment | CurrencyInput | No | `0` | Monthly minimum |
+
+**Empty state:** Starts empty (unlike Steps 1-2). Shows a helpful info banner encouraging users that this step is optional.
+
+---
+
+## Step 4: CPF Accounts
+
+### When persons have citizen/PR status:
+
+```
+┌─────────────────────────────────────────────────────────────────────────────┐
+│  Set Up Your Financial Plan                                           [X]  │
+├─────────────────────────────────────────────────────────────────────────────┤
+│                                                                             │
+│    ✓─────────✓─────────✓─────────●                                          │
+│  Personal    Income &   Assets &    CPF                                     │
+│   Info      Expenses  Liabilities  Accounts                                 │
+│                                                                             │
+├─────────────────────────────────────────────────────────────────────────────┤
+│                                                                             │
+│  CPF Account Balances                                                       │
+│  Enter your current CPF balances (check cpf.gov.sg)                         │
+│                                                                             │
+│  ┌─ 🟢 John Doe (Citizen) ──────────────────────────────────────────────┐  │
+│  │                                                                       │  │
+│  │  ┌─────────────────────────┐   ┌─────────────────────────┐           │  │
+│  │  │  Ordinary Account (OA)  │   │  Special Account (SA)   │           │  │
+│  │  │                         │   │                         │           │  │
+│  │  │  ┌───────────────────┐  │   │  ┌───────────────────┐  │           │  │
+│  │  │  │     $45,000       │  │   │  │     $32,000       │  │           │  │
+│  │  │  └───────────────────┘  │   │  └───────────────────┘  │           │  │
+│  │  └─────────────────────────┘   └─────────────────────────┘           │  │
+│  │                                                                       │  │
+│  │  ┌─────────────────────────┐   ┌─────────────────────────┐           │  │
+│  │  │  MediSave Account (MA)  │   │  Retirement Account (RA)│           │  │
+│  │  │                         │   │                         │           │  │
+│  │  │  ┌───────────────────┐  │   │  ┌───────────────────┐  │           │  │
+│  │  │  │     $18,000       │  │   │  │     $0            │  │           │  │
+│  │  │  └───────────────────┘  │   │  └───────────────────┘  │           │  │
+│  │  └─────────────────────────┘   └─────────────────────────┘           │  │
+│  │                                                                       │  │
+│  │  ℹ RA is created at age 55. Leave as $0 if you're under 55.          │  │
+│  │                                                                       │  │
+│  └───────────────────────────────────────────────────────────────────────┘  │
+│                                                                             │
+│  ┌─ 🔵 Jane Doe (PR since 2018) ────────────────────────────────────────┐  │
+│  │                                                                       │  │
+│  │  ┌─────────────────────────┐   ┌─────────────────────────┐           │  │
+│  │  │  Ordinary Account (OA)  │   │  Special Account (SA)   │           │  │
+│  │  │  ┌───────────────────┐  │   │  ┌───────────────────┐  │           │  │
+│  │  │  │     $28,000       │  │   │  │     $15,000       │  │           │  │
+│  │  │  └───────────────────┘  │   │  └───────────────────┘  │           │  │
+│  │  └─────────────────────────┘   └─────────────────────────┘           │  │
+│  │                                                                       │  │
+│  │  ┌─────────────────────────┐   ┌─────────────────────────┐           │  │
+│  │  │  MediSave Account (MA)  │   │  Retirement Account (RA)│           │  │
+│  │  │  ┌───────────────────┐  │   │  ┌───────────────────┐  │           │  │
+│  │  │  │     $12,000       │  │   │  │     $0            │  │           │  │
+│  │  │  └───────────────────┘  │   │  └───────────────────┘  │           │  │
+│  │  └─────────────────────────┘   └─────────────────────────┘           │  │
+│  │                                                                       │  │
+│  └───────────────────────────────────────────────────────────────────────┘  │
+│                                                                             │
+├─────────────────────────────────────────────────────────────────────────────┤
+│  [Skip Setup]   Complete Later →                        [← Back] [Finish →]│
+└─────────────────────────────────────────────────────────────────────────────┘
+```
+
+### When no persons are citizen/PR:
+
+```
+┌─────────────────────────────────────────────────────────────────────────────┐
+│                                                                             │
+│    ✓─────────✓─────────✓─────────●                                          │
+│                                                                             │
+├─────────────────────────────────────────────────────────────────────────────┤
+│                                                                             │
+│                                                                             │
+│                          ℹ️                                                  │
+│                                                                             │
+│                  Not Applicable                                              │
+│                                                                             │
+│       CPF accounts are only applicable for                                  │
+│       Singapore Citizens and Permanent Residents.                           │
+│                                                                             │
+│       None of your household members have                                   │
+│       Citizen or PR residency status.                                       │
+│                                                                             │
+│                                                                             │
+├─────────────────────────────────────────────────────────────────────────────┤
+│  [Skip Setup]   Complete Later →                        [← Back] [Finish →]│
+└─────────────────────────────────────────────────────────────────────────────┘
+```
+
+### Step 4 Details
+
+| Field | Type | Required | Default | Notes |
+|-------|------|----------|---------|-------|
+| OA Balance | CurrencyInput | No | `0` | Per person |
+| SA Balance | CurrencyInput | No | `0` | Per person |
+| MA Balance | CurrencyInput | No | `0` | Per person |
+| RA Balance | CurrencyInput | No | `0` | Per person, 0 if under 55 |
+
+**Auto-population:** On entering Step 4, auto-create one CPF entry per citizen/PR person from Step 1 (if not already created).
+
+---
+
+## Step 5: Summary
+
+Shown after completing or finishing Step 4. No step indicator — this is a completion screen.
+
+```
+┌─────────────────────────────────────────────────────────────────────────────┐
+│  Set Up Your Financial Plan                                           [X]  │
+├─────────────────────────────────────────────────────────────────────────────┤
+│                                                                             │
+│                           ✅                                                │
+│                                                                             │
+│                  Your Plan is Ready!                                        │
+│                                                                             │
+│  ┌─ What We Set Up ─────────────────────────────────────────────────────┐  │
+│  │                                                                       │  │
+│  │   👥  2 Household Members          John Doe, Jane Doe                │  │
+│  │   💰  2 Income Sources             $8,500/mo total                   │  │
+│  │   💸  3 Recurring Expenses         $4,200/mo total                   │  │
+│  │   📈  3 Assets                     $185,000 total                    │  │
+│  │   📉  2 Liabilities                ($320,000) total                  │  │
+│  │   🏦  2 CPF Accounts               $150,000 combined                │  │
+│  │                                                                       │  │
+│  │   ⊘  Skipped: (none)                                                │  │
+│  │                                                                       │  │
+│  └───────────────────────────────────────────────────────────────────────┘  │
+│                                                                             │
+│  ┌─ 💡 ──────────────────────────────────────────────────────────────────┐  │
+│  │  You can fine-tune your financial data anytime from the dashboard.     │  │
+│  │  Add scenario events to test "what-if" situations, explore CPF         │  │
+│  │  projections, or set up insurance coverage analysis.                   │  │
+│  └───────────────────────────────────────────────────────────────────────┘  │
+│                                                                             │
+├─────────────────────────────────────────────────────────────────────────────┤
+│                                                          [Go to Dashboard →]│
+└─────────────────────────────────────────────────────────────────────────────┘
+```
+
+### Summary Step Details
+
+- Counts are derived from the form data (not API queries) — shows what was just created
+- **Skipped steps** shown in amber: e.g., "⊘ Skipped: Assets & Liabilities, CPF Accounts"
+- **"Go to Dashboard →"** button closes the wizard and sets `onboardingCompleted = true`
+- The info banner reminds users they can tweak everything from the dashboard
+- Items with `$0` or empty entries are excluded from counts
+
+---
+
+## File Structure
+
+```
+frontend/src/components/modals/OnboardingWizardModal/
+├── OnboardingWizardModal.tsx         # Modal shell (Portal, overlay, header/footer)
+├── OnboardingWizardView.tsx          # Step machine + FormProvider controller
+├── components/
+│   ├── StepIndicator.tsx             # Horizontal step progress bar (4 circles)
+│   ├── PersonalInfoStep.tsx          # Step 1 content
+│   ├── PersonCard.tsx                # Single person card (used in Step 1)
+│   ├── IncomeExpensesStep.tsx        # Step 2 content
+│   ├── AssetsLiabilitiesStep.tsx     # Step 3 content
+│   ├── CpfAccountsStep.tsx          # Step 4 content
+│   └── SummaryStep.tsx              # Step 5: completion summary
+├── hooks/
+│   ├── useOnboardingForm.ts          # React Hook Form setup + Zod schema + defaults
+│   └── useOnboardingSubmit.ts        # Per-step API submission logic
+└── types.ts                          # OnboardingFormData + Zod schemas
+```
+
+---
+
+## Files to Modify (Existing)
+
+| File | Change |
+|------|--------|
+| `frontend/src/stores/featureModulesStore.ts` | Add `showOnboardingWizard`, `openOnboardingWizard()`, `closeOnboardingWizard()` to state + actions + selectors |
+| `frontend/src/components/dashboard/Dashboard.tsx` | Import + render `<OnboardingWizardModal>`, add auto-trigger logic (check persons count + `onboardingCompleted` setting) |
+
+No changes to `FinancialWorkspace.tsx` — the wizard is auto-triggered, not manually invoked.
+
+---
+
+## Architecture Decisions
+
+| Decision | Choice | Rationale |
+|----------|--------|-----------|
+| Form management | Single React Hook Form + FormProvider | Same pattern as PropertyPlannerModal. All steps share one form, no prop drilling |
+| Modal visibility | Zustand `featureModulesStore` | Consistent with all other modals in the app |
+| Save strategy | Progressive per-step | Preserves partial progress. Each "Next" saves that step's data via API |
+| Idempotent saves | `serverId` field per entry | Prevents duplicates if user navigates back and re-saves. If `serverId` exists → update, else → create |
+| Step transitions | Framer Motion AnimatePresence | Same pattern as MortgageForm step transitions |
+| Validation | Zod per-step sub-schemas | Only validates current step on "Next", skip bypasses validation entirely |
+| CPF auto-populate | `useEffect` on Step 4 mount | Creates CPF entries for eligible persons automatically |
+| One-time trigger | `onboardingCompleted` in UserSettings | Persisted server-side. Checked on dashboard mount alongside persons count |
+| Skip/dismiss behavior | Sets `onboardingCompleted = true` | "Skip Setup", X button, and completing wizard all set this flag permanently |
+
+---
+
+## Data Submission Flow
+
+```
+Step 1 Save:
+  ├─ For each person: createPerson() → store serverId
+  ├─ Build personIdMap (tempId → serverId) for Steps 2 & 4
+  └─ updateUserSettings({ terminalAge: planningHorizonAge })
+
+Step 2 Save:
+  ├─ For each income: resolve personTempId → serverId via map
+  │   └─ createIncome({ personId, name, amount, frequency, ... })
+  └─ For each expense: createExpense({ name, amount, frequency, ... })
+
+Step 3 Save:
+  ├─ For each asset: createAsset({ name, category, currentValue, ... })
+  └─ For each liability: createLiability({ name, category, currentBalance, ... })
+
+Step 4 Save:
+  └─ For each CPF entry: resolve personTempId → serverId
+      └─ createCpfAccount({ personId, oaBalance, saBalance, maBalance, raBalance })
+```
+
+**Error handling:** If an API call fails mid-step, show toast error, stay on current step, allow retry. Already-saved entries (with `serverId`) are skipped on retry.
+
+---
+
+## Edge Cases
+
+| Scenario | Handling |
+|----------|----------|
+| Person deleted in Step 1 | Cascade-remove linked incomes (Step 2) and CPF entries (Step 4) from form data |
+| User closes modal mid-flow (X button) | Same as "Skip Setup" — set `onboardingCompleted = true`, wizard won't re-appear |
+| User already has data (returning user) | `persons.length > 0` → wizard never triggers |
+| `onboardingCompleted` already true | Wizard never triggers, even if persons count is 0 |
+| All persons are non-citizen/PR | Step 4 shows "Not Applicable" message, "Finish →" still works |
+| Mobile viewport | Modal: `max-w-[800px] mx-4`, CPF grid: `grid-cols-1 sm:grid-cols-2` |
+| Monet theme | All components check `isMonet` for theme-variant styling (same as PropertyPlannerModal) |
+| API error during auto-trigger check | Fail silently — don't show wizard if unsure, user can add data manually |
+
+---
+
+## Implementation Sequence
+
+1. **Types & Schema** — `types.ts` + `useOnboardingForm.ts`
+2. **Store Update** — Add wizard state to `featureModulesStore.ts`
+3. **Modal Shell** — `OnboardingWizardModal.tsx` + `OnboardingWizardView.tsx` + `StepIndicator.tsx`
+4. **Step 1** — `PersonalInfoStep.tsx` + `PersonCard.tsx` (most complex step)
+5. **Step 2** — `IncomeExpensesStep.tsx`
+6. **Step 3** — `AssetsLiabilitiesStep.tsx`
+7. **Step 4** — `CpfAccountsStep.tsx`
+8. **Step 5** — `SummaryStep.tsx` (completion screen with counts + info banner)
+9. **Submission Hook** — `useOnboardingSubmit.ts` (per-step API calls + `onboardingCompleted` flag)
+10. **Dashboard Integration** — Auto-trigger logic in `Dashboard.tsx` (check persons count + settings flag)
+11. **Polish** — Animations, loading states, error toasts, theme variants
+
+---
+
+## Verification Checklist
+
+- [ ] New user (0 persons, no `onboardingCompleted`) → wizard auto-opens on dashboard load
+- [ ] Add 2 persons → Next → verify persons created via API (check Network tab)
+- [ ] Add income + expense → Next → verify created with correct `personId` FK
+- [ ] Add asset + liability → Next → verify created
+- [ ] Enter CPF balances → Finish → verify CPF accounts created
+- [ ] Summary step shows correct counts for all created items
+- [ ] "Go to Dashboard" → wizard closes, `onboardingCompleted` set to true
+- [ ] Refresh page → wizard does NOT re-appear (flag persisted)
+- [ ] "Skip Setup" at any step → wizard closes permanently, no data created for that step
+- [ ] Skip all steps → verify wizard dismissed, `onboardingCompleted = true`
+- [ ] Delete a person in Step 1 → go to Step 2 → verify linked income removed
+- [ ] Test with non-citizen persons → Step 4 shows "Not Applicable"
+- [ ] Toggle Monet theme → verify all steps render correctly
+- [ ] Resize to mobile → verify responsive layout (stacked fields, single-column CPF grid)
+- [ ] Close modal via X button → same as "Skip Setup" (permanent dismiss)
diff --git a/specs/rag-document-intelligence.md b/specs/rag-document-intelligence.md
new file mode 100644
index 000000000..f0478fe65
--- /dev/null
+++ b/specs/rag-document-intelligence.md
@@ -0,0 +1,2388 @@
+# RAG Document Intelligence System
+
+## Vision
+
+Transform Assetra from a financial tracking tool into an AI-powered intelligence platform by enabling natural language queries over ingested financial documents (K-1s, fund reports, account statements, tax documents, legal agreements).
+
+**Goal:** "What's our total committed capital to PE funds?" → instant answer from ingested documents.
+
+---
+
+## Architecture Decision: Separate AI Microservice
+
+### Why a Separate Service?
+
+| Factor | Benefit |
+|--------|---------|
+| **Python Ecosystem** | LangChain, Unstructured.io, HuggingFace — far richer than Go for AI/ML |
+| **Independent Scaling** | Scale AI processing without affecting CRUD operations |
+| **Resource Isolation** | Long-running LLM calls don't block financial API requests |
+| **Future-Proofing** | Easy to add local LLMs (vLLM), fine-tuned models, GPU inference |
+| **Team Structure** | Enables dedicated AI/ML engineering focus |
+
+### Communication: gRPC
+
+- **Binary protocol** — Efficient for embedding vectors (1536 floats)
+- **Streaming** — Server-side streaming for LLM token output
+- **Strong typing** — Protobuf contracts prevent integration bugs
+- **Bi-directional** — Real-time progress updates during document processing
+
+---
+
+## Architecture Overview
+
+```
+┌─────────────────────────────────────────────────────────────────────────┐
+│                         Frontend (Next.js)                              │
+│  ┌──────────────┐  ┌──────────────┐  ┌──────────────────────────────┐  │
+│  │ Document     │  │ Document     │  │ RAG Chat Interface           │  │
+│  │ Upload UI    │  │ Library      │  │ (Streaming Responses)        │  │
+│  └──────────────┘  └──────────────┘  └──────────────────────────────┘  │
+└─────────────────────────────────────────────────────────────────────────┘
+                                    │
+                                    ▼
+┌─────────────────────────────────────────────────────────────────────────┐
+│                       Go Backend (Existing)                             │
+│  ┌──────────────────────────────────────────────────────────────────┐  │
+│  │ • Financial CRUD (assets, liabilities, income, expenses)         │  │
+│  │ • Timeline projections & CPF calculations                        │  │
+│  │ • Auth/session management                                        │  │
+│  │ • Proxies RAG requests to AI Service via gRPC                    │  │
+│  └──────────────────────────────────────────────────────────────────┘  │
+│                                    │                                    │
+│                              gRPC Client                                │
+└─────────────────────────────────────────────────────────────────────────┘
+                                    │
+                               gRPC (TLS)
+                                    │
+                                    ▼
+┌─────────────────────────────────────────────────────────────────────────┐
+│                    AI Service (Python/FastAPI + gRPC)                   │
+│  ┌──────────────────────────────────────────────────────────────────┐  │
+│  │                         gRPC Server                               │  │
+│  │  ┌─────────────────────────────────────────────────────────────┐ │  │
+│  │  │ DocumentService    │ EmbeddingService │ RAGService          │ │  │
+│  │  │ • Ingest           │ • Embed          │ • Query (streaming) │ │  │
+│  │  │ • GetStatus        │ • EmbedBatch     │ • Search            │ │  │
+│  │  │ • Delete           │                  │ • Classify          │ │  │
+│  │  └─────────────────────────────────────────────────────────────┘ │  │
+│  └──────────────────────────────────────────────────────────────────┘  │
+│  ┌──────────────────────────────────────────────────────────────────┐  │
+│  │                    Processing Pipeline                            │  │
+│  │  ┌─────────────┐  ┌─────────────┐  ┌─────────────────────────┐   │  │
+│  │  │ Unstructured│  │ Chunking    │  │ LLM Orchestration       │   │  │
+│  │  │ (PDF/DOCX)  │  │ Engine      │  │ (LangChain/Direct)      │   │  │
+│  │  └─────────────┘  └─────────────┘  └─────────────────────────┘   │  │
+│  └──────────────────────────────────────────────────────────────────┘  │
+└─────────────────────────────────────────────────────────────────────────┘
+                                    │
+                                    ▼
+┌─────────────────────────────────────────────────────────────────────────┐
+│                           Data Layer                                    │
+│  ┌─────────────────────┐  ┌───────────────────┐  ┌──────────────────┐  │
+│  │ PostgreSQL          │  │ PostgreSQL        │  │ Object Storage   │  │
+│  │ (Financial Data)    │  │ + pgvector        │  │ (S3/MinIO)       │  │
+│  │ • Assets/Liabilities│  │ • Documents       │  │ • Original files │  │
+│  │ • Income/Expenses   │  │ • Chunks          │  │ • Extracted text │  │
+│  │ • CPF accounts      │  │ • Embeddings      │  │                  │  │
+│  └─────────────────────┘  └───────────────────┘  └──────────────────┘  │
+│         Go Backend               AI Service            Shared          │
+└─────────────────────────────────────────────────────────────────────────┘
+```
+
+---
+
+## Phase 0: Project Structure
+
+### 0.1 New AI Service Directory
+
+```
+assetra3/
+├── backend/                    # Existing Go backend
+├── frontend/                   # Existing Next.js frontend
+├── ai-service/                 # NEW: Python AI microservice
+│   ├── pyproject.toml          # Dependencies (Poetry/uv)
+│   ├── Dockerfile
+│   ├── src/
+│   │   ├── __init__.py
+│   │   ├── main.py             # FastAPI + gRPC server startup
+│   │   ├── config.py           # Environment configuration
+│   │   ├── grpc_server.py      # gRPC service implementation
+│   │   ├── services/
+│   │   │   ├── __init__.py
+│   │   │   ├── document.py     # Document ingestion service
+│   │   │   ├── embedding.py    # Embedding generation service
+│   │   │   ├── retrieval.py    # Vector search service
+│   │   │   ├── rag.py          # RAG query orchestration
+│   │   │   └── extraction.py   # Text extraction (PDF, DOCX, etc.)
+│   │   ├── chunking/
+│   │   │   ├── __init__.py
+│   │   │   ├── base.py         # Chunking strategy interface
+│   │   │   ├── financial.py    # Financial document chunker
+│   │   │   └── semantic.py     # Semantic chunking
+│   │   ├── models/
+│   │   │   ├── __init__.py
+│   │   │   ├── document.py     # Document & Chunk models
+│   │   │   └── rag.py          # RAG request/response models
+│   │   └── db/
+│   │       ├── __init__.py
+│   │       ├── connection.py   # AsyncPG connection pool
+│   │       └── repository.py   # Document & chunk repository
+│   ├── proto/                  # Shared with Go backend
+│   │   └── ai_service.proto
+│   └── tests/
+│       ├── __init__.py
+│       ├── test_chunking.py
+│       ├── test_embedding.py
+│       └── test_retrieval.py
+├── proto/                      # Shared proto definitions
+│   └── ai_service.proto
+└── docker-compose.yml          # Updated with AI service
+```
+
+### 0.2 gRPC Service Definitions
+
+**File:** `proto/ai_service.proto`
+
+```protobuf
+syntax = "proto3";
+
+package assetra.ai.v1;
+
+option go_package = "github.com/assetra/backend/proto/ai";
+
+import "google/protobuf/timestamp.proto";
+
+// ============================================================================
+// Document Service - Ingestion & Management
+// ============================================================================
+
+service DocumentService {
+  // Upload and process a document (returns immediately, processing is async)
+  rpc IngestDocument(IngestDocumentRequest) returns (IngestDocumentResponse);
+
+  // Get document processing status
+  rpc GetDocumentStatus(GetDocumentStatusRequest) returns (GetDocumentStatusResponse);
+
+  // Stream document processing progress (server streaming)
+  rpc WatchDocumentProgress(WatchDocumentProgressRequest) returns (stream DocumentProgressEvent);
+
+  // List user's documents
+  rpc ListDocuments(ListDocumentsRequest) returns (ListDocumentsResponse);
+
+  // Delete a document and its chunks
+  rpc DeleteDocument(DeleteDocumentRequest) returns (DeleteDocumentResponse);
+}
+
+message IngestDocumentRequest {
+  string user_id = 1;
+  string filename = 2;
+  bytes content = 3;  // File content (for small files) or...
+  string storage_path = 4;  // ...pre-uploaded storage path (for large files)
+  string document_type = 5;  // Optional: 'k1', 'fund_report', etc. (auto-detected if empty)
+}
+
+message IngestDocumentResponse {
+  string document_id = 1;
+  string status = 2;  // 'processing', 'queued'
+}
+
+message GetDocumentStatusRequest {
+  string document_id = 1;
+}
+
+message GetDocumentStatusResponse {
+  string document_id = 1;
+  string status = 2;  // 'pending', 'processing', 'completed', 'failed'
+  string error_message = 3;
+  int32 chunk_count = 4;
+  google.protobuf.Timestamp created_at = 5;
+  google.protobuf.Timestamp processed_at = 6;
+}
+
+message WatchDocumentProgressRequest {
+  string document_id = 1;
+}
+
+message DocumentProgressEvent {
+  string document_id = 1;
+  string stage = 2;  // 'extracting', 'chunking', 'embedding', 'storing', 'completed', 'failed'
+  float progress = 3;  // 0.0 to 1.0
+  string message = 4;
+  string error = 5;
+}
+
+message ListDocumentsRequest {
+  string user_id = 1;
+  int32 limit = 2;
+  int32 offset = 3;
+  string document_type = 4;  // Optional filter
+}
+
+message ListDocumentsResponse {
+  repeated DocumentInfo documents = 1;
+  int32 total = 2;
+}
+
+message DocumentInfo {
+  string id = 1;
+  string filename = 2;
+  string document_type = 3;
+  string status = 4;
+  int64 file_size_bytes = 5;
+  int32 chunk_count = 6;
+  google.protobuf.Timestamp created_at = 7;
+  google.protobuf.Timestamp processed_at = 8;
+}
+
+message DeleteDocumentRequest {
+  string document_id = 1;
+}
+
+message DeleteDocumentResponse {
+  bool success = 1;
+}
+
+// ============================================================================
+// RAG Service - Query & Retrieval
+// ============================================================================
+
+service RAGService {
+  // Query documents with RAG (streaming response for LLM output)
+  rpc Query(QueryRequest) returns (stream QueryResponseChunk);
+
+  // Semantic search without LLM generation
+  rpc Search(SearchRequest) returns (SearchResponse);
+
+  // Classify a document
+  rpc ClassifyDocument(ClassifyDocumentRequest) returns (ClassifyDocumentResponse);
+}
+
+message QueryRequest {
+  string user_id = 1;
+  string query = 2;
+  QueryConfig config = 3;
+}
+
+message QueryConfig {
+  int32 top_k = 1;  // Number of chunks to retrieve (default: 10)
+  float similarity_threshold = 2;  // Minimum similarity (default: 0.7)
+  repeated string document_types = 3;  // Filter by document types
+  repeated string document_ids = 4;  // Filter by specific documents
+  bool include_sources = 5;  // Include source citations (default: true)
+}
+
+message QueryResponseChunk {
+  oneof content {
+    string text = 1;  // Streaming text token
+    QuerySources sources = 2;  // Final sources (sent at end)
+    QueryMetadata metadata = 3;  // Final metadata (sent at end)
+  }
+}
+
+message QuerySources {
+  repeated SourceInfo sources = 1;
+}
+
+message SourceInfo {
+  string document_id = 1;
+  string filename = 2;
+  string document_type = 3;
+  int32 page_number = 4;
+  string section_title = 5;
+  string excerpt = 6;
+  float relevance_score = 7;
+}
+
+message QueryMetadata {
+  int32 chunks_retrieved = 1;
+  int32 tokens_used = 2;
+  float processing_time_ms = 3;
+}
+
+message SearchRequest {
+  string user_id = 1;
+  string query = 2;
+  int32 top_k = 3;
+  float similarity_threshold = 4;
+  repeated string document_types = 5;
+}
+
+message SearchResponse {
+  repeated SearchResult results = 1;
+}
+
+message SearchResult {
+  string chunk_id = 1;
+  string document_id = 2;
+  string filename = 3;
+  string content = 4;
+  int32 page_number = 5;
+  string section_title = 6;
+  float score = 7;
+}
+
+message ClassifyDocumentRequest {
+  string document_id = 1;
+  string text_sample = 2;  // First N characters of document
+}
+
+message ClassifyDocumentResponse {
+  string document_type = 1;
+  float confidence = 2;
+  map<string, float> all_scores = 3;
+}
+
+// ============================================================================
+// Embedding Service - Direct embedding access (for advanced use cases)
+// ============================================================================
+
+service EmbeddingService {
+  // Generate embedding for a single text
+  rpc Embed(EmbedRequest) returns (EmbedResponse);
+
+  // Generate embeddings for multiple texts
+  rpc EmbedBatch(EmbedBatchRequest) returns (EmbedBatchResponse);
+}
+
+message EmbedRequest {
+  string text = 1;
+}
+
+message EmbedResponse {
+  repeated float embedding = 1;
+  int32 dimensions = 2;
+  string model = 3;
+}
+
+message EmbedBatchRequest {
+  repeated string texts = 1;
+}
+
+message EmbedBatchResponse {
+  repeated Embedding embeddings = 1;
+  string model = 2;
+}
+
+message Embedding {
+  repeated float values = 1;
+}
+```
+
+### 0.3 Go gRPC Client
+
+**File:** `backend/internal/ai/client.go`
+
+```go
+package ai
+
+import (
+    "context"
+    "io"
+    "time"
+
+    pb "financial-chat-system/backend/proto/ai"
+    "google.golang.org/grpc"
+    "google.golang.org/grpc/credentials/insecure"
+)
+
+// Client wraps the gRPC connection to the AI service
+type Client struct {
+    conn       *grpc.ClientConn
+    documents  pb.DocumentServiceClient
+    rag        pb.RAGServiceClient
+    embeddings pb.EmbeddingServiceClient
+}
+
+// NewClient creates a new AI service client
+func NewClient(address string) (*Client, error) {
+    // TODO: Add TLS credentials for production
+    conn, err := grpc.Dial(address, grpc.WithTransportCredentials(insecure.NewCredentials()))
+    if err != nil {
+        return nil, err
+    }
+
+    return &Client{
+        conn:       conn,
+        documents:  pb.NewDocumentServiceClient(conn),
+        rag:        pb.NewRAGServiceClient(conn),
+        embeddings: pb.NewEmbeddingServiceClient(conn),
+    }, nil
+}
+
+// IngestDocument uploads a document for processing
+func (c *Client) IngestDocument(ctx context.Context, userID, filename string, content []byte) (string, error) {
+    resp, err := c.documents.IngestDocument(ctx, &pb.IngestDocumentRequest{
+        UserId:   userID,
+        Filename: filename,
+        Content:  content,
+    })
+    if err != nil {
+        return "", err
+    }
+    return resp.DocumentId, nil
+}
+
+// QueryRAG performs a RAG query with streaming response
+func (c *Client) QueryRAG(ctx context.Context, userID, query string, config *pb.QueryConfig) (<-chan string, <-chan *pb.QuerySources, error) {
+    stream, err := c.rag.Query(ctx, &pb.QueryRequest{
+        UserId: userID,
+        Query:  query,
+        Config: config,
+    })
+    if err != nil {
+        return nil, nil, err
+    }
+
+    textChan := make(chan string, 100)
+    sourcesChan := make(chan *pb.QuerySources, 1)
+
+    go func() {
+        defer close(textChan)
+        defer close(sourcesChan)
+
+        for {
+            chunk, err := stream.Recv()
+            if err == io.EOF {
+                return
+            }
+            if err != nil {
+                return
+            }
+
+            switch content := chunk.Content.(type) {
+            case *pb.QueryResponseChunk_Text:
+                textChan <- content.Text
+            case *pb.QueryResponseChunk_Sources:
+                sourcesChan <- content.Sources
+            }
+        }
+    }()
+
+    return textChan, sourcesChan, nil
+}
+
+// Close closes the gRPC connection
+func (c *Client) Close() error {
+    return c.conn.Close()
+}
+```
+
+### 0.4 Python Dependencies
+
+**File:** `ai-service/pyproject.toml`
+
+```toml
+[project]
+name = "assetra-ai-service"
+version = "0.1.0"
+description = "AI/RAG microservice for Assetra"
+requires-python = ">=3.11"
+
+dependencies = [
+    # gRPC
+    "grpcio>=1.60.0",
+    "grpcio-tools>=1.60.0",
+    "protobuf>=4.25.0",
+
+    # Web framework (for health checks, metrics)
+    "fastapi>=0.109.0",
+    "uvicorn[standard]>=0.27.0",
+
+    # Database
+    "asyncpg>=0.29.0",
+    "pgvector>=0.2.4",
+
+    # LLM & Embeddings
+    "openai>=1.10.0",
+    "anthropic>=0.18.0",
+    "tiktoken>=0.5.2",
+
+    # Document processing
+    "unstructured[all-docs]>=0.12.0",  # PDF, DOCX, etc.
+    "pypdf>=3.17.0",
+    "python-docx>=1.1.0",
+
+    # RAG utilities (optional - can use direct API calls)
+    # "langchain>=0.1.0",
+    # "langchain-openai>=0.0.5",
+
+    # Storage
+    "boto3>=1.34.0",  # S3/MinIO
+
+    # Utilities
+    "pydantic>=2.5.0",
+    "pydantic-settings>=2.1.0",
+    "structlog>=24.1.0",
+    "tenacity>=8.2.0",  # Retries
+]
+
+[project.optional-dependencies]
+dev = [
+    "pytest>=7.4.0",
+    "pytest-asyncio>=0.23.0",
+    "pytest-cov>=4.1.0",
+    "ruff>=0.1.0",
+    "mypy>=1.8.0",
+]
+
+[build-system]
+requires = ["hatchling"]
+build-backend = "hatchling.build"
+
+[tool.ruff]
+line-length = 100
+target-version = "py311"
+
+[tool.mypy]
+python_version = "3.11"
+strict = true
+```
+
+---
+
+## Phase 1: Infrastructure Setup
+
+### 1.1 Enable pgvector Extension
+
+**Migration:** `backend/internal/database/migrations/YYYYMMDDHHMMSS_add_pgvector.up.sql`
+
+```sql
+-- Enable pgvector extension
+CREATE EXTENSION IF NOT EXISTS vector;
+
+-- Documents table (metadata)
+CREATE TABLE documents (
+    id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
+    user_id UUID NOT NULL,
+
+    -- Document metadata
+    filename VARCHAR(512) NOT NULL,
+    file_type VARCHAR(50) NOT NULL, -- 'pdf', 'xlsx', 'csv', 'txt', 'docx'
+    file_size_bytes BIGINT NOT NULL,
+    mime_type VARCHAR(128),
+
+    -- Document classification
+    document_type VARCHAR(100), -- 'k1', 'fund_report', 'account_statement', 'tax_document', 'legal', 'other'
+    document_date DATE,
+
+    -- Processing status
+    status VARCHAR(50) NOT NULL DEFAULT 'pending', -- 'pending', 'processing', 'completed', 'failed'
+    error_message TEXT,
+
+    -- Storage references
+    storage_path VARCHAR(1024) NOT NULL, -- S3/MinIO path to original file
+    extracted_text_path VARCHAR(1024), -- Path to extracted text file
+
+    -- Extracted metadata (JSON for flexibility)
+    extracted_metadata JSONB DEFAULT '{}',
+
+    -- Timestamps
+    created_at TIMESTAMPTZ NOT NULL DEFAULT NOW(),
+    updated_at TIMESTAMPTZ NOT NULL DEFAULT NOW(),
+    processed_at TIMESTAMPTZ,
+
+    CONSTRAINT fk_user FOREIGN KEY (user_id) REFERENCES users(id) ON DELETE CASCADE
+);
+
+-- Document chunks with embeddings
+CREATE TABLE document_chunks (
+    id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
+    document_id UUID NOT NULL REFERENCES documents(id) ON DELETE CASCADE,
+    user_id UUID NOT NULL, -- Denormalized for faster filtering
+
+    -- Chunk content
+    content TEXT NOT NULL,
+    chunk_index INTEGER NOT NULL,
+
+    -- Chunk metadata
+    page_number INTEGER,
+    section_title VARCHAR(512),
+    chunk_type VARCHAR(50), -- 'text', 'table', 'header', 'footnote'
+
+    -- Embedding (OpenAI text-embedding-3-small = 1536 dimensions)
+    embedding vector(1536) NOT NULL,
+
+    -- Token count for context budgeting
+    token_count INTEGER,
+
+    -- Timestamps
+    created_at TIMESTAMPTZ NOT NULL DEFAULT NOW(),
+
+    CONSTRAINT fk_document FOREIGN KEY (document_id) REFERENCES documents(id) ON DELETE CASCADE
+);
+
+-- Indexes for efficient retrieval
+CREATE INDEX idx_documents_user_id ON documents(user_id);
+CREATE INDEX idx_documents_status ON documents(status);
+CREATE INDEX idx_documents_document_type ON documents(document_type);
+CREATE INDEX idx_document_chunks_document_id ON document_chunks(document_id);
+CREATE INDEX idx_document_chunks_user_id ON document_chunks(user_id);
+
+-- Vector similarity search index (IVFFlat for large datasets)
+-- Note: Create after initial data load for optimal performance
+CREATE INDEX idx_document_chunks_embedding ON document_chunks
+    USING ivfflat (embedding vector_cosine_ops) WITH (lists = 100);
+```
+
+### 1.2 Docker Compose Update
+
+**File:** `docker-compose.yml`
+
+```yaml
+version: '3.8'
+
+services:
+  # PostgreSQL with pgvector extension
+  database:
+    image: pgvector/pgvector:pg15
+    environment:
+      POSTGRES_DB: ${POSTGRES_DB:-financial_chat}
+      POSTGRES_USER: ${POSTGRES_USER:-financial_user}
+      POSTGRES_PASSWORD: ${POSTGRES_PASSWORD}
+    ports:
+      - "5432:5432"
+    volumes:
+      - postgres_data:/var/lib/postgresql/data
+    healthcheck:
+      test: ["CMD-SHELL", "pg_isready -U financial_user"]
+      interval: 10s
+      timeout: 5s
+      retries: 5
+
+  # Go Backend (existing)
+  backend:
+    build:
+      context: .
+      dockerfile: Dockerfile
+    ports:
+      - "8080:8080"
+    environment:
+      - PORT=${PORT:-8080}
+      - DATABASE_URL=${DATABASE_URL}
+      - JWT_SECRET=${JWT_SECRET}
+      - OPENAI_API_KEY=${OPENAI_API_KEY}
+      - ANTHROPIC_API_KEY=${ANTHROPIC_API_KEY}
+      - PRIMARY_LLM=${PRIMARY_LLM:-openai}
+      # AI Service connection
+      - AI_SERVICE_ADDR=ai-service:50051
+    depends_on:
+      database:
+        condition: service_healthy
+      ai-service:
+        condition: service_healthy
+    restart: unless-stopped
+
+  # NEW: Python AI Microservice
+  ai-service:
+    build:
+      context: ./ai-service
+      dockerfile: Dockerfile
+    ports:
+      - "50051:50051"  # gRPC
+      - "8081:8081"    # HTTP (health checks, metrics)
+    environment:
+      - DATABASE_URL=${AI_DATABASE_URL:-postgresql://${POSTGRES_USER}:${POSTGRES_PASSWORD}@database:5432/${POSTGRES_DB}}
+      - OPENAI_API_KEY=${OPENAI_API_KEY}
+      - ANTHROPIC_API_KEY=${ANTHROPIC_API_KEY}
+      - MINIO_ENDPOINT=minio:9000
+      - MINIO_ACCESS_KEY=${MINIO_ACCESS_KEY:-minioadmin}
+      - MINIO_SECRET_KEY=${MINIO_SECRET_KEY:-minioadmin}
+      - MINIO_BUCKET=${MINIO_BUCKET:-assetra-documents}
+      - LOG_LEVEL=${LOG_LEVEL:-INFO}
+    depends_on:
+      database:
+        condition: service_healthy
+      minio:
+        condition: service_healthy
+    healthcheck:
+      test: ["CMD", "curl", "-f", "http://localhost:8081/health"]
+      interval: 30s
+      timeout: 10s
+      retries: 3
+    restart: unless-stopped
+
+  # MinIO for document storage
+  minio:
+    image: minio/minio:latest
+    command: server /data --console-address ":9001"
+    ports:
+      - "9000:9000"  # API
+      - "9001:9001"  # Console
+    environment:
+      MINIO_ROOT_USER: ${MINIO_ACCESS_KEY:-minioadmin}
+      MINIO_ROOT_PASSWORD: ${MINIO_SECRET_KEY:-minioadmin}
+    volumes:
+      - minio_data:/data
+    healthcheck:
+      test: ["CMD", "curl", "-f", "http://localhost:9000/minio/health/live"]
+      interval: 30s
+      timeout: 10s
+      retries: 3
+
+  # Frontend (Next.js)
+  frontend:
+    build:
+      context: ./frontend
+      dockerfile: Dockerfile.dev
+    ports:
+      - "3000:3000"
+    volumes:
+      - ./frontend:/app
+      - /app/node_modules
+    environment:
+      - NEXT_PUBLIC_API_URL=${NEXT_PUBLIC_API_URL:-http://localhost:8080}
+    depends_on:
+      - backend
+    restart: unless-stopped
+
+volumes:
+  postgres_data:
+  minio_data:
+```
+
+### 1.3 AI Service Dockerfile
+
+**File:** `ai-service/Dockerfile`
+
+```dockerfile
+FROM python:3.11-slim
+
+WORKDIR /app
+
+# Install system dependencies for document processing
+RUN apt-get update && apt-get install -y \
+    libmagic1 \
+    poppler-utils \
+    tesseract-ocr \
+    libreoffice \
+    curl \
+    && rm -rf /var/lib/apt/lists/*
+
+# Install Python dependencies
+COPY pyproject.toml .
+RUN pip install --no-cache-dir .
+
+# Copy source code
+COPY src/ src/
+COPY proto/ proto/
+
+# Generate protobuf files
+RUN python -m grpc_tools.protoc \
+    -I./proto \
+    --python_out=./src/proto \
+    --grpc_python_out=./src/proto \
+    ./proto/ai_service.proto
+
+# Health check endpoint
+EXPOSE 8081
+# gRPC server
+EXPOSE 50051
+
+CMD ["python", "-m", "src.main"]
+```
+
+---
+
+## Phase 2: Embedding Service (Python)
+
+### 2.1 Embedding Provider Interface
+
+**File:** `ai-service/src/services/embedding.py`
+
+```python
+from abc import ABC, abstractmethod
+from typing import Protocol
+import openai
+import tiktoken
+from tenacity import retry, stop_after_attempt, wait_exponential
+
+
+class EmbeddingProvider(Protocol):
+    """Protocol for embedding providers"""
+
+    @abstractmethod
+    async def embed(self, text: str) -> list[float]:
+        """Generate embedding for a single text"""
+        ...
+
+    @abstractmethod
+    async def embed_batch(self, texts: list[str]) -> list[list[float]]:
+        """Generate embeddings for multiple texts"""
+        ...
+
+    @property
+    @abstractmethod
+    def dimensions(self) -> int:
+        """Return embedding dimension size"""
+        ...
+
+    @property
+    @abstractmethod
+    def model_name(self) -> str:
+        """Return model identifier"""
+        ...
+
+
+class OpenAIEmbedding:
+    """OpenAI embedding provider using text-embedding-3-small"""
+
+    def __init__(self, api_key: str, model: str = "text-embedding-3-small"):
+        self.client = openai.AsyncOpenAI(api_key=api_key)
+        self.model = model
+        self._dimensions = 1536  # text-embedding-3-small
+        self.tokenizer = tiktoken.encoding_for_model(model)
+        self.max_tokens = 8191  # Model limit
+
+    @property
+    def dimensions(self) -> int:
+        return self._dimensions
+
+    @property
+    def model_name(self) -> str:
+        return self.model
+
+    def count_tokens(self, text: str) -> int:
+        """Count tokens in text"""
+        return len(self.tokenizer.encode(text))
+
+    def truncate_to_max_tokens(self, text: str) -> str:
+        """Truncate text to fit within token limit"""
+        tokens = self.tokenizer.encode(text)
+        if len(tokens) <= self.max_tokens:
+            return text
+        return self.tokenizer.decode(tokens[: self.max_tokens])
+
+    @retry(stop=stop_after_attempt(3), wait=wait_exponential(multiplier=1, min=2, max=10))
+    async def embed(self, text: str) -> list[float]:
+        """Generate embedding for a single text"""
+        text = self.truncate_to_max_tokens(text)
+        response = await self.client.embeddings.create(
+            model=self.model,
+            input=text,
+        )
+        return response.data[0].embedding
+
+    @retry(stop=stop_after_attempt(3), wait=wait_exponential(multiplier=1, min=2, max=10))
+    async def embed_batch(self, texts: list[str], batch_size: int = 100) -> list[list[float]]:
+        """Generate embeddings for multiple texts with batching"""
+        all_embeddings: list[list[float]] = []
+
+        # Truncate all texts
+        texts = [self.truncate_to_max_tokens(t) for t in texts]
+
+        # Process in batches
+        for i in range(0, len(texts), batch_size):
+            batch = texts[i : i + batch_size]
+            response = await self.client.embeddings.create(
+                model=self.model,
+                input=batch,
+            )
+            # Sort by index to maintain order
+            sorted_data = sorted(response.data, key=lambda x: x.index)
+            all_embeddings.extend([d.embedding for d in sorted_data])
+
+        return all_embeddings
+```
+
+---
+
+## Phase 3: Document Processing Pipeline (Python)
+
+### 3.1 Document Ingestion Service
+
+**File:** `ai-service/src/services/document.py`
+
+```python
+import asyncio
+from dataclasses import dataclass
+from enum import Enum
+from typing import AsyncIterator
+from uuid import UUID, uuid4
+import structlog
+
+from .embedding import EmbeddingProvider
+from .extraction import TextExtractor, DocumentMetadata
+from ..chunking.financial import FinancialDocumentChunker
+from ..db.repository import DocumentRepository
+from ..models.document import Document, Chunk, ProcessingStatus
+
+
+logger = structlog.get_logger()
+
+
+class ProcessingStage(str, Enum):
+    EXTRACTING = "extracting"
+    CHUNKING = "chunking"
+    EMBEDDING = "embedding"
+    STORING = "storing"
+    COMPLETED = "completed"
+    FAILED = "failed"
+
+
+@dataclass
+class ProgressEvent:
+    document_id: str
+    stage: ProcessingStage
+    progress: float  # 0.0 to 1.0
+    message: str
+    error: str | None = None
+
+
+class DocumentService:
+    """Handles document ingestion pipeline"""
+
+    def __init__(
+        self,
+        storage: "StorageProvider",
+        extractor: TextExtractor,
+        chunker: FinancialDocumentChunker,
+        embedder: EmbeddingProvider,
+        repository: DocumentRepository,
+    ):
+        self.storage = storage
+        self.extractor = extractor
+        self.chunker = chunker
+        self.embedder = embedder
+        self.repository = repository
+        self._progress_callbacks: dict[str, asyncio.Queue[ProgressEvent]] = {}
+
+    async def ingest_document(
+        self,
+        user_id: str,
+        filename: str,
+        content: bytes | None = None,
+        storage_path: str | None = None,
+    ) -> Document:
+        """
+        Ingest a document: upload, extract, chunk, embed, store.
+        Returns immediately with document ID; processing happens async.
+        """
+        document_id = str(uuid4())
+
+        # Upload to storage if content provided
+        if content:
+            storage_path = await self.storage.upload(user_id, filename, content)
+
+        # Create document record
+        document = Document(
+            id=document_id,
+            user_id=user_id,
+            filename=filename,
+            storage_path=storage_path,
+            status=ProcessingStatus.PROCESSING,
+        )
+        await self.repository.create_document(document)
+
+        # Start async processing
+        asyncio.create_task(self._process_document(document))
+
+        return document
+
+    async def watch_progress(self, document_id: str) -> AsyncIterator[ProgressEvent]:
+        """Stream progress events for a document"""
+        queue: asyncio.Queue[ProgressEvent] = asyncio.Queue()
+        self._progress_callbacks[document_id] = queue
+
+        try:
+            while True:
+                event = await queue.get()
+                yield event
+                if event.stage in (ProcessingStage.COMPLETED, ProcessingStage.FAILED):
+                    break
+        finally:
+            del self._progress_callbacks[document_id]
+
+    async def _emit_progress(self, event: ProgressEvent) -> None:
+        """Emit progress event to watchers"""
+        if event.document_id in self._progress_callbacks:
+            await self._progress_callbacks[event.document_id].put(event)
+
+    async def _process_document(self, document: Document) -> None:
+        """Process document: extract → chunk → embed → store"""
+        log = logger.bind(document_id=document.id, filename=document.filename)
+
+        try:
+            # Stage 1: Extract text
+            log.info("Extracting text from document")
+            await self._emit_progress(ProgressEvent(
+                document_id=document.id,
+                stage=ProcessingStage.EXTRACTING,
+                progress=0.0,
+                message="Extracting text from document...",
+            ))
+
+            text, metadata = await self.extractor.extract(document.storage_path)
+            document.extracted_metadata = metadata.model_dump()
+
+            await self._emit_progress(ProgressEvent(
+                document_id=document.id,
+                stage=ProcessingStage.EXTRACTING,
+                progress=1.0,
+                message=f"Extracted {len(text)} characters",
+            ))
+
+            # Stage 2: Chunk text
+            log.info("Chunking document", text_length=len(text))
+            await self._emit_progress(ProgressEvent(
+                document_id=document.id,
+                stage=ProcessingStage.CHUNKING,
+                progress=0.0,
+                message="Splitting document into chunks...",
+            ))
+
+            chunks = self.chunker.chunk(text, metadata)
+            log.info("Created chunks", chunk_count=len(chunks))
+
+            await self._emit_progress(ProgressEvent(
+                document_id=document.id,
+                stage=ProcessingStage.CHUNKING,
+                progress=1.0,
+                message=f"Created {len(chunks)} chunks",
+            ))
+
+            # Stage 3: Generate embeddings (batched)
+            log.info("Generating embeddings")
+            batch_size = 100
+            total_batches = (len(chunks) + batch_size - 1) // batch_size
+
+            for batch_idx in range(0, len(chunks), batch_size):
+                batch = chunks[batch_idx : batch_idx + batch_size]
+                texts = [c.content for c in batch]
+
+                embeddings = await self.embedder.embed_batch(texts)
+
+                for chunk, embedding in zip(batch, embeddings):
+                    chunk.embedding = embedding
+
+                progress = min(1.0, (batch_idx + batch_size) / len(chunks))
+                await self._emit_progress(ProgressEvent(
+                    document_id=document.id,
+                    stage=ProcessingStage.EMBEDDING,
+                    progress=progress,
+                    message=f"Embedded {min(batch_idx + batch_size, len(chunks))}/{len(chunks)} chunks",
+                ))
+
+            # Stage 4: Store chunks
+            log.info("Storing chunks in database")
+            await self._emit_progress(ProgressEvent(
+                document_id=document.id,
+                stage=ProcessingStage.STORING,
+                progress=0.0,
+                message="Saving to database...",
+            ))
+
+            await self.repository.create_chunks(document.id, document.user_id, chunks)
+
+            # Mark complete
+            document.status = ProcessingStatus.COMPLETED
+            document.chunk_count = len(chunks)
+            await self.repository.update_document_status(
+                document.id, ProcessingStatus.COMPLETED
+            )
+
+            await self._emit_progress(ProgressEvent(
+                document_id=document.id,
+                stage=ProcessingStage.COMPLETED,
+                progress=1.0,
+                message=f"Document processed: {len(chunks)} chunks indexed",
+            ))
+
+            log.info("Document processing complete", chunk_count=len(chunks))
+
+        except Exception as e:
+            log.error("Document processing failed", error=str(e))
+            await self.repository.update_document_status(
+                document.id, ProcessingStatus.FAILED, error_message=str(e)
+            )
+            await self._emit_progress(ProgressEvent(
+                document_id=document.id,
+                stage=ProcessingStage.FAILED,
+                progress=0.0,
+                message="Processing failed",
+                error=str(e),
+            ))
+```
+
+### 3.2 Chunking Strategies
+
+**File:** `ai-service/src/chunking/financial.py`
+
+```python
+import re
+from dataclasses import dataclass, field
+from typing import Protocol
+import tiktoken
+
+from ..services.extraction import DocumentMetadata
+
+
+@dataclass
+class Chunk:
+    """Represents a piece of a document"""
+    content: str
+    chunk_index: int
+    page_number: int | None = None
+    section_title: str | None = None
+    chunk_type: str = "text"  # 'text', 'table', 'header'
+    token_count: int = 0
+    embedding: list[float] = field(default_factory=list)
+
+
+class ChunkingStrategy(Protocol):
+    """Protocol for chunking strategies"""
+
+    def chunk(self, text: str, metadata: DocumentMetadata | None) -> list[Chunk]:
+        """Split text into chunks"""
+        ...
+
+
+class FinancialDocumentChunker:
+    """
+    Specialized chunker for financial documents.
+
+    Key features:
+    - Respects semantic boundaries (sections, paragraphs)
+    - Keeps tables intact
+    - Preserves financial entities (don't split mid-amount)
+    - Enriches chunks with metadata
+    """
+
+    def __init__(
+        self,
+        chunk_size: int = 512,      # Target tokens per chunk
+        chunk_overlap: int = 50,     # Overlap tokens
+        model: str = "text-embedding-3-small",
+    ):
+        self.chunk_size = chunk_size
+        self.chunk_overlap = chunk_overlap
+        self.tokenizer = tiktoken.encoding_for_model(model)
+
+        # Patterns for detecting structure
+        self.section_header_pattern = re.compile(
+            r'^(?:SCHEDULE\s+[A-Z]-?\d*|PART\s+[IVX]+|SECTION\s+\d+|'
+            r'[A-Z][A-Z\s]+:$|^\d+\.\s+[A-Z])',
+            re.MULTILINE
+        )
+        self.table_pattern = re.compile(
+            r'(?:\|[^\n]+\|[\n])+|'  # Markdown tables
+            r'(?:[\t]{2,}[^\n]+[\n])+',  # Tab-separated tables
+            re.MULTILINE
+        )
+        # Financial amounts - don't split these
+        self.financial_amount_pattern = re.compile(
+            r'\$[\d,]+(?:\.\d{2})?(?:\s*(?:million|billion|thousand|M|B|K))?'
+        )
+
+    def count_tokens(self, text: str) -> int:
+        """Count tokens in text"""
+        return len(self.tokenizer.encode(text))
+
+    def chunk(self, text: str, metadata: DocumentMetadata | None = None) -> list[Chunk]:
+        """
+        Split document into chunks optimized for financial document retrieval.
+
+        Strategy:
+        1. First, split by major sections (headers)
+        2. Within sections, split by paragraphs
+        3. Merge small chunks, split large ones
+        4. Preserve tables as single chunks when possible
+        5. Add overlap between chunks for context continuity
+        """
+        chunks: list[Chunk] = []
+
+        # TODO(human): Implement the chunking algorithm
+        #
+        # This is a key design decision that affects retrieval quality.
+        # Consider:
+        #
+        # 1. SEMANTIC BOUNDARIES: Split at natural document boundaries
+        #    - Section headers (e.g., "Schedule K-1", "Capital Account Analysis")
+        #    - Page breaks (if metadata.pages available)
+        #    - Paragraph boundaries (double newlines)
+        #
+        # 2. TABLE HANDLING: Keep tables intact
+        #    - Detect table structures using self.table_pattern
+        #    - If table > chunk_size, include header row with each chunk
+        #    - Mark chunk_type = "table"
+        #
+        # 3. FINANCIAL ENTITY PRESERVATION: Don't split mid-entity
+        #    - Dollar amounts with context (self.financial_amount_pattern)
+        #    - Date ranges ("January 1, 2024 through December 31, 2024")
+        #    - Account numbers
+        #
+        # 4. CONTEXT ENRICHMENT: Prepend metadata to each chunk
+        #    - Document title (from metadata.title or filename)
+        #    - Section header (most recent header found)
+        #    - Page number (if available)
+        #
+        # Example chunk content format:
+        # "[Document: 2024_K1_Fund_ABC.pdf | Section: Capital Account | Page: 3]\n{actual content}"
+        #
+        # 5. OVERLAP: Include chunk_overlap tokens from previous chunk
+        #    - Helps with queries that span chunk boundaries
+
+        return chunks
+```
+
+### 3.3 Text Extraction
+
+**File:** `ai-service/src/services/extraction.py`
+
+Financial documents require specialized extraction. We use **Unstructured.io** which handles multiple formats elegantly.
+
+| Document Type | Extraction Method | Library |
+|--------------|-------------------|---------|
+| PDF | Text layer + OCR fallback | `unstructured[pdf]` |
+| XLSX/CSV | Structured table extraction | `unstructured[xlsx]` |
+| DOCX | XML parsing | `unstructured[docx]` |
+| Images | OCR | `unstructured` + `tesseract` |
+
+```python
+from dataclasses import dataclass
+from datetime import date
+from pathlib import Path
+from typing import Protocol
+import structlog
+
+from unstructured.partition.auto import partition
+from unstructured.documents.elements import (
+    Element,
+    Table,
+    Title,
+    NarrativeText,
+    ListItem,
+)
+
+
+logger = structlog.get_logger()
+
+
+@dataclass
+class TableInfo:
+    """Information about a detected table"""
+    content: str
+    page_number: int | None
+    headers: list[str]
+
+
+@dataclass
+class SectionInfo:
+    """Information about a document section"""
+    title: str
+    page_number: int | None
+    start_index: int
+
+
+@dataclass
+class DocumentMetadata:
+    """Metadata extracted from document"""
+    page_count: int | None = None
+    document_date: date | None = None
+    document_type: str | None = None  # Detected: 'k1', 'fund_report', etc.
+    tables: list[TableInfo] | None = None
+    sections: list[SectionInfo] | None = None
+    title: str | None = None
+
+    def model_dump(self) -> dict:
+        """Convert to dict for JSON storage"""
+        return {
+            "page_count": self.page_count,
+            "document_date": self.document_date.isoformat() if self.document_date else None,
+            "document_type": self.document_type,
+            "title": self.title,
+        }
+
+
+class TextExtractor(Protocol):
+    """Protocol for text extractors"""
+
+    async def extract(self, file_path: str) -> tuple[str, DocumentMetadata]:
+        """Extract text and metadata from document"""
+        ...
+
+
+class UnstructuredExtractor:
+    """
+    Text extractor using Unstructured.io
+
+    Benefits:
+    - Handles PDF, DOCX, XLSX, images automatically
+    - Preserves document structure (tables, sections)
+    - OCR fallback for scanned documents
+    """
+
+    def __init__(self, storage: "StorageProvider"):
+        self.storage = storage
+
+    async def extract(self, storage_path: str) -> tuple[str, DocumentMetadata]:
+        """
+        Extract text and metadata from a document.
+
+        Args:
+            storage_path: Path to document in object storage
+
+        Returns:
+            Tuple of (extracted_text, metadata)
+        """
+        log = logger.bind(storage_path=storage_path)
+
+        # Download to temp file
+        local_path = await self.storage.download_to_temp(storage_path)
+
+        try:
+            log.info("Partitioning document with Unstructured")
+
+            # Partition document into elements
+            elements: list[Element] = partition(
+                filename=local_path,
+                strategy="hi_res",  # High quality extraction
+                include_page_breaks=True,
+            )
+
+            log.info("Extracted elements", count=len(elements))
+
+            # Build text and collect metadata
+            text_parts: list[str] = []
+            tables: list[TableInfo] = []
+            sections: list[SectionInfo] = []
+            page_count = 0
+
+            for i, element in enumerate(elements):
+                # Track page numbers
+                page_num = getattr(element.metadata, "page_number", None)
+                if page_num and page_num > page_count:
+                    page_count = page_num
+
+                # Collect tables
+                if isinstance(element, Table):
+                    tables.append(TableInfo(
+                        content=str(element),
+                        page_number=page_num,
+                        headers=[],  # Could parse from table structure
+                    ))
+                    text_parts.append(f"\n[TABLE]\n{element}\n[/TABLE]\n")
+
+                # Collect section titles
+                elif isinstance(element, Title):
+                    sections.append(SectionInfo(
+                        title=str(element),
+                        page_number=page_num,
+                        start_index=len("".join(text_parts)),
+                    ))
+                    text_parts.append(f"\n## {element}\n")
+
+                # Regular text
+                else:
+                    text_parts.append(str(element) + "\n")
+
+            text = "".join(text_parts)
+
+            metadata = DocumentMetadata(
+                page_count=page_count or None,
+                tables=tables if tables else None,
+                sections=sections if sections else None,
+            )
+
+            log.info(
+                "Extraction complete",
+                text_length=len(text),
+                page_count=page_count,
+                table_count=len(tables),
+                section_count=len(sections),
+            )
+
+            return text, metadata
+
+        finally:
+            # Cleanup temp file
+            Path(local_path).unlink(missing_ok=True)
+```
+
+---
+
+## Phase 4: Retrieval Engine (Python)
+
+### 4.1 Vector Search Service
+
+**File:** `ai-service/src/services/retrieval.py`
+
+```python
+from dataclasses import dataclass
+from datetime import date
+import structlog
+
+from .embedding import EmbeddingProvider
+from ..db.repository import ChunkRepository
+from ..models.document import Chunk, Document
+
+
+logger = structlog.get_logger()
+
+
+@dataclass
+class SearchConfig:
+    """Configuration for retrieval"""
+    top_k: int = 10
+    similarity_threshold: float = 0.7
+    document_types: list[str] | None = None
+    document_ids: list[str] | None = None
+    date_from: date | None = None
+    date_to: date | None = None
+
+
+@dataclass
+class SearchResult:
+    """A retrieved chunk with metadata"""
+    chunk: Chunk
+    document: Document
+    score: float
+
+
+class RetrievalService:
+    """Semantic search over document chunks"""
+
+    def __init__(
+        self,
+        embedder: EmbeddingProvider,
+        repository: ChunkRepository,
+    ):
+        self.embedder = embedder
+        self.repository = repository
+
+    async def search(
+        self,
+        user_id: str,
+        query: str,
+        config: SearchConfig | None = None,
+    ) -> list[SearchResult]:
+        """
+        Perform semantic search over user's documents.
+
+        Args:
+            user_id: User ID to scope search
+            query: Natural language query
+            config: Search configuration
+
+        Returns:
+            List of search results ordered by relevance
+        """
+        config = config or SearchConfig()
+        log = logger.bind(user_id=user_id, query=query[:100])
+
+        # 1. Embed the query
+        log.debug("Embedding query")
+        query_embedding = await self.embedder.embed(query)
+
+        # 2. Search for similar chunks
+        log.debug("Searching for similar chunks", top_k=config.top_k)
+        results = await self.repository.search_similar(
+            user_id=user_id,
+            embedding=query_embedding,
+            top_k=config.top_k,
+            threshold=config.similarity_threshold,
+            document_types=config.document_types,
+            document_ids=config.document_ids,
+        )
+
+        log.info("Search complete", result_count=len(results))
+        return results
+```
+
+### 4.2 Repository Implementation (pgvector)
+
+**File:** `ai-service/src/db/repository.py`
+
+```python
+from dataclasses import dataclass
+import asyncpg
+from pgvector.asyncpg import register_vector
+import structlog
+
+from ..models.document import Document, Chunk, ProcessingStatus
+
+
+logger = structlog.get_logger()
+
+
+class DocumentRepository:
+    """Repository for documents and chunks with pgvector support"""
+
+    def __init__(self, pool: asyncpg.Pool):
+        self.pool = pool
+
+    async def init_vector_extension(self) -> None:
+        """Initialize pgvector extension on connection"""
+        async with self.pool.acquire() as conn:
+            await register_vector(conn)
+
+    async def search_similar(
+        self,
+        user_id: str,
+        embedding: list[float],
+        top_k: int = 10,
+        threshold: float = 0.7,
+        document_types: list[str] | None = None,
+        document_ids: list[str] | None = None,
+    ) -> list["SearchResult"]:
+        """
+        Find chunks similar to query embedding using cosine similarity.
+
+        Uses pgvector's <=> operator for cosine distance.
+        Similarity = 1 - distance
+        """
+        # Build query with optional filters
+        query = """
+            SELECT
+                dc.id AS chunk_id,
+                dc.content,
+                dc.chunk_index,
+                dc.page_number,
+                dc.section_title,
+                dc.chunk_type,
+                dc.token_count,
+                d.id AS document_id,
+                d.filename,
+                d.document_type,
+                d.document_date,
+                d.file_size_bytes,
+                1 - (dc.embedding <=> $1::vector) AS similarity
+            FROM document_chunks dc
+            JOIN documents d ON dc.document_id = d.id
+            WHERE dc.user_id = $2
+              AND 1 - (dc.embedding <=> $1::vector) > $3
+        """
+        params = [embedding, user_id, threshold]
+        param_idx = 4
+
+        # Add optional document type filter
+        if document_types:
+            query += f" AND d.document_type = ANY(${param_idx}::text[])"
+            params.append(document_types)
+            param_idx += 1
+
+        # Add optional document ID filter
+        if document_ids:
+            query += f" AND d.id = ANY(${param_idx}::uuid[])"
+            params.append(document_ids)
+            param_idx += 1
+
+        query += f"""
+            ORDER BY dc.embedding <=> $1::vector
+            LIMIT ${param_idx}
+        """
+        params.append(top_k)
+
+        async with self.pool.acquire() as conn:
+            await register_vector(conn)
+            rows = await conn.fetch(query, *params)
+
+        results = []
+        for row in rows:
+            chunk = Chunk(
+                id=str(row["chunk_id"]),
+                content=row["content"],
+                chunk_index=row["chunk_index"],
+                page_number=row["page_number"],
+                section_title=row["section_title"],
+                chunk_type=row["chunk_type"],
+                token_count=row["token_count"],
+            )
+            document = Document(
+                id=str(row["document_id"]),
+                user_id=user_id,
+                filename=row["filename"],
+                document_type=row["document_type"],
+                file_size_bytes=row["file_size_bytes"],
+            )
+            results.append(SearchResult(
+                chunk=chunk,
+                document=document,
+                score=row["similarity"],
+            ))
+
+        return results
+
+    async def create_document(self, document: Document) -> None:
+        """Insert a new document record"""
+        query = """
+            INSERT INTO documents (
+                id, user_id, filename, file_type, file_size_bytes,
+                mime_type, document_type, status, storage_path, created_at
+            ) VALUES ($1, $2, $3, $4, $5, $6, $7, $8, $9, NOW())
+        """
+        async with self.pool.acquire() as conn:
+            await conn.execute(
+                query,
+                document.id,
+                document.user_id,
+                document.filename,
+                document.file_type,
+                document.file_size_bytes,
+                document.mime_type,
+                document.document_type,
+                document.status.value,
+                document.storage_path,
+            )
+
+    async def create_chunks(
+        self,
+        document_id: str,
+        user_id: str,
+        chunks: list[Chunk],
+    ) -> None:
+        """Batch insert chunks with embeddings"""
+        query = """
+            INSERT INTO document_chunks (
+                id, document_id, user_id, content, chunk_index,
+                page_number, section_title, chunk_type, embedding, token_count, created_at
+            ) VALUES ($1, $2, $3, $4, $5, $6, $7, $8, $9, $10, NOW())
+        """
+        async with self.pool.acquire() as conn:
+            await register_vector(conn)
+            # Use executemany for batch insert
+            await conn.executemany(
+                query,
+                [
+                    (
+                        chunk.id,
+                        document_id,
+                        user_id,
+                        chunk.content,
+                        chunk.chunk_index,
+                        chunk.page_number,
+                        chunk.section_title,
+                        chunk.chunk_type,
+                        chunk.embedding,
+                        chunk.token_count,
+                    )
+                    for chunk in chunks
+                ],
+            )
+
+    async def update_document_status(
+        self,
+        document_id: str,
+        status: ProcessingStatus,
+        error_message: str | None = None,
+    ) -> None:
+        """Update document processing status"""
+        query = """
+            UPDATE documents
+            SET status = $2,
+                error_message = $3,
+                processed_at = CASE WHEN $2 IN ('completed', 'failed') THEN NOW() ELSE NULL END,
+                updated_at = NOW()
+            WHERE id = $1
+        """
+        async with self.pool.acquire() as conn:
+            await conn.execute(query, document_id, status.value, error_message)
+```
+
+---
+
+## Phase 5: RAG Query Service (Python + gRPC)
+
+### 5.1 RAG Service Implementation
+
+**File:** `ai-service/src/services/rag.py`
+
+```python
+from dataclasses import dataclass
+from typing import AsyncIterator
+import openai
+import structlog
+
+from .retrieval import RetrievalService, SearchConfig, SearchResult
+
+
+logger = structlog.get_logger()
+
+
+SYSTEM_PROMPT = """You are a financial analyst assistant helping users understand their financial documents.
+
+IMPORTANT RULES:
+1. Answer questions based ONLY on the provided document context
+2. If the answer cannot be found in the context, say "I couldn't find this information in the uploaded documents."
+3. Always cite which document and page number you found information in
+4. For numerical data, quote the exact figures from the documents
+5. If asked about calculations, show your work step by step
+
+Format citations as: [Document: filename, Page: N]"""
+
+
+@dataclass
+class QueryConfig:
+    """Configuration for RAG queries"""
+    top_k: int = 10
+    similarity_threshold: float = 0.7
+    document_types: list[str] | None = None
+    document_ids: list[str] | None = None
+    include_sources: bool = True
+    model: str = "gpt-4-turbo"
+    temperature: float = 0.1  # Low temperature for factual responses
+
+
+@dataclass
+class SourceInfo:
+    """Information about a source used in the answer"""
+    document_id: str
+    filename: str
+    document_type: str | None
+    page_number: int | None
+    section_title: str | None
+    excerpt: str
+    relevance_score: float
+
+
+@dataclass
+class QueryMetadata:
+    """Metadata about the query execution"""
+    chunks_retrieved: int
+    tokens_used: int
+    processing_time_ms: float
+
+
+class RAGService:
+    """RAG query service with streaming LLM responses"""
+
+    def __init__(
+        self,
+        retrieval: RetrievalService,
+        openai_api_key: str,
+    ):
+        self.retrieval = retrieval
+        self.openai_client = openai.AsyncOpenAI(api_key=openai_api_key)
+
+    async def query(
+        self,
+        user_id: str,
+        query: str,
+        config: QueryConfig | None = None,
+    ) -> AsyncIterator[str | list[SourceInfo] | QueryMetadata]:
+        """
+        Execute a RAG query with streaming response.
+
+        Yields:
+            - str: Streaming text tokens
+            - list[SourceInfo]: Sources (sent at end)
+            - QueryMetadata: Metadata (sent at end)
+        """
+        import time
+        start_time = time.time()
+
+        config = config or QueryConfig()
+        log = logger.bind(user_id=user_id, query=query[:100])
+
+        # 1. Retrieve relevant chunks
+        log.info("Retrieving relevant chunks")
+        search_config = SearchConfig(
+            top_k=config.top_k,
+            similarity_threshold=config.similarity_threshold,
+            document_types=config.document_types,
+            document_ids=config.document_ids,
+        )
+        results = await self.retrieval.search(user_id, query, search_config)
+
+        if not results:
+            yield "I couldn't find any relevant documents to answer your question. Please upload documents first."
+            return
+
+        log.info("Retrieved chunks", count=len(results))
+
+        # 2. Build context from chunks
+        context = self._build_context(results)
+
+        # 3. Build user prompt
+        user_prompt = f"""Context from documents:
+
+{context}
+
+---
+
+Question: {query}
+
+Please provide a detailed answer based on the document context above. Cite your sources."""
+
+        # 4. Stream LLM response
+        log.info("Generating response with LLM", model=config.model)
+        total_tokens = 0
+
+        stream = await self.openai_client.chat.completions.create(
+            model=config.model,
+            messages=[
+                {"role": "system", "content": SYSTEM_PROMPT},
+                {"role": "user", "content": user_prompt},
+            ],
+            temperature=config.temperature,
+            stream=True,
+            stream_options={"include_usage": True},
+        )
+
+        async for chunk in stream:
+            # Stream text tokens
+            if chunk.choices and chunk.choices[0].delta.content:
+                yield chunk.choices[0].delta.content
+
+            # Capture usage info
+            if chunk.usage:
+                total_tokens = chunk.usage.total_tokens
+
+        # 5. Yield sources
+        if config.include_sources:
+            sources = [
+                SourceInfo(
+                    document_id=r.document.id,
+                    filename=r.document.filename,
+                    document_type=r.document.document_type,
+                    page_number=r.chunk.page_number,
+                    section_title=r.chunk.section_title,
+                    excerpt=r.chunk.content[:200] + "..." if len(r.chunk.content) > 200 else r.chunk.content,
+                    relevance_score=r.score,
+                )
+                for r in results
+            ]
+            yield sources
+
+        # 6. Yield metadata
+        processing_time_ms = (time.time() - start_time) * 1000
+        yield QueryMetadata(
+            chunks_retrieved=len(results),
+            tokens_used=total_tokens,
+            processing_time_ms=processing_time_ms,
+        )
+
+        log.info(
+            "RAG query complete",
+            chunks=len(results),
+            tokens=total_tokens,
+            time_ms=processing_time_ms,
+        )
+
+    def _build_context(self, results: list[SearchResult], max_tokens: int = 8000) -> str:
+        """
+        Build context string from search results.
+
+        Formats each chunk with metadata for citation.
+        Respects token budget.
+        """
+        import tiktoken
+        tokenizer = tiktoken.encoding_for_model("gpt-4")
+
+        context_parts = []
+        total_tokens = 0
+
+        for result in results:
+            # Format chunk with metadata
+            chunk_text = f"""[Document: {result.document.filename}"""
+            if result.chunk.page_number:
+                chunk_text += f", Page: {result.chunk.page_number}"
+            if result.chunk.section_title:
+                chunk_text += f", Section: {result.chunk.section_title}"
+            chunk_text += f"]\n{result.chunk.content}\n"
+
+            # Check token budget
+            chunk_tokens = len(tokenizer.encode(chunk_text))
+            if total_tokens + chunk_tokens > max_tokens:
+                break
+
+            context_parts.append(chunk_text)
+            total_tokens += chunk_tokens
+
+        return "\n---\n".join(context_parts)
+```
+
+### 5.2 gRPC Server Implementation
+
+**File:** `ai-service/src/grpc_server.py`
+
+```python
+import asyncio
+from concurrent import futures
+import grpc
+from grpc import aio
+
+from .services.document import DocumentService, ProgressEvent, ProcessingStage
+from .services.rag import RAGService, QueryConfig, SourceInfo, QueryMetadata
+from .services.embedding import OpenAIEmbedding
+
+# Generated protobuf imports
+from .proto import ai_service_pb2 as pb
+from .proto import ai_service_pb2_grpc as pb_grpc
+
+
+class DocumentServicer(pb_grpc.DocumentServiceServicer):
+    """gRPC servicer for document operations"""
+
+    def __init__(self, document_service: DocumentService):
+        self.service = document_service
+
+    async def IngestDocument(
+        self,
+        request: pb.IngestDocumentRequest,
+        context: grpc.aio.ServicerContext,
+    ) -> pb.IngestDocumentResponse:
+        document = await self.service.ingest_document(
+            user_id=request.user_id,
+            filename=request.filename,
+            content=request.content if request.content else None,
+            storage_path=request.storage_path if request.storage_path else None,
+        )
+        return pb.IngestDocumentResponse(
+            document_id=document.id,
+            status="processing",
+        )
+
+    async def WatchDocumentProgress(
+        self,
+        request: pb.WatchDocumentProgressRequest,
+        context: grpc.aio.ServicerContext,
+    ):
+        """Stream document processing progress"""
+        async for event in self.service.watch_progress(request.document_id):
+            yield pb.DocumentProgressEvent(
+                document_id=event.document_id,
+                stage=event.stage.value,
+                progress=event.progress,
+                message=event.message,
+                error=event.error or "",
+            )
+
+
+class RAGServicer(pb_grpc.RAGServiceServicer):
+    """gRPC servicer for RAG operations"""
+
+    def __init__(self, rag_service: RAGService):
+        self.service = rag_service
+
+    async def Query(
+        self,
+        request: pb.QueryRequest,
+        context: grpc.aio.ServicerContext,
+    ):
+        """Stream RAG query response"""
+        config = QueryConfig(
+            top_k=request.config.top_k or 10,
+            similarity_threshold=request.config.similarity_threshold or 0.7,
+            document_types=list(request.config.document_types) or None,
+            document_ids=list(request.config.document_ids) or None,
+            include_sources=request.config.include_sources,
+        )
+
+        async for item in self.service.query(
+            user_id=request.user_id,
+            query=request.query,
+            config=config,
+        ):
+            if isinstance(item, str):
+                # Stream text token
+                yield pb.QueryResponseChunk(text=item)
+            elif isinstance(item, list):
+                # Sources
+                sources = pb.QuerySources(
+                    sources=[
+                        pb.SourceInfo(
+                            document_id=s.document_id,
+                            filename=s.filename,
+                            document_type=s.document_type or "",
+                            page_number=s.page_number or 0,
+                            section_title=s.section_title or "",
+                            excerpt=s.excerpt,
+                            relevance_score=s.relevance_score,
+                        )
+                        for s in item
+                    ]
+                )
+                yield pb.QueryResponseChunk(sources=sources)
+            elif isinstance(item, QueryMetadata):
+                # Metadata
+                yield pb.QueryResponseChunk(
+                    metadata=pb.QueryMetadata(
+                        chunks_retrieved=item.chunks_retrieved,
+                        tokens_used=item.tokens_used,
+                        processing_time_ms=item.processing_time_ms,
+                    )
+                )
+
+
+async def serve(port: int = 50051) -> None:
+    """Start the gRPC server"""
+    server = aio.server(futures.ThreadPoolExecutor(max_workers=10))
+
+    # Initialize services (dependency injection)
+    # ... setup document_service, rag_service ...
+
+    pb_grpc.add_DocumentServiceServicer_to_server(
+        DocumentServicer(document_service), server
+    )
+    pb_grpc.add_RAGServiceServicer_to_server(
+        RAGServicer(rag_service), server
+    )
+
+    server.add_insecure_port(f"[::]:{port}")
+    await server.start()
+    await server.wait_for_termination()
+```
+
+### 5.3 Go Backend Proxy (HTTP → gRPC)
+
+The Go backend exposes REST endpoints that proxy to the AI service:
+
+**File:** `backend/internal/handlers/rag_proxy.go`
+
+```go
+package handlers
+
+import (
+    "encoding/json"
+    "io"
+    "net/http"
+
+    "financial-chat-system/backend/internal/ai"
+    "financial-chat-system/backend/internal/middleware"
+    pb "financial-chat-system/backend/proto/ai"
+)
+
+type RAGProxyHandler struct {
+    aiClient *ai.Client
+}
+
+func NewRAGProxyHandler(aiClient *ai.Client) *RAGProxyHandler {
+    return &RAGProxyHandler{aiClient: aiClient}
+}
+
+// Query proxies RAG queries to the AI service with SSE streaming
+func (h *RAGProxyHandler) Query(w http.ResponseWriter, r *http.Request) {
+    ctx := r.Context()
+    userID := middleware.GetUserID(ctx)
+
+    var req struct {
+        Query         string   `json:"query"`
+        DocumentTypes []string `json:"document_types,omitempty"`
+        DocumentIDs   []string `json:"document_ids,omitempty"`
+        TopK          int32    `json:"top_k,omitempty"`
+    }
+    if err := json.NewDecoder(r.Body).Decode(&req); err != nil {
+        http.Error(w, "invalid request", http.StatusBadRequest)
+        return
+    }
+
+    // Setup SSE
+    w.Header().Set("Content-Type", "text/event-stream")
+    w.Header().Set("Cache-Control", "no-cache")
+    w.Header().Set("Connection", "keep-alive")
+    flusher, ok := w.(http.Flusher)
+    if !ok {
+        http.Error(w, "streaming not supported", http.StatusInternalServerError)
+        return
+    }
+
+    // Call AI service with streaming
+    config := &pb.QueryConfig{
+        TopK:               req.TopK,
+        DocumentTypes:      req.DocumentTypes,
+        DocumentIds:        req.DocumentIDs,
+        IncludeSources:     true,
+    }
+
+    textChan, sourcesChan, err := h.aiClient.QueryRAG(ctx, userID, req.Query, config)
+    if err != nil {
+        http.Error(w, err.Error(), http.StatusInternalServerError)
+        return
+    }
+
+    // Stream text tokens
+    for text := range textChan {
+        data, _ := json.Marshal(map[string]string{"type": "text", "content": text})
+        fmt.Fprintf(w, "data: %s\n\n", data)
+        flusher.Flush()
+    }
+
+    // Send sources
+    if sources := <-sourcesChan; sources != nil {
+        data, _ := json.Marshal(map[string]interface{}{
+            "type":    "sources",
+            "sources": sources.Sources,
+        })
+        fmt.Fprintf(w, "data: %s\n\n", data)
+        flusher.Flush()
+    }
+
+    // Done
+    fmt.Fprintf(w, "data: {\"type\": \"done\"}\n\n")
+    flusher.Flush()
+}
+```
+
+### 5.4 API Routes (Go Backend)
+
+```go
+// In router setup
+r.HandleFunc("/api/v2/rag/query", ragProxyHandler.Query).Methods("POST")
+r.HandleFunc("/api/v2/rag/documents", ragProxyHandler.ListDocuments).Methods("GET")
+r.HandleFunc("/api/v2/rag/documents", ragProxyHandler.UploadDocument).Methods("POST")
+r.HandleFunc("/api/v2/rag/documents/{id}", ragProxyHandler.GetDocument).Methods("GET")
+r.HandleFunc("/api/v2/rag/documents/{id}", ragProxyHandler.DeleteDocument).Methods("DELETE")
+```
+
+---
+
+## Phase 6: Frontend Integration
+
+### 6.1 Document Upload Component
+
+**File:** `frontend/src/components/rag/DocumentUpload.tsx`
+
+```typescript
+interface DocumentUploadProps {
+  onUploadComplete: (document: Document) => void;
+}
+
+export function DocumentUpload({ onUploadComplete }: DocumentUploadProps) {
+  const [uploading, setUploading] = useState(false);
+  const [progress, setProgress] = useState(0);
+
+  const onDrop = useCallback(async (acceptedFiles: File[]) => {
+    setUploading(true);
+
+    for (const file of acceptedFiles) {
+      const formData = new FormData();
+      formData.append('file', file);
+
+      const response = await fetch('/api/v2/rag/documents', {
+        method: 'POST',
+        body: formData,
+        headers: {
+          'X-Auth-Token': getAuthToken(),
+        },
+      });
+
+      if (response.ok) {
+        const document = await response.json();
+        onUploadComplete(document);
+      }
+    }
+
+    setUploading(false);
+  }, [onUploadComplete]);
+
+  return (
+    <div className="rounded-2xl border border-white/[0.06] bg-white/[0.02] p-6">
+      <Dropzone onDrop={onDrop} accept={{
+        'application/pdf': ['.pdf'],
+        'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet': ['.xlsx'],
+        'text/csv': ['.csv'],
+      }}>
+        {/* Dropzone UI */}
+      </Dropzone>
+    </div>
+  );
+}
+```
+
+### 6.2 RAG Chat Interface
+
+**File:** `frontend/src/components/rag/RAGChat.tsx`
+
+```typescript
+interface RAGChatProps {
+  // Optionally filter to specific document types
+  documentTypes?: string[];
+}
+
+export function RAGChat({ documentTypes }: RAGChatProps) {
+  const [query, setQuery] = useState('');
+  const [messages, setMessages] = useState<Message[]>([]);
+  const [loading, setLoading] = useState(false);
+
+  const submitQuery = async () => {
+    setLoading(true);
+    setMessages(prev => [...prev, { role: 'user', content: query }]);
+
+    const response = await fetch('/api/v2/rag/query', {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+        'X-Auth-Token': getAuthToken(),
+      },
+      body: JSON.stringify({
+        query,
+        document_types: documentTypes,
+        top_k: 10,
+      }),
+    });
+
+    const result = await response.json();
+
+    setMessages(prev => [...prev, {
+      role: 'assistant',
+      content: result.answer,
+      sources: result.sources,
+    }]);
+
+    setLoading(false);
+    setQuery('');
+  };
+
+  return (
+    <div className="flex flex-col h-full">
+      <div className="flex-1 overflow-y-auto p-4 space-y-4">
+        {messages.map((msg, i) => (
+          <ChatMessage key={i} message={msg} />
+        ))}
+      </div>
+
+      <div className="border-t border-white/[0.06] p-4">
+        <div className="flex gap-2">
+          <input
+            value={query}
+            onChange={(e) => setQuery(e.target.value)}
+            placeholder="Ask about your documents..."
+            className="flex-1 rounded-xl bg-white/[0.03] border border-white/[0.06] text-white text-sm py-2.5 px-3"
+            onKeyDown={(e) => e.key === 'Enter' && submitQuery()}
+          />
+          <button onClick={submitQuery} disabled={loading}>
+            <Sparkles className="h-4 w-4" />
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}
+```
+
+---
+
+## Phase 7: Advanced Features (Future)
+
+### 7.1 Document Classification
+
+Auto-classify uploaded documents using LLM:
+
+```go
+func (s *ClassificationService) Classify(ctx context.Context, text string) (string, float64, error) {
+    prompt := `Classify this financial document into one of these categories:
+- k1: Schedule K-1 partnership tax forms
+- fund_report: Fund performance reports, quarterly/annual reports
+- account_statement: Brokerage or bank account statements
+- tax_document: Tax returns, 1099s, W-2s
+- legal: Legal agreements, contracts, operating agreements
+- other: Documents that don't fit above categories
+
+Document excerpt:
+%s
+
+Respond with JSON: {"category": "...", "confidence": 0.0-1.0}`
+
+    // Use LLM to classify
+}
+```
+
+### 7.2 Structured Data Extraction
+
+Extract specific fields from known document types:
+
+```go
+// For K-1 documents, extract:
+type K1ExtractedData struct {
+    PartnershipName      string
+    PartnershipEIN       string
+    TaxYear              int
+    OrdinaryIncome       decimal.Decimal
+    RentalIncome         decimal.Decimal
+    InterestIncome       decimal.Decimal
+    Dividends            decimal.Decimal
+    ShortTermCapitalGain decimal.Decimal
+    LongTermCapitalGain  decimal.Decimal
+    Section199ADividends decimal.Decimal
+}
+```
+
+### 7.3 Cross-Document Analysis
+
+Enable queries that span multiple documents:
+
+```
+User: "What's our total distribution from all PE funds in 2024?"
+→ Searches across all K-1s and fund reports
+→ Aggregates distributions
+→ Returns answer with breakdown by fund
+```
+
+### 7.4 Automatic Financial Integration
+
+Link extracted data to Assetra's financial model:
+
+```
+1. User uploads K-1
+2. System extracts income amounts
+3. Prompts user: "Would you like to add this $50,000 partnership income to your 2024 projections?"
+4. User confirms → income automatically added to timeline
+```
+
+---
+
+## Implementation Order
+
+| Week | Phase | Deliverables |
+|------|-------|--------------|
+| **1** | **Infrastructure** | pgvector migration, docker-compose with AI service + MinIO, proto definitions |
+| **2** | **AI Service Scaffold** | Python project setup, gRPC server skeleton, health checks, logging |
+| **3** | **Embedding Service** | OpenAI embedding provider, batch embedding, unit tests |
+| **4** | **Document Ingestion** | Upload to MinIO, text extraction (Unstructured.io), async processing |
+| **5** | **Chunking** | Financial document chunker implementation, table handling |
+| **6** | **Retrieval** | pgvector search, similarity queries, filtering by doc type |
+| **7** | **RAG Query** | LLM integration, streaming responses, context building |
+| **8** | **Go Integration** | gRPC client in Go backend, REST proxy endpoints |
+| **9** | **Frontend** | Upload UI, document library, RAG chat with streaming |
+| **10** | **Polish** | Error handling, progress indicators, source citations, tests |
+| **11** | **Advanced** | Classification, structured extraction (stretch goal) |
+
+### Milestone Checkpoints
+
+| Milestone | Criteria |
+|-----------|----------|
+| **M1: Service Running** | AI service starts, health check passes, can receive gRPC calls |
+| **M2: Document Processed** | Upload PDF → extract text → chunk → embed → store in pgvector |
+| **M3: Basic RAG** | Query → retrieve chunks → LLM generates answer with citations |
+| **M4: Production Ready** | Streaming UI, error handling, monitoring, 90% test coverage |
+
+---
+
+## Cost Estimates
+
+| Component | Cost Model | Estimated Monthly (1000 docs) |
+|-----------|------------|------------------------------|
+| OpenAI Embeddings | $0.00002/1K tokens | ~$5-10 |
+| OpenAI GPT-4 Turbo | $0.01/1K input, $0.03/1K output | ~$50-100 (depends on usage) |
+| Storage (S3/MinIO) | $0.023/GB | <$5 |
+| **Total** | | **~$60-115/month** |
+
+---
+
+## Security Considerations
+
+1. **Data Isolation**: All queries filtered by `user_id` at database level
+2. **File Validation**: Validate file types, scan for malware before processing
+3. **Storage Encryption**: Encrypt documents at rest in S3/MinIO
+4. **Access Logging**: Log all document access for audit trail
+5. **Rate Limiting**: Limit embedding/query requests per user
+
+---
+
+## Testing Strategy
+
+1. **Unit Tests**: Chunking strategies, embedding formatting, search queries
+2. **Integration Tests**: Full ingestion pipeline, retrieval accuracy
+3. **E2E Tests**: Document upload → query → response flow
+4. **Accuracy Evaluation**: Build test set of documents with known answers
+
+---
+
+## Open Questions for Design
+
+1. **Chunking Strategy**: What's the optimal chunk size for financial documents? (See Phase 3.2 for TODO)
+2. **Re-ranking**: Should we add a re-ranking step after initial retrieval?
+3. **Hybrid Search**: Combine vector search with keyword search (BM25)?
+4. **Caching**: Cache embeddings for common queries?
+5. **Multi-modal**: Support for document images, charts, graphs?