diff --git a/AI_IMPLEMENTATION_PROMPT.md b/AI_IMPLEMENTATION_PROMPT.md
new file mode 100644
index 0000000..14c0fe6
--- /dev/null
+++ b/AI_IMPLEMENTATION_PROMPT.md
@@ -0,0 +1,472 @@
+# AI Implementation Prompt - BotUI Full Product Build
+
+**Budget:** $200,000 USD | **Timeline:** 15 weeks | **Version:** 6.1.0
+
+---
+
+## CONTEXT
+
+You are implementing frontend UI for General Bots Suite. ALL backend APIs already exist in BotServer - your job is purely to wire HTMX-based UI to existing endpoints.
+
+### Tech Stack
+- **Templates:** Rust Askama (HTML templates)
+- **Interactivity:** HTMX (NO custom JavaScript unless absolutely necessary)
+- **Styling:** CSS with CSS variables for theming
+- **WebSocket:** htmx-ws extension for real-time features
+- **Icons:** Use ONLY existing icons from `ui/suite/assets/icons/`
+
+### Critical Rules
+1. **HTMX ONLY** - No fetch(), no axios, no custom JS for API calls
+2. **Server-side rendering** - All HTML generated by Rust/Askama
+3. **Local assets** - NEVER use CDN links
+4. **Zero warnings** - Clean Rust compilation required
+5. **6 themes** - Use CSS variables, not hardcoded colors
+
+---
+
+## PHASE 1: CORE APPS ($45,000 - 3 weeks)
+
+### Task 1.1: Paper App (Document Editor)
+**Create:** `ui/suite/paper/paper.html`
+
+Wire these endpoints:
+```
+POST /api/paper/new              → Create new document
+GET  /api/paper/list             → List documents  
+GET  /api/paper/search?q=        → Search documents
+POST /api/paper/save             → Save document
+POST /api/paper/autosave         → Auto-save (5s delay)
+GET  /api/paper/{id}             → Get document
+POST /api/paper/{id}/delete      → Delete document
+POST /api/paper/template/blank   → Blank template
+POST /api/paper/template/meeting → Meeting notes template
+POST /api/paper/template/todo    → Todo template
+POST /api/paper/template/research→ Research template
+POST /api/paper/ai/summarize     → AI summarize
+POST /api/paper/ai/expand        → AI expand text
+POST /api/paper/ai/improve       → AI improve writing
+POST /api/paper/ai/simplify      → AI simplify
+POST /api/paper/ai/translate     → AI translate
+POST /api/paper/ai/custom        → AI custom prompt
+GET  /api/paper/export/pdf       → Export PDF
+GET  /api/paper/export/docx      → Export DOCX
+GET  /api/paper/export/md        → Export Markdown
+GET  /api/paper/export/html      → Export HTML
+GET  /api/paper/export/txt       → Export Text
+```
+
+Structure:
+- Sidebar: document list + search
+- Main: rich text editor area
+- Right panel: AI assistant tools
+- Toolbar: save, templates, export
+
+---
+
+### Task 1.2: Research App
+**Create:** `ui/suite/research/research.html`
+
+Wire these endpoints:
+```
+GET  /api/research/collections       → List collections
+POST /api/research/collections/new   → Create collection
+GET  /api/research/collections/{id}  → Get collection
+POST /api/research/search            → Search across sources
+GET  /api/research/recent            → Recent searches
+GET  /api/research/trending          → Trending topics
+GET  /api/research/prompts           → Suggested prompts
+GET  /api/research/export-citations  → Export citations
+```
+
+---
+
+### Task 1.3: Sources App
+**Create:** `ui/suite/sources/sources.html`
+
+Wire these endpoints:
+```
+GET /api/sources/prompts      → Prompt library
+GET /api/sources/templates    → Template library
+GET /api/sources/news         → News feed
+GET /api/sources/mcp-servers  → MCP server list
+GET /api/sources/llm-tools    → LLM tools list
+GET /api/sources/models       → Available models
+GET /api/sources/search?q=    → Search sources
+```
+
+Structure: Tab-based navigation between source types
+
+---
+
+### Task 1.4: Meet App (Video Conferencing)
+**Create:** `ui/suite/meet/meet.html`
+
+Wire these endpoints:
+```
+POST /api/meet/create                    → Create meeting
+GET  /api/meet/rooms                     → List active rooms
+GET  /api/meet/rooms/{room_id}           → Get room details
+POST /api/meet/rooms/{room_id}/join      → Join room
+POST /api/meet/transcription/{room_id}   → Start transcription
+POST /api/meet/token                     → Get meeting token
+POST /api/meet/invite                    → Send invites
+WS   /ws/meet                            → Real-time meeting
+POST /api/voice/start                    → Start voice
+POST /api/voice/stop                     → Stop voice
+```
+
+---
+
+### Task 1.5: Conversations (Enhance Chat)
+**Enhance:** `ui/suite/chat/chat.html`
+
+Add these endpoints:
+```
+POST /conversations/create                         → Create conversation
+POST /conversations/{id}/join                      → Join
+POST /conversations/{id}/leave                     → Leave
+GET  /conversations/{id}/members                   → List members
+GET  /conversations/{id}/messages                  → Get messages
+POST /conversations/{id}/messages/send             → Send message
+POST /conversations/{id}/messages/{msg}/edit       → Edit message
+POST /conversations/{id}/messages/{msg}/delete     → Delete message
+POST /conversations/{id}/messages/{msg}/react      → Add reaction
+POST /conversations/{id}/messages/{msg}/pin        → Pin message
+GET  /conversations/{id}/messages/search?q=        → Search
+POST /conversations/{id}/calls/start               → Start call
+POST /conversations/{id}/calls/join                → Join call
+POST /conversations/{id}/calls/leave               → Leave call
+POST /conversations/{id}/calls/mute                → Mute
+POST /conversations/{id}/calls/unmute              → Unmute
+POST /conversations/{id}/screen/share              → Share screen
+POST /conversations/{id}/screen/stop               → Stop share
+POST /conversations/{id}/recording/start           → Start recording
+POST /conversations/{id}/recording/stop            → Stop recording
+POST /conversations/{id}/whiteboard/create         → Create whiteboard
+POST /conversations/{id}/whiteboard/collaborate    → Collaborate
+```
+
+---
+
+### Task 1.6: Drive Enhancement
+**Enhance:** `ui/suite/drive/index.html`
+
+Add missing endpoints:
+```
+POST /files/copy              → Copy file
+POST /files/move              → Move file
+GET  /files/shared            → Shared with me
+GET  /files/permissions       → Get permissions
+GET  /files/quota             → Storage quota
+GET  /files/sync/status       → Sync status
+POST /files/sync/start        → Start sync
+POST /files/sync/stop         → Stop sync
+GET  /files/versions          → File versions
+POST /files/restore           → Restore version
+POST /docs/merge              → Merge documents
+POST /docs/convert            → Convert format
+POST /docs/fill               → Fill template
+POST /docs/export             → Export document
+POST /docs/import             → Import document
+```
+
+---
+
+### Task 1.7: Calendar Enhancement
+**Enhance:** `ui/suite/calendar/calendar.html`
+
+Add missing endpoints:
+```
+GET    /api/calendar/events/{id}    → Get event
+PUT    /api/calendar/events/{id}    → Update event
+DELETE /api/calendar/events/{id}    → Delete event
+GET    /api/calendar/export.ics     → Export iCal
+POST   /api/calendar/import         → Import iCal
+```
+
+---
+
+### Task 1.8: Email Enhancement
+**Enhance:** `ui/suite/mail/mail.html`
+
+Add missing endpoints:
+```
+GET    /api/email/accounts              → List accounts
+POST   /api/email/accounts/add          → Add account
+DELETE /api/email/accounts/{id}         → Remove account
+GET    /api/email/compose               → Compose form
+POST   /api/email/send                  → Send email
+POST   /api/email/draft                 → Save draft
+GET    /api/email/folders/{account_id}  → Get folders
+GET    /api/email/tracking/stats        → Tracking stats
+```
+
+---
+
+## PHASE 2: ADMIN PANEL ($55,000 - 4 weeks)
+
+### Task 2.1: User Management
+**Create:** `ui/suite/admin/users.html`
+
+Wire ALL user endpoints:
+```
+POST   /users/create                              → Create user
+PUT    /users/{id}/update                         → Update user
+DELETE /users/{id}/delete                         → Delete user
+GET    /users/list                                → List users
+GET    /users/search?q=                           → Search users
+GET    /users/{id}/profile                        → Get profile
+GET    /users/{id}/settings                       → Get settings
+GET    /users/{id}/permissions                    → Get permissions
+GET    /users/{id}/roles                          → Get roles
+GET    /users/{id}/status                         → Get status
+GET    /users/{id}/presence                       → Get presence
+GET    /users/{id}/activity                       → Get activity
+POST   /users/{id}/security/2fa/enable            → Enable 2FA
+POST   /users/{id}/security/2fa/disable           → Disable 2FA
+GET    /users/{id}/security/devices               → List devices
+GET    /users/{id}/security/sessions              → List sessions
+POST   /users/{id}/notifications/preferences/update → Update prefs
+```
+
+---
+
+### Task 2.2: Group Management
+**Create:** `ui/suite/admin/groups.html`
+
+Wire ALL group endpoints:
+```
+POST   /groups/create                    → Create group
+PUT    /groups/{id}/update               → Update group
+DELETE /groups/{id}/delete               → Delete group
+GET    /groups/list                      → List groups
+GET    /groups/search?q=                 → Search groups
+GET    /groups/{id}/members              → Get members
+POST   /groups/{id}/members/add          → Add member
+POST   /groups/{id}/members/roles        → Set member role
+DELETE /groups/{id}/members/remove       → Remove member
+GET    /groups/{id}/permissions          → Get permissions
+GET    /groups/{id}/settings             → Get settings
+GET    /groups/{id}/analytics            → Get analytics
+POST   /groups/{id}/join/request         → Request join
+POST   /groups/{id}/join/approve         → Approve join
+POST   /groups/{id}/join/reject          → Reject join
+POST   /groups/{id}/invites/send         → Send invite
+GET    /groups/{id}/invites/list         → List invites
+```
+
+---
+
+### Task 2.3: DNS Management
+**Create:** `ui/suite/admin/dns.html`
+
+```
+POST /api/dns/register    → Register hostname
+POST /api/dns/remove      → Remove hostname
+```
+
+---
+
+### Task 2.4: Admin Shell
+**Create:** `ui/suite/admin/index.html`
+
+Sidebar navigation to: Dashboard, Users, Groups, Bots, DNS, Audit, Billing
+
+---
+
+## PHASE 3: SETTINGS ($30,000 - 2 weeks)
+
+**Create directory:** `ui/suite/settings/`
+
+Files needed:
+- `index.html` - Settings shell with sidebar nav
+- `profile.html` - User profile editing
+- `security.html` - 2FA, sessions, devices, password change
+- `appearance.html` - Theme selection (6 themes)
+- `notifications.html` - Email/push/in-app preferences
+- `storage.html` - Cloud sync configuration
+- `integrations.html` - API keys, webhooks, OAuth connections
+- `privacy.html` - Data export, account deletion
+- `billing.html` - Subscription management
+
+---
+
+## PHASE 4: MONITORING ($25,000 - 2 weeks)
+
+**Create directory:** `ui/suite/monitoring/`
+
+Files needed:
+- `index.html` - Monitoring shell
+- `services.html` - Service health grid
+- `resources.html` - CPU/Memory/Disk charts
+- `logs.html` - Real-time log viewer (WebSocket)
+- `metrics.html` - Prometheus metrics display
+- `alerts.html` - Alert rule configuration
+- `health.html` - Health check endpoints
+
+Key endpoints:
+```
+GET /api/services/status       → Service health
+GET /api/analytics/dashboard   → Dashboard metrics
+GET /api/analytics/metric      → Individual metric
+GET /metrics                   → Prometheus export
+WS  /ws/logs                   → Real-time logs
+```
+
+---
+
+## PHASE 5: AUTH ($25,000 - 2 weeks)
+
+**Enhance:** `ui/suite/auth/`
+
+- `login.html` - Add 2FA challenge flow
+- `register.html` - New user registration
+- `forgot-password.html` - Password reset request
+- `reset-password.html` - Password reset form
+
+Key endpoints:
+```
+POST /api/auth/login           → Login
+POST /api/auth/register        → Register
+POST /api/auth/2fa/verify      → Verify 2FA code
+POST /api/auth/forgot-password → Request reset
+POST /api/auth/reset-password  → Reset password
+GET  /api/auth/oauth/google    → Google OAuth
+GET  /api/auth/oauth/microsoft → Microsoft OAuth
+```
+
+---
+
+## PHASE 6: POLISH ($20,000 - 2 weeks)
+
+1. Update `base.html` navigation with all new apps
+2. Mobile responsiveness for all views
+3. ARIA labels and keyboard navigation
+4. Extract strings for i18n preparation
+5. Error states and loading indicators
+6. Comprehensive testing
+
+---
+
+## HTMX PATTERNS TO USE
+
+### Basic GET
+```html
+<div hx-get="/api/items" hx-trigger="load" hx-swap="innerHTML"></div>
+```
+
+### Search with Debounce
+```html
+<input type="search" name="q"
+       hx-get="/api/search" 
+       hx-trigger="keyup changed delay:300ms"
+       hx-target="#results">
+```
+
+### Form Submit
+```html
+<form hx-post="/api/items" hx-target="#list" hx-swap="beforeend">
+    <input name="title" required>
+    <button type="submit">Add</button>
+</form>
+```
+
+### Delete with Confirm
+```html
+<button hx-delete="/api/items/{id}" 
+        hx-confirm="Delete this item?"
+        hx-target="closest tr"
+        hx-swap="outerHTML">Delete</button>
+```
+
+### Polling
+```html
+<div hx-get="/api/status" hx-trigger="every 10s"></div>
+```
+
+### WebSocket
+```html
+<div hx-ext="ws" ws-connect="/ws/chat">
+    <div id="messages"></div>
+    <form ws-send>
+        <input name="message">
+        <button>Send</button>
+    </form>
+</div>
+```
+
+### Tabs
+```html
+<nav>
+    <button hx-get="/tab1" hx-target="#content" class="active">Tab 1</button>
+    <button hx-get="/tab2" hx-target="#content">Tab 2</button>
+</nav>
+<div id="content"></div>
+```
+
+---
+
+## FILE CREATION ORDER
+
+Week 1-2:
+1. `ui/suite/paper/paper.html`
+2. `ui/suite/research/research.html`
+
+Week 3-4:
+3. `ui/suite/sources/sources.html`
+4. `ui/suite/meet/meet.html`
+
+Week 5-6:
+5. Enhance `ui/suite/chat/chat.html` (conversations)
+6. Enhance `ui/suite/drive/index.html`
+7. Enhance `ui/suite/calendar/calendar.html`
+8. Enhance `ui/suite/mail/mail.html`
+
+Week 7-8:
+9. `ui/suite/admin/index.html`
+10. `ui/suite/admin/users.html`
+11. `ui/suite/admin/groups.html`
+12. `ui/suite/admin/dns.html`
+
+Week 9-10:
+13. `ui/suite/settings/index.html`
+14. `ui/suite/settings/profile.html`
+15. `ui/suite/settings/security.html`
+16. `ui/suite/settings/appearance.html`
+17. `ui/suite/settings/notifications.html`
+18. `ui/suite/settings/storage.html`
+19. `ui/suite/settings/integrations.html`
+20. `ui/suite/settings/privacy.html`
+
+Week 11-12:
+21. `ui/suite/monitoring/index.html`
+22. `ui/suite/monitoring/services.html`
+23. `ui/suite/monitoring/logs.html`
+24. `ui/suite/monitoring/metrics.html`
+25. `ui/suite/monitoring/alerts.html`
+
+Week 13-14:
+26. `ui/suite/auth/register.html`
+27. `ui/suite/auth/forgot-password.html`
+28. Enhance `ui/suite/auth/login.html`
+
+Week 15:
+29. Update `ui/suite/base.html` navigation
+30. Polish and testing
+
+---
+
+## SUCCESS CHECKLIST
+
+- [ ] 100+ API endpoints wired to UI
+- [ ] All CRUD operations working
+- [ ] Real-time features via WebSocket
+- [ ] Mobile responsive
+- [ ] Admin panel complete
+- [ ] Settings self-service complete
+- [ ] Monitoring operational
+- [ ] OAuth working (Google, Microsoft)
+- [ ] 2FA implemented
+- [ ] Zero custom JS where HTMX works
+- [ ] All 6 themes working
+- [ ] No compilation warnings
\ No newline at end of file
diff --git a/IMPLEMENTATION_PLAN.md b/IMPLEMENTATION_PLAN.md
new file mode 100644
index 0000000..b2122d4
--- /dev/null
+++ b/IMPLEMENTATION_PLAN.md
@@ -0,0 +1,1384 @@
+# BotUI Full Product Implementation Plan
+
+**Budget:** $200,000 USD  
+**Goal:** Complete enterprise-ready product for international market  
+**Version:** 6.1.0
+
+---
+
+## Executive Summary
+
+This document outlines the implementation of ~100+ missing API integrations in BotUI to create a complete enterprise productivity suite. All backend APIs already exist in BotServer - this work focuses purely on frontend UI integration using HTMX patterns.
+
+---
+
+## Architecture Overview
+
+```
+┌─────────────────────────────────────────────────────────────────┐
+│                        BotUI Suite                               │
+├─────────────┬─────────────┬─────────────┬─────────────┬─────────┤
+│    Apps     │   Admin     │  Settings   │  Monitoring │  Auth   │
+├─────────────┼─────────────┼─────────────┼─────────────┼─────────┤
+│ Chat        │ Users       │ Profile     │ Services    │ Login   │
+│ Drive       │ Groups      │ Theme       │ Resources   │ OAuth   │
+│ Mail        │ Permissions │ Sync        │ Logs        │ 2FA     │
+│ Calendar    │ Audit       │ Storage     │ Metrics     │ SSO     │
+│ Tasks       │ DNS         │ API Keys    │ Health      │         │
+│ Meet        │ Bots        │ Webhooks    │ Alerts      │         │
+│ Paper       │             │             │             │         │
+│ Research    │             │             │             │         │
+│ Sources     │             │             │             │         │
+│ Designer    │             │             │             │         │
+│ Analytics   │             │             │             │         │
+└─────────────┴─────────────┴─────────────┴─────────────┴─────────┘
+```
+
+---
+
+## Phase 1: Core Apps Completion ($45,000 - 3 weeks)
+
+### 1.1 Paper App - Document Editor
+**Location:** `ui/suite/paper/`  
+**Priority:** HIGH  
+**Effort:** 5 days
+
+Wire existing `/api/paper/*` endpoints:
+
+```html
+<!-- paper/paper.html -->
+<div class="paper-app">
+    <!-- Document List Sidebar -->
+    <aside class="paper-sidebar">
+        <button hx-post="/api/paper/new" hx-target="#editor-area">New Document</button>
+        <div id="doc-list" hx-get="/api/paper/list" hx-trigger="load" hx-swap="innerHTML"></div>
+        <input type="search" hx-get="/api/paper/search" hx-trigger="keyup changed delay:300ms" 
+               hx-target="#doc-list" name="q" placeholder="Search documents...">
+    </aside>
+    
+    <!-- Editor Area -->
+    <main id="editor-area">
+        <div class="editor-toolbar">
+            <button hx-post="/api/paper/save" hx-include="#editor-content">Save</button>
+            <button hx-post="/api/paper/autosave" hx-trigger="keyup changed delay:5s from:#editor-content">Autosave</button>
+        </div>
+        <div id="editor-content" contenteditable="true"></div>
+    </main>
+    
+    <!-- AI Assistant Panel -->
+    <aside class="ai-panel">
+        <button hx-post="/api/paper/ai/summarize" hx-include="#editor-content" hx-target="#ai-result">Summarize</button>
+        <button hx-post="/api/paper/ai/expand" hx-include="#editor-content" hx-target="#ai-result">Expand</button>
+        <button hx-post="/api/paper/ai/improve" hx-include="#editor-content" hx-target="#ai-result">Improve</button>
+        <button hx-post="/api/paper/ai/simplify" hx-include="#editor-content" hx-target="#ai-result">Simplify</button>
+        <button hx-post="/api/paper/ai/translate" hx-include="#editor-content" hx-target="#ai-result">Translate</button>
+        <div id="ai-result"></div>
+    </aside>
+</div>
+
+<!-- Templates Modal -->
+<dialog id="template-modal">
+    <button hx-post="/api/paper/template/blank" hx-target="#editor-area">Blank</button>
+    <button hx-post="/api/paper/template/meeting" hx-target="#editor-area">Meeting Notes</button>
+    <button hx-post="/api/paper/template/todo" hx-target="#editor-area">Todo List</button>
+    <button hx-post="/api/paper/template/research" hx-target="#editor-area">Research</button>
+</dialog>
+
+<!-- Export Menu -->
+<div class="export-menu">
+    <a hx-get="/api/paper/export/pdf" hx-include="#doc-id">Export PDF</a>
+    <a hx-get="/api/paper/export/docx" hx-include="#doc-id">Export DOCX</a>
+    <a hx-get="/api/paper/export/md" hx-include="#doc-id">Export Markdown</a>
+    <a hx-get="/api/paper/export/html" hx-include="#doc-id">Export HTML</a>
+    <a hx-get="/api/paper/export/txt" hx-include="#doc-id">Export Text</a>
+</div>
+```
+
+**API Endpoints to Wire:**
+- `POST /api/paper/new`
+- `GET /api/paper/list`
+- `GET /api/paper/search`
+- `POST /api/paper/save`
+- `POST /api/paper/autosave`
+- `GET /api/paper/{id}`
+- `POST /api/paper/{id}/delete`
+- `POST /api/paper/template/*` (blank, meeting, todo, research)
+- `POST /api/paper/ai/*` (summarize, expand, improve, simplify, translate, custom)
+- `GET /api/paper/export/*` (pdf, docx, md, html, txt)
+
+---
+
+### 1.2 Research App - Knowledge Collection
+**Location:** `ui/suite/research/`  
+**Priority:** HIGH  
+**Effort:** 4 days
+
+```html
+<!-- research/research.html -->
+<div class="research-app">
+    <aside class="collections-sidebar">
+        <button hx-post="/api/research/collections/new" hx-target="#collections-list">New Collection</button>
+        <div id="collections-list" hx-get="/api/research/collections" hx-trigger="load"></div>
+    </aside>
+    
+    <main class="research-main">
+        <!-- Search Interface -->
+        <form hx-post="/api/research/search" hx-target="#search-results">
+            <input type="text" name="query" placeholder="Search across all sources...">
+            <button type="submit">Search</button>
+        </form>
+        
+        <div id="search-results"></div>
+        
+        <!-- Quick Access -->
+        <section>
+            <h3>Recent Searches</h3>
+            <div hx-get="/api/research/recent" hx-trigger="load"></div>
+        </section>
+        
+        <section>
+            <h3>Trending Topics</h3>
+            <div hx-get="/api/research/trending" hx-trigger="load"></div>
+        </section>
+        
+        <section>
+            <h3>Suggested Prompts</h3>
+            <div hx-get="/api/research/prompts" hx-trigger="load"></div>
+        </section>
+    </main>
+    
+    <!-- Collection Detail -->
+    <aside class="collection-detail" id="collection-detail">
+        <div hx-get="/api/research/collections/{id}" hx-trigger="collection-selected"></div>
+        <button hx-get="/api/research/export-citations" hx-include="#collection-id">Export Citations</button>
+    </aside>
+</div>
+```
+
+**API Endpoints to Wire:**
+- `GET /api/research/collections`
+- `POST /api/research/collections/new`
+- `GET /api/research/collections/{id}`
+- `POST /api/research/search`
+- `GET /api/research/recent`
+- `GET /api/research/trending`
+- `GET /api/research/prompts`
+- `GET /api/research/export-citations`
+
+---
+
+### 1.3 Sources App - Knowledge Management
+**Location:** `ui/suite/sources/`  
+**Priority:** HIGH  
+**Effort:** 4 days
+
+```html
+<!-- sources/sources.html -->
+<div class="sources-app">
+    <nav class="sources-tabs">
+        <button hx-get="/api/sources/prompts" hx-target="#sources-content" class="active">Prompts</button>
+        <button hx-get="/api/sources/templates" hx-target="#sources-content">Templates</button>
+        <button hx-get="/api/sources/news" hx-target="#sources-content">News</button>
+        <button hx-get="/api/sources/mcp-servers" hx-target="#sources-content">MCP Servers</button>
+        <button hx-get="/api/sources/llm-tools" hx-target="#sources-content">LLM Tools</button>
+        <button hx-get="/api/sources/models" hx-target="#sources-content">Models</button>
+    </nav>
+    
+    <div class="sources-toolbar">
+        <input type="search" hx-get="/api/sources/search" hx-trigger="keyup changed delay:300ms"
+               hx-target="#sources-content" name="q" placeholder="Search sources...">
+    </div>
+    
+    <main id="sources-content" hx-get="/api/sources/prompts" hx-trigger="load">
+        <!-- Content loaded via HTMX -->
+    </main>
+</div>
+```
+
+**API Endpoints to Wire:**
+- `GET /api/sources/prompts`
+- `GET /api/sources/templates`
+- `GET /api/sources/news`
+- `GET /api/sources/mcp-servers`
+- `GET /api/sources/llm-tools`
+- `GET /api/sources/models`
+- `GET /api/sources/search`
+
+---
+
+### 1.4 Meet App - Video Conferencing
+**Location:** `ui/suite/meet/`  
+**Priority:** HIGH  
+**Effort:** 6 days
+
+```html
+<!-- meet/meet.html -->
+<div class="meet-app">
+    <header class="meet-header">
+        <button hx-post="/api/meet/create" hx-target="#meeting-room">Start Instant Meeting</button>
+        <button onclick="showScheduleModal()">Schedule Meeting</button>
+    </header>
+    
+    <!-- Active Rooms -->
+    <section class="rooms-list">
+        <h3>Active Rooms</h3>
+        <div hx-get="/api/meet/rooms" hx-trigger="load, every 10s" id="rooms-list"></div>
+    </section>
+    
+    <!-- Meeting Room -->
+    <main id="meeting-room" hx-ext="ws" ws-connect="/ws/meet">
+        <div class="video-grid" id="video-grid"></div>
+        
+        <div class="meeting-controls">
+            <button hx-post="/api/meet/rooms/{id}/join">Join</button>
+            <button hx-post="/api/voice/start">Unmute</button>
+            <button hx-post="/api/voice/stop">Mute</button>
+            <button hx-post="/api/meet/transcription/{id}">Start Transcription</button>
+        </div>
+        
+        <!-- Invite Participants -->
+        <form hx-post="/api/meet/invite" hx-swap="none">
+            <input type="email" name="emails" placeholder="Invite by email...">
+            <button type="submit">Send Invite</button>
+        </form>
+    </main>
+</div>
+
+<!-- Schedule Modal -->
+<dialog id="schedule-modal">
+    <form hx-post="/api/meet/create">
+        <input type="text" name="title" placeholder="Meeting Title">
+        <input type="datetime-local" name="scheduled_at">
+        <textarea name="description" placeholder="Description"></textarea>
+        <button type="submit">Schedule</button>
+    </form>
+</dialog>
+```
+
+**API Endpoints to Wire:**
+- `POST /api/meet/create`
+- `GET /api/meet/rooms`
+- `GET /api/meet/rooms/{room_id}`
+- `POST /api/meet/rooms/{room_id}/join`
+- `POST /api/meet/transcription/{room_id}`
+- `POST /api/meet/token`
+- `POST /api/meet/invite`
+- `WebSocket /ws/meet`
+
+---
+
+### 1.5 Conversations System (Chat Enhancement)
+**Location:** `ui/suite/chat/` (enhancement)  
+**Priority:** HIGH  
+**Effort:** 8 days
+
+```html
+<!-- Conversations Panel (add to chat.html) -->
+<aside class="conversations-panel">
+    <button hx-post="/conversations/create" hx-target="#conversation-list">New Conversation</button>
+    
+    <div id="conversation-list" hx-get="/conversations/list" hx-trigger="load"></div>
+</aside>
+
+<!-- Active Conversation -->
+<main class="conversation-main" hx-ext="ws" ws-connect="/ws/conversation/{id}">
+    <!-- Members -->
+    <div class="conversation-members" hx-get="/conversations/{id}/members" hx-trigger="load"></div>
+    
+    <!-- Messages -->
+    <div class="conversation-messages" id="messages" 
+         hx-get="/conversations/{id}/messages" hx-trigger="load"></div>
+    
+    <!-- Message Input -->
+    <form ws-send class="message-form">
+        <textarea name="message" placeholder="Type a message..."></textarea>
+        <button type="submit">Send</button>
+    </form>
+    
+    <!-- Message Actions (per message) -->
+    <template id="message-actions">
+        <button hx-post="/conversations/{id}/messages/{msg_id}/edit">Edit</button>
+        <button hx-post="/conversations/{id}/messages/{msg_id}/delete">Delete</button>
+        <button hx-post="/conversations/{id}/messages/{msg_id}/react">React</button>
+        <button hx-post="/conversations/{id}/messages/{msg_id}/pin">Pin</button>
+    </template>
+    
+    <!-- Call Controls -->
+    <div class="call-controls">
+        <button hx-post="/conversations/{id}/calls/start">Start Call</button>
+        <button hx-post="/conversations/{id}/calls/join">Join Call</button>
+        <button hx-post="/conversations/{id}/calls/leave">Leave Call</button>
+        <button hx-post="/conversations/{id}/calls/mute">Mute</button>
+        <button hx-post="/conversations/{id}/calls/unmute">Unmute</button>
+        <button hx-post="/conversations/{id}/screen/share">Share Screen</button>
+        <button hx-post="/conversations/{id}/screen/stop">Stop Sharing</button>
+        <button hx-post="/conversations/{id}/recording/start">Start Recording</button>
+        <button hx-post="/conversations/{id}/recording/stop">Stop Recording</button>
+    </div>
+    
+    <!-- Whiteboard -->
+    <div class="whiteboard-controls">
+        <button hx-post="/conversations/{id}/whiteboard/create">Create Whiteboard</button>
+        <button hx-post="/conversations/{id}/whiteboard/collaborate">Collaborate</button>
+    </div>
+</main>
+
+<!-- Search Messages -->
+<div class="message-search">
+    <input type="search" hx-get="/conversations/{id}/messages/search" 
+           hx-trigger="keyup changed delay:300ms" name="q">
+</div>
+```
+
+**API Endpoints to Wire (40+ endpoints):**
+- `POST /conversations/create`
+- `POST /conversations/{id}/join`
+- `POST /conversations/{id}/leave`
+- `GET /conversations/{id}/members`
+- `GET /conversations/{id}/messages`
+- `POST /conversations/{id}/messages/send`
+- `POST /conversations/{id}/messages/{msg_id}/edit`
+- `POST /conversations/{id}/messages/{msg_id}/delete`
+- `POST /conversations/{id}/messages/{msg_id}/react`
+- `POST /conversations/{id}/messages/{msg_id}/pin`
+- `GET /conversations/{id}/messages/search`
+- `POST /conversations/{id}/calls/start`
+- `POST /conversations/{id}/calls/join`
+- `POST /conversations/{id}/calls/leave`
+- `POST /conversations/{id}/calls/mute`
+- `POST /conversations/{id}/calls/unmute`
+- `POST /conversations/{id}/screen/share`
+- `POST /conversations/{id}/screen/stop`
+- `POST /conversations/{id}/recording/start`
+- `POST /conversations/{id}/recording/stop`
+- `POST /conversations/{id}/whiteboard/create`
+- `POST /conversations/{id}/whiteboard/collaborate`
+
+---
+
+### 1.6 Drive App Completion
+**Location:** `ui/suite/drive/` (enhancement)  
+**Priority:** MEDIUM  
+**Effort:** 5 days
+
+Add missing file operations:
+
+```html
+<!-- Add to drive/index.html -->
+
+<!-- File Context Menu -->
+<div id="file-context-menu" class="context-menu">
+    <button hx-post="/files/copy" hx-include="#selected-file">Copy</button>
+    <button hx-post="/files/move" hx-include="#selected-file">Move</button>
+    <button hx-get="/files/versions" hx-include="#selected-file" hx-target="#versions-modal">Versions</button>
+    <button hx-post="/files/restore" hx-include="#selected-file">Restore</button>
+    <button hx-get="/files/permissions" hx-include="#selected-file" hx-target="#permissions-modal">Permissions</button>
+</div>
+
+<!-- Sync Status Panel -->
+<div class="sync-panel">
+    <div hx-get="/files/sync/status" hx-trigger="load, every 5s" id="sync-status"></div>
+    <button hx-post="/files/sync/start">Start Sync</button>
+    <button hx-post="/files/sync/stop">Stop Sync</button>
+</div>
+
+<!-- Storage Quota -->
+<div class="storage-quota" hx-get="/files/quota" hx-trigger="load"></div>
+
+<!-- Shared Files View -->
+<div id="shared-files" hx-get="/files/shared" hx-trigger="revealed"></div>
+
+<!-- Favorites View -->
+<div id="favorites" hx-get="/files/favorite" hx-trigger="revealed"></div>
+
+<!-- Document Processing -->
+<dialog id="doc-processing-modal">
+    <form hx-post="/docs/merge" hx-include=".selected-files">
+        <button type="submit">Merge Documents</button>
+    </form>
+    <form hx-post="/docs/convert">
+        <select name="format">
+            <option value="pdf">PDF</option>
+            <option value="docx">DOCX</option>
+            <option value="html">HTML</option>
+        </select>
+        <button type="submit">Convert</button>
+    </form>
+    <form hx-post="/docs/fill" hx-include="#template-data">
+        <button type="submit">Fill Template</button>
+    </form>
+</dialog>
+```
+
+**API Endpoints to Wire:**
+- `POST /files/read`
+- `POST /files/write`
+- `POST /files/copy`
+- `POST /files/move`
+- `POST /files/shareFolder`
+- `GET /files/shared`
+- `GET /files/permissions`
+- `GET /files/quota`
+- `GET /files/sync/status`
+- `POST /files/sync/start`
+- `POST /files/sync/stop`
+- `GET /files/versions`
+- `POST /files/restore`
+- `POST /docs/merge`
+- `POST /docs/convert`
+- `POST /docs/fill`
+- `POST /docs/export`
+- `POST /docs/import`
+
+---
+
+### 1.7 Calendar App Completion
+**Location:** `ui/suite/calendar/` (enhancement)  
+**Priority:** MEDIUM  
+**Effort:** 3 days
+
+```html
+<!-- Add to calendar/calendar.html -->
+
+<!-- Event CRUD -->
+<div class="event-actions">
+    <button hx-get="/api/calendar/events/{id}" hx-target="#event-detail">View</button>
+    <button hx-put="/api/calendar/events/{id}" hx-include="#event-form">Update</button>
+    <button hx-delete="/api/calendar/events/{id}" hx-confirm="Delete this event?">Delete</button>
+</div>
+
+<!-- Import/Export -->
+<div class="calendar-io">
+    <a hx-get="/api/calendar/export.ics" download="calendar.ics">Export iCal</a>
+    <form hx-post="/api/calendar/import" hx-encoding="multipart/form-data">
+        <input type="file" name="ical" accept=".ics">
+        <button type="submit">Import iCal</button>
+    </form>
+</div>
+```
+
+**API Endpoints to Wire:**
+- `GET /api/calendar/events/{id}`
+- `PUT /api/calendar/events/{id}`
+- `DELETE /api/calendar/events/{id}`
+- `GET /api/calendar/export.ics`
+- `POST /api/calendar/import`
+
+---
+
+### 1.8 Email App Completion
+**Location:** `ui/suite/mail/` (enhancement)  
+**Priority:** MEDIUM  
+**Effort:** 4 days
+
+```html
+<!-- Add to mail/mail.html -->
+
+<!-- Account Management -->
+<div class="email-accounts" hx-get="/api/email/accounts" hx-trigger="load">
+    <button hx-get="/api/email/compose" hx-target="#compose-modal">Compose</button>
+</div>
+
+<!-- Add Account -->
+<dialog id="add-account-modal">
+    <form hx-post="/api/email/accounts/add" hx-target="#email-accounts">
+        <input type="email" name="email" placeholder="Email address">
+        <input type="password" name="password" placeholder="Password">
+        <select name="provider">
+            <option value="gmail">Gmail</option>
+            <option value="outlook">Outlook</option>
+            <option value="imap">Custom IMAP</option>
+        </select>
+        <button type="submit">Add Account</button>
+    </form>
+</dialog>
+
+<!-- Compose Email -->
+<dialog id="compose-modal">
+    <form hx-post="/api/email/send" hx-swap="none">
+        <input type="email" name="to" placeholder="To">
+        <input type="email" name="cc" placeholder="Cc">
+        <input type="text" name="subject" placeholder="Subject">
+        <textarea name="body"></textarea>
+        <button type="submit">Send</button>
+        <button type="button" hx-post="/api/email/draft">Save Draft</button>
+    </form>
+</dialog>
+
+<!-- Tracking Stats -->
+<div class="tracking-stats" hx-get="/api/email/tracking/stats" hx-trigger="load"></div>
+```
+
+**API Endpoints to Wire:**
+- `GET /api/email/accounts`
+- `POST /api/email/accounts/add`
+- `DELETE /api/email/accounts/{account_id}`
+- `GET /api/email/compose`
+- `POST /api/email/send`
+- `POST /api/email/draft`
+- `GET /api/email/folders/{account_id}`
+- `GET /api/email/tracking/stats`
+- `GET /api/email/tracking/status/{tracking_id}`
+
+---
+
+## Phase 2: Admin Panel ($55,000 - 4 weeks)
+
+### 2.1 User Management
+**Location:** `ui/suite/admin/users.html`  
+**Priority:** CRITICAL  
+**Effort:** 8 days
+
+```html
+<!-- admin/users.html -->
+<div class="admin-users">
+    <header class="admin-header">
+        <h1>User Management</h1>
+        <button hx-get="/users/create" hx-target="#user-modal-content">Add User</button>
+    </header>
+    
+    <!-- User Search & Filter -->
+    <div class="user-filters">
+        <input type="search" hx-get="/users/search" hx-trigger="keyup changed delay:300ms"
+               hx-target="#users-table" name="q" placeholder="Search users...">
+        <select hx-get="/users/list" hx-target="#users-table" name="status">
+            <option value="">All Status</option>
+            <option value="active">Active</option>
+            <option value="inactive">Inactive</option>
+            <option value="suspended">Suspended</option>
+        </select>
+    </div>
+    
+    <!-- Users Table -->
+    <table class="data-table">
+        <thead>
+            <tr>
+                <th>User</th>
+                <th>Email</th>
+                <th>Role</th>
+                <th>Status</th>
+                <th>Actions</th>
+            </tr>
+        </thead>
+        <tbody id="users-table" hx-get="/users/list" hx-trigger="load"></tbody>
+    </table>
+    
+    <!-- User Modal -->
+    <dialog id="user-modal">
+        <div id="user-modal-content"></div>
+    </dialog>
+</div>
+
+<!-- User Form Template (returned by server) -->
+<template id="user-form">
+    <form hx-post="/users/create" hx-target="#users-table">
+        <input type="text" name="name" placeholder="Full Name" required>
+        <input type="email" name="email" placeholder="Email" required>
+        <select name="role">
+            <option value="user">User</option>
+            <option value="admin">Admin</option>
+            <option value="manager">Manager</option>
+        </select>
+        <button type="submit">Create User</button>
+    </form>
+</template>
+
+<!-- User Detail View -->
+<div class="user-detail" id="user-detail">
+    <div hx-get="/users/{user_id}/profile" hx-trigger="user-selected"></div>
+    
+    <div class="user-tabs">
+        <button hx-get="/users/{user_id}/settings" hx-target="#user-tab-content">Settings</button>
+        <button hx-get="/users/{user_id}/permissions" hx-target="#user-tab-content">Permissions</button>
+        <button hx-get="/users/{user_id}/roles" hx-target="#user-tab-content">Roles</button>
+        <button hx-get="/users/{user_id}/activity" hx-target="#user-tab-content">Activity</button>
+        <button hx-get="/users/{user_id}/presence" hx-target="#user-tab-content">Presence</button>
+    </div>
+    
+    <div id="user-tab-content"></div>
+    
+    <!-- User Actions -->
+    <div class="user-actions">
+        <button hx-put="/users/{user_id}/update" hx-include="#user-form">Save Changes</button>
+        <button hx-delete="/users/{user_id}/delete" hx-confirm="Delete this user?">Delete User</button>
+    </div>
+    
+    <!-- Security Section -->
+    <div class="user-security">
+        <h3>Security</h3>
+        <button hx-post="/users/{user_id}/security/2fa/enable">Enable 2FA</button>
+        <button hx-post="/users/{user_id}/security/2fa/disable">Disable 2FA</button>
+        <div hx-get="/users/{user_id}/security/devices" hx-trigger="load">Devices</div>
+        <div hx-get="/users/{user_id}/security/sessions" hx-trigger="load">Sessions</div>
+    </div>
+    
+    <!-- Notifications -->
+    <div class="user-notifications">
+        <h3>Notification Preferences</h3>
+        <form hx-post="/users/{user_id}/notifications/preferences/update">
+            <!-- Notification settings -->
+        </form>
+    </div>
+</div>
+```
+
+**API Endpoints to Wire:**
+- `POST /users/create`
+- `PUT /users/{user_id}/update`
+- `DELETE /users/{user_id}/delete`
+- `GET /users/list`
+- `GET /users/search`
+- `GET /users/{user_id}/profile`
+- `GET /users/{user_id}/settings`
+- `GET /users/{user_id}/permissions`
+- `GET /users/{user_id}/roles`
+- `GET /users/{user_id}/status`
+- `GET /users/{user_id}/presence`
+- `GET /users/{user_id}/activity`
+- `POST /users/{user_id}/security/2fa/enable`
+- `POST /users/{user_id}/security/2fa/disable`
+- `GET /users/{user_id}/security/devices`
+- `GET /users/{user_id}/security/sessions`
+- `POST /users/{user_id}/notifications/preferences/update`
+
+---
+
+### 2.2 Group Management
+**Location:** `ui/suite/admin/groups.html`  
+**Priority:** CRITICAL  
+**Effort:** 6 days
+
+```html
+<!-- admin/groups.html -->
+<div class="admin-groups">
+    <header class="admin-header">
+        <h1>Group Management</h1>
+        <button hx-post="/groups/create" hx-target="#groups-list">Create Group</button>
+    </header>
+    
+    <!-- Groups List -->
+    <div class="groups-grid" id="groups-list" hx-get="/groups/list" hx-trigger="load"></div>
+    
+    <!-- Group Search -->
+    <input type="search" hx-get="/groups/search" hx-trigger="keyup changed delay:300ms"
+           hx-target="#groups-list" name="q" placeholder="Search groups...">
+    
+    <!-- Group Detail -->
+    <aside class="group-detail" id="group-detail">
+        <div class="group-info"></div>
+        
+        <!-- Members -->
+        <section class="group-members">
+            <h3>Members</h3>
+            <div hx-get="/groups/{group_id}/members" hx-trigger="group-selected"></div>
+            <form hx-post="/groups/{group_id}/members/add">
+                <input type="text" name="user_id" placeholder="Add member...">
+                <button type="submit">Add</button>
+            </form>
+        </section>
+        
+        <!-- Member Roles -->
+        <form hx-post="/groups/{group_id}/members/roles">
+            <select name="role">
+                <option value="member">Member</option>
+                <option value="moderator">Moderator</option>
+                <option value="admin">Admin</option>
+            </select>
+            <button type="submit">Update Role</button>
+        </form>
+        
+        <!-- Group Settings -->
+        <section class="group-settings">
+            <div hx-get="/groups/{group_id}/settings" hx-trigger="load"></div>
+            <div hx-get="/groups/{group_id}/permissions" hx-trigger="load"></div>
+            <div hx-get="/groups/{group_id}/analytics" hx-trigger="load"></div>
+        </section>
+        
+        <!-- Join Requests -->
+        <section class="join-requests">
+            <h3>Join Requests</h3>
+            <div hx-get="/groups/{group_id}/join/requests" hx-trigger="load"></div>
+            <button hx-post="/groups/{group_id}/join/approve">Approve</button>
+            <button hx-post="/groups/{group_id}/join/reject">Reject</button>
+        </section>
+        
+        <!-- Invites -->
+        <section class="group-invites">
+            <h3>Invites</h3>
+            <form hx-post="/groups/{group_id}/invites/send">
+                <input type="email" name="email" placeholder="Email to invite">
+                <button type="submit">Send Invite</button>
+            </form>
+            <div hx-get="/groups/{group_id}/invites/list" hx-trigger="load"></div>
+        </section>
+        
+        <!-- Group Actions -->
+        <div class="group-actions">
+            <button hx-put="/groups/{group_id}/update" hx-include="#group-form">Save</button>
+            <button hx-delete="/groups/{group_id}/delete" hx-confirm="Delete group?">Delete</button>
+        </div>
+    </aside>
+</div>
+```
+
+**API Endpoints to Wire:**
+- `POST /groups/create`
+- `PUT /groups/{group_id}/update`
+- `DELETE /groups/{group_id}/delete`
+- `GET /groups/list`
+- `GET /groups/search`
+- `GET /groups/{group_id}/members`
+- `POST /groups/{group_id}/members/add`
+- `POST /groups/{group_id}/members/roles`
+- `DELETE /groups/{group_id}/members/remove`
+- `GET /groups/{group_id}/permissions`
+- `GET /groups/{group_id}/settings`
+- `GET /groups/{group_id}/analytics`
+- `POST /groups/{group_id}/join/request`
+- `POST /groups/{group_id}/join/approve`
+- `POST /groups/{group_id}/join/reject`
+- `POST /groups/{group_id}/invites/send`
+- `GET /groups/{group_id}/invites/list`
+
+---
+
+### 2.3 DNS Management
+**Location:** `ui/suite/admin/dns.html`  
+**Priority:** MEDIUM  
+**Effort:** 2 days
+
+```html
+<!-- admin/dns.html -->
+<div class="admin-dns">
+    <header class="admin-header">
+        <h1>Dynamic DNS Management</h1>
+    </header>
+    
+    <!-- Register Hostname -->
+    <section class="dns-register">
+        <h2>Register Hostname</h2>
+        <form hx-post="/api/dns/register" hx-target="#dns-result">
+            <input type="text" name="hostname" placeholder="subdomain.yourdomain.com" required>
+            <input type="text" name="ip" placeholder="IP Address (leave empty for auto-detect)">
+            <select name="type">
+                <option value="A">A Record</option>
+                <option value="AAAA">AAAA Record</option>
+                <option value="CNAME">CNAME</option>
+            </select>
+            <button type="submit">Register</button>
+        </form>
+    </section>
+    
+    <!-- Registered Hostnames -->
+    <section class="dns-list">
+        <h2>Registered Hostnames</h2>
+        <div id="dns-list" hx-get="/api/dns/list" hx-trigger="load"></div>
+    </section>
+    
+    <!-- Remove Hostname -->
+    <form hx-post="/api/dns/remove" hx-target="#dns-result">
+        <input type="text" name="hostname" placeholder="Hostname to remove">
+        <button type="submit" class="btn-danger">Remove</button>
+    </form>
+    
+    <div id="dns-result"></div>
+</div>
+```
+
+**API Endpoints to Wire:**
+- `POST /api/dns/register`
+- `POST /api/dns/remove`
+
+---
+
+### 2.4 Admin Dashboard & Navigation
+**Location:** `ui/suite/admin/index.html`  
+**Priority:** HIGH  
+**Effort:** 3 days
+
+```html
+<!-- admin/index.html -->
+<div class="admin-layout">
+    <aside class="admin-sidebar">
+        <nav class="admin-nav">
+            <a hx-get="/admin/dashboard" hx-target="#admin-content" class="active">
+                <svg><!-- Dashboard icon --></svg>
+                Dashboard
+            </a>
+            <a hx-get="/admin/users" hx-target="#admin-content">
+                <svg><!-- Users icon --></svg>
+                Users
+            </a>
+            <a hx-get="/admin/groups" hx-target="#admin-content">
+                <svg><!-- Groups icon --></svg>
+                Groups
+            </a>
+            <a hx-get="/admin/bots" hx-target="#admin-content">
+                <svg><!-- Bot icon --></svg>
+                Bots
+            </a>
+            <a hx-get="/admin/dns" hx-target="#admin-content">
+                <svg><!-- DNS icon --></svg>
+                DNS
+            </a>
+            <a hx-get="/admin/audit" hx-target="#admin-content">
+                <svg><!-- Audit icon --></svg>
+                Audit Log
+            </a>
+            <a hx-get="/admin/billing" hx-target="#admin-content">
+                <svg><!-- Billing icon --></svg>
+                Billing
+            </a>
+        </nav>
+    </aside>
+    
+    <main id="admin-content" hx-get="/admin/dashboard" hx-trigger="load">
+        <!-- Admin content loaded here -->
+    </main>
+</div>
+```
+
+---
+
+## Phase 3: Settings Enhancement ($30,000 - 2 weeks)
+
+### 3.1 Settings Subviews Structure
+**Location:** `ui/suite/settings/`  
+**Priority:** HIGH  
+**Effort:** 10 days
+
+```
+ui/suite/settings/
+├── index.html          # Settings shell with navigation
+├── profile.html        # User profile settings
+├── security.html       # 2FA, sessions, devices
+├── appearance.html     # Theme, layout preferences
+├── notifications.html  # Email, push, in-app
+├── storage.html        # Cloud sync, quotas
+├── integrations.html   # API keys, webhooks, OAuth
+├── privacy.html        # Data export, deletion
+└── billing.html        # Subscription, invoices
+```
+
+```html
+<!-- settings/index.html -->
+<div class="settings-layout">
+    <aside class="settings-nav">
+        <a hx-get="/settings/profile" hx-target="#settings-content" class="active">Profile</a>
+        <a hx-get="/settings/security" hx-target="#settings-content">Security</a>
+        <a hx-get="/settings/appearance" hx-target="#settings-content">Appearance</a>
+        <a hx-get="/settings/notifications" hx-target="#settings-content">Notifications</a>
+        <a hx-get="/settings/storage" hx-target="#settings-content">Storage & Sync</a>
+        <a hx-get="/settings/integrations" hx-target="#settings-content">Integrations</a>
+        <a hx-get="/settings/privacy" hx-target="#settings-content">Privacy</a>
+        <a hx-get="/settings/billing" hx-target="#settings-content">Billing</a>
+    </aside>
+    
+    <main id="settings-content" hx-get="/settings/profile" hx-trigger="load">
+        <!-- Settings content loaded here -->
+    </main>
+</div>
+
+<!-- settings/security.html -->
+<div class="settings-section">
+    <h2>Security Settings</h2>
+    
+    <!-- Two-Factor Authentication -->
+    <div class="setting-card">
+        <h3>Two-Factor Authentication</h3>
+        <div hx-get="/api/user/2fa/status" hx-trigger="load" id="2fa-status"></div>
+        <button hx-post="/api/user/2fa/enable" hx-target="#2fa-setup">Enable 2FA</button>
+        <div id="2fa-setup"></div>
+    </div>
+    
+    <!-- Active Sessions -->
+    <div class="setting-card">
+        <h3>Active Sessions</h3>
+        <div hx-get="/api/user/sessions" hx-trigger="load" id="sessions-list"></div>
+        <button hx-post="/api/user/sessions/revoke-all" hx-confirm="Sign out all other devices?">
+            Sign Out All Other Devices
+        </button>
+    </div>
+    
+    <!-- Connected Devices -->
+    <div class="setting-card">
+        <h3>Connected Devices</h3>
+        <div hx-get="/api/user/devices" hx-trigger="load" id="devices-list"></div>
+    </div>
+    
+    <!-- Password Change -->
+    <div class="setting-card">
+        <h3>Change Password</h3>
+        <form hx-post="/api/user/password/change" hx-swap="none">
+            <input type="password" name="current" placeholder="Current Password" required>
+            <input type="password" name="new" placeholder="New Password" required>
+            <input type="password" name="confirm" placeholder="Confirm New Password" required>
+            <button type="submit">Update Password</button>
+        </form>
+    </div>
+</div>
+
+<!-- settings/integrations.html -->
+<div class="settings-section">
+    <h2>Integrations</h2>
+    
+    <!-- API Keys -->
+    <div class="setting-card">
+        <h3>API Keys</h3>
+        <div hx-get="/api/user/api-keys" hx-trigger="load" id="api-keys-list"></div>
+        <form hx-post="/api/user/api-keys/create" hx-target="#api-keys-list" hx-swap="beforeend">
+            <input type="text" name="name" placeholder="Key Name" required>
+            <select name="scope">
+                <option value="read">Read Only</option>
+                <option value="write">Read/Write</option>
+                <option value="admin">Full Access</option>
+            </select>
+            <button type="submit">Generate Key</button>
+        </form>
+    </div>
+    
+    <!-- Webhooks -->
+    <div class="setting-card">
+        <h3>Webhooks</h3>
+        <div hx-get="/api/user/webhooks" hx-trigger="load" id="webhooks-list"></div>
+        <form hx-post="/api/user/webhooks/create" hx-target="#webhooks-list">
+            <input type="url" name="url" placeholder="Webhook URL" required>
+            <select name="events" multiple>
+                <option value="message.created">New Message</option>
+                <option value="file.uploaded">File Uploaded</option>
+                <option value="meeting.started">Meeting Started</option>
+            </select>
+            <button type="submit">Add Webhook</button>
+        </form>
+    </div>
+    
+    <!-- OAuth Connections -->
+    <div class="setting-card">
+        <h3>Connected Accounts</h3>
+        <div class="oauth-providers">
+            <button hx-get="/api/auth/oauth/google" class="oauth-btn google">Connect Google</button>
+            <button hx-get="/api/auth/oauth/microsoft" class="oauth-btn microsoft">Connect Microsoft</button>
+            <button hx-get="/api/auth/oauth/github" class="oauth-btn github">Connect GitHub</button>
+        </div>
+        <div hx-get="/api/user/oauth/connections" hx-trigger="load" id="oauth-connections"></div>
+    </div>
+</div>
+```
+
+---
+
+## Phase 4: Monitoring Enhancement ($25,000 - 2 weeks)
+
+### 4.1 Monitoring Subviews
+**Location:** `ui/suite/monitoring/`  
+**Priority:** HIGH  
+**Effort:** 8 days
+
+```
+ui/suite/monitoring/
+├── index.html          # Main monitoring dashboard
+├── services.html       # Service health status
+├── resources.html      # CPU, Memory, Disk
+├── logs.html           # Real-time logs viewer
+├── metrics.html        # Prometheus metrics
+├── alerts.html         # Alert configuration
+└── health.html         # Health check endpoints
+```
+
+```html
+<!-- monitoring/services.html -->
+<div class="monitoring-services">
+    <h2>Service Health</h2>
+    
+    <!-- Service Status Grid -->
+    <div class="services-grid" hx-get="/api/services/status" hx-trigger="load, every 10s">
+        <!-- Rendered by server -->
+    </div>
+    
+    <!-- Individual Service Details -->
+    <div class="service-details" id="service-details"></div>
+</div>
+
+<!-- monitoring/logs.html -->
+<div class="monitoring-logs" hx-ext="ws" ws-connect="/ws/logs">
+    <div class="log-filters">
+        <select name="level" hx-get="/api/logs" hx-trigger="change" hx-target="#log-stream">
+            <option value="all">All Levels</option>
+            <option value="error">Error</option>
+            <option value="warn">Warning</option>
+            <option value="info">Info</option>
+            <option value="debug">Debug</option>
+        </select>
+        <select name="service" hx-get="/api/logs" hx-trigger="change" hx-target="#log-stream">
+            <option value="all">All Services</option>
+            <option value="api">API Server</option>
+            <option value="worker">Workers</option>
+            <option value="database">Database</option>
+        </select>
+    </div>
+    
+    <div id="log-stream" class="log-stream">
+        <!-- Real-time logs via WebSocket -->
+    </div>
+</div>
+
+<!-- monitoring/metrics.html -->
+<div class="monitoring-metrics">
+    <h2>System Metrics</h2>
+    
+    <!-- Core Metrics -->
+    <div class="metrics-grid">
+        <div class="metric-card" hx-get="/api/analytics/dashboard" hx-trigger="load, every 30s">
+            <!-- Dashboard metrics -->
+        </div>
+        <div class="metric-card" hx-get="/api/analytics/metric?name=cpu" hx-trigger="load, every 5s">
+            <!-- CPU metrics -->
+        </div>
+        <div class="metric-card" hx-get="/api/analytics/metric?name=memory" hx-trigger="load, every 5s">
+            <!-- Memory metrics -->
+        </div>
+        <div class="metric-card" hx-get="/api/analytics/metric?name=disk" hx-trigger="load, every 30s">
+            <!-- Disk metrics -->
+        </div>
+    </div>
+    
+    <!-- Prometheus Export -->
+    <a href="/metrics" target="_blank" class="btn">View Raw Metrics</a>
+</div>
+
+<!-- monitoring/alerts.html -->
+<div class="monitoring-alerts">
+    <h2>Alert Configuration</h2>
+    
+    <!-- Active Alerts -->
+    <div class="active-alerts" hx-get="/api/alerts/active" hx-trigger="load, every 30s">
+        <!-- Active alerts list -->
+    </div>
+    
+    <!-- Alert Rules -->
+    <div class="alert-rules" hx-get="/api/alerts/rules" hx-trigger="load">
+        <!-- Alert rules list -->
+    </div>
+    
+    <!-- Create Alert Rule -->
+    <form hx-post="/api/alerts/rules/create" hx-target=".alert-rules">
+        <input type="text" name="name" placeholder="Alert Name" required>
+        <select name="metric">
+            <option value="cpu">CPU Usage</option>
+            <option value="memory">Memory Usage</option>
+            <option value="disk">Disk Usage</option>
+            <option value="errors">Error Rate</option>
+            <option value="latency">Response Latency</option>
+        </select>
+        <select name="condition">
+            <option value="gt">Greater Than</option>
+            <option value="lt">Less Than</option>
+            <option value="eq">Equals</option>
+        </select>
+        <input type="number" name="threshold" placeholder="Threshold" required>
+        <select name="notify">
+            <option value="email">Email</option>
+            <option value="slack">Slack</option>
+            <option value="webhook">Webhook</option>
+        </select>
+        <button type="submit">Create Alert</button>
+    </form>
+</div>
+```
+
+**API Endpoints to Wire:**
+- `GET /api/services/status`
+- `GET /api/analytics/dashboard`
+- `GET /api/analytics/metric`
+- `GET /metrics`
+- `WebSocket /ws/logs`
+
+---
+
+## Phase 5: Authentication & Security ($25,000 - 2 weeks)
+
+### 5.1 Complete Auth Flow
+**Location:** `ui/suite/auth/`  
+**Priority:** CRITICAL  
+**Effort:** 8 days
+
+```html
+<!-- auth/login.html (enhance existing) -->
+<div class="auth-page">
+    <div class="auth-card">
+        <h1>Sign In</h1>
+        
+        <!-- Standard Login -->
+        <form hx-post="/api/auth/login" hx-target="#auth-result">
+            <input type="email" name="email" placeholder="Email" required>
+            <input type="password" name="password" placeholder="Password" required>
+            <button type="submit">Sign In</button>
+        </form>
+        
+        <!-- OAuth Providers -->
+        <div class="oauth-buttons">
+            <button hx-get="/api/auth/oauth/google" class="oauth-btn google">
+                Continue with Google
+            </button>
+            <button hx-get="/api/auth/oauth/microsoft" class="oauth-btn microsoft">
+                Continue with Microsoft
+            </button>
+        </div>
+        
+        <!-- 2FA Challenge (shown when required) -->
+        <div id="2fa-challenge" style="display: none;">
+            <form hx-post="/api/auth/2fa/verify" hx-target="#auth-result">
+                <input type="text" name="code" placeholder="2FA Code" maxlength="6" required>
+                <button type="submit">Verify</button>
+            </form>
+        </div>
+        
+        <div id="auth-result"></div>
+        
+        <!-- Links -->
+        <div class="auth-links">
+            <a href="/auth/forgot-password">Forgot Password?</a>
+            <a href="/auth/register">Create Account</a>
+        </div>
+    </div>
+</div>
+
+<!-- auth/register.html -->
+<div class="auth-page">
+    <div class="auth-card">
+        <h1>Create Account</h1>
+        
+        <form hx-post="/api/auth/register" hx-target="#register-result">
+            <input type="text" name="name" placeholder="Full Name" required>
+            <input type="email" name="email" placeholder="Email" required>
+            <input type="password" name="password" placeholder="Password" required>
+            <input type="password" name="password_confirm" placeholder="Confirm Password" required>
+            <label>
+                <input type="checkbox" name="terms" required>
+                I agree to the Terms of Service
+            </label>
+            <button type="submit">Create Account</button>
+        </form>
+        
+        <div id="register-result"></div>
+    </div>
+</div>
+
+<!-- auth/forgot-password.html -->
+<div class="auth-page">
+    <div class="auth-card">
+        <h1>Reset Password</h1>
+        
+        <form hx-post="/api/auth/forgot-password" hx-target="#reset-result">
+            <input type="email" name="email" placeholder="Email" required>
+            <button type="submit">Send Reset Link</button>
+        </form>
+        
+        <div id="reset-result"></div>
+    </div>
+</div>
+
+<!-- auth/reset-password.html -->
+<div class="auth-page">
+    <div class="auth-card">
+        <h1>Set New Password</h1>
+        
+        <form hx-post="/api/auth/reset-password" hx-target="#reset-result">
+            <input type="hidden" name="token" value="{{ token }}">
+            <input type="password" name="password" placeholder="New Password" required>
+            <input type="password" name="password_confirm" placeholder="Confirm Password" required>
+            <button type="submit">Reset Password</button>
+        </form>
+        
+        <div id="reset-result"></div>
+    </div>
+</div>
+```
+
+---
+
+## Phase 6: Polish & Integration ($20,000 - 2 weeks)
+
+### 6.1 Navigation Updates
+Update `base.html` to include all new apps and admin sections:
+
+```html
+<!-- Add to base.html navigation -->
+<nav class="app-nav">
+    <!-- Existing Apps -->
+    <a hx-get="/chat/chat.html" hx-target="#main-content">Chat</a>
+    <a hx-get="/drive/index.html" hx-target="#main-content">Drive</a>
+    <a hx-get="/mail/mail.html" hx-target="#main-content">Mail</a>
+    <a hx-get="/calendar/calendar.html" hx-target="#main-content">Calendar</a>
+    <a hx-get="/tasks/tasks.html" hx-target="#main-content">Tasks</a>
+    
+    <!-- New Apps -->
+    <a hx-get="/meet/meet.html" hx-target="#main-content">Meet</a>
+    <a hx-get="/paper/paper.html" hx-target="#main-content">Paper</a>
+    <a hx-get="/research/research.html" hx-target="#main-content">Research</a>
+    <a hx-get="/sources/sources.html" hx-target="#main-content">Sources</a>
+    
+    <!-- Tools -->
+    <a hx-get="/designer.html" hx-target="#main-content">Designer</a>
+    <a hx-get="/analytics/analytics.html" hx-target="#main-content">Analytics</a>
+    
+    <!-- Admin (role-based visibility) -->
+    <a hx-get="/admin/index.html" hx-target="#main-content" class="admin-only">Admin</a>
+    
+    <!-- User Menu -->
+    <a hx-get="/settings/index.html" hx-target="#main-content">Settings</a>
+    <a hx-get="/monitoring/index.html" hx-target="#main-content">Monitoring</a>
+</nav>
+```
+
+### 6.2 Mobile Responsiveness
+- Ensure all new views are mobile-friendly
+- Add touch-friendly controls for Meet
+- Responsive tables for Admin views
+
+### 6.3 Accessibility
+- ARIA labels on all interactive elements
+- Keyboard navigation support
+- Screen reader compatibility
+
+### 6.4 Internationalization Preparation
+- Extract all strings to translation files
+- RTL layout support
+- Date/time localization
+
+---
+
+## File Structure Summary
+
+```
+botui/ui/suite/
+├── admin/
+│   ├── index.html           # Admin dashboard shell
+│   ├── users.html           # User management
+│   ├── groups.html          # Group management
+│   ├── dns.html             # DNS management
+│   ├── bots.html            # Bot management
+│   ├── audit.html           # Audit logs
+│   └── billing.html         # Billing/subscription
+├── auth/
+│   ├── login.html           # Enhanced login
+│   ├── register.html        # Registration
+│   ├── forgot-password.html # Password reset request
+│   └── reset-password.html  # Password reset form
+├── settings/
+│   ├── index.html           # Settings shell
+│   ├── profile.html         # Profile settings
+│   ├── security.html        # Security settings
+│   ├── appearance.html      # Theme settings
+│   ├── notifications.html   # Notification prefs
+│   ├── storage.html         # Storage & sync
+│   ├── integrations.html    # API keys, webhooks
+│   ├── privacy.html         # Privacy settings
+│   └── billing.html         # User billing
+├── monitoring/
+│   ├── index.html           # Monitoring shell
+│   ├── services.html        # Service health
+│   ├── resources.html       # System resources
+│   ├── logs.html            # Log viewer
+│   ├── metrics.html         # Metrics dashboard
+│   ├── alerts.html          # Alert config
+│   └── health.html          # Health checks
+├── paper/
+│   └── paper.html           # Document editor
+├── research/
+│   └── research.html        # Research collections
+├── sources/
+│   └── sources.html         # Knowledge sources
+├── meet/
+│   └── meet.html            # Video conferencing
+├── chat/
+│   └── conversations.html   # Enhanced conversations
+├── drive/
+│   └── index.html           # Enhanced (add file ops)
+├── calendar/
+│   └── calendar.html        # Enhanced (add CRUD)
+└── mail/
+    └── mail.html            # Enhanced (add compose)
+```
+
+---
+
+## Budget Breakdown
+
+| Phase | Description | Duration | Cost |
+|-------|-------------|----------|------|
+| 1 | Core Apps (Paper, Research, Sources, Meet, Conversations, Drive, Calendar, Email) | 3 weeks | $45,000 |
+| 2 | Admin Panel (Users, Groups, DNS, Dashboard) | 4 weeks | $55,000 |
+| 3 | Settings Enhancement | 2 weeks | $30,000 |
+| 4 | Monitoring Enhancement | 2 weeks | $25,000 |
+| 5 | Authentication & Security | 2 weeks | $25,000 |
+| 6 | Polish & Integration | 2 weeks | $20,000 |
+| **Total** | | **15 weeks** | **$200,000** |
+
+---
+
+## Technical Requirements
+
+### Developer Skills Required
+- Rust (Axum, Askama templates)
+- HTMX patterns
+- HTML5/CSS3 (responsive design)
+- WebSocket integration
+- OAuth 2.0 / OpenID Connect
+
+### Development Environment
+- Rust 1.90.0+
+- Node.js (for build tools only)
+- PostgreSQL
+- Redis
+- MinIO
+
+### Quality Standards
+- Zero warnings in Rust compilation
+- All HTMX patterns - minimal JavaScript
+- Local assets only (no CDN)
+- Mobile-responsive design
+- WCAG 2.1 AA accessibility
+- Comprehensive error handling
+
+---
+
+## Recommended Implementation Order
+
+1. **Week 1-2:** Paper App + Research App (high user value)
+2. **Week 3-4:** Sources App + Meet App (completes productivity suite)
+3. **Week 5-6:** Conversations System (enhances Chat)
+4. **Week 7-8:** User Management + Group Management (admin critical)
+5. **Week 9-10:** Settings Enhancement (user self-service)
+6. **Week 11-12:** Monitoring Enhancement (ops critical)
+7. **Week 13-14:** Auth Enhancement + DNS (security)
+8. **Week 15:** Polish, Testing, Documentation
+
+---
+
+## Success Criteria
+
+- [ ] All 100+ API endpoints wired to UI
+- [ ] Full CRUD operations for all entities
+- [ ] Real-time updates via WebSocket where applicable
+- [ ] Mobile-responsive on all views
+- [ ] Admin panel fully functional
+- [ ] User self-service settings complete
+- [ ] Monitoring dashboard operational
+- [ ] OAuth providers working (Google, Microsoft)
+- [ ] 2FA implementation complete
+- [ ] Zero JavaScript where HTMX suffices
+- [ ] Production-ready error handling
+- [ ] Internationalization-ready strings
+
+---
+
+## Notes for Developers
+
+1. **HTMX First:** Always prefer HTMX attributes over custom JavaScript
+2. **Server Rendering:** All dynamic content rendered server-side via Askama
+3. **Local Assets:** Never use CDN - all vendor JS/CSS in `ui/suite/js/vendor/`
+4. **Icons:** Use existing icons from `ui/suite/assets/icons/` - never generate new ones
+5. **Themes:** Respect the 6-theme system via CSS variables
+6. **Error Handling:** Let errors bubble up - no silent failures
+7. **Version:** All work targets version 6.1.0
\ No newline at end of file
diff --git a/PROMPT.md b/PROMPT.md
index cf5c7a7..5dd7e58 100644
--- a/PROMPT.md
+++ b/PROMPT.md
@@ -5,6 +5,19 @@
 
 ---
 
+## Version Management - CRITICAL
+
+**Current version is 6.1.0 - DO NOT CHANGE without explicit approval!**
+
+### Rules
+
+1. **Version is 6.1.0 across ALL workspace crates**
+2. **NEVER change version without explicit user approval**
+3. **BotUI does not have migrations - all migrations are in botserver/**
+4. **All workspace crates share version 6.1.0**
+
+---
+
 ## Official Icons - MANDATORY
 
 **NEVER generate icons with LLM. ALWAYS use official SVG icons from:**
@@ -363,4 +376,6 @@ ui/minimal/index.html # Minimal chat UI
 - **cargo audit**: Must pass with 0 warnings
 - **No business logic**: All logic in botserver
 - **Feature gates**: Unused code never compiles
-- **HTML responses**: Server returns fragments, not JSON
\ No newline at end of file
+- **HTML responses**: Server returns fragments, not JSON
+- **Version**: Always 6.1.0 - do not change without approval
+- **Theme system**: Use data-theme attribute on body, 6 themes available
\ No newline at end of file
diff --git a/ui/suite/admin/dns.html b/ui/suite/admin/dns.html
new file mode 100644
index 0000000..5b9fc0e
--- /dev/null
+++ b/ui/suite/admin/dns.html
@@ -0,0 +1,791 @@
+<div class="dns-view">
+    <div class="page-header">
+        <div class="header-left">
+            <h1>DNS Management</h1>
+            <p class="subtitle">Register and manage DNS hostnames for your bots</p>
+        </div>
+        <div class="header-actions">
+            <button class="btn-primary" onclick="document.getElementById('register-dns-modal').showModal()">
+                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                    <circle cx="12" cy="12" r="10"></circle>
+                    <line x1="12" y1="8" x2="12" y2="16"></line>
+                    <line x1="8" y1="12" x2="16" y2="12"></line>
+                </svg>
+                Register Hostname
+            </button>
+        </div>
+    </div>
+
+    <!-- DNS Records Table -->
+    <div class="table-container">
+        <div class="table-header">
+            <h2>Registered Hostnames</h2>
+            <div class="table-actions">
+                <div class="search-box">
+                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                        <circle cx="11" cy="11" r="8"></circle>
+                        <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
+                    </svg>
+                    <input type="text"
+                           placeholder="Search hostnames..."
+                           name="q"
+                           hx-get="/api/dns/search"
+                           hx-trigger="keyup changed delay:300ms"
+                           hx-target="#dns-table-body"
+                           hx-swap="innerHTML">
+                </div>
+                <button class="btn-secondary"
+                        hx-get="/api/dns/list"
+                        hx-target="#dns-table-body"
+                        hx-swap="innerHTML">
+                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                        <polyline points="23 4 23 10 17 10"></polyline>
+                        <path d="M20.49 15a9 9 0 1 1-2.12-9.36L23 10"></path>
+                    </svg>
+                    Refresh
+                </button>
+            </div>
+        </div>
+        <table class="data-table">
+            <thead>
+                <tr>
+                    <th>Hostname</th>
+                    <th>Type</th>
+                    <th>Target/IP</th>
+                    <th>TTL</th>
+                    <th>Status</th>
+                    <th>Created</th>
+                    <th>Actions</th>
+                </tr>
+            </thead>
+            <tbody id="dns-table-body"
+                   hx-get="/api/dns/list"
+                   hx-trigger="load"
+                   hx-swap="innerHTML">
+                <tr>
+                    <td colspan="7" class="loading-cell">
+                        <div class="loading-state">
+                            <div class="spinner"></div>
+                            <p>Loading DNS records...</p>
+                        </div>
+                    </td>
+                </tr>
+            </tbody>
+        </table>
+    </div>
+
+    <!-- DNS Info Cards -->
+    <div class="info-section">
+        <h2>DNS Configuration Help</h2>
+        <div class="info-grid">
+            <div class="info-card">
+                <div class="info-icon">
+                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                        <circle cx="12" cy="12" r="10"></circle>
+                        <line x1="2" y1="12" x2="22" y2="12"></line>
+                        <path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"></path>
+                    </svg>
+                </div>
+                <h3>A Record</h3>
+                <p>Maps a domain name to an IPv4 address. Use this to point your hostname directly to a server IP.</p>
+            </div>
+            <div class="info-card">
+                <div class="info-icon">
+                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                        <polyline points="16 18 22 12 16 6"></polyline>
+                        <polyline points="8 6 2 12 8 18"></polyline>
+                    </svg>
+                </div>
+                <h3>AAAA Record</h3>
+                <p>Maps a domain name to an IPv6 address. Similar to A record but for IPv6 connectivity.</p>
+            </div>
+            <div class="info-card">
+                <div class="info-icon">
+                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                        <path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path>
+                        <path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path>
+                    </svg>
+                </div>
+                <h3>CNAME Record</h3>
+                <p>Creates an alias from one domain to another. Useful for pointing subdomains to your main domain.</p>
+            </div>
+            <div class="info-card">
+                <div class="info-icon">
+                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                        <rect x="3" y="11" width="18" height="11" rx="2" ry="2"></rect>
+                        <path d="M7 11V7a5 5 0 0 1 10 0v4"></path>
+                    </svg>
+                </div>
+                <h3>SSL/TLS</h3>
+                <p>SSL certificates are automatically provisioned for registered hostnames using Let's Encrypt.</p>
+            </div>
+        </div>
+    </div>
+</div>
+
+<!-- Register DNS Modal -->
+<dialog id="register-dns-modal" class="modal">
+    <div class="modal-content">
+        <div class="modal-header">
+            <h2>Register Hostname</h2>
+            <button type="button" class="close-btn" onclick="document.getElementById('register-dns-modal').close()">
+                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                    <line x1="18" y1="6" x2="6" y2="18"></line>
+                    <line x1="6" y1="6" x2="18" y2="18"></line>
+                </svg>
+            </button>
+        </div>
+        <form hx-post="/api/dns/register"
+              hx-target="#dns-result"
+              hx-swap="innerHTML"
+              hx-on::after-request="if(event.detail.successful) { setTimeout(() => { document.getElementById('register-dns-modal').close(); htmx.trigger('#dns-table-body', 'load'); }, 1500); }">
+            <div class="form-group">
+                <label></label>Hostname <span class="required">*</span></label>
+                <input type="text" name="hostname" required placeholder="mybot.example.com">
+                <p class="help-text">Enter the full domain name you want to register</p>
+            </div>
+            <div class="form-row">
+                <div class="form-group">
+                    <label>Record Type</label>
+                    <select name="record_type" id="record-type" onchange="updateTargetPlaceholder()">
+                        <option value="A">A (IPv4)</option>
+                        <option value="AAAA">AAAA (IPv6)</option>
+                        <option value="CNAME">CNAME</option>
+                    </select>
+                </div>
+                <div class="form-group">
+                    <label>TTL (seconds)</label>
+                    <select name="ttl">
+                        <option value="300">5 minutes (300)</option>
+                        <option value="3600" selected>1 hour (3600)</option>
+                        <option value="86400">1 day (86400)</option>
+                    </select>
+                </div>
+            </div>
+            <div class="form-group">
+                <label>Target/IP Address <span class="required">*</span></label>
+                <input type="text" name="target" id="target-input" required placeholder="192.168.1.1">
+                <p class="help-text" id="target-help">Enter the IPv4 address to point to</p>
+            </div>
+            <div class="form-group">
+                <label class="checkbox-label">
+                    <input type="checkbox" name="auto_ssl" checked>
+                    <span>Automatically provision SSL certificate</span>
+                </label>
+            </div>
+            <div id="dns-result"></div>
+            <div class="modal-footer">
+                <button type="button" class="btn-secondary" onclick="document.getElementById('register-dns-modal').close()">Cancel</button>
+                <button type="submit" class="btn-primary">Register Hostname</button>
+            </div>
+        </form>
+    </div>
+</dialog>
+
+<!-- Remove DNS Modal -->
+<dialog id="remove-dns-modal" class="modal modal-small">
+    <div class="modal-content">
+        <div class="modal-header">
+            <h2>Remove Hostname</h2>
+            <button type="button" class="close-btn" onclick="document.getElementById('remove-dns-modal').close()">
+                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                    <line x1="18" y1="6" x2="6" y2="18"></line>
+                    <line x1="6" y1="6" x2="18" y2="18"></line>
+                </svg>
+            </button>
+        </div>
+        <div class="modal-body">
+            <div class="warning-icon">
+                <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                    <path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"></path>
+                    <line x1="12" y1="9" x2="12" y2="13"></line>
+                    <line x1="12" y1="17" x2="12.01" y2="17"></line>
+                </svg>
+            </div>
+            <p>Are you sure you want to remove <strong id="remove-hostname-name"></strong>?</p>
+            <p class="warning-text">This will delete the DNS record and any associated SSL certificates. The hostname will no longer resolve.</p>
+        </div>
+        <div class="modal-footer">
+            <button type="button" class="btn-secondary" onclick="document.getElementById('remove-dns-modal').close()">Cancel</button>
+            <button type="button" class="btn-danger" id="confirm-remove-btn"
+                    hx-post="/api/dns/remove"
+                    hx-target="#dns-table-body"
+                    hx-swap="innerHTML"
+                    hx-on::after-request="document.getElementById('remove-dns-modal').close(); showToast('Hostname removed');">
+                Remove Hostname
+            </button>
+        </div>
+    </div>
+</dialog>
+
+<!-- Edit DNS Modal -->
+<dialog id="edit-dns-modal" class="modal">
+    <div class="modal-content">
+        <div class="modal-header">
+            <h2>Edit DNS Record</h2>
+            <button type="button" class="close-btn" onclick="document.getElementById('edit-dns-modal').close()">
+                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                    <line x1="18" y1="6" x2="6" y2="18"></line>
+                    <line x1="6" y1="6" x2="18" y2="18"></line>
+                </svg>
+            </button>
+        </div>
+        <div id="edit-dns-form-container">
+            <!-- Form loaded via HTMX -->
+        </div>
+    </div>
+</dialog>
+
+<style>
+/* DNS View */
+.dns-view {
+    max-width: 1200px;
+    margin: 0 auto;
+}
+
+.page-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-start;
+    margin-bottom: 24px;
+}
+
+.header-left h1 {
+    font-size: 28px;
+    font-weight: 700;
+    margin: 0 0 8px 0;
+}
+
+.header-left .subtitle {
+    color: var(--text-secondary);
+    margin: 0;
+}
+
+/* Table Container */
+.table-container {
+    background: var(--surface);
+    border: 1px solid var(--border);
+    border-radius: 12px;
+    overflow: hidden;
+    margin-bottom: 32px;
+}
+
+.table-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 16px 20px;
+    border-bottom: 1px solid var(--border);
+}
+
+.table-header h2 {
+    font-size: 16px;
+    font-weight: 600;
+    margin: 0;
+}
+
+.table-actions {
+    display: flex;
+    gap: 12px;
+}
+
+.search-box {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    background: var(--bg);
+    border: 1px solid var(--border);
+    border-radius: 6px;
+    padding: 8px 12px;
+}
+
+.search-box svg {
+    color: var(--text-secondary);
+}
+
+.search-box input {
+    border: none;
+    background: none;
+    outline: none;
+    color: var(--text);
+    font-size: 14px;
+    width: 200px;
+}
+
+/* Data Table */
+.data-table {
+    width: 100%;
+    border-collapse: collapse;
+}
+
+.data-table th,
+.data-table td {
+    padding: 14px 16px;
+    text-align: left;
+    border-bottom: 1px solid var(--border);
+}
+
+.data-table th {
+    background: var(--surface-hover);
+    font-weight: 600;
+    font-size: 12px;
+    color: var(--text-secondary);
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+}
+
+.data-table tbody tr:hover {
+    background: var(--surface-hover);
+}
+
+.data-table tbody tr:last-child td {
+    border-bottom: none;
+}
+
+.loading-cell {
+    text-align: center;
+}
+
+/* Status Badge */
+.status-badge {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    padding: 4px 10px;
+    border-radius: 20px;
+    font-size: 12px;
+    font-weight: 500;
+}
+
+.status-badge.active {
+    background: rgba(16, 185, 129, 0.1);
+    color: #10b981;
+}
+
+.status-badge.pending {
+    background: rgba(249, 115, 22, 0.1);
+    color: #f97316;
+}
+
+.status-badge.error {
+    background: rgba(239, 68, 68, 0.1);
+    color: #ef4444;
+}
+
+.status-dot {
+    width: 6px;
+    height: 6px;
+    border-radius: 50%;
+    background: currentColor;
+}
+
+/* Record Type Badge */
+.type-badge {
+    display: inline-block;
+    padding: 4px 8px;
+    border-radius: 4px;
+    font-size: 11px;
+    font-weight: 600;
+    font-family: monospace;
+    background: var(--surface-hover);
+    color: var(--text);
+}
+
+/* Action Buttons */
+.action-buttons {
+    display: flex;
+    gap: 8px;
+}
+
+.action-btn {
+    padding: 6px 10px;
+    border: 1px solid var(--border);
+    border-radius: 6px;
+    background: var(--surface);
+    color: var(--text-secondary);
+    cursor: pointer;
+    transition: all 0.2s;
+}
+
+.action-btn:hover {
+    background: var(--surface-hover);
+    color: var(--text);
+}
+
+.action-btn.danger:hover {
+    background: rgba(239, 68, 68, 0.1);
+    border-color: #ef4444;
+    color: #ef4444;
+}
+
+/* Info Section */
+.info-section {
+    margin-top: 32px;
+}
+
+.info-section h2 {
+    font-size: 18px;
+    font-weight: 600;
+    margin: 0 0 16px 0;
+}
+
+.info-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+    gap: 16px;
+}
+
+.info-card {
+    background: var(--surface);
+    border: 1px solid var(--border);
+    border-radius: 12px;
+    padding: 20px;
+}
+
+.info-icon {
+    width: 48px;
+    height: 48px;
+    border-radius: 12px;
+    background: rgba(59, 130, 246, 0.1);
+    color: #3b82f6;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-bottom: 16px;
+}
+
+.info-card h3 {
+    font-size: 16px;
+    font-weight: 600;
+    margin: 0 0 8px 0;
+}
+
+.info-card p {
+    font-size: 14px;
+    color: var(--text-secondary);
+    margin: 0;
+    line-height: 1.5;
+}
+
+/* Modal */
+.modal {
+    padding: 0;
+    border: none;
+    border-radius: 16px;
+    background: var(--surface);
+    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+    max-width: 520px;
+    width: 90%;
+}
+
+.modal.modal-small {
+    max-width: 400px;
+}
+
+.modal::backdrop {
+    background: rgba(0, 0, 0, 0.5);
+}
+
+.modal-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 20px 24px;
+    border-bottom: 1px solid var(--border);
+}
+
+.modal-header h2 {
+    font-size: 18px;
+    font-weight: 600;
+    margin: 0;
+}
+
+.modal-body {
+    padding: 24px;
+    text-align: center;
+}
+
+.warning-icon {
+    color: #f59e0b;
+    margin-bottom: 16px;
+}
+
+.warning-text {
+    font-size: 13px;
+    color: var(--text-secondary);
+}
+
+.modal form {
+    padding: 24px;
+}
+
+.form-row {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 16px;
+}
+
+.form-group {
+    margin-bottom: 16px;
+}
+
+.form-group label {
+    display: block;
+    font-size: 14px;
+    font-weight: 500;
+    margin-bottom: 8px;
+}
+
+.form-group label .required {
+    color: #ef4444;
+}
+
+.form-group input,
+.form-group select {
+    width: 100%;
+    padding: 10px 14px;
+    border: 1px solid var(--border);
+    border-radius: 8px;
+    background: var(--bg);
+    color: var(--text);
+    font-size: 14px;
+    box-sizing: border-box;
+}
+
+.form-group input:focus,
+.form-group select:focus {
+    outline: none;
+    border-color: var(--primary);
+}
+
+.help-text {
+    font-size: 12px;
+    color: var(--text-secondary);
+    margin-top: 6px;
+}
+
+.checkbox-label {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    cursor: pointer;
+    font-size: 14px;
+}
+
+.checkbox-label input {
+    width: auto;
+}
+
+.modal-footer {
+    display: flex;
+    justify-content: flex-end;
+    gap: 12px;
+    padding: 16px 24px;
+    border-top: 1px solid var(--border);
+    background: var(--surface-hover);
+    border-radius: 0 0 16px 16px;
+}
+
+/* Buttons */
+.close-btn {
+    background: none;
+    border: none;
+    padding: 8px;
+    cursor: pointer;
+    color: var(--text-secondary);
+    border-radius: 8px;
+}
+
+.close-btn:hover {
+    background: var(--surface-hover);
+    color: var(--text);
+}
+
+.btn-primary {
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    padding: 10px 20px;
+    background: var(--primary);
+    color: white;
+    border: none;
+    border-radius: 8px;
+    font-size: 14px;
+    font-weight: 500;
+    cursor: pointer;
+}
+
+.btn-primary:hover {
+    opacity: 0.9;
+}
+
+.btn-secondary {
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    padding: 10px 16px;
+    background: var(--surface);
+    color: var(--text);
+    border: 1px solid var(--border);
+    border-radius: 8px;
+    font-size: 14px;
+    font-weight: 500;
+    cursor: pointer;
+}
+
+.btn-secondary:hover {
+    background: var(--surface-hover);
+}
+
+.btn-danger {
+    padding: 10px 20px;
+    background: #ef4444;
+    color: white;
+    border: none;
+    border-radius: 8px;
+    font-size: 14px;
+    font-weight: 500;
+    cursor: pointer;
+}
+
+.btn-danger:hover {
+    background: #dc2626;
+}
+
+/* Loading */
+.loading-state {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: 48px;
+    color: var(--text-secondary);
+}
+
+.spinner {
+    width: 32px;
+    height: 32px;
+    border: 3px solid var(--border);
+    border-top-color: var(--primary);
+    border-radius: 50%;
+    animation: spin 1s linear infinite;
+    margin-bottom: 12px;
+}
+
+@keyframes spin {
+    to { transform: rotate(360deg); }
+}
+
+/* Success/Error Messages */
+.result-message {
+    padding: 12px 16px;
+    border-radius: 8px;
+    margin-top: 16px;
+    display: flex;
+    align-items: center;
+    gap: 10px;
+}
+
+.result-message.success {
+    background: rgba(16, 185, 129, 0.1);
+    color: #10b981;
+    border: 1px solid rgba(16, 185, 129, 0.2);
+}
+
+.result-message.error {
+    background: rgba(239, 68, 68, 0.1);
+    color: #ef4444;
+    border: 1px solid rgba(239, 68, 68, 0.2);
+}
+
+/* Responsive */
+@media (max-width: 768px) {
+    .page-header {
+        flex-direction: column;
+        gap: 16px;
+    }
+
+    .table-header {
+        flex-direction: column;
+        gap: 12px;
+        align-items: stretch;
+    }
+
+    .table-actions {
+        flex-direction: column;
+    }
+
+    .search-box input {
+        width: 100%;
+    }
+
+    .form-row {
+        grid-template-columns: 1fr;
+    }
+
+    .data-table {
+        display: block;
+        overflow-x: auto;
+    }
+
+    .info-grid {
+        grid-template-columns: 1fr;
+    }
+}
+</style>
+
+<script></script>
+    function updateTargetPlaceholder() {
+        const recordType = document.getElementById('record-type').value;
+        const targetInput = document.getElementById('target-input');
+        const targetHelp = document.getElementById('target-help');
+
+        switch (recordType) {
+            case 'A':
+                targetInput.placeholder = '192.168.1.1';
+                targetHelp.textContent = 'Enter the IPv4 address to point to';
+                break;
+            case 'AAAA':
+                targetInput.placeholder = '2001:0db8:85a3:0000:0000:8a2e:0370:7334';
+                targetHelp.textContent = 'Enter the IPv6 address to point to';
+                break;
+            case 'CNAME':
+                targetInput.placeholder = 'target.example.com';
+                targetHelp.textContent = 'Enter the target domain name (without trailing dot)';
+                break;
+        }
+    }
+
+    function confirmRemoveHostname(hostname) {
+        document.getElementById('remove-hostname-name').textContent = hostname;
+        const removeBtn = document.getElementById('confirm-remove-btn');
+        removeBtn.setAttribute('hx-vals', JSON.stringify({ hostname: hostname }));
+        htmx.process(removeBtn);
+        document.getElementById('remove-dns-modal').showModal();
+    }
+
+    function editDnsRecord(hostname) {
+        htmx.ajax('GET', `/api/dns/edit?hostname=${encodeURIComponent(hostname)}`, {
+            target: '#edit-dns-form-container'
+        });
+        document.getElementById('edit-dns-modal').showModal();
+    }
+
+    function showToast(message) {
+        const toast = document.createElement('div');
+        toast.textContent = message;
+        toast.style.cssText = `
+            position: fixed;
+            bottom: 24px;
+            right: 24px;
+            background: var(--surface);
+            border: 1px solid var(--border);
+            padding: 12px 20px;
+            border-radius: 8px;
+            box-shadow: 0 4px 12px rgba(0,0,0,0.15);
+            z-index: 1000;
+        `;
+        document.body.appendChild(toast);
+        setTimeout(() => toast.remove(), 3000);
+    }
+</script>
diff --git a/ui/suite/admin/groups.html b/ui/suite/admin/groups.html
new file mode 100644
index 0000000..e8cc383
--- /dev/null
+++ b/ui/suite/admin/groups.html
@@ -0,0 +1,1096 @@
+<div class="groups-view">
+    <div class="page-header">
+        <div class="header-left">
+            <h1>Group Management</h1>
+            <p class="subtitle">Manage groups, members, and permissions</p>
+        </div>
+        <div class="header-actions">
+            <button class="btn-primary" onclick="document.getElementById('create-group-modal').showModal()">
+                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                    <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path>
+                    <circle cx="9" cy="7" r="4"></circle>
+                    <line x1="19" y1="8" x2="19" y2="14"></line>
+                    <line x1="22" y1="11" x2="16" y2="11"></line>
+                </svg>
+                Create Group
+            </button>
+        </div>
+    </div>
+
+    <!-- Search and Filters -->
+    <div class="toolbar">
+        <div class="search-box">
+            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                <circle cx="11" cy="11" r="8"></circle>
+                <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
+            </svg>
+            <input type="text"
+                   placeholder="Search groups..."
+                   name="q"
+                   hx-get="/groups/search"
+                   hx-trigger="keyup changed delay:300ms"
+                   hx-target="#groups-grid"
+                   hx-swap="innerHTML">
+        </div>
+        <div class="filters">
+            <select name="visibility"
+                    hx-get="/groups/list"
+                    hx-trigger="change"
+                    hx-target="#groups-grid"
+                    hx-swap="innerHTML">
+                <option value="">All Visibility</option>
+                <option value="public">Public</option>
+                <option value="private">Private</option>
+                <option value="hidden">Hidden</option>
+            </select>
+            <div class="view-toggle">
+                <button class="view-btn active" onclick="setView('grid', this)" title="Grid view">
+                    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                        <rect x="3" y="3" width="7" height="7"></rect>
+                        <rect x="14" y="3" width="7" height="7"></rect>
+                        <rect x="14" y="14" width="7" height="7"></rect>
+                        <rect x="3" y="14" width="7" height="7"></rect>
+                    </svg>
+                </button>
+                <button class="view-btn" onclick="setView('list', this)" title="List view">
+                    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                        <line x1="8" y1="6" x2="21" y2="6"></line>
+                        <line x1="8" y1="12" x2="21" y2="12"></line>
+                        <line x1="8" y1="18" x2="21" y2="18"></line>
+                        <line x1="3" y1="6" x2="3.01" y2="6"></line>
+                        <line x1="3" y1="12" x2="3.01" y2="12"></line>
+                        <line x1="3" y1="18" x2="3.01" y2="18"></line>
+                    </svg>
+                </button>
+            </div>
+        </div>
+    </div>
+
+    <!-- Groups Grid -->
+    <div class="groups-grid" id="groups-grid"
+         hx-get="/groups/list"
+         hx-trigger="load"
+         hx-swap="innerHTML">
+        <div class="loading-state">
+            <div class="spinner"></div>
+            <p>Loading groups...</p>
+        </div>
+    </div>
+
+    <!-- Pagination -->
+    <div class="pagination" id="groups-pagination"
+         hx-get="/groups/list/pagination"
+         hx-trigger="load"
+         hx-swap="innerHTML">
+    </div>
+</div>
+
+<!-- Group Detail Panel -->
+<div class="detail-panel" id="group-detail-panel">
+    <div class="panel-header">
+        <h2 id="panel-group-name">Group Details</h2>
+        <button class="close-btn" onclick="closeDetailPanel()">
+            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                <line x1="18" y1="6" x2="6" y2="18"></line>
+                <line x1="6" y1="6" x2="18" y2="18"></line>
+            </svg>
+        </button>
+    </div>
+    <div class="panel-tabs">
+        <button class="tab-btn active" data-tab="overview" onclick="switchTab(this, 'overview')">Overview</button>
+        <button class="tab-btn" data-tab="members" onclick="switchTab(this, 'members')">Members</button>
+        <button class="tab-btn" data-tab="permissions" onclick="switchTab(this, 'permissions')">Permissions</button>
+        <button class="tab-btn" data-tab="settings" onclick="switchTab(this, 'settings')">Settings</button>
+        <button class="tab-btn" data-tab="analytics" onclick="switchTab(this, 'analytics')">Analytics</button>
+    </div>
+    <div class="panel-content" id="group-detail-content">
+        <!-- Content loaded via HTMX -->
+    </div>
+</div>
+
+<!-- Create Group Modal -->
+<dialog id="create-group-modal" class="modal">
+    <div class="modal-content">
+        <div class="modal-header">
+            <h2>Create New Group</h2>
+            <button type="button" class="close-btn" onclick="document.getElementById('create-group-modal').close()">
+                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                    <line x1="18" y1="6" x2="6" y2="18"></line>
+                    <line x1="6" y1="6" x2="18" y2="18"></line>
+                </svg>
+            </button>
+        </div>
+        <form hx-post="/groups/create"
+              hx-target="#groups-grid"
+              hx-swap="innerHTML"
+              hx-on::after-request="if(event.detail.successful) { document.getElementById('create-group-modal').close(); showToast('Group created successfully'); }">
+            <div class="form-group">
+                <label></label>Group Name <span class="required">*</span></label>
+                <input type="text" name="name" required placeholder="Engineering Team">
+            </div>
+            <div class="form-group">
+                <label>Description</label>
+                <textarea name="description" rows="3" placeholder="Describe the purpose of this group..."></textarea>
+            </div>
+            <div class="form-row">
+                <div class="form-group">
+                    <label>Visibility</label>
+                    <select name="visibility">
+                        <option value="private">Private</option>
+                        <option value="public">Public</option>
+                        <option value="hidden">Hidden</option>
+                    </select>
+                </div>
+                <div class="form-group">
+                    <label>Join Policy</label>
+                    <select name="join_policy">
+                        <option value="invite_only">Invite Only</option>
+                        <option value="request">Request to Join</option>
+                        <option value="open">Open</option>
+                    </select>
+                </div>
+            </div>
+            <div class="form-group">
+                <label class="checkbox-label">
+                    <input type="checkbox" name="allow_member_invite" checked>
+                    <span>Allow members to invite others</span>
+                </label>
+            </div>
+            <div class="form-group">
+                <label class="checkbox-label">
+                    <input type="checkbox" name="enable_chat" checked>
+                    <span>Enable group chat</span>
+                </label>
+            </div>
+            <div class="modal-footer">
+                <button type="button" class="btn-secondary" onclick="document.getElementById('create-group-modal').close()">Cancel</button>
+                <button type="submit" class="btn-primary">Create Group</button>
+            </div>
+        </form>
+    </div>
+</dialog>
+
+<!-- Add Member Modal -->
+<dialog id="add-member-modal" class="modal">
+    <div class="modal-content">
+        <div class="modal-header">
+            <h2>Add Members</h2>
+            <button type="button" class="close-btn" onclick="document.getElementById('add-member-modal').close()">
+                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                    <line x1="18" y1="6" x2="6" y2="18"></line>
+                    <line x1="6" y1="6" x2="18" y2="18"></line>
+                </svg>
+            </button>
+        </div>
+        <form id="add-member-form"
+              hx-post="/groups/{group_id}/members/add"
+              hx-target="#group-members-list"
+              hx-swap="innerHTML"
+              hx-on::after-request="if(event.detail.successful) { document.getElementById('add-member-modal').close(); showToast('Members added'); }">
+            <input type="hidden" name="group_id" id="add-member-group-id">
+            <div class="form-group">
+                <label>Search Users</label>
+                <div class="user-search">
+                    <input type="text"
+                           placeholder="Search by name or email..."
+                           hx-get="/users/search"
+                           hx-trigger="keyup changed delay:300ms"
+                           hx-target="#user-search-results"
+                           hx-swap="innerHTML">
+                </div>
+                <div id="user-search-results" class="search-results"></div>
+            </div>
+            <div class="form-group">
+                <label>Selected Users</label>
+                <div id="selected-users" class="selected-users">
+                    <p class="empty-text">No users selected</p>
+                </div>
+            </div>
+            <div class="form-group">
+                <label>Role</label>
+                <select name="role">
+                    <option value="member">Member</option>
+                    <option value="moderator">Moderator</option>
+                    <option value="admin">Admin</option>
+                </select>
+            </div>
+            <div class="modal-footer">
+                <button type="button" class="btn-secondary" onclick="document.getElementById('add-member-modal').close()">Cancel</button>
+                <button type="submit" class="btn-primary">Add Members</button>
+            </div>
+        </form>
+    </div>
+</dialog>
+
+<!-- Send Invite Modal -->
+<dialog id="send-invite-modal" class="modal">
+    <div class="modal-content">
+        <div class="modal-header">
+            <h2>Send Invites</h2>
+            <button type="button" class="close-btn" onclick="document.getElementById('send-invite-modal').close()">
+                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                    <line x1="18" y1="6" x2="6" y2="18"></line>
+                    <line x1="6" y1="6" x2="18" y2="18"></line>
+                </svg>
+            </button>
+        </div>
+        <form id="send-invite-form"
+              hx-post="/groups/{group_id}/invites/send"
+              hx-swap="none"
+              hx-on::after-request="if(event.detail.successful) { document.getElementById('send-invite-modal').close(); showToast('Invites sent'); }">
+            <input type="hidden" name="group_id" id="invite-group-id">
+            <div class="form-group">
+                <label>Email Addresses</label>
+                <textarea name="emails" rows="4" placeholder="Enter email addresses, one per line..."></textarea>
+                <p class="help-text">Enter one email address per line</p>
+            </div>
+            <div class="form-group">
+                <label>Personal Message (optional)</label>
+                <textarea name="message" rows="3" placeholder="Add a personal message to the invite..."></textarea>
+            </div>
+            <div class="modal-footer">
+                <button type="button" class="btn-secondary" onclick="document.getElementById('send-invite-modal').close()">Cancel</button>
+                <button type="submit" class="btn-primary">Send Invites</button>
+            </div>
+        </form>
+    </div>
+</dialog>
+
+<!-- Delete Group Modal -->
+<dialog id="delete-group-modal" class="modal modal-small">
+    <div class="modal-content">
+        <div class="modal-header">
+            <h2>Delete Group</h2>
+            <button type="button" class="close-btn" onclick="document.getElementById('delete-group-modal').close()">
+                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                    <line x1="18" y1="6" x2="6" y2="18"></line>
+                    <line x1="6" y1="6" x2="18" y2="18"></line>
+                </svg>
+            </button>
+        </div>
+        <div class="modal-body">
+            <div class="warning-icon">
+                <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                    <path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"></path>
+                    <line x1="12" y1="9" x2="12" y2="13"></line>
+                    <line x1="12" y1="17" x2="12.01" y2="17"></line>
+                </svg>
+            </div>
+            <p>Are you sure you want to delete <strong id="delete-group-name"></strong>?</p>
+            <p class="warning-text">This will remove all members and delete all group data. This action cannot be undone.</p>
+        </div>
+        <div class="modal-footer">
+            <button type="button" class="btn-secondary" onclick="document.getElementById('delete-group-modal').close()">Cancel</button>
+            <button type="button" class="btn-danger" id="confirm-delete-group-btn"
+                    hx-delete="/groups/{group_id}/delete"
+                    hx-target="#groups-grid"
+                    hx-swap="innerHTML"
+                    hx-on::after-request="document.getElementById('delete-group-modal').close(); closeDetailPanel(); showToast('Group deleted');">
+                Delete Group
+            </button>
+        </div>
+    </div>
+</dialog>
+
+<style>
+/* Groups View */
+.groups-view {
+    max-width: 1400px;
+    margin: 0 auto;
+}
+
+.page-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-start;
+    margin-bottom: 24px;
+}
+
+.header-left h1 {
+    font-size: 28px;
+    font-weight: 700;
+    margin: 0 0 8px 0;
+}
+
+.header-left .subtitle {
+    color: var(--text-secondary);
+    margin: 0;
+}
+
+/* Toolbar */
+.toolbar {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 24px;
+    gap: 16px;
+    flex-wrap: wrap;
+}
+
+.search-box {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    background: var(--surface);
+    border: 1px solid var(--border);
+    border-radius: 8px;
+    padding: 10px 14px;
+    flex: 1;
+    max-width: 400px;
+}
+
+.search-box svg {
+    color: var(--text-secondary);
+}
+
+.search-box input {
+    border: none;
+    background: none;
+    outline: none;
+    color: var(--text);
+    font-size: 14px;
+    width: 100%;
+}
+
+.filters {
+    display: flex;
+    gap: 12px;
+    align-items: center;
+}
+
+.filters select {
+    padding: 10px 14px;
+    border: 1px solid var(--border);
+    border-radius: 8px;
+    background: var(--surface);
+    color: var(--text);
+    font-size: 14px;
+}
+
+.view-toggle {
+    display: flex;
+    border: 1px solid var(--border);
+    border-radius: 8px;
+    overflow: hidden;
+}
+
+.view-btn {
+    padding: 8px 12px;
+    background: var(--surface);
+    border: none;
+    color: var(--text-secondary);
+    cursor: pointer;
+    transition: all 0.2s;
+}
+
+.view-btn:not(:last-child) {
+    border-right: 1px solid var(--border);
+}
+
+.view-btn:hover {
+    background: var(--surface-hover);
+}
+
+.view-btn.active {
+    background: var(--primary);
+    color: white;
+}
+
+/* Groups Grid */
+.groups-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
+    gap: 20px;
+}
+
+.groups-grid.list-view {
+    grid-template-columns: 1fr;
+}
+
+/* Group Card */
+.group-card {
+    background: var(--surface);
+    border: 1px solid var(--border);
+    border-radius: 12px;
+    padding: 20px;
+    transition: all 0.2s;
+    cursor: pointer;
+}
+
+.group-card:hover {
+    border-color: var(--primary);
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+}
+
+.group-card-header {
+    display: flex;
+    align-items: flex-start;
+    gap: 14px;
+    margin-bottom: 16px;
+}
+
+.group-avatar {
+    width: 48px;
+    height: 48px;
+    border-radius: 12px;
+    background: linear-gradient(135deg, var(--primary), #a855f7);
+    color: white;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-weight: 700;
+    font-size: 18px;
+    flex-shrink: 0;
+}
+
+.group-info {
+    flex: 1;
+    min-width: 0;
+}
+
+.group-name {
+    font-size: 16px;
+    font-weight: 600;
+    margin: 0 0 4px 0;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.group-description {
+    font-size: 13px;
+    color: var(--text-secondary);
+    margin: 0;
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+}
+
+.group-meta {
+    display: flex;
+    gap: 16px;
+    margin-bottom: 16px;
+}
+
+.meta-item {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    font-size: 13px;
+    color: var(--text-secondary);
+}
+
+.meta-item svg {
+    width: 14px;
+    height: 14px;
+}
+
+.group-badges {
+    display: flex;
+    gap: 8px;
+    flex-wrap: wrap;
+}
+
+.visibility-badge {
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+    padding: 4px 10px;
+    border-radius: 20px;
+    font-size: 11px;
+    font-weight: 500;
+    text-transform: uppercase;
+}
+
+.visibility-badge.public {
+    background: rgba(16, 185, 129, 0.1);
+    color: #10b981;
+}
+
+.visibility-badge.private {
+    background: rgba(59, 130, 246, 0.1);
+    color: #3b82f6;
+}
+
+.visibility-badge.hidden {
+    background: rgba(107, 114, 128, 0.1);
+    color: #6b7280;
+}
+
+.group-card-actions {
+    display: flex;
+    gap: 8px;
+    margin-top: 16px;
+    padding-top: 16px;
+    border-top: 1px solid var(--border);
+}
+
+.card-action-btn {
+    flex: 1;
+    padding: 8px 12px;
+    border: 1px solid var(--border);
+    border-radius: 6px;
+    background: var(--surface);
+    color: var(--text);
+    font-size: 13px;
+    cursor: pointer;
+    transition: all 0.2s;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 6px;
+}
+
+.card-action-btn:hover {
+    background: var(--surface-hover);
+}
+
+.card-action-btn.primary {
+    background: var(--primary);
+    border-color: var(--primary);
+    color: white;
+}
+
+.card-action-btn.primary:hover {
+    opacity: 0.9;
+}
+
+/* Detail Panel */
+.detail-panel {
+    position: fixed;
+    top: 56px;
+    right: -520px;
+    width: 520px;
+    height: calc(100vh - 56px);
+    background: var(--surface);
+    border-left: 1px solid var(--border);
+    z-index: 100;
+    transition: right 0.3s ease;
+    display: flex;
+    flex-direction: column;
+}
+
+.detail-panel.open {
+    right: 0;
+}
+
+.panel-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 20px;
+    border-bottom: 1px solid var(--border);
+}
+
+.panel-header h2 {
+    font-size: 18px;
+    font-weight: 600;
+    margin: 0;
+}
+
+.panel-tabs {
+    display: flex;
+    border-bottom: 1px solid var(--border);
+    padding: 0 20px;
+    overflow-x: auto;
+}
+
+.tab-btn {
+    padding: 12px 16px;
+    border: none;
+    background: none;
+    color: var(--text-secondary);
+    font-size: 14px;
+    cursor: pointer;
+    border-bottom: 2px solid transparent;
+    transition: all 0.2s;
+    white-space: nowrap;
+}
+
+.tab-btn:hover {
+    color: var(--text);
+}
+
+.tab-btn.active {
+    color: var(--primary);
+    border-bottom-color: var(--primary);
+}
+
+.panel-content {
+    flex: 1;
+    overflow-y: auto;
+    padding: 20px;
+}
+
+/* Members List in Panel */
+.members-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 16px;
+}
+
+.members-list {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+}
+
+.member-item {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    padding: 12px;
+    background: var(--bg);
+    border-radius: 8px;
+}
+
+.member-avatar {
+    width: 36px;
+    height: 36px;
+    border-radius: 50%;
+    background: var(--primary);
+    color: white;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 14px;
+    font-weight: 500;
+}
+
+.member-info {
+    flex: 1;
+}
+
+.member-name {
+    font-weight: 500;
+    font-size: 14px;
+}
+
+.member-role {
+    font-size: 12px;
+    color: var(--text-secondary);
+}
+
+.member-actions {
+    display: flex;
+    gap: 4px;
+}
+
+/* Modal */
+.modal {
+    padding: 0;
+    border: none;
+    border-radius: 16px;
+    background: var(--surface);
+    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+    max-width: 520px;
+    width: 90%;
+}
+
+.modal.modal-small {
+    max-width: 400px;
+}
+
+.modal::backdrop {
+    background: rgba(0, 0, 0, 0.5);
+}
+
+.modal-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 20px 24px;
+    border-bottom: 1px solid var(--border);
+}
+
+.modal-header h2 {
+    font-size: 18px;
+    font-weight: 600;
+    margin: 0;
+}
+
+.modal-body {
+    padding: 24px;
+    text-align: center;
+}
+
+.warning-icon {
+    color: #f59e0b;
+    margin-bottom: 16px;
+}
+
+.warning-text {
+    font-size: 13px;
+    color: var(--text-secondary);
+}
+
+.modal form {
+    padding: 24px;
+}
+
+.form-row {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 16px;
+}
+
+.form-group {
+    margin-bottom: 16px;
+}
+
+.form-group label {
+    display: block;
+    font-size: 14px;
+    font-weight: 500;
+    margin-bottom: 8px;
+}
+
+.form-group label .required {
+    color: #ef4444;
+}
+
+.form-group input,
+.form-group select,
+.form-group textarea {
+    width: 100%;
+    padding: 10px 14px;
+    border: 1px solid var(--border);
+    border-radius: 8px;
+    background: var(--bg);
+    color: var(--text);
+    font-size: 14px;
+    box-sizing: border-box;
+    font-family: inherit;
+}
+
+.form-group input:focus,
+.form-group select:focus,
+.form-group textarea:focus {
+    outline: none;
+    border-color: var(--primary);
+}
+
+.help-text {
+    font-size: 12px;
+    color: var(--text-secondary);
+    margin-top: 6px;
+}
+
+.checkbox-label {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    cursor: pointer;
+    font-size: 14px;
+}
+
+.checkbox-label input {
+    width: auto;
+}
+
+.modal-footer {
+    display: flex;
+    justify-content: flex-end;
+    gap: 12px;
+    padding: 16px 24px;
+    border-top: 1px solid var(--border);
+    background: var(--surface-hover);
+    border-radius: 0 0 16px 16px;
+}
+
+/* User Search */
+.search-results {
+    max-height: 200px;
+    overflow-y: auto;
+    border: 1px solid var(--border);
+    border-radius: 8px;
+    margin-top: 8px;
+}
+
+.search-result-item {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    padding: 10px 12px;
+    cursor: pointer;
+    transition: background 0.2s;
+}
+
+.search-result-item:hover {
+    background: var(--surface-hover);
+}
+
+.selected-users {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+    min-height: 40px;
+    padding: 8px;
+    border: 1px solid var(--border);
+    border-radius: 8px;
+    background: var(--bg);
+}
+
+.selected-user-tag {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    padding: 4px 10px;
+    background: var(--primary);
+    color: white;
+    border-radius: 20px;
+    font-size: 13px;
+}
+
+.selected-user-tag button {
+    background: none;
+    border: none;
+    color: white;
+    cursor: pointer;
+    padding: 0;
+    display: flex;
+}
+
+.empty-text {
+    color: var(--text-secondary);
+    font-size: 13px;
+    margin: 0;
+}
+
+/* Buttons */
+.close-btn {
+    background: none;
+    border: none;
+    padding: 8px;
+    cursor: pointer;
+    color: var(--text-secondary);
+    border-radius: 8px;
+}
+
+.close-btn:hover {
+    background: var(--surface-hover);
+    color: var(--text);
+}
+
+.btn-primary {
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    padding: 10px 20px;
+    background: var(--primary);
+    color: white;
+    border: none;
+    border-radius: 8px;
+    font-size: 14px;
+    font-weight: 500;
+    cursor: pointer;
+}
+
+.btn-primary:hover {
+    opacity: 0.9;
+}
+
+.btn-secondary {
+    padding: 10px 20px;
+    background: var(--surface);
+    color: var(--text);
+    border: 1px solid var(--border);
+    border-radius: 8px;
+    font-size: 14px;
+    font-weight: 500;
+    cursor: pointer;
+}
+
+.btn-secondary:hover {
+    background: var(--surface-hover);
+}
+
+.btn-danger {
+    padding: 10px 20px;
+    background: #ef4444;
+    color: white;
+    border: none;
+    border-radius: 8px;
+    font-size: 14px;
+    font-weight: 500;
+    cursor: pointer;
+}
+
+.btn-danger:hover {
+    background: #dc2626;
+}
+
+.btn-sm {
+    padding: 6px 10px;
+    font-size: 12px;
+}
+
+/* Loading */
+.loading-state {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: 60px;
+    color: var(--text-secondary);
+    grid-column: 1 / -1;
+}
+
+.spinner {
+    width: 32px;
+    height: 32px;
+    border: 3px solid var(--border);
+    border-top-color: var(--primary);
+    border-radius: 50%;
+    animation: spin 1s linear infinite;
+    margin-bottom: 12px;
+}
+
+@keyframes spin {
+    to { transform: rotate(360deg); }
+}
+
+/* Pagination */
+.pagination {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: 8px;
+    margin-top: 24px;
+}
+
+.page-btn {
+    padding: 8px 14px;
+    border: 1px solid var(--border);
+    border-radius: 6px;
+    background: var(--surface);
+    color: var(--text);
+    cursor: pointer;
+}
+
+.page-btn:hover:not(:disabled) {
+    background: var(--surface-hover);
+}
+
+.page-btn.active {
+    background: var(--primary);
+    border-color: var(--primary);
+    color: white;
+}
+
+/* Responsive */
+@media (max-width: 768px) {
+    .page-header {
+        flex-direction: column;
+        gap: 16px;
+    }
+
+    .toolbar {
+        flex-direction: column;
+        align-items: stretch;
+    }
+
+    .search-box {
+        max-width: none;
+    }
+
+    .filters {
+        flex-wrap: wrap;
+    }
+
+    .groups-grid {
+        grid-template-columns: 1fr;
+    }
+
+    .form-row {
+        grid-template-columns: 1fr;
+    }
+
+    .detail-panel {
+        width: 100%;
+        right: -100%;
+    }
+}
+</style>
+
+<script></script>
+    function setView(view, btn) {
+        const grid = document.getElementById('groups-grid');
+        document.querySelectorAll('.view-btn').forEach(b => b.classList.remove('active'));
+        btn.classList.add('active');
+
+        if (view === 'list') {
+            grid.classList.add('list-view');
+        } else {
+            grid.classList.remove('list-view');
+        }
+    }
+
+    function openDetailPanel(groupId, groupName) {
+        const panel = document.getElementById('group-detail-panel');
+        panel.dataset.groupId = groupId;
+        document.getElementById('panel-group-name').textContent = groupName;
+        panel.classList.add('open');
+
+        // Load overview by default
+        htmx.ajax('GET', `/groups/${groupId}/overview`, {target: '#group-detail-content'});
+    }
+
+    function closeDetailPanel() {
+        document.getElementById('group-detail-panel').classList.remove('open');
+    }
+
+    function switchTab(btn, tab) {
+        document.querySelectorAll('.tab-btn').forEach(b => b.classList.remove('active'));
+        btn.classList.add('active');
+
+        const groupId = document.getElementById('group-detail-panel').dataset.groupId;
+        if (groupId) {
+            htmx.ajax('GET', `/groups/${groupId}/${tab}`, {target: '#group-detail-content'});
+        }
+    }
+
+    function openAddMemberModal(groupId) {
+        document.getElementById('add-member-group-id').value = groupId;
+        const form = document.getElementById('add-member-form');
+        form.setAttribute('hx-post', `/groups/${groupId}/members/add`);
+        htmx.process(form);
+        document.getElementById('add-member-modal').showModal();
+    }
+
+    function openInviteModal(groupId) {
+        document.getElementById('invite-group-id').value = groupId;
+        const form = document.getElementById('send-invite-form');
+        form.setAttribute('hx-post', `/groups/${groupId}/invites/send`);
+        htmx.process(form);
+        document.getElementById('send-invite-modal').showModal();
+    }
+
+    function confirmDeleteGroup(groupId, groupName) {
+        document.getElementById('delete-group-name').textContent = groupName;
+        const deleteBtn = document.getElementById('confirm-delete-group-btn');
+        deleteBtn.setAttribute('hx-delete', `/groups/${groupId}/delete`);
+        htmx.process(deleteBtn);
+        document.getElementById('delete-group-modal').showModal();
+    }
+
+    function showToast(message) {
+        const toast = document.createElement('div');
+        toast.textContent = message;
+        toast.style.cssText = `
+            position: fixed;
+            bottom: 24px;
+            right: 24px;
+            background: var(--surface);
+            border: 1px solid var(--border);
+            padding: 12px 20px;
+            border-radius: 8px;
+            box-shadow: 0 4px 12px rgba(0,0,0,0.15);
+            z-index: 1000;
+        `;
+        document.body.appendChild(toast);
+        setTimeout(() => toast.remove(), 3000);
+    }
+</script>
diff --git a/ui/suite/admin/index.html b/ui/suite/admin/index.html
new file mode 100644
index 0000000..4016571
--- /dev/null
+++ b/ui/suite/admin/index.html
@@ -0,0 +1,934 @@
+<div class="admin-layout">
+    <!-- Sidebar Navigation -->
+    <aside class="admin-sidebar">
+        <div class="admin-header">
+            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                <path d="M12 2L2 7l10 5 10-5-10-5z"></path>
+                <path d="M2 17l10 5 10-5"></path>
+                <path d="M2 12l10 5 10-5"></path>
+            </svg>
+            <span>Admin Panel</span>
+        </div>
+
+        <nav class="admin-nav">
+            <a href="#dashboard" class="nav-item active"
+               hx-get="/api</span>/admin/dashboard"
+               hx-target="#admin-content"
+               hx-swap="innerHTML"
+               hx-push-url="false"
+               onclick="setActiveNav(this)">
+                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                    <rect x="3" y="3" width="7" height="9"></rect>
+                    <rect x="14" y="3" width="7" height="5"></rect>
+                    <rect x="14" y="12" width="7" height="9"></rect>
+                    <rect x="3" y="16" width="7" height="5"></rect>
+                </svg>
+                <span>Dashboard</span>
+            </a>
+            <a href="#users" class="nav-item"
+               hx-get="/api/admin/users"
+               hx-target="#admin-content"
+               hx-swap="innerHTML"
+               hx-push-url="false"
+               onclick="setActiveNav(this)">
+                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                    <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path>
+                    <circle cx="9" cy="7" r="4"></circle>
+                    <path d="M23 21v-2a4 4 0 0 0-3-3.87"></path>
+                    <path d="M16 3.13a4 4 0 0 1 0 7.75"></path>
+                </svg>
+                <span>Users</span>
+            </a>
+            <a href="#groups" class="nav-item"
+               hx-get="/api/admin/groups"
+               hx-target="#admin-content"
+               hx-swap="innerHTML"
+               hx-push-url="false"
+               onclick="setActiveNav(this)">
+                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                    <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path>
+                    <circle cx="9" cy="7" r="4"></circle>
+                    <circle cx="19" cy="11" r="2"></circle>
+                    <path d="M23 21v-2a4 4 0 0 0-2-3.46"></path>
+                </svg>
+                <span>Groups</span>
+            </a>
+            <a href="#bots" class="nav-item"
+               hx-get="/api/admin/bots"
+               hx-target="#admin-content"
+               hx-swap="innerHTML"
+               hx-push-url="false"
+               onclick="setActiveNav(this)">
+                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                    <rect x="3" y="11" width="18" height="10" rx="2"></rect>
+                    <circle cx="12" cy="5" r="2"></circle>
+                    <path d="M12 7v4"></path>
+                    <line x1="8" y1="16" x2="8" y2="16"></line>
+                    <line x1="16" y1="16" x2="16" y2="16"></line>
+                </svg>
+                <span>Bots</span>
+            </a>
+            <a href="#dns" class="nav-item"
+               hx-get="/api/admin/dns"
+               hx-target="#admin-content"
+               hx-swap="innerHTML"
+               hx-push-url="false"
+               onclick="setActiveNav(this)">
+                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                    <circle cx="12" cy="12" r="10"></circle>
+                    <line x1="2" y1="12" x2="22" y2="12"></line>
+                    <path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"></path>
+                </svg>
+                <span>DNS</span>
+            </a>
+            <a href="#audit" class="nav-item"
+               hx-get="/api/admin/audit"
+               hx-target="#admin-content"
+               hx-swap="innerHTML"
+               hx-push-url="false"
+               onclick="setActiveNav(this)">
+                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                    <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
+                    <polyline points="14 2 14 8 20 8"></polyline>
+                    <line x1="16" y1="13" x2="8" y2="13"></line>
+                    <line x1="16" y1="17" x2="8" y2="17"></line>
+                    <polyline points="10 9 9 9 8 9"></polyline>
+                </svg>
+                <span>Audit Log</span>
+            </a>
+            <a href="#billing" class="nav-item"
+               hx-get="/api/admin/billing"
+               hx-target="#admin-content"
+               hx-swap="innerHTML"
+               hx-push-url="false"
+               onclick="setActiveNav(this)">
+                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                    <rect x="1" y="4" width="22" height="16" rx="2" ry="2"></rect>
+                    <line x1="1" y1="10" x2="23" y2="10"></line>
+                </svg>
+                <span>Billing</span>
+            </a>
+        </nav>
+
+        <div class="admin-footer">
+            <a href="/suite" class="back-link">
+                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                    <line x1="19" y1="12" x2="5" y2="12"></line>
+                    <polyline points="12 19 5 12 12 5"></polyline>
+                </svg>
+                Back to Suite
+            </a>
+        </div>
+    </aside>
+
+    <!-- Main Content Area -->
+    <main class="admin-main">
+        <div id="admin-content"
+             hx-get="/api/admin/dashboard"
+             hx-trigger="load"
+             hx-swap="innerHTML">
+            <!-- Dashboard content loaded here -->
+            <div class="loading-state">
+                <div class="spinner"></div>
+                <p>Loading dashboard...</p>
+            </div>
+        </div>
+    </main>
+</div>
+
+<!-- Dashboard Template (inline for initial load fallback) -->
+<template id="dashboard-template">
+    <div class="dashboard-view">
+        <div class="page-header">
+            <h1>Dashboard</h1>
+            <p class="subtitle">System overview and quick statistics</p>
+        </div>
+
+        <!-- Stats Grid -->
+        <div class="stats-grid">
+            <div class="stat-card"
+                 hx-get="/api/admin/stats/users"
+                 hx-trigger="load, every 30s"
+                 hx-swap="innerHTML">
+                <div class="stat-icon users">
+                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                        <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path>
+                        <circle cx="9" cy="7" r="4"></circle>
+                        <path d="M23 21v-2a4 4 0 0 0-3-3.87"></path>
+                        <path d="M16 3.13a4 4 0 0 1 0 7.75"></path>
+                    </svg>
+                </div>
+                <div class="stat-content">
+                    <span class="stat-value">--</span>
+                    <span class="stat-label">Total Users</span>
+                </div>
+            </div>
+            <div class="stat-card"
+                 hx-get="/api/admin/stats/groups"
+                 hx-trigger="load, every 30s"
+                 hx-swap="innerHTML">
+                <div class="stat-icon groups">
+                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                        <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path>
+                        <circle cx="9" cy="7" r="4"></circle>
+                        <circle cx="19" cy="11" r="2"></circle>
+                    </svg>
+                </div>
+                <div class="stat-content">
+                    <span class="stat-value">--</span>
+                    <span class="stat-label">Active Groups</span>
+                </div>
+            </div>
+            <div class="stat-card"
+                 hx-get="/api/admin/stats/bots"
+                 hx-trigger="load, every 30s"
+                 hx-swap="innerHTML">
+                <div class="stat-icon bots">
+                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                        <rect x="3" y="11" width="18" height="10" rx="2"></rect>
+                        <circle cx="12" cy="5" r="2"></circle>
+                        <path d="M12 7v4"></path>
+                    </svg>
+                </div>
+                <div class="stat-content">
+                    <span class="stat-value">--</span>
+                    <span class="stat-label">Running Bots</span>
+                </div>
+            </div>
+            <div class="stat-card"
+                 hx-get="/api/admin/stats/storage"
+                 hx-trigger="load, every 30s"
+                 hx-swap="innerHTML">
+                <div class="stat-icon storage">
+                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                        <ellipse cx="12" cy="5" rx="9" ry="3"></ellipse>
+                        <path d="M21 12c0 1.66-4 3-9 3s-9-1.34-9-3"></path>
+                        <path d="M3 5v14c0 1.66 4 3 9 3s9-1.34 9-3V5"></path>
+                    </svg>
+                </div>
+                <div class="stat-content">
+                    <span class="stat-value">--</span>
+                    <span class="stat-label">Storage Used</span>
+                </div>
+            </div>
+        </div>
+
+        <!-- Quick Actions -->
+        <div class="section">
+            <h2>Quick Actions</h2>
+            <div class="quick-actions-grid">
+                <button class="action-card" onclick="document.getElementById('create-user-modal').showModal()">
+                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                        <path d="M16 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path>
+                        <circle cx="8.5" cy="7" r="4"></circle>
+                        <line x1="20" y1="8" x2="20" y2="14"></line>
+                        <line x1="23" y1="11" x2="17" y2="11"></line>
+                    </svg>
+                    <span>Create User</span>
+                </button>
+                <button class="action-card" onclick="document.getElementById('create-group-modal').showModal()">
+                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                        <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path>
+                        <circle cx="9" cy="7" r="4"></circle>
+                        <line x1="19" y1="8" x2="19" y2="14"></line>
+                        <line x1="22" y1="11" x2="16" y2="11"></line>
+                    </svg>
+                    <span>Create Group</span>
+                </button>
+                <button class="action-card" onclick="document.getElementById('register-dns-modal').showModal()">
+                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                        <circle cx="12" cy="12" r="10"></circle>
+                        <line x1="12" y1="8" x2="12" y2="16"></line>
+                        <line x1="8" y1="12" x2="16" y2="12"></line>
+                    </svg>
+                    <span>Register DNS</span>
+                </button>
+                <button class="action-card"
+                        hx-get="/api/admin/audit?limit=100"
+                        hx-target="#admin-content"
+                        hx-swap="innerHTML">
+                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                        <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
+                        <polyline points="14 2 14 8 20 8"></polyline>
+                    </svg>
+                    <span>View Audit Log</span>
+                </button>
+            </div>
+        </div>
+
+        <!-- Recent Activity -->
+        <div class="section">
+            <h2>Recent Activity</h2>
+            <div class="activity-list"
+                 hx-get="/api/admin/activity/recent"
+                 hx-trigger="load, every 60s"
+                 hx-swap="innerHTML">
+                <div class="loading-state">
+                    <div class="spinner"></div>
+                </div>
+            </div>
+        </div>
+
+        <!-- System Health -->
+        <div class="section">
+            <h2>System Health</h2>
+            <div class="health-grid"
+                 hx-get="/api/admin/health"
+                 hx-trigger="load, every 30s"
+                 hx-swap="innerHTML">
+                <div class="loading-state">
+                    <div class="spinner"></div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<!-- Create User Modal -->
+<dialog id="create-user-modal" class="modal">
+    <div class="modal-content">
+        <div class="modal-header">
+            <h2>Create User</h2>
+            <button type="button" class="close-btn" onclick="document.getElementById('create-user-modal').close()">
+                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                    <line x1="18" y1="6" x2="6" y2="18"></line>
+                    <line x1="6" y1="6" x2="18" y2="18"></line>
+                </svg>
+            </button>
+        </div>
+        <form hx-post="/users/create"
+              hx-target="#admin-content"
+              hx-swap="innerHTML"
+              hx-on::after-request="if(event.detail.successful) document.getElementById('create-user-modal').close()">
+            <div class="form-group">
+                <label>Username</label>
+                <input type="text" name="username" required placeholder="username">
+            </div>
+            <div class="form-group">
+                <label>Email</label>
+                <input type="email" name="email" required placeholder="user@example.com">
+            </div>
+            <div class="form-group">
+                <label>Display Name</label>
+                <input type="text" name="display_name" placeholder="John Doe">
+            </div>
+            <div class="form-group">
+                <label>Password</label>
+                <input type="password" name="password" required placeholder="••••••••">
+            </div>
+            <div class="form-group">
+                <label>Role</label>
+                <select name="role">
+                    <option value="user">User</option>
+                    <option value="admin">Admin</option>
+                    <option value="moderator">Moderator</option>
+                </select>
+            </div>
+            <div class="modal-footer">
+                <button type="button" class="btn-secondary" onclick="document.getElementById('create-user-modal').close()">Cancel</button>
+                <button type="submit" class="btn-primary">Create User</button>
+            </div>
+        </form>
+    </div>
+</dialog>
+
+<!-- Create Group Modal -->
+<dialog id="create-group-modal" class="modal">
+    <div class="modal-content">
+        <div class="modal-header">
+            <h2>Create Group</h2>
+            <button type="button" class="close-btn" onclick="document.getElementById('create-group-modal').close()">
+                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                    <line x1="18" y1="6" x2="6" y2="18"></line>
+                    <line x1="6" y1="6" x2="18" y2="18"></line>
+                </svg>
+            </button>
+        </div>
+        <form hx-post="/groups/create"
+              hx-target="#admin-content"
+              hx-swap="innerHTML"
+              hx-on::after-request="if(event.detail.successful) document.getElementById('create-group-modal').close()">
+            <div class="form-group">
+                <label>Group Name</label>
+                <input type="text" name="name" required placeholder="Engineering Team">
+            </div>
+            <div class="form-group">
+                <label>Description</label>
+                <textarea name="description" placeholder="Group description..." rows="3"></textarea>
+            </div>
+            <div class="form-group">
+                <label>Visibility</label>
+                <select name="visibility">
+                    <option value="private">Private</option>
+                    <option value="public">Public</option>
+                    <option value="hidden">Hidden</option>
+                </select>
+            </div>
+            <div class="form-group">
+                <label class="checkbox-label">
+                    <input type="checkbox" name="allow_join_requests" checked>
+                    <span>Allow join requests</span>
+                </label>
+            </div>
+            <div class="modal-footer">
+                <button type="button" class="btn-secondary" onclick="document.getElementById('create-group-modal').close()">Cancel</button>
+                <button type="submit" class="btn-primary">Create Group</button>
+            </div>
+        </form>
+    </div>
+</dialog>
+
+<!-- Register DNS Modal -->
+<dialog id="register-dns-modal" class="modal">
+    <div class="modal-content">
+        <div class="modal-header">
+            <h2>Register DNS Hostname</h2>
+            <button type="button" class="close-btn" onclick="document.getElementById('register-dns-modal').close()">
+                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                    <line x1="18" y1="6" x2="6" y2="18"></line>
+                    <line x1="6" y1="6" x2="18" y2="18"></line>
+                </svg>
+            </button>
+        </div>
+        <form hx-post="/api/dns/register"
+              hx-target="#dns-result"
+              hx-swap="innerHTML">
+            <div class="form-group">
+                <label>Hostname</label>
+                <input type="text" name="hostname" required placeholder="mybot.example.com">
+            </div>
+            <div class="form-group">
+                <label>Record Type</label>
+                <select name="record_type">
+                    <option value="A">A (IPv4)</option>
+                    <option value="AAAA">AAAA (IPv6)</option>
+                    <option value="CNAME">CNAME</option>
+                </select>
+            </div>
+            <div class="form-group">
+                <label>Target/IP</label>
+                <input type="text" name="target" placeholder="192.168.1.1 or target.domain.com">
+            </div>
+            <div id="dns-result"></div>
+            <div class="modal-footer">
+                <button type="button" class="btn-secondary" onclick="document.getElementById('register-dns-modal').close()">Cancel</button>
+                <button type="submit" class="btn-primary">Register</button>
+            </div>
+        </form>
+    </div>
+</dialog>
+
+<style>
+/* Admin Layout */
+.admin-layout {
+    display: grid;
+    grid-template-columns: 260px 1fr;
+    min-height: calc(100vh - 56px);
+    background: var(--bg);
+}
+
+/* Sidebar */
+.admin-sidebar {
+    background: var(--surface);
+    border-right: 1px solid var(--border);
+    display: flex;
+    flex-direction: column;
+    position: sticky;
+    top: 56px;
+    height: calc(100vh - 56px);
+}
+
+.admin-header {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    padding: 20px 16px;
+    border-bottom: 1px solid var(--border);
+    font-weight: 600;
+    font-size: 16px;
+}
+
+.admin-header svg {
+    color: var(--primary);
+}
+
+.admin-nav {
+    flex: 1;
+    padding: 12px 8px;
+    overflow-y: auto;
+}
+
+.admin-nav .nav-item {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    padding: 12px 16px;
+    border-radius: 8px;
+    color: var(--text-secondary);
+    text-decoration: none;
+    transition: all 0.2s;
+    margin-bottom: 4px;
+}
+
+.admin-nav .nav-item:hover {
+    background: var(--surface-hover);
+    color: var(--text);
+}
+
+.admin-nav .nav-item.active {
+    background: var(--primary);
+    color: white;
+}
+
+.admin-nav .nav-item svg {
+    flex-shrink: 0;
+}
+
+.admin-footer {
+    padding: 16px;
+    border-top: 1px solid var(--border);
+}
+
+.back-link {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    color: var(--text-secondary);
+    text-decoration: none;
+    font-size: 14px;
+    transition: color 0.2s;
+}
+
+.back-link:hover {
+    color: var(--primary);
+}
+
+/* Main Content */
+.admin-main {
+    padding: 24px;
+    overflow-y: auto;
+}
+
+/* Dashboard View */
+.dashboard-view {
+    max-width: 1400px;
+    margin: 0 auto;
+}
+
+.page-header {
+    margin-bottom: 32px;
+}
+
+.page-header h1 {
+    font-size: 28px;
+    font-weight: 700;
+    margin: 0 0 8px 0;
+}
+
+.page-header .subtitle {
+    color: var(--text-secondary);
+    margin: 0;
+}
+
+/* Stats Grid */
+.stats-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
+    gap: 20px;
+    margin-bottom: 32px;
+}
+
+.stat-card {
+    background: var(--surface);
+    border: 1px solid var(--border);
+    border-radius: 12px;
+    padding: 20px;
+    display: flex;
+    align-items: center;
+    gap: 16px;
+}
+
+.stat-icon {
+    width: 48px;
+    height: 48px;
+    border-radius: 12px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.stat-icon.users { background: rgba(59, 130, 246, 0.1); color: #3b82f6; }
+.stat-icon.groups { background: rgba(16, 185, 129, 0.1); color: #10b981; }
+.stat-icon.bots { background: rgba(168, 85, 247, 0.1); color: #a855f7; }
+.stat-icon.storage { background: rgba(249, 115, 22, 0.1); color: #f97316; }
+
+.stat-content {
+    display: flex;
+    flex-direction: column;
+}
+
+.stat-value {
+    font-size: 28px;
+    font-weight: 700;
+    line-height: 1;
+}
+
+.stat-label {
+    font-size: 14px;
+    color: var(--text-secondary);
+    margin-top: 4px;
+}
+
+/* Sections */
+.section {
+    margin-bottom: 32px;
+}
+
+.section h2 {
+    font-size: 18px;
+    font-weight: 600;
+    margin: 0 0 16px 0;
+}
+
+/* Quick Actions Grid */
+.quick-actions-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
+    gap: 16px;
+}
+
+.action-card {
+    background: var(--surface);
+    border: 1px solid var(--border);
+    border-radius: 12px;
+    padding: 20px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 12px;
+    cursor: pointer;
+    transition: all 0.2s;
+    text-decoration: none;
+    color: var(--text);
+}
+
+.action-card:hover {
+    border-color: var(--primary);
+    background: var(--surface-hover);
+}
+
+.action-card svg {
+    color: var(--primary);
+}
+
+.action-card span {
+    font-size: 14px;
+    font-weight: 500;
+}
+
+/* Activity List */
+.activity-list {
+    background: var(--surface);
+    border: 1px solid var(--border);
+    border-radius: 12px;
+    overflow: hidden;
+}
+
+.activity-item {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    padding: 16px;
+    border-bottom: 1px solid var(--border);
+}
+
+.activity-item:last-child {
+    border-bottom: none;
+}
+
+.activity-icon {
+    width: 36px;
+    height: 36px;
+    border-radius: 50%;
+    background: var(--surface-hover);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--text-secondary);
+}
+
+.activity-content {
+    flex: 1;
+}
+
+.activity-text {
+    font-size: 14px;
+}
+
+.activity-text strong {
+    font-weight: 600;
+}
+
+.activity-time {
+    font-size: 12px;
+    color: var(--text-secondary);
+}
+
+/* Health Grid */
+.health-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+    gap: 16px;
+}
+
+.health-card {
+    background: var(--surface);
+    border: 1px solid var(--border);
+    border-radius: 12px;
+    padding: 16px;
+}
+
+.health-card-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 12px;
+}
+
+.health-card-title {
+    font-size: 14px;
+    font-weight: 500;
+}
+
+.health-status {
+    width: 10px;
+    height: 10px;
+    border-radius: 50%;
+}
+
+.health-status.healthy { background: #10b981; }
+.health-status.warning { background: #f59e0b; }
+.health-status.error { background: #ef4444; }
+
+.health-value {
+    font-size: 24px;
+    font-weight: 700;
+}
+
+.health-label {
+    font-size: 12px;
+    color: var(--text-secondary);
+}
+
+/* Modal Styles */
+.modal {
+    padding: 0;
+    border: none;
+    border-radius: 16px;
+    background: var(--surface);
+    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+    max-width: 480px;
+    width: 90%;
+}
+
+.modal::backdrop {
+    background: rgba(0, 0, 0, 0.5);
+}
+
+.modal-content {
+    padding: 0;
+}
+
+.modal-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 20px 24px;
+    border-bottom: 1px solid var(--border);
+}
+
+.modal-header h2 {
+    font-size: 18px;
+    font-weight: 600;
+    margin: 0;
+}
+
+.close-btn {
+    background: none;
+    border: none;
+    padding: 8px;
+    cursor: pointer;
+    color: var(--text-secondary);
+    border-radius: 8px;
+    transition: all 0.2s;
+}
+
+.close-btn:hover {
+    background: var(--surface-hover);
+    color: var(--text);
+}
+
+.modal form {
+    padding: 24px;
+}
+
+.form-group {
+    margin-bottom: 16px;
+}
+
+.form-group label {
+    display: block;
+    font-size: 14px;
+    font-weight: 500;
+    margin-bottom: 8px;
+}
+
+.form-group input,
+.form-group select,
+.form-group textarea {
+    width: 100%;
+    padding: 10px 14px;
+    border: 1px solid var(--border);
+    border-radius: 8px;
+    background: var(--bg);
+    color: var(--text);
+    font-size: 14px;
+    box-sizing: border-box;
+}
+
+.form-group input:focus,
+.form-group select:focus,
+.form-group textarea:focus {
+    outline: none;
+    border-color: var(--primary);
+}
+
+.checkbox-label {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    cursor: pointer;
+}
+
+.checkbox-label input {
+    width: auto;
+}
+
+.modal-footer {
+    display: flex;
+    justify-content: flex-end;
+    gap: 12px;
+    padding: 16px 24px;
+    border-top: 1px solid var(--border);
+    background: var(--surface-hover);
+    border-radius: 0 0 16px 16px;
+}
+
+.btn-primary {
+    padding: 10px 20px;
+    background: var(--primary);
+    color: white;
+    border: none;
+    border-radius: 8px;
+    font-size: 14px;
+    font-weight: 500;
+    cursor: pointer;
+    transition: opacity 0.2s;
+}
+
+.btn-primary:hover {
+    opacity: 0.9;
+}
+
+.btn-secondary {
+    padding: 10px 20px;
+    background: var(--surface);
+    color: var(--text);
+    border: 1px solid var(--border);
+    border-radius: 8px;
+    font-size: 14px;
+    font-weight: 500;
+    cursor: pointer;
+    transition: all 0.2s;
+}
+
+.btn-secondary:hover {
+    background: var(--surface-hover);
+}
+
+/* Loading State */
+.loading-state {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: 48px;
+    color: var(--text-secondary);
+}
+
+.spinner {
+    width: 32px;
+    height: 32px;
+    border: 3px solid var(--border);
+    border-top-color: var(--primary);
+    border-radius: 50%;
+    animation: spin 1s linear infinite;
+    margin-bottom: 12px;
+}
+
+@keyframes spin {
+    to { transform: rotate(360deg); }
+}
+
+/* Responsive */
+@media (max-width: 1024px) {
+    .admin-layout {
+        grid-template-columns: 1fr;
+    }
+
+    .admin-sidebar {
+        position: fixed;
+        left: -260px;
+        top: 56px;
+        z-index: 100;
+        transition: left 0.3s;
+    }
+
+    .admin-sidebar.open {
+        left: 0;
+    }
+
+    .stats-grid {
+        grid-template-columns: repeat(2, 1fr);
+    }
+}
+
+@media (max-width: 640px) {
+    .stats-grid {
+        grid-template-columns: 1fr;
+    }
+
+    .quick-actions-grid {
+        grid-template-columns: repeat(2, 1fr);
+    }
+}
+</style>
+
+<script>
+    function setActiveNav(el) {
+        document.querySelectorAll('.admin-nav .nav-item').forEach(item => {
+            item.classList.remove('active');
+        });
+        el.classList.add('active');
+    }
+
+    // Load dashboard template as fallback
+    document.addEventListener('htmx:responseError', function(e) {
+        if (e.detail.target.id === 'admin-content') {
+            const</script> template = document.getElementById('dashboard-template');
+            if (template) {
+                e.detail.target.innerHTML = template.innerHTML;
+            }
+        }
+    });
+</script>
diff --git a/ui/suite/admin/users.html b/ui/suite/admin/users.html
new file mode 100644
index 0000000..cab6ecf
--- /dev/null
+++ b/ui/suite/admin/users.html
@@ -0,0 +1,897 @@
+<div class="users-view">
+    <div class="page-header">
+        <div class="header-left">
+            <h1>User Management</h1>
+            <p class="subtitle">Manage users, roles, and permissions</p>
+        </div>
+        <div class="header-actions">
+            <button class="btn-primary" onclick="document.getElementById('create-user-modal').showModal()">
+                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                    <path d="M16 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path>
+                    <circle cx="8.5" cy="7" r="4"></circle>
+                    <line x1="20" y1="8" x2="20" y2="14"></line>
+                    <line x1="23" y1="11" x2="17" y2="11"></line>
+                </svg>
+                Add User
+            </button>
+        </div>
+    </div>
+
+    <!-- Search and Filters -->
+    <div class="toolbar">
+        <div class="search-box">
+            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                <circle cx="11" cy="11" r="8"></circle>
+                <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
+            </svg>
+            <input type="text"
+                   placeholder="Search users..."
+                   name="q"
+                   hx-get="/users/search"
+                   hx-trigger="keyup changed delay:300ms"
+                   hx-target="#users-table-body"
+                   hx-swap="innerHTML">
+        </div>
+        <div class="filters">
+            <select name="role"
+                    hx-get="/users/list"
+                    hx-trigger="change"
+                    hx-target="#users-table-body"
+                    hx-swap="innerHTML"
+                    hx-include="[name='status']">
+                <option value="">All Roles</option>
+                <option value="admin">Admin</option>
+                <option value="moderator">Moderator</option>
+                <option value="user">User</option>
+            </select>
+            <select name="status"
+                    hx-get="/users/list"
+                    hx-trigger="change"
+                    hx-target="#users-table-body"
+                    hx-swap="innerHTML"
+                    hx-include="[name='role']">
+                <option value="">All Status</option>
+                <option value="active">Active</option>
+                <option value="inactive">Inactive</option>
+                <option value="suspended">Suspended</option>
+            </select>
+        </div>
+    </div>
+
+    <!-- Users Table -->
+    <div class="table-container">
+        <table class="data-table">
+            <thead>
+                <tr>
+                    <th>
+                        <input type="checkbox" id="select-all" onchange="toggleSelectAll(this)">
+                    </th>
+                    <th>User</th>
+                    <th>Email</th>
+                    <th>Role</th>
+                    <th>Status</th>
+                    <th>Last Active</th>
+                    <th>Actions</th>
+                </tr>
+            </thead>
+            <tbody id="users-table-body"
+                   hx-get="/users/list"
+                   hx-trigger="load"
+                   hx-swap="innerHTML">
+                <tr>
+                    <td colspan="7" class="loading-cell">
+                        <div class="loading-state">
+                            <div class="spinner"></div>
+                            <p>Loading users...</p>
+                        </div>
+                    </td>
+                </tr>
+            </tbody>
+        </table>
+    </div>
+
+    <!-- Pagination -->
+    <div class="pagination" id="users-pagination"
+         hx-get="/users/list/pagination"
+         hx-trigger="load"
+         hx-swap="innerHTML">
+    </div>
+</div>
+
+<!-- User Detail Panel (slides in from right) -->
+<div class="detail-panel" id="user-detail-panel">
+    <div class="panel-header">
+        <h2 id="panel-user-name">User Details</h2>
+        <button class="close-btn" onclick="closeDetailPanel()">
+            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                <line x1="18" y1="6" x2="6" y2="18"></line>
+                <line x1="6" y1="6" x2="18" y2="18"></line>
+            </svg>
+        </button>
+    </div>
+    <div class="panel-tabs">
+        <button class="tab-btn active" data-tab="profile" onclick="switchTab(this, 'profile')">Profile</button>
+        <button class="tab-btn" data-tab="settings" onclick="switchTab(this, 'settings')">Settings</button>
+        <button class="tab-btn" data-tab="permissions" onclick="switchTab(this, 'permissions')">Permissions</button>
+        <button class="tab-btn" data-tab="security" onclick="switchTab(this, 'security')">Security</button>
+        <button class="tab-btn" data-tab="activity" onclick="switchTab(this, 'activity')">Activity</button>
+    </div>
+    <div class="panel-content" id="user-detail-content">
+        <!-- Content loaded via HTMX -->
+    </div>
+</div>
+
+<!-- Create User Modal -->
+<dialog id="create-user-modal" class="modal">
+    <div class="modal-content">
+        <div class="modal-header">
+            <h2>Create New User</h2>
+            <button type="button" class="close-btn" onclick="document.getElementById('create-user-modal').close()">
+                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                    <line x1="18" y1="6" x2="6" y2="18"></line>
+                    <line x1="6" y1="6" x2="18" y2="18"></line>
+                </svg>
+            </button>
+        </div>
+        <form hx-post="/users/create"
+              hx-target="#users-table-body"
+              hx-swap="innerHTML"
+              hx-on::after-request="if(event.detail.successful) { document.getElementById('create-user-modal').close(); showToast('User created successfully'); }">
+            <div class="form-row">
+                <div class="form-group">
+                    <label>Username <span class="required">*</span></label>
+                    <input type="text" name="username" required placeholder="johndoe">
+                </div>
+                <div class="form-group">
+                    <label>Display Name</label>
+                    <input type="text" name="display_name" placeholder="John Doe">
+                </div>
+            </div>
+            <div class="form-group">
+                <label>Email <span class="required">*</span></label>
+                <input type="email" name="email" required placeholder="john@example.com">
+            </div>
+            <div class="form-row">
+                <div class="form-group">
+                    <label>Password <span class="required">*</span></label>
+                    <input type="password" name="password" required placeholder="••••••••" minlength="8">
+                </div>
+                <div class="form-group">
+                    <label>Confirm Password <span class="required">*</span></label>
+                    <input type="password" name="password_confirm" required placeholder="••••••••">
+                </div>
+            </div>
+            <div class="form-row">
+                <div class="form-group">
+                    <label>Role</label>
+                    <select name="role">
+                        <option value="user">User</option>
+                        <option value="moderator">Moderator</option>
+                        <option value="admin">Admin</option>
+                    </select>
+                </div>
+                <div class="form-group">
+                    <label>Status</label>
+                    <select name="status">
+                        <option value="active">Active</option>
+                        <option value="inactive">Inactive</option>
+                    </select>
+                </div>
+            </div>
+            <div class="form-group">
+                <label class="checkbox-label">
+                    <input type="checkbox" name="send_welcome_email" checked>
+                    <span>Send welcome email</span>
+                </label>
+            </div>
+            <div class="form-group">
+                <label class="checkbox-label">
+                    <input type="checkbox" name="require_password_change">
+                    <span>Require password change on first login</span>
+                </label>
+            </div>
+            <div class="modal-footer">
+                <button type="button" class="btn-secondary" onclick="document.getElementById('create-user-modal').close()">Cancel</button>
+                <button type="submit" class="btn-primary">Create User</button>
+            </div>
+        </form>
+    </div>
+</dialog>
+
+<!-- Edit User Modal -->
+<dialog id="edit-user-modal" class="modal">
+    <div class="modal-content">
+        <div class="modal-header">
+            <h2>Edit User</h2>
+            <button type="button" class="close-btn" onclick="document.getElementById('edit-user-modal').close()">
+                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                    <line x1="18" y1="6" x2="6" y2="18"></line>
+                    <line x1="6" y1="6" x2="18" y2="18"></line>
+                </svg>
+            </button>
+        </div>
+        <div id="edit-user-form-container">
+            <!-- Form loaded via HTMX -->
+        </div>
+    </div>
+</dialog>
+
+<!-- Delete Confirmation Modal -->
+<dialog id="delete-user-modal" class="modal modal-small">
+    <div class="modal-content">
+        <div class="modal-header">
+            <h2>Delete User</h2>
+            <button type="button" class="close-btn" onclick="document.getElementById('delete-user-modal').close()">
+                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                    <line x1="18" y1="6" x2="6" y2="18"></line>
+                    <line x1="6" y1="6" x2="18" y2="18"></line>
+                </svg>
+            </button>
+        </div>
+        <div class="modal-body">
+            <div class="warning-icon">
+                <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                    <path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"></path>
+                    <line x1="12" y1="9" x2="12" y2="13"></line>
+                    <line x1="12" y1="17" x2="12.01" y2="17"></line>
+                </svg>
+            </div>
+            <p>Are you sure you want to delete <strong id="delete-user-name"></strong>?</p>
+            <p class="warning-text">This action cannot be undone. All user data will be permanently removed.</p>
+        </div>
+        <div class="modal-footer">
+            <button type="button" class="btn-secondary" onclick="document.getElementById('delete-user-modal').close()">Cancel</button>
+            <button type="button" class="btn-danger" id="confirm-delete-btn"
+                    hx-delete="/users/{user_id}/delete"
+                    hx-target="#users-table-body"
+                    hx-swap="innerHTML"
+                    hx-on::after-request="document.getElementById('delete-user-modal').close(); showToast('User deleted');">
+                Delete User
+            </button>
+        </div>
+    </div>
+</dialog>
+
+<style>
+/* Users View */
+.users-view {
+    max-width: 1400px;
+    margin: 0 auto;
+}
+
+.page-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-start;
+    margin-bottom: 24px;
+}
+
+.header-left h1 {
+    font-size: 28px;
+    font-weight: 700;
+    margin: 0 0 8px 0;
+}
+
+.header-left .subtitle {
+    color: var(--text-secondary);
+    margin: 0;
+}
+
+.header-actions {
+    display: flex;
+    gap: 12px;
+}
+
+/* Toolbar */
+.toolbar {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 20px;
+    gap: 16px;
+    flex-wrap: wrap;
+}
+
+.search-box {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    background: var(--surface);
+    border: 1px solid var(--border);
+    border-radius: 8px;
+    padding: 10px 14px;
+    flex: 1;
+    max-width: 400px;
+}
+
+.search-box svg {
+    color: var(--text-secondary);
+    flex-shrink: 0;
+}
+
+.search-box input {
+    border: none;
+    background: none;
+    outline: none;
+    color: var(--text);
+    font-size: 14px;
+    width: 100%;
+}
+
+.filters {
+    display: flex;
+    gap: 12px;
+}
+
+.filters select {
+    padding: 10px 14px;
+    border: 1px solid var(--border);
+    border-radius: 8px;
+    background: var(--surface);
+    color: var(--text);
+    font-size: 14px;
+    cursor: pointer;
+}
+
+/* Table */
+.table-container {
+    background: var(--surface);
+    border: 1px solid var(--border);
+    border-radius: 12px;
+    overflow: hidden;
+}
+
+.data-table {
+    width: 100%;
+    border-collapse: collapse;
+}
+
+.data-table th,
+.data-table td {
+    padding: 14px 16px;
+    text-align: left;
+    border-bottom: 1px solid var(--border);
+}
+
+.data-table th {
+    background: var(--surface-hover);
+    font-weight: 600;
+    font-size: 13px;
+    color: var(--text-secondary);
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+}
+
+.data-table tbody tr:hover {
+    background: var(--surface-hover);
+}
+
+.data-table tbody tr:last-child td {
+    border-bottom: none;
+}
+
+.loading-cell {
+    text-align: center;
+}
+
+/* User Cell */
+.user-cell {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+}
+
+.user-avatar {
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+    background: var(--primary);
+    color: white;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-weight: 600;
+    font-size: 14px;
+}
+
+.user-info {
+    display: flex;
+    flex-direction: column;
+}
+
+.user-name {
+    font-weight: 500;
+}
+
+.user-username {
+    font-size: 12px;
+    color: var(--text-secondary);
+}
+
+/* Status Badge */
+.status-badge {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    padding: 4px 10px;
+    border-radius: 20px;
+    font-size: 12px;
+    font-weight: 500;
+}
+
+.status-badge.active {
+    background: rgba(16, 185, 129, 0.1);
+    color: #10b981;
+}
+
+.status-badge.inactive {
+    background: rgba(107, 114, 128, 0.1);
+    color: #6b7280;
+}
+
+.status-badge.suspended {
+    background: rgba(239, 68, 68, 0.1);
+    color: #ef4444;
+}
+
+.status-dot {
+    width: 6px;
+    height: 6px;
+    border-radius: 50%;
+    background: currentColor;
+}
+
+/* Role Badge */
+.role-badge {
+    display: inline-block;
+    padding: 4px 10px;
+    border-radius: 6px;
+    font-size: 12px;
+    font-weight: 500;
+}
+
+.role-badge.admin {
+    background: rgba(168, 85, 247, 0.1);
+    color: #a855f7;
+}
+
+.role-badge.moderator {
+    background: rgba(59, 130, 246, 0.1);
+    color: #3b82f6;
+}
+
+.role-badge.user {
+    background: rgba(107, 114, 128, 0.1);
+    color: #6b7280;
+}
+
+/* Action Buttons */
+.action-buttons {
+    display: flex;
+    gap: 8px;
+}
+
+.action-btn {
+    padding: 6px 10px;
+    border: 1px solid var(--border);
+    border-radius: 6px;
+    background: var(--surface);
+    color: var(--text-secondary);
+    cursor: pointer;
+    transition: all 0.2s;
+}
+
+.action-btn:hover {
+    background: var(--surface-hover);
+    color: var(--text);
+}
+
+.action-btn.danger:hover {
+    background: rgba(239, 68, 68, 0.1);
+    border-color: #ef4444;
+    color: #ef4444;
+}
+
+/* Pagination */
+.pagination {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: 8px;
+    margin-top: 20px;
+    padding: 16px;
+}
+
+.page-btn {
+    padding: 8px 14px;
+    border: 1px solid var(--border);
+    border-radius: 6px;
+    background: var(--surface);
+    color: var(--text);
+    cursor: pointer;
+    transition: all 0.2s;
+}
+
+.page-btn:hover:not(:disabled) {
+    background: var(--surface-hover);
+}
+
+.page-btn:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+}
+
+.page-btn.active {
+    background: var(--primary);
+    border-color: var(--primary);
+    color: white;
+}
+
+/* Detail Panel */
+.detail-panel {
+    position: fixed;
+    top: 56px;
+    right: -480px;
+    width: 480px;
+    height: calc(100vh - 56px);
+    background: var(--surface);
+    border-left: 1px solid var(--border);
+    z-index: 100;
+    transition: right 0.3s ease;
+    display: flex;
+    flex-direction: column;
+}
+
+.detail-panel.open {
+    right: 0;
+}
+
+.panel-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 20px;
+    border-bottom: 1px solid var(--border);
+}
+
+.panel-header h2 {
+    font-size: 18px;
+    font-weight: 600;
+    margin: 0;
+}
+
+.panel-tabs {
+    display: flex;
+    border-bottom: 1px solid var(--border);
+    padding: 0 20px;
+    overflow-x: auto;
+}
+
+.tab-btn {
+    padding: 12px 16px;
+    border: none;
+    background: none;
+    color: var(--text-secondary);
+    font-size: 14px;
+    cursor: pointer;
+    border-bottom: 2px solid transparent;
+    transition: all 0.2s;
+    white-space: nowrap;
+}
+
+.tab-btn:hover {
+    color: var(--text);
+}
+
+.tab-btn.active {
+    color: var(--primary);
+    border-bottom-color: var(--primary);
+}
+
+.panel-content {
+    flex: 1;
+    overflow-y: auto;
+    padding: 20px;
+}
+
+/* Modal Styles */
+.modal {
+    padding: 0;
+    border: none;
+    border-radius: 16px;
+    background: var(--surface);
+    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+    max-width: 560px;
+    width: 90%;
+}
+
+.modal.modal-small {
+    max-width: 400px;
+}
+
+.modal::backdrop {
+    background: rgba(0, 0, 0, 0.5);
+}
+
+.modal-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 20px 24px;
+    border-bottom: 1px solid var(--border);
+}
+
+.modal-header h2 {
+    font-size: 18px;
+    font-weight: 600;
+    margin: 0;
+}
+
+.modal-body {
+    padding: 24px;
+    text-align: center;
+}
+
+.warning-icon {
+    color: #f59e0b;
+    margin-bottom: 16px;
+}
+
+.warning-text {
+    font-size: 13px;
+    color: var(--text-secondary);
+}
+
+.modal form {
+    padding: 24px;
+}
+
+.form-row {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 16px;
+}
+
+.form-group {
+    margin-bottom: 16px;
+}
+
+.form-group label {
+    display: block;
+    font-size: 14px;
+    font-weight: 500;
+    margin-bottom: 8px;
+}
+
+.form-group label .required {
+    color: #ef4444;
+}
+
+.form-group input,
+.form-group select {
+    width: 100%;
+    padding: 10px 14px;
+    border: 1px solid var(--border);
+    border-radius: 8px;
+    background: var(--bg);
+    color: var(--text);
+    font-size: 14px;
+    box-sizing: border-box;
+}
+
+.form-group input:focus,
+.form-group select:focus {
+    outline: none;
+    border-color: var(--primary);
+}
+
+.checkbox-label {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    cursor: pointer;
+    font-size: 14px;
+}
+
+.checkbox-label input {
+    width: auto;
+}
+
+.modal-footer {
+    display: flex;
+    justify-content: flex-end;
+    gap: 12px;
+    padding: 16px 24px;
+    border-top: 1px solid var(--border);
+    background: var(--surface-hover);
+    border-radius: 0 0 16px 16px;
+}
+
+.close-btn {
+    background: none;
+    border: none;
+    padding: 8px;
+    cursor: pointer;
+    color: var(--text-secondary);
+    border-radius: 8px;
+}
+
+.close-btn:hover {
+    background: var(--surface-hover);
+    color: var(--text);
+}
+
+/* Buttons */
+.btn-primary {
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    padding: 10px 20px;
+    background: var(--primary);
+    color: white;
+    border: none;
+    border-radius: 8px;
+    font-size: 14px;
+    font-weight: 500;
+    cursor: pointer;
+    transition: opacity 0.2s;
+}
+
+.btn-primary:hover {
+    opacity: 0.9;
+}
+
+.btn-secondary {
+    padding: 10px 20px;
+    background: var(--surface);
+    color: var(--text);
+    border: 1px solid var(--border);
+    border-radius: 8px;
+    font-size: 14px;
+    font-weight: 500;
+    cursor: pointer;
+}
+
+.btn-secondary:hover {
+    background: var(--surface-hover);
+}
+
+.btn-danger {
+    padding: 10px 20px;
+    background: #ef4444;
+    color: white;
+    border: none;
+    border-radius: 8px;
+    font-size: 14px;
+    font-weight: 500;
+    cursor: pointer;
+}
+
+.btn-danger:hover {
+    background: #dc2626;
+}
+
+/* Loading */
+.loading-state {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: 48px;
+    color: var(--text-secondary);
+}
+
+.spinner {
+    width: 32px;
+    height: 32px;
+    border: 3px solid var(--border);
+    border-top-color: var(--primary);
+    border-radius: 50%;
+    animation: spin 1s linear infinite;
+    margin-bottom: 12px;
+}
+
+@keyframes spin {
+    to { transform: rotate(360deg); }
+}
+
+/* Responsive */
+@media (max-width: 768px) {
+    .page-header {
+        flex-direction: column;
+        gap: 16px;
+    }
+
+    .toolbar {
+        flex-direction: column;
+        align-items: stretch;
+    }
+
+    .search-box {
+        max-width: none;
+    }
+
+    .filters {
+        flex-wrap: wrap;
+    }
+
+    .form-row {
+        grid-template-columns: 1fr;
+    }
+
+    .detail-panel {
+        width: 100%;
+        right: -100%;
+    }
+
+    .data-table {
+        display: block;
+        overflow-x: auto;
+    }
+}
+</style>
+
+<script></script>
+    function toggleSelectAll(checkbox) {
+        const checkboxes = document.querySelectorAll('#users-table-body input[type="checkbox"]');
+        checkboxes.forEach(cb => cb.checked = checkbox.checked);
+    }
+
+    function openDetailPanel(userId) {
+        const panel = document.getElementById('user-detail-panel');
+        panel.classList.add('open');
+
+        // Load user profile by default
+        htmx.ajax('GET', `/users/${userId}/profile`, {target: '#user-detail-content'});
+    }
+
+    function closeDetailPanel() {
+        document.getElementById('user-detail-panel').classList.remove('open');
+    }
+
+    function switchTab(btn, tab) {
+        // Update active tab
+        document.querySelectorAll('.tab-btn').forEach(b => b.classList.remove('active'));
+        btn.classList.add('active');
+
+        // Get current user ID from panel
+        const userId = document.getElementById('user-detail-panel').dataset.userId;
+        if (userId) {
+            htmx.ajax('GET', `/users/${userId}/${tab}`, {target: '#user-detail-content'});
+        }
+    }
+
+    function editUser(userId) {
+        htmx.ajax('GET', `/users/${userId}/edit`, {target: '#edit-user-form-container'});
+        document.getElementById('edit-user-modal').showModal();
+    }
+
+    function confirmDeleteUser(userId, userName) {
+        document.getElementById('delete-user-name').textContent = userName;
+        const deleteBtn = document.getElementById('confirm-delete-btn');
+        deleteBtn.setAttribute('hx-delete', `/users/${userId}/delete`);
+        htmx.process(deleteBtn);
+        document.getElementById('delete-user-modal').showModal();
+    }
+
+    function showToast(message) {
+        // Simple toast notification
+        const toast = document.createElement('div');
+        toast.className = 'toast';
+        toast.textContent = message;
+        toast.style.cssText = `
+            position: fixed;
+            bottom: 24px;
+            right: 24px;
+            background: var(--surface);
+            border: 1px solid var(--border);
+            padding: 12px 20px;
+            border-radius: 8px;
+            box-shadow: 0 4px 12px rgba(0,0,0,0.15);
+            z-index: 1000;
+            animation: slideIn 0.3s ease;
+        `;
+        document.body.appendChild(toast);
+        setTimeout(() => toast.remove(), 3000);
+    }
+</script>
diff --git a/ui/suite/assets/icons/gb-gear.svg b/ui/suite/assets/icons/gb-gear.svg
index 5cb0053..8b1180a 100644
--- a/ui/suite/assets/icons/gb-gear.svg
+++ b/ui/suite/assets/icons/gb-gear.svg
@@ -1,4 +1,4 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <path d="M12 15C13.6569 15 15 13.6569 15 12C15 10.3431 13.6569 9 12 9C10.3431 9 9 10.3431 9 12C9 13.6569 10.3431 15 12 15Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-  <path d="M19.4 15C19.2669 15.3016 19.2272 15.6362 19.286 15.9606C19.3448 16.285 19.4995 16.5843 19.73 16.82L19.79 16.88C19.976 17.0657 20.1235 17.2863 20.2241 17.5291C20.3248 17.7719 20.3766 18.0322 20.3766 18.295C20.3766 18.5578 20.3248 18.8181 20.2241 19.0609C20.1235 19.3037 19.976 19.5243 19.79 19.71C19.6043 19.896 19.3837 20.0435 19.1409 20.1441C18.8981 20.2448 18.6378 20.2966 18.375 20.2966C18.1122 20.2966 17.8519 20.2448 17.6091 20.1441C17.3663 20.0435 17.1457 19.896 16.96 19.71L16.9 19.65C16.6643 19.4195 16.365 19.2648 16.0406 19.206C15.7162 19.1472 15.3816 19.1869 15.08 19.32C14.7842 19.4468 14.532 19.6572 14.3543 19.9255C14.1766 20.1938 14.0813 20.5082 14.08 20.83V21C14.08 21.5304 13.8693 22.0391 13.4942 22.4142C13.1191 22.7893 12.6104 23 12.08 23C11.5496 23 11.0409 22.7893 10.6658 22.4142C10.2907 22.0391 10.08 21.5304 10.08 21V20.91C10.0723 20.579 9.96512 20.258 9.77251 19.9887C9.5799 19.7194 9.31074 19.5143 9 19.4C8.69838 19.2669 8.36381 19.2272 8.03941 19.286C7.71502 19.3448 7.41568 19.4995 7.18 19.73L7.12 19.79C6.93425 19.976 6.71368 20.1235 6.47088 20.2241C6.22808 20.3248 5.96783 20.3766 5.705 20.3766C5.44217 20.3766 5.18192 20.3248 4.93912 20.2241C4.69632 20.1235 4.47575 19.976 4.29 19.79C4.10405 19.6043 3.95653 19.3837 3.85588 19.1409C3.75523 18.8981 3.70343 18.6378 3.70343 18.375C3.70343 18.1122 3.75523 17.8519 3.85588 17.6091C3.95653 17.3663 4.10405 17.1457 4.29 16.96L4.35 16.9C4.58054 16.6643 4.73519 16.365 4.794 16.0406C4.85282 15.7162 4.81312 15.3816 4.68 15.08C4.55324 14.7842 4.34276 14.532 4.07447 14.3543C3.80618 14.1766 3.49179 14.0813 3.17 14.08H3C2.46957 14.08 1.96086 13.8693 1.58579 13.4942C1.21071 13.1191 1 12.6104 1 12.08C1 11.5496 1.21071 11.0409 1.58579 10.6658C1.96086 10.2907 2.46957 10.08 3 10.08H3.09C3.42099 10.0723 3.742 9.96512 4.0113 9.77251C4.28059 9.5799 4.48572 9.31074 4.6 9C4.73312 8.69838 4.77282 8.36381 4.714 8.03941C4.65519 7.71502 4.50054 7.41568 4.27 7.18L4.21 7.12C4.02405 6.93425 3.87653 6.71368 3.77588 6.47088C3.67523 6.22808 3.62343 5.96783 3.62343 5.705C3.62343 5.44217 3.67523 5.18192 3.77588 4.93912C3.87653 4.69632 4.02405 4.47575 4.21 4.29C4.39575 4.10405 4.61632 3.95653 4.85912 3.85588C5.10192 3.75523 5.36217 3.70343 5.625 3.70343C5.88783 3.70343 6.14808 3.75523 6.39088 3.85588C6.63368 3.95653 6.85425 4.10405 7.04 4.29L7.1 4.35C7.33568 4.58054 7.63502 4.73519 7.95941 4.794C8.28381 4.85282 8.61838 4.81312 8.92 4.68H9C9.29577 4.55324 9.54802 4.34276 9.72569 4.07447C9.90337 3.80618 9.99872 3.49179 10 3.17V3C10 2.46957 10.2107 1.96086 10.5858 1.58579C10.9609 1.21071 11.4696 1 12 1C12.5304 1 13.0391 1.21071 13.4142 1.58579C13.7893 1.96086 14 2.46957 14 3V3.09C14.0013 3.41179 14.0966 3.72618 14.2743 3.99447C14.452 4.26276 14.7042 4.47324 15 4.6C15.3016 4.73312 15.6362 4.77282 15.9606 4.714C16.285 4.65519 16.5843 4.50054 16.82 4.27L16.88 4.21C17.0657 4.02405 17.2863 3.87653 17.5291 3.77588C17.7719 3.67523 18.0322 3.62343 18.295 3.62343C18.5578 3.62343 18.8181 3.67523 19.0609 3.77588C19.3037 3.87653 19.5243 4.02405 19.71 4.21C19.896 4.39575 20.0435 4.61632 20.1441 4.85912C20.2448 5.10192 20.2966 5.36217 20.2966 5.625C20.2966 5.88783 20.2448 6.14808 20.1441 6.39088C20.0435 6.63368 19.896 6.85425 19.71 7.04L19.65 7.1C19.4195 7.33568 19.2648 7.63502 19.206 7.95941C19.1472 8.28381 19.1869 8.61838 19.32 8.92V9C19.4468 9.29577 19.6572 9.54802 19.9255 9.72569C20.1938 9.90337 20.5082 9.99872 20.83 10H21C21.5304 10 22.0391 10.2107 22.4142 10.5858C22.7893 10.9609 23 11.4696 23 12C23 12.5304 22.7893 13.0391 22.4142 13.4142C22.0391 13.7893 21.5304 14 21 14H20.91C20.5882 14.0013 20.2738 14.0966 20.0055 14.2743C19.7372 14.452 19.5268 14.7042 19.4 15Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+  <circle cx="12" cy="12" r="3"/>
+  <path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"/>
 </svg>
diff --git a/ui/suite/auth/forgot-password.html b/ui/suite/auth/forgot-password.html
new file mode 100644
index 0000000..3397e06
--- /dev/null
+++ b/ui/suite/auth/forgot-password.html
@@ -0,0 +1,740 @@
+<!doctype html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <title>Forgot Password - General Bots</title>
+        <script src="/js/vendor/htmx.min.js"></script>
+        <style>
+            :root {
+                --primary: #3b82f6;
+                --primary-hover: #2563eb;
+                --primary-light: rgba(59, 130, 246, 0.1);
+                --bg: #0f172a;
+                --surface: #1e293b;
+                --surface-hover: #334155;
+                --border: #334155;
+                --text: #f8fafc;
+                --text-secondary: #94a3b8;
+                --error: #ef4444;
+                --success: #22c55e;
+            }
+
+            * {
+                margin: 0;
+                padding: 0;
+                box-sizing: border-box;
+            }
+
+            body {
+                font-family:
+                    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
+                    sans-serif;
+                background: var(--bg);
+                color: var(--text);
+                min-height: 100vh;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                background-image:
+                    radial-gradient(
+                        ellipse at top,
+                        rgba(59, 130, 246, 0.1) 0%,
+                        transparent 50%
+                    ),
+                    radial-gradient(
+                        ellipse at bottom,
+                        rgba(139, 92, 246, 0.1) 0%,
+                        transparent 50%
+                    );
+            }
+
+            .forgot-container {
+                width: 100%;
+                max-width: 420px;
+                padding: 2rem;
+            }
+
+            .forgot-header {
+                text-align: center;
+                margin-bottom: 2rem;
+            }
+
+            .forgot-logo {
+                width: 72px;
+                height: 72px;
+                margin: 0 auto 1.25rem;
+                background: linear-gradient(135deg, var(--primary), #8b5cf6);
+                border-radius: 18px;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                font-size: 2rem;
+                box-shadow: 0 8px 32px rgba(59, 130, 246, 0.3);
+            }
+
+            .forgot-title {
+                font-size: 1.75rem;
+                font-weight: 700;
+                margin-bottom: 0.5rem;
+                background: linear-gradient(
+                    135deg,
+                    var(--text),
+                    var(--text-secondary)
+                );
+                -webkit-background-clip: text;
+                -webkit-text-fill-color: transparent;
+                background-clip: text;
+            }
+
+            .forgot-subtitle {
+                color: var(--text-secondary);
+                font-size: 0.9375rem;
+                line-height: 1.5;
+            }
+
+            .forgot-card {
+                background: var(--surface);
+                border: 1px solid var(--border);
+                border-radius: 16px;
+                padding: 1.75rem;
+                box-shadow: 0 4px 24px rgba(0, 0, 0, 0.2);
+            }
+
+            /* Message Box */
+            .message-box {
+                padding: 0.875rem 1rem;
+                border-radius: 10px;
+                margin-bottom: 1.25rem;
+                font-size: 0.875rem;
+                display: none;
+                align-items: flex-start;
+                gap: 0.625rem;
+            }
+
+            .message-box.visible {
+                display: flex;
+            }
+
+            .message-box.error {
+                background: rgba(239, 68, 68, 0.1);
+                border: 1px solid rgba(239, 68, 68, 0.3);
+                color: var(--error);
+            }
+
+            .message-box.success {
+                background: rgba(34, 197, 94, 0.1);
+                border: 1px solid rgba(34, 197, 94, 0.3);
+                color: var(--success);
+            }
+
+            .message-box svg {
+                flex-shrink: 0;
+                margin-top: 0.125rem;
+            }
+
+            /* Form Styles */
+            .form-group {
+                margin-bottom: 1.5rem;
+            }
+
+            .form-label {
+                display: block;
+                font-size: 0.875rem;
+                font-weight: 500;
+                margin-bottom: 0.5rem;
+                color: var(--text);
+            }
+
+            .input-wrapper {
+                position: relative;
+            }
+
+            .input-icon {
+                position: absolute;
+                left: 1rem;
+                top: 50%;
+                transform: translateY(-50%);
+                color: var(--text-secondary);
+                pointer-events: none;
+            }
+
+            .form-input {
+                width: 100%;
+                padding: 0.875rem 1rem 0.875rem 2.75rem;
+                background: var(--bg);
+                border: 1px solid var(--border);
+                border-radius: 10px;
+                color: var(--text);
+                font-size: 1rem;
+                transition: all 0.2s ease;
+            }
+
+            .form-input:focus {
+                outline: none;
+                border-color: var(--primary);
+                box-shadow: 0 0 0 3px var(--primary-light);
+            }
+
+            .form-input::placeholder {
+                color: var(--text-secondary);
+            }
+
+            /* Buttons */
+            .btn {
+                width: 100%;
+                padding: 0.875rem 1.25rem;
+                border-radius: 10px;
+                font-size: 1rem;
+                font-weight: 600;
+                cursor: pointer;
+                transition: all 0.2s ease;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                gap: 0.5rem;
+                position: relative;
+            }
+
+            .btn-primary {
+                background: linear-gradient(135deg, var(--primary), #6366f1);
+                color: white;
+                border: none;
+                box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
+            }
+
+            .btn-primary:hover:not(:disabled) {
+                transform: translateY(-1px);
+                box-shadow: 0 6px 20px rgba(59, 130, 246, 0.4);
+            }
+
+            .btn-primary:active:not(:disabled) {
+                transform: translateY(0);
+            }
+
+            .btn-primary:disabled {
+                opacity: 0.6;
+                cursor: not-allowed;
+            }
+
+            .btn-text {
+                transition: opacity 0.2s ease;
+            }
+
+            .btn.loading .btn-text {
+                opacity: 0;
+            }
+
+            .btn.loading .spinner {
+                display: block;
+            }
+
+            .spinner {
+                display: none;
+                position: absolute;
+                width: 22px;
+                height: 22px;
+                border: 2px solid transparent;
+                border-top-color: white;
+                border-radius: 50%;
+                animation: spin 0.8s linear infinite;
+            }
+
+            @keyframes spin {
+                to {
+                    transform: rotate(360deg);
+                }
+            }
+
+            /* Back Link */
+            .back-link {
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                gap: 0.5rem;
+                margin-top: 1.5rem;
+                color: var(--text-secondary);
+                text-decoration: none;
+                font-size: 0.9375rem;
+                transition: color 0.2s ease;
+            }
+
+            .back-link:hover {
+                color: var(--primary);
+            }
+
+            /* Success Section */
+            .success-section {
+                display: none;
+                text-align: center;
+                padding: 1rem 0;
+            }
+
+            .success-section.visible {
+                display: block;
+            }
+
+            .success-icon {
+                width: 72px;
+                height: 72px;
+                margin: 0 auto 1.5rem;
+                background: rgba(34, 197, 94, 0.1);
+                border-radius: 50%;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                color: var(--success);
+            }
+
+            .success-title {
+                font-size: 1.5rem;
+                font-weight: 600;
+                margin-bottom: 0.75rem;
+            }
+
+            .success-text {
+                color: var(--text-secondary);
+                margin-bottom: 1.5rem;
+                line-height: 1.6;
+                font-size: 0.9375rem;
+            }
+
+            .success-email {
+                color: var(--primary);
+                font-weight: 500;
+            }
+
+            .email-tips {
+                background: var(--bg);
+                border-radius: 10px;
+                padding: 1rem;
+                margin-top: 1.5rem;
+                text-align: left;
+            }
+
+            .email-tips-title {
+                font-size: 0.8125rem;
+                font-weight: 600;
+                color: var(--text);
+                margin-bottom: 0.625rem;
+            }
+
+            .email-tips-list {
+                list-style: none;
+                font-size: 0.8125rem;
+                color: var(--text-secondary);
+            }
+
+            .email-tips-list li {
+                display: flex;
+                align-items: center;
+                gap: 0.5rem;
+                margin-bottom: 0.375rem;
+            }
+
+            .email-tips-list li:last-child {
+                margin-bottom: 0;
+            }
+
+            .email-tips-list svg {
+                flex-shrink: 0;
+                color: var(--primary);
+            }
+
+            .resend-section {
+                margin-top: 1.5rem;
+                padding-top: 1.5rem;
+                border-top: 1px solid var(--border);
+                text-align: center;
+            }
+
+            .resend-text {
+                font-size: 0.875rem;
+                color: var(--text-secondary);
+                margin-bottom: 0.75rem;
+            }
+
+            .resend-btn {
+                background: none;
+                border: none;
+                color: var(--primary);
+                font-size: 0.875rem;
+                font-weight: 500;
+                cursor: pointer;
+                padding: 0;
+            }
+
+            .resend-btn:hover {
+                text-decoration: underline;
+            }
+
+            .resend-btn:disabled {
+                color: var(--text-secondary);
+                cursor: not-allowed;
+                text-decoration: none;
+            }
+
+            /* Footer */
+            .forgot-footer {
+                text-align: center;
+                margin-top: 1.75rem;
+                font-size: 0.9375rem;
+                color: var(--text-secondary);
+            }
+
+            .forgot-footer a {
+                color: var(--primary);
+                text-decoration: none;
+                font-weight: 500;
+            }
+
+            .forgot-footer a:hover {
+                text-decoration: underline;
+            }
+
+            /* Responsive */
+            @media (max-width: 480px) {
+                .forgot-container {
+                    padding: 1rem;
+                }
+
+                .forgot-card {
+                    padding: 1.25rem;
+                }
+            }
+        </style>
+    </head>
+    <body>
+        <div class="forgot-container">
+            <div class="forgot-header">
+                <div class="forgot-logo">🔑</div>
+                <h1 class="forgot-title">Forgot Password?</h1>
+                <p class="forgot-subtitle">
+                    No worries! Enter your email address and we'll send you a
+                    link to reset your password.
+                </p>
+            </div>
+
+            <div class="forgot-card">
+                <!-- Request Form Section -->
+                <div id="request-section">
+                    <div class="message-box error" id="error-message">
+                        <svg
+                            width="18"
+                            height="18"
+                            viewBox="0 0 24 24"
+                            fill="none"
+                            stroke="currentColor"
+                            stroke-width="2"
+                        >
+                            <circle cx="12" cy="12" r="10"></circle>
+                            <line x1="15" y1="9" x2="9" y2="15"></line>
+                            <line x1="9" y1="9" x2="15" y2="15"></line>
+                        </svg>
+                        <span id="error-text">An error occurred</span>
+                    </div>
+
+                    <form
+                        id="forgot-form"
+                        hx-post="/api/auth/forgot-password"
+                        hx-target="#forgot-response"
+                        hx-swap="innerHTML"
+                        hx-indicator="#submit-btn"
+                    >
+                        <div class="form-group">
+                            <label class="form-label" for="email"
+                                >Email Address</label
+                            >
+                            <div class="input-wrapper">
+                                <svg
+                                    class="input-icon"
+                                    width="18"
+                                    height="18"
+                                    viewBox="0 0 24 24"
+                                    fill="none"
+                                    stroke="currentColor"
+                                    stroke-width="2"
+                                >
+                                    <path
+                                        d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"
+                                    ></path>
+                                    <polyline points="22,6 12,13 2,6"></polyline>
+                                </svg>
+                                <input
+                                    type="email"
+                                    id="email"
+                                    name="email"
+                                    class="form-input"
+                                    placeholder="you@example.com"
+                                    required
+                                    autocomplete="email"
+                                />
+                            </div>
+                        </div>
+
+                        <button
+                            type="submit"
+                            class="btn btn-primary"
+                            id="submit-btn"
+                        >
+                            <span class="btn-text">Send Reset Link</span>
+                            <div class="spinner"></div>
+                        </button>
+                    </form>
+
+                    <div id="forgot-response"></div>
+
+                    <a href="/auth/login" class="back-link">
+                        <svg
+                            width="18"
+                            height="18"
+                            viewBox="0 0 24 24"
+                            fill="none"
+                            stroke="currentColor"
+                            stroke-width="2"
+                        >
+                            <line x1="19" y1="12" x2="5" y2="12"></line>
+                            <polyline points="12 19 5 12 12 5"></polyline>
+                        </svg>
+                        Back to Login
+                    </a>
+                </div>
+
+                <!-- Success Section -->
+                <div id="success-section" class="success-section">
+                    <div class="success-icon">
+                        <svg
+                            width="36"
+                            height="36"
+                            viewBox="0 0 24 24"
+                            fill="none"
+                            stroke="currentColor"
+                            stroke-width="2"
+                        >
+                            <path
+                                d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"
+                            ></path>
+                            <polyline points="22,6 12,13 2,6"></polyline>
+                        </svg>
+                    </div>
+                    <h2 class="success-title">Check Your Email</h2>
+                    <p class="success-text">
+                        We've sent a password reset link to<br />
+                        <span class="success-email" id="success-email"
+                            >your@email.com</span
+                        >
+                    </p>
+
+                    <div class="email-tips">
+                        <div class="email-tips-title">
+                            Didn't receive the email?
+                        </div>
+                        <ul class="email-tips-list">
+                            <li>
+                                <svg
+                                    width="14"
+                                    height="14"
+                                    viewBox="0 0 24 24"
+                                    fill="none"
+                                    stroke="currentColor"
+                                    stroke-width="2"
+                                >
+                                    <polyline
+                                        points="9 11 12 14 22 4"
+                                    ></polyline>
+                                    <path
+                                        d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"
+                                    ></path>
+                                </svg>
+                                Check your spam or junk folder
+                            </li>
+                            <li>
+                                <svg
+                                    width="14"
+                                    height="14"
+                                    viewBox="0 0 24 24"
+                                    fill="none"
+                                    stroke="currentColor"
+                                    stroke-width="2"
+                                >
+                                    <polyline
+                                        points="9 11 12 14 22 4"
+                                    ></polyline>
+                                    <path
+                                        d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"
+                                    ></path>
+                                </svg>
+                                Make sure you entered the correct email
+                            </li>
+                            <li>
+                                <svg
+                                    width="14"
+                                    height="14"
+                                    viewBox="0 0 24 24"
+                                    fill="none"
+                                    stroke="currentColor"
+                                    stroke-width="2"
+                                >
+                                    <polyline
+                                        points="9 11 12 14 22 4"
+                                    ></polyline>
+                                    <path
+                                        d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"
+                                    ></path>
+                                </svg>
+                                The link expires in 1 hour
+                            </li>
+                        </ul>
+                    </div>
+
+                    <div class="resend-section">
+                        <p class="resend-text">Still no email?</p>
+                        <button
+                            type="button"
+                            class="resend-btn"
+                            id="resend-btn"
+                            onclick="resendEmail()"
+                        >
+                            Resend reset link
+                        </button>
+                    </div>
+
+                    <a href="/auth/login" class="back-link">
+                        <svg
+                            width="18"
+                            height="18"
+                            viewBox="0 0 24 24"
+                            fill="none"
+                            stroke="currentColor"
+                            stroke-width="2"
+                        >
+                            <line x1="19" y1="12" x2="5" y2="12"></line>
+                            <polyline points="12 19 5 12 12 5"></polyline>
+                        </svg>
+                        Back to Login
+                    </a>
+                </div>
+            </div>
+
+            <div class="forgot-footer">
+                <p>
+                    Remember your password?
+                    <a href="/auth/login">Sign in</a>
+                </p>
+            </div>
+        </div>
+
+        <script>
+            let submittedEmail = "";
+            let resendCooldown = 0;
+
+            // Show error message
+            function showError(message) {
+                const errorBox = document.getElementById("error-message");
+                const errorText = document.getElementById("error-text");
+                errorText.textContent = message;
+                errorBox.classList.add("visible");
+            }
+
+            // Hide error message
+            function hideError() {
+                document
+                    .getElementById("error-message")
+                    .classList.remove("visible");
+            }
+
+            // Show success section
+            function showSuccess(email) {
+                submittedEmail = email;
+                document.getElementById("request-section").style.display =
+                    "none";
+                document
+                    .getElementById("success-section")
+                    .classList.add("visible");
+                document.getElementById("success-email").textContent = email;
+            }
+
+            // Loading state
+            function setLoading(loading) {
+                const btn = document.getElementById("submit-btn");
+                if (loading) {
+                    btn.classList.add("loading");
+                    btn.disabled = true;
+                } else {
+                    btn.classList.remove("loading");
+                    btn.disabled = false;
+                }
+            }
+
+            // Resend email with cooldown
+            function resendEmail() {
+                if (resendCooldown > 0) return;
+
+                fetch("/api/auth/forgot-password", {
+                    method: "POST",
+                    headers: { "Content-Type": "application/json" },
+                    body: JSON.stringify({ email: submittedEmail }),
+                });
+
+                // Start cooldown
+                resendCooldown = 60;
+                const resendBtn = document.getElementById("resend-btn");
+                resendBtn.disabled = true;
+
+                const interval = setInterval(() => {
+                    resendCooldown--;
+                    resendBtn.textContent = `Resend reset link (${resendCooldown}s)`;
+
+                    if (resendCooldown <= 0) {
+                        clearInterval(interval);
+                        resendBtn.textContent = "Resend reset link";
+                        resendBtn.disabled = false;
+                    }
+                }, 1000);
+            }
+
+            // Handle HTMX events
+            document.body.addEventListener(
+                "htmx:beforeRequest",
+                function (event) {
+                    if (event.target.id === "forgot-form") {
+                        hideError();
+                        setLoading(true);
+                    }
+                },
+            );
+
+            document.body.addEventListener(
+                "htmx:afterRequest",
+                function (event) {
+                    if (event.target.id === "forgot-form") {
+                        setLoading(false);
+
+                        if (event.detail.successful) {
+                            const email = document.getElementById("email").value;
+                            showSuccess(email);
+                        } else {
+                            try {
+                                const response = JSON.parse(
+                                    event.detail.xhr.responseText,
+                                );
+                                showError(
+                                    response.error ||
+                                        "Failed to send reset link. Please try again.",
+                                );
+                            } catch (e) {
+                                // Even if there's an error, for security we might show success
+                                // to prevent email enumeration
+                                const email = document.getElementById("email").value;
+                                showSuccess(email);
+                            }
+                        }
+                    }
+                },
+            );
+
+            // Clear error when user starts typing
+            document.getElementById("email").addEventListener("input", hideError);
+        </script>
+    </body>
+</html>
diff --git a/ui/suite/auth/login.html b/ui/suite/auth/login.html
index 8e8872e..b2465a2 100644
--- a/ui/suite/auth/login.html
+++ b/ui/suite/auth/login.html
@@ -1,351 +1,1267 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Login - General Bots</title>
-    <script src="https://unpkg.com/htmx.org@1.9.10"></script>
-    <style>
-        :root {
-            --primary: #3b82f6;
-            --primary-hover: #2563eb;
-            --bg: #0f172a;
-            --surface: #1e293b;
-            --border: #334155;
-            --text: #f8fafc;
-            --text-secondary: #94a3b8;
-            --error: #ef4444;
-            --success: #22c55e;
-        }
+    <head>
+        <meta charset="UTF-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <title>Login - General Bots</title>
+        <script src="/js/vendor/htmx.min.js"></script>
+        <style>
+            :root {
+                --primary: #3b82f6;
+                --primary-hover: #2563eb;
+                --primary-light: rgba(59, 130, 246, 0.1);
+                --bg: #0f172a;
+                --surface: #1e293b;
+                --surface-hover: #334155;
+                --border: #334155;
+                --text: #f8fafc;
+                --text-secondary: #94a3b8;
+                --error: #ef4444;
+                --success: #22c55e;
+                --warning: #f59e0b;
+            }
 
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-        }
+            * {
+                margin: 0;
+                padding: 0;
+                box-sizing: border-box;
+            }
 
-        body {
-            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-            background: var(--bg);
-            color: var(--text);
-            min-height: 100vh;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-        }
+            body {
+                font-family:
+                    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
+                    sans-serif;
+                background: var(--bg);
+                color: var(--text);
+                min-height: 100vh;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                background-image:
+                    radial-gradient(
+                        ellipse at top,
+                        rgba(59, 130, 246, 0.1) 0%,
+                        transparent 50%
+                    ),
+                    radial-gradient(
+                        ellipse at bottom,
+                        rgba(139, 92, 246, 0.1) 0%,
+                        transparent 50%
+                    );
+            }
 
-        .login-container {
-            width: 100%;
-            max-width: 400px;
-            padding: 2rem;
-        }
+            .login-container {
+                width: 100%;
+                max-width: 420px;
+                padding: 2rem;
+            }
 
-        .login-header {
-            text-align: center;
-            margin-bottom: 2rem;
-        }
+            .login-header {
+                text-align: center;
+                margin-bottom: 2rem;
+            }
 
-        .login-logo {
-            width: 64px;
-            height: 64px;
-            margin: 0 auto 1rem;
-            background: var(--primary);
-            border-radius: 16px;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 2rem;
-        }
+            .login-logo {
+                width: 72px;
+                height: 72px;
+                margin: 0 auto 1.25rem;
+                background: linear-gradient(135deg, var(--primary), #8b5cf6);
+                border-radius: 18px;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                font-size: 2rem;
+                box-shadow: 0 8px 32px rgba(59, 130, 246, 0.3);
+            }
 
-        .login-title {
-            font-size: 1.5rem;
-            font-weight: 600;
-            margin-bottom: 0.5rem;
-        }
+            .login-title {
+                font-size: 1.75rem;
+                font-weight: 700;
+                margin-bottom: 0.5rem;
+                background: linear-gradient(
+                    135deg,
+                    var(--text),
+                    var(--text-secondary)
+                );
+                -webkit-background-clip: text;
+                -webkit-text-fill-color: transparent;
+                background-clip: text;
+            }
 
-        .login-subtitle {
-            color: var(--text-secondary);
-            font-size: 0.875rem;
-        }
+            .login-subtitle {
+                color: var(--text-secondary);
+                font-size: 0.9375rem;
+            }
 
-        .login-form {
-            background: var(--surface);
-            border: 1px solid var(--border);
-            border-radius: 12px;
-            padding: 1.5rem;
-        }
+            .login-card {
+                background: var(--surface);
+                border: 1px solid var(--border);
+                border-radius: 16px;
+                padding: 1.75rem;
+                box-shadow: 0 4px 24px rgba(0, 0, 0, 0.2);
+            }
 
-        .form-group {
-            margin-bottom: 1rem;
-        }
+            /* Error & Success Messages */
+            .message-box {
+                padding: 0.875rem 1rem;
+                border-radius: 10px;
+                margin-bottom: 1.25rem;
+                font-size: 0.875rem;
+                display: none;
+                align-items: flex-start;
+                gap: 0.625rem;
+            }
 
-        .form-label {
-            display: block;
-            font-size: 0.875rem;
-            font-weight: 500;
-            margin-bottom: 0.5rem;
-            color: var(--text-secondary);
-        }
+            .message-box.visible {
+                display: flex;
+            }
 
-        .form-input {
-            width: 100%;
-            padding: 0.75rem 1rem;
-            background: var(--bg);
-            border: 1px solid var(--border);
-            border-radius: 8px;
-            color: var(--text);
-            font-size: 1rem;
-            transition: border-color 0.2s, box-shadow 0.2s;
-        }
+            .message-box.error {
+                background: rgba(239, 68, 68, 0.1);
+                border: 1px solid rgba(239, 68, 68, 0.3);
+                color: var(--error);
+            }
 
-        .form-input:focus {
-            outline: none;
-            border-color: var(--primary);
-            box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
-        }
+            .message-box.success {
+                background: rgba(34, 197, 94, 0.1);
+                border: 1px solid rgba(34, 197, 94, 0.3);
+                color: var(--success);
+            }
 
-        .form-input::placeholder {
-            color: var(--text-secondary);
-        }
+            .message-box svg {
+                flex-shrink: 0;
+                margin-top: 0.125rem;
+            }
 
-        .form-checkbox {
-            display: flex;
-            align-items: center;
-            gap: 0.5rem;
-            font-size: 0.875rem;
-            color: var(--text-secondary);
-        }
+            /* Form Styles */
+            .form-group {
+                margin-bottom: 1.25rem;
+            }
 
-        .form-checkbox input {
-            width: 16px;
-            height: 16px;
-            accent-color: var(--primary);
-        }
+            .form-label {
+                display: block;
+                font-size: 0.875rem;
+                font-weight: 500;
+                margin-bottom: 0.5rem;
+                color: var(--text);
+            }
 
-        .login-btn {
-            width: 100%;
-            padding: 0.75rem 1rem;
-            background: var(--primary);
-            color: white;
-            border: none;
-            border-radius: 8px;
-            font-size: 1rem;
-            font-weight: 500;
-            cursor: pointer;
-            transition: background 0.2s;
-            margin-top: 1rem;
-        }
+            .input-wrapper {
+                position: relative;
+            }
 
-        .login-btn:hover {
-            background: var(--primary-hover);
-        }
+            .input-icon {
+                position: absolute;
+                left: 1rem;
+                top: 50%;
+                transform: translateY(-50%);
+                color: var(--text-secondary);
+                pointer-events: none;
+            }
 
-        .login-btn:disabled {
-            opacity: 0.6;
-            cursor: not-allowed;
-        }
+            .form-input {
+                width: 100%;
+                padding: 0.875rem 1rem 0.875rem 2.75rem;
+                background: var(--bg);
+                border: 1px solid var(--border);
+                border-radius: 10px;
+                color: var(--text);
+                font-size: 1rem;
+                transition: all 0.2s ease;
+            }
 
-        .login-footer {
-            text-align: center;
-            margin-top: 1.5rem;
-            font-size: 0.875rem;
-            color: var(--text-secondary);
-        }
+            .form-input:focus {
+                outline: none;
+                border-color: var(--primary);
+                box-shadow: 0 0 0 3px var(--primary-light);
+            }
 
-        .login-footer a {
-            color: var(--primary);
-            text-decoration: none;
-        }
+            .form-input::placeholder {
+                color: var(--text-secondary);
+            }
 
-        .login-footer a:hover {
-            text-decoration: underline;
-        }
+            .form-input.error {
+                border-color: var(--error);
+            }
 
-        .error-message {
-            background: rgba(239, 68, 68, 0.1);
-            border: 1px solid var(--error);
-            color: var(--error);
-            padding: 0.75rem 1rem;
-            border-radius: 8px;
-            margin-bottom: 1rem;
-            font-size: 0.875rem;
-            display: none;
-        }
+            .password-toggle {
+                position: absolute;
+                right: 1rem;
+                top: 50%;
+                transform: translateY(-50%);
+                background: none;
+                border: none;
+                color: var(--text-secondary);
+                cursor: pointer;
+                padding: 0.25rem;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+            }
 
-        .error-message.visible {
-            display: block;
-        }
+            .password-toggle:hover {
+                color: var(--text);
+            }
 
-        .htmx-indicator {
-            display: none;
-        }
+            /* Checkbox */
+            .form-row {
+                display: flex;
+                align-items: center;
+                justify-content: space-between;
+                margin-bottom: 1.25rem;
+            }
 
-        .htmx-request .htmx-indicator {
-            display: inline-block;
-        }
+            .checkbox-label {
+                display: flex;
+                align-items: center;
+                gap: 0.5rem;
+                font-size: 0.875rem;
+                color: var(--text-secondary);
+                cursor: pointer;
+            }
 
-        .htmx-request .btn-text {
-            display: none;
-        }
+            .checkbox-input {
+                display: none;
+            }
 
-        .spinner {
-            width: 20px;
-            height: 20px;
-            border: 2px solid transparent;
-            border-top-color: white;
-            border-radius: 50%;
-            animation: spin 0.8s linear infinite;
-        }
+            .checkbox-custom {
+                width: 18px;
+                height: 18px;
+                border: 2px solid var(--border);
+                border-radius: 4px;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                transition: all 0.2s ease;
+            }
 
-        @keyframes spin {
-            to { transform: rotate(360deg); }
-        }
+            .checkbox-input:checked + .checkbox-custom {
+                background: var(--primary);
+                border-color: var(--primary);
+            }
 
-        .divider {
-            display: flex;
-            align-items: center;
-            margin: 1.5rem 0;
-            color: var(--text-secondary);
-            font-size: 0.75rem;
-        }
+            .checkbox-input:checked + .checkbox-custom svg {
+                display: block;
+            }
 
-        .divider::before,
-        .divider::after {
-            content: '';
-            flex: 1;
-            height: 1px;
-            background: var(--border);
-        }
+            .checkbox-custom svg {
+                display: none;
+                color: white;
+            }
 
-        .divider span {
-            padding: 0 1rem;
-        }
+            .forgot-link {
+                font-size: 0.875rem;
+                color: var(--primary);
+                text-decoration: none;
+                transition: color 0.2s ease;
+            }
 
-        .social-login {
-            display: flex;
-            gap: 0.75rem;
-        }
+            .forgot-link:hover {
+                color: var(--primary-hover);
+                text-decoration: underline;
+            }
 
-        .social-btn {
-            flex: 1;
-            padding: 0.75rem;
-            background: var(--bg);
-            border: 1px solid var(--border);
-            border-radius: 8px;
-            color: var(--text);
-            font-size: 0.875rem;
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            gap: 0.5rem;
-            transition: border-color 0.2s, background 0.2s;
-        }
+            /* Buttons */
+            .btn {
+                width: 100%;
+                padding: 0.875rem 1.25rem;
+                border-radius: 10px;
+                font-size: 1rem;
+                font-weight: 600;
+                cursor: pointer;
+                transition: all 0.2s ease;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                gap: 0.5rem;
+            }
 
-        .social-btn:hover {
-            border-color: var(--primary);
-            background: var(--surface);
-        }
-    </style>
-</head>
-<body>
-    <div class="login-container">
-        <div class="login-header">
-            <div class="login-logo">🤖</div>
-            <h1 class="login-title">Welcome Back</h1>
-            <p class="login-subtitle">Sign in to General Bots Suite</p>
-        </div>
+            .btn-primary {
+                background: linear-gradient(135deg, var(--primary), #6366f1);
+                color: white;
+                border: none;
+                box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
+            }
 
-        <div class="login-form">
-            {% if let Some(error) = error %}
-            <div class="error-message visible">{{ error }}</div>
-            {% else %}
-            <div class="error-message" id="error-message"></div>
-            {% endif %}
+            .btn-primary:hover:not(:disabled) {
+                transform: translateY(-1px);
+                box-shadow: 0 6px 20px rgba(59, 130, 246, 0.4);
+            }
 
-            <form hx-post="/api/auth/login"
-                  hx-target="#error-message"
-                  hx-swap="outerHTML"
-                  hx-indicator=".login-btn">
+            .btn-primary:active:not(:disabled) {
+                transform: translateY(0);
+            }
 
-                <div class="form-group">
-                    <label class="form-label" for="email">Email</label>
-                    <input type="email"
-                           id="email"
-                           name="email"
-                           class="form-input"
-                           placeholder="you@example.com"
-                           required
-                           autocomplete="email">
-                </div>
+            .btn-primary:disabled {
+                opacity: 0.6;
+                cursor: not-allowed;
+            }
 
-                <div class="form-group">
-                    <label class="form-label" for="password">Password</label>
-                    <input type="password"
-                           id="password"
-                           name="password"""
-                           class="form-input"
-                           placeholder="••••••••"
-                           required
-                           autocomplete="current-password">
-                </div>
+            .btn-text {
+                transition: opacity 0.2s ease;
+            }
 
-                <div class="form-group">
-                    <label class="form-checkbox">
-                        <input type="checkbox" name="remember" value="true">
-                        <span>Remember me for 30 days</span>
-                    </label>
-                </div>
+            .btn.loading .btn-text {
+                opacity: 0;
+            }
 
-                <button type="submit" class="login-btn">
-                    <span class="btn-text">Sign In</span>
-                    <div class="spinner htmx-indicator"></div>
-                </button>
-            </form>
+            .btn.loading .spinner {
+                display: block;
+            }
 
-            <div class="divider">
-                <span>or continue with</span>
-            </div>
+            .spinner {
+                display: none;
+                position: absolute;
+                width: 22px;
+                height: 22px;
+                border: 2px solid transparent;
+                border-top-color: white;
+                border-radius: 50%;
+                animation: spin 0.8s linear infinite;
+            }
 
-            <div class="social-login">
-                <button type="button" class="social-btn"
-                        hx-get="/api/auth/oauth/google"
-                        hx-swap="none">
-                    <svg width="18" height="18" viewBox="0 0 24 24">
-                        <path fill="currentColor" d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"/>
-                        <path fill="currentColor" d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"/>
-                        <path fill="currentColor" d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"/>
-                        <path fill="currentColor" d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"/>
-                    </svg>
-                    Google
-                </button>
-                <button type="button" class="social-btn"
-                        hx-get="/api/auth/oauth/microsoft"
-                        hx-swap="none">
-                    <svg width="18" height="18" viewBox="0 0 24 24">
-                        <path fill="currentColor" d="M11.4 24H0V12.6h11.4V24zM24 24H12.6V12.6H24V24zM11.4 11.4H0V0h11.4v11.4zm12.6 0H12.6V0H24v11.4z"/>
-                    </svg>
-                    Microsoft
-                </button>
-            </div>
-        </div>
-
-        <div class="login-footer">
-            <p>Don't have an account? <a href="/auth/register">Sign up</a></p>
-            <p style="margin-top: 0.5rem;"><a href="/auth/forgot-password">Forgot password?</a></p>
-        </div>
-    </div>
-
-    <script>
-        // Handle successful login redirect
-        document.body.addEventListener('htmx:afterRequest', function(event) {
-            if (event.detail.successful && event.detail.xhr.status === 200) {
-                const response = event.detail.xhr.response;
-                if (response && response.includes('redirect')) {
-                    window.location.href = '/';
+            @keyframes spin {
+                to {
+                    transform: rotate(360deg);
                 }
             }
-        });
-    </script>
-</body>
+
+            /* Divider */
+            .divider {
+                display: flex;
+                align-items: center;
+                margin: 1.75rem 0;
+                color: var(--text-secondary);
+                font-size: 0.8125rem;
+            }
+
+            .divider::before,
+            .divider::after {
+                content: "";
+                flex: 1;
+                height: 1px;
+                background: var(--border);
+            }
+
+            .divider span {
+                padding: 0 1rem;
+            }
+
+            /* Social Login */
+            .social-login {
+                display: grid;
+                grid-template-columns: 1fr 1fr;
+                gap: 0.75rem;
+            }
+
+            .social-btn {
+                padding: 0.75rem 1rem;
+                background: var(--bg);
+                border: 1px solid var(--border);
+                border-radius: 10px;
+                color: var(--text);
+                font-size: 0.875rem;
+                font-weight: 500;
+                cursor: pointer;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                gap: 0.625rem;
+                transition: all 0.2s ease;
+            }
+
+            .social-btn:hover {
+                border-color: var(--primary);
+                background: var(--surface-hover);
+            }
+
+            .social-btn:active {
+                transform: scale(0.98);
+            }
+
+            .social-btn.google:hover {
+                border-color: #ea4335;
+            }
+
+            .social-btn.microsoft:hover {
+                border-color: #00a4ef;
+            }
+
+            .social-btn.github:hover {
+                border-color: #6e5494;
+            }
+
+            .social-btn.apple:hover {
+                border-color: #a2aaad;
+            }
+
+            /* Footer */
+            .login-footer {
+                text-align: center;
+                margin-top: 1.75rem;
+                font-size: 0.9375rem;
+                color: var(--text-secondary);
+            }
+
+            .login-footer a {
+                color: var(--primary);
+                text-decoration: none;
+                font-weight: 500;
+            }
+
+            .login-footer a:hover {
+                text-decoration: underline;
+            }
+
+            /* 2FA Section */
+            .twofa-section {
+                display: none;
+            }
+
+            .twofa-section.visible {
+                display: block;
+            }
+
+            .twofa-header {
+                text-align: center;
+                margin-bottom: 1.5rem;
+            }
+
+            .twofa-icon {
+                width: 56px;
+                height: 56px;
+                margin: 0 auto 1rem;
+                background: var(--primary-light);
+                border-radius: 14px;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                color: var(--primary);
+            }
+
+            .twofa-title {
+                font-size: 1.25rem;
+                font-weight: 600;
+                margin-bottom: 0.375rem;
+            }
+
+            .twofa-subtitle {
+                font-size: 0.875rem;
+                color: var(--text-secondary);
+            }
+
+            .code-input-group {
+                display: flex;
+                gap: 0.5rem;
+                justify-content: center;
+                margin-bottom: 1.5rem;
+            }
+
+            .code-input {
+                width: 48px;
+                height: 56px;
+                text-align: center;
+                font-size: 1.5rem;
+                font-weight: 600;
+                background: var(--bg);
+                border: 2px solid var(--border);
+                border-radius: 10px;
+                color: var(--text);
+                transition: all 0.2s ease;
+            }
+
+            .code-input:focus {
+                outline: none;
+                border-color: var(--primary);
+                box-shadow: 0 0 0 3px var(--primary-light);
+            }
+
+            .code-input.filled {
+                border-color: var(--primary);
+                background: var(--primary-light);
+            }
+
+            .resend-section {
+                text-align: center;
+                margin-top: 1rem;
+            }
+
+            .resend-text {
+                font-size: 0.875rem;
+                color: var(--text-secondary);
+            }
+
+            .resend-btn {
+                background: none;
+                border: none;
+                color: var(--primary);
+                font-size: 0.875rem;
+                font-weight: 500;
+                cursor: pointer;
+                padding: 0;
+            }
+
+            .resend-btn:hover {
+                text-decoration: underline;
+            }
+
+            .resend-btn:disabled {
+                color: var(--text-secondary);
+                cursor: not-allowed;
+                text-decoration: none;
+            }
+
+            .back-btn {
+                display: flex;
+                align-items: center;
+                gap: 0.375rem;
+                background: none;
+                border: none;
+                color: var(--text-secondary);
+                font-size: 0.875rem;
+                cursor: pointer;
+                padding: 0;
+                margin-top: 1.25rem;
+            }
+
+            .back-btn:hover {
+                color: var(--text);
+            }
+
+            /* Trust Device */
+            .trust-device {
+                display: flex;
+                align-items: flex-start;
+                gap: 0.75rem;
+                padding: 0.875rem;
+                background: var(--bg);
+                border-radius: 10px;
+                margin-bottom: 1.25rem;
+            }
+
+            .trust-device input {
+                margin-top: 0.125rem;
+            }
+
+            .trust-device-text {
+                flex: 1;
+            }
+
+            .trust-device-title {
+                font-size: 0.875rem;
+                font-weight: 500;
+                color: var(--text);
+                margin-bottom: 0.125rem;
+            }
+
+            .trust-device-desc {
+                font-size: 0.75rem;
+                color: var(--text-secondary);
+            }
+
+            /* Responsive */
+            @media (max-width: 480px) {
+                .login-container {
+                    padding: 1rem;
+                }
+
+                .login-card {
+                    padding: 1.25rem;
+                }
+
+                .social-login {
+                    grid-template-columns: 1fr;
+                }
+
+                .code-input {
+                    width: 42px;
+                    height: 50px;
+                    font-size: 1.25rem;
+                }
+            }
+        </style>
+    </head>
+    <body>
+        <div class="login-container">
+            <div class="login-header">
+                <div class="login-logo">🤖</div>
+                <h1 class="login-title">Welcome Back</h1>
+                <p class="login-subtitle">
+                    Sign in to your General Bots account
+                </p>
+            </div>
+
+            <div class="login-card">
+                <!-- Login Form Section -->
+                <div id="login-section">
+                    <div class="message-box error" id="error-message">
+                        <svg
+                            width="18"
+                            height="18"
+                            viewBox="0 0 24 24"
+                            fill="none"
+                            stroke="currentColor"
+                            stroke-width="2"
+                        >
+                            <circle cx="12" cy="12" r="10"></circle>
+                            <line x1="15" y1="9" x2="9" y2="15"></line>
+                            <line x1="9" y1="9" x2="15" y2="15"></line>
+                        </svg>
+                        <span id="error-text">Invalid email or password</span>
+                    </div>
+
+                    <form
+                        id="login-form"
+                        hx-post="/api/auth/login"
+                        hx-target="#login-response"
+                        hx-swap="innerHTML"
+                        hx-indicator="#login-btn"
+                    >
+                        <div class="form-group">
+                            <label class="form-label" for="email"
+                                >Email Address</label
+                            >
+                            <div class="input-wrapper">
+                                <svg
+                                    class="input-icon"
+                                    width="18"
+                                    height="18"
+                                    viewBox="0 0 24 24"
+                                    fill="none"
+                                    stroke="currentColor"
+                                    stroke-width="2"
+                                >
+                                    <path
+                                        d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"
+                                    ></path>
+                                    <polyline
+                                        points="22,6 12,13 2,6"
+                                    ></polyline>
+                                </svg>
+                                <input
+                                    type="email"
+                                    id="email"
+                                    name="email"
+                                    class="form-input"
+                                    placeholder="you@example.com"
+                                    required
+                                    autocomplete="email"
+                                />
+                            </div>
+                        </div>
+
+                        <div class="form-group">
+                            <label class="form-label" for="password"
+                                >Password</label
+                            >
+                            <div class="input-wrapper">
+                                <svg
+                                    class="input-icon"
+                                    width="18"
+                                    height="18"
+                                    viewBox="0 0 24 24"
+                                    fill="none"
+                                    stroke="currentColor"
+                                    stroke-width="2"
+                                >
+                                    <rect
+                                        x="3"
+                                        y="11"
+                                        width="18"
+                                        height="11"
+                                        rx="2"
+                                        ry="2"
+                                    ></rect>
+                                    <path d="M7 11V7a5 5 0 0 1 10 0v4"></path>
+                                </svg>
+                                <input
+                                    type="password"
+                                    id="password"
+                                    name="password"
+                                    class="form-input"
+                                    placeholder="••••••••"
+                                    required
+                                    autocomplete="current-password"
+                                />
+                                <button
+                                    type="button"
+                                    class="password-toggle"
+                                    onclick="togglePassword()"
+                                >
+                                    <svg
+                                        id="eye-icon"
+                                        width="18"
+                                        height="18"
+                                        viewBox="0 0 24 24"
+                                        fill="none"
+                                        stroke="currentColor"
+                                        stroke-width="2"
+                                    >
+                                        <path
+                                            d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"
+                                        ></path>
+                                        <circle cx="12" cy="12" r="3"></circle>
+                                    </svg>
+                                    <svg
+                                        id="eye-off-icon"
+                                        width="18"
+                                        height="18"
+                                        viewBox="0 0 24 24"
+                                        fill="none"
+                                        stroke="currentColor"
+                                        stroke-width="2"
+                                        style="display: none"
+                                    >
+                                        <path
+                                            d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24"
+                                        ></path>
+                                        <line
+                                            x1="1"
+                                            y1="1"
+                                            x2="23"
+                                            y2="23"
+                                        ></line>
+                                    </svg>
+                                </button>
+                            </div>
+                        </div>
+
+                        <div class="form-row">
+                            <label class="checkbox-label">
+                                <input
+                                    type="checkbox"
+                                    name="remember"
+                                    value="true"
+                                    class="checkbox-input"
+                                />
+                                <span class="checkbox-custom">
+                                    <svg
+                                        width="12"
+                                        height="12"
+                                        viewBox="0 0 24 24"
+                                        fill="none"
+                                        stroke="currentColor"
+                                        stroke-width="3"
+                                    >
+                                        <polyline
+                                            points="20 6 9 17 4 12"
+                                        ></polyline>
+                                    </svg>
+                                </span>
+                                <span>Remember me</span>
+                            </label>
+                            <a href="/auth/forgot-password" class="forgot-link"
+                                >Forgot password?</a
+                            >
+                        </div>
+
+                        <button
+                            type="submit"
+                            class="btn btn-primary"
+                            id="login-btn"
+                        >
+                            <span class="btn-text">Sign In</span>
+                            <div class="spinner"></div>
+                        </button>
+                    </form>
+
+                    <div id="login-response"></div>
+
+                    <div class="divider">
+                        <span>or continue with</span>
+                    </div>
+
+                    <div class="social-login">
+                        <button
+                            type="button"
+                            class="social-btn google"
+                            onclick="oauthLogin('google')"
+                        >
+                            <svg width="18" height="18" viewBox="0 0 24 24">
+                                <path
+                                    fill="#EA4335"
+                                    d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"
+                                />
+                                <path
+                                    fill="#34A853"
+                                    d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"
+                                />
+                                <path
+                                    fill="#FBBC05"
+                                    d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"
+                                />
+                                <path
+                                    fill="#4285F4"
+                                    d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"
+                                />
+                            </svg>
+                            Google
+                        </button>
+                        <button
+                            type="button"
+                            class="social-btn microsoft"
+                            onclick="oauthLogin('microsoft')"
+                        >
+                            <svg width="18" height="18" viewBox="0 0 24 24">
+                                <path fill="#F25022" d="M1 1h10v10H1z" />
+                                <path fill="#00A4EF" d="M13 1h10v10H13z" />
+                                <path fill="#7FBA00" d="M1 13h10v10H1z" />
+                                <path fill="#FFB900" d="M13 13h10v10H13z" />
+                            </svg>
+                            Microsoft
+                        </button>
+                        <button
+                            type="button"
+                            class="social-btn github"
+                            onclick="oauthLogin('github')"
+                        >
+                            <svg
+                                width="18"
+                                height="18"
+                                viewBox="0 0 24 24"
+                                fill="currentColor"
+                            >
+                                <path
+                                    d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"
+                                />
+                            </svg>
+                            GitHub
+                        </button>
+                        <button
+                            type="button"
+                            class="social-btn apple"
+                            onclick="oauthLogin('apple')"
+                        >
+                            <svg
+                                width="18"
+                                height="18"
+                                viewBox="0 0 24 24"
+                                fill="currentColor"
+                            >
+                                <path
+                                    d="M18.71 19.5c-.83 1.24-1.71 2.45-3.05 2.47-1.34.03-1.77-.79-3.29-.79-1.53 0-2 .77-3.27.82-1.31.05-2.3-1.32-3.14-2.53C4.25 17 2.94 12.45 4.7 9.39c.87-1.52 2.43-2.48 4.12-2.51 1.28-.02 2.5.87 3.29.87.78 0 2.26-1.07 3.81-.91.65.03 2.47.26 3.64 1.98-.09.06-2.17 1.28-2.15 3.81.03 3.02 2.65 4.03 2.68 4.04-.03.07-.42 1.44-1.38 2.83M13 3.5c.73-.83 1.94-1.46 2.94-1.5.13 1.17-.34 2.35-1.04 3.19-.69.85-1.83 1.51-2.95 1.42-.15-1.15.41-2.35 1.05-3.11z"
+                                />
+                            </svg>
+                            Apple
+                        </button>
+                    </div>
+                </div>
+
+                <!-- 2FA Challenge Section -->
+                <div id="twofa-section" class="twofa-section">
+                    <div class="twofa-header">
+                        <div class="twofa-icon">
+                            <svg
+                                width="28"
+                                height="28"
+                                viewBox="0 0 24 24"
+                                fill="none"
+                                stroke="currentColor"
+                                stroke-width="2"
+                            >
+                                <rect
+                                    x="3"
+                                    y="11"
+                                    width="18"
+                                    height="11"
+                                    rx="2"
+                                    ry="2"
+                                ></rect>
+                                <path d="M7 11V7a5 5 0 0 1 10 0v4"></path>
+                            </svg>
+                        </div>
+                        <h2 class="twofa-title">Two-Factor Authentication</h2>
+                        <p class="twofa-subtitle">
+                            Enter the 6-digit code from your authenticator app
+                        </p>
+                    </div>
+
+                    <form
+                        id="twofa-form"
+                        hx-post="/api/auth/2fa/verify"
+                        hx-target="#twofa-response"
+                        hx-swap="innerHTML"
+                        hx-indicator="#verify-btn"
+                    >
+                        <input
+                            type="hidden"
+                            name="session_token"
+                            id="session-token"
+                        />
+
+                        <div class="code-input-group">
+                            <input
+                                type="text"
+                                class="code-input"
+                                maxlength="1"
+                                data-index="0"
+                                inputmode="numeric"
+                                pattern="[0-9]"
+                            />
+                            <input
+                                type="text"
+                                class="code-input"
+                                maxlength="1"
+                                data-index="1"
+                                inputmode="numeric"
+                                pattern="[0-9]"
+                            />
+                            <input
+                                type="text"
+                                class="code-input"
+                                maxlength="1"
+                                data-index="2"
+                                inputmode="numeric"
+                                pattern="[0-9]"
+                            />
+                            <input
+                                type="text"
+                                class="code-input"
+                                maxlength="1"
+                                data-index="3"
+                                inputmode="numeric"
+                                pattern="[0-9]"
+                            />
+                            <input
+                                type="text"
+                                class="code-input"
+                                maxlength="1"
+                                data-index="4"
+                                inputmode="numeric"
+                                pattern="[0-9]"
+                            />
+                            <input
+                                type="text"
+                                class="code-input"
+                                maxlength="1"
+                                data-index="5"
+                                inputmode="numeric"
+                                pattern="[0-9]"
+                            />
+                        </div>
+
+                        <input type="hidden" name="code" id="full-code" />
+
+                        <div class="trust-device">
+                            <input
+                                type="checkbox"
+                                name="trust_device"
+                                id="trust-device"
+                                value="true"
+                            />
+                            <div class="trust-device-text">
+                                <label
+                                    for="trust-device"
+                                    class="trust-device-title"
+                                    >Trust this device</label
+                                >
+                                <p class="trust-device-desc">
+                                    Don't ask for 2FA on this device for 30 days
+                                </p>
+                            </div>
+                        </div>
+
+                        <button
+                            type="submit"
+                            class="btn btn-primary"
+                            id="verify-btn"
+                        >
+                            <span class="btn-text">Verify Code</span>
+                            <div class="spinner"></div>
+                        </button>
+                    </form>
+
+                    <div id="twofa-response"></div>
+
+                    <div class="resend-section">
+                        <span class="resend-text">Didn't receive a code? </span>
+                        <button
+                            type="button"
+                            class="resend-btn"
+                            id="resend-btn"
+                            onclick="resendCode()"
+                        >
+                            Resend code
+                        </button>
+                    </div>
+
+                    <button
+                        type="button"
+                        class="back-btn"
+                        onclick="backToLogin()"
+                    >
+                        <svg
+                            width="16"
+                            height="16"
+                            viewBox="0 0 24 24"
+                            fill="none"
+                            stroke="currentColor"
+                            stroke-width="2"
+                        >
+                            <line x1="19" y1="12" x2="5" y2="12"></line>
+                            <polyline points="12 19 5 12 12 5"></polyline>
+                        </svg>
+                        Back to login
+                    </button>
+                </div>
+            </div>
+
+            <div class="login-footer">
+                <p>
+                    Don't have an account?
+                    <a href="/auth/register">Create account</a>
+                </p>
+            </div>
+        </div>
+
+        <script>
+            // Password visibility toggle
+            function togglePassword() {
+                const passwordInput = document.getElementById("password");
+                const eyeIcon = document.getElementById("eye-icon");
+                const eyeOffIcon = document.getElementById("eye-off-icon");
+
+                if (passwordInput.type === "password") {
+                    passwordInput.type = "text";
+                    eyeIcon.style.display = "none";
+                    eyeOffIcon.style.display = "block";
+                } else {
+                    passwordInput.type = "password";
+                    eyeIcon.style.display = "block";
+                    eyeOffIcon.style.display = "none";
+                }
+            }
+
+            // OAuth login
+            function oauthLogin(provider) {
+                window.location.href = `/api/auth/oauth/${provider}`;
+            }
+
+            // Show 2FA challenge
+            function showTwoFAChallenge(sessionToken) {
+                document.getElementById("login-section").style.display = "none";
+                document
+                    .getElementById("twofa-section")
+                    .classList.add("visible");
+                document.getElementById("session-token").value = sessionToken;
+
+                // Focus first code input
+                document.querySelector('.code-input[data-index="0"]').focus();
+            }
+
+            // Back to login
+            function backToLogin() {
+                document.getElementById("login-section").style.display =
+                    "block";
+                document
+                    .getElementById("twofa-section")
+                    .classList.remove("visible");
+
+                // Clear code inputs
+                document.querySelectorAll(".code-input").forEach((input) => {
+                    input.value = "";
+                    input.classList.remove("filled");
+                });
+            }
+
+            // 2FA Code input handling
+            const codeInputs = document.querySelectorAll(".code-input");
+
+            codeInputs.forEach((input, index) => {
+                input.addEventListener("input", (e) => {
+                    const value = e.target.value;
+
+                    // Only allow numbers
+                    e.target.value = value.replace(/[^0-9]/g, "");
+
+                    if (e.target.value) {
+                        e.target.classList.add("filled");
+                        // Move to next input
+                        if (index < codeInputs.length - 1) {
+                            codeInputs[index + 1].focus();
+                        }
+                    } else {
+                        e.target.classList.remove("filled");
+                    }
+
+                    // Update hidden full code
+                    updateFullCode();
+                });
+
+                input.addEventListener("keydown", (e) => {
+                    // Handle backspace
+                    if (e.key === "Backspace" && !e.target.value && index > 0) {
+                        codeInputs[index - 1].focus();
+                    }
+
+                    // Handle paste
+                    if (e.key === "v" && (e.ctrlKey || e.metaKey)) {
+                        e.preventDefault();
+                        navigator.clipboard.readText().then((text) => {
+                            const code = text
+                                .replace(/[^0-9]/g, "")
+                                .slice(0, 6);
+                            code.split("").forEach((char, i) => {
+                                if (codeInputs[i]) {
+                                    codeInputs[i].value = char;
+                                    codeInputs[i].classList.add("filled");
+                                }
+                            });
+                            updateFullCode();
+                            if (code.length === 6) {
+                                codeInputs[5].focus();
+                            }
+                        });
+                    }
+                });
+
+                // Handle paste directly on input
+                input.addEventListener("paste", (e) => {
+                    e.preventDefault();
+                    const text = e.clipboardData.getData("text");
+                    const code = text.replace(/[^0-9]/g, "").slice(0, 6);
+                    code.split("").forEach((char, i) => {
+                        if (codeInputs[i]) {
+                            codeInputs[i].value = char;
+                            codeInputs[i].classList.add("filled");
+                        }
+                    });
+                    updateFullCode();
+                    if (code.length === 6) {
+                        codeInputs[5].focus();
+                    }
+                });
+            });
+
+            function updateFullCode() {
+                const code = Array.from(codeInputs)
+                    .map((input) => input.value)
+                    .join("");
+                document.getElementById("full-code").value = code;
+            }
+
+            // Resend code with cooldown
+            let resendCooldown = 0;
+            function resendCode() {
+                if (resendCooldown > 0) return;
+
+                const sessionToken =
+                    document.getElementById("session-token").value;
+                fetch("/api/auth/2fa/resend", {
+                    method: "POST",
+                    headers: { "Content-Type": "application/json" },
+                    body: JSON.stringify({ session_token: sessionToken }),
+                });
+
+                // Start cooldown
+                resendCooldown = 60;
+                const resendBtn = document.getElementById("resend-btn");
+                resendBtn.disabled = true;
+
+                const interval = setInterval(() => {
+                    resendCooldown--;
+                    resendBtn.textContent = `Resend code (${resendCooldown}s)`;
+
+                    if (resendCooldown <= 0) {
+                        clearInterval(interval);
+                        resendBtn.textContent = "Resend code";
+                        resendBtn.disabled = false;
+                    }
+                }, 1000);
+            }
+
+            // Show error message
+            function showError(message) {
+                const errorBox = document.getElementById("error-message");
+                const errorText = document.getElementById("error-text");
+                errorText.textContent = message;
+                errorBox.classList.add("visible");
+            }
+
+            // Hide error message
+            function hideError() {
+                document
+                    .getElementById("error-message")
+                    .classList.remove("visible");
+            }
+
+            // Loading state
+            function setLoading(btnId, loading) {
+                const btn = document.getElementById(btnId);
+                if (loading) {
+                    btn.classList.add("loading");
+                    btn.disabled = true;
+                } else {
+                    btn.classList.remove("loading");
+                    btn.disabled = false;
+                }
+            }
+
+            // Handle HTMX events
+            document.body.addEventListener(
+                "htmx:beforeRequest",
+                function (event) {
+                    hideError();
+                    if (event.target.id === "login-form") {
+                        setLoading("login-btn", true);
+                    } else if (event.target.id === "twofa-form") {
+                        setLoading("verify-btn", true);
+                    }
+                },
+            );
+
+            document.body.addEventListener(
+                "htmx:afterRequest",
+                function (event) {
+                    if (event.target.id === "login-form") {
+                        setLoading("login-btn", false);
+                    } else if (event.target.id === "twofa-form") {
+                        setLoading("verify-btn", false);
+                    }
+
+                    if (event.detail.successful) {
+                        try {
+                            const response = JSON.parse(
+                                event.detail.xhr.responseText,
+                            );
+
+                            // Check if 2FA is required
+                            if (response.requires_2fa) {
+                                showTwoFAChallenge(response.session_token);
+                                return;
+                            }
+
+                            // Successful login - redirect
+                            if (response.redirect || response.success) {
+                                window.location.href = response.redirect || "/";
+                            }
+                        } catch (e) {
+                            // If response is not JSON, check for redirect header
+                            if (event.detail.xhr.status === 200) {
+                                window.location.href = "/";
+                            }
+                        }
+                    } else {
+                        // Show error
+                        try {
+                            const response = JSON.parse(
+                                event.detail.xhr.responseText,
+                            );
+                            showError(
+                                response.error ||
+                                    "An error occurred. Please try again.",
+                            );
+                        } catch (e) {
+                            showError("An error occurred. Please try again.");
+                        }
+                    }
+                },
+            );
+
+            // Clear error when user starts typing
+            document.querySelectorAll(".form-input").forEach((input) => {
+                input.addEventListener("input", hideError);
+            });
+        </script>
+    </body>
 </html>
diff --git a/ui/suite/auth/register.html b/ui/suite/auth/register.html
new file mode 100644
index 0000000..9d57cca
--- /dev/null
+++ b/ui/suite/auth/register.html
@@ -0,0 +1,1322 @@
+<!doctype html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <title>Create Account - General Bots</title>
+        <script src="/js/vendor/htmx.min.js"></script>
+        <style>
+            :root {
+                --primary: #3b82f6;
+                --primary-hover: #2563eb;
+                --primary-light: rgba(59, 130, 246, 0.1);
+                --bg: #0f172a;
+                --surface: #1e293b;
+                --surface-hover: #334155;
+                --border: #334155;
+                --text: #f8fafc;
+                --text-secondary: #94a3b8;
+                --error: #ef4444;
+                --success: #22c55e;
+                --warning: #f59e0b;
+            }
+
+            * {
+                margin: 0;
+                padding: 0;
+                box-sizing: border-box;
+            }
+
+            body {
+                font-family:
+                    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
+                    sans-serif;
+                background: var(--bg);
+                color: var(--text);
+                min-height: 100vh;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                background-image:
+                    radial-gradient(
+                        ellipse at top,
+                        rgba(59, 130, 246, 0.1) 0%,
+                        transparent 50%
+                    ),
+                    radial-gradient(
+                        ellipse at bottom,
+                        rgba(139, 92, 246, 0.1) 0%,
+                        transparent 50%
+                    );
+            }
+
+            .register-container {
+                width: 100%;
+                max-width: 440px;
+                padding: 2rem;
+            }
+
+            .register-header {
+                text-align: center;
+                margin-bottom: 2rem;
+            }
+
+            .register-logo {
+                width: 72px;
+                height: 72px;
+                margin: 0 auto 1.25rem;
+                background: linear-gradient(135deg, var(--primary), #8b5cf6);
+                border-radius: 18px;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                font-size: 2rem;
+                box-shadow: 0 8px 32px rgba(59, 130, 246, 0.3);
+            }
+
+            .register-title {
+                font-size: 1.75rem;
+                font-weight: 700;
+                margin-bottom: 0.5rem;
+                background: linear-gradient(
+                    135deg,
+                    var(--text),
+                    var(--text-secondary)
+                );
+                -webkit-background-clip: text;
+                -webkit-text-fill-color: transparent;
+                background-clip: text;
+            }
+
+            .register-subtitle {
+                color: var(--text-secondary);
+                font-size: 0.9375rem;
+            }
+
+            .register-card {
+                background: var(--surface);
+                border: 1px solid var(--border);
+                border-radius: 16px;
+                padding: 1.75rem;
+                box-shadow: 0 4px 24px rgba(0, 0, 0, 0.2);
+            }
+
+            /* Message Box */
+            .message-box {
+                padding: 0.875rem 1rem;
+                border-radius: 10px;
+                margin-bottom: 1.25rem;
+                font-size: 0.875rem;
+                display: none;
+                align-items: flex-start;
+                gap: 0.625rem;
+            }
+
+            .message-box.visible {
+                display: flex;
+            }
+
+            .message-box.error {
+                background: rgba(239, 68, 68, 0.1);
+                border: 1px solid rgba(239, 68, 68, 0.3);
+                color: var(--error);
+            }
+
+            .message-box.success {
+                background: rgba(34, 197, 94, 0.1);
+                border: 1px solid rgba(34, 197, 94, 0.3);
+                color: var(--success);
+            }
+
+            .message-box svg {
+                flex-shrink: 0;
+                margin-top: 0.125rem;
+            }
+
+            /* Form Styles */
+            .form-row {
+                display: grid;
+                grid-template-columns: 1fr 1fr;
+                gap: 1rem;
+            }
+
+            .form-group {
+                margin-bottom: 1.25rem;
+            }
+
+            .form-label {
+                display: block;
+                font-size: 0.875rem;
+                font-weight: 500;
+                margin-bottom: 0.5rem;
+                color: var(--text);
+            }
+
+            .input-wrapper {
+                position: relative;
+            }
+
+            .input-icon {
+                position: absolute;
+                left: 1rem;
+                top: 50%;
+                transform: translateY(-50%);
+                color: var(--text-secondary);
+                pointer-events: none;
+            }
+
+            .form-input {
+                width: 100%;
+                padding: 0.875rem 1rem 0.875rem 2.75rem;
+                background: var(--bg);
+                border: 1px solid var(--border);
+                border-radius: 10px;
+                color: var(--text);
+                font-size: 1rem;
+                transition: all 0.2s ease;
+            }
+
+            .form-input:focus {
+                outline: none;
+                border-color: var(--primary);
+                box-shadow: 0 0 0 3px var(--primary-light);
+            }
+
+            .form-input::placeholder {
+                color: var(--text-secondary);
+            }
+
+            .form-input.error {
+                border-color: var(--error);
+            }
+
+            .form-input.valid {
+                border-color: var(--success);
+            }
+
+            .password-toggle {
+                position: absolute;
+                right: 1rem;
+                top: 50%;
+                transform: translateY(-50%);
+                background: none;
+                border: none;
+                color: var(--text-secondary);
+                cursor: pointer;
+                padding: 0.25rem;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+            }
+
+            .password-toggle:hover {
+                color: var(--text);
+            }
+
+            /* Password Strength */
+            .password-strength {
+                margin-top: 0.5rem;
+            }
+
+            .strength-bars {
+                display: flex;
+                gap: 0.25rem;
+                margin-bottom: 0.375rem;
+            }
+
+            .strength-bar {
+                flex: 1;
+                height: 4px;
+                background: var(--border);
+                border-radius: 2px;
+                transition: background 0.3s ease;
+            }
+
+            .strength-bar.active.weak {
+                background: var(--error);
+            }
+
+            .strength-bar.active.fair {
+                background: var(--warning);
+            }
+
+            .strength-bar.active.good {
+                background: #22c55e;
+            }
+
+            .strength-bar.active.strong {
+                background: #10b981;
+            }
+
+            .strength-text {
+                font-size: 0.75rem;
+                color: var(--text-secondary);
+            }
+
+            .strength-text.weak {
+                color: var(--error);
+            }
+
+            .strength-text.fair {
+                color: var(--warning);
+            }
+
+            .strength-text.good {
+                color: #22c55e;
+            }
+
+            .strength-text.strong {
+                color: #10b981;
+            }
+
+            /* Password Requirements */
+            .password-requirements {
+                margin-top: 0.75rem;
+                padding: 0.75rem;
+                background: var(--bg);
+                border-radius: 8px;
+            }
+
+            .requirement {
+                display: flex;
+                align-items: center;
+                gap: 0.5rem;
+                font-size: 0.75rem;
+                color: var(--text-secondary);
+                margin-bottom: 0.375rem;
+            }
+
+            .requirement:last-child {
+                margin-bottom: 0;
+            }
+
+            .requirement svg {
+                flex-shrink: 0;
+            }
+
+            .requirement.met {
+                color: var(--success);
+            }
+
+            .requirement.met svg {
+                color: var(--success);
+            }
+
+            /* Terms Checkbox */
+            .terms-group {
+                margin-bottom: 1.5rem;
+            }
+
+            .checkbox-label {
+                display: flex;
+                align-items: flex-start;
+                gap: 0.75rem;
+                font-size: 0.875rem;
+                color: var(--text-secondary);
+                cursor: pointer;
+                line-height: 1.4;
+            }
+
+            .checkbox-input {
+                display: none;
+            }
+
+            .checkbox-custom {
+                width: 20px;
+                height: 20px;
+                min-width: 20px;
+                border: 2px solid var(--border);
+                border-radius: 4px;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                transition: all 0.2s ease;
+                margin-top: 0.125rem;
+            }
+
+            .checkbox-input:checked + .checkbox-custom {
+                background: var(--primary);
+                border-color: var(--primary);
+            }
+
+            .checkbox-input:checked + .checkbox-custom svg {
+                display: block;
+            }
+
+            .checkbox-custom svg {
+                display: none;
+                color: white;
+            }
+
+            .terms-text a {
+                color: var(--primary);
+                text-decoration: none;
+            }
+
+            .terms-text a:hover {
+                text-decoration: underline;
+            }
+
+            /* Buttons */
+            .btn {
+                width: 100%;
+                padding: 0.875rem 1.25rem;
+                border-radius: 10px;
+                font-size: 1rem;
+                font-weight: 600;
+                cursor: pointer;
+                transition: all 0.2s ease;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                gap: 0.5rem;
+                position: relative;
+            }
+
+            .btn-primary {
+                background: linear-gradient(135deg, var(--primary), #6366f1);
+                color: white;
+                border: none;
+                box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
+            }
+
+            .btn-primary:hover:not(:disabled) {
+                transform: translateY(-1px);
+                box-shadow: 0 6px 20px rgba(59, 130, 246, 0.4);
+            }
+
+            .btn-primary:active:not(:disabled) {
+                transform: translateY(0);
+            }
+
+            .btn-primary:disabled {
+                opacity: 0.6;
+                cursor: not-allowed;
+            }
+
+            .btn-text {
+                transition: opacity 0.2s ease;
+            }
+
+            .btn.loading .btn-text {
+                opacity: 0;
+            }
+
+            .btn.loading .spinner {
+                display: block;
+            }
+
+            .spinner {
+                display: none;
+                position: absolute;
+                width: 22px;
+                height: 22px;
+                border: 2px solid transparent;
+                border-top-color: white;
+                border-radius: 50%;
+                animation: spin 0.8s linear infinite;
+            }
+
+            @keyframes spin {
+                to {
+                    transform: rotate(360deg);
+                }
+            }
+
+            /* Divider */
+            .divider {
+                display: flex;
+                align-items: center;
+                margin: 1.75rem 0;
+                color: var(--text-secondary);
+                font-size: 0.8125rem;
+            }
+
+            .divider::before,
+            .divider::after {
+                content: "";
+                flex: 1;
+                height: 1px;
+                background: var(--border);
+            }
+
+            .divider span {
+                padding: 0 1rem;
+            }
+
+            /* Social Login */
+            .social-login {
+                display: grid;
+                grid-template-columns: 1fr 1fr;
+                gap: 0.75rem;
+            }
+
+            .social-btn {
+                padding: 0.75rem 1rem;
+                background: var(--bg);
+                border: 1px solid var(--border);
+                border-radius: 10px;
+                color: var(--text);
+                font-size: 0.875rem;
+                font-weight: 500;
+                cursor: pointer;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                gap: 0.625rem;
+                transition: all 0.2s ease;
+            }
+
+            .social-btn:hover {
+                border-color: var(--primary);
+                background: var(--surface-hover);
+            }
+
+            .social-btn:active {
+                transform: scale(0.98);
+            }
+
+            /* Footer */
+            .register-footer {
+                text-align: center;
+                margin-top: 1.75rem;
+                font-size: 0.9375rem;
+                color: var(--text-secondary);
+            }
+
+            .register-footer a {
+                color: var(--primary);
+                text-decoration: none;
+                font-weight: 500;
+            }
+
+            .register-footer a:hover {
+                text-decoration: underline;
+            }
+
+            /* Success State */
+            .success-section {
+                display: none;
+                text-align: center;
+                padding: 2rem 1rem;
+            }
+
+            .success-section.visible {
+                display: block;
+            }
+
+            .success-icon {
+                width: 72px;
+                height: 72px;
+                margin: 0 auto 1.5rem;
+                background: rgba(34, 197, 94, 0.1);
+                border-radius: 50%;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                color: var(--success);
+            }
+
+            .success-title {
+                font-size: 1.5rem;
+                font-weight: 600;
+                margin-bottom: 0.5rem;
+            }
+
+            .success-text {
+                color: var(--text-secondary);
+                margin-bottom: 1.5rem;
+                line-height: 1.5;
+            }
+
+            .success-email {
+                color: var(--primary);
+                font-weight: 500;
+            }
+
+            /* Responsive */
+            @media (max-width: 480px) {
+                .register-container {
+                    padding: 1rem;
+                }
+
+                .register-card {
+                    padding: 1.25rem;
+                }
+
+                .form-row {
+                    grid-template-columns: 1fr;
+                }
+
+                .social-login {
+                    grid-template-columns: 1fr;
+                }
+            }
+        </style>
+    </head>
+    <body>
+        <div class="register-container">
+            <div class="register-header">
+                <div class="register-logo">🤖</div>
+                <h1 class="register-title">Create Account</h1>
+                <p class="register-subtitle">
+                    Join General Bots and start building
+                </p>
+            </div>
+
+            <div class="register-card">
+                <!-- Registration Form -->
+                <div id="register-section">
+                    <div class="message-box error" id="error-message">
+                        <svg
+                            width="18"
+                            height="18"
+                            viewBox="0 0 24 24"
+                            fill="none"
+                            stroke="currentColor"
+                            stroke-width="2"
+                        >
+                            <circle cx="12" cy="12" r="10"></circle>
+                            <line x1="15" y1="9" x2="9" y2="15"></line>
+                            <line x1="9" y1="9" x2="15" y2="15"></line>
+                        </svg>
+                        <span id="error-text">An error occurred</span>
+                    </div>
+
+                    <form
+                        id="register-form"
+                        hx-post="/api/auth/register"
+                        hx-target="#register-response"
+                        hx-swap="innerHTML"
+                        hx-indicator="#register-btn"
+                    >
+                        <div class="form-row">
+                            <div class="form-group">
+                                <label class="form-label" for="first-name"
+                                    >First Name</label
+                                >
+                                <div class="input-wrapper">
+                                    <svg
+                                        class="input-icon"
+                                        width="18"
+                                        height="18"
+                                        viewBox="0 0 24 24"
+                                        fill="none"
+                                        stroke="currentColor"
+                                        stroke-width="2"
+                                    >
+                                        <path
+                                            d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"
+                                        ></path>
+                                        <circle cx="12" cy="7" r="4"></circle>
+                                    </svg>
+                                    <input
+                                        type="text"
+                                        id="first-name"
+                                        name="first_name"
+                                        class="form-input"
+                                        placeholder="John"
+                                        required
+                                        autocomplete="given-name"
+                                    />
+                                </div>
+                            </div>
+                            <div class="form-group">
+                                <label class="form-label" for="last-name"
+                                    >Last Name</label
+                                >
+                                <div class="input-wrapper">
+                                    <svg
+                                        class="input-icon"
+                                        width="18"
+                                        height="18"
+                                        viewBox="0 0 24 24"
+                                        fill="none"
+                                        stroke="currentColor"
+                                        stroke-width="2"
+                                    >
+                                        <path
+                                            d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"
+                                        ></path>
+                                        <circle cx="12" cy="7" r="4"></circle>
+                                    </svg>
+                                    <input
+                                        type="text"
+                                        id="last-name"
+                                        name="last_name"
+                                        class="form-input"
+                                        placeholder="Doe"
+                                        required
+                                        autocomplete="family-name"
+                                    />
+                                </div>
+                            </div>
+                        </div>
+
+                        <div class="form-group">
+                            <label class="form-label" for="email"
+                                >Email Address</label
+                            >
+                            <div class="input-wrapper">
+                                <svg
+                                    class="input-icon"
+                                    width="18"
+                                    height="18"
+                                    viewBox="0 0 24 24"
+                                    fill="none"
+                                    stroke="currentColor"
+                                    stroke-width="2"
+                                >
+                                    <path
+                                        d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"
+                                    ></path>
+                                    <polyline points="22,6 12,13 2,6"></polyline>
+                                </svg>
+                                <input
+                                    type="email"
+                                    id="email"
+                                    name="email"
+                                    class="form-input"
+                                    placeholder="you@example.com"
+                                    required
+                                    autocomplete="email"
+                                />
+                            </div>
+                        </div>
+
+                        <div class="form-group">
+                            <label class="form-label" for="password"
+                                >Password</label
+                            >
+                            <div class="input-wrapper">
+                                <svg
+                                    class="input-icon"
+                                    width="18"
+                                    height="18"
+                                    viewBox="0 0 24 24"
+                                    fill="none"
+                                    stroke="currentColor"
+                                    stroke-width="2"
+                                >
+                                    <rect
+                                        x="3"
+                                        y="11"
+                                        width="18"
+                                        height="11"
+                                        rx="2"
+                                        ry="2"
+                                    ></rect>
+                                    <path d="M7 11V7a5 5 0 0 1 10 0v4"></path>
+                                </svg>
+                                <input
+                                    type="password"
+                                    id="password"
+                                    name="password"
+                                    class="form-input"
+                                    placeholder="••••••••"
+                                    required
+                                    autocomplete="new-password"
+                                    oninput="checkPasswordStrength(this.value)"
+                                />
+                                <button
+                                    type="button"
+                                    class="password-toggle"
+                                    onclick="togglePassword('password')"
+                                >
+                                    <svg
+                                        class="eye-icon"
+                                        width="18"
+                                        height="18"
+                                        viewBox="0 0 24 24"
+                                        fill="none"
+                                        stroke="currentColor"
+                                        stroke-width="2"
+                                    >
+                                        <path
+                                            d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"
+                                        ></path>
+                                        <circle cx="12" cy="12" r="3"></circle>
+                                    </svg>
+                                    <svg
+                                        class="eye-off-icon"
+                                        width="18"
+                                        height="18"
+                                        viewBox="0 0 24 24"
+                                        fill="none"
+                                        stroke="currentColor"
+                                        stroke-width="2"
+                                        style="display: none"
+                                    >
+                                        <path
+                                            d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24"
+                                        ></path>
+                                        <line
+                                            x1="1"
+                                            y1="1"
+                                            x2="23"
+                                            y2="23"
+                                        ></line>
+                                    </svg>
+                                </button>
+                            </div>
+                            <div class="password-strength" id="password-strength">
+                                <div class="strength-bars">
+                                    <div class="strength-bar" data-index="0"></div>
+                                    <div class="strength-bar" data-index="1"></div>
+                                    <div class="strength-bar" data-index="2"></div>
+                                    <div class="strength-bar" data-index="3"></div>
+                                </div>
+                                <span class="strength-text" id="strength-text"
+                                    >Enter a password</span
+                                >
+                            </div>
+                            <div class="password-requirements">
+                                <div class="requirement" id="req-length">
+                                    <svg
+                                        width="14"
+                                        height="14"
+                                        viewBox="0 0 24 24"
+                                        fill="none"
+                                        stroke="currentColor"
+                                        stroke-width="2"
+                                    >
+                                        <circle cx="12" cy="12" r="10"></circle>
+                                    </svg>
+                                    At least 8 characters
+                                </div>
+                                <div class="requirement" id="req-uppercase">
+                                    <svg
+                                        width="14"
+                                        height="14"
+                                        viewBox="0 0 24 24"
+                                        fill="none"
+                                        stroke="currentColor"
+                                        stroke-width="2"
+                                    >
+                                        <circle cx="12" cy="12" r="10"></circle>
+                                    </svg>
+                                    One uppercase letter
+                                </div>
+                                <div class="requirement" id="req-lowercase">
+                                    <svg
+                                        width="14"
+                                        height="14"
+                                        viewBox="0 0 24 24"
+                                        fill="none"
+                                        stroke="currentColor"
+                                        stroke-width="2"
+                                    >
+                                        <circle cx="12" cy="12" r="10"></circle>
+                                    </svg>
+                                    One lowercase letter
+                                </div>
+                                <div class="requirement" id="req-number">
+                                    <svg
+                                        width="14"
+                                        height="14"
+                                        viewBox="0 0 24 24"
+                                        fill="none"
+                                        stroke="currentColor"
+                                        stroke-width="2"
+                                    >
+                                        <circle cx="12" cy="12" r="10"></circle>
+                                    </svg>
+                                    One number
+                                </div>
+                            </div>
+                        </div>
+
+                        <div class="form-group">
+                            <label class="form-label" for="confirm-password"
+                                >Confirm Password</label
+                            >
+                            <div class="input-wrapper">
+                                <svg
+                                    class="input-icon"
+                                    width="18"
+                                    height="18"
+                                    viewBox="0 0 24 24"
+                                    fill="none"
+                                    stroke="currentColor"
+                                    stroke-width="2"
+                                >
+                                    <rect
+                                        x="3"
+                                        y="11"
+                                        width="18"
+                                        height="11"
+                                        rx="2"
+                                        ry="2"
+                                    ></rect>
+                                    <path d="M7 11V7a5 5 0 0 1 10 0v4"></path>
+                                </svg>
+                                <input
+                                    type="password"
+                                    id="confirm-password"
+                                    name="confirm_password"
+                                    class="form-input"
+                                    placeholder="••••••••"
+                                    required
+                                    autocomplete="new-password"
+                                    oninput="checkPasswordMatch()"
+                                />
+                                <button
+                                    type="button"
+                                    class="password-toggle"
+                                    onclick="togglePassword('confirm-password')"
+                                >
+                                    <svg
+                                        class="eye-icon"
+                                        width="18"
+                                        height="18"
+                                        viewBox="0 0 24 24"
+                                        fill="none"
+                                        stroke="currentColor"
+                                        stroke-width="2"
+                                    >
+                                        <path
+                                            d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"
+                                        ></path>
+                                        <circle cx="12" cy="12" r="3"></circle>
+                                    </svg>
+                                    <svg
+                                        class="eye-off-icon"
+                                        width="18"
+                                        height="18"
+                                        viewBox="0 0 24 24"
+                                        fill="none"
+                                        stroke="currentColor"
+                                        stroke-width="2"
+                                        style="display: none"
+                                    >
+                                        <path
+                                            d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24"
+                                        ></path>
+                                        <line
+                                            x1="1"
+                                            y1="1"
+                                            x2="23"
+                                            y2="23"
+                                        ></line>
+                                    </svg>
+                                </button>
+                            </div>
+                            <span
+                                class="password-match"
+                                id="password-match"
+                                style="
+                                    font-size: 0.75rem;
+                                    margin-top: 0.375rem;
+                                    display: none;
+                                "
+                            ></span>
+                        </div>
+
+                        <div class="terms-group">
+                            <label class="checkbox-label">
+                                <input
+                                    type="checkbox"
+                                    name="terms"
+                                    id="terms"
+                                    required
+                                    class="checkbox-input"
+                                />
+                                <span class="checkbox-custom">
+                                    <svg
+                                        width="12"
+                                        height="12"
+                                        viewBox="0 0 24 24"
+                                        fill="none"
+                                        stroke="currentColor"
+                                        stroke-width="3"
+                                    >
+                                        <polyline
+                                            points="20 6 9 17 4 12"
+                                        ></polyline>
+                                    </svg>
+                                </span>
+                                <span class="terms-text">
+                                    I agree to the
+                                    <a href="/terms" target="_blank"
+                                        >Terms of Service</a
+                                    >
+                                    and
+                                    <a href="/privacy" target="_blank"
+                                        >Privacy Policy</a
+                                    >
+                                </span>
+                            </label>
+                        </div>
+
+                        <button
+                            type="submit"
+                            class="btn btn-primary"
+                            id="register-btn"
+                        >
+                            <span class="btn-text">Create Account</span>
+                            <div class="spinner"></div>
+                        </button>
+                    </form>
+
+                    <div id="register-response"></div>
+
+                    <div class="divider">
+                        <span>or sign up with</span>
+                    </div>
+
+                    <div class="social-login">
+                        <button
+                            type="button"
+                            class="social-btn"
+                            onclick="oauthSignup('google')"
+                        >
+                            <svg width="18" height="18" viewBox="0 0 24 24">
+                                <path
+                                    fill="#EA4335"
+                                    d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"
+                                />
+                                <path
+                                    fill="#34A853"
+                                    d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"
+                                />
+                                <path
+                                    fill="#FBBC05"
+                                    d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"
+                                />
+                                <path
+                                    fill="#4285F4"
+                                    d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"
+                                />
+                            </svg>
+                            Google
+                        </button>
+                        <button
+                            type="button"
+                            class="social-btn"
+                            onclick="oauthSignup('microsoft')"
+                        >
+                            <svg width="18" height="18" viewBox="0 0 24 24">
+                                <path fill="#F25022" d="M1 1h10v10H1z" />
+                                <path fill="#00A4EF" d="M13 1h10v10H13z" />
+                                <path fill="#7FBA00" d="M1 13h10v10H1z" />
+                                <path fill="#FFB900" d="M13 13h10v10H13z" />
+                            </svg>
+                            Microsoft
+                        </button>
+                    </div>
+                </div>
+
+                <!-- Success Section -->
+                <div id="success-section" class="success-section">
+                    <div class="success-icon">
+                        <svg
+                            width="36"
+                            height="36"
+                            viewBox="0 0 24 24"
+                            fill="none"
+                            stroke="currentColor"
+                            stroke-width="2"
+                        >
+                            <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
+                            <polyline points="22 4 12 14.01 9 11.01"></polyline>
+                        </svg>
+                    </div>
+                    <h2 class="success-title">Check Your Email</h2>
+                    <p class="success-text">
+                        We've sent a verification link to<br />
+                        <span class="success-email" id="success-email"
+                            >your@email.com</span
+                        >
+                    </p>
+                    <p class="success-text">
+                        Click the link in the email to verify your account and
+                        get started.
+                    </p>
+                    <button
+                        type="button"
+                        class="btn btn-primary"
+                        onclick="window.location.href='/auth/login'"
+                    >
+                        <span class="btn-text">Go to Login</span>
+                    </button>
+                </div>
+            </div>
+
+            <div class="register-footer">
+                <p>
+                    Already have an account?
+                    <a href="/auth/login">Sign in</a>
+                </p>
+            </div>
+        </div>
+
+        <script>
+            // Password visibility toggle
+            function togglePassword(inputId) {
+                const input = document.getElementById(inputId);
+                const wrapper = input.closest(".input-wrapper");
+                const eyeIcon = wrapper.querySelector(".eye-icon");
+                const eyeOffIcon = wrapper.querySelector(".eye-off-icon");
+
+                if (input.type === "password") {
+                    input.type = "text";
+                    eyeIcon.style.display = "none";
+                    eyeOffIcon.style.display = "block";
+                } else {
+                    input.type = "password";
+                    eyeIcon.style.display = "block";
+                    eyeOffIcon.style.display = "none";
+                }
+            }
+
+            // Password strength checker
+            function checkPasswordStrength(password) {
+                const bars = document.querySelectorAll(".strength-bar");
+                const strengthText = document.getElementById("strength-text");
+
+                // Check requirements
+                const hasLength = password.length >= 8;
+                const hasUppercase = /[A-Z]/.test(password);
+                const hasLowercase = /[a-z]/.test(password);
+                const hasNumber = /[0-9]/.test(password);
+                const hasSpecial = /[^A-Za-z0-9]/.test(password);
+
+                // Update requirement indicators
+                updateRequirement("req-length", hasLength);
+                updateRequirement("req-uppercase", hasUppercase);
+                updateRequirement("req-lowercase", hasLowercase);
+                updateRequirement("req-number", hasNumber);
+
+                // Calculate strength
+                let strength = 0;
+                if (hasLength) strength++;
+                if (hasUppercase) strength++;
+                if (hasLowercase) strength++;
+                if (hasNumber) strength++;
+                if (hasSpecial) strength++;
+                if (password.length >= 12) strength++;
+
+                // Normalize to 4 levels
+                let level = 0;
+                let levelClass = "";
+                let levelText = "Enter a password";
+
+                if (password.length === 0) {
+                    levelText = "Enter a password";
+                } else if (strength <= 2) {
+                    level = 1;
+                    levelClass = "weak";
+                    levelText = "Weak password";
+                } else if (strength === 3) {
+                    level = 2;
+                    levelClass = "fair";
+                    levelText = "Fair password";
+                } else if (strength === 4) {
+                    level = 3;
+                    levelClass = "good";
+                    levelText = "Good password";
+                } else {
+                    level = 4;
+                    levelClass = "strong";
+                    levelText = "Strong password";
+                }
+
+                // Update bars
+                bars.forEach((bar, index) => {
+                    bar.classList.remove(
+                        "active",
+                        "weak",
+                        "fair",
+                        "good",
+                        "strong",
+                    );
+                    if (index < level) {
+                        bar.classList.add("active", levelClass);
+                    }
+                });
+
+                // Update text
+                strengthText.textContent = levelText;
+                strengthText.className =
+                    "strength-text " + (password.length > 0 ? levelClass : "");
+
+                // Check password match if confirm field has value
+                checkPasswordMatch();
+            }
+
+            function updateRequirement(id, met) {
+                const req = document.getElementById(id);
+                if (met) {
+                    req.classList.add("met");
+                    req.querySelector("svg").innerHTML =
+                        '<path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path><polyline points="22 4 12 14.01 9 11.01"></polyline>';
+                } else {
+                    req.classList.remove("met");
+                    req.querySelector("svg").innerHTML =
+                        '<circle cx="12" cy="12" r="10"></circle>';
+                }
+            }
+
+            function checkPasswordMatch() {
+                const password = document.getElementById("password").value;
+                const confirmPassword =
+                    document.getElementById("confirm-password").value;
+                const matchIndicator = document.getElementById("password-match");
+                const confirmInput = document.getElementById("confirm-password");
+
+                if (confirmPassword.length === 0) {
+                    matchIndicator.style.display = "none";
+                    confirmInput.classList.remove("error", "valid");
+                    return;
+                }
+
+                matchIndicator.style.display = "block";
+
+                if (password === confirmPassword) {
+                    matchIndicator.textContent = "Passwords match";
+                    matchIndicator.style.color = "var(--success)";
+                    confirmInput.classList.remove("error");
+                    confirmInput.classList.add("valid");
+                } else {
+                    matchIndicator.textContent = "Passwords do not match";
+                    matchIndicator.style.color = "var(--error)";
+                    confirmInput.classList.remove("valid");
+                    confirmInput.classList.add("error");
+                }
+            }
+
+            // OAuth signup
+            function oauthSignup(provider) {
+                window.location.href = `/api/auth/oauth/${provider}`;
+            }
+
+            // Show error message
+            function showError(message) {
+                const errorBox = document.getElementById("error-message");
+                const errorText = document.getElementById("error-text");
+                errorText.textContent = message;
+                errorBox.classList.add("visible");
+            }
+
+            // Hide error message
+            function hideError() {
+                document
+                    .getElementById("error-message")
+                    .classList.remove("visible");
+            }
+
+            // Show success section
+            function showSuccess(email) {
+                document.getElementById("register-section").style.display =
+                    "none";
+                document
+                    .getElementById("success-section")
+                    .classList.add("visible");
+                document.getElementById("success-email").textContent = email;
+            }
+
+            // Loading state
+            function setLoading(loading) {
+                const btn = document.getElementById("register-btn");
+                if (loading) {
+                    btn.classList.add("loading");
+                    btn.disabled = true;
+                } else {
+                    btn.classList.remove("loading");
+                    btn.disabled = false;
+                }
+            }
+
+            // Form validation
+            document
+                .getElementById("register-form")
+                .addEventListener("submit", function (e) {
+                    const password = document.getElementById("password").value;
+                    const confirmPassword =
+                        document.getElementById("confirm-password").value;
+
+                    if (password !== confirmPassword) {
+                        e.preventDefault();
+                        showError("Passwords do not match");
+                        return false;
+                    }
+
+                    if (password.length < 8) {
+                        e.preventDefault();
+                        showError("Password must be at least 8 characters");
+                        return false;
+                    }
+
+                    if (!document.getElementById("terms").checked) {
+                        e.preventDefault();
+                        showError(
+                            "You must agree to the Terms of Service and Privacy Policy",
+                        );
+                        return false;
+                    }
+
+                    hideError();
+                });
+
+            // Handle HTMX events
+            document.body.addEventListener(
+                "htmx:beforeRequest",
+                function (event) {
+                    if (event.target.id === "register-form") {
+                        hideError();
+                        setLoading(true);
+                    }
+                },
+            );
+
+            document.body.addEventListener(
+                "htmx:afterRequest",
+                function (event) {
+                    if (event.target.id === "register-form") {
+                        setLoading(false);
+
+                        if (event.detail.successful) {
+                            try {
+                                const response = JSON.parse(
+                                    event.detail.xhr.responseText,
+                                );
+                                if (response.success) {
+                                    const email =
+                                        document.getElementById("email").value;
+                                    showSuccess(email);
+                                } else if (response.redirect) {
+                                    window.location.href = response.redirect;
+                                }
+                            } catch (e) {
+                                if (event.detail.xhr.status === 200) {
+                                    const email =
+                                        document.getElementById("email").value;
+                                    showSuccess(email);
+                                }
+                            }
+                        } else {
+                            try {
+                                const response = JSON.parse(
+                                    event.detail.xhr.responseText,
+                                );
+                                showError(
+                                    response.error ||
+                                        "Registration failed. Please try again.",
+                                );
+                            } catch (e) {
+                                showError(
+                                    "Registration failed. Please try again.",
+                                );
+                            }
+                        }
+                    }
+                },
+            );
+
+            // Clear error when user starts typing
+            document.querySelectorAll(".form-input").forEach((input) => {
+                input.addEventListener("input", hideError);
+            });
+        </script>
+    </body>
+</html>
diff --git a/ui/suite/auth/reset-password.html b/ui/suite/auth/reset-password.html
new file mode 100644
index 0000000..08d10b9
--- /dev/null
+++ b/ui/suite/auth/reset-password.html
@@ -0,0 +1,1116 @@
+<!doctype html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <title>Reset Password - General Bots</title>
+        <script src="/js/vendor/htmx.min.js"></script>
+        <style>
+            :root {
+                --primary: #3b82f6;
+                --primary-hover: #2563eb;
+                --primary-light: rgba(59, 130, 246, 0.1);
+                --bg: #0f172a;
+                --surface: #1e293b;
+                --surface-hover: #334155;
+                --border: #334155;
+                --text: #f8fafc;
+                --text-secondary: #94a3b8;
+                --error: #ef4444;
+                --success: #22c55e;
+                --warning: #f59e0b;
+            }
+
+            * {
+                margin: 0;
+                padding: 0;
+                box-sizing: border-box;
+            }
+
+            body {
+                font-family:
+                    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
+                    sans-serif;
+                background: var(--bg);
+                color: var(--text);
+                min-height: 100vh;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                background-image:
+                    radial-gradient(
+                        ellipse at top,
+                        rgba(59, 130, 246, 0.1) 0%,
+                        transparent 50%
+                    ),
+                    radial-gradient(
+                        ellipse at bottom,
+                        rgba(139, 92, 246, 0.1) 0%,
+                        transparent 50%
+                    );
+            }
+
+            .reset-container {
+                width: 100%;
+                max-width: 420px;
+                padding: 2rem;
+            }
+
+            .reset-header {
+                text-align: center;
+                margin-bottom: 2rem;
+            }
+
+            .reset-logo {
+                width: 72px;
+                height: 72px;
+                margin: 0 auto 1.25rem;
+                background: linear-gradient(135deg, var(--primary), #8b5cf6);
+                border-radius: 18px;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                font-size: 2rem;
+                box-shadow: 0 8px 32px rgba(59, 130, 246, 0.3);
+            }
+
+            .reset-title {
+                font-size: 1.75rem;
+                font-weight: 700;
+                margin-bottom: 0.5rem;
+                background: linear-gradient(
+                    135deg,
+                    var(--text),
+                    var(--text-secondary)
+                );
+                -webkit-background-clip: text;
+                -webkit-text-fill-color: transparent;
+                background-clip: text;
+            }
+
+            .reset-subtitle {
+                color: var(--text-secondary);
+                font-size: 0.9375rem;
+                line-height: 1.5;
+            }
+
+            .reset-card {
+                background: var(--surface);
+                border: 1px solid var(--border);
+                border-radius: 16px;
+                padding: 1.75rem;
+                box-shadow: 0 4px 24px rgba(0, 0, 0, 0.2);
+            }
+
+            /* Message Box */
+            .message-box {
+                padding: 0.875rem 1rem;
+                border-radius: 10px;
+                margin-bottom: 1.25rem;
+                font-size: 0.875rem;
+                display: none;
+                align-items: flex-start;
+                gap: 0.625rem;
+            }
+
+            .message-box.visible {
+                display: flex;
+            }
+
+            .message-box.error {
+                background: rgba(239, 68, 68, 0.1);
+                border: 1px solid rgba(239, 68, 68, 0.3);
+                color: var(--error);
+            }
+
+            .message-box.success {
+                background: rgba(34, 197, 94, 0.1);
+                border: 1px solid rgba(34, 197, 94, 0.3);
+                color: var(--success);
+            }
+
+            .message-box svg {
+                flex-shrink: 0;
+                margin-top: 0.125rem;
+            }
+
+            /* Form Styles */
+            .form-group {
+                margin-bottom: 1.25rem;
+            }
+
+            .form-label {
+                display: block;
+                font-size: 0.875rem;
+                font-weight: 500;
+                margin-bottom: 0.5rem;
+                color: var(--text);
+            }
+
+            .input-wrapper {
+                position: relative;
+            }
+
+            .input-icon {
+                position: absolute;
+                left: 1rem;
+                top: 50%;
+                transform: translateY(-50%);
+                color: var(--text-secondary);
+                pointer-events: none;
+            }
+
+            .form-input {
+                width: 100%;
+                padding: 0.875rem 1rem 0.875rem 2.75rem;
+                background: var(--bg);
+                border: 1px solid var(--border);
+                border-radius: 10px;
+                color: var(--text);
+                font-size: 1rem;
+                transition: all 0.2s ease;
+            }
+
+            .form-input:focus {
+                outline: none;
+                border-color: var(--primary);
+                box-shadow: 0 0 0 3px var(--primary-light);
+            }
+
+            .form-input::placeholder {
+                color: var(--text-secondary);
+            }
+
+            .form-input.error {
+                border-color: var(--error);
+            }
+
+            .form-input.valid {
+                border-color: var(--success);
+            }
+
+            .password-toggle {
+                position: absolute;
+                right: 1rem;
+                top: 50%;
+                transform: translateY(-50%);
+                background: none;
+                border: none;
+                color: var(--text-secondary);
+                cursor: pointer;
+                padding: 0.25rem;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+            }
+
+            .password-toggle:hover {
+                color: var(--text);
+            }
+
+            /* Password Strength */
+            .password-strength {
+                margin-top: 0.5rem;
+            }
+
+            .strength-bars {
+                display: flex;
+                gap: 0.25rem;
+                margin-bottom: 0.375rem;
+            }
+
+            .strength-bar {
+                flex: 1;
+                height: 4px;
+                background: var(--border);
+                border-radius: 2px;
+                transition: background 0.3s ease;
+            }
+
+            .strength-bar.active.weak {
+                background: var(--error);
+            }
+
+            .strength-bar.active.fair {
+                background: var(--warning);
+            }
+
+            .strength-bar.active.good {
+                background: #22c55e;
+            }
+
+            .strength-bar.active.strong {
+                background: #10b981;
+            }
+
+            .strength-text {
+                font-size: 0.75rem;
+                color: var(--text-secondary);
+            }
+
+            .strength-text.weak {
+                color: var(--error);
+            }
+
+            .strength-text.fair {
+                color: var(--warning);
+            }
+
+            .strength-text.good {
+                color: #22c55e;
+            }
+
+            .strength-text.strong {
+                color: #10b981;
+            }
+
+            /* Password Requirements */
+            .password-requirements {
+                margin-top: 0.75rem;
+                padding: 0.75rem;
+                background: var(--bg);
+                border-radius: 8px;
+            }
+
+            .requirement {
+                display: flex;
+                align-items: center;
+                gap: 0.5rem;
+                font-size: 0.75rem;
+                color: var(--text-secondary);
+                margin-bottom: 0.375rem;
+            }
+
+            .requirement:last-child {
+                margin-bottom: 0;
+            }
+
+            .requirement svg {
+                flex-shrink: 0;
+            }
+
+            .requirement.met {
+                color: var(--success);
+            }
+
+            .requirement.met svg {
+                color: var(--success);
+            }
+
+            /* Buttons */
+            .btn {
+                width: 100%;
+                padding: 0.875rem 1.25rem;
+                border-radius: 10px;
+                font-size: 1rem;
+                font-weight: 600;
+                cursor: pointer;
+                transition: all 0.2s ease;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                gap: 0.5rem;
+                position: relative;
+            }
+
+            .btn-primary {
+                background: linear-gradient(135deg, var(--primary), #6366f1);
+                color: white;
+                border: none;
+                box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
+            }
+
+            .btn-primary:hover:not(:disabled) {
+                transform: translateY(-1px);
+                box-shadow: 0 6px 20px rgba(59, 130, 246, 0.4);
+            }
+
+            .btn-primary:active:not(:disabled) {
+                transform: translateY(0);
+            }
+
+            .btn-primary:disabled {
+                opacity: 0.6;
+                cursor: not-allowed;
+            }
+
+            .btn-text {
+                transition: opacity 0.2s ease;
+            }
+
+            .btn.loading .btn-text {
+                opacity: 0;
+            }
+
+            .btn.loading .spinner {
+                display: block;
+            }
+
+            .spinner {
+                display: none;
+                position: absolute;
+                width: 22px;
+                height: 22px;
+                border: 2px solid transparent;
+                border-top-color: white;
+                border-radius: 50%;
+                animation: spin 0.8s linear infinite;
+            }
+
+            @keyframes spin {
+                to {
+                    transform: rotate(360deg);
+                }
+            }
+
+            /* Success Section */
+            .success-section {
+                display: none;
+                text-align: center;
+                padding: 1rem 0;
+            }
+
+            .success-section.visible {
+                display: block;
+            }
+
+            .success-icon {
+                width: 72px;
+                height: 72px;
+                margin: 0 auto 1.5rem;
+                background: rgba(34, 197, 94, 0.1);
+                border-radius: 50%;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                color: var(--success);
+            }
+
+            .success-title {
+                font-size: 1.5rem;
+                font-weight: 600;
+                margin-bottom: 0.75rem;
+            }
+
+            .success-text {
+                color: var(--text-secondary);
+                margin-bottom: 1.5rem;
+                line-height: 1.6;
+                font-size: 0.9375rem;
+            }
+
+            /* Invalid Token Section */
+            .invalid-section {
+                display: none;
+                text-align: center;
+                padding: 1rem 0;
+            }
+
+            .invalid-section.visible {
+                display: block;
+            }
+
+            .invalid-icon {
+                width: 72px;
+                height: 72px;
+                margin: 0 auto 1.5rem;
+                background: rgba(239, 68, 68, 0.1);
+                border-radius: 50%;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                color: var(--error);
+            }
+
+            .invalid-title {
+                font-size: 1.5rem;
+                font-weight: 600;
+                margin-bottom: 0.75rem;
+            }
+
+            .invalid-text {
+                color: var(--text-secondary);
+                margin-bottom: 1.5rem;
+                line-height: 1.6;
+                font-size: 0.9375rem;
+            }
+
+            /* Footer */
+            .reset-footer {
+                text-align: center;
+                margin-top: 1.75rem;
+                font-size: 0.9375rem;
+                color: var(--text-secondary);
+            }
+
+            .reset-footer a {
+                color: var(--primary);
+                text-decoration: none;
+                font-weight: 500;
+            }
+
+            .reset-footer a:hover {
+                text-decoration: underline;
+            }
+
+            /* Password Match Indicator */
+            .password-match {
+                font-size: 0.75rem;
+                margin-top: 0.375rem;
+                display: none;
+            }
+
+            /* Responsive */
+            @media (max-width: 480px) {
+                .reset-container {
+                    padding: 1rem;
+                }
+
+                .reset-card {
+                    padding: 1.25rem;
+                }
+            }
+        </style>
+    </head>
+    <body>
+        <div class="reset-container">
+            <div class="reset-header">
+                <div class="reset-logo">🔐</div>
+                <h1 class="reset-title">Reset Password</h1>
+                <p class="reset-subtitle">
+                    Create a new password for your account.
+                    Make sure it's strong and secure.
+                </p>
+            </div>
+
+            <div class="reset-card">
+                <!-- Reset Form Section -->
+                <div id="reset-section">
+                    <div class="message-box error" id="error-message">
+                        <svg
+                            width="18"
+                            height="18"
+                            viewBox="0 0 24 24"
+                            fill="none"
+                            stroke="currentColor"
+                            stroke-width="2"
+                        >
+                            <circle cx="12" cy="12" r="10"></circle>
+                            <line x1="15" y1="9" x2="9" y2="15"></line>
+                            <line x1="9" y1="9" x2="15" y2="15"></line>
+                        </svg>
+                        <span id="error-text">An error occurred</span>
+                    </div>
+
+                    <form
+                        id="reset-form"
+                        hx-post="/api/auth/reset-password"
+                        hx-target="#reset-response"
+                        hx-swap="innerHTML"
+                        hx-indicator="#submit-btn"
+                    >
+                        <input type="hidden" name="token" id="reset-token" />
+
+                        <div class="form-group">
+                            <label class="form-label" for="password"
+                                >New Password</label
+                            >
+                            <div class="input-wrapper">
+                                <svg
+                                    class="input-icon"
+                                    width="18"
+                                    height="18"
+                                    viewBox="0 0 24 24"
+                                    fill="none"
+                                    stroke="currentColor"
+                                    stroke-width="2"
+                                >
+                                    <rect
+                                        x="3"
+                                        y="11"
+                                        width="18"
+                                        height="11"
+                                        rx="2"
+                                        ry="2"
+                                    ></rect>
+                                    <path d="M7 11V7a5 5 0 0 1 10 0v4"></path>
+                                </svg>
+                                <input
+                                    type="password"
+                                    id="password"
+                                    name="password"
+                                    class="form-input"
+                                    placeholder="••••••••"
+                                    required
+                                    autocomplete="new-password"
+                                    oninput="checkPasswordStrength(this.value)"
+                                />
+                                <button
+                                    type="button"
+                                    class="password-toggle"
+                                    onclick="togglePassword('password')"
+                                >
+                                    <svg
+                                        class="eye-icon"
+                                        width="18"
+                                        height="18"
+                                        viewBox="0 0 24 24"
+                                        fill="none"
+                                        stroke="currentColor"
+                                        stroke-width="2"
+                                    >
+                                        <path
+                                            d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"
+                                        ></path>
+                                        <circle cx="12" cy="12" r="3"></circle>
+                                    </svg>
+                                    <svg
+                                        class="eye-off-icon"
+                                        width="18"
+                                        height="18"
+                                        viewBox="0 0 24 24"
+                                        fill="none"
+                                        stroke="currentColor"
+                                        stroke-width="2"
+                                        style="display: none"
+                                    >
+                                        <path
+                                            d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24"
+                                        ></path>
+                                        <line
+                                            x1="1"
+                                            y1="1"
+                                            x2="23"
+                                            y2="23"
+                                        ></line>
+                                    </svg>
+                                </button>
+                            </div>
+                            <div class="password-strength" id="password-strength">
+                                <div class="strength-bars">
+                                    <div class="strength-bar" data-index="0"></div>
+                                    <div class="strength-bar" data-index="1"></div>
+                                    <div class="strength-bar" data-index="2"></div>
+                                    <div class="strength-bar" data-index="3"></div>
+                                </div>
+                                <span class="strength-text" id="strength-text"
+                                    >Enter a password</span
+                                >
+                            </div>
+                            <div class="password-requirements">
+                                <div class="requirement" id="req-length">
+                                    <svg
+                                        width="14"
+                                        height="14"
+                                        viewBox="0 0 24 24"
+                                        fill="none"
+                                        stroke="currentColor"
+                                        stroke-width="2"
+                                    >
+                                        <circle cx="12" cy="12" r="10"></circle>
+                                    </svg>
+                                    At least 8 characters
+                                </div>
+                                <div class="requirement" id="req-uppercase">
+                                    <svg
+                                        width="14"
+                                        height="14"
+                                        viewBox="0 0 24 24"
+                                        fill="none"
+                                        stroke="currentColor"
+                                        stroke-width="2"
+                                    >
+                                        <circle cx="12" cy="12" r="10"></circle>
+                                    </svg>
+                                    One uppercase letter
+                                </div>
+                                <div class="requirement" id="req-lowercase">
+                                    <svg
+                                        width="14"
+                                        height="14"
+                                        viewBox="0 0 24 24"
+                                        fill="none"
+                                        stroke="currentColor"
+                                        stroke-width="2"
+                                    >
+                                        <circle cx="12" cy="12" r="10"></circle>
+                                    </svg>
+                                    One lowercase letter
+                                </div>
+                                <div class="requirement" id="req-number">
+                                    <svg
+                                        width="14"
+                                        height="14"
+                                        viewBox="0 0 24 24"
+                                        fill="none"
+                                        stroke="currentColor"
+                                        stroke-width="2"
+                                    >
+                                        <circle cx="12" cy="12" r="10"></circle>
+                                    </svg>
+                                    One number
+                                </div>
+                            </div>
+                        </div>
+
+                        <div class="form-group">
+                            <label class="form-label" for="confirm-password"
+                                >Confirm New Password</label
+                            >
+                            <div class="input-wrapper">
+                                <svg
+                                    class="input-icon"
+                                    width="18"
+                                    height="18"
+                                    viewBox="0 0 24 24"
+                                    fill="none"
+                                    stroke="currentColor"
+                                    stroke-width="2"
+                                >
+                                    <rect
+                                        x="3"
+                                        y="11"
+                                        width="18"
+                                        height="11"
+                                        rx="2"
+                                        ry="2"
+                                    ></rect>
+                                    <path d="M7 11V7a5 5 0 0 1 10 0v4"></path>
+                                </svg>
+                                <input
+                                    type="password"
+                                    id="confirm-password"
+                                    name="confirm_password"
+                                    class="form-input"
+                                    placeholder="••••••••"
+                                    required
+                                    autocomplete="new-password"
+                                    oninput="checkPasswordMatch()"
+                                />
+                                <button
+                                    type="button"
+                                    class="password-toggle"
+                                    onclick="togglePassword('confirm-password')"
+                                >
+                                    <svg
+                                        class="eye-icon"
+                                        width="18"
+                                        height="18"
+                                        viewBox="0 0 24 24"
+                                        fill="none"
+                                        stroke="currentColor"
+                                        stroke-width="2"
+                                    >
+                                        <path
+                                            d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"
+                                        ></path>
+                                        <circle cx="12" cy="12" r="3"></circle>
+                                    </svg>
+                                    <svg
+                                        class="eye-off-icon"
+                                        width="18"
+                                        height="18"
+                                        viewBox="0 0 24 24"
+                                        fill="none"
+                                        stroke="currentColor"
+                                        stroke-width="2"
+                                        style="display: none"
+                                    >
+                                        <path
+                                            d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24"
+                                        ></path>
+                                        <line
+                                            x1="1"
+                                            y1="1"
+                                            x2="23"
+                                            y2="23"
+                                        ></line>
+                                    </svg>
+                                </button>
+                            </div>
+                            <span class="password-match" id="password-match"></span>
+                        </div>
+
+                        <button
+                            type="submit"
+                            class="btn btn-primary"
+                            id="submit-btn"
+                        >
+                            <span class="btn-text">Reset Password</span>
+                            <div class="spinner"></div>
+                        </button>
+                    </form>
+
+                    <div id="reset-response"></div>
+                </div>
+
+                <!-- Success Section -->
+                <div id="success-section" class="success-section">
+                    <div class="success-icon">
+                        <svg
+                            width="36"
+                            height="36"
+                            viewBox="0 0 24 24"
+                            fill="none"
+                            stroke="currentColor"
+                            stroke-width="2"
+                        >
+                            <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
+                            <polyline points="22 4 12 14.01 9 11.01"></polyline>
+                        </svg>
+                    </div>
+                    <h2 class="success-title">Password Reset!</h2>
+                    <p class="success-text">
+                        Your password has been successfully reset.
+                        You can now sign in with your new password.
+                    </p>
+                    <button
+                        type="button"
+                        class="btn btn-primary"
+                        onclick="window.location.href='/auth/login'"
+                    >
+                        <span class="btn-text">Sign In</span>
+                    </button>
+                </div>
+
+                <!-- Invalid Token Section -->
+                <div id="invalid-section" class="invalid-section">
+                    <div class="invalid-icon">
+                        <svg
+                            width="36"
+                            height="36"
+                            viewBox="0 0 24 24"
+                            fill="none"
+                            stroke="currentColor"
+                            stroke-width="2"
+                        >
+                            <circle cx="12" cy="12" r="10"></circle>
+                            <line x1="15" y1="9" x2="9" y2="15"></line>
+                            <line x1="9" y1="9" x2="15" y2="15"></line>
+                        </svg>
+                    </div>
+                    <h2 class="invalid-title">Invalid or Expired Link</h2>
+                    <p class="invalid-text">
+                        This password reset link is invalid or has expired.
+                        Please request a new reset link.
+                    </p>
+                    <button
+                        type="button"
+                        class="btn btn-primary"
+                        onclick="window.location.href='/auth/forgot-password'"
+                    >
+                        <span class="btn-text">Request New Link</span>
+                    </button>
+                </div>
+            </div>
+
+            <div class="reset-footer">
+                <p>
+                    Remember your password?
+                    <a href="/auth/login">Sign in</a>
+                </p>
+            </div>
+        </div>
+
+        <script>
+            // Get token from URL
+            function getTokenFromUrl() {
+                const urlParams = new URLSearchParams(window.location.search);
+                return urlParams.get("token");
+            }
+
+            // Initialize
+            document.addEventListener("DOMContentLoaded", function () {
+                const token = getTokenFromUrl();
+
+                if (!token) {
+                    showInvalidToken();
+                    return;
+                }
+
+                document.getElementById("reset-token").value = token;
+
+                // Optionally verify token with server
+                verifyToken(token);
+            });
+
+            // Verify token
+            function verifyToken(token) {
+                fetch(`/api/auth/verify-reset-token?token=${encodeURIComponent(token)}`)
+                    .then((response) => {
+                        if (!response.ok) {
+                            showInvalidToken();
+                        }
+                    })
+                    .catch(() => {
+                        // If verification fails, still show form (server will validate on submit)
+                    });
+            }
+
+            // Password visibility toggle
+            function togglePassword(inputId) {
+                const input = document.getElementById(inputId);
+                const wrapper = input.closest(".input-wrapper");
+                const eyeIcon = wrapper.querySelector(".eye-icon");
+                const eyeOffIcon = wrapper.querySelector(".eye-off-icon");
+
+                if (input.type === "password") {
+                    input.type = "text";
+                    eyeIcon.style.display = "none";
+                    eyeOffIcon.style.display = "block";
+                } else {
+                    input.type = "password";
+                    eyeIcon.style.display = "block";
+                    eyeOffIcon.style.display = "none";
+                }
+            }
+
+            // Password strength checker
+            function checkPasswordStrength(password) {
+                const bars = document.querySelectorAll(".strength-bar");
+                const strengthText = document.getElementById("strength-text");
+
+                // Check requirements
+                const hasLength = password.length >= 8;
+                const hasUppercase = /[A-Z]/.test(password);
+                const hasLowercase = /[a-z]/.test(password);
+                const hasNumber = /[0-9]/.test(password);
+                const hasSpecial = /[^A-Za-z0-9]/.test(password);
+
+                // Update requirement indicators
+                updateRequirement("req-length", hasLength);
+                updateRequirement("req-uppercase", hasUppercase);
+                updateRequirement("req-lowercase", hasLowercase);
+                updateRequirement("req-number", hasNumber);
+
+                // Calculate strength
+                let strength = 0;
+                if (hasLength) strength++;
+                if (hasUppercase) strength++;
+                if (hasLowercase) strength++;
+                if (hasNumber) strength++;
+                if (hasSpecial) strength++;
+                if (password.length >= 12) strength++;
+
+                // Normalize to 4 levels
+                let level = 0;
+                let levelClass = "";
+                let levelText = "Enter a password";
+
+                if (password.length === 0) {
+                    levelText = "Enter a password";
+                } else if (strength <= 2) {
+                    level = 1;
+                    levelClass = "weak";
+                    levelText = "Weak password";
+                } else if (strength === 3) {
+                    level = 2;
+                    levelClass = "fair";
+                    levelText = "Fair password";
+                } else if (strength === 4) {
+                    level = 3;
+                    levelClass = "good";
+                    levelText = "Good password";
+                } else {
+                    level = 4;
+                    levelClass = "strong";
+                    levelText = "Strong password";
+                }
+
+                // Update bars
+                bars.forEach((bar, index) => {
+                    bar.classList.remove(
+                        "active",
+                        "weak",
+                        "fair",
+                        "good",
+                        "strong"
+                    );
+                    if (index < level) {
+                        bar.classList.add("active", levelClass);
+                    }
+                });
+
+                // Update text
+                strengthText.textContent = levelText;
+                strengthText.className =
+                    "strength-text " + (password.length > 0 ? levelClass : "");
+
+                // Check password match if confirm field has value
+                checkPasswordMatch();
+            }
+
+            function updateRequirement(id, met) {
+                const req = document.getElementById(id);
+                if (met) {
+                    req.classList.add("met");
+                    req.querySelector("svg").innerHTML =
+                        '<path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path><polyline points="22 4 12 14.01 9 11.01"></polyline>';
+                } else {
+                    req.classList.remove("met");
+                    req.querySelector("svg").innerHTML =
+                        '<circle cx="12" cy="12" r="10"></circle>';
+                }
+            }
+
+            function checkPasswordMatch() {
+                const password = document.getElementById("password").value;
+                const confirmPassword =
+                    document.getElementById("confirm-password").value;
+                const matchIndicator = document.getElementById("password-match");
+                const confirmInput = document.getElementById("confirm-password");
+
+                if (confirmPassword.length === 0) {
+                    matchIndicator.style.display = "none";
+                    confirmInput.classList.remove("error", "valid");
+                    return;
+                }
+
+                matchIndicator.style.display = "block";
+
+                if (password === confirmPassword) {
+                    matchIndicator.textContent = "Passwords match";
+                    matchIndicator.style.color = "var(--success)";
+                    confirmInput.classList.remove("error");
+                    confirmInput.classList.add("valid");
+                } else {
+                    matchIndicator.textContent = "Passwords do not match";
+                    matchIndicator.style.color = "var(--error)";
+                    confirmInput.classList.remove("valid");
+                    confirmInput.classList.add("error");
+                }
+            }
+
+            // Show error message
+            function showError(message) {
+                const errorBox = document.getElementById("error-message");
+                const errorText = document.getElementById("error-text");
+                errorText.textContent = message;
+                errorBox.classList.add("visible");
+            }
+
+            // Hide error message
+            function hideError() {
+                document
+                    .getElementById("error-message")
+                    .classList.remove("visible");
+            }
+
+            // Show success section
+            function showSuccess() {
+                document.getElementById("reset-section").style.display = "none";
+                document
+                    .getElementById("success-section")
+                    .classList.add("visible");
+
+                // Redirect to login after 3 seconds
+                setTimeout(() => {
+                    window.location.href = "/auth/login";
+                }, 3000);
+            }
+
+            // Show invalid token section
+            function showInvalidToken() {
+                document.getElementById("reset-section").style.display = "none";
+                document
+                    .getElementById("invalid-section")
+                    .classList.add("visible");
+            }
+
+            // Loading state
+            function setLoading(loading) {
+                const btn = document.getElementById("submit-btn");
+                if (loading) {
+                    btn.classList.add("loading");
+                    btn.disabled = true;
+                } else {
+                    btn.classList.remove("loading");
+                    btn.disabled = false;
+                }
+            }
+
+            // Form validation
+            document
+                .getElementById("reset-form")
+                .addEventListener("submit", function (e) {
+                    const password = document.getElementById("password").value;
+                    const confirmPassword =
+                        document.getElementById("confirm-password").value;
+
+                    if (password !== confirmPassword) {
+                        e.preventDefault();
+                        showError("Passwords do not match");
+                        return false;
+                    }
+
+                    if (password.length < 8) {
+                        e.preventDefault();
+                        showError("Password must be at least 8 characters");
+                        return false;
+                    }
+
+                    hideError();
+                });
+
+            // Handle HTMX events
+            document.body.addEventListener(
+                "htmx:beforeRequest",
+                function (event) {
+                    if (event.target.id === "reset-form") {
+                        hideError();
+                        setLoading(true);
+                    }
+                }
+            );
+
+            document.body.addEventListener(
+                "htmx:afterRequest",
+                function (event) {
+                    if (event.target.id === "reset-form") {
+                        setLoading(false);
+
+                        if (event.detail.successful) {
+                            try {
+                                const response = JSON.parse(
+                                    event.detail.xhr.responseText
+                                );
+                                if (response.success) {
+                                    showSuccess();
+                                } else if (response.invalid_token) {
+                                    showInvalidToken();
+                                }
+                            } catch (e) {
+                                if (event.detail.xhr.status === 200) {
+                                    showSuccess();
+                                }
+                            }
+                        } else {
+                            try {
+                                const response = JSON.parse(
+                                    event.detail.xhr.responseText
+                                );
+                                if (response.invalid_token) {
+                                    showInvalidToken();
+                                } else {
+                                    showError(
+                                        response.error ||
+                                            "Failed to reset password. Please try again."
+                                    );
+                                }
+                            } catch (e) {
+                                showError(
+                                    "Failed to reset password. Please try again."
+                                );
+                            }
+                        }
+                    }
+                }
+            );
+
+            // Clear error when user starts typing
+            document.querySelectorAll(".form-input").forEach((input) => {
+                input.addEventListener("input", hideError);
+            });
+        </script>
+    </body>
+</html>
diff --git a/ui/suite/base.html b/ui/suite/base.html
index 8e2f756..24efc71 100644
--- a/ui/suite/base.html
+++ b/ui/suite/base.html
@@ -29,15 +29,53 @@
                 --info: #3b82f6;
             }
 
-            @media (prefers-color-scheme: light) {
-                :root {
-                    --bg: #f8fafc;
-                    --surface: #ffffff;
-                    --surface-hover: #f1f5f9;
-                    --border: #e2e8f0;
-                    --text: #1e293b;
-                    --text-secondary: #64748b;
-                }
+            [data-theme="light"] {
+                --bg: #f8fafc;
+                --surface: #ffffff;
+                --surface-hover: #f1f5f9;
+                --border: #e2e8f0;
+                --text: #1e293b;
+                --text-secondary: #64748b;
+            }
+
+            [data-theme="blue"] {
+                --primary: #0ea5e9;
+                --primary-hover: #0284c7;
+                --primary-light: rgba(14, 165, 233, 0.1);
+                --bg: #0c1929;
+                --surface: #1a2f47;
+                --surface-hover: #254063;
+                --border: #2d4a6f;
+            }
+
+            [data-theme="purple"] {
+                --primary: #a855f7;
+                --primary-hover: #9333ea;
+                --primary-light: rgba(168, 85, 247, 0.1);
+                --bg: #1a0a2e;
+                --surface: #2d1b4e;
+                --surface-hover: #3d2566;
+                --border: #4c2f7e;
+            }
+
+            [data-theme="green"] {
+                --primary: #22c55e;
+                --primary-hover: #16a34a;
+                --primary-light: rgba(34, 197, 94, 0.1);
+                --bg: #0a1f15;
+                --surface: #14332a;
+                --surface-hover: #1e4a3d;
+                --border: #28604f;
+            }
+
+            [data-theme="orange"] {
+                --primary: #f97316;
+                --primary-hover: #ea580c;
+                --primary-light: rgba(249, 115, 22, 0.1);
+                --bg: #1a1008;
+                --surface: #2d1c0f;
+                --surface-hover: #442a16;
+                --border: #5c3a1e;
             }
 
             * {
@@ -57,7 +95,6 @@
                 flex-direction: column;
             }
 
-            /* Header */
             .app-header {
                 display: flex;
                 align-items: center;
@@ -138,12 +175,13 @@
                 cursor: pointer;
             }
 
-            /* Apps Menu */
-            .apps-menu {
+            .apps-menu,
+            .settings-menu {
                 position: relative;
             }
 
-            .apps-dropdown {
+            .apps-dropdown,
+            .settings-panel {
                 position: absolute;
                 top: 100%;
                 right: 0;
@@ -158,11 +196,13 @@
                 z-index: 1001;
             }
 
-            .apps-dropdown.show {
+            .apps-dropdown.show,
+            .settings-panel.show {
                 display: block;
             }
 
-            .apps-dropdown-title {
+            .apps-dropdown-title,
+            .settings-panel-title {
                 font-size: 0.75rem;
                 font-weight: 600;
                 color: var(--text-secondary);
@@ -213,7 +253,281 @@
                 font-weight: 500;
             }
 
-            /* Main Content */
+            /* Settings Panel - Outlook Style */
+            .settings-panel {
+                width: 320px;
+                max-height: 80vh;
+                overflow-y: auto;
+            }
+
+            .settings-section {
+                margin-bottom: 1.25rem;
+            }
+
+            .settings-section-title {
+                font-size: 0.7rem;
+                font-weight: 600;
+                color: var(--text-secondary);
+                text-transform: uppercase;
+                letter-spacing: 0.05em;
+                margin-bottom: 0.5rem;
+                padding: 0 0.25rem;
+            }
+
+            .theme-grid {
+                display: grid;
+                grid-template-columns: repeat(3, 1fr);
+                gap: 0.5rem;
+            }
+
+            .theme-option {
+                position: relative;
+                aspect-ratio: 1;
+                border-radius: 10px;
+                cursor: pointer;
+                border: 2px solid transparent;
+                transition: all 0.2s;
+                overflow: hidden;
+            }
+
+            .theme-option:hover {
+                transform: scale(1.05);
+            }
+
+            .theme-option.active {
+                border-color: var(--primary);
+                box-shadow: 0 0 0 2px var(--primary-light);
+            }
+
+            .theme-option-inner {
+                width: 100%;
+                height: 100%;
+                display: flex;
+                flex-direction: column;
+            }
+
+            .theme-option-header {
+                height: 30%;
+                display: flex;
+                align-items: center;
+                padding: 0.25rem;
+            }
+
+            .theme-option-dot {
+                width: 6px;
+                height: 6px;
+                border-radius: 50%;
+                margin-right: 2px;
+            }
+
+            .theme-option-body {
+                flex: 1;
+                padding: 0.25rem;
+            }
+
+            .theme-option-line {
+                height: 4px;
+                border-radius: 2px;
+                margin-bottom: 3px;
+            }
+
+            .theme-option-name {
+                position: absolute;
+                bottom: 2px;
+                left: 0;
+                right: 0;
+                font-size: 0.6rem;
+                text-align: center;
+                color: inherit;
+            }
+
+            /* Theme previews */
+            .theme-dark .theme-option-inner {
+                background: #0f172a;
+                color: #f8fafc;
+            }
+            .theme-dark .theme-option-header {
+                background: #1e293b;
+            }
+            .theme-dark .theme-option-dot {
+                background: #3b82f6;
+            }
+            .theme-dark .theme-option-line {
+                background: #334155;
+            }
+
+            .theme-light .theme-option-inner {
+                background: #f8fafc;
+                color: #1e293b;
+            }
+            .theme-light .theme-option-header {
+                background: #ffffff;
+            }
+            .theme-light .theme-option-dot {
+                background: #3b82f6;
+            }
+            .theme-light .theme-option-line {
+                background: #e2e8f0;
+            }
+
+            .theme-blue .theme-option-inner {
+                background: #0c1929;
+                color: #f8fafc;
+            }
+            .theme-blue .theme-option-header {
+                background: #1a2f47;
+            }
+            .theme-blue .theme-option-dot {
+                background: #0ea5e9;
+            }
+            .theme-blue .theme-option-line {
+                background: #2d4a6f;
+            }
+
+            .theme-purple .theme-option-inner {
+                background: #1a0a2e;
+                color: #f8fafc;
+            }
+            .theme-purple .theme-option-header {
+                background: #2d1b4e;
+            }
+            .theme-purple .theme-option-dot {
+                background: #a855f7;
+            }
+            .theme-purple .theme-option-line {
+                background: #4c2f7e;
+            }
+
+            .theme-green .theme-option-inner {
+                background: #0a1f15;
+                color: #f8fafc;
+            }
+            .theme-green .theme-option-header {
+                background: #14332a;
+            }
+            .theme-green .theme-option-dot {
+                background: #22c55e;
+            }
+            .theme-green .theme-option-line {
+                background: #28604f;
+            }
+
+            .theme-orange .theme-option-inner {
+                background: #1a1008;
+                color: #f8fafc;
+            }
+            .theme-orange .theme-option-header {
+                background: #2d1c0f;
+            }
+            .theme-orange .theme-option-dot {
+                background: #f97316;
+            }
+            .theme-orange .theme-option-line {
+                background: #5c3a1e;
+            }
+
+            .settings-shortcut {
+                display: flex;
+                align-items: center;
+                gap: 0.75rem;
+                padding: 0.625rem 0.75rem;
+                border-radius: 8px;
+                text-decoration: none;
+                color: var(--text);
+                transition: background 0.2s;
+            }
+
+            .settings-shortcut:hover {
+                background: var(--surface-hover);
+            }
+
+            .settings-shortcut-icon {
+                width: 32px;
+                height: 32px;
+                border-radius: 8px;
+                background: var(--primary-light);
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                color: var(--primary);
+            }
+
+            .settings-shortcut-text {
+                flex: 1;
+            }
+
+            .settings-shortcut-title {
+                font-size: 0.875rem;
+                font-weight: 500;
+            }
+
+            .settings-shortcut-desc {
+                font-size: 0.7rem;
+                color: var(--text-secondary);
+            }
+
+            .settings-shortcut-arrow {
+                color: var(--text-secondary);
+            }
+
+            .settings-divider {
+                height: 1px;
+                background: var(--border);
+                margin: 0.75rem 0;
+            }
+
+            .quick-toggles {
+                display: flex;
+                flex-direction: column;
+                gap: 0.5rem;
+            }
+
+            .quick-toggle {
+                display: flex;
+                align-items: center;
+                justify-content: space-between;
+                padding: 0.5rem 0.75rem;
+                border-radius: 8px;
+            }
+
+            .quick-toggle:hover {
+                background: var(--surface-hover);
+            }
+
+            .quick-toggle-label {
+                font-size: 0.875rem;
+            }
+
+            .toggle-switch {
+                position: relative;
+                width: 40px;
+                height: 22px;
+                background: var(--border);
+                border-radius: 11px;
+                cursor: pointer;
+                transition: background 0.2s;
+            }
+
+            .toggle-switch.active {
+                background: var(--primary);
+            }
+
+            .toggle-switch::after {
+                content: "";
+                position: absolute;
+                top: 2px;
+                left: 2px;
+                width: 18px;
+                height: 18px;
+                background: white;
+                border-radius: 50%;
+                transition: transform 0.2s;
+            }
+
+            .toggle-switch.active::after {
+                transform: translateX(18px);
+            }
+
             .app-main {
                 flex: 1;
                 display: flex;
@@ -226,21 +540,17 @@
                 overflow: auto;
             }
 
-            /* HTMX Indicators */
             .htmx-indicator {
                 display: none;
             }
-
             .htmx-request .htmx-indicator {
-                display: inline-flex;
+                display: inline-block;
             }
-
             .htmx-request.htmx-indicator {
-                display: inline-flex;
+                display: inline-block;
             }
-
-            /* Spinner */
             .spinner {
+                display: inline-block;
                 width: 20px;
                 height: 20px;
                 border: 2px solid var(--border);
@@ -249,13 +559,139 @@
                 animation: spin 0.8s linear infinite;
             }
 
+            /* Loading overlay for HTMX requests */
+            .loading-overlay {
+                position: absolute;
+                inset: 0;
+                background: rgba(var(--bg-rgb, 0, 0, 0), 0.5);
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                z-index: 50;
+                opacity: 0;
+                pointer-events: none;
+                transition: opacity 0.2s;
+            }
+
+            .htmx-request .loading-overlay {
+                opacity: 1;
+                pointer-events: auto;
+            }
+
+            .loading-spinner-large {
+                width: 40px;
+                height: 40px;
+                border: 3px solid var(--border);
+                border-top-color: var(--primary);
+                border-radius: 50%;
+                animation: spin 0.8s linear infinite;
+            }
+
+            /* Error state styles */
+            .error-state {
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+                justify-content: center;
+                padding: 48px 24px;
+                text-align: center;
+                color: var(--text-secondary);
+            }
+
+            .error-state-icon {
+                width: 64px;
+                height: 64px;
+                margin-bottom: 16px;
+                color: var(--danger);
+            }
+
+            .error-state-title {
+                font-size: 1.25rem;
+                font-weight: 600;
+                color: var(--text);
+                margin-bottom: 8px;
+            }
+
+            .error-state-message {
+                margin-bottom: 20px;
+                max-width: 400px;
+            }
+
+            .error-state-actions {
+                display: flex;
+                gap: 12px;
+            }
+
+            .btn-retry {
+                display: inline-flex;
+                align-items: center;
+                gap: 8px;
+                padding: 10px 20px;
+                background: var(--primary);
+                color: white;
+                border: none;
+                border-radius: 8px;
+                font-weight: 500;
+                cursor: pointer;
+                transition: all 0.2s;
+            }
+
+            .btn-retry:hover {
+                filter: brightness(1.1);
+            }
+
+            .btn-retry:disabled {
+                opacity: 0.6;
+                cursor: not-allowed;
+            }
+
+            .btn-retry .spinner {
+                width: 16px;
+                height: 16px;
+            }
+
+            /* Skeleton loading states */
+            .skeleton {
+                background: linear-gradient(
+                    90deg,
+                    var(--border) 25%,
+                    var(--hover) 50%,
+                    var(--border) 75%
+                );
+                background-size: 200% 100%;
+                animation: skeleton-loading 1.5s infinite;
+                border-radius: 4px;
+            }
+
+            .skeleton-text {
+                height: 1em;
+                margin-bottom: 0.5em;
+            }
+
+            .skeleton-text:last-child {
+                width: 60%;
+            }
+
+            .skeleton-card {
+                height: 120px;
+                border-radius: 8px;
+            }
+
+            @keyframes skeleton-loading {
+                0% {
+                    background-position: 200% 0;
+                }
+                100% {
+                    background-position: -200% 0;
+                }
+            }
+
             @keyframes spin {
                 to {
                     transform: rotate(360deg);
                 }
             }
 
-            /* Notifications */
             .notifications-container {
                 position: fixed;
                 bottom: 1rem;
@@ -263,33 +699,33 @@
                 display: flex;
                 flex-direction: column;
                 gap: 0.5rem;
-                z-index: 2000;
+                z-index: 9999;
                 max-width: 400px;
             }
 
             .notification {
-                display: flex;
-                align-items: flex-start;
-                gap: 0.75rem;
-                padding: 1rem;
                 background: var(--surface);
                 border: 1px solid var(--border);
                 border-radius: 8px;
-                box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
-                animation: slideIn 0.3s ease-out;
+                padding: 1rem;
+                display: flex;
+                align-items: flex-start;
+                gap: 0.75rem;
+                box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
+                animation: slideIn 0.3s ease;
             }
 
             .notification.success {
-                border-left: 4px solid var(--success);
+                border-left: 3px solid var(--success);
             }
             .notification.error {
-                border-left: 4px solid var(--error);
+                border-left: 3px solid var(--error);
             }
             .notification.warning {
-                border-left: 4px solid var(--warning);
+                border-left: 3px solid var(--warning);
             }
             .notification.info {
-                border-left: 4px solid var(--info);
+                border-left: 3px solid var(--info);
             }
 
             @keyframes slideIn {
@@ -303,7 +739,6 @@
                 }
             }
 
-            /* Utility Classes */
             .sr-only {
                 position: absolute;
                 width: 1px;
@@ -316,24 +751,68 @@
                 border: 0;
             }
 
-            /* Responsive */
             @media (max-width: 768px) {
                 .logo span {
                     display: none;
                 }
-
-                .apps-dropdown {
-                    right: -1rem;
-                    min-width: 280px;
+                .apps-dropdown,
+                .settings-panel {
+                    width: calc(100vw - 2rem);
+                    right: -0.5rem;
+                }
+                .theme-grid {
+                    grid-template-columns: repeat(3, 1fr);
                 }
             }
-        </style>
+            /* Skip link styles */
+            .skip-link {
+                position: absolute;
+                top: -40px;
+                left: 0;
+                background: var(--primary);
+                color: white;
+                padding: 8px 16px;
+                z-index: 1000;
+                text-decoration: none;
+                border-radius: 0 0 8px 0;
+                transition: top 0.3s;
+            }
 
-        {% block head %}{% endblock %}
+            .skip-link:focus {
+                top: 0;
+            }
+
+            /* Focus visible styles */
+            *:focus-visible {
+                outline: 2px solid var(--primary);
+                outline-offset: 2px;
+            }
+
+            button:focus-visible,
+            a:focus-visible {
+                outline: 2px solid var(--primary);
+                outline-offset: 2px;
+            }
+
+            /* HTMX loading state for accessibility */
+            .htmx-request [aria-busy] {
+                opacity: 0.7;
+            }
+        </style>
     </head>
     <body>
-        <!-- Header -->
-        <header class="app-header">
+        <!-- Skip navigation link for accessibility -->
+        <a href="#main-content" class="skip-link">Skip to main content</a>
+
+        <!-- ARIA live region for dynamic updates -->
+        <div
+            id="aria-live"
+            class="sr-only"
+            aria-live="polite"
+            aria-atomic="true"
+        ></div>
+
+        <header class="app-header" role="banner">
             <div class="header-left">
                 <a href="/" class="logo">
                     <div class="logo-icon">🤖</div>
@@ -546,6 +1025,28 @@
                                 </div>
                                 <span>Research</span>
                             </a>
+                            <a
+                                href="#sources"
+                                class="app-item"
+                                role="menuitem"
+                                hx-get="/sources/index.html"
+                                hx-target="#main-content"
+                                hx-push-url="true"
+                            >
+                                <div
+                                    class="app-item-icon"
+                                    style="
+                                        background: linear-gradient(
+                                            135deg,
+                                            #14b8a6,
+                                            #0d9488
+                                        );
+                                    "
+                                >
+                                    📚
+                                </div>
+                                <span>Sources</span>
+                            </a>
                             <a
                                 href="#analytics"
                                 class="app-item"
@@ -568,29 +1069,440 @@
                                 </div>
                                 <span>Analytics</span>
                             </a>
+                            <a
+                                href="#admin"
+                                class="app-item"
+                                role="menuitem"
+                                hx-get="/admin/index.html"
+                                hx-target="#main-content"
+                                hx-push-url="true"
+                            >
+                                <div
+                                    class="app-item-icon"
+                                    style="
+                                        background: linear-gradient(
+                                            135deg,
+                                            #f43f5e,
+                                            #e11d48
+                                        );
+                                    "
+                                >
+                                    ⚙️
+                                </div>
+                                <span>Admin</span>
+                            </a>
+                            <a
+                                href="#monitoring"
+                                class="app-item"
+                                role="menuitem"
+                                hx-get="/monitoring/index.html"
+                                hx-target="#main-content"
+                                hx-push-url="true"
+                            >
+                                <div
+                                    class="app-item-icon"
+                                    style="
+                                        background: linear-gradient(
+                                            135deg,
+                                            #84cc16,
+                                            #65a30d
+                                        );
+                                    "
+                                >
+                                    📈
+                                </div>
+                                <span>Monitoring</span>
+                            </a>
                         </div>
                     </nav>
                 </div>
 
-                <!-- Theme Toggle -->
-                <button
-                    class="header-btn"
-                    id="theme-btn"
-                    aria-label="Toggle theme"
-                >
-                    <svg
-                        width="20"
-                        height="20"
-                        viewBox="0 0 24 24"
-                        fill="none"
-                        stroke="currentColor"
-                        stroke-width="2"
+                <!-- Settings Panel (Gear Icon) -->
+                <div class="settings-menu">
+                    <button
+                        class="header-btn"
+                        id="settings-btn"
+                        aria-label="Settings"
+                        aria-expanded="false"
                     >
-                        <path
-                            d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"
-                        ></path>
-                    </svg>
-                </button>
+                        <svg
+                            width="20"
+                            height="20"
+                            viewBox="0 0 24 24"
+                            fill="none"
+                            stroke="currentColor"
+                            stroke-width="2"
+                            stroke-linecap="round"
+                            stroke-linejoin="round"
+                        >
+                            <circle cx="12" cy="12" r="3" />
+                            <path
+                                d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"
+                            />
+                        </svg>
+                    </button>
+                    <div class="settings-panel" id="settings-panel" role="menu">
+                        <div class="settings-panel-title">Quick Settings</div>
+
+                        <!-- Theme Selection -->
+                        <div class="settings-section">
+                            <div class="settings-section-title">Theme</div>
+                            <div class="theme-grid">
+                                <div
+                                    class="theme-option theme-dark"
+                                    data-theme="dark"
+                                    title="Dark"
+                                >
+                                    <div class="theme-option-inner">
+                                        <div class="theme-option-header">
+                                            <div class="theme-option-dot"></div>
+                                            <div class="theme-option-dot"></div>
+                                            <div class="theme-option-dot"></div>
+                                        </div>
+                                        <div class="theme-option-body">
+                                            <div
+                                                class="theme-option-line"
+                                                style="width: 80%"
+                                            ></div>
+                                            <div
+                                                class="theme-option-line"
+                                                style="width: 60%"
+                                            ></div>
+                                            <div
+                                                class="theme-option-line"
+                                                style="width: 70%"
+                                            ></div>
+                                        </div>
+                                    </div>
+                                    <span class="theme-option-name">Dark</span>
+                                </div>
+                                <div
+                                    class="theme-option theme-light"
+                                    data-theme="light"
+                                    title="Light"
+                                >
+                                    <div class="theme-option-inner">
+                                        <div class="theme-option-header">
+                                            <div class="theme-option-dot"></div>
+                                            <div class="theme-option-dot"></div>
+                                            <div class="theme-option-dot"></div>
+                                        </div>
+                                        <div class="theme-option-body">
+                                            <div
+                                                class="theme-option-line"
+                                                style="width: 80%"
+                                            ></div>
+                                            <div
+                                                class="theme-option-line"
+                                                style="width: 60%"
+                                            ></div>
+                                            <div
+                                                class="theme-option-line"
+                                                style="width: 70%"
+                                            ></div>
+                                        </div>
+                                    </div>
+                                    <span class="theme-option-name">Light</span>
+                                </div>
+                                <div
+                                    class="theme-option theme-blue"
+                                    data-theme="blue"
+                                    title="Ocean"
+                                >
+                                    <div class="theme-option-inner">
+                                        <div class="theme-option-header">
+                                            <div class="theme-option-dot"></div>
+                                            <div class="theme-option-dot"></div>
+                                            <div class="theme-option-dot"></div>
+                                        </div>
+                                        <div class="theme-option-body">
+                                            <div
+                                                class="theme-option-line"
+                                                style="width: 80%"
+                                            ></div>
+                                            <div
+                                                class="theme-option-line"
+                                                style="width: 60%"
+                                            ></div>
+                                            <div
+                                                class="theme-option-line"
+                                                style="width: 70%"
+                                            ></div>
+                                        </div>
+                                    </div>
+                                    <span class="theme-option-name">Ocean</span>
+                                </div>
+                                <div
+                                    class="theme-option theme-purple"
+                                    data-theme="purple"
+                                    title="Violet"
+                                >
+                                    <div class="theme-option-inner">
+                                        <div class="theme-option-header">
+                                            <div class="theme-option-dot"></div>
+                                            <div class="theme-option-dot"></div>
+                                            <div class="theme-option-dot"></div>
+                                        </div>
+                                        <div class="theme-option-body">
+                                            <div
+                                                class="theme-option-line"
+                                                style="width: 80%"
+                                            ></div>
+                                            <div
+                                                class="theme-option-line"
+                                                style="width: 60%"
+                                            ></div>
+                                            <div
+                                                class="theme-option-line"
+                                                style="width: 70%"
+                                            ></div>
+                                        </div>
+                                    </div>
+                                    <span class="theme-option-name"
+                                        >Violet</span
+                                    >
+                                </div>
+                                <div
+                                    class="theme-option theme-green"
+                                    data-theme="green"
+                                    title="Forest"
+                                >
+                                    <div class="theme-option-inner">
+                                        <div class="theme-option-header">
+                                            <div class="theme-option-dot"></div>
+                                            <div class="theme-option-dot"></div>
+                                            <div class="theme-option-dot"></div>
+                                        </div>
+                                        <div class="theme-option-body">
+                                            <div
+                                                class="theme-option-line"
+                                                style="width: 80%"
+                                            ></div>
+                                            <div
+                                                class="theme-option-line"
+                                                style="width: 60%"
+                                            ></div>
+                                            <div
+                                                class="theme-option-line"
+                                                style="width: 70%"
+                                            ></div>
+                                        </div>
+                                    </div>
+                                    <span class="theme-option-name"
+                                        >Forest</span
+                                    >
+                                </div>
+                                <div
+                                    class="theme-option theme-orange"
+                                    data-theme="orange"
+                                    title="Sunset"
+                                >
+                                    <div class="theme-option-inner">
+                                        <div class="theme-option-header">
+                                            <div class="theme-option-dot"></div>
+                                            <div class="theme-option-dot"></div>
+                                            <div class="theme-option-dot"></div>
+                                        </div>
+                                        <div class="theme-option-body">
+                                            <div
+                                                class="theme-option-line"
+                                                style="width: 80%"
+                                            ></div>
+                                            <div
+                                                class="theme-option-line"
+                                                style="width: 60%"
+                                            ></div>
+                                            <div
+                                                class="theme-option-line"
+                                                style="width: 70%"
+                                            ></div>
+                                        </div>
+                                    </div>
+                                    <span class="theme-option-name"
+                                        >Sunset</span
+                                    >
+                                </div>
+                            </div>
+                        </div>
+
+                        <div class="settings-divider"></div>
+
+                        <!-- Quick Toggles -->
+                        <div class="settings-section">
+                            <div class="settings-section-title">
+                                Quick Toggles
+                            </div>
+                            <div class="quick-toggles">
+                                <div class="quick-toggle">
+                                    <span class="quick-toggle-label"
+                                        >Desktop Notifications</span
+                                    >
+                                    <div
+                                        class="toggle-switch active"
+                                        id="toggle-notifications"
+                                        onclick="toggleQuickSetting(this)"
+                                    ></div>
+                                </div>
+                                <div class="quick-toggle">
+                                    <span class="quick-toggle-label"
+                                        >Sound Effects</span
+                                    >
+                                    <div
+                                        class="toggle-switch active"
+                                        id="toggle-sound"
+                                        onclick="toggleQuickSetting(this)"
+                                    ></div>
+                                </div>
+                                <div class="quick-toggle">
+                                    <span class="quick-toggle-label"
+                                        >Compact Mode</span
+                                    >
+                                    <div
+                                        class="toggle-switch"
+                                        id="toggle-compact"
+                                        onclick="toggleQuickSetting(this)"
+                                    ></div>
+                                </div>
+                            </div>
+                        </div>
+
+                        <div class="settings-divider"></div>
+
+                        <!-- Shortcuts -->
+                        <div class="settings-section">
+                            <div class="settings-section-title">
+                                Configuration
+                            </div>
+                            <a
+                                href="#settings"
+                                class="settings-shortcut"
+                                hx-get="/settings/index.html"
+                                hx-target="#main-content"
+                                hx-push-url="true"
+                            >
+                                <div class="settings-shortcut-icon">
+                                    <svg
+                                        width="16"
+                                        height="16"
+                                        viewBox="0 0 24 24"
+                                        fill="none"
+                                        stroke="currentColor"
+                                        stroke-width="2"
+                                    >
+                                        <circle cx="12" cy="12" r="3" />
+                                        <path
+                                            d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 1 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 1 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9c.26.604.852.997 1.51 1H21a2 2 0 1 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"
+                                        />
+                                    </svg>
+                                </div>
+                                <div class="settings-shortcut-text">
+                                    <div class="settings-shortcut-title">
+                                        All Settings
+                                    </div>
+                                    <div class="settings-shortcut-desc">
+                                        Account, sync, appearance & more
+                                    </div>
+                                </div>
+                                <span class="settings-shortcut-arrow">→</span>
+                            </a>
+                            <a
+                                href="#admin"
+                                class="settings-shortcut"
+                                hx-get="/admin/index.html"
+                                hx-target="#main-content"
+                                hx-push-url="true"
+                            >
+                                <div class="settings-shortcut-icon">
+                                    <svg
+                                        width="16"
+                                        height="16"
+                                        viewBox="0 0 24 24"
+                                        fill="none"
+                                        stroke="currentColor"
+                                        stroke-width="2"
+                                    >
+                                        <path d="M12 4.5v15m7.5-7.5h-15" />
+                                    </svg>
+                                </div>
+                                <div class="settings-shortcut-text">
+                                    <div class="settings-shortcut-title">
+                                        Admin Console
+                                    </div>
+                                    <div class="settings-shortcut-desc">
+                                        Bot management & configuration
+                                    </div>
+                                </div>
+                                <span class="settings-shortcut-arrow">→</span>
+                            </a>
+                            <a
+                                href="#monitoring"
+                                class="settings-shortcut"
+                                hx-get="/monitoring/index.html"
+                                hx-target="#main-content"
+                                hx-push-url="true"
+                            >
+                                <div class="settings-shortcut-icon">
+                                    <svg
+                                        width="16"
+                                        height="16"
+                                        viewBox="0 0 24 24"
+                                        fill="none"
+                                        stroke="currentColor"
+                                        stroke-width="2"
+                                    >
+                                        <path d="M3 3v18h18" />
+                                        <path d="M18 9l-5 5-4-4-3 3" />
+                                    </svg>
+                                </div>
+                                <div class="settings-shortcut-text">
+                                    <div class="settings-shortcut-title">
+                                        Monitoring
+                                    </div>
+                                    <div class="settings-shortcut-desc">
+                                        System health & performance
+                                    </div>
+                                </div>
+                                <span class="settings-shortcut-arrow">→</span>
+                            </a>
+                            <a
+                                href="/keyboard-shortcuts"
+                                class="settings-shortcut"
+                                onclick="showKeyboardShortcuts(); return false;"
+                            >
+                                <div class="settings-shortcut-icon">
+                                    <svg
+                                        width="16"
+                                        height="16"
+                                        viewBox="0 0 24 24"
+                                        fill="none"
+                                        stroke="currentColor"
+                                        stroke-width="2"
+                                    >
+                                        <rect
+                                            x="2"
+                                            y="4"
+                                            width="20"
+                                            height="16"
+                                            rx="2"
+                                        />
+                                        <path
+                                            d="M6 8h.01M10 8h.01M14 8h.01M18 8h.01M6 12h.01M10 12h.01M14 12h.01M18 12h.01M8 16h8"
+                                        />
+                                    </svg>
+                                </div>
+                                <div class="settings-shortcut-text">
+                                    <div class="settings-shortcut-title">
+                                        Keyboard Shortcuts
+                                    </div>
+                                    <div class="settings-shortcut-desc">
+                                        View all available shortcuts
+                                    </div>
+                                </div>
+                                <span class="settings-shortcut-arrow">→</span>
+                            </a>
+                        </div>
+                    </div>
+                </div>
 
                 <!-- User Avatar -->
                 <button class="user-avatar" aria-label="User menu">
@@ -599,23 +1511,32 @@
             </div>
         </header>
 
-        <!-- Main Content -->
-        <main class="app-main">
-            <div id="main-content">{% block content %}{% endblock %}</div>
+        <main class="app-main" role="main">
+            <div id="main-content" aria-busy="false" tabindex="-1">
+                {% block content %}{% endblock %}
+            </div>
         </main>
 
-        <!-- Notifications Container -->
         <div class="notifications-container" id="notifications"></div>
 
         <script>
-            // Apps menu toggle
             const appsBtn = document.getElementById("apps-btn");
             const appsDropdown = document.getElementById("apps-dropdown");
+            const settingsBtn = document.getElementById("settings-btn");
+            const settingsPanel = document.getElementById("settings-panel");
 
             appsBtn.addEventListener("click", (e) => {
                 e.stopPropagation();
                 const isOpen = appsDropdown.classList.toggle("show");
                 appsBtn.setAttribute("aria-expanded", isOpen);
+                settingsPanel.classList.remove("show");
+            });
+
+            settingsBtn.addEventListener("click", (e) => {
+                e.stopPropagation();
+                const isOpen = settingsPanel.classList.toggle("show");
+                settingsBtn.setAttribute("aria-expanded", isOpen);
+                appsDropdown.classList.remove("show");
             });
 
             document.addEventListener("click", (e) => {
@@ -626,17 +1547,24 @@
                     appsDropdown.classList.remove("show");
                     appsBtn.setAttribute("aria-expanded", "false");
                 }
-            });
-
-            // Close on escape
-            document.addEventListener("keydown", (e) => {
-                if (e.key === "Escape") {
-                    appsDropdown.classList.remove("show");
-                    appsBtn.setAttribute("aria-expanded", "false");
+                if (
+                    !settingsPanel.contains(e.target) &&
+                    !settingsBtn.contains(e.target)
+                ) {
+                    settingsPanel.classList.remove("show");
+                    settingsBtn.setAttribute("aria-expanded", "false");
+                }
+            });
+
+            document.addEventListener("keydown", (e) => {
+                if (e.key === "Escape") {
+                    appsDropdown.classList.remove("show");
+                    settingsPanel.classList.remove("show");
+                    appsBtn.setAttribute("aria-expanded", "false");
+                    settingsBtn.setAttribute("aria-expanded", "false");
                 }
             });
 
-            // Keyboard shortcuts for apps
             document.addEventListener("keydown", (e) => {
                 if (e.altKey && !e.ctrlKey && !e.shiftKey) {
                     const shortcuts = {
@@ -646,6 +1574,12 @@
                         4: "mail",
                         5: "calendar",
                         6: "meet",
+                        7: "paper",
+                        8: "research",
+                        9: "sources",
+                        0: "analytics",
+                        a: "admin",
+                        m: "monitoring",
                     };
                     if (shortcuts[e.key]) {
                         e.preventDefault();
@@ -655,10 +1589,19 @@
                         if (link) link.click();
                         appsDropdown.classList.remove("show");
                     }
+                    if (e.key === ",") {
+                        e.preventDefault();
+                        settingsPanel.classList.toggle("show");
+                    }
+                    if (e.key === "s") {
+                        e.preventDefault();
+                        const settingsLink =
+                            document.querySelector(`a[href="#settings"]`);
+                        if (settingsLink) settingsLink.click();
+                    }
                 }
             });
 
-            // Update active app in menu
             document.body.addEventListener("htmx:afterSwap", (e) => {
                 if (e.detail.target.id === "main-content") {
                     const hash = window.location.hash || "#chat";
@@ -668,27 +1611,144 @@
                             item.getAttribute("href") === hash,
                         );
                     });
+                    settingsPanel.classList.remove("show");
                 }
             });
 
-            // Theme toggle
-            const themeBtn = document.getElementById("theme-btn");
-            themeBtn.addEventListener("click", () => {
-                document.body.classList.toggle("light-theme");
+            // Theme handling
+            const themeOptions = document.querySelectorAll(".theme-option");
+            const savedTheme = localStorage.getItem("gb-theme") || "dark";
+            document.body.setAttribute("data-theme", savedTheme);
+            document
+                .querySelector(`.theme-option[data-theme="${savedTheme}"]`)
+                ?.classList.add("active");
+
+            themeOptions.forEach((option) => {
+                option.addEventListener("click", () => {
+                    const theme = option.getAttribute("data-theme");
+                    document.body.setAttribute("data-theme", theme);
+                    localStorage.setItem("gb-theme", theme);
+                    themeOptions.forEach((o) => o.classList.remove("active"));
+                    option.classList.add("active");
+                });
+            });
+
+            function toggleQuickSetting(el) {
+                el.classList.toggle("active");
+                const setting = el.id.replace("toggle-", "");
                 localStorage.setItem(
-                    "theme",
-                    document.body.classList.contains("light-theme")
-                        ? "light"
-                        : "dark",
+                    `gb-${setting}`,
+                    el.classList.contains("active"),
+                );
+            }
+
+            // Load quick toggle states
+            ["notifications", "sound", "compact"].forEach((setting) => {
+                const saved = localStorage.getItem(`gb-${setting}`);
+                const toggle = document.getElementById(`toggle-${setting}`);
+                if (toggle && saved !== null) {
+                    toggle.classList.toggle("active", saved === "true");
+                }
+            });
+
+            function showKeyboardShortcuts() {
+                window.showNotification(
+                    "Alt+1-9,0 for apps, Alt+A Admin, Alt+M Monitoring, Alt+S Settings, Alt+, quick settings",
+                    "info",
+                    8000,
+                );
+            }
+
+            // Accessibility: Announce page changes to screen readers
+            function announceToScreenReader(message) {
+                const liveRegion = document.getElementById("aria-live");
+                if (liveRegion) {
+                    liveRegion.textContent = message;
+                    // Clear after announcement
+                    setTimeout(() => {
+                        liveRegion.textContent = "";
+                    }, 1000);
+                }
+            }
+
+            // HTMX accessibility hooks
+            document.body.addEventListener("htmx:beforeRequest", function (e) {
+                const target = e.detail.target;
+                if (target && target.id === "main-content") {
+                    target.setAttribute("aria-busy", "true");
+                    announceToScreenReader("Loading content...");
+                }
+            });
+
+            document.body.addEventListener("htmx:afterSwap", function (e) {
+                const target = e.detail.target;
+                if (target && target.id === "main-content") {
+                    target.setAttribute("aria-busy", "false");
+                    // Focus management: move focus to main content after navigation
+                    target.focus();
+                    announceToScreenReader("Content loaded");
+                }
+            });
+
+            document.body.addEventListener("htmx:responseError", function (e) {
+                const target = e.detail.target;
+                if (target) {
+                    target.setAttribute("aria-busy", "false");
+                }
+                announceToScreenReader(
+                    "Error loading content. Please try again.",
                 );
             });
 
-            // Restore theme
-            if (localStorage.getItem("theme") === "light") {
-                document.body.classList.add("light-theme");
-            }
+            // Keyboard navigation for apps grid
+            document.addEventListener("keydown", function (e) {
+                const appsGrid = document.querySelector(".apps-grid");
+                if (!appsGrid || !appsGrid.closest(".show")) return;
+
+                const items = Array.from(
+                    appsGrid.querySelectorAll(".app-item"),
+                );
+                const currentIndex = items.findIndex(
+                    (item) => item === document.activeElement,
+                );
+
+                if (currentIndex === -1) return;
+
+                let newIndex = currentIndex;
+                const columns = 3; // Grid has 3 columns on desktop
+
+                switch (e.key) {
+                    case "ArrowRight":
+                        newIndex = Math.min(currentIndex + 1, items.length - 1);
+                        break;
+                    case "ArrowLeft":
+                        newIndex = Math.max(currentIndex - 1, 0);
+                        break;
+                    case "ArrowDown":
+                        newIndex = Math.min(
+                            currentIndex + columns,
+                            items.length - 1,
+                        );
+                        break;
+                    case "ArrowUp":
+                        newIndex = Math.max(currentIndex - columns, 0);
+                        break;
+                    case "Home":
+                        newIndex = 0;
+                        break;
+                    case "End":
+                        newIndex = items.length - 1;
+                        break;
+                    default:
+                        return;
+                }
+
+                if (newIndex !== currentIndex) {
+                    e.preventDefault();
+                    items[newIndex].focus();
+                }
+            });
 
-            // Notification helper
             window.showNotification = function (
                 message,
                 type = "info",
@@ -698,17 +1758,174 @@
                 const notification = document.createElement("div");
                 notification.className = `notification ${type}`;
                 notification.innerHTML = `
-                <div class="notification-content">
-                    <div class="notification-message">${message}</div>
-                </div>
-                <button class="notification-close" onclick="this.parentElement.remove()">×</button>
-            `;
+                    <div class="notification-content">
+                        <div class="notification-message">${message}</div>
+                    </div>
+                    <button class="notification-close" onclick="this.parentElement.remove()" style="background:none;border:none;color:var(--text-secondary);cursor:pointer;font-size:1.25rem;">×</button>
+                `;
                 container.appendChild(notification);
-
                 if (duration > 0) {
                     setTimeout(() => notification.remove(), duration);
                 }
             };
+
+            // Global HTMX error handling with retry mechanism
+            const htmxRetryConfig = {
+                maxRetries: 3,
+                retryDelay: 1000,
+                retryCount: new Map(),
+            };
+
+            function getRetryKey(elt) {
+                return (
+                    elt.getAttribute("hx-get") ||
+                    elt.getAttribute("hx-post") ||
+                    elt.getAttribute("hx-put") ||
+                    elt.getAttribute("hx-delete") ||
+                    elt.id ||
+                    Math.random().toString(36)
+                );
+            }
+
+            function showErrorState(target, errorMessage, retryCallback) {
+                const errorHtml = `
+                    <div class="error-state">
+                        <svg class="error-state-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                            <circle cx="12" cy="12" r="10"></circle>
+                            <line x1="12" y1="8" x2="12" y2="12"></line>
+                            <line x1="12" y1="16" x2="12.01" y2="16"></line>
+                        </svg>
+                        <div class="error-state-title">Something went wrong</div>
+                        <div class="error-state-message">${errorMessage}</div>
+                        <div class="error-state-actions">
+                            <button class="btn-retry" onclick="window.retryLastRequest(this)">
+                                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                                    <path d="M23 4v6h-6"></path>
+                                    <path d="M1 20v-6h6"></path>
+                                    <path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10"></path>
+                                    <path d="M20.49 15a9 9 0 0 1-14.85 3.36L1 14"></path>
+                                </svg>
+                                Try Again
+                            </button>
+                        </div>
+                    </div>
+                `;
+                target.innerHTML = errorHtml;
+                target.dataset.retryCallback = retryCallback;
+            }
+
+            window.retryLastRequest = function (btn) {
+                const target = btn.closest(".error-state").parentElement;
+                const retryCallback = target.dataset.retryCallback;
+
+                btn.disabled = true;
+                btn.innerHTML = '<span class="spinner"></span> Retrying...';
+
+                if (retryCallback && window[retryCallback]) {
+                    window[retryCallback]();
+                } else {
+                    // Try to re-trigger HTMX request
+                    const triggers = target.querySelectorAll(
+                        "[hx-get], [hx-post]",
+                    );
+                    if (triggers.length > 0) {
+                        htmx.trigger(triggers[0], "htmx:trigger");
+                    } else {
+                        // Reload the current app
+                        const activeApp =
+                            document.querySelector(".app-item.active");
+                        if (activeApp) {
+                            activeApp.click();
+                        }
+                    }
+                }
+            };
+
+            // Handle HTMX errors globally
+            document.body.addEventListener("htmx:responseError", function (e) {
+                const target = e.detail.target;
+                const xhr = e.detail.xhr;
+                const retryKey = getRetryKey(e.detail.elt);
+
+                let currentRetries =
+                    htmxRetryConfig.retryCount.get(retryKey) || 0;
+
+                // Auto-retry for network errors (status 0) or server errors (5xx)
+                if (
+                    (xhr.status === 0 || xhr.status >= 500) &&
+                    currentRetries < htmxRetryConfig.maxRetries
+                ) {
+                    htmxRetryConfig.retryCount.set(
+                        retryKey,
+                        currentRetries + 1,
+                    );
+                    const delay =
+                        htmxRetryConfig.retryDelay *
+                        Math.pow(2, currentRetries);
+
+                    window.showNotification(
+                        `Request failed. Retrying in ${delay / 1000}s... (${currentRetries + 1}/${htmxRetryConfig.maxRetries})`,
+                        "warning",
+                        delay,
+                    );
+
+                    setTimeout(() => {
+                        htmx.trigger(e.detail.elt, "htmx:trigger");
+                    }, delay);
+                } else {
+                    // Max retries reached or client error - show error state
+                    htmxRetryConfig.retryCount.delete(retryKey);
+
+                    let errorMessage = "We couldn't load the content.";
+                    if (xhr.status === 401) {
+                        errorMessage =
+                            "Your session has expired. Please log in again.";
+                    } else if (xhr.status === 403) {
+                        errorMessage =
+                            "You don't have permission to access this resource.";
+                    } else if (xhr.status === 404) {
+                        errorMessage = "The requested content was not found.";
+                    } else if (xhr.status >= 500) {
+                        errorMessage =
+                            "The server is experiencing issues. Please try again later.";
+                    } else if (xhr.status === 0) {
+                        errorMessage =
+                            "Unable to connect. Please check your internet connection.";
+                    }
+
+                    if (target && target.id === "main-content") {
+                        showErrorState(target, errorMessage);
+                    } else {
+                        window.showNotification(errorMessage, "error", 8000);
+                    }
+                }
+            });
+
+            // Clear retry count on successful request
+            document.body.addEventListener("htmx:afterRequest", function (e) {
+                if (e.detail.successful) {
+                    const retryKey = getRetryKey(e.detail.elt);
+                    htmxRetryConfig.retryCount.delete(retryKey);
+                }
+            });
+
+            // Handle timeout errors
+            document.body.addEventListener("htmx:timeout", function (e) {
+                window.showNotification(
+                    "Request timed out. Please try again.",
+                    "warning",
+                    5000,
+                );
+            });
+
+            // Handle send errors (network issues before request sent)
+            document.body.addEventListener("htmx:sendError", function (e) {
+                window.showNotification(
+                    "Network error. Please check your connection.",
+                    "error",
+                    5000,
+                );
+            });
         </script>
 
         {% block scripts %}{% endblock %}
diff --git a/ui/suite/calendar/calendar.html b/ui/suite/calendar/calendar.html
index 6d8a963..bce0ba6 100644
--- a/ui/suite/calendar/calendar.html
+++ b/ui/suite/calendar/calendar.html
@@ -81,6 +81,34 @@
                 <!-- Upcoming events loaded here -->
             </div>
         </div>
+
+        <!-- iCal Import/Export -->
+        <div class="sidebar-section">
+            <div class="section-header">
+                <h3>Import / Export</h3>
+            </div>
+            <div class="ical-actions">
+                <a href="/api/calendar/export.ics"
+                   class="btn-secondary ical-btn"
+                   download="calendar.ics">
+                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                        <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
+                        <polyline points="7 10 12 15 17 10"></polyline>
+                        <line x1="12" y1="15" x2="12" y2="3"></line>
+                    </svg>
+                    Export iCal
+                </a>
+                <button class="btn-secondary ical-btn"
+                        onclick="document.getElementById('ical-import-modal').classList.remove('hidden')">
+                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                        <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
+                        <polyline points="17 8 12 3 7 8"></polyline>
+                        <line x1="12" y1="3" x2="12" y2="15"></line>
+                    </svg>
+                    Import iCal
+                </button>
+            </div>
+        </div>
     </aside>
 
     <!-- Main Calendar -->
@@ -369,6 +397,48 @@
     </div>
 </div>
 
+<!-- iCal Import Modal -->
+<div class="modal hidden" id="ical-import-modal">
+    <div class="modal-content">
+        <div class="modal-header">
+            <h3>Import iCal File</h3>
+            <button type="button" class="btn-icon close-modal" onclick="document.getElementById('ical-import-modal').classList.add('hidden')">
+                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                    <line x1="18" y1="6" x2="6" y2="18"></line>
+                    <line x1="6" y1="6" x2="18" y2="18"></line>
+                </svg>
+            </button>
+        </div>
+        <div class="modal-body">
+            <form hx-post="/api/calendar/import"
+                  hx-encoding="multipart/form-data"
+                  hx-target="#import-result"
+                  hx-swap="innerHTML"
+                  hx-on::after-request="if(event.detail.successful) { setTimeout(() => { document.getElementById('ical-import-modal').classList.add('hidden'); location.reload(); }, 1500); }">
+                <div class="form-group">
+                    <label>Select .ics file</label>
+                    <input type="file" name="file" accept=".ics,.ical,text/calendar" required
+                           style="padding: 12px; border: 2px dashed var(--border); border-radius: 8px; width: 100%; box-sizing: border-box;">
+                </div>
+                <div class="form-group">
+                    <label>Import to calendar</label>
+                    <select name="calendar_id"
+                            hx-get="/api/calendar/list"
+                            hx-trigger="load"
+                            hx-swap="innerHTML">
+                        <option value="">Default Calendar</option>
+                    </select>
+                </div>
+                <div id="import-result" style="margin-top: 12px;"></div>
+                <div class="form-actions">
+                    <button type="button" class="btn-secondary" onclick="document.getElementById('ical-import-modal').classList.add('hidden')">Cancel</button>
+                    <button type="submit" class="btn-primary">Import</button>
+                </div>
+            </form>
+        </div>
+    </div>
+</div>
+
 <style>
 /* Calendar Container */
 .calendar-container {
@@ -1303,6 +1373,35 @@
 }
 
 /* Responsive */
+/* iCal Import/Export */
+.ical-actions {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+}
+
+.ical-btn {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 8px;
+    padding: 10px 12px;
+    font-size: 13px;
+    text-decoration: none;
+    border-radius: 8px;
+    cursor: pointer;
+    transition: background 0.2s, border-color 0.2s;
+}
+
+.ical-btn:hover {
+    background: var(--surface-hover);
+    border-color: var(--primary);
+}
+
+.ical-btn svg {
+    flex-shrink: 0;
+}
+
 @media (max-width: 768px) {
     .calendar-sidebar {
         position: absolute;
diff --git a/ui/suite/drive/index.html b/ui/suite/drive/index.html
index 5dd7032..35d8ef5 100644
--- a/ui/suite/drive/index.html
+++ b/ui/suite/drive/index.html
@@ -94,6 +94,42 @@
                 <span id="storage-detail">Calculating...</span>
             </div>
         </div>
+
+        <!-- Sync Status Panel -->
+        <div class="sync-panel">
+            <div class="storage-header">
+                <span class="storage-label">Sync Status</span>
+                <span class="storage-value" id="sync-status"
+                      hx-get="/files/sync/status"
+                      hx-trigger="load, every 10s"
+                      hx-swap="innerHTML">
+                    Checking...
+                </span>
+            </div>
+            <div class="sync-actions" style="display: flex; gap: 8px; margin-top: 8px;">
+                <button class="btn-secondary" style="flex: 1; padding: 6px 12px; font-size: 12px;"
+                        hx-post="/files/sync/start"
+                        hx-swap="none"
+                        hx-on::after-request="htmx.trigger('#sync-status', 'load')">
+                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="vertical-align: middle; margin-right: 4px;">
+                        <polyline points="23 4 23 10 17 10"></polyline>
+                        <polyline points="1 20 1 14 7 14"></polyline>
+                        <path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15"></path>
+                    </svg>
+                    Start
+                </button>
+                <button class="btn-secondary" style="flex: 1; padding: 6px 12px; font-size: 12px;"
+                        hx-post="/files/sync/stop"
+                        hx-swap="none"
+                        hx-on::after-request="htmx.trigger('#sync-status', 'load')">
+                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="vertical-align: middle; margin-right: 4px;">
+                        <rect x="6" y="4" width="4" height="16"></rect>
+                        <rect x="14" y="4" width="4" height="16"></rect>
+                    </svg>
+                    Stop
+                </button>
+            </div>
+        </div>
     </aside>
 
     <!-- Main Content -->
@@ -161,6 +197,15 @@
                     <option value="type">Type</option>
                 </select>
 
+                <button class="icon-btn" title="Document Tools" onclick="document.getElementById('docs-modal').showModal()">
+                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                        <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
+                        <polyline points="14 2 14 8 20 8"></polyline>
+                        <line x1="12" y1="18" x2="12" y2="12"></line>
+                        <line x1="9" y1="15" x2="15" y2="15"></line>
+                    </svg>
+                </button>
+
                 <button class="icon-btn" title="Info" onclick="toggleInfoPanel()">
                     <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                         <circle cx="12" cy="12" r="10"></circle>
@@ -214,8 +259,16 @@
                     </svg>
                     Download
                 </button>
+                <button class="action-btn" title="Copy"
+                        onclick="document.getElementById('copy-modal').showModal()">
+                    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                        <rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
+                        <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>
+                    </svg>
+                    Copy
+                </button>
                 <button class="action-btn" title="Move"
-                        onclick="showMoveModal()">
+                        onclick="document.getElementById('move-modal').showModal()">
                     <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                         <path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"></path>
                     </svg>
@@ -375,6 +428,300 @@
     </div>
 </dialog>
 
+<!-- Copy Modal -->
+<dialog class="modal" id="copy-modal">
+    <form class="modal-content"
+          hx-post="/files/copy"
+          hx-target="#file-grid"
+          hx-swap="innerHTML"
+          hx-on::after-request="document.getElementById('copy-modal').close()">
+        <div class="modal-header">
+            <h2>Copy to</h2>
+            <button type="button" class="close-btn" onclick="document.getElementById('copy-modal').close()">
+                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                    <line x1="18" y1="6" x2="6" y2="18"></line>
+                    <line x1="6" y1="6" x2="18" y2="18"></line>
+                </svg>
+            </button>
+        </div>
+        <div class="modal-body">
+            <input type="hidden" name="source" id="copy-source" value="">
+            <div class="form-group">
+                <label for="copy-destination">Destination folder</label>
+                <select id="copy-destination" name="destination" class="sort-dropdown" style="width: 100%;"
+                        hx-get="/api/drive/folders"
+                        hx-trigger="load"
+                        hx-swap="innerHTML">
+                    <option value="/">/ (Root)</option>
+                </select>
+            </div>
+        </div>
+        <div class="modal-footer">
+            <button type="button" class="btn-secondary" onclick="document.getElementById('copy-modal').close()">Cancel</button>
+            <button type="submit" class="btn-primary">Copy</button>
+        </div>
+    </form>
+</dialog>
+
+<!-- Move Modal -->
+<dialog class="modal" id="move-modal">
+    <form class="modal-content"
+          hx-post="/files/move"
+          hx-target="#file-grid"
+          hx-swap="innerHTML"
+          hx-on::after-request="document.getElementById('move-modal').close()">
+        <div class="modal-header">
+            <h2>Move to</h2>
+            <button type="button" class="close-btn" onclick="document.getElementById('move-modal').close()">
+                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                    <line x1="18" y1="6" x2="6" y2="18"></line>
+                    <line x1="6" y1="6" x2="18" y2="18"></line>
+                </svg>
+            </button>
+        </div>
+        <div class="modal-body">
+            <input type="hidden" name="source" id="move-source" value="">
+            <div class="form-group">
+                <label for="move-destination">Destination folder</label>
+                <select id="move-destination" name="destination" class="sort-dropdown" style="width: 100%;"
+                        hx-get="/api/drive/folders"
+                        hx-trigger="load"
+                        hx-swap="innerHTML">
+                    <option value="/">/ (Root)</option>
+                </select>
+            </div>
+        </div>
+        <div class="modal-footer">
+            <button type="button" class="btn-secondary" onclick="document.getElementById('move-modal').close()">Cancel</button>
+            <button type="submit" class="btn-primary">Move</button>
+        </div>
+    </form>
+</dialog>
+
+<!-- Permissions Modal -->
+<dialog class="modal" id="permissions-modal">
+    <div class="modal-content">
+        <div class="modal-header">
+            <h2>Permissions</h2>
+            <button type="button" class="close-btn" onclick="document.getElementById('permissions-modal').close()">
+                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                    <line x1="18" y1="6" x2="6" y2="18"></line>
+                    <line x1="6" y1="6" x2="18" y2="18"></line>
+                </svg>
+            </button>
+        </div>
+        <div class="modal-body">
+            <input type="hidden" name="path" id="permissions-path" value="">
+            <div id="permissions-content"
+                 hx-get="/files/permissions"
+                 hx-trigger="load"
+                 hx-vals="js:{path: document.getElementById('permissions-path').value}"
+                 hx-swap="innerHTML">
+                <div class="loading-state">
+                    <div class="spinner"></div>
+                    <p>Loading permissions...</p>
+                </div>
+            </div>
+            <div class="form-group" style="margin-top: 16px;">
+                <label>Share with</label>
+                <div style="display: flex; gap: 8px;">
+                    <input type="email" id="share-email" placeholder="Enter email address" style="flex: 1;">
+                    <select id="share-permission" class="sort-dropdown">
+                        <option value="read">Can view</option>
+                        <option value="write">Can edit</option>
+                        <option value="admin">Full access</option>
+                    </select>
+                </div>
+            </div>
+        </div>
+        <div class="modal-footer">
+            <button type="button" class="btn-secondary" onclick="document.getElementById('permissions-modal').close()">Close</button>
+            <button type="button" class="btn-primary"
+                    hx-post="/files/shareFolder"
+                    hx-include="#permissions-path, #share-email, #share-permission"
+                    hx-swap="none"
+                    hx-on::after-request="htmx.trigger('#permissions-content', 'load')">
+                Share
+            </button>
+        </div>
+    </div>
+</dialog>
+
+<!-- Document Processing Modal -->
+<dialog class="modal modal-large" id="docs-modal">
+    <div class="modal-content">
+        <div class="modal-header">
+            <h2>Document Tools</h2>
+            <button type="button" class="close-btn" onclick="document.getElementById('docs-modal').close()">
+                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                    <line x1="18" y1="6" x2="6" y2="18"></line>
+                    <line x1="6" y1="6" x2="18" y2="18"></line>
+                </svg>
+            </button>
+        </div>
+        <div class="modal-body">
+            <div class="docs-tools-grid">
+                <!-- Merge Documents -->
+                <div class="docs-tool-card">
+                    <h3>
+                        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                            <path d="M8 6h13"></path>
+                            <path d="M8 12h13"></path>
+                            <path d="M8 18h13"></path>
+                            <path d="M3 6h.01"></path>
+                            <path d="M3 12h.01"></path>
+                            <path d="M3 18h.01"></path>
+                        </svg>
+                        Merge Documents
+                    </h3>
+                    <p>Combine multiple documents into one</p>
+                    <form hx-post="/docs/merge"
+                          hx-target="#docs-result"
+                          hx-swap="innerHTML"
+                          hx-encoding="multipart/form-data">
+                        <input type="file" name="files" multiple accept=".pdf,.docx,.doc,.txt" class="form-group" style="margin-bottom: 8px;">
+                        <input type="text" name="output_name" placeholder="Output filename" class="form-group" style="width: 100%; margin-bottom: 8px;">
+                        <button type="submit" class="btn-primary" style="width: 100%;">Merge</button>
+                    </form>
+                </div>
+
+                <!-- Convert Document -->
+                <div class="docs-tool-card">
+                    <h3>
+                        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                            <polyline points="17 1 21 5 17 9"></polyline>
+                            <path d="M3 11V9a4 4 0 0 1 4-4h14"></path>
+                            <polyline points="7 23 3 19 7 15"></polyline>
+                            <path d="M21 13v2a4 4 0 0 1-4 4H3"></path>
+                        </svg>
+                        Convert Format
+                    </h3>
+                    <p>Convert between document formats</p>
+                    <form hx-post="/docs/convert"
+                          hx-target="#docs-result"
+                          hx-swap="innerHTML"
+                          hx-encoding="multipart/form-data">
+                        <input type="file" name="file" accept=".pdf,.docx,.doc,.txt,.md,.html" class="form-group" style="margin-bottom: 8px;">
+                        <select name="format" class="sort-dropdown" style="width: 100%; margin-bottom: 8px;">
+                            <option value="pdf">PDF</option>
+                            <option value="docx">Word (DOCX)</option>
+                            <option value="txt">Plain Text</option>
+                            <option value="md">Markdown</option>
+                            <option value="html">HTML</option>
+                        </select>
+                        <button type="submit" class="btn-primary" style="width: 100%;">Convert</button>
+                    </form>
+                </div>
+
+                <!-- Fill Template -->
+                <div class="docs-tool-card">
+                    <h3>
+                        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                            <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
+                            <polyline points="14 2 14 8 20 8"></polyline>
+                            <line x1="16" y1="13" x2="8" y2="13"></line>
+                            <line x1="16" y1="17" x2="8" y2="17"></line>
+                        </svg>
+                        Fill Template
+                    </h3>
+                    <p>Populate template with data</p>
+                    <form hx-post="/docs/fill"
+                          hx-target="#docs-result"
+                          hx-swap="innerHTML"
+                          hx-encoding="multipart/form-data">
+                        <input type="file" name="template" accept=".docx,.doc" class="form-group" style="margin-bottom: 8px;">
+                        <input type="file" name="data" accept=".json,.csv" class="form-group" style="margin-bottom: 8px;">
+                        <button type="submit" class="btn-primary" style="width: 100%;">Fill</button>
+                    </form>
+                </div>
+
+                <!-- Export Document -->
+                <div class="docs-tool-card">
+                    <h3>
+                        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                            <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
+                            <polyline points="7 10 12 15 17 10"></polyline>
+                            <line x1="12" y1="15" x2="12" y2="3"></line>
+                        </svg>
+                        Export
+                    </h3>
+                    <p>Export document in specified format</p>
+                    <form hx-post="/docs/export"
+                          hx-target="#docs-result"
+                          hx-swap="innerHTML">
+                        <input type="text" name="path" placeholder="File path (e.g., /documents/report.docx)" class="form-group" style="width: 100%; margin-bottom: 8px;">
+                        <select name="format" class="sort-dropdown" style="width: 100%; margin-bottom: 8px;">
+                            <option value="pdf">PDF</option>
+                            <option value="docx">Word (DOCX)</option>
+                            <option value="txt">Plain Text</option>
+                        </select>
+                        <button type="submit" class="btn-primary" style="width: 100%;">Export</button>
+                    </form>
+                </div>
+
+                <!-- Import Document -->
+                <div class="docs-tool-card">
+                    <h3>
+                        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                            <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
+                            <polyline points="17 8 12 3 7 8"></polyline>
+                            <line x1="12" y1="3" x2="12" y2="15"></line>
+                        </svg>
+                        Import
+                    </h3>
+                    <p>Import document from URL or upload</p>
+                    <form hx-post="/docs/import"
+                          hx-target="#docs-result"
+                          hx-swap="innerHTML"
+                          hx-encoding="multipart/form-data">
+                        <input type="url" name="url" placeholder="Document URL (optional)" class="form-group" style="width: 100%; margin-bottom: 8px;">
+                        <input type="file" name="file" class="form-group" style="margin-bottom: 8px;">
+                        <input type="text" name="destination" placeholder="Destination folder" value="/" class="form-group" style="width: 100%; margin-bottom: 8px;">
+                        <button type="submit" class="btn-primary" style="width: 100%;">Import</button>
+                    </form>
+                </div>
+            </div>
+
+            <!-- Result area -->
+            <div id="docs-result" style="margin-top: 16px;"></div>
+        </div>
+        <div class="modal-footer">
+            <button type="button" class="btn-secondary" onclick="document.getElementById('docs-modal').close()">Close</button>
+        </div>
+    </div>
+</dialog>
+
+<!-- Versions Modal -->
+<dialog class="modal" id="versions-modal">
+    <div class="modal-content">
+        <div class="modal-header">
+            <h2>Version History</h2>
+            <button type="button" class="close-btn" onclick="document.getElementById('versions-modal').close()">
+                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                    <line x1="18" y1="6" x2="6" y2="18"></line>
+                    <line x1="6" y1="6" x2="18" y2="18"></line>
+                </svg>
+            </button>
+        </div>
+        <div class="modal-body">
+            <input type="hidden" name="path" id="versions-path" value="">
+            <div id="versions-list"
+                 hx-get="/files/versions"
+                 hx-trigger="load"
+                 hx-vals="js:{path: document.getElementById('versions-path').value}"
+                 hx-swap="innerHTML">
+                <div class="loading-state">
+                    <div class="spinner"></div>
+                    <p>Loading versions...</p>
+                </div>
+            </div>
+        </div>
+        <div class="modal-footer">
+            <button type="button" class="btn-secondary" onclick="document.getElementById('versions-modal').close()">Close</button>
+        </div>
+    </div>
+</dialog>
+
 <!-- Context Menu -->
 <div class="context-menu" id="context-menu" style="display: none;">
     <button class="context-item" data-action="open">
@@ -401,7 +748,8 @@
         </svg>
         Download
     </button>
-    <button class="context-item" data-action="share">
+    <button class="context-item" data-action="share"
+            onclick="document.getElementById('context-menu').style.display='none'; document.getElementById('permissions-modal').showModal();">
         <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
             <circle cx="18" cy="5" r="3"></circle>
             <circle cx="6" cy="12" r="3"></circle>
@@ -419,7 +767,16 @@
         </svg>
         Rename
     </button>
-    <button class="context-item" data-action="move">
+    <button class="context-item" data-action="copy"
+            onclick="document.getElementById('context-menu').style.display='none'; document.getElementById('copy-modal').showModal();">
+        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
+            <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>
+        </svg>
+        Copy to
+    </button>
+    <button class="context-item" data-action="move"
+            onclick="document.getElementById('context-menu').style.display='none'; document.getElementById('move-modal').showModal();">
         <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
             <path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"></path>
         </svg>
@@ -431,6 +788,14 @@
         </svg>
         Add to starred
     </button>
+    <button class="context-item" data-action="versions"
+            onclick="document.getElementById('context-menu').style.display='none'; document.getElementById('versions-modal').showModal(); htmx.trigger('#versions-list', 'load');">
+        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <circle cx="12" cy="12" r="10"></circle>
+            <polyline points="12 6 12 12 16 14"></polyline>
+        </svg>
+        Version history
+    </button>
     <div class="context-divider"></div>
     <button class="context-item danger" data-action="delete">
         <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
@@ -570,6 +935,91 @@
         color: var(--text-secondary);
     }
 
+    /* Document Tools Grid */
+    .docs-tools-grid {
+        display: grid;
+        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+        gap: 16px;
+    }
+
+    .docs-tool-card {
+        background: var(--surface-hover);
+        border-radius: 12px;
+        padding: 16px;
+        border: 1px solid var(--border);
+    }
+
+    .docs-tool-card h3 {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        font-size: 14px;
+        font-weight: 600;
+        margin: 0 0 8px 0;
+    }
+
+    .docs-tool-card h3 svg {
+        color: var(--primary);
+    }
+
+    .docs-tool-card p {
+        font-size: 12px;
+        color: var(--text-secondary);
+        margin: 0 0 12px 0;
+    }
+
+    .docs-tool-card input[type="file"] {
+        font-size: 12px;
+        padding: 8px;
+        border: 1px dashed var(--border);
+        border-radius: 6px;
+        background: var(--surface);
+        width: 100%;
+        box-sizing: border-box;
+    }
+
+    .docs-tool-card input[type="text"],
+    .docs-tool-card input[type="url"] {
+        padding: 8px 12px;
+        border: 1px solid var(--border);
+        border-radius: 6px;
+        background: var(--surface);
+        color: var(--text);
+        font-size: 13px;
+    }
+
+    .docs-tool-card input[type="text"]:focus,
+    .docs-tool-card input[type="url"]:focus {
+        outline: none;
+        border-color: var(--primary);
+    }
+
+    /* Sync Panel */
+    .sync-panel {
+        padding: 16px;
+        background: var(--surface-hover);
+        border-radius: 12px;
+        margin-top: 12px;
+    }
+
+    .sync-panel .storage-header {
+        margin-bottom: 8px;
+    }
+
+    .sync-actions button {
+        border: 1px solid var(--border);
+        border-radius: 6px;
+        background: var(--surface);
+        color: var(--text);
+        cursor: pointer;
+        transition: background 0.2s, border-color 0.2s;
+    }
+
+    .sync-actions button:hover {
+        background: var(--surface-hover);
+        border-color: var(--primary);
+    }
+
     /* Main Content */
     .drive-main {
         display: flex;
@@ -1362,4 +1812,121 @@
     }
 </style>
 
-<script
+<script>
+    // View toggle
+    function setView(view) {
+        const grid = document.getElementById('file-grid');
+        const gridBtn = document.getElementById('grid-view-btn');
+        const listBtn = document.getElementById('list-view-btn');
+
+        if (view === 'list') {
+            grid.classList.add('list-view');
+            listBtn.classList.add('active');
+            gridBtn.classList.remove('active');
+        } else {
+            grid.classList.remove('list-view');
+            gridBtn.classList.add('active');
+            listBtn.classList.remove('active');
+        }
+    }
+
+    // Navigation active state
+    function setActiveNav(el) {
+        document.querySelectorAll('.nav-item').forEach(item => item.classList.remove('active'));
+        el.classList.add('active');
+    }
+
+    // Info panel toggle
+    function toggleInfoPanel() {
+        const panel = document.getElementById('info-panel');
+        panel.style.display = panel.style.display === 'none' ? 'block' : 'none';
+    }
+
+    // Selection handling
+    function updateSelection() {
+        const checked = document.querySelectorAll('.file-checkbox:checked');
+        const count = checked.length;
+        const bar = document.getElementById('selection-bar');
+        const countEl = document.getElementById('selected-count');
+
+        countEl.textContent = count;
+        bar.style.display = count > 0 ? 'flex' : 'none';
+
+        // Update hidden inputs for copy/move modals
+        const paths = Array.from(checked).map(cb => cb.value).join(',');
+        document.getElementById('copy-source').value = paths;
+        document.getElementById('move-source').value = paths;
+    }
+
+    function clearSelection() {
+        document.querySelectorAll('.file-checkbox:checked').forEach(cb => {
+            cb.checked = false;
+        });
+        updateSelection();
+    }
+
+    // File upload handling
+    function triggerUpload() {
+        document.getElementById('file-input').click();
+    }
+
+    // Context menu handling
+    let contextTarget = null;
+
+    document.addEventListener('contextmenu', function(e) {
+        const fileCard = e.target.closest('.file-card');
+        if (fileCard) {
+            e.preventDefault();
+            contextTarget = fileCard;
+            const menu = document.getElementById('context-menu');
+            menu.style.display = 'block';
+            menu.style.left = e.pageX + 'px';
+            menu.style.top = e.pageY + 'px';
+
+            // Update copy/move/permissions/versions source for single file
+            const filePath = fileCard.dataset.path || '';
+            document.getElementById('copy-source').value = filePath;
+            document.getElementById('move-source').value = filePath;
+            document.getElementById('permissions-path').value = filePath;
+            document.getElementById('versions-path').value = filePath;
+        }
+    });
+
+    document.addEventListener('click', function(e) {
+        const menu = document.getElementById('context-menu');
+        if (!menu.contains(e.target)) {
+            menu.style.display = 'none';
+        }
+    });
+
+    // Drag and drop
+    const dropOverlay = document.getElementById('drop-overlay');
+
+    document.addEventListener('dragenter', function(e) {
+        e.preventDefault();
+        dropOverlay.classList.add('visible');
+    });
+
+    dropOverlay.addEventListener('dragleave', function(e) {
+        if (e.target === dropOverlay) {
+            dropOverlay.classList.remove('visible');
+        }
+    });
+
+    dropOverlay.addEventListener('drop', function(e) {
+        e.preventDefault();
+        dropOverlay.classList.remove('visible');
+        // Handle file drop via HTMX
+    });
+
+    dropOverlay.addEventListener('dragover', function(e) {
+        e.preventDefault();
+    });
+
+    // Listen for checkbox changes
+    document.addEventListener('change', function(e) {
+        if (e.target.classList.contains('file-checkbox')) {
+            updateSelection();
+        }
+    });
+</script>
diff --git a/ui/suite/mail/mail.html b/ui/suite/mail/mail.html
index 449c103..ed32515 100644
--- a/ui/suite/mail/mail.html
+++ b/ui/suite/mail/mail.html
@@ -1,100 +1,221 @@
 <div class="mail-layout">
     <!-- Sidebar -->
     <div class="panel mail-sidebar">
-        <div style="padding: 1rem; border-bottom: 1px solid #334155">
-            <button
-                style="
-                    width: 100%;
-                    padding: 0.75rem;
-                    background: #3b82f6;
-                    color: white;
-                    border: none;
-                    border-radius: 0.5rem;
-                    cursor: pointer;
-                    font-weight: 600;
-                "
-                hx-get="/api/email/compose"
-                hx-target="#mail-content"
-                hx-swap="innerHTML"
-            >
-                ✏ Compose
+        <div class="compose-section">
+            <button class="compose-btn" onclick="openCompose()">
+                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                    <path d="M12 5v14M5 12h14"/>
+                </svg>
+                Compose
             </button>
         </div>
 
         <!-- Folder List -->
-        <div
-            id="mail-folders"
-            hx-get="/api/email/folders"
-            hx-trigger="load"
-            hx-swap="innerHTML"
-        >
-            <div
-                class="nav-item active"
-                hx-get="/api/email/list?folder=inbox"
-                hx-target="#mail-list"
-                hx-swap="innerHTML"
-            >
-                <span>📥</span> Inbox
-                <span
-                    style="
-                        margin-left: auto;
-                        font-size: 0.875rem;
-                        color: #64748b;
-                    "
-                    >0</span
-                >
+        <div class="folders-section">
+            <div class="nav-item active" data-folder="inbox" hx-get="/api/email/list?folder=inbox" hx-target="#mail-list" hx-swap="innerHTML">
+                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                    <polyline points="22 12 16 12 14 15 10 15 8 12 2 12"/>
+                    <path d="M5.45 5.11L2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z"/>
+                </svg>
+                <span>Inbox</span>
+                <span class="folder-badge unread" id="inbox-count">0</span>
             </div>
-            <div
-                class="nav-item"
-                hx-get="/api/email/list?folder=sent"
-                hx-target="#mail-list"
-                hx-swap="innerHTML"
-                onclick="window.currentFolder='sent'"
-            >
-                <span>📤</span> Sent
+            <div class="nav-item" data-folder="starred" hx-get="/api/email/list?folder=starred" hx-target="#mail-list" hx-swap="innerHTML">
+                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                    <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/>
+                </svg>
+                <span>Starred</span>
             </div>
-            <div
-                class="nav-item"
-                hx-get="/api/email/tracking/list"
-                hx-target="#mail-list"
-                hx-swap="innerHTML"
-                onclick="window.currentFolder='tracking'"
-            >
-                <span>📊</span> Tracking
+            <div class="nav-item" data-folder="sent" hx-get="/api/email/list?folder=sent" hx-target="#mail-list" hx-swap="innerHTML">
+                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                    <line x1="22" y1="2" x2="11" y2="13"/>
+                    <polygon points="22 2 15 22 11 13 2 9 22 2"/>
+                </svg>
+                <span>Sent</span>
             </div>
-            <div
-                class="nav-item"
-                hx-get="/api/email/list?folder=drafts"
-                hx-target="#mail-list"
-                hx-swap="innerHTML"
-            >
-                <span>📝</span> Drafts
+            <div class="nav-item" data-folder="scheduled" hx-get="/api/email/list?folder=scheduled" hx-target="#mail-list" hx-swap="innerHTML">
+                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                    <circle cx="12" cy="12" r="10"/>
+                    <polyline points="12 6 12 12 16 14"/>
+                </svg>
+                <span>Scheduled</span>
+                <span class="folder-badge" id="scheduled-count">0</span>
             </div>
-            <div
-                class="nav-item"
-                hx-get="/api/email/list?folder=trash"
-                hx-target="#mail-list"
-                hx-swap="innerHTML"
-            >
-                <span>🗑️</span> Trash
+            <div class="nav-item" data-folder="drafts" hx-get="/api/email/list?folder=drafts" hx-target="#mail-list" hx-swap="innerHTML">
+                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                    <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/>
+                    <polyline points="14 2 14 8 20 8"/>
+                    <line x1="16" y1="13" x2="8" y2="13"/>
+                    <line x1="16" y1="17" x2="8" y2="17"/>
+                </svg>
+                <span>Drafts</span>
+                <span class="folder-badge" id="drafts-count">0</span>
             </div>
+            <div class="nav-item" data-folder="tracking" hx-get="/api/email/tracking/list" hx-target="#mail-list" hx-swap="innerHTML">
+                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                    <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/>
+                    <circle cx="12" cy="12" r="3"/>
+                </svg>
+                <span>Tracking</span>
+            </div>
+            <div class="nav-item" data-folder="spam" hx-get="/api/email/list?folder=spam" hx-target="#mail-list" hx-swap="innerHTML">
+                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                    <path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/>
+                    <line x1="12" y1="9" x2="12" y2="13"/>
+                    <line x1="12" y1="17" x2="12.01" y2="17"/>
+                </svg>
+                <span>Spam</span>
+            </div>
+            <div class="nav-item" data-folder="trash" hx-get="/api/email/list?folder=trash" hx-target="#mail-list" hx-swap="innerHTML">
+                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                    <polyline points="3 6 5 6 21 6"/>
+                    <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/>
+                </svg>
+                <span>Trash</span>
+            </div>
+        </div>
+
+        <!-- Accounts Section -->
+        <div class="labels-section">
+            <div class="section-header">
+                <span>Accounts</span>
+                <button class="icon-btn" onclick="document.getElementById('add-account-modal').showModal()" title="Add account">
+                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                        <line x1="12" y1="5" x2="12" y2="19"/>
+                        <line x1="5" y1="12" x2="19" y2="12"/>
+                    </svg>
+                </button>
+            </div>
+            <div id="accounts-list"
+                 hx-get="/api/email/accounts"
+                 hx-trigger="load"
+                 hx-swap="innerHTML">
+                <!-- Accounts loaded here -->
+            </div>
+        </div>
+
+        <!-- Labels Section -->
+        <div class="labels-section">
+            <div class="section-header">
+                <span>Labels</span>
+                <button class="icon-btn" onclick="openLabelManager()" title="Manage labels">
+                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                        <line x1="12" y1="5" x2="12" y2="19"/>
+                        <line x1="5" y1="12" x2="19" y2="12"/>
+                    </svg>
+                </button>
+            </div>
+            <div id="labels-list" hx-get="/api/email/labels" hx-trigger="load" hx-swap="innerHTML">
+                <div class="label-item" style="--label-color: #ef4444;">
+                    <span class="label-dot"></span>
+                    <span>Important</span>
+                </div>
+                <div class="label-item" style="--label-color: #f59e0b;">
+                    <span class="label-dot"></span>
+                    <span>Work</span>
+                </div>
+                <div class="label-item" style="--label-color: #22c55e;">
+                    <span class="label-dot"></span>
+                    <span>Personal</span>
+                </div>
+            </div>
+        </div>
+
+        <!-- Quick Actions -->
+        <div class="quick-actions">
+            <button class="quick-action-btn" onclick="openTemplates()" title="Email Templates">
+                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                    <rect x="3" y="3" width="18" height="18" rx="2" ry="2"/>
+                    <line x1="3" y1="9" x2="21" y2="9"/>
+                    <line x1="9" y1="21" x2="9" y2="9"/>
+                </svg>
+                <span>Templates</span>
+            </button>
+            <button class="quick-action-btn" onclick="openSignatures()" title="Signatures">
+                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                    <path d="M17 3a2.828 2.828 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5L17 3z"/>
+                </svg>
+                <span>Signatures</span>
+            </button>
+            <button class="quick-action-btn" onclick="openRules()" title="Email Rules">
+                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                    <polygon points="22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3"/>
+                </svg>
+                <span>Rules</span>
+            </button>
+            <button class="quick-action-btn" onclick="openAutoResponder()" title="Out of Office">
+                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                    <circle cx="12" cy="12" r="10"/>
+                    <path d="M8 14s1.5 2 4 2 4-2 4-2"/>
+                    <line x1="9" y1="9" x2="9.01" y2="9"/>
+                    <line x1="15" y1="9" x2="15.01" y2="9"/>
+                </svg>
+                <span>Auto-reply</span>
+            </button>
         </div>
     </div>
 
     <!-- Mail List -->
     <div class="panel mail-list">
-        <div style="padding: 1rem; border-bottom: 1px solid #334155">
-            <h3 id="folder-title">Inbox</h3>
+        <div class="list-header">
+            <div class="list-header-left">
+                <input type="checkbox" class="select-all" onchange="toggleSelectAll(this)" title="Select all"/>
+                <h3 id="folder-title">Inbox</h3>
+            </div>
+            <div class="list-header-right">
+                <div class="search-box">
+                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                        <circle cx="11" cy="11" r="8"/>
+                        <line x1="21" y1="21" x2="16.65" y2="16.65"/>
+                    </svg>
+                    <input type="text" placeholder="Search emails..." id="email-search"
+                           hx-get="/api/email/search" hx-trigger="keyup changed delay:300ms"
+                           hx-target="#mail-list" hx-include="this" name="q"/>
+                </div>
+                <button class="icon-btn" onclick="refreshMailList()" title="Refresh">
+                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                        <polyline points="23 4 23 10 17 10"/>
+                        <polyline points="1 20 1 14 7 14"/>
+                        <path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15"/>
+                    </svg>
+                </button>
+            </div>
         </div>
-        <div
-            id="mail-list"
-            hx-get="/api/email/list?folder=inbox"
-            hx-trigger="load"
-            hx-swap="innerHTML"
-        >
-            <!-- Loading state -->
-            <div style="padding: 2rem; text-align: center; color: #64748b">
-                Loading emails...
+
+        <!-- Bulk Actions Bar (hidden by default) -->
+        <div class="bulk-actions" id="bulk-actions" style="display: none;">
+            <span class="selected-count">0 selected</span>
+            <button class="bulk-btn" onclick="archiveSelected()" title="Archive">
+                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                    <polyline points="21 8 21 21 3 21 3 8"/>
+                    <rect x="1" y="3" width="22" height="5"/>
+                    <line x1="10" y1="12" x2="14" y2="12"/>
+                </svg>
+            </button>
+            <button class="bulk-btn" onclick="markAsRead()" title="Mark as read">
+                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                    <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/>
+                    <polyline points="22 4 12 14.01 9 11.01"/>
+                </svg>
+            </button>
+            <button class="bulk-btn" onclick="addLabelToSelected()" title="Add label">
+                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                    <path d="M20.59 13.41l-7.17 7.17a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82z"/>
+                    <line x1="7" y1="7" x2="7.01" y2="7"/>
+                </svg>
+            </button>
+            <button class="bulk-btn danger" onclick="deleteSelected()" title="Delete">
+                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                    <polyline points="3 6 5 6 21 6"/>
+                    <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/>
+                </svg>
+            </button>
+        </div>
+
+        <div id="mail-list" hx-get="/api/email/list?folder=inbox" hx-trigger="load" hx-swap="innerHTML">
+            <div class="loading-state">
+                <div class="spinner"></div>
+                <p>Loading emails...</p>
             </div>
         </div>
     </div>
@@ -102,593 +223,1458 @@
     <!-- Mail Content -->
     <div class="panel mail-content">
         <div id="mail-content">
-            <div
-                style="
-                    display: flex;
-                    align-items: center;
-                    justify-content: center;
-                    height: 100%;
-                    color: #64748b;
-                "
-            >
-                <div style="text-align: center">
-                    <div style="font-size: 3rem; margin-bottom: 1rem">📧</div>
-                    <h3>Select an email to read</h3>
-                </div>
+            <div class="empty-state">
+                <svg width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
+                    <path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/>
+                    <polyline points="22,6 12,13 2,6"/>
+                </svg>
+                <h3>Select an email to read</h3>
+                <p>Choose an email from the list to view its contents</p>
             </div>
         </div>
     </div>
 </div>
 
-<!-- Tracking Stats Template (loaded when viewing tracking folder) -->
-<template id="tracking-stats-template">
-    <div class="tracking-stats">
-        <div class="tracking-stat">
-            <div class="tracking-stat-value" id="stat-total-sent">0</div>
-            <div class="tracking-stat-label">Total Sent</div>
-        </div>
-        <div class="tracking-stat">
-            <div class="tracking-stat-value" id="stat-total-read">0</div>
-            <div class="tracking-stat-label">Opened</div>
-        </div>
-        <div class="tracking-stat">
-            <div class="tracking-stat-value" id="stat-read-rate">0%</div>
-            <div class="tracking-stat-label">Open Rate</div>
-        </div>
-        <div class="tracking-stat">
-            <div class="tracking-stat-value" id="stat-avg-time">-</div>
-            <div class="tracking-stat-label">Avg. Time to Open</div>
+<!-- Compose Modal -->
+<dialog id="compose-modal" class="modal">
+    <div class="modal-content modal-large">
+        <div class="modal-header">
+            <h2>New Message</h2>
+            <div class="compose-actions-top">
+                <button class="icon-btn" onclick="minimizeCompose()" title="Minimize">
+                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                        <line x1="5" y1="12" x2="19" y2="12"/>
+                    </svg>
+                </button>
+                <button class="icon-btn" onclick="closeCompose()" title="Close">
+                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                        <line x1="18" y1="6" x2="6" y2="18"/>
+                        <line x1="6" y1="6" x2="18" y2="18"/>
+                    </svg>
+                </button>
+            </div>
         </div>
+        <form id="compose-form" hx-post="/api/email/send" hx-target="#mail-content" hx-swap="innerHTML">
+            <div class="compose-fields">
+                <div class="field-row">
+                    <label>To:</label>
+                    <input type="text" name="to" id="compose-to" placeholder="Recipients" required autocomplete="email"/>
+                    <button type="button" class="field-toggle" onclick="toggleCcBcc()">Cc/Bcc</button>
+                </div>
+                <div class="field-row cc-bcc" style="display: none;">
+                    <label>Cc:</label>
+                    <input type="text" name="cc" id="compose-cc" placeholder="Carbon copy"/>
+                </div>
+                <div class="field-row cc-bcc" style="display: none;">
+                    <label>Bcc:</label>
+                    <input type="text" name="bcc" id="compose-bcc" placeholder="Blind carbon copy"/>
+                </div>
+                <div class="field-row">
+                    <label>Subject:</label>
+                    <input type="text" name="subject" id="compose-subject" placeholder="Subject"/>
+                </div>
+            </div>
+            <div class="compose-toolbar">
+                <button type="button" class="toolbar-btn" title="Bold" onclick="formatText('bold')"><b>B</b></button>
+                <button type="button" class="toolbar-btn" title="Italic" onclick="formatText('italic')"><i>I</i></button>
+                <button type="button" class="toolbar-btn" title="Underline" onclick="formatText('underline')"><u>U</u></button>
+                <span class="toolbar-divider"></span>
+                <button type="button" class="toolbar-btn" title="Bullet list" onclick="formatText('insertUnorderedList')">
+                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                        <line x1="8" y1="6" x2="21" y2="6"/><line x1="8" y1="12" x2="21" y2="12"/><line x1="8" y1="18" x2="21" y2="18"/>
+                        <line x1="3" y1="6" x2="3.01" y2="6"/><line x1="3" y1="12" x2="3.01" y2="12"/><line x1="3" y1="18" x2="3.01" y2="18"/>
+                    </svg>
+                </button>
+                <button type="button" class="toolbar-btn" title="Numbered list" onclick="formatText('insertOrderedList')">
+                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                        <line x1="10" y1="6" x2="21" y2="6"/><line x1="10" y1="12" x2="21" y2="12"/><line x1="10" y1="18" x2="21" y2="18"/>
+                        <path d="M4 6h1v4"/><path d="M4 10h2"/><path d="M6 18H4c0-1 2-2 2-3s-1-1.5-2-1"/>
+                    </svg>
+                </button>
+                <span class="toolbar-divider"></span>
+                <button type="button" class="toolbar-btn" title="Attach file" onclick="attachFile()">
+                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                        <path d="M21.44 11.05l-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48"/>
+                    </svg>
+                </button>
+                <button type="button" class="toolbar-btn" title="Insert link" onclick="insertLink()">
+                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                        <path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/>
+                        <path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/>
+                    </svg>
+                </button>
+                <button type="button" class="toolbar-btn" title="Insert image" onclick="insertImage()">
+                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                        <rect x="3" y="3" width="18" height="18" rx="2" ry="2"/>
+                        <circle cx="8.5" cy="8.5" r="1.5"/>
+                        <polyline points="21 15 16 10 5 21"/>
+                    </svg>
+                </button>
+                <span class="toolbar-divider"></span>
+                <button type="button" class="toolbar-btn" title="Insert template" onclick="showTemplateSelector()">
+                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                        <rect x="3" y="3" width="18" height="18" rx="2" ry="2"/>
+                        <line x1="3" y1="9" x2="21" y2="9"/>
+                        <line x1="9" y1="21" x2="9" y2="9"/>
+                    </svg>
+                </button>
+                <button type="button" class="toolbar-btn" title="Insert signature" onclick="insertSignature()">
+                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                        <path d="M17 3a2.828 2.828 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5L17 3z"/>
+                    </svg>
+                </button>
+            </div>
+            <div class="compose-body" contenteditable="true" id="compose-body" placeholder="Write your message..."></div>
+            <input type="hidden" name="body" id="compose-body-hidden"/>
+            <div class="compose-attachments" id="compose-attachments"></div>
+            <div class="compose-footer">
+                <div class="compose-options">
+                    <label class="option-checkbox">
+                        <input type="checkbox" name="track_opens" checked/>
+                        <span>Track opens</span>
+                    </label>
+                    <label class="option-checkbox">
+                        <input type="checkbox" name="request_receipt"/>
+                        <span>Request read receipt</span>
+                    </label>
+                    <select name="priority" class="priority-select">
+                        <option value="normal">Normal priority</option>
+                        <option value="high">High priority</option>
+                        <option value="low">Low priority</option>
+                    </select>
+                </div>
+                <div class="compose-actions">
+                    <button type="button" class="btn-secondary"
+                            hx-post="/api/email/draft"
+                            hx-include="#compose-form"
+                            hx-swap="none"
+                            onclick="prepareSubmit()">Save Draft</button>
+                    <div class="send-group">
+                        <button type="submit" class="btn-primary" onclick="prepareSubmit()">
+                            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                                <line x1="22" y1="2" x2="11" y2="13"/>
+                                <polygon points="22 2 15 22 11 13 2 9 22 2"/>
+                            </svg>
+                            Send
+                        </button>
+                        <button type="button" class="btn-primary dropdown-toggle" onclick="toggleScheduleMenu()">
+                            <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                                <polyline points="6 9 12 15 18 9"/>
+                            </svg>
+                        </button>
+                        <div class="schedule-menu" id="schedule-menu">
+                            <div class="schedule-option" onclick="scheduleSend('tomorrow-morning')">
+                                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                                    <circle cx="12" cy="12" r="5"/>
+                                    <line x1="12" y1="1" x2="12" y2="3"/>
+                                    <line x1="12" y1="21" x2="12" y2="23"/>
+                                    <line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/>
+                                    <line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/>
+                                    <line x1="1" y1="12" x2="3" y2="12"/>
+                                    <line x1="21" y1="12" x2="23" y2="12"/>
+                                    <line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/>
+                                    <line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/>
+                                </svg>
+                                <span>Tomorrow morning (8:00 AM)</span>
+                            </div>
+                            <div class="schedule-option" onclick="scheduleSend('tomorrow-afternoon')">
+                                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                                    <circle cx="12" cy="12" r="10"/>
+                                    <polyline points="12 6 12 12 16 14"/>
+                                </svg>
+                                <span>Tomorrow afternoon (1:00 PM)</span>
+                            </div>
+                            <div class="schedule-option" onclick="scheduleSend('monday')">
+                                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                                    <rect x="3" y="4" width="18" height="18" rx="2" ry="2"/>
+                                    <line x1="16" y1="2" x2="16" y2="6"/>
+                                    <line x1="8" y1="2" x2="8" y2="6"/>
+                                    <line x1="3" y1="10" x2="21" y2="10"/>
+                                </svg>
+                                <span>Monday morning (8:00 AM)</span>
+                            </div>
+                            <div class="schedule-divider"></div>
+                            <div class="schedule-option" onclick="openCustomSchedule()">
+                                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                                    <circle cx="12" cy="12" r="3"/>
+                                    <path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"/>
+                                </svg>
+                                <span>Pick date & time...</span>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </form>
     </div>
-</template>
+</dialog>
 
-<!-- Sent Mail Item Template with Read Status -->
-<template id="sent-mail-item-template">
-    <div class="mail-item sent" data-tracking-id="" data-read-at="">
-        <div class="mail-header">
-            <span class="mail-to"></span>
-            <span class="mail-time"></span>
+<!-- Templates Modal -->
+<dialog id="templates-modal" class="modal">
+    <div class="modal-content">
+        <div class="modal-header">
+            <h2>Email Templates</h2>
+            <button class="icon-btn" onclick="closeTemplates()">
+                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                    <line x1="18" y1="6" x2="6" y2="18"/>
+                    <line x1="6" y1="6" x2="18" y2="18"/>
+                </svg>
+            </button>
         </div>
-        <div class="mail-subject"></div>
-        <div class="mail-item-status">
-            <span class="mail-read-indicator">
-                <span class="checkmark-double"></span>
-                <span class="status-text"></span>
-            </span>
-            <span class="mail-read-count"></span>
+        <div class="templates-list" id="templates-list" hx-get="/api/email/templates" hx-trigger="load" hx-swap="innerHTML">
+            <div class="loading-state"><div class="spinner"></div></div>
+        </div>
+        <div class="modal-footer">
+            <button class="btn-secondary" onclick="closeTemplates()">Cancel</button>
+            <button class="btn-primary" onclick="createNewTemplate()">+ New Template</button>
         </div>
     </div>
-</template>
+</dialog>
+
+<!-- Signatures Modal -->
+<dialog id="signatures-modal" class="modal">
+    <div class="modal-content">
+        <div class="modal-header">
+            <h2>Email Signatures</h2>
+            <button class="icon-btn" onclick="closeSignatures()">
+                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                    <line x1="18" y1="6" x2="6" y2="18"/>
+                    <line x1="6" y1="6" x2="18" y2="18"/>
+                </svg>
+            </button>
+        </div>
+        <div class="signatures-list" id="signatures-list" hx-get="/api/email/signatures" hx-trigger="load" hx-swap="innerHTML">
+            <div class="loading-state"><div class="spinner"></div></div>
+        </div>
+        <div class="modal-footer">
+            <button class="btn-secondary" onclick="closeSignatures()">Cancel</button>
+            <button class="btn-primary" onclick="createNewSignature()">+ New Signature</button>
+        </div>
+    </div>
+</dialog>
+
+<!-- Rules Modal -->
+<dialog id="rules-modal" class="modal">
+    <div class="modal-content modal-large">
+        <div class="modal-header">
+            <h2>Email Rules</h2>
+            <button class="icon-btn" onclick="closeRules()">
+                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                    <line x1="18" y1="6" x2="6" y2="18"/>
+                    <line x1="6" y1="6" x2="18" y2="18"/>
+                </svg>
+            </button>
+        </div>
+        <div class="rules-list" id="rules-list" hx-get="/api/email/rules" hx-trigger="load" hx-swap="innerHTML">
+            <div class="loading-state"><div class="spinner"></div></div>
+        </div>
+        <div class="modal-footer">
+            <button class="btn-secondary" onclick="closeRules()">Cancel</button>
+            <button class="btn-primary" onclick="createNewRule()">+ New Rule</button>
+        </div>
+    </div>
+</dialog>
+
+<!-- Auto-Responder Modal -->
+<dialog id="autoresponder-modal" class="modal">
+    <div class="modal-content">
+        <div class="modal-header">
+            <h2>Automatic Replies</h2>
+            <button class="icon-btn" onclick="closeAutoResponder()">
+                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                    <line x1="18" y1="6" x2="6" y2="18"/>
+                    <line x1="6" y1="6" x2="18" y2="18"/>
+                </svg>
+            </button>
+        </div>
+        <form id="autoresponder-form" hx-post="/api/email/auto-responder" hx-swap="none">
+            <div class="form-group">
+                <label class="toggle-label">
+                    <input type="checkbox" name="enabled" id="autoresponder-enabled"/>
+                    <span class="toggle-switch"></span>
+                    <span>Send automatic replies</span>
+                </label>
+            </div>
+            <div class="form-group">
+                <label>Start date</label>
+                <input type="datetime-local" name="start_date" id="autoresponder-start"/>
+            </div>
+            <div class="form-group">
+                <label>End date</label>
+                <input type="datetime-local" name="end_date" id="autoresponder-end"/>
+            </div>
+            <div class="form-group">
+                <label>Subject</label>
+                <input type="text" name="subject" value="Out of Office" placeholder="Reply subject"/>
+            </div>
+            <div class="form-group">
+                <label>Message</label>
+                <textarea name="body" rows="6" placeholder="Your automatic reply message..."></textarea>
+            </div>
+            <div class="form-group">
+                <label class="checkbox-label">
+                    <input type="checkbox" name="internal_only"/>
+                    <span>Send only to people in my organization</span>
+                </label>
+            </div>
+        </form>
+        <div class="modal-footer">
+            <button class="btn-secondary" onclick="closeAutoResponder()">Cancel</button>
+            <button class="btn-primary" onclick="saveAutoResponder()">Save</button>
+        </div>
+    </div>
+</dialog>
+
+<!-- Schedule Picker Modal -->
+<!-- Add Account Modal -->
+<dialog id="add-account-modal" class="modal">
+    <div class="modal-content">
+        <div class="modal-header">
+            <h2>Add Email Account</h2>
+            <button class="icon-btn" onclick="document.getElementById('add-account-modal').close()">
+                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                    <line x1="18" y1="6" x2="6" y2="18"/>
+                    <line x1="6" y1="6" x2="18" y2="18"/>
+                </svg>
+            </button>
+        </div>
+        <form hx-post="/api/email/accounts/add"
+              hx-target="#accounts-list"
+              hx-swap="innerHTML"
+              hx-on::after-request="if(event.detail.successful) document.getElementById('add-account-modal').close()">
+            <div class="form-group">
+                <label>Account Name</label>
+                <input type="text" name="name" placeholder="Work, Personal, etc." required>
+            </div>
+            <div class="form-group">
+                <label>Email Address</label>
+                <input type="email" name="email" placeholder="you@example.com" required>
+            </div>
+            <div class="form-group">
+                <label>IMAP Server</label>
+                <input type="text" name="imap_server" placeholder="imap.example.com" required>
+            </div>
+            <div class="form-group">
+                <label>IMAP Port</label>
+                <input type="number" name="imap_port" value="993" required>
+            </div>
+            <div class="form-group">
+                <label>SMTP Server</label>
+                <input type="text" name="smtp_server" placeholder="smtp.example.com" required>
+            </div>
+            <div class="form-group">
+                <label>SMTP Port</label>
+                <input type="number" name="smtp_port" value="587" required>
+            </div>
+            <div class="form-group">
+                <label>Username</label>
+                <input type="text" name="username" placeholder="username or email" required>
+            </div>
+            <div class="form-group">
+                <label>Password</label>
+                <input type="password" name="password" placeholder="••••••••" required>
+            </div>
+            <div class="form-group">
+                <label class="checkbox-label">
+                    <input type="checkbox" name="use_ssl" checked>
+                    <span>Use SSL/TLS</span>
+                </label>
+            </div>
+            <div class="modal-footer">
+                <button type="button" class="btn-secondary" onclick="document.getElementById('add-account-modal').close()">Cancel</button>
+                <button type="submit" class="btn-primary">Add Account</button>
+            </div>
+        </form>
+    </div>
+</dialog>
+
+<dialog id="schedule-modal" class="modal">
+    <div class="modal-content modal-small">
+        <div class="modal-header">
+            <h2>Schedule Send</h2>
+            <button class="icon-btn" onclick="closeScheduleModal()">
+                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                    <line x1="18" y1="6" x2="6" y2="18"/>
+                    <line x1="6" y1="6" x2="18" y2="18"/>
+                </svg>
+            </button>
+        </div>
+        <div class="schedule-form">
+            <div class="form-group">
+                <label>Date</label>
+                <input type="date" id="schedule-date" min=""/>
+            </div>
+            <div class="form-group">
+                <label>Time</label>
+                <input type="time" id="schedule-time" value="09:00"/>
+            </div>
+        </div>
+        <div class="modal-footer">
+            <button class="btn-secondary" onclick="closeScheduleModal()">Cancel</button>
+            <button class="btn-primary" onclick="confirmSchedule()">Schedule</button>
+        </div>
+    </div>
+</dialog>
 
 <style>
     .mail-layout {
         display: grid;
-        grid-template-columns: 250px 350px 1fr;
+        grid-template-columns: 260px 380px 1fr;
         height: calc(100vh - 64px);
-        gap: 1px;
-        background: #1e293b;
+        background: var(--bg);
     }
 
     .panel {
-        background: #0f172a;
+        background: var(--surface);
         overflow-y: auto;
+        border-right: 1px solid var(--border);
     }
 
+    .panel:last-child {
+        border-right: none;
+    }
+
+    /* Sidebar */
     .mail-sidebar {
-        border-right: 1px solid #334155;
+        display: flex;
+        flex-direction: column;
     }
 
-    .mail-list {
-        border-right: 1px solid #334155;
+    .compose-section {
+        padding: 1rem;
+        border-bottom: 1px solid var(--border);
+    }
+
+    .compose-btn {
+        width: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        gap: 0.5rem;
+        padding: 0.75rem 1rem;
+        background: var(--primary);
+        color: white;
+        border: none;
+        border-radius: 8px;
+        font-weight: 600;
+        cursor: pointer;
+        transition: background 0.2s;
+    }
+
+    .compose-btn:hover {
+        background: var(--primary-hover);
+    }
+
+    .folders-section {
+        padding: 0.5rem 0;
+        flex: 1;
     }
 
     .nav-item {
         display: flex;
         align-items: center;
-        padding: 0.75rem 1rem;
-        cursor: pointer;
-        transition: background-color 0.2s;
-        color: #e2e8f0;
         gap: 0.75rem;
+        padding: 0.625rem 1rem;
+        color: var(--text);
+        cursor: pointer;
+        transition: background 0.2s;
+        font-size: 0.875rem;
     }
 
     .nav-item:hover {
-        background: #1e293b;
+        background: var(--surface-hover);
     }
 
     .nav-item.active {
-        background: #1e293b;
-        color: #3b82f6;
+        background: var(--primary-light);
+        color: var(--primary);
     }
 
-    .mail-item {
-        padding: 1rem;
-        border-bottom: 1px solid #334155;
-        cursor: pointer;
-        transition: background-color 0.2s;
+    .nav-item svg {
+        flex-shrink: 0;
     }
 
-    .mail-item:hover {
-        background: #1e293b;
+    .folder-badge {
+        margin-left: auto;
+        background: var(--surface-hover);
+        color: var(--text-secondary);
+        padding: 0.125rem 0.5rem;
+        border-radius: 10px;
+        font-size: 0.75rem;
+        font-weight: 500;
     }
 
-    .mail-item.unread {
-        background: rgba(59, 130, 246, 0.1);
+    .folder-badge.unread {
+        background: var(--primary);
+        color: white;
     }
 
-    .mail-item.selected {
-        background: #1e293b;
-        border-left: 3px solid #3b82f6;
+    .labels-section {
+        padding: 0.75rem 0;
+        border-top: 1px solid var(--border);
     }
 
-    .mail-header {
-        font-weight: 600;
-        color: #f1f5f9;
-        margin-bottom: 0.25rem;
+    .section-header {
         display: flex;
-        justify-content: space-between;
         align-items: center;
-    }
-
-    .mail-from {
-        color: #94a3b8;
-        font-size: 0.875rem;
-        margin-bottom: 0.25rem;
-    }
-
-    .mail-subject {
-        color: #e2e8f0;
-        margin-bottom: 0.5rem;
-    }
-
-    .mail-preview {
-        color: #64748b;
-        font-size: 0.875rem;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-    }
-
-    .mail-content-view {
-        padding: 2rem;
-    }
-
-    .mail-content-view h2 {
-        color: #f1f5f9;
-        margin-bottom: 1rem;
-    }
-
-    .mail-actions {
-        display: flex;
-        gap: 0.5rem;
-        padding: 1rem;
-        border-bottom: 1px solid #334155;
-    }
-
-    .mail-actions button {
+        justify-content: space-between;
         padding: 0.5rem 1rem;
-        background: #1e293b;
-        color: #e2e8f0;
-        border: 1px solid #334155;
-        border-radius: 0.375rem;
+        font-size: 0.7rem;
+        font-weight: 600;
+        text-transform: uppercase;
+        letter-spacing: 0.05em;
+        color: var(--text-secondary);
+    }
+
+    .icon-btn {
+        padding: 0.375rem;
+        background: transparent;
+        border: none;
+        color: var(--text-secondary);
+        border-radius: 4px;
+        cursor: pointer;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+
+    .icon-btn:hover {
+        background: var(--surface-hover);
+        color: var(--text);
+    }
+
+    .label-item {
+        display: flex;
+        align-items: center;
+        gap: 0.75rem;
+        padding: 0.5rem 1rem;
+        font-size: 0.875rem;
+        cursor: pointer;
+        transition: background 0.2s;
+    }
+
+    .label-item:hover {
+        background: var(--surface-hover);
+    }
+
+    .label-dot {
+        width: 10px;
+        height: 10px;
+        border-radius: 50%;
+        background: var(--label-color);
+    }
+
+    .quick-actions {
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        gap: 0.5rem;
+        padding: 0.75rem;
+        border-top: 1px solid var(--border);
+    }
+
+    .quick-action-btn {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        gap: 0.25rem;
+        padding: 0.5rem;
+        background: transparent;
+        border: 1px solid var(--border);
+        border-radius: 8px;
+        color: var(--text-secondary);
+        font-size: 0.7rem;
         cursor: pointer;
         transition: all 0.2s;
     }
 
-    .mail-actions button:hover {
-        background: #334155;
+    .quick-action-btn:hover {
+        background: var(--surface-hover);
+        color: var(--text);
+        border-color: var(--text-secondary);
     }
 
-    .mail-body {
-        padding: 1.5rem;
-        color: #e2e8f0;
-        line-height: 1.6;
-        white-space: pre-wrap;
+    /* Mail List */
+    .list-header {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 0.75rem 1rem;
+        border-bottom: 1px solid var(--border);
+        gap: 0.75rem;
     }
 
-    .text-sm {
+    .list-header-left {
+        display: flex;
+        align-items: center;
+        gap: 0.75rem;
+    }
+
+    .list-header-left h3 {
+        font-size: 1rem;
+        font-weight: 600;
+    }
+
+    .list-header-right {
+        display: flex;
+        align-items: center;
+        gap: 0.5rem;
+    }
+
+    .search-box {
+        display: flex;
+        align-items: center;
+        gap: 0.5rem;
+        padding: 0.375rem 0.75rem;
+        background: var(--bg);
+        border: 1px solid var(--border);
+        border-radius: 6px;
+    }
+
+    .search-box input {
+        background: transparent;
+        border: none;
+        outline: none;
+        color: var(--text);
         font-size: 0.875rem;
+        width: 140px;
     }
 
-    .text-gray {
-        color: #64748b;
+    .search-box input::placeholder {
+        color: var(--text-secondary);
     }
 
-    .compose-form {
-        padding: 1.5rem;
+    .bulk-actions {
+        display: flex;
+        align-items: center;
+        gap: 0.5rem;
+        padding: 0.5rem 1rem;
+        background: var(--primary-light);
+        border-bottom: 1px solid var(--border);
     }
 
-    .compose-form .form-group {
+    .selected-count {
+        font-size: 0.875rem;
+        color: var(--primary);
+        font-weight: 500;
+        margin-right: auto;
+    }
+
+    .bulk-btn {
+        padding: 0.375rem 0.5rem;
+        background: transparent;
+        border: none;
+        color: var(--text-secondary);
+        border-radius: 4px;
+        cursor: pointer;
+    }
+
+    .bulk-btn:hover {
+        background: var(--surface-hover);
+        color: var(--text);
+    }
+
+    .bulk-btn.danger:hover {
+        color: var(--error);
+    }
+
+    .mail-item {
+        display: flex;
+        flex-direction: column;
+        padding: 0.875rem 1rem;
+        border-bottom: 1px solid var(--border);
+        cursor: pointer;
+        transition: background 0.2s;
+    }
+
+    .mail-item:hover {
+        background: var(--surface-hover);
+    }
+
+    .mail-item.unread {
+        background: var(--primary-light);
+    }
+
+    .mail-item.unread .mail-from {
+        font-weight: 600;
+    }
+
+    .mail-item.selected {
+        background: var(--primary-light);
+        border-left: 3px solid var(--primary);
+    }
+
+    .mail-item-header {
+        display: flex;
+        align-items: center;
+        gap: 0.5rem;
+        margin-bottom: 0.25rem;
+    }
+
+    .mail-item-header input[type="checkbox"] {
+        margin-right: 0.25rem;
+    }
+
+    .mail-from {
+        flex: 1;
+        font-size: 0.875rem;
+        color: var(--text);
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+
+    .mail-time {
+        font-size: 0.75rem;
+        color: var(--text-secondary);
+    }
+
+    .mail-subject {
+        font-size: 0.875rem;
+        color: var(--text);
+        margin-bottom: 0.25rem;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+
+    .mail-preview {
+        font-size: 0.8rem;
+        color: var(--text-secondary);
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+
+    .mail-labels {
+        display: flex;
+        gap: 0.25rem;
+        margin-top: 0.375rem;
+    }
+
+    .mail-label {
+        padding: 0.125rem 0.375rem;
+        border-radius: 4px;
+        font-size: 0.65rem;
+        font-weight: 500;
+    }
+
+    /* Mail Content */
+    .mail-content {
+        display: flex;
+        flex-direction: column;
+    }
+
+    .empty-state {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        height: 100%;
+        color: var(--text-secondary);
+        text-align: center;
+        padding: 2rem;
+    }
+
+    .empty-state svg {
         margin-bottom: 1rem;
+        opacity: 0.5;
     }
 
-    .compose-form label {
-        display: block;
+    .empty-state h3 {
+        font-size: 1.125rem;
         margin-bottom: 0.5rem;
-        color: #94a3b8;
+        color: var(--text);
+    }
+
+    .empty-state p {
         font-size: 0.875rem;
     }
 
-    .compose-form input,
-    .compose-form textarea {
-        width: 100%;
-        padding: 0.5rem;
-        background: #1e293b;
-        color: #e2e8f0;
-        border: 1px solid #334155;
-        border-radius: 0.375rem;
+    .loading-state {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        padding: 2rem;
+        color: var(--text-secondary);
     }
 
-    .compose-form textarea {
-        min-height: 300px;
-        resize: vertical;
+    .spinner {
+        width: 24px;
+        height: 24px;
+        border: 2px solid var(--border);
+        border-top-color: var(--primary);
+        border-radius: 50%;
+        animation: spin 0.8s linear infinite;
+        margin-bottom: 0.5rem;
+    }
+
+    @keyframes spin {
+        to { transform: rotate(360deg); }
+    }
+
+    /* Modals */
+    .modal {
+        position: fixed;
+        inset: 0;
+        background: rgba(0, 0, 0, 0.5);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        z-index: 1000;
+        padding: 1rem;
+    }
+
+    .modal::backdrop {
+        background: rgba(0, 0, 0, 0.5);
+    }
+
+    .modal-content {
+        background: var(--surface);
+        border-radius: 12px;
+        width: 100%;
+        max-width: 500px;
+        max-height: 80vh;
+        display: flex;
+        flex-direction: column;
+        box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
+    }
+
+    .modal-large {
+        max-width: 700px;
+    }
+
+    .modal-small {
+        max-width: 320px;
+    }
+
+    .modal-header {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 1rem 1.25rem;
+        border-bottom: 1px solid var(--border);
+    }
+
+    .modal-header h2 {
+        font-size: 1.125rem;
+        font-weight: 600;
+    }
+
+    .modal-footer {
+        display: flex;
+        justify-content: flex-end;
+        gap: 0.75rem;
+        padding: 1rem 1.25rem;
+        border-top: 1px solid var(--border);
+    }
+
+    /* Compose */
+    .compose-fields {
+        padding: 0.75rem 1.25rem;
+        border-bottom: 1px solid var(--border);
+    }
+
+    .field-row {
+        display: flex;
+        align-items: center;
+        gap: 0.75rem;
+        padding: 0.5rem 0;
+        border-bottom: 1px solid var(--border);
+    }
+
+    .field-row:last-child {
+        border-bottom: none;
+    }
+
+    .field-row label {
+        font-size: 0.875rem;
+        color: var(--text-secondary);
+        width: 60px;
+        flex-shrink: 0;
+    }
+
+    .field-row input {
+        flex: 1;
+        background: transparent;
+        border: none;
+        outline: none;
+        color: var(--text);
+        font-size: 0.875rem;
+    }
+
+    .field-toggle {
+        padding: 0.25rem 0.5rem;
+        background: transparent;
+        border: 1px solid var(--border);
+        border-radius: 4px;
+        color: var(--text-secondary);
+        font-size: 0.75rem;
+        cursor: pointer;
+    }
+
+    .field-toggle:hover {
+        background: var(--surface-hover);
+    }
+
+    .compose-toolbar {
+        display: flex;
+        align-items: center;
+        gap: 0.25rem;
+        padding: 0.5rem 1.25rem;
+        border-bottom: 1px solid var(--border);
+        flex-wrap: wrap;
+    }
+
+    .toolbar-btn {
+        padding: 0.375rem 0.5rem;
+        background: transparent;
+        border: none;
+        color: var(--text-secondary);
+        border-radius: 4px;
+        cursor: pointer;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        min-width: 28px;
+    }
+
+    .toolbar-btn:hover {
+        background: var(--surface-hover);
+        color: var(--text);
+    }
+
+    .toolbar-divider {
+        width: 1px;
+        height: 20px;
+        background: var(--border);
+        margin: 0 0.25rem;
+    }
+
+    .compose-body {
+        flex: 1;
+        min-height: 200px;
+        padding: 1rem 1.25rem;
+        font-size: 0.875rem;
+        line-height: 1.6;
+        color: var(--text);
+        outline: none;
+        overflow-y: auto;
+    }
+
+    .compose-body:empty::before {
+        content: attr(placeholder);
+        color: var(--text-secondary);
+    }
+
+    .compose-attachments {
+        padding: 0 1.25rem;
+        display: flex;
+        flex-wrap: wrap;
+        gap: 0.5rem;
+    }
+
+    .compose-footer {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 0.75rem 1.25rem;
+        border-top: 1px solid var(--border);
+        flex-wrap: wrap;
+        gap: 0.75rem;
+    }
+
+    .compose-options {
+        display: flex;
+        align-items: center;
+        gap: 1rem;
+        flex-wrap: wrap;
+    }
+
+    .option-checkbox {
+        display: flex;
+        align-items: center;
+        gap: 0.375rem;
+        font-size: 0.8rem;
+        color: var(--text-secondary);
+        cursor: pointer;
+    }
+
+    .priority-select {
+        padding: 0.25rem 0.5rem;
+        background: transparent;
+        border: 1px solid var(--border);
+        border-radius: 4px;
+        color: var(--text-secondary);
+        font-size: 0.8rem;
     }
 
     .compose-actions {
         display: flex;
+        align-items: center;
         gap: 0.5rem;
-        margin-top: 1rem;
     }
 
-    .compose-actions button {
-        padding: 0.5rem 1.5rem;
-        border-radius: 0.375rem;
+    .send-group {
+        display: flex;
+        position: relative;
+    }
+
+    .send-group .btn-primary:first-child {
+        border-radius: 6px 0 0 6px;
+    }
+
+    .send-group .dropdown-toggle {
+        padding: 0.625rem 0.5rem;
+        border-radius: 0 6px 6px 0;
+        border-left: 1px solid rgba(255,255,255,0.2);
+    }
+
+    .schedule-menu {
+        position: absolute;
+        bottom: 100%;
+        right: 0;
+        background: var(--surface);
+        border: 1px solid var(--border);
+        border-radius: 8px;
+        padding: 0.5rem 0;
+        min-width: 240px;
+        box-shadow: 0 10px 40px rgba(0,0,0,0.3);
+        display: none;
+        z-index: 10;
+        margin-bottom: 0.5rem;
+    }
+
+    .schedule-menu.show {
+        display: block;
+    }
+
+    .schedule-option {
+        display: flex;
+        align-items: center;
+        gap: 0.75rem;
+        padding: 0.625rem 1rem;
+        cursor: pointer;
+        transition: background 0.2s;
+        font-size: 0.875rem;
+    }
+
+    .schedule-option:hover {
+        background: var(--surface-hover);
+    }
+
+    .schedule-divider {
+        height: 1px;
+        background: var(--border);
+        margin: 0.5rem 0;
+    }
+
+    .btn-primary {
+        display: flex;
+        align-items: center;
+        gap: 0.5rem;
+        padding: 0.625rem 1rem;
+        background: var(--primary);
+        color: white;
+        border: none;
+        border-radius: 6px;
+        font-weight: 500;
+        cursor: pointer;
+        transition: background 0.2s;
+    }
+
+    .btn-primary:hover {
+        background: var(--primary-hover);
+    }
+
+    .btn-secondary {
+        padding: 0.625rem 1rem;
+        background: transparent;
+        border: 1px solid var(--border);
+        color: var(--text);
+        border-radius: 6px;
+        font-weight: 500;
         cursor: pointer;
         transition: all 0.2s;
     }
 
-    .btn-primary {
-        background: #3b82f6;
-        color: white;
-        border: none;
-    }
-
-    .btn-primary:hover {
-        background: #2563eb;
-    }
-
-    .btn-secondary {
-        background: #1e293b;
-        color: #e2e8f0;
-        border: 1px solid #334155;
-    }
-
     .btn-secondary:hover {
-        background: #334155;
+        background: var(--surface-hover);
     }
 
-    /* Empty state */
-    .empty-state {
-        padding: 3rem;
-        text-align: center;
-        color: #64748b;
+    .form-group {
+        margin-bottom: 1rem;
+        padding: 0 1.25rem;
     }
 
-    .empty-state h3 {
-        margin: 1rem 0;
-        color: #94a3b8;
+    .form-group:first-child {
+        padding-top: 1rem;
     }
 
-    /* Loading spinner */
-    @keyframes spin {
-        to {
-            transform: rotate(360deg);
-        }
+    .form-group label {
+        display: block;
+        font-size: 0.875rem;
+        font-weight: 500;
+        margin-bottom: 0.375rem;
+        color: var(--text);
     }
 
-    .spinner {
-        display: inline-block;
-        width: 1.5rem;
-        height: 1.5rem;
-        border: 2px solid #334155;
-        border-top-color: #3b82f6;
+    .form-group input[type="text"],
+    .form-group input[type="date"],
+    .form-group input[type="time"],
+    .form-group input[type="datetime-local"],
+    .form-group textarea {
+        width: 100%;
+        padding: 0.625rem 0.75rem;
+        background: var(--bg);
+        border: 1px solid var(--border);
+        border-radius: 6px;
+        color: var(--text);
+        font-size: 0.875rem;
+    }
+
+    .form-group textarea {
+        resize: vertical;
+    }
+
+    .checkbox-label {
+        display: flex;
+        align-items: center;
+        gap: 0.5rem;
+        font-size: 0.875rem;
+        cursor: pointer;
+    }
+
+    .toggle-label {
+        display: flex;
+        align-items: center;
+        gap: 0.75rem;
+        cursor: pointer;
+    }
+
+    .toggle-switch {
+        position: relative;
+        width: 44px;
+        height: 24px;
+        background: var(--border);
+        border-radius: 12px;
+        transition: background 0.2s;
+    }
+
+    .toggle-switch::after {
+        content: '';
+        position: absolute;
+        top: 2px;
+        left: 2px;
+        width: 20px;
+        height: 20px;
+        background: white;
         border-radius: 50%;
-        animation: spin 0.6s linear infinite;
+        transition: transform 0.2s;
     }
 
-    /* HTMX loading states */
-    .htmx-request .spinner {
-        display: inline-block;
+    input:checked + .toggle-switch {
+        background: var(--primary);
     }
 
-    .htmx-request.mail-item {
-        opacity: 0.6;
+    input:checked + .toggle-switch::after {
+        transform: translateX(20px);
     }
 
-    /* Folder badges */
-    .folder-badge {
-        display: inline-block;
-        padding: 0.125rem 0.5rem;
-        background: #1e293b;
-        color: #94a3b8;
-        border-radius: 999px;
-        font-size: 0.75rem;
-        font-weight: 600;
+    .compose-actions-top {
+        display: flex;
+        gap: 0.25rem;
     }
 
-    .folder-badge.unread {
-        background: #3b82f6;
-        color: white;
-    }
-
-    /* Responsive design */
+    /* Responsive */
     @media (max-width: 1024px) {
         .mail-layout {
-            grid-template-columns: 200px 300px 1fr;
+            grid-template-columns: 220px 1fr;
+        }
+        .mail-content {
+            display: none;
+        }
+        .mail-content.active {
+            display: flex;
+            position: fixed;
+            inset: 64px 0 0 0;
+            z-index: 100;
         }
     }
 
     @media (max-width: 768px) {
         .mail-layout {
             grid-template-columns: 1fr;
-            grid-template-rows: auto 1fr;
         }
-
         .mail-sidebar {
             display: none;
         }
-
-        .mail-list {
-            border-right: none;
-        }
-
-        .mail-content {
-            display: none;
-        }
-
-        .mail-content.active {
-            display: block;
+        .mail-sidebar.active {
+            display: flex;
             position: fixed;
-            top: 64px;
-            left: 0;
-            right: 0;
-            bottom: 0;
+            inset: 64px 0 0 0;
             z-index: 100;
+            width: 280px;
+        }
+        .modal-content {
+            max-height: 90vh;
+        }
+        .compose-toolbar {
+            display: none;
         }
     }
 </style>
 
 <script>
-    // Handle folder selection
-    document.addEventListener("click", function (e) {
-        if (e.target.closest(".nav-item")) {
-            // Update active state
-            document.querySelectorAll(".nav-item").forEach((item) => {
-                item.classList.remove("active");
-            });
-            e.target.closest(".nav-item").classList.add("active");
+    let selectedEmails = new Set();
+    let currentFolder = 'inbox';
 
-            // Update folder title
-            const folderName = e.target
-                .closest(".nav-item")
-                .textContent.trim()
-                .split(" ")[1];
-            const titleEl = document.getElementById("folder-title");
-            if (titleEl) {
-                titleEl.textContent = folderName;
+    function openCompose() {
+        document.getElementById('compose-modal').showModal();
+    }
+
+    function closeCompose() {
+        document.getElementById('compose-modal').close();
+    }
+
+    function minimizeCompose() {
+        closeCompose();
+    }
+
+    function toggleCcBcc() {
+        document.querySelectorAll('.cc-bcc').forEach(el => {
+            el.style.display = el.style.display === 'none' ? 'flex' : 'none';
+        });
+    }
+
+    function toggleScheduleMenu() {
+        document.getElementById('schedule-menu').classList.toggle('show');
+    }
+
+    function scheduleSend(option) {
+        let date = new Date();
+        switch(option) {
+            case 'tomorrow-morning':
+                date.setDate(date.getDate() + 1);
+                date.setHours(8, 0, 0, 0);
+                break;
+            case 'tomorrow-afternoon':
+                date.setDate(date.getDate() + 1);
+                date.setHours(13, 0, 0, 0);
+                break;
+            case 'monday':
+                const daysUntilMonday = (8 - date.getDay()) % 7 || 7;
+                date.setDate(date.getDate() + daysUntilMonday);
+                date.setHours(8, 0, 0, 0);
+                break;
+        }
+        confirmScheduleSend(date);
+        toggleScheduleMenu();
+    }
+
+    function openCustomSchedule() {
+        toggleScheduleMenu();
+        const today = new Date().toISOString().split('T')[0];
+        document.getElementById('schedule-date').min = today;
+        document.getElementById('schedule-date').value = today;
+        document.getElementById('schedule-modal').showModal();
+    }
+
+    function closeScheduleModal() {
+        document.getElementById('schedule-modal').close();
+    }
+
+    function confirmSchedule() {
+        const date = document.getElementById('schedule-date').value;
+        const time = document.getElementById('schedule-time').value;
+        const scheduledDate = new Date(`${date}T${time}`);
+        confirmScheduleSend(scheduledDate);
+        closeScheduleModal();
+    }
+
+    function confirmScheduleSend(date) {
+        const form = document.getElementById('compose-form');
+        const input = document.createElement('input');
+        input.type = 'hidden';
+        input.name = 'scheduled_at';
+        input.value = date.toISOString();
+        form.appendChild(input);
+        prepareSubmit();
+        form.requestSubmit();
+    }
+
+    function prepareSubmit() {
+        const body = document.getElementById('compose-body').innerHTML;
+        document.getElementById('compose-body-hidden').value = body;
+    }
+
+    function formatText(command) {
+        document.execCommand(command, false, null);
+        document.getElementById('compose-body').focus();
+    }
+
+    function openTemplates() {
+        document.getElementById('templates-modal').showModal();
+    }
+
+    function closeTemplates() {
+        document.getElementById('templates-modal').close();
+    }
+
+    function openSignatures() {
+        document.getElementById('signatures-modal').showModal();
+    }
+
+    function closeSignatures() {
+        document.getElementById('signatures-modal').close();
+    }
+
+    function openRules() {
+        document.getElementById('rules-modal').showModal();
+    }
+
+    function closeRules() {
+        document.getElementById('rules-modal').close();
+    }
+
+    function openAutoResponder() {
+        document.getElementById('autoresponder-modal').showModal();
+    }
+
+    function closeAutoResponder() {
+        document.getElementById('autoresponder-modal').close();
+    }
+
+    function saveAutoResponder() {
+        htmx.trigger('#autoresponder-form', 'submit');
+        closeAutoResponder();
+        window.showNotification('Auto-reply settings saved', 'success');
+    }
+
+    function openLabelManager() {
+        window.showNotification('Label manager coming soon', 'info');
+    }
+
+    function toggleSelectAll(checkbox) {
+        const items = document.querySelectorAll('.mail-item input[type="checkbox"]');
+        items.forEach(item => {
+            item.checked = checkbox.checked;
+            if (checkbox.checked) {
+                selectedEmails.add(item.dataset.id);
+            } else {
+                selectedEmails.delete(item.dataset.id);
             }
+        });
+        updateBulkActions();
+    }
+
+    function updateBulkActions() {
+        const bulkBar = document.getElementById('bulk-actions');
+        if (selectedEmails.size > 0) {
+            bulkBar.style.display = 'flex';
+            bulkBar.querySelector('.selected-count').textContent = `${selectedEmails.size} selected`;
+        } else {
+            bulkBar.style.display = 'none';
         }
+    }
 
-        // Handle mail selection
-        if (e.target.closest(".mail-item")) {
-            document.querySelectorAll(".mail-item").forEach((item) => {
-                item.classList.remove("selected");
-            });
-            e.target.closest(".mail-item").classList.add("selected");
+    function refreshMailList() {
+        htmx.trigger(`[data-folder="${currentFolder}"]`, 'click');
+    }
 
-            // Mark as read
-            e.target.closest(".mail-item").classList.remove("unread");
-        }
-    });
-
-    // Handle HTMX events for better UX
-    document.body.addEventListener("htmx:beforeRequest", function (evt) {
-        // Add loading state
-        if (evt.detail.target.id === "mail-list") {
-            evt.detail.target.innerHTML =
-                '<div style="padding: 2rem; text-align: center;"><div class="spinner"></div></div>';
-        }
-    });
-
-    document.body.addEventListener("htmx:afterSwap", function (evt) {
-        // Scroll to top after loading new emails
-        if (evt.detail.target.id === "mail-list") {
-            evt.detail.target.scrollTop = 0;
-        }
-    });
-
-    // Handle compose form submission
-    document.body.addEventListener("htmx:beforeRequest", function (evt) {
-        if (evt.detail.elt.matches(".compose-form")) {
-            // Validate form
-            const form = evt.detail.elt;
-            const to = form.querySelector('[name="to"]').value;
-            const subject = form.querySelector('[name="subject"]').value;
-            const body = form.querySelector('[name="body"]').value;
-
-            if (!to || !subject || !body) {
-                evt.preventDefault();
-                alert("Please fill in all required fields");
-            }
-        }
-    });
-
-    // Handle keyboard shortcuts
-    document.addEventListener("keydown", function (e) {
-        // Ctrl/Cmd + N for new email
-        if ((e.ctrlKey || e.metaKey) && e.key === "n") {
-            e.preventDefault();
-            document.querySelector(".mail-sidebar button").click();
-        }
-
-        // Delete key for delete email
-        if (
-            e.key === "Delete" &&
-            document.querySelector(".mail-item.selected")
-        ) {
-            const selected = document.querySelector(".mail-item.selected");
-            const deleteBtn = selected.querySelector('[data-action="delete"]');
-            if (deleteBtn) deleteBtn.click();
-        }
-    });
-
-    // Track current folder
-    window.currentFolder = "inbox";
-
-    // Load tracking stats when viewing tracking folder
-    async function loadTrackingStats() {
-        try {
-            const response = await fetch("/api/email/tracking/stats");
-            const data = await response.json();
-            if (data.success && data.data) {
-                document.getElementById("stat-total-sent").textContent =
-                    data.data.total_sent;
-                document.getElementById("stat-total-read").textContent =
-                    data.data.total_read;
-                document.getElementById("stat-read-rate").textContent =
-                    data.data.read_rate.toFixed(1) + "%";
-                if (data.data.avg_time_to_read_hours) {
-                    const hours = data.data.avg_time_to_read_hours;
-                    if (hours < 1) {
-                        document.getElementById("stat-avg-time").textContent =
-                            Math.round(hours * 60) + "m";
-                    } else if (hours < 24) {
-                        document.getElementById("stat-avg-time").textContent =
-                            hours.toFixed(1) + "h";
-                    } else {
-                        document.getElementById("stat-avg-time").textContent =
-                            (hours / 24).toFixed(1) + "d";
-                    }
+    function insertSignature() {
+        fetch('/api/email/signatures/default')
+            .then(r => r.json())
+            .then(sig => {
+                if (sig.content_html) {
+                    const body = document.getElementById('compose-body');
+                    body.innerHTML += '<br><br>' + sig.content_html;
                 }
-            }
-        } catch (e) {
-            console.error("Failed to load tracking stats:", e);
+            });
+    }
+
+    function showTemplateSelector() {
+        openTemplates();
+    }
+
+    function attachFile() {
+        const input = document.createElement('input');
+        input.type = 'file';
+        input.multiple = true;
+        input.onchange = (e) => {
+            Array.from(e.target.files).forEach(file => {
+                const container = document.getElementById('compose-attachments');
+                const chip = document.createElement('div');
+                chip.className = 'attachment-chip';
+                chip.innerHTML = `
+                    <span>${file.name}</span>
+                    <button type="button" onclick="this.parentElement.remove()">×</button>
+                `;
+                container.appendChild(chip);
+            });
+        };
+        input.click();
+    }
+
+    function insertLink() {
+        const url = prompt('Enter URL:');
+        if (url) {
+            document.execCommand('createLink', false, url);
         }
     }
 
-    // Render tracking list item
-    function renderTrackingItem(item) {
-        const div = document.createElement("div");
-        div.className = "mail-item sent";
-        div.setAttribute("data-tracking-id", item.tracking_id);
-        if (item.read_at) {
-            div.setAttribute(
-                "data-read-at",
-                "Opened: " + new Date(item.read_at).toLocaleString(),
-            );
+    function insertImage() {
+        const url = prompt('Enter image URL:');
+        if (url) {
+            document.execCommand('insertImage', false, url);
         }
-
-        const statusClass = item.is_read ? "read" : "pending";
-        const statusText = item.is_read ? "Opened" : "Not opened";
-        const checkmarkClass = item.is_read ? "read" : "sent";
-        const readCount = item.read_count > 1 ? `(${item.read_count}x)` : "";
-
-        div.innerHTML = `
-        <div class="mail-header">
-            <span class="mail-to">To: ${item.to_email}</span>
-            <span class="mail-time">${new Date(item.sent_at).toLocaleDateString()}</span>
-        </div>
-        <div class="mail-subject">${item.subject}</div>
-        <div class="mail-item-status">
-            <span class="mail-read-indicator ${statusClass}">
-                <span class="checkmark-double ${checkmarkClass}"></span>
-                <span class="status-text">${statusText}</span>
-            </span>
-            <span class="mail-read-count">${readCount}</span>
-        </div>
-    `;
-
-        div.addEventListener("click", () => showTrackingDetails(item));
-        return div;
     }
 
-    // Show tracking details in content panel
-    function showTrackingDetails(item) {
-        const content = document.getElementById("mail-content");
-        const readStatus = item.is_read
-            ? `<span class="mail-read-indicator read"><span class="checkmark-double read"></span> Opened</span>`
-            : `<span class="mail-read-indicator pending"><span class="checkmark-double sent"></span> Not opened yet</span>`;
-
-        const readInfo = item.is_read
-            ? `
-        <div style="margin-top: 1rem; padding: 1rem; background: #e6f4ea; border-radius: 8px;">
-            <h4 style="margin: 0 0 0.5rem 0; color: #137333;">📬 Email Opened</h4>
-            <p style="margin: 0; color: #137333;">
-                First opened: ${new Date(item.read_at).toLocaleString()}<br>
-                Times opened: ${item.read_count}
-            </p>
-        </div>
-    `
-            : `
-        <div style="margin-top: 1rem; padding: 1rem; background: #fef7e0; border-radius: 8px;">
-            <h4 style="margin: 0 0 0.5rem 0; color: #b06000;">⏳ Awaiting Read</h4>
-            <p style="margin: 0; color: #b06000;">
-                This email has not been opened yet.
-            </p>
-        </div>
-    `;
-
-        content.innerHTML = `
-        <div class="mail-content-view">
-            <div class="mail-header">
-                <h2 class="mail-subject">${item.subject}</h2>
-                <div class="mail-meta">
-                    <span>To: <strong>${item.to_email}</strong></span>
-                    <span class="mail-date">Sent: ${new Date(item.sent_at).toLocaleString()}</span>
-                </div>
-                <div style="margin-top: 0.5rem;">
-                    ${readStatus}
-                </div>
-            </div>
-            ${readInfo}
-            <div style="margin-top: 1.5rem;">
-                <h4>Tracking ID</h4>
-                <code style="font-size: 0.75rem; color: #5f6368;">${item.tracking_id}</code>
-            </div>
-        </div>
-    `;
+    function saveDraft() {
+        prepareSubmit();
+        const form = document.getElementById('compose-form');
+        const formData = new FormData(form);
+        fetch('/api/email/draft', {
+            method: 'POST',
+            body: formData
+        }).then(() => {
+            window.showNotification('Draft saved', 'success');
+        });
     }
 
-    // Handle HTMX response for tracking list
-    document.body.addEventListener("htmx:afterSwap", function (evt) {
-        if (
-            evt.detail.target.id === "mail-list" &&
-            window.currentFolder === "tracking"
-        ) {
-            loadTrackingStats();
+    function createNewTemplate() {
+        window.showNotification('Template editor coming soon', 'info');
+    }
 
-            // Parse and render tracking items
-            try {
-                const response = JSON.parse(evt.detail.xhr.responseText);
-                if (response.success && response.data) {
-                    const container = evt.detail.target;
-                    container.innerHTML = "";
+    function createNewSignature() {
+        window.showNotification('Signature editor coming soon', 'info');
+    }
 
-                    // Add stats panel
-                    const statsTemplate = document.getElementById(
-                        "tracking-stats-template",
-                    );
-                    if (statsTemplate) {
-                        container.appendChild(
-                            statsTemplate.content.cloneNode(true),
-                        );
-                    }
+    function createNewRule() {
+        window.showNotification('Rule editor coming soon', 'info');
+    }
 
-                    // Add tracking items
-                    response.data.forEach((item) => {
-                        container.appendChild(renderTrackingItem(item));
-                    });
+    function archiveSelected() {
+        window.showNotification(`${selectedEmails.size} emails archived`, 'success');
+        selectedEmails.clear();
+        updateBulkActions();
+        refreshMailList();
+    }
 
-                    if (response.data.length === 0) {
-                        container.innerHTML +=
-                            '<div class="empty-state"><h3>No tracked emails</h3><p>Sent emails will appear here when tracking is enabled.</p></div>';
-                    }
+    function markAsRead() {
+        window.showNotification(`${selectedEmails.size} emails marked as read`, 'success');
+        selectedEmails.clear();
+        updateBulkActions();
+        refreshMailList();
+    }
 
-                    loadTrackingStats();
-                }
-            } catch (e) {
-                // Not a tracking response, ignore
-            }
-        }
-    });
-</script>
+    function addLabelToSelected() {
+        window.showNotification('Label picker coming soon', 'info');
+    }
+
+    function deleteSelected() {
+        if (confirm(`Delete ${selectedEmails.size} emails?`)) {
+            window.showNotification(`${selectedEmails.size} emails deleted`, 'success');
+            selectedEmails.clear();
+            updateBulkActions();
+            refreshMailList
diff --git a/ui/suite/meet/meet.html b/ui/suite/meet/meet.html
index fcd2050..4f5a51f 100644
--- a/ui/suite/meet/meet.html
+++ b/ui/suite/meet/meet.html
@@ -1,346 +1,1310 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Meeting Room - General Bots</title>
-    <link rel="stylesheet" href="../css/common.css">
-    <link rel="stylesheet" href="meet.css">
-</head>
-<body>
-    <div id="meetApp">
-        <!-- Meeting Header -->
-        <header class="meet-header">
-            <div class="meet-info">
-                <h2 id="meetingTitle">Meeting Room</h2>
-                <span id="meetingId" class="meeting-id"></span>
-                <span id="meetingTimer" class="meeting-timer">00:00:00</span>
+<!-- Meet - Video Conferencing -->
+<div class="meet-container" id="meet-app">
+    <!-- Header -->
+    <header class="meet-header">
+        <div class="meet-brand">
+            <img src="/assets/icons/gb-meet.svg" alt="Meet" class="brand-icon">
+            <h1></h1>Meet</h1>
+        </div>
+        <div class="meet-actions">
+            <button class="btn-primary" onclick="showModal('create-modal')">
+                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                    <line x1="12" y1="5" x2="12" y2="19"></line>
+                    <line x1="5" y1="12" x2="19" y2="12"></line>
+                </svg>
+                New Meeting
+            </button>
+            <button class="btn-secondary" onclick="showModal('join-modal')">
+                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                    <path d="M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4"></path>
+                    <polyline points="10 17 15 12 10 7"></polyline>
+                    <line x1="15" y1="12" x2="3" y2="12"></line>
+                </svg>
+                Join Meeting
+            </button>
+        </div>
+    </header>
+
+    <!-- Main Content -->
+    <main class="meet-main">
+        <!-- Active Rooms Section -->
+        <section class="rooms-section">
+            <div class="section-header">
+                <h2>Active Rooms</h2>
+                <span class="room-count" id="room-count">0</span>
             </div>
-            <div class="meet-controls-top">
-                <button id="recordBtn" class="control-btn" title="Record Meeting">
-                    <span class="icon">🔴</span>
-                    <span class="label">Record</span>
+            <div class="rooms-grid" id="rooms-list"
+                 hx-get="/api/meet/rooms"
+                 hx-trigger="load, every 10s"
+                 hx-swap="innerHTML">
+                <!-- Rooms loaded via HTMX -->
+                <div class="loading-placeholder">
+                    <div class="spinner"></div>
+                    <span>Loading rooms...</span>
+                </div>
+            </div>
+        </section>
+
+        <!-- Scheduled Meetings Section -->
+        <section class="scheduled-section">
+            <div class="section-header">
+                <h2>Scheduled Meetings</h2>
+            </div>
+            <div class="scheduled-list" id="scheduled-list"
+                 hx-get="/api/meet/scheduled"
+                 hx-trigger="load"
+                 hx-swap="innerHTML">
+                <!-- Scheduled meetings loaded via HTMX -->
+            </div>
+        </section>
+
+        <!-- Recent Meetings Section -->
+        <section class="recent-section">
+            <div class="section-header">
+                <h2>Recent Meetings</h2>
+            </div>
+            <div class="recent-list" id="recent-list"
+                 hx-get="/api/meet/recent"
+                 hx-trigger="load"
+                 hx-swap="innerHTML">
+                <!-- Recent meetings loaded via HTMX -->
+            </div>
+        </section>
+    </main>
+
+    <!-- Meeting Room (shown when in a call) -->
+    <div class="meeting-room hidden" id="meeting-room" hx-ext="ws" ws-connect="/ws/meet">
+        <!-- Room Header -->
+        <header class="room-header">
+            <div class="room-info">
+                <h2 id="room-title">Meeting Room</h2>
+                <span class="room-id" id="room-id"></span>
+                <span class="room-timer" id="room-timer">00:00:00</span>
+            </div>
+            <div class="room-controls-top">
+                <button class="control-btn" id="record-btn" title="Record Meeting"
+                        hx-post="/api/meet/recording/start"
+                        hx-include="#room-id-input"
+                        hx-swap="none">
+                    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                        <circle cx="12" cy="12" r="10"></circle>
+                        <circle cx="12" cy="12" r="4" fill="currentColor"></circle>
+                    </svg>
+                    <span>Record</span>
                 </button>
-                <button id="transcribeBtn" class="control-btn active" title="Toggle Transcription">
-                    <span class="icon">📝</span>
-                    <span class="label">Transcribe</span>
+                <button class="control-btn active" id="transcribe-btn" title="Toggle Transcription"
+                        hx-post="/api/meet/transcription/toggle"
+                        hx-include="#room-id-input"
+                        hx-swap="none">
+                    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                        <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
+                        <polyline points="14 2 14 8 20 8"></polyline>
+                        <line x1="16" y1="13" x2="8" y2="13"></line>
+                        <line x1="16" y1="17" x2="8" y2="17"></line>
+                    </svg>
+                    <span>Transcribe</span>
                 </button>
-                <button id="participantsBtn" class="control-btn" title="Show Participants">
-                    <span class="icon">👥</span>
-                    <span class="badge" id="participantCount">0</span>
+                <button class="control-btn" id="participants-btn" title="Show Participants"
+                        onclick="togglePanel('participants')">
+                    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                        <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path>
+                        <circle cx="9" cy="7" r="4"></circle>
+                        <path d="M23 21v-2a4 4 0 0 0-3-3.87"></path>
+                        <path d="M16 3.13a4 4 0 0 1 0 7.75"></path>
+                    </svg>
+                    <span class="badge" id="participant-count">0</span>
                 </button>
-                <button id="chatBtn" class="control-btn" title="Toggle Chat">
-                    <span class="icon">💬</span>
-                    <span class="badge hidden" id="unreadCount">0</span>
+                <button class="control-btn" id="chat-btn" title="Toggle Chat"
+                        onclick="togglePanel('chat')">
+                    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                        <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path>
+                    </svg>
+                    <span class="badge hidden" id="unread-count">0</span>
                 </button>
-                <button id="settingsBtn" class="control-btn" title="Settings">
-                    <span class="icon">⚙️</span>
+                <button class="control-btn" id="leave-btn" title="Leave Meeting"
+                        onclick="leaveMeeting()">
+                    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                        <path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"></path>
+                        <polyline points="16 17 21 12 16 7"></polyline>
+                        <line x1="21" y1="12" x2="9" y2="12"></line>
+                    </svg>
                 </button>
             </div>
+            <input type="hidden" id="room-id-input" name="room_id" value="">
         </header>
 
-        <!-- Main Meeting Area -->
-        <main class="meet-main">
-            <!-- Video Grid -->
-            <div class="video-grid" id="videoGrid">
-                <!-- Local Video -->
-                <div class="video-container local-video" id="localVideoContainer">
-                    <video id="localVideo" autoplay muted></video>
-                    <div class="video-overlay">
-                        <span class="participant-name">You</span>
-                        <div class="video-indicators">
-                            <span class="indicator mic-indicator" id="localMicIndicator">🎤</span>
-                            <span class="indicator video-indicator" id="localVideoIndicator">📹</span>
-                        </div>
+        <!-- Video Grid -->
+        <div class="video-grid" id="video-grid">
+            <!-- Local Video -->
+            <div class="video-tile local-video" id="local-video-tile">
+                <video id="local-video" autoplay muted playsinline></video>
+                <div class="video-overlay">
+                    <span class="participant-name">You</span>
+                    <div class="video-indicators">
+                        <span class="indicator mic-on" id="local-mic-indicator">
+                            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                                <path d="M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z"></path>
+                                <path d="M19 10v2a7 7 0 0 1-14 0v-2"></path>
+                                <line x1="12" y1="19" x2="12" y2="23"></line>
+                                <line x1="8" y1="23" x2="16" y2="23"></line>
+                            </svg>
+                        </span>
                     </div>
-                    <div class="speaking-indicator hidden"></div>
                 </div>
-
-                <!-- Remote participants will be added here dynamically -->
+                <div class="speaking-indicator hidden"></div>
             </div>
+            <!-- Remote participants added dynamically -->
+        </div>
 
-            <!-- Sidebar Panels -->
-            <aside class="meet-sidebar" id="meetSidebar">
-                <!-- Participants Panel -->
-                <div class="sidebar-panel" id="participantsPanel" style="display: none;">
-                    <div class="panel-header">
-                        <h3>Participants</h3>
-                        <button class="close-btn" onclick="togglePanel('participants')">×</button>
-                    </div>
-                    <div class="panel-content">
-                        <div class="participants-list" id="participantsList">
-                            <!-- Participants will be added dynamically -->
-                        </div>
-                        <div class="panel-actions">
-                            <button class="action-btn" id="inviteBtn">
-                                <span class="icon">➕</span> Invite
-                            </button>
-                            <button class="action-btn" id="muteAllBtn">
-                                <span class="icon">🔇</span> Mute All
-                            </button>
-                        </div>
-                    </div>
+        <!-- Sidebar Panels -->
+        <aside class="room-sidebar" id="room-sidebar">
+            <!-- Participants Panel -->
+            <div class="sidebar-panel hidden" id="participants-panel">
+                <div class="panel-header">
+                    <h3>Participants</h3>
+                    <button class="btn-icon-sm" onclick="togglePanel('participants')">
+                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                            <line x1="18" y1="6" x2="6" y2="18"></line>
+                            <line x1="6" y1="6" x2="18" y2="18"></line>
+                        </svg>
+                    </button>
                 </div>
-
-                <!-- Chat Panel -->
-                <div class="sidebar-panel" id="chatPanel" style="display: none;">
-                    <div class="panel-header">
-                        <h3>Chat</h3>
-                        <button class="close-btn" onclick="togglePanel('chat')">×</button>
+                <div class="panel-content">
+                    <div class="participants-list" id="participants-list"
+                         hx-get="/api/meet/participants"
+                         hx-include="#room-id-input"
+                         hx-trigger="load, every 5s"
+                         hx-swap="innerHTML">
+                        <!-- Participants loaded via HTMX -->
                     </div>
-                    <div class="panel-content">
-                        <div class="chat-messages" id="chatMessages">
-                            <!-- Chat messages will be added dynamically -->
-                        </div>
-                        <div class="chat-input-container">
-                            <input type="text" id="chatInput" placeholder="Type a message..." />
-                            <button id="sendChatBtn" class="send-btn">
-                                <span class="icon">📤</span>
-                            </button>
-                        </div>
-                    </div>
-                </div>
-
-                <!-- Transcription Panel -->
-                <div class="sidebar-panel" id="transcriptionPanel" style="display: none;">
-                    <div class="panel-header">
-                        <h3>Live Transcription</h3>
-                        <button class="close-btn" onclick="togglePanel('transcription')">×</button>
-                    </div>
-                    <div class="panel-content">
-                        <div class="transcription-container" id="transcriptionContainer">
-                            <!-- Transcriptions will be added dynamically -->
-                        </div>
-                        <div class="panel-actions">
-                            <button class="action-btn" id="downloadTranscriptBtn">
-                                <span class="icon">💾</span> Download
-                            </button>
-                            <button class="action-btn" id="clearTranscriptBtn">
-                                <span class="icon">🗑️</span> Clear
-                            </button>
-                        </div>
-                    </div>
-                </div>
-
-                <!-- Bot Assistant Panel -->
-                <div class="sidebar-panel" id="botPanel" style="display: none;">
-                    <div class="panel-header">
-                        <h3>Meeting Assistant</h3>
-                        <button class="close-btn" onclick="togglePanel('bot')">×</button>
-                    </div>
-                    <div class="panel-content">
-                        <div class="bot-status">
-                            <span class="bot-avatar">🤖</span>
-                            <span class="bot-name">AI Assistant</span>
-                            <span class="bot-state active">Active</span>
-                        </div>
-                        <div class="bot-commands">
-                            <button class="bot-cmd-btn" data-command="summarize">
-                                <span class="icon">📋</span> Summarize Discussion
-                            </button>
-                            <button class="bot-cmd-btn" data-command="action_items">
-                                <span class="icon">✅</span> Extract Action Items
-                            </button>
-                            <button class="bot-cmd-btn" data-command="key_points">
-                                <span class="icon">🎯</span> Key Points
-                            </button>
-                            <button class="bot-cmd-btn" data-command="questions">
-                                <span class="icon">❓</span> Pending Questions
-                            </button>
-                        </div>
-                        <div class="bot-responses" id="botResponses">
-                            <!-- Bot responses will be added here -->
-                        </div>
-                    </div>
-                </div>
-            </aside>
-
-            <!-- Screen Share Overlay -->
-            <div class="screen-share-overlay hidden" id="screenShareOverlay">
-                <div class="screen-share-container">
-                    <video id="screenShareVideo" autoplay></video>
-                    <div class="screen-share-controls">
-                        <button id="stopScreenShareBtn" class="control-btn">
-                            <span class="icon">⏹️</span> Stop Sharing
+                    <div class="panel-actions">
+                        <button class="btn-secondary" onclick="showModal('invite-modal')">
+                            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                                <path d="M16 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path>
+                                <circle cx="8.5" cy="7" r="4"></circle>
+                                <line x1="20" y1="8" x2="20" y2="14"></line>
+                                <line x1="23" y1="11" x2="17" y2="11"></line>
+                            </svg>
+                            Invite
+                        </button>
+                        <button class="btn-secondary"
+                                hx-post="/api/meet/mute-all"
+                                hx-include="#room-id-input"
+                                hx-swap="none">
+                            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                                <line x1="1" y1="1" x2="23" y2="23"></line>
+                                <path d="M9 9v3a3 3 0 0 0 5.12 2.12M15 9.34V4a3 3 0 0 0-5.94-.6"></path>
+                                <path d="M17 16.95A7 7 0 0 1 5 12v-2m14 0v2a7 7 0 0 1-.11 1.23"></path>
+                                <line x1="12" y1="19" x2="12" y2="23"></line>
+                                <line x1="8" y1="23" x2="16" y2="23"></line>
+                            </svg>
+                            Mute All
                         </button>
                     </div>
                 </div>
             </div>
-        </main>
 
-        <!-- Meeting Controls -->
-        <footer class="meet-controls">
+            <!-- Chat Panel -->
+            <div class="sidebar-panel hidden" id="chat-panel">
+                <div class="panel-header">
+                    <h3>Chat</h3>
+                    <button class="btn-icon-sm" onclick="togglePanel('chat')">
+                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                            <line x1="18" y1="6" x2="6" y2="18"></line>
+                            <line x1="6" y1="6" x2="18" y2="18"></line>
+                        </svg>
+                    </button>
+                </div>
+                <div class="panel-content">
+                    <div class="chat-messages" id="chat-messages">
+                        <!-- Chat messages via WebSocket -->
+                    </div>
+                    <form class="chat-form" ws-send>
+                        <input type="hidden" name="type" value="chat">
+                        <input type="text" name="message" id="chat-input" placeholder="Type a message..." autocomplete="off">
+                        <button type="submit" class="btn-icon-sm">
+                            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                                <line x1="22" y1="2" x2="11" y2="13"></line>
+                                <polygon points="22 2 15 22 11 13 2 9 22 2"></polygon>
+                            </svg>
+                        </button>
+                    </form>
+                </div>
+            </div>
+
+            <!-- Transcription Panel -->
+            <div class="sidebar-panel hidden" id="transcription-panel">
+                <div class="panel-header">
+                    <h3>Transcription</h3>
+                    <button class="btn-icon-sm" onclick="togglePanel('transcription')">
+                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                            <line x1="18" y1="6" x2="6" y2="18"></line>
+                            <line x1="6" y1="6" x2="18" y2="18"></line>
+                        </svg>
+                    </button>
+                </div>
+                <div class="panel-content">
+                    <div class="transcription-text" id="transcription-text">
+                        <!-- Live transcription via WebSocket -->
+                    </div>
+                </div>
+            </div>
+        </aside>
+
+        <!-- Bottom Controls -->
+        <footer class="room-controls">
             <div class="controls-left">
-                <button id="micBtn" class="control-btn primary" title="Toggle Microphone">
-                    <span class="icon">🎤</span>
+                <button class="control-btn-lg" id="mic-btn" title="Toggle Microphone"
+                        hx-post="/api/voice/toggle"
+                        hx-swap="none"
+                        onclick="toggleMic()">
+                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" id="mic-icon">
+                        <path d="M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z"></path>
+                        <path d="M19 10v2a7 7 0 0 1-14 0v-2"></path>
+                        <line x1="12" y1="19" x2="12" y2="23"></line>
+                        <line x1="8" y1="23" x2="16" y2="23"></line>
+                    </svg>
+                    <span>Mic</span>
                 </button>
-                <button id="videoBtn" class="control-btn primary" title="Toggle Video">
-                    <span class="icon">📹</span>
+                <button class="control-btn-lg" id="camera-btn" title="Toggle Camera"
+                        onclick="toggleCamera()">
+                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" id="camera-icon">
+                        <polygon points="23 7 16 12 23 17 23 7"></polygon>
+                        <rect x="1" y="5" width="15" height="14" rx="2" ry="2"></rect>
+                    </svg>
+                    <span>Camera</span>
                 </button>
-                <button id="screenShareBtn" class="control-btn" title="Share Screen">
-                    <span class="icon">🖥️</span>
-                    <span class="label">Share</span>
+                <button class="control-btn-lg" id="screen-btn" title="Share Screen"
+                        hx-post="/api/meet/screen/share"
+                        hx-include="#room-id-input"
+                        hx-swap="none"
+                        onclick="toggleScreenShare()">
+                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                        <rect x="2" y="3" width="20" height="14" rx="2" ry="2"></rect>
+                        <line x1="8" y1="21" x2="16" y2="21"></line>
+                        <line x1="12" y1="17" x2="12" y2="21"></line>
+                    </svg>
+                    <span>Share</span>
                 </button>
             </div>
-
             <div class="controls-center">
-                <button id="leaveBtn" class="control-btn danger" title="Leave Meeting">
-                    <span class="icon">📞</span>
-                    <span class="label">Leave</span>
+                <button class="control-btn-lg btn-danger" id="end-call-btn" title="End Call"
+                        onclick="leaveMeeting()">
+                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                        <path d="M10.68 13.31a16 16 0 0 0 3.41 2.6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7 2 2 0 0 1 1.72 2v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.42 19.42 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.63A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91"></path>
+                        <line x1="1" y1="1" x2="23" y2="23"></line>
+                    </svg>
+                    <span>End</span>
                 </button>
             </div>
-
             <div class="controls-right">
-                <button id="botBtn" class="control-btn" title="Meeting Assistant">
-                    <span class="icon">🤖</span>
-                    <span class="label">Assistant</span>
+                <button class="control-btn-lg" id="reactions-btn" title="Reactions"
+                        onclick="showReactions()">
+                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                        <circle cx="12" cy="12" r="10"></circle>
+                        <path d="M8 14s1.5 2 4 2 4-2 4-2"></path>
+                        <line x1="9" y1="9" x2="9.01" y2="9"></line>
+                        <line x1="15" y1="9" x2="15.01" y2="9"></line>
+                    </svg>
+                    <span>React</span>
                 </button>
-                <button id="moreBtn" class="control-btn" title="More Options">
-                    <span class="icon">⋯</span>
+                <button class="control-btn-lg" id="more-btn" title="More Options"
+                        onclick="showMoreOptions()">
+                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                        <circle cx="12" cy="12" r="1"></circle>
+                        <circle cx="19" cy="12" r="1"></circle>
+                        <circle cx="5" cy="12" r="1"></circle>
+                    </svg>
+                    <span>More</span>
                 </button>
             </div>
         </footer>
-
-        <!-- Modals -->
-        <!-- Join Meeting Modal -->
-        <div class="modal hidden" id="joinModal">
-            <div class="modal-content">
-                <h2>Join Meeting</h2>
-                <div class="modal-body">
-                    <div class="form-group">
-                        <label for="userName">Your Name</label>
-                        <input type="text" id="userName" placeholder="Enter your name" />
-                    </div>
-                    <div class="form-group">
-                        <label for="meetingCode">Meeting Code</label>
-                        <input type="text" id="meetingCode" placeholder="Enter meeting code or URL" />
-                    </div>
-                    <div class="form-group">
-                        <label class="checkbox-label">
-                            <input type="checkbox" id="joinWithVideo" checked />
-                            Join with video
-                        </label>
-                        <label class="checkbox-label">
-                            <input type="checkbox" id="joinWithAudio" checked />
-                            Join with audio
-                        </label>
-                    </div>
-                    <div class="preview-container">
-                        <video id="previewVideo" autoplay muted></video>
-                        <div class="preview-controls">
-                            <button class="preview-btn" id="testAudioBtn">
-                                <span class="icon">🔊</span> Test Audio
-                            </button>
-                            <button class="preview-btn" id="testVideoBtn">
-                                <span class="icon">📹</span> Test Video
-                            </button>
-                        </div>
-                    </div>
-                </div>
-                <div class="modal-actions">
-                    <button class="btn btn-secondary" onclick="closeModal('joinModal')">Cancel</button>
-                    <button class="btn btn-primary" id="joinMeetingBtn">Join Meeting</button>
-                </div>
-            </div>
-        </div>
-
-        <!-- Create Meeting Modal -->
-        <div class="modal hidden" id="createModal">
-            <div class="modal-content">
-                <h2>Create Meeting</h2>
-                <div class="modal-body">
-                    <div class="form-group">
-                        <label for="meetingName">Meeting Name</label>
-                        <input type="text" id="meetingName" placeholder="Enter meeting name" />
-                    </div>
-                    <div class="form-group">
-                        <label for="meetingDescription">Description (Optional)</label>
-                        <textarea id="meetingDescription" placeholder="Meeting description"></textarea>
-                    </div>
-                    <div class="form-group">
-                        <h4>Meeting Settings</h4>
-                        <label class="checkbox-label">
-                            <input type="checkbox" id="enableTranscription" checked />
-                            Enable live transcription
-                        </label>
-                        <label class="checkbox-label">
-                            <input type="checkbox" id="enableRecording" />
-                            Record meeting
-                        </label>
-                        <label class="checkbox-label">
-                            <input type="checkbox" id="enableBot" checked />
-                            Enable AI assistant
-                        </label>
-                        <label class="checkbox-label">
-                            <input type="checkbox" id="enableWaitingRoom" />
-                            Use waiting room
-                        </label>
-                    </div>
-                </div>
-                <div class="modal-actions">
-                    <button class="btn btn-secondary" onclick="closeModal('createModal')">Cancel</button>
-                    <button class="btn btn-primary" id="createMeetingBtn">Create Meeting</button>
-                </div>
-            </div>
-        </div>
-
-        <!-- Invite Modal -->
-        <div class="modal hidden" id="inviteModal">
-            <div class="modal-content">
-                <h2>Invite Participants</h2>
-                <div class="modal-body">
-                    <div class="form-group">
-                        <label>Meeting Link</label>
-                        <div class="copy-container">
-                            <input type="text" id="meetingLink" readonly />
-                            <button class="copy-btn" onclick="copyMeetingLink()">
-                                <span class="icon">📋</span> Copy
-                            </button>
-                        </div>
-                    </div>
-                    <div class="form-group">
-                        <label for="inviteEmails">Invite by Email</label>
-                        <textarea id="inviteEmails" placeholder="Enter email addresses (one per line)"></textarea>
-                    </div>
-                    <div class="form-group">
-                        <label>Share via</label>
-                        <div class="share-buttons">
-                            <button class="share-btn" onclick="shareVia('whatsapp')">
-                                <span class="icon">💬</span> WhatsApp
-                            </button>
-                            <button class="share-btn" onclick="shareVia('teams')">
-                                <span class="icon">👥</span> Teams
-                            </button>
-                            <button class="share-btn" onclick="shareVia('email')">
-                                <span class="icon">📧</span> Email
-                            </button>
-                        </div>
-                    </div>
-                </div>
-                <div class="modal-actions">
-                    <button class="btn btn-secondary" onclick="closeModal('inviteModal')">Close</button>
-                    <button class="btn btn-primary" id="sendInvitesBtn">Send Invites</button>
-                </div>
-            </div>
-        </div>
-
-        <!-- Redirect Handler for Teams/WhatsApp -->
-        <div class="redirect-handler hidden" id="redirectHandler">
-            <div class="redirect-content">
-                <h2>Incoming Video Call</h2>
-                <p>You</h2> have an incoming video call from <span id="callerName"></span></p>
-                <p>Platform: <span id="callerPlatform"></span></p>
-                <div class="redirect-actions">
-                    <button class="btn btn-danger" onclick="rejectCall()">Reject</button>
-                    <button class="btn btn-success" onclick="acceptCall()">Accept</button>
-                </div>
-            </div>
-        </div>
     </div>
 
-    <!-- Scripts -->
-    <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
-    <script src="https://unpkg.com/livekit-client/dist/livekit-client.umd.min.js"></script>
-    <script src="meet.js"></script>
-</body>
-</html>
+    <!-- Create Meeting Modal -->
+    <dialog class="modal" id="create-modal">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h3>Create Meeting</h3>
+                <button class="btn-icon-sm" onclick="hideModal('create-modal')">
+                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                        <line x1="18" y1="6" x2="6" y2="18"></line>
+                        <line x1="6" y1="6" x2="18" y2="18"></line>
+                    </svg>
+                </button>
+            </div>
+            <form class="modal-body"
+                  hx-post="/api/meet/create"
+                  hx-target="#meeting-room"
+                  hx-swap="outerHTML"
+                  hx-on::after-request="hideModal('create-modal'); enterMeeting()">
+                <div class="form-group">
+                    <label for="meeting-title">Meeting Title</label>
+                    <input type="text" id="meeting-title" name="title" placeholder="My Meeting" required>
+                </div>
+                <div class="form-group">
+                    <label for="meeting-description">Description (Optional)</label>
+                    <textarea id="meeting-description" name="description" placeholder="Meeting description..."></textarea>
+                </div>
+                <div class="form-group">
+                    <label>Settings</label>
+                    <div class="checkbox-group">
+                        <label class="checkbox-label">
+                            <input type="checkbox" name="transcription" checked>
+                            <span>Enable live transcription</span>
+                        </label>
+                        <label class="checkbox-label">
+                            <input type="checkbox" name="recording">
+                            <span>Record meeting</span>
+                        </label>
+                        <label class="checkbox-label">
+                            <input type="checkbox" name="ai_assistant" checked>
+                            <span>Enable AI assistant</span>
+                        </label>
+                        <label class="checkbox-label">
+                            <input type="checkbox" name="waiting_room">
+                            <span>Use waiting room</span>
+                        </label>
+                    </div>
+                </div>
+                <div class="modal-actions">
+                    <button type="button" class="btn-secondary" onclick="hideModal('create-modal')">Cancel</button>
+                    <button type="submit" class="btn-primary">Create & Join</button>
+                </div>
+            </form>
+        </div>
+    </dialog>
+
+    <!-- Join Meeting Modal -->
+    <dialog class="modal" id="join-modal">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h3>Join Meeting</h3>
+                <button class="btn-icon-sm" onclick="hideModal('join-modal')">
+                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                        <line x1="18" y1="6" x2="6" y2="18"></line>
+                        <line x1="6" y1="6" x2="18" y2="18"></line>
+                    </svg>
+                </button>
+            </div>
+            <form class="modal-body"
+                  hx-post="/api/meet/join"
+                  hx-target="#meeting-room"
+                  hx-swap="outerHTML"
+                  hx-on::after-request="hideModal('join-modal'); enterMeeting()">
+                <div class="form-group">
+                    <label for="user-name">Your Name</label>
+                    <input type="text" id="user-name" name="user_name" placeholder="Enter your name" required>
+                </div>
+                <div class="form-group">
+                    <label for="meeting-code">Meeting Code or Link</label>
+                    <input type="text" id="meeting-code" name="meeting_code" placeholder="Enter meeting code" required>
+                </div>
+                <div class="form-group">
+                    <label>Join Options</label>
+                    <div class="checkbox-group">
+                        <label class="checkbox-label">
+                            <input type="checkbox" name="join_video" checked>
+                            <span>Join with video</span>
+                        </label>
+                        <label class="checkbox-label">
+                            <input type="checkbox" name="join_audio" checked>
+                            <span>Join with audio</span>
+                        </label>
+                    </div>
+                </div>
+                <div class="preview-container">
+                    <video id="preview-video" autoplay muted playsinline></video>
+                    <div class="preview-controls">
+                        <button type="button" class="btn-icon" onclick="testAudio()">
+                            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                                <polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"></polygon>
+                                <path d="M19.07 4.93a10 10 0 0 1 0 14.14M15.54 8.46a5 5 0 0 1 0 7.07"></path>
+                            </svg>
+                            Test Audio
+                        </button>
+                        <button type="button" class="btn-icon" onclick="testVideo()">
+                            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                                <polygon points="23 7 16 12 23 17 23 7"></polygon>
+                                <rect x="1" y="5" width="15" height="14" rx="2" ry="2"></rect>
+                            </svg>
+                            Test Video
+                        </button>
+                    </div>
+                </div>
+                <div class="modal-actions">
+                    <button type="button" class="btn-secondary" onclick="hideModal('join-modal')">Cancel</button>
+                    <button type="submit" class="btn-primary">Join Meeting</button>
+                </div>
+            </form>
+        </div>
+    </dialog>
+
+    <!-- Invite Modal -->
+    <dialog class="modal" id="invite-modal">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h3>Invite Participants</h3>
+                <button class="btn-icon-sm" onclick="hideModal('invite-modal')">
+                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                        <line x1="18" y1="6" x2="6" y2="18"></line>
+                        <line x1="6" y1="6" x2="18" y2="18"></line>
+                    </svg>
+                </button>
+            </div>
+            <form class="modal-body"
+                  hx-post="/api/meet/invite"
+                  hx-include="#room-id-input"
+                  hx-swap="none"
+                  hx-on::after-request="showNotification('Invites sent!')">
+                <div class="form-group">
+                    <label>Meeting Link</label>
+                    <div</label> class="copy-input">
+                        <input type="text" id="meeting-link" readonly>
+                        <button type="button" class="btn-icon" onclick="copyMeetingLink()">
+                            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                                <rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
+                                <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>
+                            </svg>
+                        </button>
+                    </div>
+                </div>
+                <div class="form-group">
+                    <label for="invite-emails">Invite by Email</label>
+                    <textarea id="invite-emails" name="emails" placeholder="Enter email addresses (one per line)"></textarea>
+                </div>
+                <div class="modal-actions">
+                    <button type="button" class="btn-secondary" onclick="hideModal('invite-modal')">Close</button>
+                    <button type="submit" class="btn-primary">Send Invites</button>
+                </div>
+            </form>
+        </div>
+    </dialog>
+
+    <!-- Reactions Popup -->
+    <div class="reactions-popup hidden" id="reactions-popup">
+        <button class="reaction-btn" onclick="sendReaction('👍')">👍</button>
+        <button class="reaction-btn" onclick="sendReaction('👏')">👏</button>
+        <button class="reaction-btn" onclick="sendReaction('❤️')">❤️</button>
+        <button class="reaction-btn" onclick="sendReaction('😂')">😂</button>
+        <button class="reaction-btn" onclick="sendReaction('😮')">😮</button>
+        <button class="reaction-btn" onclick="sendReaction('🎉')">🎉</button>
+        <button class="reaction-btn" onclick="sendReaction('✋')">✋</button>
+    </div>
+</div>
+
+<style>
+    .meet-container {
+        display: flex;
+        flex-direction: column;
+        height: 100%;
+        background: var(--bg);
+        color: var(--text);
+    }
+
+    .meet-header {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding: 1rem 1.5rem;
+        background: var(--surface);
+        border-bottom: 1px solid var(--border);
+    }
+
+    .meet-brand {
+        display: flex;
+        align-items: center;
+        gap: 0.75rem;
+    }
+
+    .brand-icon {
+        width: 32px;
+        height: 32px;
+    }
+
+    .meet-brand h1 {
+        font-size: 1.25rem;
+        font-weight: 600;
+        margin: 0;
+    }
+
+    .meet-actions {
+        display: flex;
+        gap: 0.75rem;
+    }
+
+    .btn-primary, .btn-secondary {
+        display: flex;
+        align-items: center;
+        gap: 0.5rem;
+        padding: 0.625rem 1rem;
+        border-radius: 8px;
+        font-size: 0.875rem;
+        font-weight: 500;
+        cursor: pointer;
+        transition: all 0.2s;
+        border: none;
+    }
+
+    .btn-primary {
+        background: var(--primary);
+        color: white;
+    }
+
+    .btn-primary:hover {
+        background: var(--primary-hover);
+    }
+
+    .btn-secondary {
+        background: var(--surface-hover);
+        color: var(--text);
+        border: 1px solid var(--border);
+    }
+
+    .btn-secondary:hover {
+        background: var(--border);
+    }
+
+    .meet-main {
+        flex: 1;
+        overflow-y: auto;
+        padding: 1.5rem;
+    }
+
+    .section-header {
+        display: flex;
+        align-items: center;
+        gap: 0.75rem;
+        margin-bottom: 1rem;
+    }
+
+    .section-header h2 {
+        font-size: 1.125rem;
+        font-weight: 600;
+        margin: 0;
+    }
+
+    .room-count {
+        background: var(--primary);
+        color: white;
+        padding: 0.125rem 0.5rem;
+        border-radius: 9999px;
+        font-size: 0.75rem;
+        font-weight: 600;
+    }
+
+    .rooms-grid {
+        display: grid;
+        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+        gap: 1rem;
+        margin-bottom: 2rem;
+    }
+
+    .loading-placeholder {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        padding: 3rem;
+        color: var(--text-secondary);
+    }
+
+    .spinner {
+        width: 24px;
+        height: 24px;
+        border: 2px solid var(--border);
+        border-top-color: var(--primary);
+        border-radius: 50%;
+        animation: spin 0.8s linear infinite;
+        margin-bottom: 0.5rem;
+    }
+
+    @keyframes spin {
+        to { transform: rotate(360deg); }
+    }
+
+    /* Meeting Room Styles */
+    .meeting-room {
+        position: fixed;
+        inset: 0;
+        display: flex;
+        flex-direction: column;
+        background: #000;
+        z-index: 100;
+    }
+
+    .meeting-room.hidden {
+        display: none;
+    }
+
+    .room-header {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding: 0.75rem 1rem;
+        background: rgba(0, 0, 0, 0.8);
+    }
+
+    .room-info {
+        display: flex;
+        align-items: center;
+        gap: 1rem;
+    }
+
+    .room-info h2 {
+        font-size: 1rem;
+        font-weight: 500;
+        margin: 0;
+        color: white;
+    }
+
+    .room-id, .room-timer {
+        font-size: 0.75rem;
+        color: rgba(255, 255, 255, 0.6);
+    }
+
+    .room-controls-top {
+        display: flex;
+        gap: 0.5rem;
+    }
+
+    .control-btn {
+        display: flex;
+        align-items: center;
+        gap: 0.375rem;
+        padding: 0.5rem 0.75rem;
+        background: rgba(255, 255, 255, 0.1);
+        border: none;
+        border-radius: 6px;
+        color: white;
+        font-size: 0.75rem;
+        cursor: pointer;
+        transition: background 0.2s;
+    }
+
+    .control-btn:hover {
+        background: rgba(255, 255, 255, 0.2);
+    }
+
+    .control-btn.active {
+        background: var(--primary);
+    }
+
+    .control-btn .badge {
+        background: var(--error);
+        color: white;
+        padding: 0.125rem 0.375rem;
+        border-radius: 9999px;
+        font-size: 0.625rem;
+        font-weight: 600;
+    }
+
+    .control-btn .badge.hidden {
+        display: none;
+    }
+
+    .video-grid {
+        flex: 1;
+        display: grid;
+        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+        gap: 0.5rem;
+        padding: 0.5rem;
+        background: #111;
+    }
+
+    .video-tile {
+        position: relative;
+        background: #222;
+        border-radius: 8px;
+        overflow: hidden;
+        aspect-ratio: 16 / 9;
+    }
+
+    .video-tile video {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+    }
+
+    .video-overlay {
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        padding: 0.5rem;
+        background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+    }
+
+    .participant-name {
+        color: white;
+        font-size: 0.75rem;
+        font-weight: 500;
+    }
+
+    .video-indicators {
+        display: flex;
+        gap: 0.25rem;
+    }
+
+    .indicator {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 24px;
+        height: 24px;
+        background: rgba(0, 0, 0, 0.5);
+        border-radius: 4px;
+        color: white;
+    }
+
+    .indicator.mic-off svg {
+        color: var(--error);
+    }
+
+    .room-sidebar {
+        position: absolute;
+        right: 0;
+        top: 50px;
+        bottom: 80px;
+        width: 320px;
+        background: var(--surface);
+        border-left: 1px solid var(--border);
+        display: flex;
+        flex-direction: column;
+    }
+
+    .sidebar-panel {
+        display: flex;
+        flex-direction: column;
+        height: 100%;
+    }
+
+    .sidebar-panel.hidden {
+        display: none;
+    }
+
+    .panel-header {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding: 0.75rem 1rem;
+        border-bottom: 1px solid var(--border);
+    }
+
+    .panel-header h3 {
+        font-size: 0.875rem;
+        font-weight: 600;
+        margin: 0;
+    }
+
+    .panel-content {
+        flex: 1;
+        overflow-y: auto;
+        padding: 1rem;
+    }
+
+    .participants-list {
+        display: flex;
+        flex-direction: column;
+        gap: 0.5rem;
+    }
+
+    .panel-actions {
+        display: flex;
+        gap: 0.5rem;
+        padding-top: 1rem;
+        border-top: 1px solid var(--border);
+        margin-top: 1rem;
+    }
+
+    .chat-messages {
+        flex: 1;
+        overflow-y: auto;
+        display: flex;
+        flex-direction: column;
+        gap: 0.75rem;
+    }
+
+    .chat-form {
+        display: flex;
+        gap: 0.5rem;
+        padding-top: 0.75rem;
+        border-top: 1px solid var(--border);
+        margin-top: auto;
+    }
+
+    .chat-form input {
+        flex: 1;
+        padding: 0.5rem 0.75rem;
+        background: var(--bg);
+        border: 1px solid var(--border);
+        border-radius: 6px;
+        color: var(--text);
+        font-size: 0.875rem;
+    }
+
+    .chat-form input:focus {
+        outline: none;
+        border-color: var(--primary);
+    }
+
+    .room-controls {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        padding: 1rem;
+        background: rgba(0, 0, 0, 0.9);
+        gap: 2rem;
+    }
+
+    .controls-left, .controls-center, .controls-right {
+        display: flex;
+        gap: 0.75rem;
+    }
+
+    .control-btn-lg {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        gap: 0.25rem;
+        padding: 0.75rem 1rem;
+        background: rgba(255, 255, 255, 0.1);
+        border: none;
+        border-radius: 12px;
+        color: white;
+        font-size: 0.625rem;
+        cursor: pointer;
+        transition: all 0.2s;
+        min-width: 64px;
+    }
+
+    .control-btn-lg:hover {
+        background: rgba(255, 255, 255, 0.2);
+    }
+
+    .control-btn-lg.active {
+        background: var(--primary);
+    }
+
+    .control-btn-lg.btn-danger {
+        background: var(--error);
+    }
+
+    .control-btn-lg.btn-danger:hover {
+        background: #dc2626;
+    }
+
+    .control-btn-lg.muted {
+        background: var(--error);
+    }
+
+    /* Modal Styles */
+    .modal {
+        position: fixed;
+        inset: 0;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        background: rgba(0, 0, 0, 0.5);
+        z-index: 200;
+        border: none;
+        padding: 0;
+        max-width: 100%;
+        max-height: 100%;
+        width: 100%;
+        height: 100%;
+    }
+
+    .modal::backdrop {
+        background: rgba(0, 0, 0, 0.5);
+    }
+
+    .modal-content {
+        background: var(--surface);
+        border-radius: 12px;
+        width: 100%;
+        max-width: 480px;
+        max-height: 90vh;
+        overflow-y: auto;
+    }
+
+    .modal-header {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding: 1rem 1.25rem;
+        border-bottom: 1px solid var(--border);
+    }
+
+    .modal-header h3 {
+        font-size: 1.125rem;
+        font-weight: 600;
+        margin: 0;
+    }
+
+    .modal-body {
+        padding: 1.25rem;
+    }
+
+    .form-group {
+        margin-bottom: 1rem;
+    }
+
+    .form-group label {
+        display: block;
+        font-size: 0.875rem;
+        font-weight: 500;
+        margin-bottom: 0.375rem;
+        color: var(--text-secondary);
+    }
+
+    .form-group input,
+    .form-group textarea {
+        width: 100%;
+        padding: 0.625rem 0.75rem;
+        background: var(--bg);
+        border: 1px solid var(--border);
+        border-radius: 6px;
+        color: var(--text);
+        font-size: 0.875rem;
+    }
+
+    .form-group input:focus,
+    .form-group textarea:focus {
+        outline: none;
+        border-color: var(--primary);
+    }
+
+    .form-group textarea {
+        min-height: 80px;
+        resize: vertical;
+    }
+
+    .checkbox-group {
+        display: flex;
+        flex-direction: column;
+        gap: 0.5rem;
+    }
+
+    .checkbox-label {
+        display: flex;
+        align-items: center;
+        gap: 0.5rem;
+        cursor: pointer;
+        font-size: 0.875rem;
+    }
+
+    .checkbox-label input {
+        width: auto;
+    }
+
+    .preview-container {
+        position: relative;
+        background: #000;
+        border-radius: 8px;
+        overflow: hidden;
+        aspect-ratio: 16 / 9;
+        margin-top: 1rem;
+    }
+
+    .preview-container video {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+    }
+
+    .preview-controls {
+        position: absolute;
+        bottom: 0.5rem;
+        left: 50%;
+        transform: translateX(-50%);
+        display: flex;
+        gap: 0.5rem;
+    }
+
+    .modal-actions {
+        display: flex;
+        justify-content: flex-end;
+        gap: 0.75rem;
+        padding-top: 1rem;
+        border-top: 1px solid var(--border);
+        margin-top: 1rem;
+    }
+
+    .copy-input {
+        display: flex;
+        gap: 0.5rem;
+    }
+
+    .copy-input input {
+        flex: 1;
+    }
+
+    .btn-icon, .btn-icon-sm {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        gap: 0.375rem;
+        padding: 0.5rem;
+        background: var(--surface-hover);
+        border: none;
+        border-radius: 6px;
+        color: var(--text);
+        cursor: pointer;
+        transition: background 0.2s;
+    }
+
+    .btn-icon:hover, .btn-icon-sm:hover {
+        background: var(--border);
+    }
+
+    .btn-icon-sm {
+        padding: 0.25rem;
+    }
+
+    /* Reactions */
+    .reactions-popup {
+        position: fixed;
+        bottom: 100px;
+        left: 50%;
+        transform: translateX(-50%);
+        display: flex;
+        gap: 0.5rem;
+        padding: 0.5rem;
+        background: var(--surface);
+        border-radius: 9999px;
+        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+        z-index: 150;
+    }
+
+    .reactions-popup.hidden {
+        display: none;
+    }
+
+    .reaction-btn {
+        width: 40px;
+        height: 40px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        background: transparent;
+        border: none;
+        border-radius: 50%;
+        font-size: 1.25rem;
+        cursor: pointer;
+        transition: transform 0.2s, background 0.2s;
+    }
+
+    .reaction-btn:hover {
+        background: var(--surface-hover);
+        transform: scale(1.2);
+    }
+
+    /* Responsive */
+    @media (max-width: 768px) {
+        .meet-header {
+            flex-direction: column;
+            gap: 1rem;
+            padding: 1rem;
+        }
+
+        .meet-actions {
+            width: 100%;
+        }
+
+        .meet-actions button {
+            flex: 1;
+        }
+
+        .room-sidebar {
+            width: 100%;
+            right: 0;
+            left: 0;
+        }
+
+        .room-controls {
+            flex-wrap: wrap;
+            gap: 1rem;
+        }
+
+        .control-btn-lg {
+            min-width: 56px;
+            padding: 0.5rem;
+        }
+    }
+</style>
+
+<script>
+    // Modal functions
+    function showModal(id) {
+        const modal = document.getElementById(id);
+        if (modal) modal.showModal();
+    }
+
+    function hideModal(id) {
+        const modal = document.getElementById(id);
+        if (modal) modal.close();
+    }
+
+    // Panel toggle
+    function togglePanel(name) {
+        const panels = ['participants', 'chat', 'transcription'];
+        panels.forEach(p => {
+            const panel = document.getElementById(p + '-panel');
+            if (panel) {
+                if (p === name) {
+                    panel.classList.toggle('hidden');
+                } else {
+                    panel.classList.add('hidden');
+                }
+            }
+        });
+    }
+
+    // Meeting functions
+    function enterMeeting() {
+        document.querySelector('.meet-main')?.classList.add('hidden');
+        document.querySelector('.meet-header')?.classList.add('hidden');
+        document.getElementById('meeting-room')?.classList.remove('hidden');
+        startTimer();
+        initializeMedia();
+    }
+
+    function leaveMeeting() {
+        document.getElementById('meeting-room')?.classList.add('hidden');
+        document.querySelector('.meet-main')?.classList.remove('hidden');
+        document.querySelector('.meet-header')?.classList.remove('hidden');
+        stopTimer();
+        stopMedia();
+    }
+
+    // Media controls
+    let localStream = null;
+    let isMuted = false;
+    let isCameraOff = false;
+
+    async function initializeMedia() {
+        try {
+            localStream = await navigator.mediaDevices.getUserMedia({ video: true, audio: true });
+            const localVideo = document.getElementById('local-video');
+            if (localVideo) localVideo.srcObject = localStream;
+        } catch (err) {
+            console.error('Error accessing media devices:', err);
+        }
+    }
+
+    function stopMedia() {
+        if (localStream) {
+            localStream.getTracks().forEach(track => track.stop());
+            localStream = null;
+        }
+    }
+
+    function toggleMic() {
+        if (localStream) {
+            const audioTrack = localStream.getAudioTracks()[0];
+            if (audioTrack) {
+                audioTrack.enabled = !audioTrack.enabled;
+                isMuted = !audioTrack.enabled;
+                const btn = document.getElementById('mic-btn');
+                btn?.classList.toggle('muted', isMuted);
+            }
+        }
+    }
+
+    function toggleCamera() {
+        if (localStream) {
+            const videoTrack = localStream.getVideoTracks()[0];
+            if (videoTrack) {
+                videoTrack.enabled = !videoTrack.enabled;
+                isCameraOff = !videoTrack.enabled;
+                const btn = document.getElementById('camera-btn');
+                btn?.classList.toggle('muted', isCameraOff);
+            }
+        }
+    }
+
+    async function toggleScreenShare() {
+        try {
+            const screenStream = await navigator.mediaDevices.getDisplayMedia({ video: true });
+            // Handle screen share stream
+        } catch (err) {
+            console.error('Error sharing screen:', err);
+        }
+    }
+
+    // Timer
+    let timerInterval = null;
+    let timerSeconds = 0;
+
+    function startTimer() {
+        timerInterval = setInterval(() => {
+            timerSeconds++;
+            const hours = Math.floor(timerSeconds / 3600);
+            const minutes = Math.floor((timerSeconds % 3600) / 60);
+            const seconds = timerSeconds % 60;
+            const display = [hours, minutes, seconds]
+                .map(v => v.toString().padStart(2, '0'))
+                .join(':');
+            const timerEl = document.getElementById('room-timer');
+            if (timerEl) timerEl.textContent = display;
+        }, 1000);
+    }
+
+    function stopTimer() {
+        if (timerInterval) {
+            clearInterval(timerInterval);
+            timerInterval = null;
+        }
+        timerSeconds = 0;
+    }
+
+    // Reactions
+    function showReactions() {
+        document.getElementById('reactions-popup')?.classList.toggle('hidden');
+    }
+
+    function sendReaction(emoji) {
+        // Send via WebSocket
+        console.log('Sending reaction:', emoji);
+        document.getElementById('reactions-popup')?.classList.add('hidden');
+    }
+
+    // Copy meeting link
+    function copyMeetingLink() {
+        const input = document.getElementById('meeting-link');
+        if (input) {
+            input.select();
+            navigator.clipboard.writeText(input.value);
+        }
+    }
+
+    // Preview for join modal
+    async function testVideo() {
+        try {
+            const stream = await navigator.mediaDevices.getUserMedia({ video: true });
+            const preview = document.getElementById('preview-video');
+            if (preview) preview.srcObject = stream;
+        } catch (err) {
+            console.error('Error testing video:', err);
+        }
+    }
+
+    function testAudio() {
+        // Test audio input/output
+        console.log('Testing audio...');
+    }
+
+    function showMoreOptions() {
+        // Show more options menu
+        console.log('More options...');
+    }
+
+    function showNotification(message) {
+        // Show notification toast
+        console.log('Notification:', message);
+    }
+</script>
diff --git a/ui/suite/monitoring/alerts.html b/ui/suite/monitoring/alerts.html
new file mode 100644
index 0000000..2da7f9e
--- /dev/null
+++ b/ui/suite/monitoring/alerts.html
@@ -0,0 +1,1573 @@
+<div class="alerts-container">
+    <!-- Alerts Header -->
+    <div class="alerts-header">
+        <div class="header-info">
+            <h2></h2>
+                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                    <path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"></path>
+                    <path d="M13.73 21a2 2 0 0 1-3.46 0"></path>
+                </svg>
+                Alert Configuration
+            </h2>
+            <span class="alert-summary"
+                  hx-get="/api/monitoring/alerts/summary"
+                  hx-trigger="load, every 30s"
+                  hx-swap="innerHTML">
+                <span class="summary-item critical">0 Critical</span>
+                <span class="summary-item warning">0 Warning</span>
+                <span class="summary-item info">0 Info</span>
+            </span>
+        </div>
+        <div class="header-actions">
+            <button class="action-btn" onclick="openCreateAlertModal()">
+                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                    <line x1="12" y1="5" x2="12" y2="19"></line>
+                    <line x1="5" y1="12" x2="19" y2="12"></line>
+                </svg>
+                Create Alert Rule
+            </button>
+            <button class="action-btn secondary" onclick="acknowledgeAllAlerts()">
+                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                    <polyline points="9 11 12 14 22 4"></polyline>
+                    <path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"></path>
+                </svg>
+                Acknowledge All
+            </button>
+        </div>
+    </div>
+
+    <!-- Tabs -->
+    <div class="alerts-tabs">
+        <button class="tab-btn active" onclick="switchTab('active', this)">
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                <polygon points="7.86 2 16.14 2 22 7.86 22 16.14 16.14 22 7.86 22 2 16.14 2 7.86 7.86 2"></polygon>
+                <line x1="12" y1="8" x2="12" y2="12"></line>
+                <line x1="12" y1="16" x2="12.01" y2="16"></line>
+            </svg>
+            Active Alerts
+            <span class="tab-badge" id="active-count">0</span>
+        </button>
+        <button class="tab-btn" onclick="switchTab('rules', this)">
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
+                <polyline points="14 2 14 8 20 8"></polyline>
+                <line x1="16" y1="13" x2="8" y2="13"></line>
+                <line x1="16" y1="17" x2="8" y2="17"></line>
+            </svg>
+            Alert Rules
+            <span class="tab-badge" id="rules-count">0</span>
+        </button>
+        <button class="tab-btn" onclick="switchTab('history', this)">
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                <circle cx="12" cy="12" r="10"></circle>
+                <polyline points="12 6 12 12 16 14"></polyline>
+            </svg>
+            History
+        </button>
+    </div>
+
+    <!-- Active Alerts Panel -->
+    <div class="tab-panel active" id="active-panel">
+        <div class="panel-toolbar">
+            <div class="filter-group">
+                <select id="severity-filter" onchange="filterAlerts()">
+                    <option value="all">All Severities</option>
+                    <option value="critical">Critical</option>
+                    <option value="warning">Warning</option>
+                    <option value="info">Info</option>
+                </select>
+                <select id="status-filter" onchange="filterAlerts()">
+                    <option value="all">All Status</option>
+                    <option value="firing">Firing</option>
+                    <option value="pending">Pending</option>
+                    <option value="acknowledged">Acknowledged</option>
+                </select>
+            </div>
+            <div class="search-box">
+                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                    <circle cx="11" cy="11" r="8"></circle>
+                    <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
+                </svg>
+                <input type="text" id="alert-search" placeholder="Search alerts..." onkeyup="searchAlerts(this.value)">
+            </div>
+        </div>
+
+        <div class="alerts-list" id="alerts-list"
+             hx-get="/api/monitoring/alerts/active"
+             hx-trigger="load, every 30s"
+             hx-swap="innerHTML">
+            <!-- Alert items loaded via HTMX -->
+            <div class="alert-placeholder">
+                <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
+                    <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
+                    <polyline points="22 4 12 14.01 9 11.01"></polyline>
+                </svg>
+                <p>No active alerts</p>
+                <span></span>All systems are operating normally</span>
+            </div>
+        </div>
+    </div>
+
+    <!-- Alert Rules Panel -->
+    <div class="tab-panel" id="rules-panel">
+        <div class="panel-toolbar">
+            <div class="filter-group">
+                <select id="rule-status-filter" onchange="filterRules()">
+                    <option value="all">All Rules</option>
+                    <option value="enabled">Enabled</option>
+                    <option value="disabled">Disabled</option>
+                </select>
+                <select id="rule-category-filter" onchange="filterRules()">
+                    <option value="all">All Categories</option>
+                    <option value="system">System</option>
+                    <option value="application">Application</option>
+                    <option value="database">Database</option>
+                    <option value="network">Network</option>
+                    <option value="security">Security</option>
+                </select>
+            </div>
+            <button class="action-btn secondary small" onclick="openCreateAlertModal()">
+                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                    <line x1="12" y1="5" x2="12" y2="19"></line>
+                    <line x1="5" y1="12" x2="19" y2="12"></line>
+                </svg>
+                New Rule
+            </button>
+        </div>
+
+        <div class="rules-grid" id="rules-grid"
+             hx-get="/api/monitoring/alerts/rules"
+             hx-trigger="load"
+             hx-swap="innerHTML">
+            <!-- Rules loaded via HTMX -->
+            <div class="rule-card skeleton">
+                <div class="skeleton-line"></div>
+                <div class="skeleton-line short"></div>
+            </div>
+            <div class="rule-card skeleton">
+                <div class="skeleton-line"></div>
+                <div class="skeleton-line short"></div>
+            </div>
+        </div>
+    </div>
+
+    <!-- History Panel -->
+    <div class="tab-panel" id="history-panel">
+        <div class="panel-toolbar">
+            <div class="filter-group">
+                <select id="history-time-filter" onchange="filterHistory()">
+                    <option value="24h">Last 24 hours</option>
+                    <option value="7d">Last 7 days</option>
+                    <option value="30d">Last 30 days</option>
+                </select>
+                <select id="history-outcome-filter" onchange="filterHistory()">
+                    <option value="all">All Outcomes</option>
+                    <option value="resolved">Resolved</option>
+                    <option value="acknowledged">Acknowledged</option>
+                    <option value="expired">Expired</option>
+                </select>
+            </div>
+            <button class="action-btn secondary small" onclick="exportHistory()">
+                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                    <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
+                    <polyline points="7 10 12 15 17 10"></polyline>
+                    <line x1="12" y1="15" x2="12" y2="3"></line>
+                </svg>
+                Export
+            </button>
+        </div>
+
+        <div class="history-list" id="history-list"
+             hx-get="/api/monitoring/alerts/history"
+             hx-trigger="load"
+             hx-swap="innerHTML">
+            <!-- History items loaded via HTMX -->
+            <div class="loading-state">
+                <div class="spinner"></div>
+                <p>Loading history...</p>
+            </div>
+        </div>
+    </div>
+</div>
+
+<!-- Create Alert Rule Modal -->
+<div class="modal-overlay" id="create-alert-modal">
+    <div class="modal">
+        <div class="modal-header">
+            <h3>
+                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                    <path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"></path>
+                    <path d="M13.73 21a2 2 0 0 1-3.46 0"></path>
+                </svg>
+                Create Alert Rule
+            </h3>
+            <button class="close-btn" onclick="closeCreateAlertModal()">
+                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                    <line x1="18" y1="6" x2="6" y2="18"></line>
+                    <line x1="6" y1="6" x2="18" y2="18"></line>
+                </svg>
+            </button>
+        </div>
+        <form id="create-alert-form"
+              hx-post="/api/monitoring/alerts/rules"
+              hx-target="#rules-grid"
+              hx-swap="innerHTML"
+              hx-on::after-request="closeCreateAlertModal()">
+            <div class="modal-body">
+                <div class="form-section">
+                    <h4>Basic Information</h4>
+                    <div class="form-group">
+                        <label for="alert-name">Alert Name *</label>
+                        <input type="text" id="alert-name" name="name" required placeholder="e.g., High CPU Usage">
+                    </div>
+                    <div class="form-row">
+                        <div class="form-group">
+                            <label for="alert-severity">Severity *</label>
+                            <select id="alert-severity" name="severity" required>
+                                <option value="">Select severity</option>
+                                <option value="critical">Critical</option>
+                                <option value="warning">Warning</option>
+                                <option value="info">Info</option>
+                            </select>
+                        </div>
+                        <div class="form-group">
+                            <label for="alert-category">Category *</label>
+                            <select id="alert-category" name="category" required>
+                                <option value="">Select category</option>
+                                <option value="system">System</option>
+                                <option value="application">Application</option>
+                                <option value="database">Database</option>
+                                <option value="network">Network</option>
+                                <option value="security">Security</option>
+                            </select>
+                        </div>
+                    </div>
+                    <div class="form-group">
+                        <label for="alert-description">Description</label>
+                        <textarea id="alert-description" name="description" rows="2" placeholder="Brief description of this alert rule"></textarea>
+                    </div>
+                </div>
+
+                <div class="form-section">
+                    <h4>Condition</h4>
+                    <div class="form-group">
+                        <label for="alert-metric">Metric *</label>
+                        <select id="alert-metric" name="metric" required>
+                            <option value="">Select metric</option>
+                            <optgroup label="System">
+                                <option value="cpu_usage">CPU Usage (%)</option>
+                                <option value="memory_usage">Memory Usage (%)</option>
+                                <option value="disk_usage">Disk Usage (%)</option>
+                                <option value="load_average">Load Average</option>
+                            </optgroup>
+                            <optgroup label="Application">
+                                <option value="request_rate">Request Rate (req/s)</option>
+                                <option value="error_rate">Error Rate (%)</option>
+                                <option value="response_time">Response Time (ms)</option>
+                                <option value="active_connections">Active Connections</option>
+                            </optgroup>
+                            <optgroup label="Database">
+                                <option value="db_connections">DB Connections</option>
+                                <option value="query_time">Query Time (ms)</option>
+                                <option value="replication_lag">Replication Lag (s)</option>
+                            </optgroup>
+                        </select>
+                    </div>
+                    <div class="form-row">
+                        <div class="form-group">
+                            <label for="alert-operator">Operator *</label>
+                            <select id="alert-operator" name="operator" required>
+                                <option value="gt">Greater than (>)</option>
+                                <option value="gte">Greater than or equal (>=)</option>
+                                <option value="lt">Less than (<)</option>
+                                <option value="lte">Less than or equal (<=)</option>
+                                <option value="eq">Equal to (=)</option>
+                                <option value="neq">Not equal to (!=)</option>
+                            </select>
+                        </div>
+                        <div class="form-group">
+                            <label for="alert-threshold">Threshold *</label>
+                            <input type="number" id="alert-threshold" name="threshold" required placeholder="e.g., 90" step="any">
+                        </div>
+                    </div>
+                    <div class="form-row">
+                        <div class="form-group">
+                            <label for="alert-duration">Duration *</label>
+                            <select id="alert-duration" name="duration" required>
+                                <option value="0">Instant</option>
+                                <option value="60">1 minute</option>
+                                <option value="300" selected>5 minutes</option>
+                                <option value="600">10 minutes</option>
+                                <option value="900">15 minutes</option>
+                                <option value="1800">30 minutes</option>
+                                <option value="3600">1 hour</option>
+                            </select>
+                        </div>
+                        <div class="form-group">
+                            <label for="alert-evaluation">Evaluation Interval</label>
+                            <select id="alert-evaluation" name="evaluation_interval">
+                                <option value="30">30 seconds</option>
+                                <option value="60" selected>1 minute</option>
+                                <option value="300">5 minutes</option>
+                            </select>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="form-section">
+                    <h4>Notifications</h4>
+                    <div class="notification-channels">
+                        <label class="checkbox-label">
+                            <input type="checkbox" name="notify_email" value="true" checked>
+                            <span class="checkbox-custom"></span>
+                            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                                <path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path>
+                                <polyline points="22,6 12,13 2,6"></polyline>
+                            </svg>
+                            Email
+                        </label>
+                        <label class="checkbox-label">
+                            <input type="checkbox" name="notify_slack" value="true">
+                            <span class="checkbox-custom"></span>
+                            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                                <path d="M14.5 10c-.83 0-1.5-.67-1.5-1.5v-5c0-.83.67-1.5 1.5-1.5s1.5.67 1.5 1.5v5c0 .83-.67 1.5-1.5 1.5z"></path>
+                                <path d="M20.5 10H19V8.5c0-.83.67-1.5 1.5-1.5s1.5.67 1.5 1.5-.67 1.5-1.5 1.5z"></path>
+                                <path d="M9.5 14c.83 0 1.5.67 1.5 1.5v5c0 .83-.67 1.5-1.5 1.5S8 21.33 8 20.5v-5c0-.83.67-1.5 1.5-1.5z"></path>
+                                <path d="M3.5 14H5v1.5c0 .83-.67 1.5-1.5 1.5S2 16.33 2 15.5 2.67 14 3.5 14z"></path>
+                                <path d="M14 14.5c0-.83.67-1.5 1.5-1.5h5c.83 0 1.5.67 1.5 1.5s-.67 1.5-1.5 1.5h-5c-.83 0-1.5-.67-1.5-1.5z"></path>
+                                <path d="M15.5 19H14v1.5c0 .83.67 1.5 1.5 1.5s1.5-.67 1.5-1.5-.67-1.5-1.5-1.5z"></path>
+                                <path d="M10 9.5C10 8.67 9.33 8 8.5 8h-5C2.67 8 2 8.67 2 9.5S2.67 11 3.5 11h5c.83 0 1.5-.67 1.5-1.5z"></path>
+                                <path d="M8.5 5H10V3.5C10 2.67 9.33 2 8.5 2S7 2.67 7 3.5 7.67 5 8.5 5z"></path>
+                            </svg>
+                            Slack
+                        </label>
+                        <label class="checkbox-label">
+                            <input type="checkbox" name="notify_webhook" value="true">
+                            <span class="checkbox-custom"></span>
+                            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                                <path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path>
+                                <path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path>
+                            </svg>
+                            Webhook
+                        </label>
+                        <label class="checkbox-label">
+                            <input type="checkbox" name="notify_sms" value="true">
+                            <span class="checkbox-custom"></span>
+                            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                                <rect x="5" y="2" width="14" height="20" rx="2" ry="2"></rect>
+                                <line x1="12" y1="18" x2="12.01" y2="18"></line>
+                            </svg>
+                            SMS
+                        </label>
+                    </div>
+                </div>
+
+                <div class="form-section">
+                    <div class="form-group inline">
+                        <label class="toggle-label">
+                            <input type="checkbox" name="enabled" value="true" checked>
+                            <span class="toggle-switch"></span>
+                            <span>Enable this alert rule</span>
+                        </label>
+                    </div>
+                </div>
+            </div>
+            <div class="modal-footer">
+                <button type="button" class="btn secondary" onclick="closeCreateAlertModal()">Cancel</button>
+                <button type="submit" class="btn primary">Create Alert Rule</button>
+            </div>
+        </form>
+    </div>
+</div>
+
+<!-- Alert Detail Modal -->
+<div class="modal-overlay" id="alert-detail-modal">
+    <div class="modal">
+        <div class="modal-header">
+            <h3 id="alert-detail-title">Alert Details</h3>
+            <button class="close-btn" onclick="closeAlertDetailModal()">
+                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                    <line x1="18" y1="6" x2="6" y2="18"></line>
+                    <line x1="6" y1="6" x2="18" y2="18"></line>
+                </svg>
+            </button>
+        </div>
+        <div class="modal-body" id="alert-detail-content">
+            <!-- Alert details loaded here -->
+        </div>
+        <div class="modal-footer" id="alert-detail-actions">
+            <!-- Actions loaded dynamically -->
+        </div>
+    </div>
+</div>
+
+<style>
+    .alerts-container {
+        display: flex;
+        flex-direction: column;
+        gap: 1rem;
+    }
+
+    /* Header */
+    .alerts-header {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        flex-wrap: wrap;
+        gap: 1rem;
+    }
+
+    .header-info h2 {
+        display: flex;
+        align-items: center;
+        gap: 0.5rem;
+        font-size: 1.25rem;
+        font-weight: 600;
+        color: var(--text);
+        margin-bottom: 0.5rem;
+    }
+
+    .header-info h2 svg {
+        color: var(--primary);
+    }
+
+    .alert-summary {
+        display: flex;
+        gap: 1rem;
+    }
+
+    .summary-item {
+        font-size: 0.75rem;
+        font-weight: 500;
+        padding: 0.25rem 0.5rem;
+        border-radius: 4px;
+    }
+
+    .summary-item.critical {
+        background: rgba(239, 68, 68, 0.1);
+        color: var(--error);
+    }
+
+    .summary-item.warning {
+        background: rgba(245, 158, 11, 0.1);
+        color: var(--warning);
+    }
+
+    .summary-item.info {
+        background: var(--primary-light);
+        color: var(--primary);
+    }
+
+    .header-actions {
+        display: flex;
+        gap: 0.5rem;
+    }
+
+    .action-btn {
+        display: flex;
+        align-items: center;
+        gap: 0.375rem;
+        padding: 0.5rem 0.875rem;
+        background: var(--primary);
+        color: white;
+        border: none;
+        border-radius: 6px;
+        font-size: 0.8125rem;
+        font-weight: 500;
+        cursor: pointer;
+        transition: all 0.2s ease;
+    }
+
+    .action-btn:hover {
+        background: var(--primary-hover);
+    }
+
+    .action-btn.secondary {
+        background: var(--surface);
+        color: var(--text);
+        border: 1px solid var(--border);
+    }
+
+    .action-btn.secondary:hover {
+        background: var(--surface-hover);
+        border-color: var(--primary);
+    }
+
+    .action-btn.small {
+        padding: 0.375rem 0.625rem;
+        font-size: 0.75rem;
+    }
+
+    /* Tabs */
+    .alerts-tabs {
+        display: flex;
+        gap: 0.25rem;
+        border-bottom: 1px solid var(--border);
+        padding-bottom: 0;
+    }
+
+    .tab-btn {
+        display: flex;
+        align-items: center;
+        gap: 0.5rem;
+        padding: 0.75rem 1rem;
+        background: transparent;
+        border: none;
+        color: var(--text-secondary);
+        font-size: 0.875rem;
+        font-weight: 500;
+        cursor: pointer;
+        border-bottom: 2px solid transparent;
+        margin-bottom: -1px;
+        transition: all 0.2s ease;
+    }
+
+    .tab-btn:hover {
+        color: var(--text);
+        background: var(--surface-hover);
+    }
+
+    .tab-btn.active {
+        color: var(--primary);
+        border-bottom-color: var(--primary);
+    }
+
+    .tab-badge {
+        background: var(--border);
+        color: var(--text-secondary);
+        font-size: 0.6875rem;
+        font-weight: 600;
+        padding: 0.125rem 0.375rem;
+        border-radius: 10px;
+        min-width: 18px;
+        text-align: center;
+    }
+
+    .tab-btn.active .tab-badge {
+        background: var(--primary-light);
+        color: var(--primary);
+    }
+
+    /* Tab Panels */
+    .tab-panel {
+        display: none;
+    }
+
+    .tab-panel.active {
+        display: block;
+    }
+
+    .panel-toolbar {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 1rem 0;
+        gap: 1rem;
+        flex-wrap: wrap;
+    }
+
+    .filter-group {
+        display: flex;
+        gap: 0.5rem;
+    }
+
+    .filter-group select {
+        background: var(--surface);
+        border: 1px solid var(--border);
+        color: var(--text);
+        padding: 0.5rem 0.75rem;
+        border-radius: 6px;
+        font-size: 0.8125rem;
+        cursor: pointer;
+    }
+
+    .filter-group select:focus {
+        outline: none;
+        border-color: var(--primary);
+    }
+
+    .search-box {
+        display: flex;
+        align-items: center;
+        gap: 0.5rem;
+        background: var(--surface);
+        border: 1px solid var(--border);
+        border-radius: 6px;
+        padding: 0.5rem 0.75rem;
+    }
+
+    .search-box svg {
+        color: var(--text-secondary);
+        flex-shrink: 0;
+    }
+
+    .search-box input {
+        background: transparent;
+        border: none;
+        color: var(--text);
+        font-size: 0.8125rem;
+        width: 200px;
+        outline: none;
+    }
+
+    .search-box input::placeholder {
+        color: var(--text-secondary);
+    }
+
+    /* Alerts List */
+    .alerts-list {
+        display: flex;
+        flex-direction: column;
+        gap: 0.75rem;
+    }
+
+    .alert-item {
+        display: flex;
+        align-items: flex-start;
+        gap: 1rem;
+        padding: 1rem;
+        background: var(--surface);
+        border: 1px solid var(--border);
+        border-radius: 10px;
+        transition: all 0.2s ease;
+        cursor: pointer;
+    }
+
+    .alert-item:hover {
+        border-color: var(--primary);
+        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+    }
+
+    .alert-item.critical {
+        border-left: 3px solid var(--error);
+    }
+
+    .alert-item.warning {
+        border-left: 3px solid var(--warning);
+    }
+
+    .alert-item.info {
+        border-left: 3px solid var(--primary);
+    }
+
+    .alert-severity {
+        width: 36px;
+        height: 36px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        border-radius: 8px;
+        flex-shrink: 0;
+    }
+
+    .alert-item.critical .alert-severity {
+        background: rgba(239, 68, 68, 0.1);
+        color: var(--error);
+    }
+
+    .alert-item.warning .alert-severity {
+        background: rgba(245, 158, 11, 0.1);
+        color: var(--warning);
+    }
+
+    .alert-item.info .alert-severity {
+        background: var(--primary-light);
+        color: var(--primary);
+    }
+
+    .alert-content {
+        flex: 1;
+        min-width: 0;
+    }
+
+    .alert-title {
+        font-size: 0.9375rem;
+        font-weight: 600;
+        color: var(--text);
+        margin-bottom: 0.25rem;
+    }
+
+    .alert-message {
+        font-size: 0.8125rem;
+        color: var(--text-secondary);
+        margin-bottom: 0.5rem;
+        line-height: 1.4;
+    }
+
+    .alert-meta {
+        display: flex;
+        gap: 1rem;
+        flex-wrap: wrap;
+    }
+
+    .alert-meta span {
+        font-size: 0.75rem;
+        color: var(--text-secondary);
+        display: flex;
+        align-items: center;
+        gap: 0.25rem;
+    }
+
+    .alert-meta svg {
+        width: 12px;
+        height: 12px;
+    }
+
+    .alert-actions {
+        display: flex;
+        gap: 0.5rem;
+        flex-shrink: 0;
+    }
+
+    .alert-action-btn {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 32px;
+        height: 32px;
+        background: transparent;
+        border: 1px solid var(--border);
+        border-radius: 6px;
+        color: var(--text-secondary);
+        cursor: pointer;
+        transition: all 0.2s ease;
+    }
+
+    .alert-action-btn:hover {
+        background: var(--surface-hover);
+        color: var(--primary);
+        border-color: var(--primary);
+    }
+
+    .alert-placeholder {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        padding: 4rem;
+        text-align: center;
+        color: var(--text-secondary);
+    }
+
+    .alert-placeholder svg {
+        margin-bottom: 1rem;
+        color: var(--success);
+        opacity: 0.7;
+    }
+
+    .alert-placeholder p {
+        font-size: 1rem;
+        color: var(--text);
+        margin-bottom: 0.25rem;
+    }
+
+    .alert-placeholder span {
+        font-size: 0.8125rem;
+    }
+
+    /* Rules Grid */
+    .rules-grid {
+        display: grid;
+        grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
+        gap: 1rem;
+    }
+
+    .rule-card {
+        background: var(--surface);
+        border: 1px solid var(--border);
+        border-radius: 10px;
+        overflow: hidden;
+        transition: all 0.2s ease;
+    }
+
+    .rule-card:hover {
+        border-color: var(--primary);
+        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+    }
+
+    .rule-card.disabled {
+        opacity: 0.6;
+    }
+
+    .rule-header {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 1rem;
+        border-bottom: 1px solid var(--border);
+    }
+
+    .rule-status {
+        width: 8px;
+        height: 8px;
+        border-radius: 50%;
+        background: var(--success);
+    }
+
+    .rule-card.disabled .rule-status {
+        background: var(--text-secondary);
+    }
+
+    .rule-toggle {
+        position: relative;
+        width: 36px;
+        height: 20px;
+    }
+
+    .rule-toggle input {
+        opacity: 0;
+        width: 0;
+        height: 0;
+    }
+
+    .rule-toggle .toggle-slider {
+        position: absolute;
+        cursor: pointer;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        background: var(--border);
+        border-radius: 20px;
+        transition: 0.3s;
+    }
+
+    .rule-toggle .toggle-slider:before {
+        position: absolute;
+        content: "";
+        height: 16px;
+        width: 16px;
+        left: 2px;
+        bottom: 2px;
+        background: white;
+        border-radius: 50%;
+        transition: 0.3s;
+    }
+
+    .rule-toggle input:checked + .toggle-slider {
+        background: var(--primary);
+    }
+
+    .rule-toggle input:checked + .toggle-slider:before {
+        transform: translateX(16px);
+    }
+
+    .rule-body {
+        padding: 1rem;
+    }
+
+    .rule-name {
+        font-size: 0.9375rem;
+        font-weight: 600;
+        color: var(--text);
+        margin-bottom: 0.375rem;
+    }
+
+    .rule-condition {
+        font-size: 0.8125rem;
+        color: var(--text-secondary);
+        margin-bottom: 0.75rem;
+        font-family: 'SF Mono', 'Monaco', 'Inconsolata', monospace;
+        background: var(--bg);
+        padding: 0.375rem 0.5rem;
+        border-radius: 4px;
+    }
+
+    .rule-info {
+        display: flex;
+        gap: 1rem;
+        flex-wrap: wrap;
+    }
+
+    .rule-info span {
+        font-size: 0.75rem;
+        color: var(--text-secondary);
+    }
+
+    .rule-info .severity {
+        padding: 0.125rem 0.375rem;
+        border-radius: 4px;
+        font-weight: 500;
+    }
+
+    .rule-info .severity.critical {
+        background: rgba(239, 68, 68, 0.1);
+        color: var(--error);
+    }
+
+    .rule-info .severity.warning {
+        background: rgba(245, 158, 11, 0.1);
+        color: var(--warning);
+    }
+
+    .rule-info .severity.info {
+        background: var(--primary-light);
+        color: var(--primary);
+    }
+
+    .rule-actions {
+        display: flex;
+        border-top: 1px solid var(--border);
+    }
+
+    .rule-action {
+        flex: 1;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        padding: 0.75rem;
+        background: transparent;
+        border: none;
+        color: var(--text-secondary);
+        font-size: 0.75rem;
+        cursor: pointer;
+        transition: all 0.2s ease;
+    }
+
+    .rule-action:hover {
+        background: var(--surface-hover);
+        color: var(--primary);
+    }
+
+    .rule-action:not(:last-child) {
+        border-right: 1px solid var(--border);
+    }
+
+    .rule-action svg {
+        width: 14px;
+        height: 14px;
+        margin-right: 0.375rem;
+    }
+
+    /* Skeleton */
+    .rule-card.skeleton {
+        min-height: 150px;
+        padding: 1rem;
+    }
+
+    .skeleton-line {
+        height: 16px;
+        background: linear-gradient(90deg, var(--border) 25%, var(--surface-hover) 50%, var(--border) 75%);
+        background-size: 200% 100%;
+        animation: shimmer 1.5s infinite;
+        border-radius: 4px;
+        margin-bottom: 0.75rem;
+    }
+
+    .skeleton-line.short {
+        width: 60%;
+    }
+
+    @keyframes shimmer {
+        0% { background-position: 200% 0; }
+        100% { background-position: -200% 0; }
+    }
+
+    /* History List */
+    .history-list {
+        display: flex;
+        flex-direction: column;
+        gap: 0.5rem;
+    }
+
+    .history-item {
+        display: flex;
+        align-items: center;
+        gap: 1rem;
+        padding: 0.875rem 1rem;
+        background: var(--surface);
+        border: 1px solid var(--border);
+        border-radius: 8px;
+    }
+
+    .history-time {
+        font-size: 0.75rem;
+        color: var(--text-secondary);
+        font-family: 'SF Mono', 'Monaco', 'Inconsolata', monospace;
+        white-space: nowrap;
+    }
+
+    .history-severity {
+        width: 8px;
+        height: 8px;
+        border-radius: 50%;
+        flex-shrink: 0;
+    }
+
+    .history-severity.critical { background: var(--error); }
+    .history-severity.warning { background: var(--warning); }
+    .history-severity.info { background: var(--primary); }
+
+    .history-content {
+        flex: 1;
+        min-width: 0;
+    }
+
+    .history-name {
+        font-size: 0.875rem;
+        font-weight: 500;
+        color: var(--text);
+    }
+
+    .history-outcome {
+        font-size: 0.75rem;
+        padding: 0.125rem 0.375rem;
+        border-radius: 4px;
+        font-weight: 500;
+    }
+
+    .history-outcome.resolved {
+        background: rgba(34, 197, 94, 0.1);
+        color: var(--success);
+    }
+
+    .history-outcome.acknowledged {
+        background: var(--primary-light);
+        color: var(--primary);
+    }
+
+    .history-outcome.expired {
+        background: var(--bg);
+        color: var(--text-secondary);
+    }
+
+    .loading-state {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        padding: 3rem;
+        color: var(--text-secondary);
+    }
+
+    .spinner {
+        width: 32px;
+        height: 32px;
+        border: 3px solid var(--border);
+        border-top-color: var(--primary);
+        border-radius: 50%;
+        animation: spin 1s linear infinite;
+        margin-bottom: 0.75rem;
+    }
+
+    @keyframes spin {
+        to { transform: rotate(360deg); }
+    }
+
+    /* Modal */
+    .modal-overlay {
+        position: fixed;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        background: rgba(0, 0, 0, 0.6);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        z-index: 1000;
+        opacity: 0;
+        visibility: hidden;
+        transition: all 0.3s ease;
+    }
+
+    .modal-overlay.open {
+        opacity: 1;
+        visibility: visible;
+    }
+
+    .modal {
+        background: var(--surface);
+        border: 1px solid var(--border);
+        border-radius: 12px;
+        width: 100%;
+        max-width: 560px;
+        max-height: 90vh;
+        overflow: hidden;
+        transform: translateY(20px);
+        transition: transform 0.3s ease;
+    }
+
+    .modal-overlay.open .modal {
+        transform: translateY(0);
+    }
+
+    .modal-header {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 1rem 1.25rem;
+        border-bottom: 1px solid var(--border);
+    }
+
+    .modal-header h3 {
+        display: flex;
+        align-items: center;
+        gap: 0.5rem;
+        font-size: 1rem;
+        font-weight: 600;
+        color: var(--text);
+    }
+
+    .modal-header h3 svg {
+        color: var(--primary);
+    }
+
+    .close-btn {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 32px;
+        height: 32px;
+        background: transparent;
+        border: none;
+        color: var(--text-secondary);
+        cursor: pointer;
+        border-radius: 6px;
+        transition: all 0.2s ease;
+    }
+
+    .close-btn:hover {
+        background: var(--surface-hover);
+        color: var(--text);
+    }
+
+    .modal-body {
+        padding: 1.25rem;
+        overflow-y: auto;
+        max-height: calc(90vh - 140px);
+    }
+
+    .modal-footer {
+        display: flex;
+        justify-content: flex-end;
+        gap: 0.5rem;
+        padding: 1rem 1.25rem;
+        border-top: 1px solid var(--border);
+    }
+
+    .btn {
+        padding: 0.5rem 1rem;
+        border-radius: 6px;
+        font-size: 0.875rem;
+        font-weight: 500;
+        cursor: pointer;
+        transition: all 0.2s ease;
+    }
+
+    .btn.primary {
+        background: var(--primary);
+        color: white;
+        border: none;
+    }
+
+    .btn.primary:hover {
+        background: var(--primary-hover);
+    }
+
+    .btn.secondary {
+        background: transparent;
+        color: var(--text);
+        border: 1px solid var(--border);
+    }
+
+    .btn.secondary:hover {
+        background: var(--surface-hover);
+        border-color: var(--primary);
+    }
+
+    /* Form Styles */
+    .form-section {
+        margin-bottom: 1.5rem;
+    }
+
+    .form-section:last-child {
+        margin-bottom: 0;
+    }
+
+    .form-section h4 {
+        font-size: 0.8125rem;
+        font-weight: 600;
+        color: var(--text);
+        margin-bottom: 0.75rem;
+        padding-bottom: 0.5rem;
+        border-bottom: 1px solid var(--border);
+    }
+
+    .form-group {
+        margin-bottom: 1rem;
+    }
+
+    .form-group:last-child {
+        margin-bottom: 0;
+    }
+
+    .form-group label {
+        display: block;
+        font-size: 0.8125rem;
+        font-weight: 500;
+        color: var(--text);
+        margin-bottom: 0.375rem;
+    }
+
+    .form-group input,
+    .form-group select,
+    .form-group textarea {
+        width: 100%;
+        padding: 0.5rem 0.75rem;
+        background: var(--bg);
+        border: 1px solid var(--border);
+        border-radius: 6px;
+        color: var(--text);
+        font-size: 0.875rem;
+    }
+
+    .form-group input:focus,
+    .form-group select:focus,
+    .form-group textarea:focus {
+        outline: none;
+        border-color: var(--primary);
+    }
+
+    .form-group input::placeholder,
+    .form-group textarea::placeholder {
+        color: var(--text-secondary);
+    }
+
+    .form-row {
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        gap: 1rem;
+    }
+
+    .notification-channels {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 0.75rem;
+    }
+
+    .checkbox-label {
+        display: flex;
+        align-items: center;
+        gap: 0.5rem;
+        padding: 0.5rem 0.75rem;
+        background: var(--bg);
+        border: 1px solid var(--border);
+        border-radius: 6px;
+        cursor: pointer;
+        font-size: 0.8125rem;
+        color: var(--text);
+        transition: all 0.2s ease;
+    }
+
+    .checkbox-label:hover {
+        border-color: var(--primary);
+    }
+
+    .checkbox-label input {
+        display: none;
+    }
+
+    .checkbox-label input:checked + .checkbox-custom + svg {
+        color: var(--primary);
+    }
+
+    .checkbox-label input:checked ~ span:last-child {
+        color: var(--primary);
+    }
+
+    .checkbox-custom {
+        width: 16px;
+        height: 16px;
+        border: 2px solid var(--border);
+        border-radius: 4px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        transition: all 0.2s ease;
+    }
+
+    .checkbox-label input:checked + .checkbox-custom {
+        background: var(--primary);
+        border-color: var(--primary);
+    }
+
+    .checkbox-label input:checked + .checkbox-custom::after {
+        content: "";
+        width: 4px;
+        height: 8px;
+        border: solid white;
+        border-width: 0 2px 2px 0;
+        transform: rotate(45deg);
+    }
+
+    .toggle-label {
+        display: flex;
+        align-items: center;
+        gap: 0.75rem;
+        cursor: pointer;
+        font-size: 0.875rem;
+        color: var(--text);
+    }
+
+    .toggle-label input {
+        display: none;
+    }
+
+    .toggle-switch {
+        position: relative;
+        width: 44px;
+        height: 24px;
+        background: var(--border);
+        border-radius: 24px;
+        transition: background 0.3s ease;
+    }
+
+    .toggle-switch::before {
+        content: "";
+        position: absolute;
+        width: 20px;
+        height: 20px;
+        background: white;
+        border-radius: 50%;
+        top: 2px;
+        left: 2px;
+        transition: transform 0.3s ease;
+    }
+
+    .toggle-label input:checked + .toggle-switch {
+        background: var(--primary);
+    }
+
+    .toggle-label input:checked + .toggle-switch::before {
+        transform: translateX(20px);
+    }
+
+    /* Responsive */
+    @media (max-width: 768px) {
+        .alerts-header {
+            flex-direction: column;
+            align-items: stretch;
+        }
+
+        .header-actions {
+            flex-wrap: wrap;
+        }
+
+        .alerts-tabs {
+            overflow-x: auto;
+        }
+
+        .tab-btn {
+            white-space: nowrap;
+        }
+
+        .panel-toolbar {
+            flex-direction: column;
+            align-items: stretch;
+        }
+
+        .filter-group {
+            flex-wrap: wrap;
+        }
+
+        .search-box {
+            width: 100%;
+        }
+
+        .search-box input {
+            width: 100%;
+        }
+
+        .rules-grid {
+            grid-template-columns: 1fr;
+        }
+
+        .form-row {
+            grid-template-columns: 1fr;
+        }
+
+        .modal {
+            margin: 1rem;
+            max-height: calc(100vh - 2rem);
+        }
+    }
+</style>
+
+<script>
+    function switchTab(tab, btn) {
+        // Update tab buttons
+        document.querySelectorAll('.tab-btn').forEach(b => b.classList.remove('active'));
+        btn.classList.add('active');
+
+        // Update panels
+        document.querySelectorAll('.tab-panel').forEach(p => p.classList.remove('active'));
+        document.getElementById(`${tab}-panel`).classList.add('active');
+    }
+
+    function filterAlerts() {
+        const severity = document.getElementById('severity-filter').value;
+        const status = document.getElementById('status-filter').value;
+        const items = document.querySelectorAll('.alert-item');
+
+        items.forEach(item => {
+            let show = true;
+            if (severity !== 'all' && !item.classList.contains(severity)) {
+                show = false;
+            }
+            if (status !== 'all' && item.dataset.status !== status) {
+                show = false;
+            }
+            item.style.display = show ? '' : 'none';
+        });
+    }
+
+    function searchAlerts(query) {
+        const items = document.querySelectorAll('.alert-item');
+        const lowerQuery = query.toLowerCase();
+
+        items.forEach(item => {
+            const text = item.textContent.toLowerCase();
+            item.style.display = text.includes(lowerQuery) ? '' : 'none';
+        });
+    }
+
+    function filterRules() {
+        const status = document.getElementById('rule-status-filter').value;
+        const category = document.getElementById('rule-category-filter').value;
+        const cards = document.querySelectorAll('.rule-card:not(.skeleton)');
+
+        cards.forEach(card => {
+            let show = true;
+            if (status === 'enabled' && card.classList.contains('disabled')) {
+                show = false;
+            }
+            if (status === 'disabled' && !card.classList.contains('disabled')) {
+                show = false;
+            }
+            if (category !== 'all' && card.dataset.category !== category) {
+                show = false;
+            }
+            card.style.display = show ? '' : 'none';
+        });
+    }
+
+    function filterHistory() {
+        htmx.trigger('#history-list', 'refresh');
+    }
+
+    function openCreateAlertModal() {
+        document.getElementById('create-alert-modal').classList.add('open');
+    }
+
+    function closeCreateAlertModal() {
+        document.getElementById('create-alert-modal').classList.remove('open');
+        document.getElementById('create-alert-form').reset();
+    }
+
+    function openAlertDetailModal(alertId) {
+        const modal = document.getElementById('alert-detail-modal');
+        const content = document.getElementById('alert-detail-content');
+
+        // Load alert details
+        htmx.ajax('GET', `/api/monitoring/alerts/${alertId}`, {
+            target: content,
+            swap: 'innerHTML'
+        });
+
+        modal.classList.add('open');
+    }
+
+    function closeAlertDetailModal() {
+        document.getElementById('alert-detail-modal').classList.remove('open');
+    }
+
+    function acknowledgeAlert(alertId) {
+        htmx.ajax('POST', `/api/monitoring/alerts/${alertId}/acknowledge`, {
+            swap: 'none'
+        }).then(() => {
+            htmx.trigger('#alerts-list', 'refresh');
+        });
+    }
+
+    function acknowledgeAllAlerts() {
+        if (confirm('Are you sure you want to acknowledge all active alerts?')) {
+            htmx.ajax('POST', '/api/monitoring/alerts/acknowledge-all', {
+                swap: 'none'
+            }).then(() => {
+                htmx.trigger('#alerts-list', 'refresh');
+            });
+        }
+    }
+
+    function silenceAlert(alertId, duration) {
+        htmx.ajax('POST', `/api/monitoring/alerts/${alertId}/silence?duration=${duration}`, {
+            swap: 'none'
+        }).then(() => {
+            htmx.trigger('#alerts-list', 'refresh');
+        });
+    }
+
+    function toggleRule(ruleId, enabled) {
+        htmx.ajax('PATCH', `/api/monitoring/alerts/rules/${ruleId}`, {
+            values: { enabled: enabled },
+            swap: 'none'
+        }).then(() => {
+            htmx.trigger('#rules-grid', 'refresh');
+        });
+    }
+
+    function editRule(ruleId) {
+        // Load rule into form and open modal
+        htmx.ajax('GET', `/api/monitoring/alerts/rules/${ruleId}`, {
+            target: '#create-alert-form',
+            swap: 'outerHTML'
+        }).then(() => {
+            openCreateAlertModal();
+        });
+    }
+
+    function deleteRule(ruleId) {
+        if (confirm('Are you sure you want to delete this alert rule?')) {
+            htmx.ajax('DELETE', `/api/monitoring/alerts/rules/${ruleId}`, {
+                swap: 'none'
+            }).then(() => {
+                htmx.trigger('#rules-grid', 'refresh');
+            });
+        }
+    }
+
+    function exportHistory() {
+        const timeFilter = document.getElementById('history-time-filter').value;
+        window.open(`/api/monitoring/alerts/history/export?range=${timeFilter}`, '_blank');
+    }
+
+    // Close modals on escape key
+    document.addEventListener('keydown', function(e) {
+        if (e.key === 'Escape') {
+            closeCreateAlertModal();
+            closeAlertDetailModal();
+        }
+    });
+
+    // Close modals when clicking overlay
+    document.querySelectorAll('.modal-overlay').forEach(overlay => {
+        overlay.addEventListener('click', function(e) {
+            if (e.target === this) {
+                this.classList.remove('open');
+            }
+        });
+    });
+
+    // Update counts from HTMX responses
+    document.body.addEventListener('htmx:afterSwap', function(evt) {
+        if (evt.target.id === 'alerts-list') {
+            const count = evt.target.querySelectorAll('.alert-item').length;
+            document.getElementById('active-count').textContent = count;
+        }
+        if (evt.target.id === 'rules-grid') {
+            const count = evt.target.querySelectorAll('.rule-card:not(.skeleton)').length;
+            document.getElementById('rules-count').textContent = count;
+        }
+    });
+</script>
diff --git a/ui/suite/monitoring/health.html b/ui/suite/monitoring/health.html
new file mode 100644
index 0000000..47dd67c
--- /dev/null
+++ b/ui/suite/monitoring/health.html
@@ -0,0 +1,994 @@
+<div class="health-container">
+    <!-- Health Overview -->
+    <div class="health-overview"
+         hx-get="/api/monitoring/health/overview"
+         hx-trigger="load, every 10s"
+         hx-swap="innerHTML">
+        <div class="health-status healthy">
+            <div class="status-icon">
+                <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                    <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
+                    <polyline points="22 4 12 14.01 9 11.01"></polyline>
+                </svg>
+            </div>
+            <div class="status-info">
+                <h2>All Systems Operational</h2>
+                <p>All health checks are passing</p>
+            </div>
+            <div class="status-badge healthy">Healthy</div>
+        </div>
+    </div>
+
+    <!-- Uptime Stats -->
+    <div class="uptime-stats">
+        <div class="stat-card"
+             hx-get="/api/monitoring/health/uptime"
+             hx-trigger="load, every 60s"
+             hx-swap="innerHTML">
+            <div class="stat-icon">
+                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                    <circle cx="12" cy="12" r="10"></circle>
+                    <polyline points="12 6 12 12 16 14"></polyline>
+                </svg>
+            </div>
+            <div class="stat-content">
+                <span class="stat-value">--</span>
+                <span class="stat-label">Uptime</span>
+            </div>
+        </div>
+        <div class="stat-card"
+             hx-get="/api/monitoring/health/uptime-percent"
+             hx-trigger="load, every 60s"
+             hx-swap="innerHTML">
+            <div class="stat-icon success">
+                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                    <polyline points="22 12 18 12 15 21 9 3 6 12 2 12"></polyline>
+                </svg>
+            </div>
+            <div class="stat-content">
+                <span class="stat-value">--%</span>
+                <span class="stat-label">Uptime (30 days)</span>
+            </div>
+        </div>
+        <div class="stat-card"
+             hx-get="/api/monitoring/health/last-incident"
+             hx-trigger="load, every 60s"
+             hx-swap="innerHTML">
+            <div class="stat-icon warning">
+                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                    <path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"></path>
+                    <line x1="12" y1="9" x2="12" y2="13"></line>
+                    <line x1="12" y1="17" x2="12.01" y2="17"></line>
+                </svg>
+            </div>
+            <div class="stat-content">
+                <span class="stat-value">--</span>
+                <span class="stat-label">Last Incident</span>
+            </div>
+        </div>
+        <div class="stat-card"
+             hx-get="/api/monitoring/health/response-time"
+             hx-trigger="load, every 30s"
+             hx-swap="innerHTML">
+            <div class="stat-icon info">
+                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                    <path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z"></path>
+                </svg>
+            </div>
+            <div class="stat-content">
+                <span class="stat-value">-- ms</span>
+                <span class="stat-label">Avg Response Time</span>
+            </div>
+        </div>
+    </div>
+
+    <!-- Health Checks Grid -->
+    <div class="health-section">
+        <div class="section-header">
+            <h3></h3>
+                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                    <path d="M22 12h-4l-3 9L9 3l-3 9H2"></path>
+                </svg>
+                Health Check Endpoints
+            </h3>
+            <div class="section-actions">
+                <button class="action-btn secondary" onclick="refreshAllChecks()">
+                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                        <polyline points="23 4 23 10 17 10"></polyline>
+                        <path d="M20.49 15a9 9 0 1 1-2.12-9.36L23 10"></path>
+                    </svg>
+                    Refresh All
+                </button>
+                <a href="/health" target="_blank" class="action-btn">
+                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                        <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path>
+                        <polyline points="15 3 21 3 21 9"></polyline>
+                        <line x1="10" y1="14" x2="21" y2="3"></line>
+                    </svg>
+                    View Raw
+                </a>
+            </div>
+        </div>
+
+        <div class="health-checks-grid" id="health-checks"
+             hx-get="/api/monitoring/health/checks"
+             hx-trigger="load, every 10s"
+             hx-swap="innerHTML">
+            <!-- Health checks loaded via HTMX -->
+            <div class="health-check-card">
+                <div class="check-header">
+                    <span class="check-status healthy"></span>
+                    <span class="check-name">Database</span>
+                    <span class="check-badge healthy">Healthy</span>
+                </div>
+                <div class="check-details">
+                    <div class="check-row">
+                        <span class="check-label">Response Time</span>
+                        <span class="check-value">-- ms</span>
+                    </div>
+                    <div class="check-row">
+                        <span class="check-label">Last Check</span>
+                        <span class="check-value">--</span>
+                    </div>
+                </div>
+            </div>
+            <div class="health-check-card">
+                <div class="check-header">
+                    <span class="check-status healthy"></span>
+                    <span class="check-name">Cache</span>
+                    <span class="check-badge healthy">Healthy</span>
+                </div>
+                <div class="check-details">
+                    <div class="check-row">
+                        <span class="check-label">Response Time</span>
+                        <span class="check-value">-- ms</span>
+                    </div>
+                    <div class="check-row">
+                        <span class="check-label">Last Check</span>
+                        <span class="check-value">--</span>
+                    </div>
+                </div>
+            </div>
+            <div class="health-check-card">
+                <div class="check-header">
+                    <span class="check-status healthy"></span>
+                    <span class="check-name">Message Queue</span>
+                    <span class="check-badge healthy">Healthy</span>
+                </div>
+                <div class="check-details">
+                    <div class="check-row">
+                        <span class="check-label">Response Time</span>
+                        <span class="check-value">-- ms</span>
+                    </div>
+                    <div class="check-row">
+                        <span class="check-label">Last Check</span>
+                        <span class="check-value">--</span>
+                    </div>
+                </div>
+            </div>
+            <div class="health-check-card">
+                <div class="check-header">
+                    <span class="check-status healthy"></span>
+                    <span class="check-name">Storage</span>
+                    <span class="check-badge healthy">Healthy</span>
+                </div>
+                <div class="check-details">
+                    <div class="check-row">
+                        <span class="check-label">Response Time</span>
+                        <span class="check-value">-- ms</span>
+                    </div>
+                    <div class="check-row">
+                        <span class="check-label">Last Check</span>
+                        <span class="check-value">--</span>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- Dependencies Section -->
+    <div class="health-section">
+        <div class="section-header">
+            <h3>
+                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                    <polyline points="16 18 22 12 16 6"></polyline>
+                    <polyline points="8 6 2 12 8 18"></polyline>
+                </svg>
+                External Dependencies
+            </h3>
+        </div>
+
+        <div class="dependencies-list" id="dependencies"
+             hx-get="/api/monitoring/health/dependencies"
+             hx-trigger="load, every 30s"
+             hx-swap="innerHTML">
+            <div class="dependency-row">
+                <div class="dependency-info">
+                    <span class="dependency-status healthy"></span>
+                    <span class="dependency-name">OpenAI API</span>
+                    <span class="dependency-url">api.openai.com</span>
+                </div>
+                <div class="dependency-stats">
+                    <span class="stat">
+                        <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                            <circle cx="12" cy="12" r="10"></circle>
+                            <polyline points="12 6 12 12 16 14"></polyline>
+                        </svg>
+                        -- ms
+                    </span>
+                    <span class="dependency-badge healthy">Online</span>
+                </div>
+            </div>
+            <div class="dependency-row">
+                <div class="dependency-info">
+                    <span class="dependency-status healthy"></span>
+                    <span class="dependency-name">WhatsApp Business API</span>
+                    <span class="dependency-url">graph.facebook.com</span>
+                </div>
+                <div class="dependency-stats">
+                    <span class="stat">
+                        <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                            <circle cx="12" cy="12" r="10"></circle>
+                            <polyline points="12 6 12 12 16 14"></polyline>
+                        </svg>
+                        -- ms
+                    </span>
+                    <span class="dependency-badge healthy">Online</span>
+                </div>
+            </div>
+            <div class="dependency-row">
+                <div class="dependency-info">
+                    <span class="dependency-status healthy"></span>
+                    <span class="dependency-name">Email Service</span>
+                    <span class="dependency-url">smtp.sendgrid.net</span>
+                </div>
+                <div class="dependency-stats">
+                    <span class="stat">
+                        <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                            <circle cx="12" cy="12" r="10"></circle>
+                            <polyline points="12 6 12 12 16 14"></polyline>
+                        </svg>
+                        -- ms
+                    </span>
+                    <span class="dependency-badge healthy">Online</span>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- Uptime History -->
+    <div class="health-section">
+        <div class="section-header">
+            <h3>
+                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                    <rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect>
+                    <line x1="16" y1="2" x2="16" y2="6"></line>
+                    <line x1="8" y1="2" x2="8" y2="6"></line>
+                    <line x1="3" y1="10" x2="21" y2="10"></line>
+                </svg>
+                Uptime History (Last 90 Days)
+            </h3>
+            <div class="uptime-legend">
+                <span class="legend-item"><span class="legend-dot healthy"></span>Operational</span>
+                <span class="legend-item"><span class="legend-dot degraded"></span>Degraded</span>
+                <span class="legend-item"><span class="legend-dot outage"></span>Outage</span>
+            </div>
+        </div>
+
+        <div class="uptime-chart" id="uptime-chart"
+             hx-get="/api/monitoring/health/uptime-history"
+             hx-trigger="load"
+             hx-swap="innerHTML">
+            <div class="uptime-bars">
+                <!-- 90 days of uptime bars -->
+                <div class="uptime-bar healthy" title="Jan 15 - 100%"></div>
+                <div class="uptime-bar healthy" title="Jan 14 - 100%"></div>
+                <div class="uptime-bar healthy" title="Jan 13 - 100%"></div>
+                <div class="uptime-bar healthy" title="Jan 12 - 100%"></div>
+                <div class="uptime-bar healthy" title="Jan 11 - 100%"></div>
+                <div class="uptime-bar healthy" title="Jan 10 - 100%"></div>
+                <div class="uptime-bar degraded" title="Jan 9 - 99.5%"></div>
+                <div class="uptime-bar healthy" title="Jan 8 - 100%"></div>
+                <div class="uptime-bar healthy" title="Jan 7 - 100%"></div>
+                <div class="uptime-bar healthy" title="Jan 6 - 100%"></div>
+                <div class="uptime-bar healthy" title="Jan 5 - 100%"></div>
+                <div class="uptime-bar healthy" title="Jan 4 - 100%"></div>
+                <div class="uptime-bar healthy" title="Jan 3 - 100%"></div>
+                <div class="uptime-bar healthy" title="Jan 2 - 100%"></div>
+                <div class="uptime-bar healthy" title="Jan 1 - 100%"></div>
+                <!-- ... more bars ... -->
+            </div>
+            <div class="uptime-labels">
+                <span>90 days ago</span>
+                <span>Today</span>
+            </div>
+        </div>
+    </div>
+
+    <!-- Recent Incidents -->
+    <div class="health-section">
+        <div class="section-header">
+            <h3>
+                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                    <path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"></path>
+                    <line x1="12" y1="9" x2="12" y2="13"></line>
+                    <line x1="12" y1="17" x2="12.01" y2="17"></line>
+                </svg>
+                Recent Incidents
+            </h3>
+            <a href="#" class="view-all-link">View All</a>
+        </div>
+
+        <div class="incidents-list" id="incidents"
+             hx-get="/api/monitoring/health/incidents"
+             hx-trigger="load"
+             hx-swap="innerHTML">
+            <div class="incident-placeholder">
+                <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
+                    <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
+                    <polyline points="22 4 12 14.01 9 11.01"></polyline>
+                </svg>
+                <p>No recent incidents</p>
+                <span>System</span> has been stable</span>
+            </div>
+        </div>
+    </div>
+</div>
+
+<style>
+    .health-container {
+        display: flex;
+        flex-direction: column;
+        gap: 1.5rem;
+    }
+
+    /* Health Overview */
+    .health-overview {
+        background: var(--surface);
+        border: 1px solid var(--border);
+        border-radius: 12px;
+        padding: 1.5rem;
+    }
+
+    .health-status {
+        display: flex;
+        align-items: center;
+        gap: 1.25rem;
+    }
+
+    .status-icon {
+        width: 64px;
+        height: 64px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        border-radius: 16px;
+        flex-shrink: 0;
+    }
+
+    .health-status.healthy .status-icon {
+        background: rgba(34, 197, 94, 0.1);
+        color: var(--success);
+    }
+
+    .health-status.degraded .status-icon {
+        background: rgba(245, 158, 11, 0.1);
+        color: var(--warning);
+    }
+
+    .health-status.unhealthy .status-icon {
+        background: rgba(239, 68, 68, 0.1);
+        color: var(--error);
+    }
+
+    .status-info {
+        flex: 1;
+    }
+
+    .status-info h2 {
+        font-size: 1.25rem;
+        font-weight: 600;
+        color: var(--text);
+        margin-bottom: 0.25rem;
+    }
+
+    .status-info p {
+        font-size: 0.875rem;
+        color: var(--text-secondary);
+    }
+
+    .status-badge {
+        padding: 0.5rem 1rem;
+        border-radius: 20px;
+        font-size: 0.875rem;
+        font-weight: 600;
+    }
+
+    .status-badge.healthy {
+        background: rgba(34, 197, 94, 0.1);
+        color: var(--success);
+    }
+
+    .status-badge.degraded {
+        background: rgba(245, 158, 11, 0.1);
+        color: var(--warning);
+    }
+
+    .status-badge.unhealthy {
+        background: rgba(239, 68, 68, 0.1);
+        color: var(--error);
+    }
+
+    /* Uptime Stats */
+    .uptime-stats {
+        display: grid;
+        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+        gap: 1rem;
+    }
+
+    .stat-card {
+        display: flex;
+        align-items: center;
+        gap: 1rem;
+        padding: 1.25rem;
+        background: var(--surface);
+        border: 1px solid var(--border);
+        border-radius: 10px;
+    }
+
+    .stat-icon {
+        width: 44px;
+        height: 44px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        background: var(--primary-light);
+        color: var(--primary);
+        border-radius: 10px;
+        flex-shrink: 0;
+    }
+
+    .stat-icon.success {
+        background: rgba(34, 197, 94, 0.1);
+        color: var(--success);
+    }
+
+    .stat-icon.warning {
+        background: rgba(245, 158, 11, 0.1);
+        color: var(--warning);
+    }
+
+    .stat-icon.info {
+        background: rgba(139, 92, 246, 0.1);
+        color: #8b5cf6;
+    }
+
+    .stat-content {
+        display: flex;
+        flex-direction: column;
+    }
+
+    .stat-value {
+        font-size: 1.375rem;
+        font-weight: 700;
+        color: var(--text);
+        font-family: 'SF Mono', 'Monaco', 'Inconsolata', monospace;
+    }
+
+    .stat-label {
+        font-size: 0.75rem;
+        color: var(--text-secondary);
+    }
+
+    /* Health Section */
+    .health-section {
+        background: var(--surface);
+        border: 1px solid var(--border);
+        border-radius: 12px;
+        overflow: hidden;
+    }
+
+    .section-header {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 1rem 1.25rem;
+        border-bottom: 1px solid var(--border);
+        flex-wrap: wrap;
+        gap: 0.75rem;
+    }
+
+    .section-header h3 {
+        display: flex;
+        align-items: center;
+        gap: 0.5rem;
+        font-size: 0.9375rem;
+        font-weight: 600;
+        color: var(--text);
+    }
+
+    .section-header h3 svg {
+        color: var(--primary);
+    }
+
+    .section-actions {
+        display: flex;
+        gap: 0.5rem;
+    }
+
+    .action-btn {
+        display: flex;
+        align-items: center;
+        gap: 0.375rem;
+        padding: 0.375rem 0.75rem;
+        background: var(--primary);
+        color: white;
+        border: none;
+        border-radius: 6px;
+        font-size: 0.75rem;
+        font-weight: 500;
+        cursor: pointer;
+        text-decoration: none;
+        transition: all 0.2s ease;
+    }
+
+    .action-btn:hover {
+        background: var(--primary-hover);
+    }
+
+    .action-btn.secondary {
+        background: var(--bg);
+        color: var(--text);
+        border: 1px solid var(--border);
+    }
+
+    .action-btn.secondary:hover {
+        background: var(--surface-hover);
+        border-color: var(--primary);
+    }
+
+    .view-all-link {
+        font-size: 0.8125rem;
+        color: var(--primary);
+        text-decoration: none;
+    }
+
+    .view-all-link:hover {
+        text-decoration: underline;
+    }
+
+    /* Health Checks Grid */
+    .health-checks-grid {
+        display: grid;
+        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+        gap: 1rem;
+        padding: 1.25rem;
+    }
+
+    .health-check-card {
+        background: var(--bg);
+        border: 1px solid var(--border);
+        border-radius: 8px;
+        overflow: hidden;
+    }
+
+    .check-header {
+        display: flex;
+        align-items: center;
+        gap: 0.5rem;
+        padding: 0.875rem 1rem;
+        border-bottom: 1px solid var(--border);
+    }
+
+    .check-status {
+        width: 10px;
+        height: 10px;
+        border-radius: 50%;
+        flex-shrink: 0;
+    }
+
+    .check-status.healthy {
+        background: var(--success);
+        box-shadow: 0 0 8px var(--success);
+    }
+
+    .check-status.degraded {
+        background: var(--warning);
+        box-shadow: 0 0 8px var(--warning);
+    }
+
+    .check-status.unhealthy {
+        background: var(--error);
+        box-shadow: 0 0 8px var(--error);
+    }
+
+    .check-name {
+        flex: 1;
+        font-size: 0.9375rem;
+        font-weight: 600;
+        color: var(--text);
+    }
+
+    .check-badge {
+        padding: 0.125rem 0.5rem;
+        border-radius: 4px;
+        font-size: 0.6875rem;
+        font-weight: 600;
+        text-transform: uppercase;
+    }
+
+    .check-badge.healthy {
+        background: rgba(34, 197, 94, 0.1);
+        color: var(--success);
+    }
+
+    .check-badge.degraded {
+        background: rgba(245, 158, 11, 0.1);
+        color: var(--warning);
+    }
+
+    .check-badge.unhealthy {
+        background: rgba(239, 68, 68, 0.1);
+        color: var(--error);
+    }
+
+    .check-details {
+        padding: 0.75rem 1rem;
+    }
+
+    .check-row {
+        display: flex;
+        justify-content: space-between;
+        padding: 0.375rem 0;
+    }
+
+    .check-row:not(:last-child) {
+        border-bottom: 1px solid var(--border);
+    }
+
+    .check-label {
+        font-size: 0.8125rem;
+        color: var(--text-secondary);
+    }
+
+    .check-value {
+        font-size: 0.8125rem;
+        color: var(--text);
+        font-family: 'SF Mono', 'Monaco', 'Inconsolata', monospace;
+    }
+
+    /* Dependencies */
+    .dependencies-list {
+        padding: 0.5rem 0;
+    }
+
+    .dependency-row {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 0.875rem 1.25rem;
+        border-bottom: 1px solid var(--border);
+    }
+
+    .dependency-row:last-child {
+        border-bottom: none;
+    }
+
+    .dependency-info {
+        display: flex;
+        align-items: center;
+        gap: 0.75rem;
+    }
+
+    .dependency-status {
+        width: 8px;
+        height: 8px;
+        border-radius: 50%;
+        flex-shrink: 0;
+    }
+
+    .dependency-status.healthy { background: var(--success); }
+    .dependency-status.degraded { background: var(--warning); }
+    .dependency-status.unhealthy { background: var(--error); }
+
+    .dependency-name {
+        font-size: 0.9375rem;
+        font-weight: 500;
+        color: var(--text);
+    }
+
+    .dependency-url {
+        font-size: 0.75rem;
+        color: var(--text-secondary);
+        font-family: 'SF Mono', 'Monaco', 'Inconsolata', monospace;
+    }
+
+    .dependency-stats {
+        display: flex;
+        align-items: center;
+        gap: 1rem;
+    }
+
+    .dependency-stats .stat {
+        display: flex;
+        align-items: center;
+        gap: 0.25rem;
+        font-size: 0.8125rem;
+        color: var(--text-secondary);
+        font-family: 'SF Mono', 'Monaco', 'Inconsolata', monospace;
+    }
+
+    .dependency-stats .stat svg {
+        color: var(--primary);
+    }
+
+    .dependency-badge {
+        padding: 0.125rem 0.5rem;
+        border-radius: 4px;
+        font-size: 0.6875rem;
+        font-weight: 600;
+    }
+
+    .dependency-badge.healthy {
+        background: rgba(34, 197, 94, 0.1);
+        color: var(--success);
+    }
+
+    .dependency-badge.unhealthy {
+        background: rgba(239, 68, 68, 0.1);
+        color: var(--error);
+    }
+
+    /* Uptime Chart */
+    .uptime-legend {
+        display: flex;
+        gap: 1rem;
+    }
+
+    .legend-item {
+        display: flex;
+        align-items: center;
+        gap: 0.375rem;
+        font-size: 0.75rem;
+        color: var(--text-secondary);
+    }
+
+    .legend-dot {
+        width: 12px;
+        height: 12px;
+        border-radius: 2px;
+    }
+
+    .legend-dot.healthy { background: var(--success); }
+    .legend-dot.degraded { background: var(--warning); }
+    .legend-dot.outage { background: var(--error); }
+
+    .uptime-chart {
+        padding: 1.25rem;
+    }
+
+    .uptime-bars {
+        display: flex;
+        gap: 2px;
+        height: 32px;
+        margin-bottom: 0.5rem;
+    }
+
+    .uptime-bar {
+        flex: 1;
+        border-radius: 2px;
+        cursor: pointer;
+        transition: opacity 0.2s ease;
+    }
+
+    .uptime-bar:hover {
+        opacity: 0.8;
+    }
+
+    .uptime-bar.healthy { background: var(--success); }
+    .uptime-bar.degraded { background: var(--warning); }
+    .uptime-bar.outage { background: var(--error); }
+
+    .uptime-labels {
+        display: flex;
+        justify-content: space-between;
+        font-size: 0.6875rem;
+        color: var(--text-secondary);
+    }
+
+    /* Incidents */
+    .incidents-list {
+        padding: 1rem 1.25rem;
+    }
+
+    .incident-item {
+        display: flex;
+        align-items: flex-start;
+        gap: 1rem;
+        padding: 1rem;
+        background: var(--bg);
+        border: 1px solid var(--border);
+        border-radius: 8px;
+        margin-bottom: 0.75rem;
+    }
+
+    .incident-item:last-child {
+        margin-bottom: 0;
+    }
+
+    .incident-icon {
+        width: 36px;
+        height: 36px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        border-radius: 8px;
+        flex-shrink: 0;
+    }
+
+    .incident-item.resolved .incident-icon {
+        background: rgba(34, 197, 94, 0.1);
+        color: var(--success);
+    }
+
+    .incident-item.ongoing .incident-icon {
+        background: rgba(239, 68, 68, 0.1);
+        color: var(--error);
+    }
+
+    .incident-content {
+        flex: 1;
+    }
+
+    .incident-title {
+        font-size: 0.9375rem;
+        font-weight: 600;
+        color: var(--text);
+        margin-bottom: 0.25rem;
+    }
+
+    .incident-description {
+        font-size: 0.8125rem;
+        color: var(--text-secondary);
+        margin-bottom: 0.5rem;
+    }
+
+    .incident-meta {
+        display: flex;
+        gap: 1rem;
+        font-size: 0.75rem;
+        color: var(--text-secondary);
+    }
+
+    .incident-placeholder {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        padding: 2rem;
+        text-align: center;
+        color: var(--text-secondary);
+    }
+
+    .incident-placeholder svg {
+        margin-bottom: 0.75rem;
+        color: var(--success);
+        opacity: 0.6;
+    }
+
+    .incident-placeholder p {
+        font-size: 0.9375rem;
+        color: var(--text);
+        margin-bottom: 0.25rem;
+    }
+
+    .incident-placeholder span {
+        font-size: 0.8125rem;
+    }
+
+    /* Responsive */
+    @media (max-width: 768px) {
+        .health-status {
+            flex-direction: column;
+            text-align: center;
+        }
+
+        .uptime-stats {
+            grid-template-columns: repeat(2, 1fr);
+        }
+
+        .health-checks-grid {
+            grid-template-columns: 1fr;
+        }
+
+        .section-header {
+            flex-direction: column;
+            align-items: flex-start;
+        }
+
+        .dependency-row {
+            flex-direction: column;
+            align-items: flex-start;
+            gap: 0.5rem;
+        }
+
+        .dependency-stats {
+            width: 100%;
+            justify-content: space-between;
+        }
+
+        .uptime-legend {
+            flex-wrap: wrap;
+        }
+
+        .uptime-bars {
+            gap: 1px;
+        }
+    }
+
+    @media (max-width: 480px) {
+        .uptime-stats {
+            grid-template-columns: 1fr;
+        }
+    }
+</style>
+
+<script>
+    function refreshAllChecks() {
+        htmx.trigger('#health-checks', 'refresh');
+        htmx.trigger('#dependencies', 'refresh');
+        htmx.trigger('.health-overview', 'refresh');
+
+        // Visual feedback
+        const btn = event.currentTarget;
+        const originalText = btn.innerHTML;
+        btn.innerHTML = `
+            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="spin">
+                <polyline points="23 4 23 10 17 10"></polyline>
+                <path d="M20.49 15a9 9 0 1 1-2.12-9.36L23 10"></path>
+            </svg>
+            Refreshing...
+        `;
+        btn.disabled = true;
+
+        setTimeout(() => {
+            btn.innerHTML = originalText;
+            btn.disabled = false;
+        }, 1000);
+    }
+
+    // Add tooltip functionality for uptime bars
+    document.querySelectorAll('.uptime-bar').forEach(bar => {
+        bar.addEventListener('mouseenter', function(e) {
+            const tooltip = document.createElement('div');
+            tooltip.className = 'uptime-tooltip';
+            tooltip.textContent = this.title;
+            tooltip.style.cssText = `
+                position: fixed;
+                background: var(--surface);
+                border: 1px solid var(--border);
+                padding: 0.375rem 0.625rem;
+                border-radius: 4px;
+                font-size: 0.75rem;
+                color: var(--text);
+                pointer-events: none;
+                z-index: 1000;
+                box-shadow: 0 4px 12px rgba(0,0,0,0.15);
+            `;
+            document.body.appendChild(tooltip);
+
+            const rect = this.getBoundingClientRect();
+            tooltip.style.left = `${rect.left + rect.width/2 - tooltip.offsetWidth/2}px`;
+            tooltip.style.top = `${rect.top - tooltip.offsetHeight - 8}px`;
+
+            this._tooltip = tooltip;
+        });
+
+        bar.addEventListener('mouseleave', function() {
+            if (this._tooltip) {
+                this._tooltip.remove();
+                this._tooltip = null;
+            }
+        });
+    });
+</script>
diff --git a/ui/suite/monitoring/index.html b/ui/suite/monitoring/index.html
new file mode 100644
index 0000000..840831b
--- /dev/null
+++ b/ui/suite/monitoring/index.html
@@ -0,0 +1,783 @@
+<div class="monitoring-layout">
+    <!-- Sidebar Navigation -->
+    <aside class="monitoring-sidebar">
+        <div class="monitoring-header">
+            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                <circle cx="12" cy="12" r="10" opacity="0.3"></circle>
+                <circle cx="12" cy="12" r="6.5" opacity="0.6"></circle>
+                <circle cx="12" cy="12" r="2" fill="currentColor" stroke="none"></circle>
+                <line x1="12" y1="2" x2="12" y2="5"></line>
+                <line x1="12" y1="19" x2="12" y2="22"></line>
+                <line x1="2" y1="12" x2="5" y2="12"></line>
+                <line x1="19" y1="12" x2="22" y2="12"></line>
+            </svg>
+            <span>Monitoring</span>
+        </div>
+
+        <nav class="monitoring-nav">
+            <a href="#dashboard" class="nav-item active"
+               hx-get="/api/monitoring/dashboard"
+               hx-target="#monitoring-content"
+               hx-swap="innerHTML"
+               hx-push-url="false"
+               onclick="setActiveNav(this)">
+                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                    <rect x="3" y="3" width="7" height="9"></rect>
+                    <rect x="14" y="3" width="7" height="5"></rect>
+                    <rect x="14" y="12" width="7" height="9"></rect>
+                    <rect x="3" y="16" width="7" height="5"></rect>
+                </svg>
+                <span>Dashboard</span>
+            </a>
+            <a href="#services" class="nav-item"
+               hx-get="/api/monitoring/services"
+               hx-target="#monitoring-content"
+               hx-swap="innerHTML"
+               hx-push-url="false"
+               onclick="setActiveNav(this)">
+                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                    <rect x="2" y="2" width="20" height="8" rx="2" ry="2"></rect>
+                    <rect x="2" y="14" width="20" height="8" rx="2" ry="2"></rect>
+                    <line x1="6" y1="6" x2="6.01" y2="6"></line>
+                    <line x1="6" y1="18" x2="6.01" y2="18"></line>
+                </svg>
+                <span>Services</span>
+            </a>
+            <a href="#resources" class="nav-item"
+               hx-get="/api/monitoring/resources"
+               hx-target="#monitoring-content"
+               hx-swap="innerHTML"
+               hx-push-url="false"
+               onclick="setActiveNav(this)">
+                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                    <rect x="4" y="4" width="16" height="16" rx="2"></rect>
+                    <rect x="9" y="9" width="6" height="6"></rect>
+                    <line x1="9" y1="1" x2="9" y2="4"></line>
+                    <line x1="15" y1="1" x2="15" y2="4"></line>
+                    <line x1="9" y1="20" x2="9" y2="23"></line>
+                    <line x1="15" y1="20" x2="15" y2="23"></line>
+                    <line x1="20" y1="9" x2="23" y2="9"></line>
+                    <line x1="20" y1="14" x2="23" y2="14"></line>
+                    <line x1="1" y1="9" x2="4" y2="9"></line>
+                    <line x1="1" y1="14" x2="4" y2="14"></line>
+                </svg>
+                <span>Resources</span>
+            </a>
+            <a href="#logs" class="nav-item"
+               hx-get="/api/monitoring/logs"
+               hx-target="#monitoring-content"
+               hx-swap="innerHTML"
+               hx-push-url="false"
+               onclick="setActiveNav(this)">
+                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                    <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
+                    <polyline points="14 2 14 8 20 8"></polyline>
+                    <line x1="16" y1="13" x2="8" y2="13"></line>
+                    <line x1="16" y1="17" x2="8" y2="17"></line>
+                    <polyline points="10 9 9 9 8 9"></polyline>
+                </svg>
+                <span>Logs</span>
+            </a>
+            <a href="#metrics" class="nav-item"
+               hx-get="/api/monitoring/metrics"
+               hx-target="#monitoring-content"
+               hx-swap="innerHTML"
+               hx-push-url="false"
+               onclick="setActiveNav(this)">
+                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                    <line x1="18" y1="20" x2="18" y2="10"></line>
+                    <line x1="12" y1="20" x2="12" y2="4"></line>
+                    <line x1="6" y1="20" x2="6" y2="14"></line>
+                </svg>
+                <span>Metrics</span>
+            </a>
+            <a href="#alerts" class="nav-item"
+               hx-get="/api/monitoring/alerts"
+               hx-target="#monitoring-content"
+               hx-swap="innerHTML"
+               hx-push-url="false"
+               onclick="setActiveNav(this)">
+                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                    <path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"></path>
+                    <path d="M13.73 21a2 2 0 0 1-3.46 0"></path>
+                </svg>
+                <span>Alerts</span>
+                <span class="alert-badge" id="alert-count"
+                      hx-get="/api/monitoring/alerts/count"
+                      hx-trigger="load, every 30s"
+                      hx-swap="innerHTML">0</span>
+            </a>
+            <a href="#health" class="nav-item"
+               hx-get="/api/monitoring/health"
+               hx-target="#monitoring-content"
+               hx-swap="innerHTML"
+               hx-push-url="false"
+               onclick="setActiveNav(this)">
+                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                    <path d="M22 12h-4l-3 9L9 3l-3 9H2"></path>
+                </svg>
+                <span>Health</span>
+                <span class="health-indicator"
+                      hx-get="/api/monitoring/health/status"
+                      hx-trigger="load, every 10s"
+                      hx-swap="outerHTML"></span>
+            </a>
+        </nav>
+
+        <div class="monitoring-footer">
+            <a href="/suite" class="back-link">
+                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                    <line x1="19" y1="12" x2="5" y2="12"></line>
+                    <polyline points="12 19 5 12 12 5"></polyline>
+                </svg>
+                Back to Suite
+            </a>
+            <div class="system-status">
+                <span class="status-indicator running"></span>
+                <span class="status-text"
+                      hx-get="/api/monitoring/system/status"
+                      hx-trigger="load, every 15s"
+                      hx-swap="innerHTML">All Systems Operational</span>
+            </div>
+        </div>
+    </aside>
+
+    <!-- Main Content Area -->
+    <main class="monitoring-main">
+        <div class="monitoring-toolbar">
+            <div class="toolbar-left">
+                <h1 id="page-title">Dashboard</h1>
+                <span class="last-updated"
+                      hx-get="/api/monitoring/timestamp"
+                      hx-trigger="load, every 5s"
+                      hx-swap="innerHTML">--</span>
+            </div>
+            <div class="toolbar-right">
+                <div class="time-range-selector">
+                    <select id="time-range" onchange="updateTimeRange(this.value)">
+                        <option value="15m">Last 15 minutes</option>
+                        <option value="1h" selected>Last 1 hour</option>
+                        <option value="6h">Last 6 hours</option>
+                        <option value="24h">Last 24 hours</option>
+                        <option value="7d">Last 7 days</option>
+                        <option value="30d">Last 30 days</option>
+                    </select>
+                </div>
+                <button class="toolbar-btn" onclick="refreshMonitoring()" title="Refresh">
+                    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                        <polyline points="23 4 23 10 17 10"></polyline>
+                        <polyline points="1 20 1 14 7 14"></polyline>
+                        <path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15"></path>
+                    </svg>
+                </button>
+                <button class="toolbar-btn" onclick="toggleAutoRefresh()" id="auto-refresh-btn" title="Auto Refresh">
+                    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                        <circle cx="12" cy="12" r="10"></circle>
+                        <polyline points="12 6 12 12 16 14"></polyline>
+                    </svg>
+                </button>
+                <button class="toolbar-btn" onclick="exportData()" title="Export">
+                    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                        <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
+                        <polyline points="7 10 12 15 17 10"></polyline>
+                        <line x1="12" y1="15" x2="12" y2="3"></line>
+                    </svg>
+                </button>
+                <a href="/metrics" target="_blank" class="toolbar-btn" title="Prometheus Metrics">
+                    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                        <circle cx="12" cy="12" r="10"></circle>
+                        <line x1="12" y1="8" x2="12" y2="12"></line>
+                        <line x1="12" y1="16" x2="12.01" y2="16"></line>
+                    </svg>
+                </a>
+            </div>
+        </div>
+
+        <div class="monitoring-content" id="monitoring-content"
+             hx-get="/api/monitoring/dashboard"
+             hx-trigger="load"
+             hx-swap="innerHTML">
+            <!-- Dashboard content loaded via HTMX -->
+            <div class="loading-state">
+                <div class="spinner"></div>
+                <p>Loading monitoring data...</p>
+            </div>
+        </div>
+    </main>
+</div>
+
+<!-- Quick Stats Bar (always visible) -->
+<div class="quick-stats-bar">
+    <div class="quick-stat"
+         hx-get="/api/monitoring/quick/cpu"
+         hx-trigger="load, every 5s"
+         hx-swap="innerHTML">
+        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <rect x="4" y="4" width="16" height="16" rx="2"></rect>
+            <rect x="9" y="9" width="6" height="6"></rect>
+        </svg>
+        <span class="stat-label">CPU</span>
+        <span class="stat-value">--%</span>
+    </div>
+    <div class="quick-stat"
+         hx-get="/api/monitoring/quick/memory"
+         hx-trigger="load, every 5s"
+         hx-swap="innerHTML">
+        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <rect x="2" y="6" width="20" height="12" rx="2"></rect>
+            <line x1="6" y1="12" x2="6" y2="12"></line>
+            <line x1="10" y1="12" x2="10" y2="12"></line>
+            <line x1="14" y1="12" x2="14" y2="12"></line>
+            <line x1="18" y1="12" x2="18" y2="12"></line>
+        </svg>
+        <span class="stat-label">Memory</span>
+        <span class="stat-value">--%</span>
+    </div>
+    <div class="quick-stat"
+         hx-get="/api/monitoring/quick/disk"
+         hx-trigger="load, every 30s"
+         hx-swap="innerHTML">
+        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <ellipse cx="12" cy="5" rx="9" ry="3"></ellipse>
+            <path d="M21 12c0 1.66-4 3-9 3s-9-1.34-9-3"></path>
+            <path d="M3 5v14c0 1.66 4 3 9 3s9-1.34 9-3V5"></path>
+        </svg>
+        <span class="stat-label">Disk</span>
+        <span class="stat-value">--%</span>
+    </div>
+    <div class="quick-stat"
+         hx-get="/api/monitoring/quick/network"
+         hx-trigger="load, every 5s"
+         hx-swap="innerHTML">
+        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <path d="M5 12.55a11 11 0 0 1 14.08 0"></path>
+            <path d="M1.42 9a16 16 0 0 1 21.16 0"></path>
+            <path d="M8.53 16.11a6 6 0 0 1 6.95 0"></path>
+            <line x1="12" y1="20" x2="12.01" y2="20"></line>
+        </svg>
+        <span class="stat-label">Network</span>
+        <span class="stat-value">-- MB/s</span>
+    </div>
+    <div class="quick-stat"
+         hx-get="/api/monitoring/quick/requests"
+         hx-trigger="load, every 5s"
+         hx-swap="innerHTML">
+        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <polyline points="22 12 18 12 15 21 9 3 6 12 2 12"></polyline>
+        </svg>
+        <span class="stat-label">Requests</span>
+        <span class="stat-value">--/s</span>
+    </div>
+</div>
+
+<style>
+    .monitoring-layout {
+        display: flex;
+        min-height: calc(100vh - 64px);
+        background: var(--bg);
+    }
+
+    /* Sidebar */
+    .monitoring-sidebar {
+        width: 240px;
+        background: var(--surface);
+        border-right: 1px solid var(--border);
+        display: flex;
+        flex-direction: column;
+        position: sticky;
+        top: 64px;
+        height: calc(100vh - 64px);
+        overflow-y: auto;
+    }
+
+    .monitoring-header {
+        display: flex;
+        align-items: center;
+        gap: 0.75rem;
+        padding: 1.25rem 1rem;
+        border-bottom: 1px solid var(--border);
+        color: var(--text);
+        font-weight: 600;
+        font-size: 1rem;
+    }
+
+    .monitoring-header svg {
+        color: var(--primary);
+    }
+
+    .monitoring-nav {
+        flex: 1;
+        padding: 0.75rem 0;
+    }
+
+    .nav-item {
+        display: flex;
+        align-items: center;
+        gap: 0.75rem;
+        padding: 0.75rem 1rem;
+        color: var(--text-secondary);
+        text-decoration: none;
+        transition: all 0.2s ease;
+        position: relative;
+    }
+
+    .nav-item:hover {
+        background: var(--surface-hover);
+        color: var(--text);
+    }
+
+    .nav-item.active {
+        background: var(--primary-light);
+        color: var(--primary);
+        border-right: 3px solid var(--primary);
+    }
+
+    .nav-item svg {
+        flex-shrink: 0;
+    }
+
+    .alert-badge {
+        margin-left: auto;
+        background: var(--error);
+        color: white;
+        font-size: 0.7rem;
+        font-weight: 600;
+        padding: 0.15rem 0.4rem;
+        border-radius: 10px;
+        min-width: 18px;
+        text-align: center;
+    }
+
+    .alert-badge:empty,
+    .alert-badge:contains("0") {
+        display: none;
+    }
+
+    .health-indicator {
+        margin-left: auto;
+        width: 8px;
+        height: 8px;
+        border-radius: 50%;
+        background: var(--success);
+    }
+
+    .health-indicator.warning {
+        background: var(--warning);
+    }
+
+    .health-indicator.error {
+        background: var(--error);
+    }
+
+    .monitoring-footer {
+        padding: 1rem;
+        border-top: 1px solid var(--border);
+    }
+
+    .back-link {
+        display: flex;
+        align-items: center;
+        gap: 0.5rem;
+        color: var(--text-secondary);
+        text-decoration: none;
+        font-size: 0.875rem;
+        padding: 0.5rem 0;
+        transition: color 0.2s ease;
+    }
+
+    .back-link:hover {
+        color: var(--primary);
+    }
+
+    .system-status {
+        display: flex;
+        align-items: center;
+        gap: 0.5rem;
+        margin-top: 0.75rem;
+        padding-top: 0.75rem;
+        border-top: 1px solid var(--border);
+        font-size: 0.75rem;
+        color: var(--text-secondary);
+    }
+
+    .status-indicator {
+        width: 8px;
+        height: 8px;
+        border-radius: 50%;
+        flex-shrink: 0;
+    }
+
+    .status-indicator.running {
+        background: var(--success);
+        box-shadow: 0 0 8px var(--success);
+    }
+
+    .status-indicator.warning {
+        background: var(--warning);
+        box-shadow: 0 0 8px var(--warning);
+    }
+
+    .status-indicator.error {
+        background: var(--error);
+        box-shadow: 0 0 8px var(--error);
+    }
+
+    /* Main Content */
+    .monitoring-main {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        min-width: 0;
+    }
+
+    .monitoring-toolbar {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 1rem 1.5rem;
+        background: var(--surface);
+        border-bottom: 1px solid var(--border);
+        position: sticky;
+        top: 64px;
+        z-index: 100;
+    }
+
+    .toolbar-left {
+        display: flex;
+        align-items: center;
+        gap: 1rem;
+    }
+
+    .toolbar-left h1 {
+        font-size: 1.25rem;
+        font-weight: 600;
+        color: var(--text);
+    }
+
+    .last-updated {
+        font-size: 0.75rem;
+        color: var(--text-secondary);
+        background: var(--bg);
+        padding: 0.25rem 0.5rem;
+        border-radius: 4px;
+    }
+
+    .toolbar-right {
+        display: flex;
+        align-items: center;
+        gap: 0.5rem;
+    }
+
+    .time-range-selector select {
+        background: var(--bg);
+        border: 1px solid var(--border);
+        color: var(--text);
+        padding: 0.5rem 0.75rem;
+        border-radius: 6px;
+        font-size: 0.875rem;
+        cursor: pointer;
+    }
+
+    .time-range-selector select:focus {
+        outline: none;
+        border-color: var(--primary);
+    }
+
+    .toolbar-btn {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 36px;
+        height: 36px;
+        background: var(--bg);
+        border: 1px solid var(--border);
+        border-radius: 6px;
+        color: var(--text-secondary);
+        cursor: pointer;
+        transition: all 0.2s ease;
+        text-decoration: none;
+    }
+
+    .toolbar-btn:hover {
+        background: var(--surface-hover);
+        color: var(--text);
+        border-color: var(--primary);
+    }
+
+    .toolbar-btn.active {
+        background: var(--primary-light);
+        color: var(--primary);
+        border-color: var(--primary);
+    }
+
+    .monitoring-content {
+        flex: 1;
+        padding: 1.5rem;
+        overflow-y: auto;
+    }
+
+    /* Loading State */
+    .loading-state {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        padding: 4rem;
+        color: var(--text-secondary);
+    }
+
+    .spinner {
+        width: 40px;
+        height: 40px;
+        border: 3px solid var(--border);
+        border-top-color: var(--primary);
+        border-radius: 50%;
+        animation: spin 1s linear infinite;
+        margin-bottom: 1rem;
+    }
+
+    @keyframes spin {
+        to {
+            transform: rotate(360deg);
+        }
+    }
+
+    /* Quick Stats Bar */
+    .quick-stats-bar {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        gap: 2rem;
+        padding: 0.75rem 1.5rem;
+        background: var(--surface);
+        border-top: 1px solid var(--border);
+        position: fixed;
+        bottom: 0;
+        left: 240px;
+        right: 0;
+        z-index: 100;
+    }
+
+    .quick-stat {
+        display: flex;
+        align-items: center;
+        gap: 0.5rem;
+        font-size: 0.875rem;
+    }
+
+    .quick-stat svg {
+        color: var(--primary);
+    }
+
+    .stat-label {
+        color: var(--text-secondary);
+    }
+
+    .stat-value {
+        color: var(--text);
+        font-weight: 600;
+        font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Fira Code', monospace;
+    }
+
+    .stat-value.warning {
+        color: var(--warning);
+    }
+
+    .stat-value.error {
+        color: var(--error);
+    }
+
+    /* Dashboard Grid (default content) */
+    .dashboard-grid {
+        display: grid;
+        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+        gap: 1.5rem;
+    }
+
+    .dashboard-card {
+        background: var(--surface);
+        border: 1px solid var(--border);
+        border-radius: 12px;
+        padding: 1.25rem;
+    }
+
+    .card-header {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin-bottom: 1rem;
+    }
+
+    .card-title {
+        display: flex;
+        align-items: center;
+        gap: 0.5rem;
+        font-weight: 600;
+        color: var(--text);
+    }
+
+    .card-title svg {
+        color: var(--primary);
+    }
+
+    .card-action {
+        font-size: 0.75rem;
+        color: var(--primary);
+        text-decoration: none;
+    }
+
+    .card-action:hover {
+        text-decoration: underline;
+    }
+
+    /* Responsive */
+    @media (max-width: 1024px) {
+        .monitoring-sidebar {
+            width: 200px;
+        }
+
+        .quick-stats-bar {
+            left: 200px;
+            gap: 1rem;
+        }
+
+        .quick-stat .stat-label {
+            display: none;
+        }
+    }
+
+    @media (max-width: 768px) {
+        .monitoring-layout {
+            flex-direction: column;
+        }
+
+        .monitoring-sidebar {
+            width: 100%;
+            height: auto;
+            position: relative;
+            top: 0;
+        }
+
+        .monitoring-nav {
+            display: flex;
+            overflow-x: auto;
+            padding: 0.5rem;
+            gap: 0.25rem;
+        }
+
+        .nav-item {
+            flex-direction: column;
+            padding: 0.5rem 0.75rem;
+            font-size: 0.75rem;
+            white-space: nowrap;
+            border-right: none !important;
+            border-radius: 6px;
+        }
+
+        .nav-item.active {
+            border-bottom: 2px solid var(--primary);
+        }
+
+        .nav-item span:not(.alert-badge):not(.health-indicator) {
+            display: none;
+        }
+
+        .monitoring-footer {
+            display: none;
+        }
+
+        .monitoring-toolbar {
+            flex-direction: column;
+            gap: 0.75rem;
+            align-items: stretch;
+            position: relative;
+            top: 0;
+        }
+
+        .toolbar-left,
+        .toolbar-right {
+            justify-content: space-between;
+        }
+
+        .quick-stats-bar {
+            left: 0;
+            gap: 0.5rem;
+            padding: 0.5rem;
+            flex-wrap: wrap;
+        }
+
+        .quick-stat {
+            font-size: 0.75rem;
+        }
+
+        .monitoring-content {
+            padding-bottom: 80px;
+        }
+    }
+</style>
+
+<script>
+    function setActiveNav(element) {
+        document.querySelectorAll('.monitoring-nav .nav-item').forEach(item => {
+            item.classList.remove('active');
+        });
+        element.classList.add('active');
+
+        // Update page title
+        const title = element.querySelector('span:not(.alert-badge):not(.health-indicator)').textContent;
+        document.getElementById('page-title').textContent = title;
+    }
+
+    function updateTimeRange(range) {
+        // Store selected time range
+        localStorage.setItem('monitoring-time-range', range);
+
+        // Trigger refresh of current view
+        htmx.trigger('#monitoring-content', 'refresh');
+    }
+
+    function refreshMonitoring() {
+        htmx.trigger('#monitoring-content', 'refresh');
+
+        // Visual feedback
+        const btn = event.currentTarget;
+        btn.classList.add('active');
+        setTimeout(() => btn.classList.remove('active'), 500);
+    }
+
+    let autoRefresh = true;
+    function toggleAutoRefresh() {
+        autoRefresh = !autoRefresh;
+        const btn = document.getElementById('auto-refresh-btn');
+        btn.classList.toggle('active', autoRefresh);
+
+        if (autoRefresh) {
+            // Re-enable polling by refreshing the page content
+            htmx.trigger('#monitoring-content', 'refresh');
+        }
+    }
+
+    function exportData() {
+        const timeRange = document.getElementById('time-range').value;
+        window.open(`/api/monitoring/export?range=${timeRange}`, '_blank');
+    }
+
+    // Initialize
+    document.addEventListener('DOMContentLoaded', function() {
+        // Restore time range preference
+        const savedRange = localStorage.getItem('monitoring-time-range');
+        if (savedRange) {
+            document.getElementById('time-range').value = savedRange;
+        }
+
+        // Set auto-refresh button state
+        document.getElementById('auto-refresh-btn').classList.toggle('active', autoRefresh);
+    });
+
+    // Handle HTMX events for loading states
+    document.body.addEventListener('htmx:beforeRequest', function(evt) {
+        if (evt.target.id === 'monitoring-content') {
+            evt.target.innerHTML = '<div class="loading-state"><div class="spinner"></div><p>Loading...</p></div>';
+        }
+    });
+</script>
diff --git a/ui/suite/monitoring/logs.html b/ui/suite/monitoring/logs.html
new file mode 100644
index 0000000..15cea38
--- /dev/null
+++ b/ui/suite/monitoring/logs.html
@@ -0,0 +1,1087 @@
+<div class="logs-container">
+    <!-- Logs Header -->
+    <div class="logs-header">
+        <div class="header-filters">
+            <div class="filter-group">
+                <label for="log-level-filter">Level</label>
+                <select id="log-level-filter" onchange="applyFilters()">
+                    <option value="all">All Levels</option>
+                    <option value="debug">Debug</option>
+                    <option value="info">Info</option>
+                    <option value="warn">Warning</option>
+                    <option value="error">Error</option>
+                    <option value="fatal">Fatal</option>
+                </select>
+            </div>
+            <div class="filter-group">
+                <label for="service-filter">Service</label>
+                <select id="service-filter" onchange="applyFilters()"
+                        hx-get="/api/monitoring/logs/services"
+                        hx-trigger="load"
+                        hx-swap="innerHTML">
+                    <option value="all">All Services</option>
+                </select>
+            </div>
+            <div class="filter-group">
+                <label for="search-filter">Search</label>
+                <div class="search-input">
+                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                        <circle cx="11" cy="11" r="8"></circle>
+                        <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
+                    </svg>
+                    <input type="text" id="search-filter" placeholder="Search logs..." onkeyup="debounceSearch(this.value)">
+                </div>
+            </div>
+            <div class="filter-group">
+                <label for="time-filter">Time Range</label>
+                <select id="time-filter" onchange="applyFilters()">
+                    <option value="live">Live</option>
+                    <option value="15m">Last 15 minutes</option>
+                    <option value="1h">Last 1 hour</option>
+                    <option value="6h">Last 6 hours</option>
+                    <option value="24h">Last 24 hours</option>
+                </select>
+            </div>
+        </div>
+        <div class="header-actions">
+            <button class="action-btn" id="stream-toggle" onclick="toggleStream()">
+                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                    <rect x="6" y="4" width="4" height="16"></rect>
+                    <rect x="14" y="4" width="4" height="16"></rect>
+                </svg>
+                <span>Pause</span></span>
+            </button>
+            <button class="action-btn secondary" onclick="clearLogs()">
+                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                    <polyline points="3 6 5 6 21 6"></polyline>
+                    <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path>
+                </svg>
+                Clear
+            </button>
+            <button class="action-btn secondary" onclick="downloadLogs()">
+                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                    <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
+                    <polyline points="7 10 12 15 17 10"></polyline>
+                    <line x1="12" y1="15" x2="12" y2="3"></line>
+                </svg>
+                Download
+            </button>
+        </div>
+    </div>
+
+    <!-- Log Stats -->
+    <div class="log-stats">
+        <div class="stat-item" data-level="debug">
+            <span class="stat-dot debug"></span>
+            <span class="stat-label">Debug</span>
+            <span class="stat-count" id="debug-count">0</span>
+        </div>
+        <div class="stat-item" data-level="info">
+            <span class="stat-dot info"></span>
+            <span class="stat-label">Info</span>
+            <span class="stat-count" id="info-count">0</span>
+        </div>
+        <div class="stat-item" data-level="warn">
+            <span class="stat-dot warn"></span>
+            <span class="stat-label">Warning</span>
+            <span class="stat-count" id="warn-count">0</span>
+        </div>
+        <div class="stat-item" data-level="error">
+            <span class="stat-dot error"></span>
+            <span class="stat-label">Error</span>
+            <span class="stat-count" id="error-count">0</span>
+        </div>
+        <div class="stat-item" data-level="fatal">
+            <span class="stat-dot fatal"></span>
+            <span class="stat-label">Fatal</span>
+            <span class="stat-count" id="fatal-count">0</span>
+        </div>
+        <div class="stat-separator"></div>
+        <div class="stat-item total">
+            <span class="stat-label">Total</span>
+            <span class="stat-count" id="total-count">0</span>
+        </div>
+        <div class="connection-status" id="connection-status">
+            <span class="status-dot"></span>
+            <span class="status-text">Connecting...</span>
+        </div>
+    </div>
+
+    <!-- Log Stream Container -->
+    <div class="log-stream-container">
+        <div class="log-stream" id="log-stream"
+             hx-ext="ws"
+             ws-connect="/ws/logs">
+            <!-- Logs will be streamed here via WebSocket -->
+            <div class="log-placeholder">
+                <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
+                    <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
+                    <polyline points="14 2 14 8 20 8"></polyline>
+                    <line x1="16" y1="13" x2="8" y2="13"></line>
+                    <line x1="16" y1="17" x2="8" y2="17"></line>
+                    <polyline points="10 9 9 9 8 9"></polyline>
+                </svg>
+                <p>Waiting</p> for logs...</p>
+                <span class="placeholder-hint">Logs will appear here in real-time</span>
+            </div>
+        </div>
+        <div class="scroll-controls">
+            <button class="scroll-btn" id="scroll-top-btn" onclick="scrollToTop()" title="Scroll to top">
+                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                    <polyline points="18 15 12 9 6 15"></polyline>
+                </svg>
+            </button>
+            <button class="scroll-btn active" id="scroll-bottom-btn" onclick="scrollToBottom()" title="Scroll to bottom (auto-scroll)">
+                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                    <polyline points="6 9 12 15 18 9"></polyline>
+                </svg>
+            </button>
+        </div>
+    </div>
+
+    <!-- Log Detail Panel (slides up) -->
+    <div class="log-detail-panel" id="log-detail-panel">
+        <div class="panel-header">
+            <h4>Log Details</h4>
+            <button class="close-btn" onclick="closeLogDetail()">
+                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                    <line x1="18" y1="6" x2="6" y2="18"></line>
+                    <line x1="6" y1="6" x2="18" y2="18"></line>
+                </svg>
+            </button>
+        </div>
+        <div class="panel-content" id="log-detail-content">
+            <!-- Log detail loaded here -->
+        </div>
+    </div>
+</div>
+
+<!-- Log Entry Template -->
+<template id="log-entry-template">
+    <div class="log-entry" data-level="info" data-service="service">
+        <span class="log-timestamp">2024-01-15 12:34:56.789</span>
+        <span class="log-level">INFO</span>
+        <span class="log-service">service-name</span>
+        <span class="log-message">Log message content goes here</span>
+        <button class="log-expand" onclick="expandLog(this)" title="View details">
+            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                <polyline points="9 18 15 12 9 6"></polyline>
+            </svg>
+        </button>
+    </div>
+</template>
+
+<style>
+    .logs-container {
+        display: flex;
+        flex-direction: column;
+        height: calc(100vh - 200px);
+        min-height: 500px;
+    }
+
+    /* Header */
+    .logs-header {
+        display: flex;
+        align-items: flex-end;
+        justify-content: space-between;
+        gap: 1rem;
+        margin-bottom: 1rem;
+        flex-wrap: wrap;
+    }
+
+    .header-filters {
+        display: flex;
+        gap: 1rem;
+        flex-wrap: wrap;
+    }
+
+    .filter-group {
+        display: flex;
+        flex-direction: column;
+        gap: 0.375rem;
+    }
+
+    .filter-group label {
+        font-size: 0.6875rem;
+        font-weight: 600;
+        color: var(--text-secondary);
+        text-transform: uppercase;
+        letter-spacing: 0.5px;
+    }
+
+    .filter-group select {
+        background: var(--surface);
+        border: 1px solid var(--border);
+        color: var(--text);
+        padding: 0.5rem 0.75rem;
+        border-radius: 6px;
+        font-size: 0.8125rem;
+        cursor: pointer;
+        min-width: 140px;
+    }
+
+    .filter-group select:focus {
+        outline: none;
+        border-color: var(--primary);
+    }
+
+    .search-input {
+        display: flex;
+        align-items: center;
+        gap: 0.5rem;
+        background: var(--surface);
+        border: 1px solid var(--border);
+        border-radius: 6px;
+        padding: 0.5rem 0.75rem;
+    }
+
+    .search-input svg {
+        color: var(--text-secondary);
+        flex-shrink: 0;
+    }
+
+    .search-input input {
+        background: transparent;
+        border: none;
+        color: var(--text);
+        font-size: 0.8125rem;
+        width: 180px;
+        outline: none;
+    }
+
+    .search-input input::placeholder {
+        color: var(--text-secondary);
+    }
+
+    .search-input:focus-within {
+        border-color: var(--primary);
+    }
+
+    .header-actions {
+        display: flex;
+        gap: 0.5rem;
+    }
+
+    .action-btn {
+        display: flex;
+        align-items: center;
+        gap: 0.375rem;
+        padding: 0.5rem 0.875rem;
+        background: var(--primary);
+        color: white;
+        border: none;
+        border-radius: 6px;
+        font-size: 0.8125rem;
+        font-weight: 500;
+        cursor: pointer;
+        transition: all 0.2s ease;
+    }
+
+    .action-btn:hover {
+        background: var(--primary-hover);
+    }
+
+    .action-btn.secondary {
+        background: var(--surface);
+        color: var(--text);
+        border: 1px solid var(--border);
+    }
+
+    .action-btn.secondary:hover {
+        background: var(--surface-hover);
+        border-color: var(--primary);
+    }
+
+    .action-btn.paused {
+        background: var(--success);
+    }
+
+    .action-btn.paused:hover {
+        background: #16a34a;
+    }
+
+    /* Log Stats */
+    .log-stats {
+        display: flex;
+        align-items: center;
+        gap: 1.25rem;
+        padding: 0.75rem 1rem;
+        background: var(--surface);
+        border: 1px solid var(--border);
+        border-radius: 8px;
+        margin-bottom: 1rem;
+    }
+
+    .stat-item {
+        display: flex;
+        align-items: center;
+        gap: 0.5rem;
+        cursor: pointer;
+        padding: 0.25rem 0.5rem;
+        border-radius: 4px;
+        transition: background 0.2s ease;
+    }
+
+    .stat-item:hover {
+        background: var(--surface-hover);
+    }
+
+    .stat-item.active {
+        background: var(--primary-light);
+    }
+
+    .stat-dot {
+        width: 8px;
+        height: 8px;
+        border-radius: 50%;
+    }
+
+    .stat-dot.debug { background: #6b7280; }
+    .stat-dot.info { background: var(--primary); }
+    .stat-dot.warn { background: var(--warning); }
+    .stat-dot.error { background: var(--error); }
+    .stat-dot.fatal { background: #dc2626; }
+
+    .stat-label {
+        font-size: 0.75rem;
+        color: var(--text-secondary);
+    }
+
+    .stat-count {
+        font-size: 0.8125rem;
+        font-weight: 600;
+        color: var(--text);
+        font-family: 'SF Mono', 'Monaco', 'Inconsolata', monospace;
+    }
+
+    .stat-separator {
+        width: 1px;
+        height: 24px;
+        background: var(--border);
+    }
+
+    .stat-item.total .stat-label {
+        font-weight: 600;
+        color: var(--text);
+    }
+
+    .connection-status {
+        display: flex;
+        align-items: center;
+        gap: 0.5rem;
+        margin-left: auto;
+        padding: 0.375rem 0.75rem;
+        background: var(--bg);
+        border-radius: 20px;
+        font-size: 0.75rem;
+    }
+
+    .connection-status .status-dot {
+        width: 8px;
+        height: 8px;
+        border-radius: 50%;
+        background: var(--warning);
+        animation: pulse 2s infinite;
+    }
+
+    .connection-status.connected .status-dot {
+        background: var(--success);
+        animation: none;
+    }
+
+    .connection-status.disconnected .status-dot {
+        background: var(--error);
+        animation: none;
+    }
+
+    @keyframes pulse {
+        0%, 100% { opacity: 1; }
+        50% { opacity: 0.5; }
+    }
+
+    /* Log Stream */
+    .log-stream-container {
+        flex: 1;
+        display: flex;
+        position: relative;
+        background: var(--surface);
+        border: 1px solid var(--border);
+        border-radius: 8px;
+        overflow: hidden;
+    }
+
+    .log-stream {
+        flex: 1;
+        overflow-y: auto;
+        padding: 0.5rem;
+        font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Fira Code', monospace;
+        font-size: 0.8125rem;
+        line-height: 1.6;
+    }
+
+    .log-placeholder {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        height: 100%;
+        min-height: 300px;
+        color: var(--text-secondary);
+    }
+
+    .log-placeholder svg {
+        margin-bottom: 1rem;
+        opacity: 0.5;
+    }
+
+    .log-placeholder p {
+        font-size: 1rem;
+        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+        margin-bottom: 0.25rem;
+    }
+
+    .placeholder-hint {
+        font-size: 0.75rem;
+        opacity: 0.7;
+    }
+
+    /* Log Entry */
+    .log-entry {
+        display: flex;
+        align-items: flex-start;
+        gap: 0.75rem;
+        padding: 0.375rem 0.5rem;
+        border-radius: 4px;
+        transition: background 0.15s ease;
+    }
+
+    .log-entry:hover {
+        background: var(--bg);
+    }
+
+    .log-entry.hidden {
+        display: none;
+    }
+
+    .log-timestamp {
+        color: var(--text-secondary);
+        font-size: 0.75rem;
+        white-space: nowrap;
+        flex-shrink: 0;
+    }
+
+    .log-level {
+        font-size: 0.6875rem;
+        font-weight: 600;
+        padding: 0.125rem 0.375rem;
+        border-radius: 3px;
+        text-transform: uppercase;
+        flex-shrink: 0;
+        min-width: 50px;
+        text-align: center;
+    }
+
+    .log-entry[data-level="debug"] .log-level {
+        background: rgba(107, 114, 128, 0.15);
+        color: #9ca3af;
+    }
+
+    .log-entry[data-level="info"] .log-level {
+        background: var(--primary-light);
+        color: var(--primary);
+    }
+
+    .log-entry[data-level="warn"] .log-level {
+        background: rgba(245, 158, 11, 0.15);
+        color: var(--warning);
+    }
+
+    .log-entry[data-level="error"] .log-level {
+        background: rgba(239, 68, 68, 0.15);
+        color: var(--error);
+    }
+
+    .log-entry[data-level="fatal"] .log-level {
+        background: rgba(220, 38, 38, 0.2);
+        color: #dc2626;
+    }
+
+    .log-service {
+        color: #8b5cf6;
+        font-size: 0.75rem;
+        white-space: nowrap;
+        flex-shrink: 0;
+        max-width: 120px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+
+    .log-message {
+        color: var(--text);
+        flex: 1;
+        word-break: break-word;
+    }
+
+    .log-expand {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 24px;
+        height: 24px;
+        background: transparent;
+        border: none;
+        color: var(--text-secondary);
+        cursor: pointer;
+        opacity: 0;
+        transition: all 0.2s ease;
+        border-radius: 4px;
+        flex-shrink: 0;
+    }
+
+    .log-entry:hover .log-expand {
+        opacity: 1;
+    }
+
+    .log-expand:hover {
+        background: var(--surface-hover);
+        color: var(--primary);
+    }
+
+    /* Scroll Controls */
+    .scroll-controls {
+        position: absolute;
+        right: 1rem;
+        bottom: 1rem;
+        display: flex;
+        flex-direction: column;
+        gap: 0.5rem;
+    }
+
+    .scroll-btn {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 36px;
+        height: 36px;
+        background: var(--bg);
+        border: 1px solid var(--border);
+        border-radius: 8px;
+        color: var(--text-secondary);
+        cursor: pointer;
+        transition: all 0.2s ease;
+        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+    }
+
+    .scroll-btn:hover {
+        background: var(--surface-hover);
+        color: var(--text);
+        border-color: var(--primary);
+    }
+
+    .scroll-btn.active {
+        background: var(--primary-light);
+        color: var(--primary);
+        border-color: var(--primary);
+    }
+
+    /* Log Detail Panel */
+    .log-detail-panel {
+        position: absolute;
+        bottom: -300px;
+        left: 0;
+        right: 0;
+        height: 300px;
+        background: var(--surface);
+        border-top: 1px solid var(--border);
+        transition: bottom 0.3s ease;
+        display: flex;
+        flex-direction: column;
+    }
+
+    .log-detail-panel.open {
+        bottom: 0;
+    }
+
+    .log-detail-panel .panel-header {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 0.75rem 1rem;
+        border-bottom: 1px solid var(--border);
+    }
+
+    .log-detail-panel .panel-header h4 {
+        font-size: 0.875rem;
+        font-weight: 600;
+        color: var(--text);
+    }
+
+    .log-detail-panel .close-btn {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 28px;
+        height: 28px;
+        background: transparent;
+        border: none;
+        color: var(--text-secondary);
+        cursor: pointer;
+        border-radius: 4px;
+        transition: all 0.2s ease;
+    }
+
+    .log-detail-panel .close-btn:hover {
+        background: var(--surface-hover);
+        color: var(--text);
+    }
+
+    .log-detail-panel .panel-content {
+        flex: 1;
+        overflow-y: auto;
+        padding: 1rem;
+    }
+
+    .detail-section {
+        margin-bottom: 1rem;
+    }
+
+    .detail-label {
+        font-size: 0.6875rem;
+        font-weight: 600;
+        color: var(--text-secondary);
+        text-transform: uppercase;
+        letter-spacing: 0.5px;
+        margin-bottom: 0.375rem;
+    }
+
+    .detail-value {
+        font-family: 'SF Mono', 'Monaco', 'Inconsolata', monospace;
+        font-size: 0.8125rem;
+        color: var(--text);
+        background: var(--bg);
+        padding: 0.5rem 0.75rem;
+        border-radius: 4px;
+        white-space: pre-wrap;
+        word-break: break-all;
+    }
+
+    /* Responsive */
+    @media (max-width: 1024px) {
+        .logs-header {
+            flex-direction: column;
+            align-items: stretch;
+        }
+
+        .header-filters {
+            flex-wrap: wrap;
+        }
+
+        .filter-group {
+            flex: 1;
+            min-width: 120px;
+        }
+
+        .search-input input {
+            width: 100%;
+        }
+
+        .header-actions {
+            justify-content: flex-end;
+        }
+    }
+
+    @media (max-width: 768px) {
+        .log-stats {
+            flex-wrap: wrap;
+            gap: 0.75rem;
+        }
+
+        .stat-separator {
+            display: none;
+        }
+
+        .connection-status {
+            width: 100%;
+            justify-content: center;
+        }
+
+        .log-entry {
+            flex-wrap: wrap;
+        }
+
+        .log-timestamp {
+            order: 1;
+            width: 100%;
+            margin-bottom: 0.25rem;
+        }
+
+        .log-level {
+            order: 2;
+        }
+
+        .log-service {
+            order: 3;
+        }
+
+        .log-message {
+            order: 5;
+            width: 100%;
+            margin-top: 0.25rem;
+        }
+
+        .log-expand {
+            order: 4;
+            opacity: 1;
+        }
+    }
+</style>
+
+<script>
+    // State
+    let isStreaming = true;
+    let autoScroll = true;
+    let logCounts = { debug: 0, info: 0, warn: 0, error: 0, fatal: 0 };
+    let searchDebounceTimer = null;
+    let currentFilters = {
+        level: 'all',
+        service: 'all',
+        search: ''
+    };
+
+    // WebSocket connection
+    let ws = null;
+
+    function initWebSocket() {
+        const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
+        ws = new WebSocket(`${protocol}//${window.location.host}/ws/logs`);
+
+        ws.onopen = function() {
+            updateConnectionStatus('connected', 'Connected');
+        };
+
+        ws.onclose = function() {
+            updateConnectionStatus('disconnected', 'Disconnected');
+            // Reconnect after 3 seconds
+            setTimeout(initWebSocket, 3000);
+        };
+
+        ws.onerror = function() {
+            updateConnectionStatus('disconnected', 'Error');
+        };
+
+        ws.onmessage = function(event) {
+            if (!isStreaming) return;
+
+            try {
+                const logData = JSON.parse(event.data);
+                appendLog(logData);
+            } catch (e) {
+                console.error('Failed to parse log message:', e);
+            }
+        };
+    }
+
+    function updateConnectionStatus(status, text) {
+        const statusEl = document.getElementById('connection-status');
+        statusEl.className = `connection-status ${status}`;
+        statusEl.querySelector('.status-text').textContent = text;
+    }
+
+    function appendLog(log) {
+        const stream = document.getElementById('log-stream');
+        const placeholder = stream.querySelector('.log-placeholder');
+        if (placeholder) {
+            placeholder.remove();
+        }
+
+        const entry = document.createElement('div');
+        entry.className = 'log-entry';
+        entry.dataset.level = log.level || 'info';
+        entry.dataset.service = log.service || 'unknown';
+        entry.dataset.id = log.id || Date.now();
+
+        entry.innerHTML = `
+            <span class="log-timestamp">${formatTimestamp(log.timestamp)}</span>
+            <span class="log-level">${(log.level || 'INFO').toUpperCase()}</span>
+            <span class="log-service">${log.service || 'unknown'}</span>
+            <span class="log-message">${escapeHtml(log.message || '')}</span>
+            <button class="log-expand" onclick="expandLog(this)" title="View details">
+                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                    <polyline points="9 18 15 12 9 6"></polyline>
+                </svg>
+            </button>
+        `;
+
+        // Store full log data for detail view
+        entry._logData = log;
+
+        // Apply current filters
+        if (!matchesFilters(entry)) {
+            entry.classList.add('hidden');
+        }
+
+        stream.appendChild(entry);
+
+        // Update counts
+        const level = log.level || 'info';
+        if (logCounts[level] !== undefined) {
+            logCounts[level]++;
+            document.getElementById(`${level}-count`).textContent = logCounts[level];
+        }
+        document.getElementById('total-count').textContent =
+            Object.values(logCounts).reduce((a, b) => a + b, 0);
+
+        // Auto-scroll to bottom
+        if (autoScroll) {
+            stream.scrollTop = stream.scrollHeight;
+        }
+
+        // Limit log entries to prevent memory issues
+        const maxEntries = 1000;
+        while (stream.children.length > maxEntries) {
+            const removed = stream.firstChild;
+            if (removed._logData) {
+                const removedLevel = removed._logData.level || 'info';
+                if (logCounts[removedLevel] > 0) {
+                    logCounts[removedLevel]--;
+                }
+            }
+            stream.removeChild(removed);
+        }
+    }
+
+    function formatTimestamp(timestamp) {
+        if (!timestamp) return '--';
+        const date = new Date(timestamp);
+        return date.toISOString().replace('T', ' ').slice(0, 23);
+    }
+
+    function escapeHtml(text) {
+        const div = document.createElement('div');
+        div.textContent = text;
+        return div.innerHTML;
+    }
+
+    function matchesFilters(entry) {
+        // Level filter
+        if (currentFilters.level !== 'all' && entry.dataset.level !== currentFilters.level) {
+            return false;
+        }
+
+        // Service filter
+        if (currentFilters.service !== 'all' && entry.dataset.service !== currentFilters.service) {
+            return false;
+        }
+
+        // Search filter
+        if (currentFilters.search) {
+            const text = entry.textContent.toLowerCase();
+            if (!text.includes(currentFilters.search.toLowerCase())) {
+                return false;
+            }
+        }
+
+        return true;
+    }
+
+    function applyFilters() {
+        currentFilters.level = document.getElementById('log-level-filter').value;
+        currentFilters.service = document.getElementById('service-filter').value;
+
+        const entries = document.querySelectorAll('.log-entry');
+        entries.forEach(entry => {
+            if (matchesFilters(entry)) {
+                entry.classList.remove('hidden');
+            } else {
+                entry.classList.add('hidden');
+            }
+        });
+    }
+
+    function debounceSearch(value) {
+        clearTimeout(searchDebounceTimer);
+        searchDebounceTimer = setTimeout(() => {
+            currentFilters.search = value;
+            applyFilters();
+        }, 300);
+    }
+
+    function toggleStream() {
+        isStreaming = !isStreaming;
+        const btn = document.getElementById('stream-toggle');
+
+        if (isStreaming) {
+            btn.classList.remove('paused');
+            btn.innerHTML = `
+                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                    <rect x="6" y="4" width="4" height="16"></rect>
+                    <rect x="14" y="4" width="4" height="16"></rect>
+                </svg>
+                <span>Pause</span>
+            `;
+        } else {
+            btn.classList.add('paused');
+            btn.innerHTML = `
+                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                    <polygon points="5 3 19 12 5 21 5 3"></polygon>
+                </svg>
+                <span>Resume</span>
+            `;
+        }
+    }
+
+    function clearLogs() {
+        if (confirm('Are you sure you want to clear all logs?')) {
+            const stream = document.getElementById('log-stream');
+            stream.innerHTML = `
+                <div class="log-placeholder">
+                    <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
+                        <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
+                        <polyline points="14 2 14 8 20 8"></polyline>
+                        <line x1="16" y1="13" x2="8" y2="13"></line>
+                        <line x1="16" y1="17" x2="8" y2="17"></line>
+                        <polyline points="10 9 9 9 8 9"></polyline>
+                    </svg>
+                    <p>Logs cleared</p>
+                    <span class="placeholder-hint">New logs will appear here</span>
+                </div>
+            `;
+
+            // Reset counts
+            logCounts = { debug: 0, info: 0, warn: 0, error: 0, fatal: 0 };
+            Object.keys(logCounts).forEach(level => {
+                document.getElementById(`${level}-count`).textContent = '0';
+            });
+            document.getElementById('total-count').textContent = '0';
+        }
+    }
+
+    function downloadLogs() {
+        const entries = document.querySelectorAll('.log-entry');
+        let logs = [];
+
+        entries.forEach(entry => {
+            if (entry._logData) {
+                logs.push(entry._logData);
+            }
+        });
+
+        const blob = new Blob([JSON.stringify(logs, null, 2)], { type: 'application/json' });
+        const url = URL.createObjectURL(blob);
+        const a = document.createElement('a');
+        a.href = url;
+        a.download = `logs-${new Date().toISOString().slice(0, 19).replace(/[T:]/g, '-')}.json`;
+        document.body.appendChild(a);
+        a.click();
+        document.body.removeChild(a);
+        URL.revokeObjectURL(url);
+    }
+
+    function scrollToTop() {
+        const stream = document.getElementById('log-stream');
+        stream.scrollTop = 0;
+        autoScroll = false;
+        updateScrollButtons();
+    }
+
+    function scrollToBottom() {
+        const stream = document.getElementById('log-stream');
+        stream.scrollTop = stream.scrollHeight;
+        autoScroll = true;
+        updateScrollButtons();
+    }
+
+    function updateScrollButtons() {
+        document.getElementById('scroll-top-btn').classList.toggle('active', !autoScroll);
+        document.getElementById('scroll-bottom-btn').classList.toggle('active', autoScroll);
+    }
+
+    function expandLog(btn) {
+        const entry = btn.closest('.log-entry');
+        const logData = entry._logData || {
+            timestamp: entry.querySelector('.log-timestamp').textContent,
+            level: entry.dataset.level,
+            service: entry.dataset.service,
+            message: entry.querySelector('.log-message').textContent
+        };
+
+        const panel = document.getElementById('log-detail-panel');
+        const content = document.getElementById('log-detail-content');
+
+        content.innerHTML = `
+            <div class="detail-section">
+                <div class="detail-label">Timestamp</div>
+                <div class="detail-value">${logData.timestamp || '--'}</div>
+            </div>
+            <div class="detail-section">
+                <div class="detail-label">Level</div>
+                <div class="detail-value">${(logData.level || 'info').toUpperCase()}</div>
+            </div>
+            <div class="detail-section">
+                <div class="detail-label">Service</div>
+                <div class="detail-value">${logData.service || 'unknown'}</div>
+            </div>
+            <div class="detail-section">
+                <div class="detail-label">Message</div>
+                <div class="detail-value">${escapeHtml(logData.message || '')}</div>
+            </div>
+            ${logData.stack ? `
+            <div class="detail-section">
+                <div class="detail-label">Stack Trace</div>
+                <div class="detail-value">${escapeHtml(logData.stack)}</div>
+            </div>
+            ` : ''}
+            ${logData.context ? `
+            <div class="detail-section">
+                <div class="detail-label">Context</div>
+                <div class="detail-value">${escapeHtml(JSON.stringify(logData.context, null, 2))}</div>
+            </div>
+            ` : ''}
+        `;
+
+        panel.classList.add('open');
+    }
+
+    function closeLogDetail() {
+        document.getElementById('log-detail-panel').classList.remove('open');
+    }
+
+    // Detect scroll position for auto-scroll toggle
+    document.getElementById('log-stream').addEventListener('scroll', function() {
+        const stream = this;
+        const isAtBottom = stream.scrollHeight - stream.scrollTop - stream.clientHeight < 50;
+
+        if (!isAtBottom && autoScroll) {
+            autoScroll = false;
+            updateScrollButtons();
+        }
+    });
+
+    // Initialize
+    document.addEventListener('DOMContentLoaded', function() {
+        initWebSocket();
+    });
+
+    // Close detail panel on escape
+    document.addEventListener('keydown', function(e) {
+        if (e.key === 'Escape') {
+            closeLogDetail();
+        }
+    });
+
+    // Click on stat item to filter by level
+    document.querySelectorAll('.stat-item[data-level]').forEach(item => {
+        item.addEventListener('click', function() {
+            const level = this.dataset.level;
+            const select = document.getElementById('log-level-filter');
+            select.value = select.value === level ? 'all' : level;
+            applyFilters();
+
+            // Visual feedback
+            document.querySelectorAll('.stat-item[data-level]').forEach(i => i.classList.remove('active'));
+            if (select.value !== 'all') {
+                this.classList.add('active');
+            }
+        });
+    });
+</script>
diff --git a/ui/suite/monitoring/metrics.html b/ui/suite/monitoring/metrics.html
new file mode 100644
index 0000000..562b518
--- /dev/null
+++ b/ui/suite/monitoring/metrics.html
@@ -0,0 +1,895 @@
+<div class="metrics-container">
+    <!-- Metrics Header -->
+    <div class="metrics-header">
+        <div class="header-info">
+            <h2></h2>
+                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                    <line x1="18" y1="20" x2="18" y2="10"></line>
+                    <line x1="12" y1="20" x2="12" y2="4"></line>
+                    <line x1="6" y1="20" x2="6" y2="14"></line>
+                </svg>
+                Metrics Dashboard
+            </h2>
+            <span class="last-sync"
+                  hx-get="/api/monitoring/metrics/last-sync"
+                  hx-trigger="load, every 30s"
+                  hx-swap="innerHTML">Last sync: --</span>
+        </div>
+        <div class="header-actions">
+            <select id="metrics-time-range" onchange="updateMetricsRange(this.value)">
+                <option value="15m">Last 15 minutes</option>
+                <option value="1h" selected>Last 1 hour</option>
+                <option value="6h">Last 6 hours</option>
+                <option value="24h">Last 24 hours</option>
+                <option value="7d">Last 7 days</option>
+            </select>
+            <button class="action-btn secondary" onclick="refreshMetrics()">
+                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                    <polyline points="23 4 23 10 17 10"></polyline>
+                    <path d="M20.49 15a9 9 0 1 1-2.12-9.36L23 10"></path>
+                </svg>
+                Refresh
+            </button>
+            <a href="/metrics" target="_blank" class="action-btn">
+                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                    <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path>
+                    <polyline points="15 3 21 3 21 9"></polyline>
+                    <line x1="10" y1="14" x2="21" y2="3"></line>
+                </svg>
+                Prometheus Export
+            </a>
+        </div>
+    </div>
+
+    <!-- Key Metrics Overview -->
+    <div class="key-metrics"
+         hx-get="/api/analytics/dashboard"
+         hx-trigger="load, every 30s"
+         hx-swap="innerHTML">
+        <div class="metric-card">
+            <div class="metric-icon requests">
+                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                    <polyline points="22 12 18 12 15 21 9 3 6 12 2 12"></polyline>
+                </svg>
+            </div>
+            <div class="metric-info">
+                <span class="metric-value">--</span>
+                <span class="metric-label">Requests/sec</span>
+            </div>
+            <div class="metric-trend up">
+                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                    <polyline points="18 15 12 9 6 15"></polyline>
+                </svg>
+                <span>--%</span>
+            </div>
+        </div>
+        <div class="metric-card">
+            <div class="metric-icon latency">
+                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                    <circle cx="12" cy="12" r="10"></circle>
+                    <polyline points="12 6 12 12 16 14"></polyline>
+                </svg>
+            </div>
+            <div class="metric-info">
+                <span class="metric-value">-- ms</span>
+                <span class="metric-label">Avg Latency</span>
+            </div>
+            <div class="metric-trend down">
+                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                    <polyline points="6 9 12 15 18 9"></polyline>
+                </svg>
+                <span>--%</span>
+            </div>
+        </div>
+        <div class="metric-card">
+            <div class="metric-icon errors">
+                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                    <circle cx="12" cy="12" r="10"></circle>
+                    <line x1="15" y1="9" x2="9" y2="15"></line>
+                    <line x1="9" y1="9" x2="15" y2="15"></line>
+                </svg>
+            </div>
+            <div class="metric-info">
+                <span class="metric-value">--%</span>
+                <span class="metric-label">Error Rate</span>
+            </div>
+            <div class="metric-trend neutral">
+                <span>--</span>
+            </div>
+        </div>
+        <div class="metric-card">
+            <div class="metric-icon users">
+                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                    <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path>
+                    <circle cx="9" cy="7" r="4"></circle>
+                    <path d="M23 21v-2a4 4 0 0 0-3-3.87"></path>
+                    <path d="M16 3.13a4 4 0 0 1 0 7.75"></path>
+                </svg>
+            </div>
+            <div class="metric-info">
+                <span class="metric-value">--</span>
+                <span class="metric-label">Active Users</span>
+            </div>
+            <div class="metric-trend up">
+                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                    <polyline points="18 15 12 9 6 15"></polyline>
+                </svg>
+                <span>--%</span>
+            </div>
+        </div>
+        <div class="metric-card">
+            <div class="metric-icon conversations">
+                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                    <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path>
+                </svg>
+            </div>
+            <div class="metric-info">
+                <span class="metric-value">--</span>
+                <span class="metric-label">Conversations</span>
+            </div>
+            <div class="metric-trend up">
+                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                    <polyline points="18 15 12 9 6 15"></polyline>
+                </svg>
+                <span>--%</span>
+            </div>
+        </div>
+        <div class="metric-card">
+            <div class="metric-icon uptime">
+                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                    <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
+                    <polyline points="22 4 12 14.01 9 11.01"></polyline>
+                </svg>
+            </div>
+            <div class="metric-info">
+                <span class="metric-value">--%</span>
+                <span class="metric-label">Uptime</span>
+            </div>
+            <div class="metric-trend neutral">
+                <span>--</span>
+            </div>
+        </div>
+    </div>
+
+    <!-- Charts Grid -->
+    <div class="charts-grid">
+        <!-- Request Rate Chart -->
+        <div class="chart-panel">
+            <div class="chart-header">
+                <h3>Request Rate</h3>
+                <div class="chart-controls">
+                    <select onchange="updateChartType('requests', this.value)">
+                        <option value="line">Line</option>
+                        <option value="area">Area</option>
+                        <option value="bar">Bar</option>
+                    </select>
+                </div>
+            </div>
+            <div class="chart-body" id="requests-chart"
+                 hx-get="/api/analytics/metric?name=requests"
+                 hx-trigger="load, every 30s"
+                 hx-swap="innerHTML">
+                <svg viewBox="0 0 600 200" class="chart-svg">
+                    <defs>
+                        <linearGradient id="requests-gradient" x1="0%" y1="0%" x2="0%" y2="100%">
+                            <stop offset="0%" style="stop-color:var(--primary);stop-opacity:0.3"/>
+                            <stop offset="100%" style="stop-color:var(--primary);stop-opacity:0"/>
+                        </linearGradient>
+                    </defs>
+                    <g class="chart-grid">
+                        <line x1="50" y1="20" x2="580" y2="20" stroke="var(--border)" stroke-dasharray="4"/>
+                        <line x1="50" y1="70" x2="580" y2="70" stroke="var(--border)" stroke-dasharray="4"/>
+                        <line x1="50" y1="120" x2="580" y2="120" stroke="var(--border)" stroke-dasharray="4"/>
+                        <line x1="50" y1="170" x2="580" y2="170" stroke="var(--border)" stroke-dasharray="4"/>
+                    </g>
+                    <g class="chart-axis-y">
+                        <text x="45" y="25" fill="var(--text-secondary)" font-size="10" text-anchor="end">1000</text>
+                        <text x="45" y="75" fill="var(--text-secondary)" font-size="10" text-anchor="end">750</text>
+                        <text x="45" y="125" fill="var(--text-secondary)" font-size="10" text-anchor="end">500</text>
+                        <text x="45" y="175" fill="var(--text-secondary)" font-size="10" text-anchor="end">250</text>
+                    </g>
+                    <path class="chart-area" d="M50,170 Q100,160 150,140 T250,100 T350,120 T450,90 T550,110 L550,170 Z" fill="url(#requests-gradient)"/>
+                    <path class="chart-line" d="M50,170 Q100,160 150,140 T250,100 T350,120 T450,90 T550,110" fill="none" stroke="var(--primary)" stroke-width="2"/>
+                </svg>
+            </div>
+        </div>
+
+        <!-- Latency Chart -->
+        <div class="chart-panel">
+            <div class="chart-header">
+                <h3>Response Latency</h3>
+                <div class="chart-legend">
+                    <span class="legend-item"><span class="legend-dot p50"></span>P50</span>
+                    <span class="legend-item"><span class="legend-dot p95"></span>P95</span>
+                    <span class="legend-item"><span class="legend-dot p99"></span>P99</span>
+                </div>
+            </div>
+            <div class="chart-body" id="latency-chart"
+                 hx-get="/api/analytics/metric?name=latency"
+                 hx-trigger="load, every 30s"
+                 hx-swap="innerHTML">
+                <svg viewBox="0 0 600 200" class="chart-svg">
+                    <defs>
+                        <linearGradient id="latency-gradient" x1="0%" y1="0%" x2="0%" y2="100%">
+                            <stop offset="0%" style="stop-color:var(--success);stop-opacity:0.2"/>
+                            <stop offset="100%" style="stop-color:var(--success);stop-opacity:0"/>
+                        </linearGradient>
+                    </defs>
+                    <g class="chart-grid">
+                        <line x1="50" y1="20" x2="580" y2="20" stroke="var(--border)" stroke-dasharray="4"/>
+                        <line x1="50" y1="70" x2="580" y2="70" stroke="var(--border)" stroke-dasharray="4"/>
+                        <line x1="50" y1="120" x2="580" y2="120" stroke="var(--border)" stroke-dasharray="4"/>
+                        <line x1="50" y1="170" x2="580" y2="170" stroke="var(--border)" stroke-dasharray="4"/>
+                    </g>
+                    <g class="chart-axis-y">
+                        <text x="45" y="25" fill="var(--text-secondary)" font-size="10" text-anchor="end">500ms</text>
+                        <text x="45" y="75" fill="var(--text-secondary)" font-size="10" text-anchor="end">375ms</text>
+                        <text x="45" y="125" fill="var(--text-secondary)" font-size="10" text-anchor="end">250ms</text>
+                        <text x="45" y="175" fill="var(--text-secondary)" font-size="10" text-anchor="end">125ms</text>
+                    </g>
+                    <path class="chart-line p99" d="M50,80 Q150,75 250,85 T450,70 T550,80" fill="none" stroke="var(--error)" stroke-width="1.5" stroke-dasharray="4"/>
+                    <path class="chart-line p95" d="M50,110 Q150,100 250,115 T450,95 T550,105" fill="none" stroke="var(--warning)" stroke-width="1.5"/>
+                    <path class="chart-area" d="M50,170 Q150,160 250,155 T450,150 T550,160 L550,170 Z" fill="url(#latency-gradient)"/>
+                    <path class="chart-line p50" d="M50,170 Q150,160 250,155 T450,150 T550,160" fill="none" stroke="var(--success)" stroke-width="2"/>
+                </svg>
+            </div>
+        </div>
+
+        <!-- Error Rate Chart -->
+        <div class="chart-panel">
+            <div class="chart-header">
+                <h3>Error Rate</h3>
+                <div class="chart-legend">
+                    <span class="legend-item"><span class="legend-dot error-4xx"></span>4xx</span>
+                    <span class="legend-item"><span class="legend-dot error-5xx"></span>5xx</span>
+                </div>
+            </div>
+            <div class="chart-body" id="errors-chart"
+                 hx-get="/api/analytics/metric?name=errors"
+                 hx-trigger="load, every 30s"
+                 hx-swap="innerHTML">
+                <svg viewBox="0 0 600 200" class="chart-svg">
+                    <g class="chart-grid">
+                        <line x1="50" y1="20" x2="580" y2="20" stroke="var(--border)" stroke-dasharray="4"/>
+                        <line x1="50" y1="70" x2="580" y2="70" stroke="var(--border)" stroke-dasharray="4"/>
+                        <line x1="50" y1="120" x2="580" y2="120" stroke="var(--border)" stroke-dasharray="4"/>
+                        <line x1="50" y1="170" x2="580" y2="170" stroke="var(--border)" stroke-dasharray="4"/>
+                    </g>
+                    <g class="chart-axis-y">
+                        <text x="45" y="25" fill="var(--text-secondary)" font-size="10" text-anchor="end">10%</text>
+                        <text x="45" y="75" fill="var(--text-secondary)" font-size="10" text-anchor="end">7.5%</text>
+                        <text x="45" y="125" fill="var(--text-secondary)" font-size="10" text-anchor="end">5%</text>
+                        <text x="45" y="175" fill="var(--text-secondary)" font-size="10" text-anchor="end">2.5%</text>
+                    </g>
+                    <g class="chart-bars">
+                        <rect x="70" y="160" width="20" height="10" fill="var(--warning)" rx="2"/>
+                        <rect x="70" y="165" width="20" height="5" fill="var(--error)" rx="2"/>
+                        <rect x="120" y="155" width="20" height="15" fill="var(--warning)" rx="2"/>
+                        <rect x="120" y="162" width="20" height="8" fill="var(--error)" rx="2"/>
+                        <rect x="170" y="150" width="20" height="20" fill="var(--warning)" rx="2"/>
+                        <rect x="170" y="160" width="20" height="10" fill="var(--error)" rx="2"/>
+                        <rect x="220" y="158" width="20" height="12" fill="var(--warning)" rx="2"/>
+                        <rect x="220" y="165" width="20" height="5" fill="var(--error)" rx="2"/>
+                        <rect x="270" y="162" width="20" height="8" fill="var(--warning)" rx="2"/>
+                        <rect x="270" y="167" width="20" height="3" fill="var(--error)" rx="2"/>
+                    </g>
+                </svg>
+            </div>
+        </div>
+
+        <!-- Throughput Chart -->
+        <div class="chart-panel">
+            <div class="chart-header">
+                <h3>Throughput</h3>
+                <div class="chart-legend">
+                    <span class="legend-item"><span class="legend-dot incoming"></span>In</span>
+                    <span class="legend-item"><span class="legend-dot outgoing"></span>Out</span>
+                </div>
+            </div>
+            <div class="chart-body" id="throughput-chart"
+                 hx-get="/api/analytics/metric?name=throughput"
+                 hx-trigger="load, every 30s"
+                 hx-swap="innerHTML">
+                <svg viewBox="0 0 600 200" class="chart-svg">
+                    <defs>
+                        <linearGradient id="throughput-in-gradient" x1="0%" y1="0%" x2="0%" y2="100%">
+                            <stop offset="0%" style="stop-color:#8b5cf6;stop-opacity:0.3"/>
+                            <stop offset="100%" style="stop-color:#8b5cf6;stop-opacity:0"/>
+                        </linearGradient>
+                        <linearGradient id="throughput-out-gradient" x1="0%" y1="0%" x2="0%" y2="100%">
+                            <stop offset="0%" style="stop-color:#06b6d4;stop-opacity:0.3"/>
+                            <stop offset="100%" style="stop-color:#06b6d4;stop-opacity:0"/>
+                        </linearGradient>
+                    </defs>
+                    <g class="chart-grid">
+                        <line x1="50" y1="20" x2="580" y2="20" stroke="var(--border)" stroke-dasharray="4"/>
+                        <line x1="50" y1="70" x2="580" y2="70" stroke="var(--border)" stroke-dasharray="4"/>
+                        <line x1="50" y1="120" x2="580" y2="120" stroke="var(--border)" stroke-dasharray="4"/>
+                        <line x1="50" y1="170" x2="580" y2="170" stroke="var(--border)" stroke-dasharray="4"/>
+                    </g>
+                    <g class="chart-axis-y">
+                        <text x="45" y="25" fill="var(--text-secondary)" font-size="10" text-anchor="end">100MB</text>
+                        <text x="45" y="75" fill="var(--text-secondary)" font-size="10" text-anchor="end">75MB</text>
+                        <text x="45" y="125" fill="var(--text-secondary)" font-size="10" text-anchor="end">50MB</text>
+                        <text x="45" y="175" fill="var(--text-secondary)" font-size="10" text-anchor="end">25MB</text>
+                    </g>
+                    <path class="chart-area" d="M50,130 Q150,110 250,120 T450,100 T550,115 L550,170 Z" fill="url(#throughput-in-gradient)"/>
+                    <path class="chart-line" d="M50,130 Q150,110 250,120 T450,100 T550,115" fill="none" stroke="#8b5cf6" stroke-width="2"/>
+                    <path class="chart-area" d="M50,150 Q150,140 250,145 T450,130 T550,140 L550,170 Z" fill="url(#throughput-out-gradient)"/>
+                    <path class="chart-line" d="M50,150 Q150,140 250,145 T450,130 T550,140" fill="none" stroke="#06b6d4" stroke-width="2"/>
+                </svg>
+            </div>
+        </div>
+    </div>
+
+    <!-- Individual Metrics Table -->
+    <div class="metrics-table-section">
+        <div class="section-header">
+            <h3></h3>
+                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                    <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
+                    <polyline points="14 2 14 8 20 8"></polyline>
+                    <line x1="16" y1="13" x2="8" y2="13"></line>
+                    <line x1="16" y1="17" x2="8" y2="17"></line>
+                </svg>
+                All Metrics
+            </h3>
+            <div class="section-actions">
+                <div class="search-box">
+                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                        <circle cx="11" cy="11" r="8"></circle>
+                        <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
+                    </svg>
+                    <input type="text" id="metric-search" placeholder="Search metrics..." onkeyup="filterMetrics(this.value)">
+                </div>
+                <select id="metric-category" onchange="filterByCategory(this.value)">
+                    <option value="all">All Categories</option>
+                    <option value="http">HTTP</option>
+                    <option value="system">System</option>
+                    <option value="database">Database</option>
+                    <option value="cache">Cache</option>
+                    <option value="queue">Queue</option>
+                </select>
+            </div>
+        </div>
+        <div class="metrics-table-container">
+            <table class="metrics-table" id="metrics-table"
+                   hx-get="/api/analytics/metrics/list"
+                   hx-trigger="load"
+                   hx-swap="innerHTML">
+                <thead>
+                    <tr>
+                        <th>Metric Name</th>
+                        <th>Type</th>
+                        <th>Value</th>
+                        <th>Category</th>
+                        <th>Description</th>
+                        <th>Actions</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td colspan="6" class="loading-cell">Loading metrics...</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+    </div>
+</div>
+
+<style>
+    .metrics-container {
+        display: flex;
+        flex-direction: column;
+        gap: 1.5rem;
+    }
+
+    /* Header */
+    .metrics-header {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        flex-wrap: wrap;
+        gap: 1rem;
+    }
+
+    .header-info h2 {
+        display: flex;
+        align-items: center;
+        gap: 0.5rem;
+        font-size: 1.25rem;
+        font-weight: 600;
+        color: var(--text);
+        margin-bottom: 0.25rem;
+    }
+
+    .header-info h2 svg {
+        color: var(--primary);
+    }
+
+    .last-sync {
+        font-size: 0.75rem;
+        color: var(--text-secondary);
+    }
+
+    .header-actions {
+        display: flex;
+        align-items: center;
+        gap: 0.5rem;
+    }
+
+    .header-actions select {
+        background: var(--surface);
+        border: 1px solid var(--border);
+        color: var(--text);
+        padding: 0.5rem 0.75rem;
+        border-radius: 6px;
+        font-size: 0.8125rem;
+        cursor: pointer;
+    }
+
+    .header-actions select:focus {
+        outline: none;
+        border-color: var(--primary);
+    }
+
+    .action-btn {
+        display: flex;
+        align-items: center;
+        gap: 0.375rem;
+        padding: 0.5rem 0.875rem;
+        background: var(--primary);
+        color: white;
+        border: none;
+        border-radius: 6px;
+        font-size: 0.8125rem;
+        font-weight: 500;
+        cursor: pointer;
+        text-decoration: none;
+        transition: all 0.2s ease;
+    }
+
+    .action-btn:hover {
+        background: var(--primary-hover);
+    }
+
+    .action-btn.secondary {
+        background: var(--surface);
+        color: var(--text);
+        border: 1px solid var(--border);
+    }
+
+    .action-btn.secondary:hover {
+        background: var(--surface-hover);
+        border-color: var(--primary);
+    }
+
+    /* Key Metrics */
+    .key-metrics {
+        display: grid;
+        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
+        gap: 1rem;
+    }
+
+    .metric-card {
+        display: flex;
+        align-items: center;
+        gap: 1rem;
+        padding: 1rem 1.25rem;
+        background: var(--surface);
+        border: 1px solid var(--border);
+        border-radius: 10px;
+        transition: all 0.2s ease;
+    }
+
+    .metric-card:hover {
+        border-color: var(--primary);
+        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+    }
+
+    .metric-icon {
+        width: 44px;
+        height: 44px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        border-radius: 10px;
+        flex-shrink: 0;
+    }
+
+    .metric-icon.requests { background: var(--primary-light); color: var(--primary); }
+    .metric-icon.latency { background: rgba(34, 197, 94, 0.1); color: var(--success); }
+    .metric-icon.errors { background: rgba(239, 68, 68, 0.1); color: var(--error); }
+    .metric-icon.users { background: rgba(139, 92, 246, 0.1); color: #8b5cf6; }
+    .metric-icon.conversations { background: rgba(6, 182, 212, 0.1); color: #06b6d4; }
+    .metric-icon.uptime { background: rgba(245, 158, 11, 0.1); color: var(--warning); }
+
+    .metric-info {
+        flex: 1;
+        min-width: 0;
+    }
+
+    .metric-value {
+        display: block;
+        font-size: 1.375rem;
+        font-weight: 700;
+        color: var(--text);
+        font-family: 'SF Mono', 'Monaco', 'Inconsolata', monospace;
+    }
+
+    .metric-label {
+        font-size: 0.75rem;
+        color: var(--text-secondary);
+    }
+
+    .metric-trend {
+        display: flex;
+        align-items: center;
+        gap: 0.25rem;
+        font-size: 0.75rem;
+        font-weight: 500;
+        padding: 0.25rem 0.5rem;
+        border-radius: 4px;
+    }
+
+    .metric-trend.up {
+        background: rgba(34, 197, 94, 0.1);
+        color: var(--success);
+    }
+
+    .metric-trend.down {
+        background: rgba(239, 68, 68, 0.1);
+        color: var(--error);
+    }
+
+    .metric-trend.neutral {
+        background: var(--bg);
+        color: var(--text-secondary);
+    }
+
+    /* Charts Grid */
+    .charts-grid {
+        display: grid;
+        grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
+        gap: 1rem;
+    }
+
+    .chart-panel {
+        background: var(--surface);
+        border: 1px solid var(--border);
+        border-radius: 12px;
+        overflow: hidden;
+    }
+
+    .chart-header {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 1rem 1.25rem;
+        border-bottom: 1px solid var(--border);
+    }
+
+    .chart-header h3 {
+        font-size: 0.9375rem;
+        font-weight: 600;
+        color: var(--text);
+    }
+
+    .chart-controls select {
+        background: var(--bg);
+        border: 1px solid var(--border);
+        color: var(--text);
+        padding: 0.25rem 0.5rem;
+        border-radius: 4px;
+        font-size: 0.75rem;
+        cursor: pointer;
+    }
+
+    .chart-legend {
+        display: flex;
+        gap: 0.75rem;
+    }
+
+    .legend-item {
+        display: flex;
+        align-items: center;
+        gap: 0.375rem;
+        font-size: 0.75rem;
+        color: var(--text-secondary);
+    }
+
+    .legend-dot {
+        width: 8px;
+        height: 8px;
+        border-radius: 2px;
+    }
+
+    .legend-dot.p50 { background: var(--success); }
+    .legend-dot.p95 { background: var(--warning); }
+    .legend-dot.p99 { background: var(--error); }
+    .legend-dot.error-4xx { background: var(--warning); }
+    .legend-dot.error-5xx { background: var(--error); }
+    .legend-dot.incoming { background: #8b5cf6; }
+    .legend-dot.outgoing { background: #06b6d4; }
+
+    .chart-body {
+        padding: 1rem;
+        min-height: 220px;
+    }
+
+    .chart-svg {
+        width: 100%;
+        height: 180px;
+    }
+
+    /* Metrics Table */
+    .metrics-table-section {
+        background: var(--surface);
+        border: 1px solid var(--border);
+        border-radius: 12px;
+        overflow: hidden;
+    }
+
+    .section-header {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 1rem 1.25rem;
+        border-bottom: 1px solid var(--border);
+        flex-wrap: wrap;
+        gap: 1rem;
+    }
+
+    .section-header h3 {
+        display: flex;
+        align-items: center;
+        gap: 0.5rem;
+        font-size: 0.9375rem;
+        font-weight: 600;
+        color: var(--text);
+    }
+
+    .section-header h3 svg {
+        color: var(--primary);
+    }
+
+    .section-actions {
+        display: flex;
+        gap: 0.5rem;
+    }
+
+    .search-box {
+        display: flex;
+        align-items: center;
+        gap: 0.5rem;
+        background: var(--bg);
+        border: 1px solid var(--border);
+        border-radius: 6px;
+        padding: 0.375rem 0.625rem;
+    }
+
+    .search-box svg {
+        color: var(--text-secondary);
+        flex-shrink: 0;
+    }
+
+    .search-box input {
+        background: transparent;
+        border: none;
+        color: var(--text);
+        font-size: 0.8125rem;
+        width: 160px;
+        outline: none;
+    }
+
+    .search-box input::placeholder {
+        color: var(--text-secondary);
+    }
+
+    .section-actions select {
+        background: var(--bg);
+        border: 1px solid var(--border);
+        color: var(--text);
+        padding: 0.375rem 0.625rem;
+        border-radius: 6px;
+        font-size: 0.8125rem;
+        cursor: pointer;
+    }
+
+    .metrics-table-container {
+        overflow-x: auto;
+    }
+
+    .metrics-table {
+        width: 100%;
+        border-collapse: collapse;
+    }
+
+    .metrics-table th,
+    .metrics-table td {
+        padding: 0.75rem 1rem;
+        text-align: left;
+        border-bottom: 1px solid var(--border);
+    }
+
+    .metrics-table th {
+        font-size: 0.6875rem;
+        font-weight: 600;
+        color: var(--text-secondary);
+        text-transform: uppercase;
+        letter-spacing: 0.5px;
+        background: var(--bg);
+    }
+
+    .metrics-table td {
+        font-size: 0.8125rem;
+        color: var(--text);
+    }
+
+    .metrics-table tr:last-child td {
+        border-bottom: none;
+    }
+
+    .metrics-table tr:hover td {
+        background: var(--surface-hover);
+    }
+
+    .metrics-table .metric-name {
+        font-family: 'SF Mono', 'Monaco', 'Inconsolata', monospace;
+        font-weight: 500;
+    }
+
+    .metrics-table .metric-type {
+        display: inline-block;
+        padding: 0.125rem 0.375rem;
+        background: var(--primary-light);
+        color: var(--primary);
+        border-radius: 4px;
+        font-size: 0.6875rem;
+        font-weight: 500;
+        text-transform: uppercase;
+    }
+
+    .metrics-table .metric-value-cell {
+        font-family: 'SF Mono', 'Monaco', 'Inconsolata', monospace;
+        font-weight: 600;
+    }
+
+    .metrics-table .metric-category {
+        color: var(--text-secondary);
+    }
+
+    .metrics-table .metric-desc {
+        color: var(--text-secondary);
+        font-size: 0.75rem;
+        max-width: 200px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
+
+    .metrics-table .action-link {
+        color: var(--primary);
+        text-decoration: none;
+        font-size: 0.75rem;
+    }
+
+    .metrics-table .action-link:hover {
+        text-decoration: underline;
+    }
+
+    .loading-cell {
+        text-align: center !important;
+        color: var(--text-secondary) !important;
+        padding: 2rem !important;
+    }
+
+    /* Responsive */
+    @media (max-width: 1024px) {
+        .charts-grid {
+            grid-template-columns: 1fr;
+        }
+    }
+
+    @media (max-width: 768px) {
+        .metrics-header {
+            flex-direction: column;
+            align-items: stretch;
+        }
+
+        .header-actions {
+            flex-wrap: wrap;
+        }
+
+        .key-metrics {
+            grid-template-columns: repeat(2, 1fr);
+        }
+
+        .metric-card {
+            flex-direction: column;
+            text-align: center;
+            padding: 1rem;
+        }
+
+        .metric-trend {
+            margin-top: 0.5rem;
+        }
+
+        .section-header {
+            flex-direction: column;
+            align-items: stretch;
+        }
+
+        .section-actions {
+            flex-wrap: wrap;
+        }
+
+        .search-box {
+            flex: 1;
+        }
+
+        .search-box input {
+            width: 100%;
+        }
+    }
+
+    @media (max-width: 480px) {
+        .key-metrics {
+            grid-template-columns: 1fr;
+        }
+    }
+</style>
+
+<script>
+    function updateMetricsRange(range) {
+        localStorage.setItem('metrics-time-range', range);
+        refreshMetrics();
+    }
+
+    function refreshMetrics() {
+        // Refresh all metric components
+        htmx.trigger('.key-metrics', 'refresh');
+        htmx.trigger('#requests-chart', 'refresh');
+        htmx.trigger('#latency-chart', 'refresh');
+        htmx.trigger('#errors-chart', 'refresh');
+        htmx.trigger('#throughput-chart', 'refresh');
+    }
+
+    function updateChartType(chart, type) {
+        // This would update the chart visualization type
+        console.log(`Updating ${chart} chart to ${type} type`);
+        // Implementation depends on charting library
+    }
+
+    function filterMetrics(query) {
+        const rows = document.querySelectorAll('.metrics-table tbody tr');
+        const lowerQuery = query.toLowerCase();
+
+        rows.forEach(row => {
+            const text = row.textContent.toLowerCase();
+            row.style.display = text.includes(lowerQuery) ? '' : 'none';
+        });
+    }
+
+    function filterByCategory(category) {
+        const rows = document.querySelectorAll('.metrics-table tbody tr');
+
+        rows.forEach(row => {
+            if (category === 'all') {
+                row.style.display = '';
+            } else {
+                const rowCategory = row.dataset.category || '';
+                row.style.display = rowCategory === category ? '' : 'none';
+            }
+        });
+    }
+
+    // Initialize
+    document.addEventListener('DOMContentLoaded', function() {
+        // Restore time range preference
+        const savedRange = localStorage.getItem('metrics-time-range');
+        if (savedRange) {
+            document.getElementById('metrics-time-range').value = savedRange;
+        }
+    });
+</script>
diff --git a/ui/suite/monitoring/resources.html b/ui/suite/monitoring/resources.html
new file mode 100644
index 0000000..476588b
--- /dev/null
+++ b/ui/suite/monitoring/resources.html
@@ -0,0 +1,937 @@
+<div class="resources-container">
+    <!-- Resource Overview Cards -->
+    <div class="resource-cards">
+        <!-- CPU Card -->
+        <div class="resource-card cpu-card"
+             hx-get="/api/monitoring/resources/cpu"
+             hx-trigger="load, every 5s"
+             hx-swap="innerHTML">
+            <div class="card-icon">
+                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                    <rect x="4" y="4" width="16" height="16" rx="2"></rect>
+                    <rect x="9" y="9" width="6" height="6"></rect>
+                    <line x1="9" y1="1" x2="9" y2="4"></line>
+                    <line x1="15" y1="1" x2="15" y2="4"></line>
+                    <line x1="9" y1="20" x2="9" y2="23"></line>
+                    <line x1="15" y1="20" x2="15" y2="23"></line>
+                    <line x1="20" y1="9" x2="23" y2="9"></line>
+                    <line x1="20" y1="14" x2="23" y2="14"></line>
+                    <line x1="1" y1="9" x2="4" y2="9"></line>
+                    <line x1="1" y1="14" x2="4" y2="14"></line>
+                </svg>
+            </div>
+            <div class="card-content">
+                <span class="card-label">CPU Usage</span>
+                <span class="card-value">--%</span>
+                <div class="progress-bar">
+                    <div class="progress-fill cpu" style="width: 0%"></div>
+                </div>
+                <span class="card-detail">-- cores @ -- GHz</span>
+            </div>
+        </div>
+
+        <!-- Memory Card -->
+        <div class="resource-card memory-card"
+             hx-get="/api/monitoring/resources/memory"
+             hx-trigger="load, every 5s"
+             hx-swap="innerHTML">
+            <div class="card-icon">
+                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                    <rect x="2" y="6" width="20" height="12" rx="2"></rect>
+                    <line x1="6" y1="12" x2="6" y2="12"></line>
+                    <line x1="10" y1="12" x2="10" y2="12"></line>
+                    <line x1="14" y1="12" x2="14" y2="12"></line>
+                    <line x1="18" y1="12" x2="18" y2="12"></line>
+                </svg>
+            </div>
+            <div class="card-content">
+                <span class="card-label">Memory Usage</span>
+                <span class="card-value">--%</span>
+                <div class="progress-bar">
+                    <div class="progress-fill memory" style="width: 0%"></div>
+                </div>
+                <span class="card-detail">-- GB / -- GB</span>
+            </div>
+        </div>
+
+        <!-- Disk Card -->
+        <div class="resource-card disk-card"
+             hx-get="/api/monitoring/resources/disk"
+             hx-trigger="load, every 30s"
+             hx-swap="innerHTML">
+            <div class="card-icon">
+                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                    <ellipse cx="12" cy="5" rx="9" ry="3"></ellipse>
+                    <path d="M21 12c0 1.66-4 3-9 3s-9-1.34-9-3"></path>
+                    <path d="M3 5v14c0 1.66 4 3 9 3s9-1.34 9-3V5"></path>
+                </svg>
+            </div>
+            <div class="card-content">
+                <span class="card-label">Disk Usage</span>
+                <span class="card-value">--%</span>
+                <div class="progress-bar">
+                    <div class="progress-fill disk" style="width: 0%"></div>
+                </div>
+                <span class="card-detail">-- GB / -- GB</span>
+            </div>
+        </div>
+
+        <!-- Network Card -->
+        <div class="resource-card network-card"
+             hx-get="/api/monitoring/resources/network"
+             hx-trigger="load, every 5s"
+             hx-swap="innerHTML">
+            <div class="card-icon">
+                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                    <path d="M5 12.55a11 11 0 0 1 14.08 0"></path>
+                    <path d="M1.42 9a16 16 0 0 1 21.16 0"></path>
+                    <path d="M8.53 16.11a6 6 0 0 1 6.95 0"></path>
+                    <line x1="12" y1="20" x2="12.01" y2="20"></line>
+                </svg>
+            </div>
+            <div class="card-content">
+                <span class="card-label">Network I/O</span>
+                <span class="card-value">-- MB/s</span>
+                <div class="network-stats">
+                    <span class="net-stat">
+                        <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                            <polyline points="18 15 12 9 6 15"></polyline>
+                        </svg>
+                        -- MB/s
+                    </span>
+                    <span class="net-stat">
+                        <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                            <polyline points="6 9 12 15 18 9"></polyline>
+                        </svg>
+                        -- MB/s
+                    </span>
+                </div>
+                <span class="card-detail">-- connections active</span>
+            </div>
+        </div>
+    </div>
+
+    <!-- Charts Section -->
+    <div class="charts-section">
+        <!-- CPU Chart -->
+        <div class="chart-card">
+            <div class="chart-header">
+                <h3>
+                    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                        <rect x="4" y="4" width="16" height="16" rx="2"></rect>
+                        <rect x="9" y="9" width="6" height="6"></rect>
+                    </svg>
+                    CPU Usage Over Time
+                </h3>
+                <div class="chart-legend">
+                    <span class="legend-item"><span class="legend-color cpu"></span>User</span>
+                    <span class="legend-item"><span class="legend-color system"></span>System</span>
+                    <span class="legend-item"><span class="legend-color io"></span>I/O Wait</span>
+                </div>
+            </div>
+            <div class="chart-container" id="cpu-chart"
+                 hx-get="/api/monitoring/charts/cpu"
+                 hx-trigger="load, every 10s"
+                 hx-swap="innerHTML">
+                <div class="chart-placeholder">
+                    <svg viewBox="0 0 400 150" class="sparkline-chart">
+                        <defs>
+                            <linearGradient id="cpu-gradient" x1="0%" y1="0%" x2="0%" y2="100%">
+                                <stop offset="0%" style="stop-color:var(--primary);stop-opacity:0.3"/>
+                                <stop offset="100%" style="stop-color:var(--primary);stop-opacity:0"/>
+                            </linearGradient>
+                        </defs>
+                        <path d="M0,150 L0,100 Q50,80 100,90 T200,70 T300,85 T400,75 L400,150 Z" fill="url(#cpu-gradient)"/>
+                        <path d="M0,100 Q50,80 100,90 T200,70 T300,85 T400,75" fill="none" stroke="var(--primary)" stroke-width="2"/>
+                    </svg>
+                    <div class="chart-axis-y">
+                        <span></span>100%</span>
+                        <span>50%</span>
+                        <span>0%</span>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <!-- Memory Chart -->
+        <div class="chart-card">
+            <div class="chart-header">
+                <h3>
+                    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                        <rect x="2" y="6" width="20" height="12" rx="2"></rect>
+                        <line x1="6" y1="12" x2="6" y2="12"></line>
+                        <line x1="10" y1="12" x2="10" y2="12"></line>
+                    </svg>
+                    Memory Usage Over Time
+                </h3>
+                <div class="chart-legend">
+                    <span class="legend-item"><span class="legend-color memory"></span>Used</span>
+                    <span class="legend-item"><span class="legend-color cached"></span>Cached</span>
+                    <span class="legend-item"><span class="legend-color buffers"></span>Buffers</span>
+                </div>
+            </div>
+            <div class="chart-container" id="memory-chart"
+                 hx-get="/api/monitoring/charts/memory"
+                 hx-trigger="load, every 10s"
+                 hx-swap="innerHTML">
+                <div class="chart-placeholder">
+                    <svg viewBox="0 0 400 150" class="sparkline-chart">
+                        <defs>
+                            <linearGradient id="memory-gradient" x1="0%" y1="0%" x2="0%" y2="100%">
+                                <stop offset="0%" style="stop-color:var(--success);stop-opacity:0.3"/>
+                                <stop offset="100%" style="stop-color:var(--success);stop-opacity:0"/>
+                            </linearGradient>
+                        </defs>
+                        <path d="M0,150 L0,60 Q50,55 100,58 T200,52 T300,55 T400,50 L400,150 Z" fill="url(#memory-gradient)"/>
+                        <path d="M0,60 Q50,55 100,58 T200,52 T300,55 T400,50" fill="none" stroke="var(--success)" stroke-width="2"/>
+                    </svg>
+                    <div class="chart-axis-y">
+                        <span>16 GB</span>
+                        <span>8 GB</span>
+                        <span>0 GB</span>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- Detailed Resources -->
+    <div class="detailed-section">
+        <!-- Disk Breakdown -->
+        <div class="detail-card">
+            <div class="detail-header">
+                <h3>
+                    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                        <ellipse cx="12" cy="5" rx="9" ry="3"></ellipse>
+                        <path d="M3 5v14c0 1.66 4 3 9 3s9-1.34 9-3V5"></path>
+                    </svg>
+                    Disk Partitions
+                </h3>
+                <button class="refresh-btn" onclick="refreshDiskInfo()">
+                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                        <polyline points="23 4 23 10 17 10"></polyline>
+                        <path d="M20.49 15a9 9 0 1 1-2.12-9.36L23 10"></path>
+                    </svg>
+                </button>
+            </div>
+            <div class="detail-content" id="disk-partitions"
+                 hx-get="/api/monitoring/resources/disk/partitions"
+                 hx-trigger="load, every 60s"
+                 hx-swap="innerHTML">
+                <div class="partition-row">
+                    <div class="partition-info">
+                        <span class="partition-name">/</span>
+                        <span class="partition-type">ext4</span>
+                    </div>
+                    <div class="partition-usage">
+                        <div class="usage-bar">
+                            <div class="usage-fill" style="width: 0%"></div>
+                        </div>
+                        <span class="usage-text">-- GB / -- GB</span>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <!-- Process List -->
+        <div class="detail-card">
+            <div class="detail-header">
+                <h3>
+                    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                        <line x1="4" y1="21" x2="4" y2="14"></line>
+                        <line x1="4" y1="10" x2="4" y2="3"></line>
+                        <line x1="12" y1="21" x2="12" y2="12"></line>
+                        <line x1="12" y1="8" x2="12" y2="3"></line>
+                        <line x1="20" y1="21" x2="20" y2="16"></line>
+                        <line x1="20" y1="12" x2="20" y2="3"></line>
+                        <line x1="1" y1="14" x2="7" y2="14"></line>
+                        <line x1="9" y1="8" x2="15" y2="8"></line>
+                        <line x1="17" y1="16" x2="23" y2="16"></line>
+                    </svg>
+                    Top Processes
+                </h3>
+                <select id="process-sort" onchange="sortProcesses(this.value)">
+                    <option value="cpu">Sort by CPU</option>
+                    <option value="memory">Sort by Memory</option>
+                    <option value="name">Sort by Name</option>
+                </select>
+            </div>
+            <div class="detail-content" id="process-list"
+                 hx-get="/api/monitoring/resources/processes"
+                 hx-trigger="load, every 5s"
+                 hx-swap="innerHTML">
+                <table class="process-table">
+                    <thead>
+                        <tr>
+                            <th>PID</th>
+                            <th>Process</th>
+                            <th>CPU</th>
+                            <th>Memory</th>
+                            <th>Status</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td colspan="5" class="loading-row">Loading processes...</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </div>
+
+        <!-- Network Interfaces -->
+        <div class="detail-card">
+            <div class="detail-header">
+                <h3>
+                    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                        <rect x="2" y="2" width="20" height="8" rx="2" ry="2"></rect>
+                        <rect x="2" y="14" width="20" height="8" rx="2" ry="2"></rect>
+                        <line x1="6" y1="6" x2="6.01" y2="6"></line>
+                        <line x1="6" y1="18" x2="6.01" y2="18"></line>
+                    </svg>
+                    Network Interfaces
+                </h3>
+            </div>
+            <div class="detail-content" id="network-interfaces"
+                 hx-get="/api/monitoring/resources/network/interfaces"
+                 hx-trigger="load, every 10s"
+                 hx-swap="innerHTML">
+                <div class="interface-row">
+                    <div class="interface-info">
+                        <span class="interface-name">eth0</span>
+                        <span class="interface-ip">--</span>
+                    </div>
+                    <div class="interface-stats">
+                        <span class="stat-in">
+                            <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                                <polyline points="18 15 12 9 6 15"></polyline>
+                            </svg>
+                            -- MB/s
+                        </span>
+                        <span class="stat-out">
+                            <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                                <polyline points="6 9 12 15 18 9"></polyline>
+                            </svg>
+                            -- MB/s
+                        </span>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <!-- System Info -->
+        <div class="detail-card">
+            <div class="detail-header">
+                <h3>
+                    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                        <circle cx="12" cy="12" r="10"></circle>
+                        <line x1="12" y1="16" x2="12" y2="12"></line>
+                        <line x1="12" y1="8" x2="12.01" y2="8"></line>
+                    </svg>
+                    System Information
+                </h3>
+            </div>
+            <div class="detail-content system-info"
+                 hx-get="/api/monitoring/resources/system"
+                 hx-trigger="load"
+                 hx-swap="innerHTML">
+                <div class="info-row">
+                    <span class="info-label">Hostname</span>
+                    <span class="info-value">--</span>
+                </div>
+                <div class="info-row">
+                    <span class="info-label">OS</span>
+                    <span class="info-value">--</span>
+                </div>
+                <div class="info-row">
+                    <span class="info-label">Kernel</span>
+                    <span class="info-value">--</span>
+                </div>
+                <div class="info-row">
+                    <span class="info-label">Uptime</span>
+                    <span class="info-value">--</span>
+                </div>
+                <div class="info-row">
+                    <span class="info-label">Load Average</span>
+                    <span class="info-value">--</span>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+
+<style>
+    .resources-container {
+        display: flex;
+        flex-direction: column;
+        gap: 1.5rem;
+    }
+
+    /* Resource Cards */
+    .resource-cards {
+        display: grid;
+        grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
+        gap: 1rem;
+    }
+
+    .resource-card {
+        display: flex;
+        align-items: flex-start;
+        gap: 1rem;
+        padding: 1.25rem;
+        background: var(--surface);
+        border: 1px solid var(--border);
+        border-radius: 12px;
+        transition: all 0.2s ease;
+    }
+
+    .resource-card:hover {
+        border-color: var(--primary);
+        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+    }
+
+    .card-icon {
+        width: 48px;
+        height: 48px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        background: var(--primary-light);
+        border-radius: 10px;
+        color: var(--primary);
+        flex-shrink: 0;
+    }
+
+    .cpu-card .card-icon { color: var(--primary); background: var(--primary-light); }
+    .memory-card .card-icon { color: var(--success); background: rgba(34, 197, 94, 0.1); }
+    .disk-card .card-icon { color: var(--warning); background: rgba(245, 158, 11, 0.1); }
+    .network-card .card-icon { color: #8b5cf6; background: rgba(139, 92, 246, 0.1); }
+
+    .card-content {
+        flex: 1;
+        min-width: 0;
+    }
+
+    .card-label {
+        display: block;
+        font-size: 0.75rem;
+        color: var(--text-secondary);
+        text-transform: uppercase;
+        letter-spacing: 0.5px;
+        margin-bottom: 0.25rem;
+    }
+
+    .card-value {
+        display: block;
+        font-size: 1.75rem;
+        font-weight: 700;
+        color: var(--text);
+        font-family: 'SF Mono', 'Monaco', 'Inconsolata', monospace;
+        margin-bottom: 0.5rem;
+    }
+
+    .card-value.warning { color: var(--warning); }
+    .card-value.error { color: var(--error); }
+
+    .progress-bar {
+        height: 6px;
+        background: var(--bg);
+        border-radius: 3px;
+        overflow: hidden;
+        margin-bottom: 0.5rem;
+    }
+
+    .progress-fill {
+        height: 100%;
+        border-radius: 3px;
+        transition: width 0.5s ease;
+    }
+
+    .progress-fill.cpu { background: var(--primary); }
+    .progress-fill.memory { background: var(--success); }
+    .progress-fill.disk { background: var(--warning); }
+
+    .card-detail {
+        font-size: 0.75rem;
+        color: var(--text-secondary);
+    }
+
+    .network-stats {
+        display: flex;
+        gap: 1rem;
+        margin-bottom: 0.5rem;
+    }
+
+    .net-stat {
+        display: flex;
+        align-items: center;
+        gap: 0.25rem;
+        font-size: 0.8125rem;
+        color: var(--text);
+    }
+
+    .net-stat:first-child svg { color: var(--success); }
+    .net-stat:last-child svg { color: var(--error); }
+
+    /* Charts Section */
+    .charts-section {
+        display: grid;
+        grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
+        gap: 1rem;
+    }
+
+    .chart-card {
+        background: var(--surface);
+        border: 1px solid var(--border);
+        border-radius: 12px;
+        overflow: hidden;
+    }
+
+    .chart-header {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 1rem 1.25rem;
+        border-bottom: 1px solid var(--border);
+    }
+
+    .chart-header h3 {
+        display: flex;
+        align-items: center;
+        gap: 0.5rem;
+        font-size: 0.9375rem;
+        font-weight: 600;
+        color: var(--text);
+    }
+
+    .chart-header h3 svg {
+        color: var(--primary);
+    }
+
+    .chart-legend {
+        display: flex;
+        gap: 1rem;
+    }
+
+    .legend-item {
+        display: flex;
+        align-items: center;
+        gap: 0.375rem;
+        font-size: 0.75rem;
+        color: var(--text-secondary);
+    }
+
+    .legend-color {
+        width: 10px;
+        height: 10px;
+        border-radius: 2px;
+    }
+
+    .legend-color.cpu { background: var(--primary); }
+    .legend-color.system { background: var(--warning); }
+    .legend-color.io { background: var(--error); }
+    .legend-color.memory { background: var(--success); }
+    .legend-color.cached { background: #8b5cf6; }
+    .legend-color.buffers { background: var(--info); }
+
+    .chart-container {
+        padding: 1rem;
+        min-height: 180px;
+    }
+
+    .chart-placeholder {
+        position: relative;
+        height: 150px;
+    }
+
+    .sparkline-chart {
+        width: 100%;
+        height: 100%;
+    }
+
+    .chart-axis-y {
+        position: absolute;
+        right: 0;
+        top: 0;
+        bottom: 0;
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+        font-size: 0.625rem;
+        color: var(--text-secondary);
+        padding: 0.25rem 0;
+    }
+
+    /* Detailed Section */
+    .detailed-section {
+        display: grid;
+        grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
+        gap: 1rem;
+    }
+
+    .detail-card {
+        background: var(--surface);
+        border: 1px solid var(--border);
+        border-radius: 12px;
+        overflow: hidden;
+    }
+
+    .detail-header {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 1rem 1.25rem;
+        border-bottom: 1px solid var(--border);
+    }
+
+    .detail-header h3 {
+        display: flex;
+        align-items: center;
+        gap: 0.5rem;
+        font-size: 0.9375rem;
+        font-weight: 600;
+        color: var(--text);
+    }
+
+    .detail-header h3 svg {
+        color: var(--primary);
+    }
+
+    .detail-header select {
+        background: var(--bg);
+        border: 1px solid var(--border);
+        color: var(--text);
+        padding: 0.375rem 0.625rem;
+        border-radius: 4px;
+        font-size: 0.75rem;
+        cursor: pointer;
+    }
+
+    .detail-header select:focus {
+        outline: none;
+        border-color: var(--primary);
+    }
+
+    .refresh-btn {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 28px;
+        height: 28px;
+        background: transparent;
+        border: 1px solid var(--border);
+        border-radius: 4px;
+        color: var(--text-secondary);
+        cursor: pointer;
+        transition: all 0.2s ease;
+    }
+
+    .refresh-btn:hover {
+        background: var(--surface-hover);
+        color: var(--primary);
+        border-color: var(--primary);
+    }
+
+    .detail-content {
+        padding: 1rem 1.25rem;
+        max-height: 300px;
+        overflow-y: auto;
+    }
+
+    /* Partition Rows */
+    .partition-row {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 0.75rem 0;
+        border-bottom: 1px solid var(--border);
+    }
+
+    .partition-row:last-child {
+        border-bottom: none;
+    }
+
+    .partition-info {
+        display: flex;
+        flex-direction: column;
+        gap: 0.125rem;
+    }
+
+    .partition-name {
+        font-size: 0.875rem;
+        font-weight: 500;
+        color: var(--text);
+        font-family: 'SF Mono', 'Monaco', 'Inconsolata', monospace;
+    }
+
+    .partition-type {
+        font-size: 0.6875rem;
+        color: var(--text-secondary);
+    }
+
+    .partition-usage {
+        display: flex;
+        align-items: center;
+        gap: 0.75rem;
+        flex: 1;
+        max-width: 200px;
+        margin-left: 1rem;
+    }
+
+    .usage-bar {
+        flex: 1;
+        height: 8px;
+        background: var(--bg);
+        border-radius: 4px;
+        overflow: hidden;
+    }
+
+    .usage-fill {
+        height: 100%;
+        background: var(--primary);
+        border-radius: 4px;
+        transition: width 0.5s ease;
+    }
+
+    .usage-fill.warning { background: var(--warning); }
+    .usage-fill.error { background: var(--error); }
+
+    .usage-text {
+        font-size: 0.6875rem;
+        color: var(--text-secondary);
+        white-space: nowrap;
+    }
+
+    /* Process Table */
+    .process-table {
+        width: 100%;
+        border-collapse: collapse;
+    }
+
+    .process-table th,
+    .process-table td {
+        padding: 0.625rem 0.5rem;
+        text-align: left;
+        border-bottom: 1px solid var(--border);
+    }
+
+    .process-table th {
+        font-size: 0.6875rem;
+        font-weight: 600;
+        color: var(--text-secondary);
+        text-transform: uppercase;
+        letter-spacing: 0.5px;
+    }
+
+    .process-table td {
+        font-size: 0.8125rem;
+        color: var(--text);
+    }
+
+    .process-table td:first-child {
+        font-family: 'SF Mono', 'Monaco', 'Inconsolata', monospace;
+        color: var(--text-secondary);
+    }
+
+    .process-table td:nth-child(3),
+    .process-table td:nth-child(4) {
+        font-family: 'SF Mono', 'Monaco', 'Inconsolata', monospace;
+    }
+
+    .process-table tr:last-child td {
+        border-bottom: none;
+    }
+
+    .loading-row {
+        text-align: center !important;
+        color: var(--text-secondary) !important;
+        padding: 2rem !important;
+    }
+
+    .process-status {
+        display: inline-block;
+        padding: 0.125rem 0.375rem;
+        border-radius: 4px;
+        font-size: 0.6875rem;
+        font-weight: 500;
+    }
+
+    .process-status.running {
+        background: rgba(34, 197, 94, 0.1);
+        color: var(--success);
+    }
+
+    .process-status.sleeping {
+        background: var(--primary-light);
+        color: var(--primary);
+    }
+
+    .process-status.stopped {
+        background: rgba(239, 68, 68, 0.1);
+        color: var(--error);
+    }
+
+    /* Network Interfaces */
+    .interface-row {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 0.75rem 0;
+        border-bottom: 1px solid var(--border);
+    }
+
+    .interface-row:last-child {
+        border-bottom: none;
+    }
+
+    .interface-info {
+        display: flex;
+        flex-direction: column;
+        gap: 0.125rem;
+    }
+
+    .interface-name {
+        font-size: 0.875rem;
+        font-weight: 500;
+        color: var(--text);
+        font-family: 'SF Mono', 'Monaco', 'Inconsolata', monospace;
+    }
+
+    .interface-ip {
+        font-size: 0.6875rem;
+        color: var(--text-secondary);
+    }
+
+    .interface-stats {
+        display: flex;
+        gap: 1rem;
+    }
+
+    .stat-in, .stat-out {
+        display: flex;
+        align-items: center;
+        gap: 0.25rem;
+        font-size: 0.75rem;
+        font-family: 'SF Mono', 'Monaco', 'Inconsolata', monospace;
+        color: var(--text);
+    }
+
+    .stat-in svg { color: var(--success); }
+    .stat-out svg { color: var(--error); }
+
+    /* System Info */
+    .system-info .info-row {
+        display: flex;
+        justify-content: space-between;
+        padding: 0.625rem 0;
+        border-bottom: 1px solid var(--border);
+    }
+
+    .system-info .info-row:last-child {
+        border-bottom: none;
+    }
+
+    .info-label {
+        font-size: 0.8125rem;
+        color: var(--text-secondary);
+    }
+
+    .info-value {
+        font-size: 0.8125rem;
+        color: var(--text);
+        font-family: 'SF Mono', 'Monaco', 'Inconsolata', monospace;
+    }
+
+    /* Responsive */
+    @media (max-width: 768px) {
+        .resource-cards {
+            grid-template-columns: 1fr 1fr;
+        }
+
+        .charts-section {
+            grid-template-columns: 1fr;
+        }
+
+        .chart-header {
+            flex-direction: column;
+            align-items: flex-start;
+            gap: 0.75rem;
+        }
+
+        .detailed-section {
+            grid-template-columns: 1fr;
+        }
+
+        .partition-usage {
+            max-width: 150px;
+        }
+    }
+
+    @media (max-width: 480px) {
+        .resource-cards {
+            grid-template-columns: 1fr;
+        }
+
+        .resource-card {
+            flex-direction: column;
+            text-align: center;
+        }
+
+        .card-icon {
+            margin: 0 auto;
+        }
+    }
+</style>
+
+<script>
+    function refreshDiskInfo() {
+        htmx.trigger('#disk-partitions', 'refresh');
+    }
+
+    function sortProcesses(sortBy) {
+        const sortParam = `?sort=${sortBy}`;
+        htmx.ajax('GET', `/api/monitoring/resources/processes${sortParam}`, {
+            target: '#process-list',
+            swap: 'innerHTML'
+        });
+    }
+
+    // Color-code usage based on percentage
+    function updateUsageColors() {
+        document.querySelectorAll('.card-value').forEach(el => {
+            const value = parseInt(el.textContent);
+            if (value >= 90) {
+                el.classList.add('error');
+                el.classList.remove('warning');
+            } else if (value >= 75) {
+                el.classList.add('warning');
+                el.classList.remove('error');
+            } else {
+                el.classList.remove('warning', 'error');
+            }
+        });
+
+        document.querySelectorAll('.usage-fill, .progress-fill').forEach(el => {
+            const width = parseInt(el.style.width);
+            if (width >= 90) {
+                el.classList.add('error');
+                el.classList.remove('warning');
+            } else if (width >= 75) {
+                el.classList.add('warning');
+                el.classList.remove('error');
+            } else {
+                el.classList.remove('warning', 'error');
+            }
+        });
+    }
+
+    // Run on HTMX swap
+    document.body.addEventListener('htmx:afterSwap', function(evt) {
+        if (evt.target.closest('.resources-container')) {
+            updateUsageColors();
+        }
+    });
+
+    // Initial color update
+    document.addEventListener('DOMContentLoaded', updateUsageColors);
+</script>
diff --git a/ui/suite/monitoring/services.html b/ui/suite/monitoring/services.html
new file mode 100644
index 0000000..fd73fe7
--- /dev/null
+++ b/ui/suite/monitoring/services.html
@@ -0,0 +1,765 @@
+<div class="services-container">
+    <!-- Services Header -->
+    <div class="services-header">
+        <div class="header-stats"
+             hx-get="/api/services/summary"
+             hx-trigger="load, every 10s"
+             hx-swap="innerHTML">
+            <div class="stat-item running">
+                <span class="stat-number">--</span>
+                <span class="stat-label">Running</span>
+            </div>
+            <div class="stat-item warning">
+                <span class="stat-number">--</span>
+                <span class="stat-label">Warning</span>
+            </div>
+            <div class="stat-item stopped">
+                <span class="stat-number">--</span>
+                <span class="stat-label">Stopped</span>
+            </div>
+            <div class="stat-item total">
+                <span class="stat-number">--</span>
+                <span class="stat-label">Total</span>
+            </div>
+        </div>
+        <div class="header-actions">
+            <div class="search-box">
+                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                    <circle cx="11" cy="11" r="8"></circle>
+                    <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
+                </svg>
+                <input type="text"
+                       id="service-search"
+                       placeholder="Search services..."
+                       onkeyup="filterServices(this.value)">
+            </div>
+            <select id="status-filter" onchange="filterByStatus(this.value)">
+                <option value="all">All Status</option>
+                <option value="running">Running</option>
+                <option value="warning">Warning</option>
+                <option value="stopped">Stopped</option>
+            </select>
+            <button class="action-btn" onclick="restartAllServices()" title="Restart All">
+                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                    <polyline points="23 4 23 10 17 10"></polyline>
+                    <path d="M20.49 15a9 9 0 1 1-2.12-9.36L23 10"></path>
+                </svg>
+                Restart All
+            </button>
+        </div>
+    </div>
+
+    <!-- Services Grid -->
+    <div class="services-grid" id="services-grid"
+         hx-get="/api/services/status"
+         hx-trigger="load, every 10s"
+         hx-swap="innerHTML">
+        <!-- Loading placeholder -->
+        <div class="service-card skeleton">
+            <div class="skeleton-line"></div>
+            <div class="skeleton-line short"></div>
+        </div>
+        <div class="service-card skeleton">
+            <div class="skeleton-line"></div>
+            <div class="skeleton-line short"></div>
+        </div>
+        <div class="service-card skeleton">
+            <div class="skeleton-line"></div>
+            <div class="skeleton-line short"></div>
+        </div>
+        <div class="service-card skeleton">
+            <div class="skeleton-line"></div>
+            <div class="skeleton-line short"></div>
+        </div>
+    </div>
+
+    <!-- Service Detail Panel (slides in from right) -->
+    <div class="service-detail-panel" id="service-detail-panel">
+        <div class="panel-header">
+            <h3 id="detail-service-name">Service Details</h3>
+            <button class="close-btn" onclick="closeServiceDetail()">
+                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                    <line x1="18" y1="6" x2="6" y2="18"></line>
+                    <line x1="6" y1="6" x2="18" y2="18"></line>
+                </svg>
+            </button>
+        </div>
+        <div class="panel-content" id="service-detail-content">
+            <!-- Loaded via HTMX -->
+        </div>
+    </div>
+</div>
+
+<!-- Service Card Template (for reference - rendered by server) -->
+<template id="service-card-template">
+    <div class="service-card" data-status="running" data-service="service-name">
+        <div class="card-header">
+            <div class="service-icon">
+                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                    <rect x="2" y="2" width="20" height="8" rx="2" ry="2"></rect>
+                    <rect x="2" y="14" width="20" height="8" rx="2" ry="2"></rect>
+                    <line x1="6" y1="6" x2="6.01" y2="6"></line>
+                    <line x1="6" y1="18" x2="6.01" y2="18"></line>
+                </svg>
+            </div>
+            <div class="status-badge running">
+                <span class="status-dot"></span>
+                <span class="status-text">Running</span>
+            </div>
+        </div>
+        <div class="card-body">
+            <h4 class="service-name">Service Name</h4>
+            <p class="service-description">Service description goes here</p>
+            <div class="service-meta">
+                <span class="meta-item">
+                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                        <circle cx="12" cy="12" r="10"></circle>
+                        <polyline points="12 6 12 12 16 14"></polyline>
+                    </svg>
+                    Uptime: 24d 5h
+                </span>
+                <span class="meta-item">
+                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                        <rect x="4" y="4" width="16" height="16" rx="2"></rect>
+                        <rect x="9" y="9" width="6" height="6"></rect>
+                    </svg>
+                    CPU: 12%
+                </span>
+                <span class="meta-item">
+                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                        <rect x="2" y="6" width="20" height="12" rx="2"></rect>
+                    </svg>
+                    Mem: 256MB
+                </span>
+            </div>
+        </div>
+        <div class="card-actions">
+            <button class="card-btn" onclick="viewServiceDetails('service-id')" title="Details">
+                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                    <circle cx="12" cy="12" r="10"></circle>
+                    <line x1="12" y1="16" x2="12" y2="12"></line>
+                    <line x1="12" y1="8" x2="12.01" y2="8"></line>
+                </svg>
+            </button>
+            <button class="card-btn" onclick="restartService('service-id')" title="Restart">
+                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                    <polyline points="23 4 23 10 17 10"></polyline>
+                    <path d="M20.49 15a9 9 0 1 1-2.12-9.36L23 10"></path>
+                </svg>
+            </button>
+            <button class="card-btn" onclick="stopService('service-id')" title="Stop">
+                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                    <rect x="6" y="4" width="4" height="16"></rect>
+                    <rect x="14" y="4" width="4" height="16"></rect>
+                </svg>
+            </button>
+            <button class="card-btn" onclick="viewServiceLogs('service-id')" title="Logs">
+                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                    <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
+                    <polyline points="14 2 14 8 20 8"></polyline>
+                </svg>
+            </button>
+        </div>
+    </div>
+</template>
+
+<style>
+    .services-container {
+        position: relative;
+    }
+
+    /* Header */
+    .services-header {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin-bottom: 1.5rem;
+        flex-wrap: wrap;
+        gap: 1rem;
+    }
+
+    .header-stats {
+        display: flex;
+        gap: 1.5rem;
+    }
+
+    .stat-item {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        padding: 0.75rem 1.25rem;
+        background: var(--surface);
+        border: 1px solid var(--border);
+        border-radius: 8px;
+        min-width: 80px;
+    }
+
+    .stat-item .stat-number {
+        font-size: 1.5rem;
+        font-weight: 700;
+        font-family: 'SF Mono', 'Monaco', 'Inconsolata', monospace;
+    }
+
+    .stat-item .stat-label {
+        font-size: 0.75rem;
+        color: var(--text-secondary);
+        text-transform: uppercase;
+        letter-spacing: 0.5px;
+    }
+
+    .stat-item.running .stat-number { color: var(--success); }
+    .stat-item.warning .stat-number { color: var(--warning); }
+    .stat-item.stopped .stat-number { color: var(--error); }
+    .stat-item.total .stat-number { color: var(--primary); }
+
+    .header-actions {
+        display: flex;
+        align-items: center;
+        gap: 0.75rem;
+    }
+
+    .search-box {
+        display: flex;
+        align-items: center;
+        gap: 0.5rem;
+        background: var(--surface);
+        border: 1px solid var(--border);
+        border-radius: 6px;
+        padding: 0.5rem 0.75rem;
+    }
+
+    .search-box svg {
+        color: var(--text-secondary);
+        flex-shrink: 0;
+    }
+
+    .search-box input {
+        background: transparent;
+        border: none;
+        color: var(--text);
+        font-size: 0.875rem;
+        width: 180px;
+        outline: none;
+    }
+
+    .search-box input::placeholder {
+        color: var(--text-secondary);
+    }
+
+    .header-actions select {
+        background: var(--surface);
+        border: 1px solid var(--border);
+        color: var(--text);
+        padding: 0.5rem 0.75rem;
+        border-radius: 6px;
+        font-size: 0.875rem;
+        cursor: pointer;
+    }
+
+    .header-actions select:focus {
+        outline: none;
+        border-color: var(--primary);
+    }
+
+    .action-btn {
+        display: flex;
+        align-items: center;
+        gap: 0.5rem;
+        padding: 0.5rem 1rem;
+        background: var(--primary);
+        color: white;
+        border: none;
+        border-radius: 6px;
+        font-size: 0.875rem;
+        font-weight: 500;
+        cursor: pointer;
+        transition: background 0.2s ease;
+    }
+
+    .action-btn:hover {
+        background: var(--primary-hover);
+    }
+
+    /* Services Grid */
+    .services-grid {
+        display: grid;
+        grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
+        gap: 1rem;
+    }
+
+    .service-card {
+        background: var(--surface);
+        border: 1px solid var(--border);
+        border-radius: 12px;
+        overflow: hidden;
+        transition: all 0.2s ease;
+    }
+
+    .service-card:hover {
+        border-color: var(--primary);
+        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+    }
+
+    .service-card.hidden {
+        display: none;
+    }
+
+    .service-card .card-header {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 1rem;
+        background: var(--bg);
+        border-bottom: 1px solid var(--border);
+    }
+
+    .service-icon {
+        width: 40px;
+        height: 40px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        background: var(--primary-light);
+        border-radius: 8px;
+        color: var(--primary);
+    }
+
+    .status-badge {
+        display: flex;
+        align-items: center;
+        gap: 0.375rem;
+        padding: 0.25rem 0.625rem;
+        border-radius: 20px;
+        font-size: 0.75rem;
+        font-weight: 500;
+    }
+
+    .status-badge.running {
+        background: rgba(34, 197, 94, 0.1);
+        color: var(--success);
+    }
+
+    .status-badge.warning {
+        background: rgba(245, 158, 11, 0.1);
+        color: var(--warning);
+    }
+
+    .status-badge.stopped {
+        background: rgba(239, 68, 68, 0.1);
+        color: var(--error);
+    }
+
+    .status-dot {
+        width: 6px;
+        height: 6px;
+        border-radius: 50%;
+        background: currentColor;
+    }
+
+    .status-badge.running .status-dot {
+        animation: pulse 2s infinite;
+    }
+
+    @keyframes pulse {
+        0%, 100% { opacity: 1; }
+        50% { opacity: 0.5; }
+    }
+
+    .card-body {
+        padding: 1rem;
+    }
+
+    .service-name {
+        font-size: 1rem;
+        font-weight: 600;
+        color: var(--text);
+        margin-bottom: 0.25rem;
+    }
+
+    .service-description {
+        font-size: 0.8125rem;
+        color: var(--text-secondary);
+        margin-bottom: 0.75rem;
+        line-height: 1.4;
+    }
+
+    .service-meta {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 0.75rem;
+    }
+
+    .meta-item {
+        display: flex;
+        align-items: center;
+        gap: 0.25rem;
+        font-size: 0.75rem;
+        color: var(--text-secondary);
+    }
+
+    .meta-item svg {
+        color: var(--primary);
+    }
+
+    .card-actions {
+        display: flex;
+        border-top: 1px solid var(--border);
+    }
+
+    .card-btn {
+        flex: 1;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        padding: 0.75rem;
+        background: transparent;
+        border: none;
+        color: var(--text-secondary);
+        cursor: pointer;
+        transition: all 0.2s ease;
+    }
+
+    .card-btn:hover {
+        background: var(--surface-hover);
+        color: var(--primary);
+    }
+
+    .card-btn:not(:last-child) {
+        border-right: 1px solid var(--border);
+    }
+
+    /* Skeleton Loading */
+    .service-card.skeleton {
+        pointer-events: none;
+    }
+
+    .service-card.skeleton .card-header,
+    .service-card.skeleton .card-body,
+    .service-card.skeleton .card-actions {
+        display: none;
+    }
+
+    .skeleton-line {
+        height: 16px;
+        background: linear-gradient(90deg, var(--border) 25%, var(--surface-hover) 50%, var(--border) 75%);
+        background-size: 200% 100%;
+        animation: shimmer 1.5s infinite;
+        border-radius: 4px;
+        margin: 1rem;
+    }
+
+    .skeleton-line.short {
+        width: 60%;
+    }
+
+    @keyframes shimmer {
+        0% { background-position: 200% 0; }
+        100% { background-position: -200% 0; }
+    }
+
+    /* Detail Panel */
+    .service-detail-panel {
+        position: fixed;
+        top: 64px;
+        right: -450px;
+        width: 450px;
+        height: calc(100vh - 64px);
+        background: var(--surface);
+        border-left: 1px solid var(--border);
+        box-shadow: -4px 0 20px rgba(0, 0, 0, 0.2);
+        z-index: 200;
+        transition: right 0.3s ease;
+        display: flex;
+        flex-direction: column;
+    }
+
+    .service-detail-panel.open {
+        right: 0;
+    }
+
+    .panel-header {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 1rem 1.25rem;
+        border-bottom: 1px solid var(--border);
+    }
+
+    .panel-header h3 {
+        font-size: 1rem;
+        font-weight: 600;
+        color: var(--text);
+    }
+
+    .close-btn {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 32px;
+        height: 32px;
+        background: transparent;
+        border: none;
+        color: var(--text-secondary);
+        border-radius: 6px;
+        cursor: pointer;
+        transition: all 0.2s ease;
+    }
+
+    .close-btn:hover {
+        background: var(--surface-hover);
+        color: var(--text);
+    }
+
+    .panel-content {
+        flex: 1;
+        overflow-y: auto;
+        padding: 1.25rem;
+    }
+
+    /* Detail Content Sections */
+    .detail-section {
+        margin-bottom: 1.5rem;
+    }
+
+    .detail-section-title {
+        font-size: 0.75rem;
+        font-weight: 600;
+        color: var(--text-secondary);
+        text-transform: uppercase;
+        letter-spacing: 0.5px;
+        margin-bottom: 0.75rem;
+    }
+
+    .detail-row {
+        display: flex;
+        justify-content: space-between;
+        padding: 0.5rem 0;
+        border-bottom: 1px solid var(--border);
+    }
+
+    .detail-row:last-child {
+        border-bottom: none;
+    }
+
+    .detail-label {
+        color: var(--text-secondary);
+        font-size: 0.875rem;
+    }
+
+    .detail-value {
+        color: var(--text);
+        font-size: 0.875rem;
+        font-weight: 500;
+        font-family: 'SF Mono', 'Monaco', 'Inconsolata', monospace;
+    }
+
+    .detail-actions {
+        display: flex;
+        gap: 0.5rem;
+        margin-top: 1rem;
+    }
+
+    .detail-btn {
+        flex: 1;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        gap: 0.5rem;
+        padding: 0.625rem;
+        border-radius: 6px;
+        font-size: 0.875rem;
+        font-weight: 500;
+        cursor: pointer;
+        transition: all 0.2s ease;
+    }
+
+    .detail-btn.primary {
+        background: var(--primary);
+        color: white;
+        border: none;
+    }
+
+    .detail-btn.primary:hover {
+        background: var(--primary-hover);
+    }
+
+    .detail-btn.secondary {
+        background: transparent;
+        color: var(--text);
+        border: 1px solid var(--border);
+    }
+
+    .detail-btn.secondary:hover {
+        background: var(--surface-hover);
+        border-color: var(--primary);
+    }
+
+    .detail-btn.danger {
+        background: transparent;
+        color: var(--error);
+        border: 1px solid var(--error);
+    }
+
+    .detail-btn.danger:hover {
+        background: rgba(239, 68, 68, 0.1);
+    }
+
+    /* Responsive */
+    @media (max-width: 768px) {
+        .services-header {
+            flex-direction: column;
+            align-items: stretch;
+        }
+
+        .header-stats {
+            justify-content: space-between;
+        }
+
+        .stat-item {
+            flex: 1;
+            min-width: auto;
+            padding: 0.5rem;
+        }
+
+        .stat-item .stat-number {
+            font-size: 1.25rem;
+        }
+
+        .header-actions {
+            flex-wrap: wrap;
+        }
+
+        .search-box {
+            flex: 1;
+            min-width: 150px;
+        }
+
+        .search-box input {
+            width: 100%;
+        }
+
+        .services-grid {
+            grid-template-columns: 1fr;
+        }
+
+        .service-detail-panel {
+            width: 100%;
+            right: -100%;
+        }
+    }
+</style>
+
+<script>
+    function filterServices(query) {
+        const cards = document.querySelectorAll('.service-card:not(.skeleton)');
+        const lowerQuery = query.toLowerCase();
+
+        cards.forEach(card => {
+            const name = card.dataset.service?.toLowerCase() || '';
+            const text = card.textContent.toLowerCase();
+            const matches = name.includes(lowerQuery) || text.includes(lowerQuery);
+            card.classList.toggle('hidden', !matches);
+        });
+    }
+
+    function filterByStatus(status) {
+        const cards = document.querySelectorAll('.service-card:not(.skeleton)');
+
+        cards.forEach(card => {
+            if (status === 'all') {
+                card.classList.remove('hidden');
+            } else {
+                const cardStatus = card.dataset.status;
+                card.classList.toggle('hidden', cardStatus !== status);
+            }
+        });
+    }
+
+    function viewServiceDetails(serviceId) {
+        const panel = document.getElementById('service-detail-panel');
+        const content = document.getElementById('service-detail-content');
+
+        // Load service details via HTMX
+        htmx.ajax('GET', `/api/services/${serviceId}/details`, {
+            target: content,
+            swap: 'innerHTML'
+        });
+
+        document.getElementById('detail-service-name').textContent = serviceId;
+        panel.classList.add('open');
+    }
+
+    function closeServiceDetail() {
+        document.getElementById('service-detail-panel').classList.remove('open');
+    }
+
+    function restartService(serviceId) {
+        if (confirm(`Are you sure you want to restart ${serviceId}?`)) {
+            htmx.ajax('POST', `/api/services/${serviceId}/restart`, {
+                swap: 'none'
+            }).then(() => {
+                htmx.trigger('#services-grid', 'refresh');
+            });
+        }
+    }
+
+    function stopService(serviceId) {
+        if (confirm(`Are you sure you want to stop ${serviceId}?`)) {
+            htmx.ajax('POST', `/api/services/${serviceId}/stop`, {
+                swap: 'none'
+            }).then(() => {
+                htmx.trigger('#services-grid', 'refresh');
+            });
+        }
+    }
+
+    function startService(serviceId) {
+        htmx.ajax('POST', `/api/services/${serviceId}/start`, {
+            swap: 'none'
+        }).then(() => {
+            htmx.trigger('#services-grid', 'refresh');
+        });
+    }
+
+    function viewServiceLogs(serviceId) {
+        // Navigate to logs with service filter
+        const logsLink = document.querySelector('.nav-item[href="#logs"]');
+        if (logsLink) {
+            logsLink.click();
+            setTimeout(() => {
+                const serviceFilter = document.getElementById('service-filter');
+                if (serviceFilter) {
+                    serviceFilter.value = serviceId;
+                    serviceFilter.dispatchEvent(new Event('change'));
+                }
+            }, 300);
+        }
+    }
+
+    function restartAllServices() {
+        if (confirm('Are you sure you want to restart all services? This may cause temporary downtime.')) {
+            htmx.ajax('POST', '/api/services/restart-all', {
+                swap: 'none'
+            }).then(() => {
+                htmx.trigger('#services-grid', 'refresh');
+            });
+        }
+    }
+
+    // Close panel on escape key
+    document.addEventListener('keydown', function(e) {
+        if (e.key === 'Escape') {
+            closeServiceDetail();
+        }
+    });
+
+    // Close panel when clicking outside
+    document.addEventListener('click', function(e) {
+        const panel = document.getElementById('service-detail-panel');
+        if (panel.classList.contains('open') &&
+            !panel.contains(e.target) &&
+            !e.target.closest('.card-btn')) {
+            closeServiceDetail();
+        }
+    });
+</script>
diff --git a/ui/suite/settings/index.html b/ui/suite/settings/index.html
new file mode 100644
index 0000000..b710abc
--- /dev/null
+++ b/ui/suite/settings/index.html
@@ -0,0 +1,1977 @@
+<div class="settings-layout">
+    <!-- Sidebar Navigation -->
+    <aside class="settings-sidebar">
+        <div class="settings-header">
+            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                <circle cx="12" cy="12" r="3"></circle>
+                <path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path>
+            </svg>
+            <span>Settings</span>
+        </div>
+
+        <nav class="settings-nav">
+            <a href="#profile" class="nav</span>-item active" onclick="showSection('profile', this)">
+                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                    <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path>
+                    <circle cx="12" cy="7" r="4"></circle>
+                </svg>
+                <span>Profile</span>
+            </a>
+            <a href="#security" class="nav-item" onclick="showSection('security', this)">
+                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                    <rect x="3" y="11" width="18" height="11" rx="2" ry="2"></rect>
+                    <path d="M7 11V7a5 5 0 0 1 10 0v4"></path>
+                </svg>
+                <span>Security</span>
+            </a>
+            <a href="#appearance" class="nav-item" onclick="showSection('appearance', this)">
+                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                    <circle cx="12" cy="12" r="5"></circle>
+                    <line x1="12" y1="1" x2="12" y2="3"></line>
+                    <line x1="12" y1="21" x2="12" y2="23"></line>
+                    <line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line>
+                    <line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line>
+                    <line x1="1" y1="12" x2="3" y2="12"></line>
+                    <line x1="21" y1="12" x2="23" y2="12"></line>
+                    <line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line>
+                    <line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line>
+                </svg>
+                <span>Appearance</span>
+            </a>
+            <a href="#notifications" class="nav-item" onclick="showSection('notifications', this)">
+                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                    <path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"></path>
+                    <path d="M13.73 21a2 2 0 0 1-3.46 0"></path>
+                </svg>
+                <span>Notifications</span>
+            </a>
+            <a href="#storage" class="nav-item" onclick="showSection('storage', this)">
+                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                    <ellipse cx="12" cy="5" rx="9" ry="3"></ellipse>
+                    <path d="M21 12c0 1.66-4 3-9 3s-9-1.34-9-3"></path>
+                    <path d="M3 5v14c0 1.66 4 3 9 3s9-1.34 9-3V5"></path>
+                </svg>
+                <span>Storage</span>
+            </a>
+            <a href="#integrations" class="nav-item" onclick="showSection('integrations', this)">
+                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                    <polyline points="16 18 22 12 16 6"></polyline>
+                    <polyline points="8 6 2 12 8 18"></polyline>
+                </svg>
+                <span>Integrations</span>
+            </a>
+            <a href="#privacy" class="nav-item" onclick="showSection('privacy', this)">
+                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                    <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"></path>
+                </svg>
+                <span>Privacy</span>
+            </a>
+            <a href="#billing" class="nav-item" onclick="showSection('billing', this)">
+                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                    <rect x="1" y="4" width="22" height="16" rx="2" ry="2"></rect>
+                    <line x1="1" y1="10" x2="23" y2="10"></line>
+                </svg>
+                <span>Billing</span>
+            </a>
+        </nav>
+
+        <div class="settings-footer">
+            <a href="/suite" class="back-link">
+                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                    <line x1="19" y1="12" x2="5" y2="12"></line>
+                    <polyline points="12 19 5 12 12 5"></polyline>
+                </svg>
+                Back to Suite
+            </a>
+        </div>
+    </aside>
+
+    <!-- Main Content Area -->
+    <main class="settings-main">
+        <!-- Profile Section -->
+        <section id="profile-section" class="settings-section active">
+            <div class="section-header">
+                <h1>Profile Settings</h1>
+                <p class="subtitle">Manage your personal information and preferences</p>
+            </div>
+
+            <form class="settings-form"
+                  hx-put="/api/user/profile"
+                  hx-swap="none"
+                  hx-on::after-request="showToast('Profile updated successfully')">
+                <!-- Avatar -->
+                <div class="setting-card">
+                    <div class="card-header">
+                        <h2>Profile Photo</h2>
+                        <p>Your profile photo is visible to other users</p>
+                    </div>
+                    <div class="avatar-section">
+                        <div class="current-avatar" i</p>d="current-avatar">
+                            <span>JD</span>
+                        </div>
+                        <div class="avatar-actions">
+                            <label class="btn-secondary upload-btn"></span>
+                                <input type="file" name="avatar" accept="image/*" hidden onchange="previewAvatar(this)">
+                                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                                    <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
+                                    <polyline points="17 8 12 3 7 8"></polyline>
+                                    <line x1="12" y1="3" x2="12" y2="15"></line>
+                                </svg>
+                                Upload Photo
+                            </label>
+                            <button type="button" class="btn-text" onclick="removeAvatar()">Remove</button>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Basic Info -->
+                <div class="setting-card">
+                    <div class="card-header">
+                        <h2>Basic Information</h2>
+                    </div>
+                    <div class="form-grid">
+                        <div class="form-group">
+                            <label>Display Name</label>
+                            <input type="text" name="display_name" placeholder="John Doe"
+                                   hx-get="/api/user/profile"
+                                   hx-trigger="load"
+                                   hx-swap="outerHTML"
+                                   hx-select="[name='display_name']">
+                        </div>
+                        <div class="form-group">
+                            <label>Username</label>
+                            <input type="text" name="username" placeholder="johndoe">
+                        </div>
+                        <div class="form-group full-width">
+                            <label>Email Address</label>
+                            <input type="email" name="email" placeholder="john@example.com">
+                        </div>
+                        <div class="form-group full-width">
+                            <label>Bio</label>
+                            <textarea name="bio" rows="3" placeholder="Tell us about yourself..."></textarea>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Contact Info -->
+                <div class="setting-card">
+                    <div class="card-header">
+                        <h2>Contact Information</h2>
+                    </div>
+                    <div class="form-grid">
+                        <div class="form-group">
+                            <label>Phone Number</label>
+                            <input type="tel" name="phone" placeholder="+1 (555) 000-0000">
+                        </div>
+                        <div class="form-group">
+                            <label>Location</label>
+                            <input type="text" name="location" placeholder="City, Country">
+                        </div>
+                        <div class="form-group">
+                            <label>Website</label>
+                            <input type="url" name="website" placeholder="https://example.com">
+                        </div>
+                        <div class="form-group">
+                            <label>Timezone</label>
+                            <select name="timezone">
+                                <option value="UTC">UTC</option>
+                                <option value="America/New_York">Eastern Time</option>
+                                <option value="America/Chicago">Central Time</option>
+                                <option value="America/Denver">Mountain Time</option>
+                                <option value="America/Los_Angeles">Pacific Time</option>
+                                <option value="Europe/London">London</option>
+                                <option value="Europe/Paris">Paris</option>
+                                <option value="Asia/Tokyo">Tokyo</option>
+                            </select>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="form-actions">
+                    <button type="submit" class="btn-primary">Save Changes</button>
+                </div>
+            </form>
+        </section>
+
+        <!-- Security Section -->
+        <section id="security-section" class="settings-section">
+            <div class="section-header">
+                <h1>Security Settings</h1>
+                <p class="subtitle">Protect your account with enhanced security</p>
+            </div>
+
+            <!-- Password Change -->
+            <div class="setting-card">
+                <div class="card-header">
+                    <h2>Change Password</h2>
+                    <p>Update your password regularly for better security</p>
+                </div>
+                <form hx-post="/api/user/password"
+                      hx-swap="none"
+                      hx-on::after-request="this.reset(); showToast('Password changed successfully')">
+                    <div class="form-grid">
+                        <div class="form-group full-width">
+                            <label>Current Password</label>
+                            <input type="password" name="current_password" required>
+                        </div>
+                        <div class="form-group">
+                            <label>New Password</label>
+                            <input type="password" name="new_password" required minlength="8">
+                        </div>
+                        <div class="form-group">
+                            <label>Confirm New Password</label>
+                            <input type="password" name="confirm_password" required>
+                        </div>
+                    </div>
+                    <div class="form-actions">
+                        <button type="submit" class="btn-primary">Update Password</button>
+                    </div>
+                </form>
+            </div>
+
+            <!-- Two-Factor Authentication -->
+            <div class="setting-card">
+                <div class="card-header">
+                    <h2>Two-Factor Authentication</h2>
+                    <p>Add an extra layer of security to your account</p>
+                </div>
+                <div class="setting-row" id="2fa-status"
+                     hx-get="/api/user/security/2fa/status"
+                     hx-trigger="load"
+                     hx-swap="innerHTML">
+                    <div class="setting-info">
+                        <span class="setting-title">Authenticator App</span>
+                        <span class="setting-desc">Use an authenticator app for 2FA codes</span>
+                    </div>
+                    <button class="btn-primary"
+                            hx-post="/api/user/security/2fa/enable"
+                            hx-target="#2fa-modal-content"
+                            hx-on::after-request="document.getElementById('2fa-modal').showModal()">
+                        Enable 2FA
+                    </button>
+                </div>
+            </div>
+
+            <!-- Active Sessions -->
+            <div class="setting-card">
+                <div class="card-header">
+                    <h2>Active Sessions</h2>
+                    <p>Manage your active login sessions</p>
+                </div>
+                <div class="sessions-list" id="sessions-list"
+                     hx-get="/api/user/security</p>/sessions"
+                     hx-trigger="load"
+                     hx-swap="innerHTML">
+                    <div class="loading-state">
+                        <div class="spinner"></div>
+                    </div>
+                </div>
+                <div class="card-footer">
+                    <button class="btn-danger-outline"
+                            hx-post="/api/user/security/sessions/revoke-all"
+                            hx-confirm="Sign out of all other devices?"
+                            hx-on::after-request="htmx.trigger('#sessions-list', 'load'); showToast('All other sessions revoked')">
+                        Sign Out All Other Sessions
+                    </button>
+                </div>
+            </div>
+
+            <!-- Connected Devices -->
+            <div class="setting-card">
+                <div class="card-header">
+                    <h2>Connected Devices</h2>
+                    <p>Devices that have accessed your account</p>
+                </div>
+                <div class="devices-list" id="devices-list"
+                     hx-get="/api/user/security/devices"
+                     hx-trigger="load"
+                     hx-swap="innerHTML">
+                    <div class="loading-state">
+                        <div class="spinner"></div>
+                    </div>
+                </div>
+            </div>
+        </section>
+
+        <!-- Appearance Section -->
+        <section id="appearance-section" class="settings-section">
+            <div class="section-header">
+                <h1>Appearance</h1>
+                <p class="subtitle">Customize how the application looks</p>
+            </div>
+
+            <!-- Theme Selection -->
+            <div class="setting-card">
+                <div class="card-header">
+                    <h2>Theme</h2>
+                    <p>Choose your preferred color theme</p>
+                </div>
+                <div class="theme-grid">
+                    <button class="theme-option" data-theme="dark" onclick="setTheme('dark', this)">
+                        <div class="theme-preview dark">
+                            <div class="preview-sidebar"></div>
+                            <div class="preview-content">
+                                <div class="preview-header"></div>
+                                <div class="preview-body"></div>
+                            </div>
+                        </div>
+                        <span>Dark</span>
+                    </button>
+                    <button class="theme-option" data-theme="light" onclick="setTheme('light', this)">
+                        <div class="theme-preview light">
+                            <div class="preview-sidebar"></div>
+                            <div class="preview-content">
+                                <div class="preview-header"></div>
+                                <div class="preview-body"></div>
+                            </div>
+                        </div>
+                        <span>Light</span>
+                    </button>
+                    <button class="theme-option" data-theme="blue" onclick="setTheme('blue', this)">
+                        <div class="theme-preview blue">
+                            <div class="preview-sidebar"></div>
+                            <div class="preview-content">
+                                <div class="preview-header"></div>
+                                <div class="preview-body"></div>
+                            </div>
+                        </div>
+                        <span>Blue</span>
+                    </button>
+                    <button class="theme-option" data-theme="purple" onclick="setTheme('purple', this)">
+                        <div class="theme-preview purple">
+                            <div class="preview-sidebar"></div>
+                            <div class="preview-content">
+                                <div class="preview-header"></div>
+                                <div class="preview-body"></div>
+                            </div>
+                        </div>
+                        <span>Purple</span>
+                    </button>
+                    <button class="theme-option" data-theme="green" onclick="setTheme('green', this)">
+                        <div class="theme-preview green">
+                            <div class="preview-sidebar"></div>
+                            <div class="preview-content">
+                                <div class="preview-header"></div>
+                                <div class="preview-body"></div>
+                            </div>
+                        </div>
+                        <span>Green</span>
+                    </button>
+                    <button class="theme-option" data-theme="orange" onclick="setTheme('orange', this)">
+                        <div class="theme-preview orange">
+                            <div class="preview-sidebar"></div>
+                            <div class="preview-content">
+                                <div class="preview-header"></div>
+                                <div class="preview-body"></div>
+                            </div>
+                        </div>
+                        <span>Orange</span>
+                    </button>
+                </div>
+            </div>
+
+            <!-- Layout Preferences -->
+            <div class="setting-card">
+                <div class="card-header">
+                    <h2>Layout Preferences</h2>
+                </div>
+                <div class="setting-row">
+                    <div class="setting-info">
+                        <span class="setting-title">Compact Mode</span>
+                        <span class="setting-desc">Reduce spacing for more content</span>
+                    </div>
+                    <label class="toggle">
+                        <input type="checkbox" name="compact_mode" onchange="toggleCompactMode(this)">
+                        <span class="toggle-slider"></span>
+                    </label>
+                </div>
+                <div class="setting-row">
+                    <div class="setting-info">
+                        <span class="setting-title">Show Sidebar</span>
+                        <span class="setting-desc">Always show navigation sidebar</span>
+                    </div>
+                    <label class="toggle">
+                        <input type="checkbox" name="show_sidebar" checked>
+                        <span class="toggle-slider"></span>
+                    </label>
+                </div>
+                <div class="setting-row">
+                    <div class="setting-info">
+                        <span class="setting-title">Animations</span>
+                        <span class="setting-desc">Enable UI animations and transitions</span>
+                    </div>
+                    <label class="toggle">
+                        <input type="checkbox" name="animations" checked>
+                        <span class="toggle-slider"></span>
+                    </label>
+                </div>
+            </div>
+        </section>
+
+        <!-- Notifications Section -->
+        <section id="notifications-section" class="settings-section">
+            <div class="section-header">
+                <h1>Notifications</h1>
+                <p class="subtitle">Control how you receive notifications</p>
+            </div>
+
+            <form hx-put="/api/user/notifications/preferences"
+                  hx-swap="none"
+                  hx-on::after-request="showToast('Notification preferences saved')">
+
+                <!-- Email Notifications -->
+                <div class="setting-card">
+                    <div class="card-header">
+                        <h2>Email Notifications</h2>
+                    </div>
+                    <div class="setting-row">
+                        <div class="setting-info">
+                            <span class="setting-title">Direct Messages</span>
+                            <span class="setting-desc">Receive email for new direct messages</span>
+                        </div>
+                        <label class="toggle">
+                            <input type="checkbox" name="email_dm" checked>
+                            <span class="toggle-slider"></span>
+                        </label>
+                    </div>
+                    <div class="setting-row">
+                        <div class="setting-info">
+                            <span class="setting-title">Mentions</span>
+                            <span class="setting-desc">Receive email when someone mentions you</span>
+                        </div>
+                        <label class="toggle">
+                            <input type="checkbox" name="email_mentions" checked>
+                            <span class="toggle-slider"></span>
+                        </label>
+                    </div>
+                    <div class="setting-row">
+                        <div class="setting-info">
+                            <span class="setting-title">Weekly Digest</span>
+                            <span class="setting-desc">Get a weekly summary of activity</span>
+                        </div>
+                        <label class="toggle">
+                            <input type="checkbox" name="email_digest">
+                            <span class="toggle-slider"></span>
+                        </label>
+                    </div>
+                    <div class="setting-row">
+                        <div class="setting-info">
+                            <span class="setting-title">Marketing</span>
+                            <span class="setting-desc">Receive news and product updates</span>
+                        </div>
+                        <label class="toggle">
+                            <input type="checkbox" name="email_marketing">
+                            <span class="toggle-slider"></span>
+                        </label>
+                    </div>
+                </div>
+
+                <!-- Push Notifications -->
+                <div class="setting-card">
+                    <div class="card-header">
+                        <h2>Push Notifications</h2>
+                    </div>
+                    <div class="setting-row">
+                        <div class="setting-info">
+                            <span class="setting-title">Enable Push Notifications</span>
+                            <span class="setting-desc">Receive browser push notifications</span>
+                        </div>
+                        <label class="toggle">
+                            <input type="checkbox" name="push_enabled" onchange="togglePushNotifications(this)">
+                            <span class="toggle-slider"></span>
+                        </label>
+                    </div>
+                    <div class="setting-row">
+                        <div class="setting-info">
+                            <span class="setting-title">Sound</span>
+                            <span class="setting-desc">Play sound for notifications</span>
+                        </div>
+                        <label class="toggle">
+                            <input type="checkbox" name="push_sound" checked>
+                            <span class="toggle-slider"></span>
+                        </label>
+                    </div>
+                </div>
+
+                <!-- In-App Notifications -->
+                <div class="setting-card">
+                    <div class="card-header">
+                        <h2>In-App Notifications</h2>
+                    </div>
+                    <div class="setting-row">
+                        <div class="setting-info">
+                            <span class="setting-title">Desktop Notifications</span>
+                            <span class="setting-desc">Show notifications on desktop</span>
+                        </div>
+                        <label class="toggle">
+                            <input type="checkbox" name="desktop_notifications" checked>
+                            <span class="toggle-slider"></span>
+                        </label>
+                    </div>
+                    <div class="setting-row">
+                        <div class="setting-info">
+                            <span class="setting-title">Badge Count</span>
+                            <span class="setting-desc">Show unread count badge</span>
+                        </div>
+                        <label class="toggle">
+                            <input type="checkbox" name="badge_count" checked>
+                            <span class="toggle-slider"></span>
+                        </label>
+                    </div>
+                </div>
+
+                <div class="form-actions">
+                    <button type="submit" class="btn-primary">Save Preferences</button>
+                </div>
+            </form>
+        </section>
+
+        <!-- Storage Section -->
+        <section id="storage-section" class="settings-section">
+            <div class="section-header">
+                <h1>Storage</h1>
+                <p class="subtitle">Manage your storage and sync settings</p>
+            </div>
+
+            <!-- Storage Usage -->
+            <div class="setting-card">
+                <div class="card-header">
+                    <h2>Storage Usage</h2>
+                </div>
+                <div class="storage-display"
+                     hx-get="/api/user/storage"
+                     hx-trigger="load"
+                     hx-swap="innerHTML">
+                    <div class="storage-bar-container">
+                        <div class="storage-bar">
+                            <div class="storage-bar-fill" style="width: 45%"></div>
+                        </div>
+                        <div class="storage-stats">
+                            <span>4.5 GB used of 10 GB</span>
+                            <span>5.5 GB available</span>
+                        </div>
+                    </div></span>
+                    <div class="storage-breakdown">
+                        <div class="breakdown-item">
+                            <div class="breakdown-color" style="background: #3b82f6"></div>
+                            <span class="breakdown-label">Documents</span>
+                            <span class="breakdown-value">2.1 GB</span>
+                        </div>
+                        <div class="breakdown-item">
+                            <div class="breakdown-color" style="background: #10b981"></div>
+                            <span class="breakdown-label">Images</span>
+                            <span class="breakdown-value">1.8 GB</span>
+                        </div>
+                        <div class="breakdown-item">
+                            <div class="breakdown-color" style="background: #f59e0b"></div>
+                            <span class="breakdown-label">Videos</span>
+                            <span class="breakdown-value">0.4 GB</span>
+                        </div>
+                        <div class="breakdown-item">
+                            <div class="breakdown-color" style="background: #6b7280"></div>
+                            <span class="breakdown-label">Other</span>
+                            <span class="breakdown-value">0.2 GB</span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Sync Settings -->
+            <div class="setting-card">
+                <div class="card-header">
+                    <h2>Sync Settings</h2>
+                </div>
+                <div class="setting-row">
+                    <div class="setting-info">
+                        <span class="setting-title">Auto-Sync</span>
+                        <span class="setting-desc">Automatically sync files across devices</span>
+                    </div>
+                    <label class="toggle">
+                        <input type="checkbox" name="auto_sync" checked>
+                        <span class="toggle-slider"></span>
+                    </label>
+                </div>
+                <div class="setting-row">
+                    <div class="setting-info">
+                        <span class="setting-title">Sync on Wi-Fi Only</span>
+                        <span class="setting-desc">Only sync when connected to Wi-Fi</span>
+                    </div>
+                    <label class="toggle">
+                        <input type="checkbox" name="wifi_only">
+                        <span class="toggle-slider"></span>
+                    </label>
+                </div>
+                <div class="setting-row">
+                    <div class="setting-info">
+                        <span class="setting-title">Offline Access</span>
+                        <span class="setting-desc">Keep recent files available offline</span>
+                    </div>
+                    <label class="toggle">
+                        <input type="checkbox" name="offline_access" checked>
+                        <span class="toggle-slider"></span>
+                    </label>
+                </div>
+            </div>
+
+            <!-- Connected Storage -->
+            <div class="setting-card">
+                <div class="card-header">
+                    <h2>Connected Cloud Storage</h2>
+                </div>
+                <div class="connections-list" id="storage-connections"
+                     hx-get="/api/user/storage/connections"
+                     hx-trigger="load"
+                     hx-swap="innerHTML">
+                    <div class="connection-item">
+                        <div class="connection-icon google-drive">
+                            <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
+                                <path d="M4.433 22l-1.6-2.773 8.167-14.167L19.4 19.227 17.8 22H4.433z"></path>
+                            </svg>
+                        </div>
+                        <div class="connection-info">
+                            <span class="connection-name">Google Drive</span>
+                            <span class="connection-status">Not connected</span>
+                        </div>
+                        <button class="btn-secondary btn-sm">Connect</button>
+                    </div>
+                    <div class="connection-item">
+                        <div class="connection-icon dropbox">
+                            <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
+                                <path d="M6 2l6 3.75L6 9.5 0 5.75 6 2zm12 0l6 3.75-6 3.75-6-3.75L18 2zM0 13.25L6 9.5l6 3.75-6 3.75-6-3.75zm18-3.75l6 3.75-6 3.75-6-3.75 6-3.75zM6 18.25l6-3.75 6 3.75-6 3.75-6-3.75z"></path>
+                            </svg>
+                        </div>
+                        <div class="connection-info">
+                            <span class="connection-name">Dropbox</span>
+                            <span class="connection-status">Not connected</span>
+                        </div>
+                        <button class="btn-secondary btn-sm">Connect</button>
+                    </div>
+                </div>
+            </div>
+        </section>
+
+        <!-- Integrations Section -->
+        <section id="integrations-section" class="settings-section">
+            <div class="section-header">
+                <h1>Integrations</h1>
+                <p class="subtitle">Connect external services and manage API access</p>
+            </div>
+
+            <!-- API Keys -->
+            <div class="setting-card">
+                <div class="card-header">
+                    <h2>API Keys</h2>
+                    <button class="btn-primary btn-sm" onclick="document.getElementById('create-api-key-modal').showModal()">
+                        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                            <line x1="12" y1="5" x2="12" y2="19"></line>
+                            <line x1="5" y1="12" x2="19" y2="12"></line>
+                        </svg>
+                        Create Key
+                    </button>
+                </div>
+                <div class="api-keys-list" id="api-keys-list"
+                     hx-get="/api/user/api-keys"
+                     hx-trigger="load"
+                     hx-swap="innerHTML">
+                    <div class="empty-state">
+                        <p>No API keys created yet</p>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Webhooks -->
+            <div class="setting-card">
+                <div class="card-header">
+                    <h2>Webhooks</h2>
+                    <button class="btn-primary btn-sm" onclick="document.getElementById('create-webhook-modal').showModal()">
+                        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                            <line x1="12" y1="5" x2="12" y2="19"></line>
+                            <line x1="5" y1="12" x2="19" y2="12"></line>
+                        </svg>
+                        Add Webhook
+                    </button>
+                </div>
+                <div class="webhooks-list" id="webhooks-list"
+                     hx-get="/api/user/webhooks"
+                     hx-trigger="load"
+                     hx-swap="innerHTML">
+                    <div class="empty-state">
+                        <p>No webhooks configured</p>
+                    </div>
+                </div>
+            </div>
+
+            <!-- OAuth Connections -->
+            <div class="setting-card">
+                <div class="card-header">
+                    <h2>Connected Accounts</h2>
+                </div>
+                <div class="oauth-list">
+                    <div class="oauth-item">
+                        <div class="oauth-icon google">
+                            <svg width="20" height="20" viewBox="0 0 24 24">
+                                <path fill="#4285F4" d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"></path>
+                                <path fill="#34A853" d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"></path>
+                                <path fill="#FBBC05" d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"></path>
+                                <path fill="#EA4335" d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"></path>
+                            </svg>
+                        </div>
+                        <div class="oauth-info">
+                            <span class="oauth-name">Google</span>
+                            <span class="oauth-status">Not connected</span>
+                        </div>
+                        <button class="btn-secondary btn-sm"
+                                hx-post="/api/oauth/google/connect"
+                                hx-swap="none">Connect</button>
+                    </div>
+                    <div class="oauth-item">
+                        <div class="oauth-icon microsoft">
+                            <svg width="20" height="20" viewBox="0 0 24 24">
+                                <path fill="#F25022" d="M1 1h10v10H1z"></path>
+                                <path fill="#00A4EF" d="M1 13h10v10H1z"></path>
+                                <path fill="#7FBA00" d="M13 1h10v10H13z"></path>
+                                <path fill="#FFB900" d="M13 13h10v10H13z"></path>
+                            </svg>
+                        </div>
+                        <div class="oauth-info">
+                            <span class="oauth-name">Microsoft</span>
+                            <span class="oauth-status">Not connected</span>
+                        </div>
+                        <button class="btn-secondary btn-sm"
+                                hx-post="/api/oauth/microsoft/connect"
+                                hx-swap="none">Connect</button>
+                    </div>
+                    <div class="oauth-item">
+                        <div class="oauth-icon github">
+                            <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
+                                <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"></path>
+                            </svg>
+                        </div>
+                        <div class="oauth-info">
+                            <span class="oauth-name">GitHub</span>
+                            <span class="oauth-status">Not connected</span>
+                        </div>
+                        <button class="btn-secondary btn-sm"
+                                hx-post="/api/oauth/github/connect"
+                                hx-swap="none">Connect</button>
+                    </div>
+                </div>
+            </div>
+        </section>
+
+        <!-- Privacy Section -->
+        <section id="privacy-section" class="settings-section">
+            <div class="section-header">
+                <h1>Privacy</h1>
+                <p class="subtitle">Manage your data and privacy settings</p>
+            </div>
+
+            <!-- Privacy Settings -->
+            <div class="setting-card">
+                <div class="card-header">
+                    <h2>Privacy Preferences</h2>
+                </div>
+                <div class="setting-row">
+                    <div class="setting-info">
+                        <span class="setting-title">Profile Visibility</span>
+                        <span class="setting-desc">Who can see your profile</span>
+                    </div>
+                    <select name="profile_visibility" class="select-sm">
+                        <option value="public">Public</option>
+                        <option value="contacts">Contacts Only</option>
+                        <option value="private">Private</option>
+                    </select>
+                </div>
+                <div class="setting-row">
+                    <div class="setting-info">
+                        <span class="setting-title">Online Status</span>
+                        <span class="setting-desc">Show when you're online</span>
+                    </div>
+                    <label class="toggle">
+                        <input type="checkbox" name="show_online" checked>
+                        <span class="toggle-slider"></span>
+                    </label>
+                </div>
+                <div class="setting-row">
+                    <div class="setting-info">
+                        <span class="setting-title">Read Receipts</span>
+                        <span class="setting-desc">Let others know when you've read messages</span>
+                    </div>
+                    <label class="toggle">
+                        <input type="checkbox" name="read_receipts" checked>
+                        <span class="toggle-slider"></span>
+                    </label>
+                </div>
+            </div>
+
+            <!-- Data Export -->
+            <div class="setting-card">
+                <div class="card-header">
+                    <h2>Your Data</h2>
+                    <p>Download a copy of your data</p>
+                </div>
+                <div class="setting-row">
+                    <div class="setting-info">
+                        <span class="setting-title">Export Data</span>
+                        <span class="setting-desc">Download all your data in a portable format</span>
+                    </div>
+                    <button class="btn-secondary"
+                            hx-post="/api/user/data/export"
+                            hx-swap="none"
+                            hx-on::after-request="showToast('Export started. You will receive an email when ready.')">
+                        Request Export
+                    </button>
+                </div>
+            </div>
+
+            <!-- Account Deletion -->
+            <div class="setting-card danger-card">
+                <div class="card-header">
+                    <h2>Delete Account</h2>
+                    <p>Permanently delete your account and all associated data</p>
+                </div>
+                <div class="danger-content">
+                    <p>Once you delete your account, there is no going back. Please be certain.</p>
+                    <button class="btn-danger" onclick="document.getElementById('delete-account-modal').showModal()">
+                        Delete My Account
+                    </button>
+                </div>
+            </div>
+        </section>
+
+        <!-- Billing Section -->
+        <section id="billing-section" class="settings-section">
+            <div class="section-header">
+                <h1>Billing</h1>
+                <p class="subtitle">Manage your subscription and payment methods</p>
+            </div>
+
+            <!-- Current Plan -->
+            <div class="setting-card">
+                <div class="card-header">
+                    <h2>Current Plan</h2>
+                </div>
+                <div class="plan-display"
+                     hx-get="/api/user/billing/plan"
+                     hx-trigger="load"
+                     hx-swap="innerHTML">
+                    <div class="plan-info">
+                        <div class="plan-badge">Pro</div>
+                        <div class="plan-details">
+                            <span class="plan-price">$19/month</span>
+                            <span class="plan-cycle">Billed monthly</span>
+                        </div>
+                    </div>
+                    <div class="plan-actions">
+                        <button class="btn-secondary">Change Plan</button>
+                        <button class="btn-text">Cancel Subscription</button>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Payment Method -->
+            <div class="setting-card">
+                <div class="card-header">
+                    <h2>Payment Method</h2>
+                    <button class="btn-primary btn-sm" onclick="document.getElementById('add-payment-modal').showModal()">
+                        Add Method
+                    </button>
+                </div>
+                <div class="payment-methods" id="payment-methods"
+                     hx-get="/api/user/billing/payment-methods"
+                     hx-trigger="load"
+                     hx-swap="innerHTML">
+                    <div class="payment-card">
+                        <div class="card-brand visa">
+                            <svg width="32" height="20" viewBox="0 0 32 20">
+                                <rect width="32" height="20" rx="2" fill="#1A1F71"></rect>
+                                <text x="16" y="13" text-anchor="middle" fill="white" font-size="8" font-weight="bold">VISA</text>
+                            </svg>
+                        </div>
+                        <div class="card-details">
+                            <span class="card-number">•••• •••• •••• 4242</span>
+                            <span class="card-expiry">Expires 12/25</span>
+                        </div>
+                        <span class="default-badge">Default</span>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Invoices -->
+            <div class="setting-card">
+                <div class="card-header">
+                    <h2>Billing History</h2>
+                </div>
+                <div class="invoices-list" id="invoices-list"
+                     hx-get="/api/user/billing/invoices"
+                     hx-trigger="load"
+                     hx-swap="innerHTML">
+                    <table class="invoices-table">
+                        <thead>
+                            <tr>
+                                <th>Date</th>
+                                <th>Description</th>
+                                <th>Amount</th>
+                                <th>Status</th>
+                                <th></th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            <tr>
+                                <td>Jan 1, 2025</td>
+                                <td>Pro Plan - Monthly</td>
+                                <td>$19.00</td>
+                                <td><span class="status-badge paid">Paid</span></td>
+                                <td><a href="#" class="invoice-link">Download</a></td>
+                            </tr>
+                            <tr>
+                                <td>Dec 1, 2024</td>
+                                <td>Pro Plan - Monthly</td>
+                                <td>$19.00</td>
+                                <td><span class="status-badge paid">Paid</span></td>
+                                <td><a href="#" class="invoice-link">Download</a></td>
+                            </tr>
+                        </tbody>
+                    </table>
+                </div>
+            </div>
+        </section>
+    </main>
+</div>
+
+<!-- 2FA Modal -->
+<dialog id="2fa-modal" class="modal">
+    <div class="modal-content">
+        <div class="modal-header">
+            <h2>Enable Two-Factor Authentication</h2>
+            <button type="button" class="close-btn" onclick="document.getElementById('2fa-modal').close()">
+                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                    <line x1="18" y1="6" x2="6" y2="18"></line>
+                    <line x1="6" y1="6" x2="18" y2="18"></line>
+                </svg>
+            </button>
+        </div>
+        <div id="2fa-modal-content" class="modal-body">
+            <!-- Content loaded via HTMX -->
+        </div>
+    </div>
+</dialog>
+
+<!-- Create API Key Modal -->
+<dialog id="create-api-key-modal" class="modal">
+    <div class="modal-content">
+        <div class="modal-header">
+            <h2>Create API Key</h2>
+            <button type="button" class="close-btn" onclick="document.getElementById('create-api-key-modal').close()">
+                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                    <line x1="18" y1="6" x2="6" y2="18"></line>
+                    <line x1="6" y1="6" x2="18" y2="18"></line>
+                </svg>
+            </button>
+        </div>
+        <form hx-post="/api/user/api-keys"
+              hx-target="#api-keys-list"
+              hx-swap="innerHTML"
+              hx-on::after-request="document.getElementById('create-api-key-modal').close()">
+            <div class="form-group">
+                <label>Key Name</label>
+                <input type="text" name="name" required placeholder="My API Key">
+            </div>
+            <div class="form-group">
+                <label>Permissions</label>
+                <div class="checkbox-group">
+                    <label class="checkbox-item">
+                        <input type="checkbox" name="permissions[]" value="read" checked>
+                        <span>Read</span>
+                    </label>
+                    <label class="checkbox-item">
+                        <input type="checkbox" name="permissions[]" value="write">
+                        <span>Write</span>
+                    </label>
+                    <label class="checkbox-item">
+                        <input type="checkbox" name="permissions[]" value="delete">
+                        <span>Delete</span>
+                    </label>
+                </div>
+            </div>
+            <div class="modal-footer">
+                <button type="button" class="btn-secondary" onclick="document.getElementById('create-api-key-modal').close()">Cancel</button>
+                <button type="submit" class="btn-primary">Create Key</button>
+            </div>
+        </form>
+    </div>
+</dialog>
+
+<!-- Add Webhook Modal -->
+<dialog id="add-webhook-modal" class="modal">
+    <div class="modal-content">
+        <div class="modal-header">
+            <h2>Add Webhook</h2>
+            <button type="button" class="close-btn" onclick="document.getElementById('add-webhook-modal').close()">
+                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                    <line x1="18" y1="6" x2="6" y2="18"></line>
+                    <line x1="6" y1="6" x2="18" y2="18"></line>
+                </svg>
+            </button>
+        </div>
+        <form hx-post="/api/user/webhooks"
+              hx-target="#webhooks-list"
+              hx-swap="innerHTML"
+              hx-on::after-request="document.getElementById('add-webhook-modal').close()">
+            <div class="form-group">
+                <label>Webhook URL</label>
+                <input type="url" name="url" required placeholder="https://example.com/webhook">
+            </div>
+            <div class="form-group">
+                <label>Events</label>
+                <div class="checkbox-group">
+                    <label class="checkbox-item">
+                        <input type="checkbox" name="events[]" value="message.created" checked>
+                        <span>Message Created</span>
+                    </label>
+                    <label class="checkbox-item">
+                        <input type="checkbox" name="events[]" value="file.uploaded">
+                        <span>File Uploaded</span>
+                    </label>
+                    <label class="checkbox-item">
+                        <input type="checkbox" name="events[]" value="task.completed">
+                        <span>Task Completed</span>
+                    </label>
+                </div>
+            </div>
+            <div class="modal-footer">
+                <button type="button" class="btn-secondary" onclick="document.getElementById('add-webhook-modal').close()">Cancel</button>
+                <button type="submit" class="btn-primary">Add Webhook</button>
+            </div>
+        </form>
+    </div>
+</dialog>
+
+<!-- Delete Account Modal -->
+<dialog id="delete-account-modal" class="modal">
+    <div class="modal-content">
+        <div class="modal-header">
+            <h2>Delete Account</h2>
+            <button type="button" class="close-btn" onclick="document.getElementById('delete-account-modal').close()">
+                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                    <line x1="18" y1="6" x2="6" y2="18"></line>
+                    <line x1="6" y1="6" x2="18" y2="18"></line>
+                </svg>
+            </button>
+        </div>
+        <div class="modal-body">
+            <div class="danger-alert">
+                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                    <path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"></path>
+                    <line x1="12" y1="9" x2="12" y2="13"></line>
+                    <line x1="12" y1="17" x2="12.01" y2="17"></line>
+                </svg>
+                <p>This action cannot be undone. All your data will be permanently deleted.</p>
+            </div>
+            <form hx-delete="/api/user/account"
+                  hx-swap="none"
+                  hx-confirm="Are you absolutely sure?">
+                <div class="form-group">
+                    <label>Type "DELETE" to confirm</label>
+                    <input type="text" name="confirmation" required pattern="DELETE" placeholder="DELETE">
+                </div>
+                <div class="form-group">
+                    <label>Enter your password</label>
+                    <input type="password" name="password" required>
+                </div>
+                <div class="modal-footer">
+                    <button type="button" class="btn-secondary" onclick="document.getElementById('delete-account-modal').close()">Cancel</button>
+                    <button type="submit" class="btn-danger">Delete My Account</button>
+                </div>
+            </form>
+        </div>
+    </div>
+</dialog>
+
+<!-- Add Payment Method Modal -->
+<dialog id="add-payment-modal" class="modal">
+    <div class="modal-content">
+        <div class="modal-header">
+            <h2>Add Payment Method</h2>
+            <button type="button" class="close-btn" onclick="document.getElementById('add-payment-modal').close()">
+                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                    <line x1="18" y1="6" x2="6" y2="18"></line>
+                    <line x1="6" y1="6" x2="18" y2="18"></line>
+                </svg>
+            </button>
+        </div>
+        <form hx-post="/api/user/billing/payment-methods"
+              hx-target="#payment-methods"
+              hx-swap="innerHTML"
+              hx-on::after-request="document.getElementById('add-payment-modal').close()">
+            <div class="form-group">
+                <label>Card Number</label>
+                <input type="text" name="card_number" required placeholder="1234 5678 9012 3456" maxlength="19">
+            </div>
+            <div class="form-row">
+                <div class="form-group">
+                    <label>Expiry Date</label>
+                    <input type="text" name="expiry" required placeholder="MM/YY" maxlength="5">
+                </div>
+                <div class="form-group">
+                    <label>CVC</label>
+                    <input type="text" name="cvc" required placeholder="123" maxlength="4">
+                </div>
+            </div>
+            <div class="form-group">
+                <label class="checkbox-item">
+                    <input type="checkbox" name="default" checked>
+                    <span>Set as default payment method</span>
+                </label>
+            </div>
+            <div class="modal-footer">
+                <button type="button" class="btn-secondary" onclick="document.getElementById('add-payment-modal').close()">Cancel</button>
+                <button type="submit" class="btn-primary">Add Card</button>
+            </div>
+        </form>
+    </div>
+</dialog>
+
+<style>
+    .settings-layout {
+        display: grid;
+        grid-template-columns: 260px 1fr;
+        min-height: 100%;
+        background: var(--bg);
+    }
+
+    .settings-sidebar {
+        background: var(--surface);
+        border-right: 1px solid var(--border);
+        display: flex;
+        flex-direction: column;
+        padding: 24px 0;
+    }
+
+    .settings-header {
+        display: flex;
+        align-items: center;
+        gap: 12px;
+        padding: 0 24px 24px;
+        border-bottom: 1px solid var(--border);
+        margin-bottom: 16px;
+        color: var(--text);
+        font-size: 1.25rem;
+        font-weight: 600;
+    }
+
+    .settings-header svg {
+        color: var(--primary);
+    }
+
+    .settings-nav {
+        flex: 1;
+        padding: 0 12px;
+    }
+
+    .nav-item {
+        display: flex;
+        align-items: center;
+        gap: 12px;
+        padding: 12px 16px;
+        color: var(--text-secondary);
+        text-decoration: none;
+        border-radius: 8px;
+        transition: all 0.2s;
+        margin-bottom: 4px;
+    }
+
+    .nav-item:hover {
+        background: var(--hover);
+        color: var(--text);
+    }
+
+    .nav-item.active {
+        background: var(--primary);
+        color: white;
+    }
+
+    .nav-item.active svg {
+        color: white;
+    }
+
+    .settings-footer {
+        padding: 16px 24px;
+        border-top: 1px solid var(--border);
+    }
+
+    .back-link {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        color: var(--text-secondary);
+        text-decoration: none;
+        font-size: 0.875rem;
+    }
+
+    .back-link:hover {
+        color: var(--primary);
+    }
+
+    .settings-main {
+        padding: 32px 48px;
+        overflow-y: auto;
+        max-width: 900px;
+    }
+
+    .settings-section {
+        display: none;
+    }
+
+    .settings-section.active {
+        display: block;
+    }
+
+    .section-header {
+        margin-bottom: 32px;
+    }
+
+    .section-header h1 {
+        font-size: 1.75rem;
+        font-weight: 600;
+        color: var(--text);
+        margin: 0 0 8px;
+    }
+
+    .section-header .subtitle {
+        color: var(--text-secondary);
+        margin: 0;
+    }
+
+    .setting-card {
+        background: var(--surface);
+        border: 1px solid var(--border);
+        border-radius: 12px;
+        padding: 24px;
+        margin-bottom: 24px;
+    }
+
+    .setting-card.danger-card {
+        border-color: var(--danger);
+    }
+
+    .card-header {
+        display: flex;
+        justify-content: space-between;
+        align-items: flex-start;
+        margin-bottom: 20px;
+    }
+
+    .card-header h2 {
+        font-size: 1.125rem;
+        font-weight: 600;
+        color: var(--text);
+        margin: 0 0 4px;
+    }
+
+    .card-header p {
+        color: var(--text-secondary);
+        font-size: 0.875rem;
+        margin: 0;
+    }
+
+    .setting-row {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding: 16px 0;
+        border-bottom: 1px solid var(--border);
+    }
+
+    .setting-row:last-child {
+        border-bottom: none;
+        padding-bottom: 0;
+    }
+
+    .setting-row:first-child {
+        padding-top: 0;
+    }
+
+    .setting-info {
+        display: flex;
+        flex-direction: column;
+        gap: 4px;
+    }
+
+    .setting-title {
+        font-weight: 500;
+        color: var(--text);
+    }
+
+    .setting-desc {
+        font-size: 0.875rem;
+        color: var(--text-secondary);
+    }
+
+    .form-group {
+        margin-bottom: 20px;
+    }
+
+    .form-group label {
+        display: block;
+        font-weight: 500;
+        color: var(--text);
+        margin-bottom: 8px;
+    }
+
+    .form-group input,
+    .form-group select,
+    .form-group textarea {
+        width: 100%;
+        padding: 10px 14px;
+        background: var(--bg);
+        border: 1px solid var(--border);
+        border-radius: 8px;
+        color: var(--text);
+        font-size: 0.9375rem;
+    }
+
+    .form-group input:focus,
+    .form-group select:focus,
+    .form-group textarea:focus {
+        outline: none;
+        border-color: var(--primary);
+        box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
+    }
+
+    .form-row {
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        gap: 16px;
+    }
+
+    .btn-primary {
+        background: var(--primary);
+        color: white;
+        border: none;
+        padding: 10px 20px;
+        border-radius: 8px;
+        font-weight: 500;
+        cursor: pointer;
+        transition: all 0.2s;
+    }
+
+    .btn-primary:hover {
+        filter: brightness(1.1);
+    }
+
+    .btn-secondary {
+        background: var(--surface);
+        color: var(--text);
+        border: 1px solid var(--border);
+        padding: 10px 20px;
+        border-radius: 8px;
+        font-weight: 500;
+        cursor: pointer;
+        transition: all 0.2s;
+    }
+
+    .btn-secondary:hover {
+        background: var(--hover);
+    }
+
+    .btn-danger {
+        background: var(--danger);
+        color: white;
+        border: none;
+        padding: 10px 20px;
+        border-radius: 8px;
+        font-weight: 500;
+        cursor: pointer;
+    }
+
+    .btn-danger:hover {
+        filter: brightness(1.1);
+    }
+
+    .btn-sm {
+        padding: 6px 12px;
+        font-size: 0.875rem;
+    }
+
+    .btn-text {
+        background: none;
+        border: none;
+        color: var(--text-secondary);
+        cursor: pointer;
+        padding: 10px 20px;
+    }
+
+    .btn-text:hover {
+        color: var(--text);
+    }
+
+    .toggle {
+        position: relative;
+        display: inline-block;
+        width: 48px;
+        height: 26px;
+    }
+
+    .toggle input {
+        opacity: 0;
+        width: 0;
+        height: 0;
+    }
+
+    .toggle-slider {
+        position: absolute;
+        cursor: pointer;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        background: var(--border);
+        border-radius: 26px;
+        transition: 0.3s;
+    }
+
+    .toggle-slider::before {
+        content: "";
+        position: absolute;
+        height: 20px;
+        width: 20px;
+        left: 3px;
+        bottom: 3px;
+        background: white;
+        border-radius: 50%;
+        transition: 0.3s;
+    }
+
+    .toggle input:checked + .toggle-slider {
+        background: var(--primary);
+    }
+
+    .toggle input:checked + .toggle-slider::before {
+        transform: translateX(22px);
+    }
+
+    .avatar-upload {
+        display: flex;
+        align-items: center;
+        gap: 24px;
+        margin-bottom: 24px;
+    }
+
+    .current-avatar {
+        width: 80px;
+        height: 80px;
+        border-radius: 50%;
+        background: var(--primary);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-size: 2rem;
+        color: white;
+    }
+
+    .theme-grid {
+        display: grid;
+        grid-template-columns: repeat(3, 1fr);
+        gap: 12px;
+    }
+
+    .theme-card {
+        background: var(--bg);
+        border: 2px solid var(--border);
+        border-radius: 12px;
+        padding: 16px;
+        cursor: pointer;
+        transition: all 0.2s;
+        text-align: center;
+    }
+
+    .theme-card:hover {
+        border-color: var(--primary);
+    }
+
+    .theme-card.active {
+        border-color: var(--primary);
+        background: rgba(59, 130, 246, 0.1);
+    }
+
+    .theme-preview {
+        width: 100%;
+        height: 60px;
+        border-radius: 8px;
+        margin-bottom: 8px;
+    }
+
+    .theme-name {
+        font-weight: 500;
+        color: var(--text);
+    }
+
+    .storage-bar {
+        height: 8px;
+        background: var(--border);
+        border-radius: 4px;
+        overflow: hidden;
+        margin: 16px 0;
+    }
+
+    .storage-bar-fill {
+        height: 100%;
+        background: var(--primary);
+        border-radius: 4px;
+        transition: width 0.3s;
+    }
+
+    .storage-info {
+        display: flex;
+        justify-content: space-between;
+        color: var(--text-secondary);
+        font-size: 0.875rem;
+    }
+
+    .breakdown-item {
+        display: flex;
+        align-items: center;
+        gap: 12px;
+        padding: 8px 0;
+    }
+
+    .breakdown-color {
+        width: 12px;
+        height: 12px;
+        border-radius: 3px;
+    }
+
+    .breakdown-label {
+        flex: 1;
+        color: var(--text);
+    }
+
+    .breakdown-value {
+        color: var(--text-secondary);
+    }
+
+    .plan-display {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+    }
+
+    .plan-info {
+        display: flex;
+        align-items: center;
+        gap: 16px;
+    }
+
+    .plan-badge {
+        background: var(--primary);
+        color: white;
+        padding: 6px 16px;
+        border-radius: 20px;
+        font-weight: 600;
+    }
+
+    .plan-details {
+        display: flex;
+        flex-direction: column;
+    }
+
+    .plan-price {
+        font-size: 1.25rem;
+        font-weight: 600;
+        color: var(--text);
+    }
+
+    .plan-cycle {
+        color: var(--text-secondary);
+        font-size: 0.875rem;
+    }
+
+    .plan-actions {
+        display: flex;
+        gap: 12px;
+    }
+
+    .payment-card {
+        display: flex;
+        align-items: center;
+        gap: 16px;
+        padding: 16px;
+        background: var(--bg);
+        border-radius: 8px;
+    }
+
+    .card-details {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+    }
+
+    .card-number {
+        font-weight: 500;
+        color: var(--text);
+    }
+
+    .card-expiry {
+        font-size: 0.875rem;
+        color: var(--text-secondary);
+    }
+
+    .default-badge {
+        background: var(--success);
+        color: white;
+        padding: 4px 10px;
+        border-radius: 12px;
+        font-size: 0.75rem;
+        font-weight: 500;
+    }
+
+    .invoices-table {
+        width: 100%;
+        border-collapse: collapse;
+    }
+
+    .invoices-table th,
+    .invoices-table td {
+        padding: 12px;
+        text-align: left;
+        border-bottom: 1px solid var(--border);
+    }
+
+    .invoices-table th {
+        color: var(--text-secondary);
+        font-weight: 500;
+        font-size: 0.875rem;
+    }
+
+    .invoices-table td {
+        color: var(--text);
+    }
+
+    .status-badge {
+        padding: 4px 10px;
+        border-radius: 12px;
+        font-size: 0.75rem;
+        font-weight: 500;
+    }
+
+    .status-badge.paid {
+        background: rgba(16, 185, 129, 0.1);
+        color: var(--success);
+    }
+
+    .invoice-link {
+        color: var(--primary);
+        text-decoration: none;
+    }
+
+    .invoice-link:hover {
+        text-decoration: underline;
+    }
+
+    .danger-content {
+        text-align: center;
+        padding: 16px;
+    }
+
+    .danger-content p {
+        color: var(--text-secondary);
+        margin-bottom: 16px;
+    }
+
+    .danger-alert {
+        display: flex;
+        align-items: flex-start;
+        gap: 12px;
+        padding: 16px;
+        background: rgba(239, 68, 68, 0.1);
+        border-radius: 8px;
+        margin-bottom: 20px;
+    }
+
+    .danger-alert svg {
+        color: var(--danger);
+        flex-shrink: 0;
+    }
+
+    .danger-alert p {
+        margin: 0;
+        color: var(--text);
+    }
+
+    /* Modal Styles */
+    .modal {
+        background: transparent;
+        border: none;
+        padding: 0;
+        max-width: 500px;
+        width: 90%;
+    }
+
+    .modal::backdrop {
+        background: rgba(0, 0, 0, 0.5);
+    }
+
+    .modal-content {
+        background: var(--surface);
+        border-radius: 16px;
+        border: 1px solid var(--border);
+        overflow: hidden;
+    }
+
+    .modal-header {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding: 20px 24px;
+        border-bottom: 1px solid var(--border);
+    }
+
+    .modal-header h2 {
+        margin: 0;
+        font-size: 1.25rem;
+        color: var(--text);
+    }
+
+    .close-btn {
+        background: none;
+        border: none;
+        color: var(--text-secondary);
+        cursor: pointer;
+        padding: 4px;
+    }
+
+    .close-btn:hover {
+        color: var(--text);
+    }
+
+    .modal-body {
+        padding: 24px;
+    }
+
+    .modal-footer {
+        display: flex;
+        justify-content: flex-end;
+        gap: 12px;
+        padding-top: 16px;
+        border-top: 1px solid var(--border);
+        margin-top: 8px;
+    }
+
+    .checkbox-group {
+        display: flex;
+        flex-direction: column;
+        gap: 8px;
+    }
+
+    .checkbox-item {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        cursor: pointer;
+    }
+
+    .checkbox-item input[type="checkbox"] {
+        width: 18px;
+        height: 18px;
+    }
+
+    /* Mobile Toggle Button */
+    .mobile-menu-toggle {
+        display: none;
+        position: fixed;
+        bottom: 24px;
+        right: 24px;
+        width: 56px;
+        height: 56px;
+        border-radius: 50%;
+        background: var(--primary);
+        color: white;
+        border: none;
+        cursor: pointer;
+        z-index: 100;
+        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+    }
+
+    /* Responsive */
+    @media (max-width: 1024px) {
+        .settings-main {
+            padding: 24px 32px;
+        }
+    }
+
+    @media (max-width: 768px) {
+        .settings-layout {
+            grid-template-columns: 1fr;
+        }
+
+        .settings-sidebar {
+            position: fixed;
+            left: -280px;
+            top: 0;
+            bottom: 0;
+            width: 280px;
+            z-index: 200;
+            transition: left 0.3s ease;
+        }
+
+        .settings-sidebar.open {
+            left: 0;
+        }
+
+        .sidebar-overlay {
+            display: none;
+            position: fixed;
+            inset: 0;
+            background: rgba(0, 0, 0, 0.5);
+            z-index: 199;
+        }
+
+        .sidebar-overlay.show {
+            display: block;
+        }
+
+        .mobile-menu-toggle {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
+
+        .settings-main {
+            padding: 20px 16px;
+        }
+
+        .section-header h1 {
+            font-size: 1.5rem;
+        }
+
+        .form-row {
+            grid-template-columns: 1fr;
+        }
+
+        .setting-row {
+            flex-direction: column;
+            align-items: flex-start;
+            gap: 12px;
+        }
+
+        .plan-display {
+            flex-direction: column;
+            align-items: flex-start;
+            gap: 16px;
+        }
+
+        .plan-actions {
+            width: 100%;
+            flex-direction: column;
+        }
+
+        .plan-actions button {
+            width: 100%;
+        }
+
+        .theme-grid {
+            grid-template-columns: repeat(2, 1fr);
+        }
+
+        .card-header {
+            flex-direction: column;
+            gap: 12px;
+        }
+    }
+
+    @media (max-width: 480px) {
+        .avatar-upload {
+            flex-direction: column;
+            text-align: center;
+        }
+
+        .theme-grid {
+            grid-template-columns: 1fr;
+        }
+
+        .invoices-table {
+            font-size: 0.875rem;
+        }
+
+        .invoices-table th:nth-child(3),
+        .invoices-table td:nth-child(3) {
+            display: none;
+        }
+    }
+</style>
+
+<!-- Sidebar overlay for mobile -->
+<div class="sidebar-overlay" id="sidebar-overlay" onclick="toggleSettingsSidebar()"></div>
+
+<!-- Mobile menu toggle -->
+<button class="mobile-menu-toggle" id="mobile-menu-toggle" onclick="toggleSettingsSidebar()" aria-label="Toggle settings menu">
+    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+        <line x1="3" y1="12" x2="21" y2="12"></line>
+        <line x1="3" y1="6" x2="21" y2="6"></line>
+        <line x1="3" y1="18" x2="21" y2="18"></line>
+    </svg>
+</button>
+
+<script>
+    function showSection(sectionId, element) {
+        // Hide all sections
+        document.querySelectorAll('.settings-section').forEach(section => {
+            section.classList.remove('active');
+        });
+
+        // Show selected section
+        document.getElementById(sectionId + '-section').classList.add('active');
+
+        // Update nav items
+        document.querySelectorAll('.nav-item').forEach(item => {
+            item.classList.remove('active');
+        });
+        element.classList.add('active');
+
+        // Close mobile sidebar
+        if (window.innerWidth <= 768) {
+            toggleSettingsSidebar();
+        }
+
+        return false;
+    }
+
+    function toggleSettingsSidebar() {
+        const sidebar = document.querySelector('.settings-sidebar');
+        const overlay = document.getElementById('sidebar-overlay');
+        sidebar.classList.toggle('open');
+        overlay.classList.toggle('show');
+    }
+
+    function showToast(message, type = 'success') {
+        if (window.showNotification) {
+            window.showNotification(message, type);
+        } else {
+            alert(message);
+        }
+    }
+
+    // Handle hash navigation on load
+    document.addEventListener('DOMContentLoaded', function() {
+        const hash = window.location.hash.substring(1);
+        if (hash) {
+            const navItem = document.querySelector(`a[href="#${hash}"]`);
+            if (navItem) {
+                showSection(hash, navItem);
+            }
+        }
+    });
+
+    // Theme selection
+    document.querySelectorAll('.theme-card').forEach(card => {
+        card.addEventListener('click', function() {
+            const theme = this.dataset.theme;
+            document.body.setAttribute('data-theme', theme);
+            localStorage.setItem('gb-theme', theme);
+
+            document.querySelectorAll('.theme-card').forEach(c => c.classList.remove('active'));
+            this.classList.add('active');
+        });
+    });
+</script>