diff --git a/src/main.rs b/src/main.rs
index ef68ee8..5b35e7a 100644
--- a/src/main.rs
+++ b/src/main.rs
@@ -6,9 +6,7 @@ mod shared;
 mod ui_server;
 
 fn init_logging() {
-    env_logger::Builder::from_env(env_logger::Env::default().default_filter_or("info"))
-        .format_timestamp_millis()
-        .init();
+    botlib::logging::init_compact_logger("info");
 }
 
 fn get_port() -> u16 {
diff --git a/src/ui_server/mod.rs b/src/ui_server/mod.rs
index ea345ab..1560994 100644
--- a/src/ui_server/mod.rs
+++ b/src/ui_server/mod.rs
@@ -46,6 +46,16 @@ const SUITE_DIRS: &[&str] = &[
     "tools",
     "assets",
     "partials",
+    "video",
+    "learn",
+    "social",
+    "dashboards",
+    "designer",
+    "workspace",
+    "project",
+    "goals",
+    "player",
+    "canvas",
 ];
 
 pub async fn index() -> impl IntoResponse {
diff --git a/ui/suite/canvas/canvas.html b/ui/suite/canvas/canvas.html
new file mode 100644
index 0000000..2f7d48a
--- /dev/null
+++ b/ui/suite/canvas/canvas.html
@@ -0,0 +1,992 @@
+<!-- =============================================================================
+     CANVAS APP - Collaborative Whiteboard & Drawing
+     Respects Theme Manager - No hardcoded theme
+     ============================================================================= -->
+
+<div class="canvas-app">
+    <!-- Toolbar -->
+    <aside class="canvas-toolbar">
+        <div class="toolbar-section">
+            <button class="tool-btn active" data-tool="select" onclick="selectTool('select')" title="Select (V)">
+                <span>↖</span>
+            </button>
+            <button class="tool-btn" data-tool="pan" onclick="selectTool('pan')" title="Pan (H)">
+                <span>✋</span>
+            </button>
+        </div>
+
+        <div class="toolbar-section">
+            <button class="tool-btn" data-tool="pencil" onclick="selectTool('pencil')" title="Pencil (P)">
+                <span>✏️</span>
+            </button>
+            <button class="tool-btn" data-tool="brush" onclick="selectTool('brush')" title="Brush (B)">
+                <span>🖌️</span>
+            </button>
+            <button class="tool-btn" data-tool="eraser" onclick="selectTool('eraser')" title="Eraser (E)">
+                <span>🧹</span>
+            </button>
+        </div>
+
+        <div class="toolbar-section">
+            <button class="tool-btn" data-tool="rectangle" onclick="selectTool('rectangle')" title="Rectangle (R)">
+                <span>▢</span>
+            </button>
+            <button class="tool-btn" data-tool="ellipse" onclick="selectTool('ellipse')" title="Ellipse (O)">
+                <span>◯</span>
+            </button>
+            <button class="tool-btn" data-tool="line" onclick="selectTool('line')" title="Line (L)">
+                <span>╱</span>
+            </button>
+            <button class="tool-btn" data-tool="arrow" onclick="selectTool('arrow')" title="Arrow (A)">
+                <span>→</span>
+            </button>
+        </div>
+
+        <div class="toolbar-section">
+            <button class="tool-btn" data-tool="text" onclick="selectTool('text')" title="Text (T)">
+                <span>T</span>
+            </button>
+            <button class="tool-btn" data-tool="sticky" onclick="selectTool('sticky')" title="Sticky Note (S)">
+                <span>📝</span>
+            </button>
+            <button class="tool-btn" data-tool="image" onclick="selectTool('image')" title="Image (I)">
+                <span>🖼️</span>
+            </button>
+        </div>
+
+        <div class="toolbar-section">
+            <button class="tool-btn" data-tool="connector" onclick="selectTool('connector')" title="Connector (C)">
+                <span>⤳</span>
+            </button>
+            <button class="tool-btn" data-tool="frame" onclick="selectTool('frame')" title="Frame (F)">
+                <span>⬚</span>
+            </button>
+        </div>
+
+        <div class="toolbar-divider"></div>
+
+        <div class="toolbar-section colors">
+            <input type="color" id="stroke-color" value="#000000" title="Stroke Color" onchange="setStrokeColor(this.value)">
+            <input type="color" id="fill-color" value="#ffffff" title="Fill Color" onchange="setFillColor(this.value)">
+        </div>
+
+        <div class="toolbar-section">
+            <select id="stroke-width" onchange="setStrokeWidth(this.value)" title="Stroke Width">
+                <option value="1">1px</option>
+                <option value="2" selected>2px</option>
+                <option value="4">4px</option>
+                <option value="6">6px</option>
+                <option value="8">8px</option>
+            </select>
+        </div>
+    </aside>
+
+    <!-- Main Canvas Area -->
+    <main class="canvas-main">
+        <!-- Top Bar -->
+        <header class="canvas-header">
+            <div class="header-left">
+                <input type="text" id="canvas-name" value="Untitled Canvas" class="canvas-name-input"
+                    onblur="renameCanvas(this.value)">
+                <span class="save-status" id="save-status">Saved</span>
+            </div>
+            <div class="header-center">
+                <div class="zoom-controls">
+                    <button class="zoom-btn" onclick="zoomOut()" title="Zoom Out">−</button>
+                    <span id="zoom-level">100%</span>
+                    <button class="zoom-btn" onclick="zoomIn()" title="Zoom In">+</button>
+                    <button class="zoom-btn" onclick="resetZoom()" title="Reset Zoom">⟲</button>
+                    <button class="zoom-btn" onclick="fitToScreen()" title="Fit to Screen">⤢</button>
+                </div>
+            </div>
+            <div class="header-right">
+                <button class="btn-icon" onclick="undo()" title="Undo (Ctrl+Z)" data-i18n-title="canvas-undo">
+                    <span>↶</span>
+                </button>
+                <button class="btn-icon" onclick="redo()" title="Redo (Ctrl+Y)" data-i18n-title="canvas-redo">
+                    <span>↷</span>
+                </button>
+                <div class="separator"></div>
+                <button class="btn-icon" onclick="clearCanvas()" title="Clear Canvas" data-i18n-title="canvas-clear">
+                    <span>🗑️</span>
+                </button>
+                <button class="btn-secondary" onclick="exportCanvas()" data-i18n="canvas-export">
+                    <span>📤</span> Export
+                </button>
+                <button class="btn-primary" onclick="shareCanvas()" data-i18n="canvas-collaborate">
+                    <span>👥</span> Share
+                </button>
+            </div>
+        </header>
+
+        <!-- Canvas Container -->
+        <div class="canvas-container" id="canvas-container">
+            <canvas id="main-canvas"></canvas>
+            <div id="selection-box" class="selection-box hidden"></div>
+            <div id="cursor-indicators" class="cursor-indicators"></div>
+        </div>
+
+        <!-- Mini Map -->
+        <div class="mini-map" id="mini-map">
+            <canvas id="mini-map-canvas"></canvas>
+            <div class="viewport-indicator" id="viewport-indicator"></div>
+        </div>
+    </main>
+
+    <!-- Properties Panel -->
+    <aside class="properties-panel collapsed" id="properties-panel">
+        <button class="panel-toggle" onclick="togglePropertiesPanel()">
+            <span>⚙️</span>
+        </button>
+        <div class="panel-content">
+            <h3>Properties</h3>
+
+            <div id="element-properties" class="properties-group hidden">
+                <div class="property-row">
+                    <label>Position</label>
+                    <div class="input-group">
+                        <input type="number" id="prop-x" placeholder="X" onchange="updateElementProperty('x', this.value)">
+                        <input type="number" id="prop-y" placeholder="Y" onchange="updateElementProperty('y', this.value)">
+                    </div>
+                </div>
+                <div class="property-row">
+                    <label>Size</label>
+                    <div class="input-group">
+                        <input type="number" id="prop-width" placeholder="W" onchange="updateElementProperty('width', this.value)">
+                        <input type="number" id="prop-height" placeholder="H" onchange="updateElementProperty('height', this.value)">
+                    </div>
+                </div>
+                <div class="property-row">
+                    <label>Rotation</label>
+                    <input type="number" id="prop-rotation" placeholder="0°" onchange="updateElementProperty('rotation', this.value)">
+                </div>
+                <div class="property-row">
+                    <label>Opacity</label>
+                    <input type="range" id="prop-opacity" min="0" max="100" value="100" onchange="updateElementProperty('opacity', this.value)">
+                </div>
+                <div class="property-row">
+                    <label>Stroke</label>
+                    <input type="color" id="prop-stroke" onchange="updateElementProperty('strokeColor', this.value)">
+                </div>
+                <div class="property-row">
+                    <label>Fill</label>
+                    <input type="color" id="prop-fill" onchange="updateElementProperty('fillColor', this.value)">
+                </div>
+            </div>
+
+            <div id="canvas-properties" class="properties-group">
+                <h4>Canvas</h4>
+                <div class="property-row">
+                    <label>Background</label>
+                    <input type="color" id="canvas-bg" value="#ffffff" onchange="setCanvasBackground(this.value)">
+                </div>
+                <div class="property-row">
+                    <label>Grid</label>
+                    <select id="grid-type" onchange="setGridType(this.value)">
+                        <option value="none">None</option>
+                        <option value="dots" selected>Dots</option>
+                        <option value="lines">Lines</option>
+                        <option value="squares">Squares</option>
+                    </select>
+                </div>
+                <div class="property-row">
+                    <label>Snap to Grid</label>
+                    <input type="checkbox" id="snap-grid" onchange="toggleSnapToGrid(this.checked)">
+                </div>
+            </div>
+
+            <div class="properties-group">
+                <h4>Layers</h4>
+                <div id="layers-list" class="layers-list">
+                    <div class="layer-item active">
+                        <span class="layer-visibility">👁️</span>
+                        <span class="layer-name">Layer 1</span>
+                        <span class="layer-lock">🔓</span>
+                    </div>
+                </div>
+                <button class="btn-sm" onclick="addLayer()">+ Add Layer</button>
+            </div>
+        </div>
+    </aside>
+
+    <!-- Collaborators Panel -->
+    <div class="collaborators-panel" id="collaborators-panel">
+        <div class="collaborators-list" id="collaborators-list">
+            <!-- Collaborator avatars will be added here -->
+        </div>
+    </div>
+
+    <!-- Context Menu -->
+    <div id="context-menu" class="context-menu hidden">
+        <button onclick="duplicateSelected()">Duplicate</button>
+        <button onclick="copySelected()">Copy</button>
+        <button onclick="pasteClipboard()">Paste</button>
+        <div class="menu-divider"></div>
+        <button onclick="bringToFront()">Bring to Front</button>
+        <button onclick="sendToBack()">Send to Back</button>
+        <div class="menu-divider"></div>
+        <button onclick="deleteSelected()">Delete</button>
+    </div>
+
+    <!-- Export Modal -->
+    <div id="export-modal" class="modal hidden">
+        <div class="modal-content">
+            <h2 data-i18n="canvas-export">Export Canvas</h2>
+            <div class="export-options">
+                <div class="export-format">
+                    <label>Format</label>
+                    <select id="export-format">
+                        <option value="png">PNG Image</option>
+                        <option value="svg">SVG Vector</option>
+                        <option value="pdf">PDF Document</option>
+                        <option value="json">JSON Data</option>
+                    </select>
+                </div>
+                <div class="export-scale">
+                    <label>Scale</label>
+                    <select id="export-scale">
+                        <option value="1">1x</option>
+                        <option value="2" selected>2x</option>
+                        <option value="3">3x</option>
+                    </select>
+                </div>
+                <div class="export-bg">
+                    <label>
+                        <input type="checkbox" id="export-bg" checked>
+                        Include Background
+                    </label>
+                </div>
+            </div>
+            <div class="modal-actions">
+                <button class="btn-secondary" onclick="closeExportModal()">Cancel</button>
+                <button class="btn-primary" onclick="doExport()">Export</button>
+            </div>
+        </div>
+    </div>
+</div>
+
+<style>
+.canvas-app {
+    display: flex;
+    height: 100%;
+    background: var(--bg-primary);
+    color: var(--text-primary);
+    overflow: hidden;
+}
+
+.canvas-toolbar {
+    width: 56px;
+    background: var(--bg-secondary);
+    border-right: 1px solid var(--border-color);
+    padding: 0.5rem;
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+    overflow-y: auto;
+}
+
+.toolbar-section {
+    display: flex;
+    flex-direction: column;
+    gap: 0.25rem;
+}
+
+.toolbar-section.colors {
+    flex-direction: row;
+    justify-content: center;
+    gap: 0.25rem;
+}
+
+.toolbar-section.colors input[type="color"] {
+    width: 20px;
+    height: 20px;
+    border: 1px solid var(--border-color);
+    border-radius: 4px;
+    padding: 0;
+    cursor: pointer;
+}
+
+.tool-btn {
+    width: 40px;
+    height: 40px;
+    border: none;
+    background: transparent;
+    color: var(--text-secondary);
+    font-size: 1.125rem;
+    cursor: pointer;
+    border-radius: 6px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: all 0.15s;
+}
+
+.tool-btn:hover {
+    background: var(--bg-hover);
+    color: var(--text-primary);
+}
+
+.tool-btn.active {
+    background: var(--accent-color);
+    color: white;
+}
+
+.toolbar-divider {
+    height: 1px;
+    background: var(--border-color);
+    margin: 0.5rem 0;
+}
+
+.toolbar-section select {
+    width: 100%;
+    padding: 0.25rem;
+    border: 1px solid var(--border-color);
+    border-radius: 4px;
+    background: var(--bg-primary);
+    color: var(--text-primary);
+    font-size: 0.75rem;
+}
+
+.canvas-main {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    position: relative;
+}
+
+.canvas-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0.5rem 1rem;
+    background: var(--bg-secondary);
+    border-bottom: 1px solid var(--border-color);
+    gap: 1rem;
+}
+
+.header-left {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+}
+
+.canvas-name-input {
+    border: none;
+    background: transparent;
+    color: var(--text-primary);
+    font-size: 1rem;
+    font-weight: 600;
+    padding: 0.25rem 0.5rem;
+    border-radius: 4px;
+    width: 200px;
+}
+
+.canvas-name-input:hover,
+.canvas-name-input:focus {
+    background: var(--bg-primary);
+    outline: none;
+}
+
+.save-status {
+    font-size: 0.75rem;
+    color: var(--text-muted);
+}
+
+.header-center {
+    display: flex;
+    align-items: center;
+}
+
+.zoom-controls {
+    display: flex;
+    align-items: center;
+    gap: 0.25rem;
+    background: var(--bg-primary);
+    padding: 0.25rem;
+    border-radius: 6px;
+    border: 1px solid var(--border-color);
+}
+
+.zoom-btn {
+    width: 28px;
+    height: 28px;
+    border: none;
+    background: transparent;
+    color: var(--text-secondary);
+    cursor: pointer;
+    border-radius: 4px;
+    font-size: 1rem;
+}
+
+.zoom-btn:hover {
+    background: var(--bg-hover);
+    color: var(--text-primary);
+}
+
+#zoom-level {
+    font-size: 0.875rem;
+    min-width: 50px;
+    text-align: center;
+}
+
+.header-right {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+}
+
+.separator {
+    width: 1px;
+    height: 24px;
+    background: var(--border-color);
+    margin: 0 0.5rem;
+}
+
+.btn-icon {
+    width: 32px;
+    height: 32px;
+    border: none;
+    background: transparent;
+    color: var(--text-secondary);
+    cursor: pointer;
+    border-radius: 6px;
+    font-size: 1rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.btn-icon:hover {
+    background: var(--bg-hover);
+    color: var(--text-primary);
+}
+
+.btn-secondary {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.375rem;
+    padding: 0.5rem 0.75rem;
+    background: var(--bg-primary);
+    color: var(--text-primary);
+    border: 1px solid var(--border-color);
+    border-radius: 6px;
+    font-size: 0.875rem;
+    cursor: pointer;
+}
+
+.btn-secondary:hover {
+    background: var(--bg-hover);
+}
+
+.btn-primary {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.375rem;
+    padding: 0.5rem 0.75rem;
+    background: var(--accent-color);
+    color: white;
+    border: none;
+    border-radius: 6px;
+    font-size: 0.875rem;
+    cursor: pointer;
+}
+
+.btn-primary:hover {
+    background: var(--accent-hover);
+}
+
+.btn-sm {
+    padding: 0.375rem 0.75rem;
+    font-size: 0.75rem;
+    width: 100%;
+}
+
+.canvas-container {
+    flex: 1;
+    position: relative;
+    overflow: hidden;
+    background: #f0f0f0;
+    cursor: crosshair;
+}
+
+#main-canvas {
+    position: absolute;
+    top: 0;
+    left: 0;
+}
+
+.selection-box {
+    position: absolute;
+    border: 2px dashed var(--accent-color);
+    background: rgba(59, 130, 246, 0.1);
+    pointer-events: none;
+}
+
+.selection-box.hidden {
+    display: none;
+}
+
+.cursor-indicators {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    pointer-events: none;
+}
+
+.cursor-indicator {
+    position: absolute;
+    display: flex;
+    align-items: center;
+    gap: 0.25rem;
+    pointer-events: none;
+}
+
+.cursor-dot {
+    width: 12px;
+    height: 12px;
+    border-radius: 50%;
+    border: 2px solid white;
+}
+
+.cursor-name {
+    font-size: 0.75rem;
+    background: rgba(0, 0, 0, 0.7);
+    color: white;
+    padding: 0.125rem 0.375rem;
+    border-radius: 4px;
+    white-space: nowrap;
+}
+
+.mini-map {
+    position: absolute;
+    bottom: 1rem;
+    right: 1rem;
+    width: 200px;
+    height: 150px;
+    background: var(--bg-secondary);
+    border: 1px solid var(--border-color);
+    border-radius: 8px;
+    overflow: hidden;
+    box-shadow: var(--shadow-md);
+}
+
+#mini-map-canvas {
+    width: 100%;
+    height: 100%;
+}
+
+.viewport-indicator {
+    position: absolute;
+    border: 2px solid var(--accent-color);
+    background: rgba(59, 130, 246, 0.2);
+    pointer-events: none;
+}
+
+.properties-panel {
+    width: 280px;
+    background: var(--bg-secondary);
+    border-left: 1px solid var(--border-color);
+    transition: width 0.2s;
+    display: flex;
+    flex-direction: column;
+}
+
+.properties-panel.collapsed {
+    width: 48px;
+}
+
+.properties-panel.collapsed .panel-content {
+    display: none;
+}
+
+.panel-toggle {
+    width: 100%;
+    padding: 0.75rem;
+    border: none;
+    background: transparent;
+    cursor: pointer;
+    font-size: 1.25rem;
+}
+
+.panel-content {
+    flex: 1;
+    padding: 1rem;
+    overflow-y: auto;
+}
+
+.panel-content h3 {
+    font-size: 1rem;
+    font-weight: 600;
+    margin: 0 0 1rem 0;
+}
+
+.properties-group {
+    margin-bottom: 1.5rem;
+}
+
+.properties-group.hidden {
+    display: none;
+}
+
+.properties-group h4 {
+    font-size: 0.75rem;
+    font-weight: 600;
+    color: var(--text-muted);
+    text-transform: uppercase;
+    margin: 0 0 0.75rem 0;
+}
+
+.property-row {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 0.75rem;
+}
+
+.property-row label {
+    font-size: 0.875rem;
+    color: var(--text-secondary);
+}
+
+.property-row input[type="number"],
+.property-row input[type="text"],
+.property-row select {
+    width: 100px;
+    padding: 0.375rem 0.5rem;
+    border: 1px solid var(--border-color);
+    border-radius: 4px;
+    background: var(--bg-primary);
+    color: var(--text-primary);
+    font-size: 0.875rem;
+}
+
+.property-row input[type="color"] {
+    width: 32px;
+    height: 32px;
+    border: 1px solid var(--border-color);
+    border-radius: 4px;
+    padding: 2px;
+    cursor: pointer;
+}
+
+.property-row input[type="range"] {
+    width: 100px;
+}
+
+.property-row input[type="checkbox"] {
+    width: 16px;
+    height: 16px;
+}
+
+.input-group {
+    display: flex;
+    gap: 0.25rem;
+}
+
+.input-group input {
+    width: 48px !important;
+}
+
+.layers-list {
+    margin-bottom: 0.5rem;
+}
+
+.layer-item {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    padding: 0.5rem;
+    border-radius: 4px;
+    cursor: pointer;
+    font-size: 0.875rem;
+}
+
+.layer-item:hover {
+    background: var(--bg-hover);
+}
+
+.layer-item.active {
+    background: var(--accent-color);
+    color: white;
+}
+
+.layer-visibility,
+.layer-lock {
+    cursor: pointer;
+}
+
+.layer-name {
+    flex: 1;
+}
+
+.collaborators-panel {
+    position: absolute;
+    top: 60px;
+    right: 1rem;
+    display: flex;
+    gap: -0.5rem;
+}
+
+.collaborators-list {
+    display: flex;
+}
+
+.collaborator-avatar {
+    width: 32px;
+    height: 32px;
+    border-radius: 50%;
+    border: 2px solid var(--bg-secondary);
+    margin-left: -8px;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 0.75rem;
+    font-weight: 600;
+    color: white;
+}
+
+.collaborator-avatar:first-child {
+    margin-left: 0;
+}
+
+.context-menu {
+    position: fixed;
+    background: var(--bg-secondary);
+    border: 1px solid var(--border-color);
+    border-radius: 8px;
+    box-shadow: var(--shadow-lg);
+    padding: 0.5rem 0;
+    min-width: 160px;
+    z-index: 1000;
+}
+
+.context-menu.hidden {
+    display: none;
+}
+
+.context-menu button {
+    display: block;
+    width: 100%;
+    padding: 0.5rem 1rem;
+    border: none;
+    background: transparent;
+    color: var(--text-primary);
+    font-size: 0.875rem;
+    text-align: left;
+    cursor: pointer;
+}
+
+.context-menu button:hover {
+    background: var(--bg-hover);
+}
+
+.menu-divider {
+    height: 1px;
+    background: var(--border-color);
+    margin: 0.5rem 0;
+}
+
+.modal {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(0, 0, 0, 0.5);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 1000;
+}
+
+.modal.hidden {
+    display: none;
+}
+
+.modal-content {
+    background: var(--bg-secondary);
+    border-radius: 12px;
+    padding: 1.5rem;
+    min-width: 400px;
+    max-width: 90%;
+}
+
+.modal-content h2 {
+    font-size: 1.25rem;
+    font-weight: 600;
+    margin: 0 0 1.5rem 0;
+}
+
+.export-options {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+    margin-bottom: 1.5rem;
+}
+
+.export-format,
+.export-scale,
+.export-bg {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+
+.export-format select,
+.export-scale select {
+    width: 150px;
+    padding: 0.5rem;
+    border: 1px solid var(--border-color);
+    border-radius: 6px;
+    background: var(--bg-primary);
+    color: var(--text-primary);
+}
+
+.export-bg label {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    cursor: pointer;
+}
+
+.modal-actions {
+    display: flex;
+    justify-content: flex-end;
+    gap: 0.75rem;
+}
+
+@media (max-width: 1024px) {
+    .properties-panel {
+        position: absolute;
+        right: 0;
+        top: 0;
+        height: 100%;
+        z-index: 50;
+    }
+}
+
+@media (max-width: 768px) {
+    .canvas-toolbar {
+        width: 48px;
+        padding: 0.25rem;
+    }
+
+    .tool-btn {
+        width: 36px;
+        height: 36px;
+        font-size: 1rem;
+    }
+
+    .mini-map {
+        width: 120px;
+        height: 90px;
+    }
+
+    .properties-panel.collapsed {
+        width: 0;
+        border: none;
+    }
+
+    .canvas-header {
+        flex-wrap: wrap;
+    }
+
+    .header-center {
+        order: 3;
+        width: 100%;
+        justify-content: center;
+        margin-top: 0.5rem;
+    }
+}
+</style>
+
+<script>
+let currentTool = 'select';
+let isDrawing = false;
+let startX, startY;
+let elements = [];
+let selectedElement = null;
+let history = [];
+let historyIndex = -1;
+let zoom = 1;
+let panX = 0, panY = 0;
+let strokeColor = '#000000';
+let fillColor = '#ffffff';
+let strokeWidth = 2;
+let canvas, ctx;
+let gridType = 'dots';
+let snapToGrid = false;
+
+document.addEventListener('DOMContentLoaded', function() {
+    canvas = document.getElementById('main-canvas');
+    ctx = canvas.getContext('2d');
+    resizeCanvas();
+    drawGrid();
+
+    window.addEventListener('resize', resizeCanvas);
+
+    canvas.addEventListener('mousedown', handleMouseDown);
+    canvas.addEventListener('mousemove', handleMouseMove);
+    canvas.addEventListener('mouseup', handleMouseUp);
+    canvas.addEventListener('wheel', handleWheel);
+    canvas.addEventListener('contextmenu', handleContextMenu);
+
+    document.addEventListener('keydown', handleKeyDown);
+});
+
+function resizeCanvas() {
+    const container = document.getElementById('canvas-container');
+    canvas.width = container.clientWidth;
+    canvas.height = container.clientHeight;
+    redraw();
+}
+
+function selectTool(tool) {
+    currentTool = tool;
+    document.querySelectorAll('.tool-btn').forEach(btn => {
+        btn.classList.toggle('active', btn.dataset.tool === tool);
+    });
+
+    const container = document.getElementById('canvas-container');
+    switch (tool) {
+        case 'select':
+            container.style.cursor = 'default';
+            break;
+        case 'pan':
+            container.style.cursor = 'grab';
+            break;
+        case 'text':
+            container.style.cursor = 'text';
+            break;
+        default:
+            container.style.cursor = 'crosshair';
+    }
+}
+
+function handleMouseDown(e) {
+    const rect = canvas.getBoundingClientRect();
+    startX = (e.clientX - rect.left - panX) / zoom;
+    startY = (e.clientY - rect.top - panY) / zoom;
+    isDrawing = true;
+
+    if (currentTool === 'select') {
+        selectedElement = findElementAt(startX, startY);
+        if (selectedElement) {
+            showElementProperties(selectedElement);
+        } else {
+            hideElementProperties();
+        }
+    } else if (currentTool === 'pan') {
+        document.getElementById('canvas-container').style.cursor = 'grabbing';
+    }
+}
+
+function handleMouseMove(e) {
+    if (!isDrawing) return;
+
+    const rect = canvas.getBoundingClientRect();
+    const currentX = (e.
diff --git a/ui/suite/css/app.css b/ui/suite/css/app.css
index dd3d6a8..1ef94dc 100644
--- a/ui/suite/css/app.css
+++ b/ui/suite/css/app.css
@@ -1117,7 +1117,7 @@ body {
 
 .app-grid {
     display: grid;
-    grid-template-columns: repeat(3, 1fr);
+    grid-template-columns: repeat(4, 1fr);
     gap: 2px;
 }
 
diff --git a/ui/suite/css/base.css b/ui/suite/css/base.css
index 1ec0729..b4b0315 100644
--- a/ui/suite/css/base.css
+++ b/ui/suite/css/base.css
@@ -588,7 +588,7 @@ body.no-animations .spinner {
 .apps-grid,
 .app-grid {
     display: grid;
-    grid-template-columns: repeat(3, 1fr);
+    grid-template-columns: repeat(4, 1fr);
     gap: 2px;
 }
 
diff --git a/ui/suite/css/home.css b/ui/suite/css/home.css
index 02a7cdd..f4ca597 100644
--- a/ui/suite/css/home.css
+++ b/ui/suite/css/home.css
@@ -1,89 +1,226 @@
-/* Home page styles */
-
-:root {
-    --primary: #3b82f6;
-    --primary-hover: #2563eb;
-    --bg: #0f172a;
-    --surface: #1e293b;
-    --border: #334155;
-    --text: #f8fafc;
-    --text-secondary: #94a3b8;
-}
-
-* {
-    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;
-}
-
 .home-container {
     max-width: 1400px;
     margin: 0 auto;
-    padding: 2rem;
+    padding: 32px 40px;
+    min-height: 100%;
 }
 
-.home-header {
-    text-align: center;
-    margin-bottom: 3rem;
+/* Welcome Section */
+.welcome-section {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 48px;
+    gap: 24px;
+    flex-wrap: wrap;
 }
 
-.home-logo {
-    width: 80px;
-    height: 80px;
-    margin: 0 auto 1.5rem;
-    background: linear-gradient(135deg, var(--primary), #8b5cf6);
-    border-radius: 20px;
+.welcome-content {
+    flex: 1;
+    min-width: 280px;
+}
+
+.welcome-title {
+    font-size: 2.5rem;
+    font-weight: 700;
+    margin: 0 0 8px 0;
+    color: var(--text-primary);
+    background: linear-gradient(
+        135deg,
+        var(--text-primary),
+        var(--accent-color)
+    );
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+}
+
+.welcome-subtitle {
+    font-size: 1.125rem;
+    color: var(--text-secondary);
+    margin: 0;
+}
+
+.quick-search {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    padding: 14px 20px;
+    background: var(--bg-secondary);
+    border: 1px solid var(--border-color);
+    border-radius: 12px;
+    min-width: 320px;
+    cursor: pointer;
+    transition: all 0.2s;
+}
+
+.quick-search:hover {
+    border-color: var(--accent-color);
+    box-shadow: 0 0 0 3px var(--accent-color-alpha, rgba(99, 102, 241, 0.1));
+}
+
+.quick-search svg {
+    color: var(--text-tertiary);
+    flex-shrink: 0;
+}
+
+.quick-search input {
+    flex: 1;
+    border: none;
+    background: transparent;
+    color: var(--text-primary);
+    font-size: 0.9375rem;
+    outline: none;
+}
+
+.quick-search input::placeholder {
+    color: var(--text-tertiary);
+}
+
+.quick-search kbd {
+    padding: 4px 8px;
+    background: var(--bg-tertiary);
+    border: 1px solid var(--border-color);
+    border-radius: 6px;
+    font-size: 0.75rem;
+    font-family: inherit;
+    color: var(--text-secondary);
+}
+
+/* Section Headers */
+.section-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 20px;
+}
+
+.section-header h2 {
+    font-size: 1.25rem;
+    font-weight: 600;
+    color: var(--text-primary);
+    margin: 0;
+}
+
+.view-all {
+    font-size: 0.875rem;
+    color: var(--accent-color);
+    text-decoration: none;
+    font-weight: 500;
+    transition: opacity 0.2s;
+}
+
+.view-all:hover {
+    opacity: 0.8;
+}
+
+/* Recent Section */
+.recent-section {
+    margin-bottom: 48px;
+}
+
+.recent-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+    gap: 16px;
+}
+
+.recent-card {
+    display: flex;
+    align-items: center;
+    gap: 16px;
+    padding: 16px 20px;
+    background: var(--bg-secondary);
+    border: 1px solid var(--border-color);
+    border-radius: 12px;
+    cursor: pointer;
+    transition: all 0.2s;
+}
+
+.recent-card:hover {
+    border-color: var(--accent-color);
+    transform: translateY(-2px);
+    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
+}
+
+.recent-icon {
+    width: 48px;
+    height: 48px;
+    border-radius: 10px;
     display: flex;
     align-items: center;
     justify-content: center;
-    font-size: 2.5rem;
+    flex-shrink: 0;
 }
 
-.home-title {
-    font-size: 2.5rem;
-    font-weight: 700;
-    margin-bottom: 0.75rem;
-    background: linear-gradient(135deg, var(--text), var(--primary));
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
+.recent-icon.doc {
+    background: linear-gradient(135deg, #3b82f6, #1d4ed8);
+    color: white;
 }
 
-.home-subtitle {
+.recent-icon.sheet {
+    background: linear-gradient(135deg, #22c55e, #16a34a);
+    color: white;
+}
+
+.recent-icon.slides {
+    background: linear-gradient(135deg, #f59e0b, #d97706);
+    color: white;
+}
+
+.recent-icon.paper {
+    background: linear-gradient(135deg, #ec4899, #db2777);
+    color: white;
+}
+
+.recent-info {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+    min-width: 0;
+}
+
+.recent-name {
+    font-size: 0.9375rem;
+    font-weight: 500;
+    color: var(--text-primary);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.recent-meta {
+    font-size: 0.8125rem;
     color: var(--text-secondary);
-    font-size: 1.125rem;
-    max-width: 500px;
-    margin: 0 auto;
+}
+
+/* Apps Section */
+.apps-section {
+    margin-bottom: 48px;
 }
 
 .apps-grid {
     display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
-    gap: 1.5rem;
-    margin-bottom: 3rem;
+    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
+    gap: 20px;
 }
 
 .app-card {
-    background: var(--surface);
-    border: 1px solid var(--border);
+    display: flex;
+    gap: 16px;
+    padding: 24px;
+    background: var(--bg-secondary);
+    border: 1px solid var(--border-color);
     border-radius: 16px;
-    padding: 1.5rem;
     text-decoration: none;
     color: inherit;
-    transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s;
-    display: block;
+    transition: all 0.25s ease;
 }
 
 .app-card:hover {
+    border-color: var(--accent-color);
     transform: translateY(-4px);
-    border-color: var(--primary);
-    box-shadow: 0 8px 32px rgba(59, 130, 246, 0.15);
+    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
 }
 
 .app-icon {
@@ -93,135 +230,168 @@ body {
     display: flex;
     align-items: center;
     justify-content: center;
-    font-size: 1.75rem;
-    margin-bottom: 1rem;
+    flex-shrink: 0;
+    color: white;
 }
 
-.app-icon.chat { background: linear-gradient(135deg, #3b82f6, #1d4ed8); }
-.app-icon.drive { background: linear-gradient(135deg, #f59e0b, #d97706); }
-.app-icon.tasks { background: linear-gradient(135deg, #22c55e, #16a34a); }
-.app-icon.mail { background: linear-gradient(135deg, #ef4444, #dc2626); }
-.app-icon.calendar { background: linear-gradient(135deg, #a855f7, #7c3aed); }
-.app-icon.meet { background: linear-gradient(135deg, #06b6d4, #0891b2); }
-.app-icon.paper { background: linear-gradient(135deg, #eab308, #ca8a04); }
-.app-icon.research { background: linear-gradient(135deg, #ec4899, #db2777); }
-.app-icon.analytics { background: linear-gradient(135deg, #6366f1, #4f46e5); }
-
-.app-name {
-    font-size: 1.25rem;
-    font-weight: 600;
-    margin-bottom: 0.5rem;
+.app-icon.chat {
+    background: linear-gradient(135deg, #3b82f6, #1d4ed8);
+}
+.app-icon.people {
+    background: linear-gradient(135deg, #8b5cf6, #7c3aed);
+}
+.app-icon.mail {
+    background: linear-gradient(135deg, #ef4444, #dc2626);
+}
+.app-icon.meet {
+    background: linear-gradient(135deg, #06b6d4, #0891b2);
+}
+.app-icon.calendar {
+    background: linear-gradient(135deg, #a855f7, #9333ea);
+}
+.app-icon.tasks {
+    background: linear-gradient(135deg, #22c55e, #16a34a);
+}
+.app-icon.project {
+    background: linear-gradient(135deg, #14b8a6, #0d9488);
+}
+.app-icon.goals {
+    background: linear-gradient(135deg, #f97316, #ea580c);
+}
+.app-icon.paper {
+    background: linear-gradient(135deg, #ec4899, #db2777);
+}
+.app-icon.docs {
+    background: linear-gradient(135deg, #3b82f6, #2563eb);
+}
+.app-icon.sheet {
+    background: linear-gradient(135deg, #22c55e, #16a34a);
+}
+.app-icon.slides {
+    background: linear-gradient(135deg, #f59e0b, #d97706);
+}
+.app-icon.drive {
+    background: linear-gradient(135deg, #f59e0b, #d97706);
+}
+.app-icon.video {
+    background: linear-gradient(135deg, #ef4444, #dc2626);
+}
+.app-icon.player {
+    background: linear-gradient(135deg, #a855f7, #9333ea);
+}
+.app-icon.social {
+    background: linear-gradient(135deg, #06b6d4, #0891b2);
+}
+.app-icon.learn {
+    background: linear-gradient(135deg, #8b5cf6, #7c3aed);
+}
+.app-icon.research {
+    background: linear-gradient(135deg, #14b8a6, #0d9488);
+}
+.app-icon.analytics {
+    background: linear-gradient(135deg, #6366f1, #4f46e5);
+}
+.app-icon.dashboards {
+    background: linear-gradient(135deg, #8b5cf6, #7c3aed);
+}
+.app-icon.sources {
+    background: linear-gradient(135deg, #a855f7, #9333ea);
+}
+.app-icon.canvas {
+    background: linear-gradient(135deg, #ec4899, #db2777);
+}
+.app-icon.workspace {
+    background: linear-gradient(135deg, #64748b, #475569);
+}
+.app-icon.designer {
+    background: linear-gradient(135deg, #f97316, #ea580c);
+}
+.app-icon.editor {
+    background: linear-gradient(135deg, #10b981, #059669);
+}
+.app-icon.attendant {
+    background: linear-gradient(135deg, #22c55e, #16a34a);
+}
+.app-icon.compliance {
+    background: linear-gradient(135deg, #3b82f6, #1d4ed8);
+}
+.app-icon.monitoring {
+    background: linear-gradient(135deg, #ef4444, #dc2626);
+}
+.app-icon.settings {
+    background: linear-gradient(135deg, #71717a, #52525b);
 }
 
-.app-description {
-    color: var(--text-secondary);
-    font-size: 0.875rem;
-    line-height: 1.5;
-}
-
-.section-title {
-    font-size: 1rem;
-    font-weight: 600;
-    color: var(--text-secondary);
-    text-transform: uppercase;
-    letter-spacing: 0.05em;
-    margin-bottom: 1rem;
-}
-
-.quick-actions {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 0.75rem;
-    margin-bottom: 3rem;
-}
-
-.quick-action-btn {
-    display: inline-flex;
-    align-items: center;
-    gap: 0.5rem;
-    padding: 0.75rem 1.25rem;
-    background: var(--surface);
-    border: 1px solid var(--border);
-    border-radius: 10px;
-    color: var(--text);
-    font-size: 0.875rem;
-    cursor: pointer;
-    transition: border-color 0.2s, background 0.2s;
-    text-decoration: none;
-}
-
-.quick-action-btn:hover {
-    border-color: var(--primary);
-    background: rgba(59, 130, 246, 0.1);
-}
-
-.recent-section {
-    background: var(--surface);
-    border: 1px solid var(--border);
-    border-radius: 16px;
-    padding: 1.5rem;
-}
-
-.recent-list {
+.app-content {
     display: flex;
     flex-direction: column;
-    gap: 0.5rem;
+    gap: 8px;
+    min-width: 0;
 }
 
-.recent-item {
-    display: flex;
-    align-items: center;
-    gap: 1rem;
-    padding: 0.75rem;
-    border-radius: 8px;
-    cursor: pointer;
-    transition: background 0.2s;
+.app-content h3 {
+    font-size: 1.125rem;
+    font-weight: 600;
+    margin: 0;
+    color: var(--text-primary);
 }
 
-.recent-item:hover {
-    background: var(--bg);
-}
-
-.recent-icon {
-    width: 40px;
-    height: 40px;
-    border-radius: 8px;
-    background: var(--bg);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    font-size: 1.25rem;
-}
-
-.recent-info {
-    flex: 1;
-}
-
-.recent-name {
-    font-weight: 500;
-    margin-bottom: 0.25rem;
-}
-
-.recent-meta {
-    font-size: 0.75rem;
-    color: var(--text-secondary);
-}
-
-.recent-time {
-    font-size: 0.75rem;
+.app-content p {
+    font-size: 0.875rem;
+    line-height: 1.5;
+    margin: 0;
     color: var(--text-secondary);
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
 }
 
+/* Responsive */
 @media (max-width: 768px) {
     .home-container {
-        padding: 1rem;
+        padding: 20px 16px;
     }
 
-    .home-title {
+    .welcome-section {
+        flex-direction: column;
+        align-items: stretch;
+    }
+
+    .welcome-title {
         font-size: 1.75rem;
     }
 
+    .quick-search {
+        min-width: 100%;
+    }
+
     .apps-grid {
         grid-template-columns: 1fr;
     }
+
+    .recent-grid {
+        grid-template-columns: 1fr;
+    }
+
+    .app-card {
+        padding: 20px;
+    }
+
+    .app-icon {
+        width: 48px;
+        height: 48px;
+        border-radius: 12px;
+    }
+}
+
+@media (max-width: 480px) {
+    .app-content h3 {
+        font-size: 1rem;
+    }
+
+    .app-content p {
+        font-size: 0.8125rem;
+        -webkit-line-clamp: 3;
+    }
 }
diff --git a/ui/suite/goals/goals.html b/ui/suite/goals/goals.html
new file mode 100644
index 0000000..98d7ff4
--- /dev/null
+++ b/ui/suite/goals/goals.html
@@ -0,0 +1,818 @@
+<!-- =============================================================================
+     GOALS APP - OKR (Objectives & Key Results) Management
+     Respects Theme Manager - No hardcoded theme
+     ============================================================================= -->
+
+<div class="goals-app">
+    <!-- Sidebar -->
+    <aside class="goals-sidebar">
+        <div class="sidebar-header">
+            <h2 data-i18n="goals-title">Goals (OKR)</h2>
+            <button
+                class="btn-icon"
+                id="new-objective-btn"
+                title="New Objective"
+                hx-get="/api/goals/objectives/new"
+                hx-target="#goals-modal"
+                hx-swap="innerHTML"
+            >
+                <span>+</span>
+            </button>
+        </div>
+
+        <div class="period-selector">
+            <select
+                id="period-select"
+                hx-get="/api/goals/objectives"
+                hx-trigger="change"
+                hx-target="#objectives-list"
+                hx-swap="innerHTML"
+                hx-include="this"
+            >
+                <option value="q1-2025">Q1 2025</option>
+                <option value="q2-2025" selected>Q2 2025</option>
+                <option value="q3-2025">Q3 2025</option>
+                <option value="q4-2025">Q4 2025</option>
+                <option value="annual-2025">Annual 2025</option>
+            </select>
+        </div>
+
+        <nav class="sidebar-nav">
+            <div class="nav-section">
+                <h3 data-i18n="goals-objectives">Objectives</h3>
+                <div
+                    id="objectives-list"
+                    hx-get="/api/goals/objectives"
+                    hx-trigger="load, objectiveCreated from:body, objectiveDeleted from:body"
+                    hx-swap="innerHTML"
+                >
+                    <div class="loading-placeholder">Loading objectives...</div>
+                </div>
+            </div>
+        </nav>
+
+        <div class="sidebar-footer">
+            <button
+                class="sidebar-btn"
+                hx-get="/api/goals/alignment"
+                hx-target="#main-content"
+                hx-swap="innerHTML"
+            >
+                <span class="btn-icon">🔗</span>
+                <span data-i18n="goals-alignment">Alignment</span>
+            </button>
+            <button
+                class="sidebar-btn"
+                hx-get="/api/goals/ai/suggest"
+                hx-target="#goals-modal"
+                hx-swap="innerHTML"
+            >
+                <span class="btn-icon">✨</span>
+                <span>AI Suggestions</span>
+            </button>
+        </div>
+    </aside>
+
+    <!-- Main Content -->
+    <main class="goals-main">
+        <!-- Dashboard Header -->
+        <header class="goals-header">
+            <div class="header-left">
+                <h1 data-i18n="goals-dashboard">OKR Dashboard</h1>
+                <span class="period-badge" id="current-period">Q2 2025</span>
+            </div>
+            <div class="header-actions">
+                <div class="view-toggle">
+                    <button class="view-btn active" data-view="dashboard" onclick="switchGoalsView('dashboard')">
+                        <span>📊</span> Dashboard
+                    </button>
+                    <button class="view-btn" data-view="tree" onclick="switchGoalsView('tree')">
+                        <span>🌳</span> Tree View
+                    </button>
+                    <button class="view-btn" data-view="list" onclick="switchGoalsView('list')">
+                        <span>📋</span> List
+                    </button>
+                </div>
+                <button
+                    class="btn-primary"
+                    hx-get="/api/goals/objectives/new"
+                    hx-target="#goals-modal"
+                    hx-swap="innerHTML"
+                >
+                    <span>+</span> New Objective
+                </button>
+            </div>
+        </header>
+
+        <!-- Stats Cards -->
+        <div class="stats-grid">
+            <div
+                class="stat-card"
+                hx-get="/api/goals/dashboard"
+                hx-trigger="load, objectiveUpdated from:body"
+                hx-swap="innerHTML"
+                hx-select=".stat-objectives"
+            >
+                <div class="stat-icon">🎯</div>
+                <div class="stat-content">
+                    <div class="stat-value" id="total-objectives">--</div>
+                    <div class="stat-label">Objectives</div>
+                </div>
+            </div>
+            <div class="stat-card">
+                <div class="stat-icon">🔑</div>
+                <div class="stat-content">
+                    <div class="stat-value" id="total-krs">--</div>
+                    <div class="stat-label">Key Results</div>
+                </div>
+            </div>
+            <div class="stat-card progress-card">
+                <div class="stat-icon">📈</div>
+                <div class="stat-content">
+                    <div class="stat-value" id="avg-progress">--</div>
+                    <div class="stat-label">Avg Progress</div>
+                </div>
+                <div class="progress-ring" id="progress-ring">
+                    <svg viewBox="0 0 36 36">
+                        <path class="progress-bg" d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"/>
+                        <path class="progress-bar" stroke-dasharray="0, 100" d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"/>
+                    </svg>
+                </div>
+            </div>
+            <div class="stat-card">
+                <div class="stat-icon">⚠️</div>
+                <div class="stat-content">
+                    <div class="stat-value at-risk" id="at-risk-count">--</div>
+                    <div class="stat-label">At Risk</div>
+                </div>
+            </div>
+        </div>
+
+        <!-- View Containers -->
+        <div id="main-content" class="goals-views">
+            <!-- Dashboard View -->
+            <div id="dashboard-view" class="view-container active">
+                <div class="objectives-grid"
+                    hx-get="/api/goals/objectives"
+                    hx-trigger="load, objectiveCreated from:body, objectiveUpdated from:body"
+                    hx-swap="innerHTML"
+                >
+                    <div class="loading-placeholder">Loading objectives...</div>
+                </div>
+            </div>
+
+            <!-- Tree View -->
+            <div id="tree-view" class="view-container">
+                <div
+                    class="alignment-tree"
+                    hx-get="/api/goals/alignment"
+                    hx-trigger="load"
+                    hx-swap="innerHTML"
+                >
+                    <div class="loading-placeholder">Loading alignment tree...</div>
+                </div>
+            </div>
+
+            <!-- List View -->
+            <div id="list-view" class="view-container">
+                <div class="objectives-table">
+                    <div class="table-header">
+                        <div class="col-objective">Objective</div>
+                        <div class="col-owner">Owner</div>
+                        <div class="col-progress">Progress</div>
+                        <div class="col-status">Status</div>
+                        <div class="col-krs">Key Results</div>
+                        <div class="col-actions">Actions</div>
+                    </div>
+                    <div
+                        class="table-body"
+                        hx-get="/api/goals/objectives?view=list"
+                        hx-trigger="load"
+                        hx-swap="innerHTML"
+                    >
+                        <div class="loading-placeholder">Loading...</div>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <!-- Empty State -->
+        <div id="goals-empty" class="empty-state">
+            <div class="empty-state-icon">🎯</div>
+            <h2>No Objectives Yet</h2>
+            <p>Create your first objective to start tracking your OKRs</p>
+            <button
+                class="btn-primary"
+                hx-get="/api/goals/objectives/new"
+                hx-target="#goals-modal"
+                hx-swap="innerHTML"
+            >
+                <span>+</span> Create Objective
+            </button>
+        </div>
+    </main>
+
+    <!-- Details Panel -->
+    <aside class="details-panel collapsed" id="details-panel">
+        <button class="panel-toggle" onclick="toggleGoalsPanel()">
+            <span>📋</span>
+        </button>
+        <div class="panel-content">
+            <div id="objective-details">
+                <p class="empty-message">Select an objective to view details</p>
+            </div>
+        </div>
+    </aside>
+
+    <!-- Modal Container -->
+    <div id="goals-modal" class="modal-container"></div>
+</div>
+
+<style>
+.goals-app {
+    display: flex;
+    height: 100%;
+    background: var(--bg-primary);
+    color: var(--text-primary);
+}
+
+.goals-sidebar {
+    width: 280px;
+    min-width: 280px;
+    background: var(--bg-secondary);
+    border-right: 1px solid var(--border-color);
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+}
+
+.sidebar-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 1rem;
+    border-bottom: 1px solid var(--border-color);
+}
+
+.sidebar-header h2 {
+    font-size: 1rem;
+    font-weight: 600;
+    margin: 0;
+}
+
+.period-selector {
+    padding: 0.75rem 1rem;
+    border-bottom: 1px solid var(--border-color);
+}
+
+.period-selector select {
+    width: 100%;
+    padding: 0.5rem 0.75rem;
+    border: 1px solid var(--border-color);
+    border-radius: 6px;
+    background: var(--bg-primary);
+    color: var(--text-primary);
+    font-size: 0.875rem;
+    cursor: pointer;
+}
+
+.sidebar-nav {
+    flex: 1;
+    overflow-y: auto;
+    padding: 0.5rem 0;
+}
+
+.nav-section h3 {
+    font-size: 0.75rem;
+    font-weight: 600;
+    color: var(--text-muted);
+    text-transform: uppercase;
+    padding: 0.5rem 1rem;
+    margin: 0;
+}
+
+.sidebar-footer {
+    padding: 0.5rem;
+    border-top: 1px solid var(--border-color);
+}
+
+.sidebar-btn {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    width: 100%;
+    padding: 0.5rem 0.75rem;
+    border: none;
+    background: transparent;
+    color: var(--text-secondary);
+    font-size: 0.875rem;
+    cursor: pointer;
+    border-radius: 4px;
+    text-align: left;
+}
+
+.sidebar-btn:hover {
+    background: var(--bg-hover);
+    color: var(--text-primary);
+}
+
+.goals-main {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+}
+
+.goals-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 1rem 1.5rem;
+    border-bottom: 1px solid var(--border-color);
+    background: var(--bg-secondary);
+}
+
+.header-left {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+}
+
+.header-left h1 {
+    font-size: 1.25rem;
+    font-weight: 600;
+    margin: 0;
+}
+
+.period-badge {
+    padding: 0.25rem 0.75rem;
+    background: var(--accent-color);
+    color: white;
+    border-radius: 9999px;
+    font-size: 0.75rem;
+    font-weight: 500;
+}
+
+.header-actions {
+    display: flex;
+    gap: 1rem;
+    align-items: center;
+}
+
+.view-toggle {
+    display: flex;
+    background: var(--bg-primary);
+    border-radius: 6px;
+    padding: 2px;
+    border: 1px solid var(--border-color);
+}
+
+.view-btn {
+    display: flex;
+    align-items: center;
+    gap: 0.375rem;
+    padding: 0.5rem 0.75rem;
+    border: none;
+    background: transparent;
+    color: var(--text-secondary);
+    font-size: 0.875rem;
+    cursor: pointer;
+    border-radius: 4px;
+    transition: all 0.15s;
+}
+
+.view-btn:hover {
+    color: var(--text-primary);
+}
+
+.view-btn.active {
+    background: var(--accent-color);
+    color: white;
+}
+
+/* Stats Grid */
+.stats-grid {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    gap: 1rem;
+    padding: 1.5rem;
+    border-bottom: 1px solid var(--border-color);
+}
+
+.stat-card {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+    padding: 1rem;
+    background: var(--bg-secondary);
+    border-radius: 8px;
+    border: 1px solid var(--border-color);
+}
+
+.stat-icon {
+    font-size: 1.5rem;
+}
+
+.stat-value {
+    font-size: 1.5rem;
+    font-weight: 700;
+    color: var(--text-primary);
+}
+
+.stat-value.at-risk {
+    color: var(--color-warning, #f59e0b);
+}
+
+.stat-label {
+    font-size: 0.875rem;
+    color: var(--text-muted);
+}
+
+.progress-card {
+    position: relative;
+}
+
+.progress-ring {
+    position: absolute;
+    right: 1rem;
+    top: 50%;
+    transform: translateY(-50%);
+    width: 48px;
+    height: 48px;
+}
+
+.progress-ring svg {
+    transform: rotate(-90deg);
+}
+
+.progress-bg {
+    fill: none;
+    stroke: var(--border-color);
+    stroke-width: 3;
+}
+
+.progress-bar {
+    fill: none;
+    stroke: var(--accent-color);
+    stroke-width: 3;
+    stroke-linecap: round;
+    transition: stroke-dasharray 0.5s;
+}
+
+/* Views */
+.goals-views {
+    flex: 1;
+    overflow: auto;
+    padding: 1.5rem;
+}
+
+.view-container {
+    display: none;
+}
+
+.view-container.active {
+    display: block;
+}
+
+.objectives-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
+    gap: 1rem;
+}
+
+/* Objective Card */
+.objective-card {
+    background: var(--bg-secondary);
+    border: 1px solid var(--border-color);
+    border-radius: 8px;
+    overflow: hidden;
+}
+
+.objective-card-header {
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+    padding: 1rem;
+    border-bottom: 1px solid var(--border-color);
+}
+
+.objective-title {
+    font-size: 1rem;
+    font-weight: 600;
+    margin: 0 0 0.25rem 0;
+}
+
+.objective-owner {
+    font-size: 0.875rem;
+    color: var(--text-muted);
+}
+
+.objective-status {
+    padding: 0.25rem 0.5rem;
+    border-radius: 4px;
+    font-size: 0.75rem;
+    font-weight: 500;
+}
+
+.status-on-track {
+    background: rgba(34, 197, 94, 0.1);
+    color: #22c55e;
+}
+
+.status-at-risk {
+    background: rgba(245, 158, 11, 0.1);
+    color: #f59e0b;
+}
+
+.status-behind {
+    background: rgba(239, 68, 68, 0.1);
+    color: #ef4444;
+}
+
+.objective-progress {
+    padding: 1rem;
+    border-bottom: 1px solid var(--border-color);
+}
+
+.progress-header {
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 0.5rem;
+    font-size: 0.875rem;
+}
+
+.progress-bar-container {
+    height: 8px;
+    background: var(--border-color);
+    border-radius: 4px;
+    overflow: hidden;
+}
+
+.progress-bar-fill {
+    height: 100%;
+    background: var(--accent-color);
+    border-radius: 4px;
+    transition: width 0.3s;
+}
+
+.key-results-list {
+    padding: 0.5rem 0;
+}
+
+.key-result-item {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+    padding: 0.75rem 1rem;
+    border-bottom: 1px solid var(--border-color);
+}
+
+.key-result-item:last-child {
+    border-bottom: none;
+}
+
+.kr-progress {
+    width: 40px;
+    font-size: 0.875rem;
+    font-weight: 600;
+    color: var(--accent-color);
+}
+
+.kr-title {
+    flex: 1;
+    font-size: 0.875rem;
+}
+
+.kr-check-in {
+    padding: 0.25rem 0.5rem;
+    border: 1px solid var(--border-color);
+    border-radius: 4px;
+    background: transparent;
+    color: var(--text-secondary);
+    font-size: 0.75rem;
+    cursor: pointer;
+}
+
+.kr-check-in:hover {
+    background: var(--bg-hover);
+    color: var(--text-primary);
+}
+
+/* Table View */
+.objectives-table {
+    background: var(--bg-secondary);
+    border: 1px solid var(--border-color);
+    border-radius: 8px;
+    overflow: hidden;
+}
+
+.table-header {
+    display: grid;
+    grid-template-columns: 2fr 1fr 120px 100px 80px 80px;
+    padding: 0.75rem 1rem;
+    background: var(--bg-primary);
+    border-bottom: 1px solid var(--border-color);
+    font-size: 0.75rem;
+    font-weight: 600;
+    color: var(--text-muted);
+    text-transform: uppercase;
+}
+
+.table-body {
+    font-size: 0.875rem;
+}
+
+/* Details Panel */
+.details-panel {
+    width: 360px;
+    background: var(--bg-secondary);
+    border-left: 1px solid var(--border-color);
+    transition: width 0.2s;
+}
+
+.details-panel.collapsed {
+    width: 48px;
+}
+
+.details-panel.collapsed .panel-content {
+    display: none;
+}
+
+.panel-toggle {
+    width: 100%;
+    padding: 0.75rem;
+    border: none;
+    background: transparent;
+    cursor: pointer;
+    font-size: 1.25rem;
+}
+
+.panel-content {
+    padding: 1rem;
+    overflow-y: auto;
+    height: calc(100% - 48px);
+}
+
+/* Empty State */
+.empty-state {
+    display: none;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+    text-align: center;
+    color: var(--text-muted);
+}
+
+.goals-app:not(.has-objectives) .goals-views {
+    display: none;
+}
+
+.goals-app:not(.has-objectives) .empty-state {
+    display: flex;
+}
+
+.empty-state-icon {
+    font-size: 4rem;
+    margin-bottom: 1rem;
+}
+
+/* Buttons */
+.btn-icon {
+    width: 28px;
+    height: 28px;
+    border: none;
+    background: transparent;
+    color: var(--text-secondary);
+    cursor: pointer;
+    border-radius: 4px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.btn-icon:hover {
+    background: var(--bg-hover);
+    color: var(--text-primary);
+}
+
+.btn-primary {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.5rem;
+    padding: 0.5rem 1rem;
+    background: var(--accent-color);
+    color: white;
+    border: none;
+    border-radius: 6px;
+    font-size: 0.875rem;
+    font-weight: 500;
+    cursor: pointer;
+}
+
+.btn-primary:hover {
+    background: var(--accent-hover);
+}
+
+.loading-placeholder {
+    color: var(--text-muted);
+    font-size: 0.875rem;
+    padding: 2rem;
+    text-align: center;
+}
+
+.modal-container:empty {
+    display: none;
+}
+
+@media (max-width: 1200px) {
+    .stats-grid {
+        grid-template-columns: repeat(2, 1fr);
+    }
+}
+
+@media (max-width: 768px) {
+    .goals-sidebar {
+        position: absolute;
+        left: -280px;
+        height: 100%;
+        z-index: 50;
+        transition: left 0.2s;
+    }
+
+    .goals-sidebar.open {
+        left: 0;
+    }
+
+    .details-panel {
+        display: none;
+    }
+
+    .stats-grid {
+        grid-template-columns: 1fr;
+    }
+
+    .objectives-grid {
+        grid-template-columns: 1fr;
+    }
+
+    .view-toggle {
+        display: none;
+    }
+}
+</style>
+
+<script>
+let currentGoalsView = 'dashboard';
+
+function switchGoalsView(view) {
+    currentGoalsView = view;
+
+    document.querySelectorAll('.goals-app .view-btn').forEach(btn => {
+        btn.classList.toggle('active', btn.dataset.view === view);
+    });
+
+    document.querySelectorAll('.goals-app .view-container').forEach(container => {
+        container.classList.toggle('active', container.id === `${view}-view`);
+    });
+}
+
+function toggleGoalsPanel() {
+    const panel = document.getElementById('details-panel');
+    panel.classList.toggle('collapsed');
+}
+
+function selectObjective(objectiveId) {
+    htmx.ajax('GET', `/api/goals/objectives/${objectiveId}`, {
+        target: '#objective-details',
+        swap: 'innerHTML'
+    });
+
+    const panel = document.getElementById('details-panel');
+    panel.classList.remove('collapsed');
+}
+
+function updateProgressRing(percentage) {
+    const ring = document.querySelector('.progress-bar');
+    if (ring) {
+        ring.setAttribute('stroke-dasharray', `${percentage}, 100`);
+    }
+}
+
+function checkIn(krId) {
+    htmx.ajax('GET', `/api/goals/key-results/${krId}/check-in`, {
+        target: '#goals-modal',
+        swap: 'innerHTML'
+    });
+}
+
+document.addEventListener('DOMContentLoaded', function() {
+    document.body.addEventListener('htmx:afterSwap', function(event) {
+        if (event.detail.target.id === 'objectives-list' ||
+            event.detail.target.classList.contains('objectives-grid')) {
+            const hasObjectives = event.detail.target.children.length > 0;
+            document.querySelector('.goals-app').classList.toggle('has-objectives', hasObjectives);
+        }
+    });
+});
+</script>
diff --git a/ui/suite/home.html b/ui/suite/home.html
index 0343e4d..4927199 100644
--- a/ui/suite/home.html
+++ b/ui/suite/home.html
@@ -1,660 +1,1148 @@
-<!doctype html>
-<html lang="en">
-    <head>
-        <meta charset="UTF-8" />
-        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-        <title>General Bots Suite</title>
-        <script src="js/vendor/htmx.min.js"></script>
-        <link rel="stylesheet" href="/css/app.css" />
-        <style>
-            :root {
-                --primary: #3b82f6;
-                --primary-hover: #2563eb;
-                --bg: #0f172a;
-                --surface: #1e293b;
-                --border: #334155;
-                --text: #f8fafc;
-                --text-secondary: #94a3b8;
-            }
+<link rel="stylesheet" href="css/home.css" />
 
-            * {
-                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;
-            }
-
-            .home-container {
-                max-width: 1400px;
-                margin: 0 auto;
-                padding: 2rem;
-            }
-
-            .home-header {
-                text-align: center;
-                margin-bottom: 3rem;
-            }
-
-            .home-logo {
-                width: 80px;
-                height: 80px;
-                margin: 0 auto 1.5rem;
-                background: linear-gradient(135deg, var(--primary), #8b5cf6);
-                border-radius: 20px;
-                display: flex;
-                align-items: center;
-                justify-content: center;
-                font-size: 2.5rem;
-            }
-
-            .home-title {
-                font-size: 2.5rem;
-                font-weight: 700;
-                margin-bottom: 0.75rem;
-                background: linear-gradient(
-                    135deg,
-                    var(--text),
-                    var(--primary)
-                );
-                -webkit-background-clip: text;
-                -webkit-text-fill-color: transparent;
-            }
-
-            .home-subtitle {
-                color: var(--text-secondary);
-                font-size: 1.125rem;
-                max-width: 500px;
-                margin: 0 auto;
-            }
-
-            .apps-grid {
-                display: grid;
-                grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
-                gap: 1.5rem;
-                margin-bottom: 3rem;
-            }
-
-            .app-card {
-                background: var(--surface);
-                border: 1px solid var(--border);
-                border-radius: 16px;
-                padding: 1.5rem;
-                text-decoration: none;
-                color: inherit;
-                transition:
-                    transform 0.2s,
-                    border-color 0.2s,
-                    box-shadow 0.2s;
-                display: block;
-            }
-
-            .app-card:hover {
-                transform: translateY(-4px);
-                border-color: var(--primary);
-                box-shadow: 0 8px 32px rgba(59, 130, 246, 0.15);
-            }
-
-            .app-icon {
-                width: 56px;
-                height: 56px;
-                border-radius: 14px;
-                display: flex;
-                align-items: center;
-                justify-content: center;
-                font-size: 1.75rem;
-                margin-bottom: 1rem;
-            }
-
-            .app-icon.chat {
-                background: linear-gradient(135deg, #3b82f6, #1d4ed8);
-            }
-            .app-icon.drive {
-                background: linear-gradient(135deg, #f59e0b, #d97706);
-            }
-            .app-icon.tasks {
-                background: linear-gradient(135deg, #10b981, #059669);
-            }
-            .app-icon.mail {
-                background: linear-gradient(135deg, #ef4444, #dc2626);
-            }
-            .app-icon.calendar {
-                background: linear-gradient(135deg, #8b5cf6, #7c3aed);
-            }
-            .app-icon.meet {
-                background: linear-gradient(135deg, #06b6d4, #0891b2);
-            }
-            .app-icon.paper {
-                background: linear-gradient(135deg, #ec4899, #db2777);
-            }
-            .app-icon.sheet {
-                background: linear-gradient(135deg, #22c55e, #16a34a);
-            }
-            .app-icon.slides {
-                background: linear-gradient(135deg, #f59e0b, #d97706);
-            }
-            .app-icon.research {
-                background: linear-gradient(135deg, #14b8a6, #0d9488);
-            }
-            .app-icon.analytics {
-                background: linear-gradient(135deg, #6366f1, #4f46e5);
-            }
-            .app-icon.sources {
-                background: linear-gradient(135deg, #a855f7, #9333ea);
-            }
-            .app-icon.attendant {
-                background: linear-gradient(135deg, #22c55e, #16a34a);
-            }
-            .app-icon.monitoring {
-                background: linear-gradient(135deg, #f97316, #ea580c);
-            }
-            .app-icon.tools {
-                background: linear-gradient(135deg, #64748b, #475569);
-            }
-            .app-icon.admin {
-                background: linear-gradient(135deg, #78716c, #57534e);
-            }
-            .app-icon.settings {
-                background: linear-gradient(135deg, #71717a, #52525b);
-            }
-
-            .app-name {
-                font-size: 1.25rem;
-                font-weight: 600;
-                margin-bottom: 0.5rem;
-            }
-
-            .app-description {
-                color: var(--text-secondary);
-                font-size: 0.875rem;
-                line-height: 1.5;
-            }
-
-            .section-title {
-                font-size: 1rem;
-                font-weight: 600;
-                color: var(--text-secondary);
-                text-transform: uppercase;
-                letter-spacing: 0.05em;
-                margin-bottom: 1rem;
-            }
-
-            .quick-actions {
-                display: flex;
-                flex-wrap: wrap;
-                gap: 0.75rem;
-                margin-bottom: 3rem;
-            }
-
-            .quick-action-btn {
-                display: inline-flex;
-                align-items: center;
-                gap: 0.5rem;
-                padding: 0.75rem 1.25rem;
-                background: var(--surface);
-                border: 1px solid var(--border);
-                border-radius: 10px;
-                color: var(--text);
-                font-size: 0.875rem;
-                cursor: pointer;
-                transition:
-                    border-color 0.2s,
-                    background 0.2s;
-                text-decoration: none;
-            }
-
-            .quick-action-btn:hover {
-                border-color: var(--primary);
-                background: rgba(59, 130, 246, 0.1);
-            }
-
-            .recent-section {
-                background: var(--surface);
-                border: 1px solid var(--border);
-                border-radius: 16px;
-                padding: 1.5rem;
-            }
-
-            .recent-list {
-                display: flex;
-                flex-direction: column;
-                gap: 0.5rem;
-            }
-
-            .recent-item {
-                display: flex;
-                align-items: center;
-                gap: 1rem;
-                padding: 0.75rem;
-                border-radius: 8px;
-                cursor: pointer;
-                transition: background 0.2s;
-            }
-
-            .recent-item:hover {
-                background: var(--bg);
-            }
-
-            .recent-icon {
-                width: 40px;
-                height: 40px;
-                border-radius: 8px;
-                background: var(--bg);
-                display: flex;
-                align-items: center;
-                justify-content: center;
-                font-size: 1.25rem;
-            }
-
-            .recent-info {
-                flex: 1;
-            }
-
-            .recent-name {
-                font-weight: 500;
-                margin-bottom: 0.25rem;
-            }
-
-            .recent-meta {
-                font-size: 0.75rem;
-                color: var(--text-secondary);
-            }
-
-            .recent-time {
-                font-size: 0.75rem;
-                color: var(--text-secondary);
-            }
-
-            @media (max-width: 768px) {
-                .home-container {
-                    padding: 1rem;
-                }
-
-                .home-title {
-                    font-size: 1.75rem;
-                }
-
-                .apps-grid {
-                    grid-template-columns: 1fr;
-                }
-            }
-        </style>
-    </head>
-    <body>
-        <div class="home-container">
-            <header class="home-header">
-                <div class="home-logo">🤖</div>
-                <h1 class="home-title">General Bots Suite</h1>
-                <p class="home-subtitle">
-                    Your AI-powered productivity workspace. Chat, collaborate,
-                    and create.
-                </p>
-            </header>
-
-            <section>
-                <h2 class="section-title">Quick Actions</h2>
-                <div class="quick-actions">
-                    <a
-                        href="#chat"
-                        class="quick-action-btn"
-                        hx-get="/chat/chat.html"
-                        hx-target="#main-content"
-                        hx-push-url="true"
-                    >
-                        💬 Start Chat
-                    </a>
-                    <a
-                        href="#drive"
-                        class="quick-action-btn"
-                        hx-get="/drive/index.html"
-                        hx-target="#main-content"
-                        hx-push-url="true"
-                    >
-                        📁 Upload Files
-                    </a>
-                    <a
-                        href="#tasks"
-                        class="quick-action-btn"
-                        hx-get="/tasks/tasks.html"
-                        hx-target="#main-content"
-                        hx-push-url="true"
-                    >
-                        ✓ New Task
-                    </a>
-                    <a
-                        href="#mail"
-                        class="quick-action-btn"
-                        hx-get="/mail/mail.html"
-                        hx-target="#main-content"
-                        hx-push-url="true"
-                    >
-                        ✉️ Compose Email
-                    </a>
-                    <a
-                        href="#meet"
-                        class="quick-action-btn"
-                        hx-get="/meet/meet.html"
-                        hx-target="#main-content"
-                        hx-push-url="true"
-                    >
-                        🎥 Start Meeting
-                    </a>
-                </div>
-            </section>
-
-            <section>
-                <h2 class="section-title">Applications</h2>
-                <div class="apps-grid">
-                    <a
-                        href="#chat"
-                        class="app-card"
-                        hx-get="/chat/chat.html"
-                        hx-target="#main-content"
-                        hx-push-url="true"
-                    >
-                        <div class="app-icon chat">💬</div>
-                        <div class="app-name">Chat</div>
-                        <div class="app-description">
-                            AI-powered conversations. Ask questions, get help,
-                            and automate tasks.
-                        </div>
-                    </a>
-
-                    <a
-                        href="#drive"
-                        class="app-card"
-                        hx-get="/drive/index.html"
-                        hx-target="#main-content"
-                        hx-push-url="true"
-                    >
-                        <div class="app-icon drive">📁</div>
-                        <div class="app-name">Drive</div>
-                        <div class="app-description">
-                            Cloud storage for all your files. Upload, organize,
-                            and share.
-                        </div>
-                    </a>
-
-                    <a
-                        href="#tasks"
-                        class="app-card"
-                        hx-get="/tasks/tasks.html"
-                        hx-target="#main-content"
-                        hx-push-url="true"
-                    >
-                        <div class="app-icon tasks">✓</div>
-                        <div class="app-name">Tasks</div>
-                        <div class="app-description">
-                            Stay organized with to-do lists, priorities, and due
-                            dates.
-                        </div>
-                    </a>
-
-                    <a
-                        href="#mail"
-                        class="app-card"
-                        hx-get="/mail/mail.html"
-                        hx-target="#main-content"
-                        hx-push-url="true"
-                    >
-                        <div class="app-icon mail">✉️</div>
-                        <div class="app-name">Mail</div>
-                        <div class="app-description">
-                            Email client with AI-assisted writing and smart
-                            organization.
-                        </div>
-                    </a>
-
-                    <a
-                        href="#calendar"
-                        class="app-card"
-                        hx-get="/calendar/calendar.html"
-                        hx-target="#main-content"
-                        hx-push-url="true"
-                    >
-                        <div class="app-icon calendar">📅</div>
-                        <div class="app-name">Calendar</div>
-                        <div class="app-description">
-                            Schedule meetings, events, and manage your time
-                            effectively.
-                        </div>
-                    </a>
-
-                    <a
-                        href="#meet"
-                        class="app-card"
-                        hx-get="/meet/meet.html"
-                        hx-target="#main-content"
-                        hx-push-url="true"
-                    >
-                        <div class="app-icon meet">🎥</div>
-                        <div class="app-name">Meet</div>
-                        <div class="app-description">
-                            Video conferencing with screen sharing and live
-                            transcription.
-                        </div>
-                    </a>
-
-                    <a
-                        href="#paper"
-                        class="app-card"
-                        hx-get="/paper/paper.html"
-                        hx-target="#main-content"
-                        hx-push-url="true"
-                    >
-                        <div class="app-icon paper">📝</div>
-                        <div class="app-name">Paper</div>
-                        <div class="app-description">
-                            Write documents with AI assistance. Notes, reports,
-                            and more.
-                        </div>
-                    </a>
-
-                    <a
-                        href="#sheet"
-                        class="app-card"
-                        hx-get="/suite/sheet/sheet.html"
-                        hx-target="#main-content"
-                        hx-push-url="true"
-                    >
-                        <div class="app-icon sheet">📊</div>
-                        <div class="app-name">Sheet</div>
-                        <div class="app-description">
-                            Spreadsheets with formulas, charts, and real-time
-                            collaboration.
-                        </div>
-                    </a>
-
-                    <a
-                        href="#slides"
-                        class="app-card"
-                        hx-get="/suite/slides/slides.html"
-                        hx-target="#main-content"
-                        hx-push-url="true"
-                    >
-                        <div class="app-icon slides">📽️</div>
-                        <div class="app-name">Slides</div>
-                        <div class="app-description">
-                            Create presentations with themes, animations, and
-                            collaboration.
-                        </div>
-                    </a>
-
-                    <a
-                        href="#research"
-                        class="app-card"
-                        hx-get="/research/research.html"
-                        hx-target="#main-content"
-                        hx-push-url="true"
-                    >
-                        <div class="app-icon research">🔍</div>
-                        <div class="app-name">Research</div>
-                        <div class="app-description">
-                            AI-powered search and discovery across all your
-                            sources.
-                        </div>
-                    </a>
-
-                    <a
-                        href="#analytics"
-                        class="app-card"
-                        hx-get="/analytics/analytics.html"
-                        hx-target="#main-content"
-                        hx-push-url="true"
-                    >
-                        <div class="app-icon analytics">📊</div>
-                        <div class="app-name">Analytics</div>
-                        <div class="app-description">
-                            Dashboards and reports to track usage and insights.
-                        </div>
-                    </a>
-
-                    <a
-                        href="#sources"
-                        class="app-card"
-                        hx-get="/sources/index.html"
-                        hx-target="#main-content"
-                        hx-push-url="true"
-                    >
-                        <div class="app-icon sources">📦</div>
-                        <div class="app-name">Sources</div>
-                        <div class="app-description">
-                            Repositories, Apps, Prompts, Templates and MCP
-                            Servers.
-                        </div>
-                    </a>
-
-                    <a
-                        href="#attendant"
-                        class="app-card"
-                        hx-get="/attendant/index.html"
-                        hx-target="#main-content"
-                        hx-push-url="true"
-                    >
-                        <div class="app-icon attendant">👤</div>
-                        <div class="app-name">Attendant</div>
-                        <div class="app-description">
-                            Human agent console for CRM and conversation
-                            management.
-                        </div>
-                    </a>
-
-                    <a
-                        href="#monitoring"
-                        class="app-card"
-                        hx-get="/monitoring/monitoring.html"
-                        hx-target="#main-content"
-                        hx-push-url="true"
-                    >
-                        <div class="app-icon monitoring">📡</div>
-                        <div class="app-name">Monitoring</div>
-                        <div class="app-description">
-                            System health, logs, metrics and real-time
-                            monitoring.
-                        </div>
-                    </a>
-
-                    <a
-                        href="#tools"
-                        class="app-card"
-                        hx-get="/tools/compliance.html"
-                        hx-target="#main-content"
-                        hx-push-url="true"
-                    >
-                        <div class="app-icon tools">🛠️</div>
-                        <div class="app-name">Tools</div>
-                        <div class="app-description">
-                            Compliance scanning, security checks and bot
-                            utilities.
-                        </div>
-                    </a>
-
-                    <a
-                        href="#settings"
-                        class="app-card"
-                        hx-get="/suite/settings/index.html"
-                        hx-target="#main-content"
-                        hx-push-url="true"
-                    >
-                        <div class="app-icon settings">⚙️</div>
-                        <div class="app-name">Settings</div>
-                        <div class="app-description">
-                            Personal preferences, administration and account
-                            settings.
-                        </div>
-                    </a>
-                </div>
-            </section>
-
-            <section class="recent-section">
-                <h2 class="section-title">Recent Activity</h2>
-                <div
-                    class="recent-list"
-                    hx-get="/api/activity/recent"
-                    hx-trigger="load"
-                    hx-swap="innerHTML"
-                >
-                    {% for item in recent_items %}
-                    <div
-                        class="recent-item"
-                        hx-get="{{ item.url }}"
-                        hx-target="#main-content"
-                    >
-                        <div class="recent-icon">{{ item.icon }}</div>
-                        <div class="recent-info">
-                            <div class="recent-name">{{ item.name }}</div>
-                            <div class="recent-meta">
-                                {{ item.app }} • {{ item.description }}
-                            </div>
-                        </div>
-                        <div class="recent-time">{{ item.time }}</div>
-                    </div>
-                    {% endfor %} {% if recent_items.is_empty() %}
-                    <div
-                        style="
-                            text-align: center;
-                            padding: 2rem;
-                            color: var(--text-secondary);
-                        "
-                    >
-                        <div style="font-size: 2rem; margin-bottom: 0.5rem">
-                            🚀
-                        </div>
-                        <p>No recent activity yet. Start exploring!</p>
-                    </div>
-                    {% endif %}
-                </div>
-            </section>
+<div class="home-container">
+    <!-- Welcome Section -->
+    <section class="welcome-section">
+        <div class="welcome-content">
+            <h1 class="welcome-title">Welcome back</h1>
+            <p class="welcome-subtitle">
+                Your AI-powered workspace. What would you like to do today?
+            </p>
         </div>
+        <div class="quick-search">
+            <svg
+                width="20"
+                height="20"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="2"
+            >
+                <circle cx="11" cy="11" r="8" />
+                <path d="m21 21-4.35-4.35" />
+            </svg>
+            <input
+                type="text"
+                placeholder="Search or ask anything..."
+                id="home-search"
+            />
+            <kbd>⌘K</kbd>
+        </div>
+    </section>
 
-        <script>
-            // Keyboard shortcuts
-            document.addEventListener("keydown", (e) => {
-                if (e.altKey && !e.ctrlKey && !e.shiftKey) {
-                    const shortcuts = {
-                        1: "#chat",
-                        2: "#drive",
-                        3: "#tasks",
-                        4: "#mail",
-                        5: "#calendar",
-                        6: "#meet",
-                    };
-                    if (shortcuts[e.key]) {
-                        e.preventDefault();
-                        const link = document.querySelector(
-                            `a[href="${shortcuts[e.key]}"]`,
-                        );
-                        if (link) link.click();
-                    }
-                }
+    <!-- Recent Documents Section -->
+    <section class="recent-section">
+        <div class="section-header">
+            <h2>Recent</h2>
+            <a
+                href="#drive"
+                class="view-all"
+                hx-get="/suite/drive/drive.html"
+                hx-target="#main-content"
+                hx-push-url="/#drive"
+                >View all</a
+            >
+        </div>
+        <div class="recent-grid" id="recent-documents">
+            <!-- Recent items will be loaded here -->
+            <div class="recent-card placeholder">
+                <div class="recent-icon doc">
+                    <svg
+                        width="24"
+                        height="24"
+                        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>
+                </div>
+                <div class="recent-info">
+                    <span class="recent-name">Project Proposal</span>
+                    <span class="recent-meta">Edited 2 hours ago</span>
+                </div>
+            </div>
+            <div class="recent-card placeholder">
+                <div class="recent-icon sheet">
+                    <svg
+                        width="24"
+                        height="24"
+                        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="3" y1="15" x2="21" y2="15" />
+                        <line x1="9" y1="3" x2="9" y2="21" />
+                    </svg>
+                </div>
+                <div class="recent-info">
+                    <span class="recent-name">Q4 Budget</span>
+                    <span class="recent-meta">Edited yesterday</span>
+                </div>
+            </div>
+            <div class="recent-card placeholder">
+                <div class="recent-icon slides">
+                    <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"
+                        />
+                        <line x1="8" y1="21" x2="16" y2="21" />
+                        <line x1="12" y1="17" x2="12" y2="21" />
+                    </svg>
+                </div>
+                <div class="recent-info">
+                    <span class="recent-name">Team Presentation</span>
+                    <span class="recent-meta">Edited 3 days ago</span>
+                </div>
+            </div>
+            <div class="recent-card placeholder">
+                <div class="recent-icon paper">
+                    <svg
+                        width="24"
+                        height="24"
+                        viewBox="0 0 24 24"
+                        fill="none"
+                        stroke="currentColor"
+                        stroke-width="2"
+                    >
+                        <path
+                            d="M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z"
+                        />
+                        <polyline points="14 2 14 8 20 8" />
+                    </svg>
+                </div>
+                <div class="recent-info">
+                    <span class="recent-name">Meeting Notes</span>
+                    <span class="recent-meta">Edited this week</span>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <!-- Applications Section -->
+    <section class="apps-section">
+        <div class="section-header">
+            <h2>Applications</h2>
+        </div>
+        <div class="apps-grid">
+            <!-- Communication -->
+            <a
+                href="#chat"
+                class="app-card"
+                hx-get="/suite/chat/chat.html"
+                hx-target="#main-content"
+                hx-push-url="/#chat"
+            >
+                <div class="app-icon chat">
+                    <svg
+                        width="28"
+                        height="28"
+                        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"
+                        />
+                    </svg>
+                </div>
+                <div class="app-content">
+                    <h3>Chat</h3>
+                    <p>
+                        AI-powered conversations. Ask questions, get help, and
+                        automate tasks with your intelligent assistant.
+                    </p>
+                </div>
+            </a>
+
+            <a
+                href="#people"
+                class="app-card"
+                hx-get="/suite/people/people.html"
+                hx-target="#main-content"
+                hx-push-url="/#people"
+            >
+                <div class="app-icon people">
+                    <svg
+                        width="28"
+                        height="28"
+                        viewBox="0 0 24 24"
+                        fill="none"
+                        stroke="currentColor"
+                        stroke-width="2"
+                    >
+                        <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2" />
+                        <circle cx="9" cy="7" r="4" />
+                        <path d="M23 21v-2a4 4 0 0 0-3-3.87" />
+                        <path d="M16 3.13a4 4 0 0 1 0 7.75" />
+                    </svg>
+                </div>
+                <div class="app-content">
+                    <h3>People</h3>
+                    <p>
+                        Manage your contacts, groups, and organization
+                        directory. Connect with colleagues and collaborators.
+                    </p>
+                </div>
+            </a>
+
+            <a
+                href="#mail"
+                class="app-card"
+                hx-get="/suite/mail/mail.html"
+                hx-target="#main-content"
+                hx-push-url="/#mail"
+            >
+                <div class="app-icon mail">
+                    <svg
+                        width="28"
+                        height="28"
+                        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"
+                        />
+                        <polyline points="22,6 12,13 2,6" />
+                    </svg>
+                </div>
+                <div class="app-content">
+                    <h3>Mail</h3>
+                    <p>
+                        Smart email with AI assistance. Write better emails,
+                        organize your inbox, and never miss important messages.
+                    </p>
+                </div>
+            </a>
+
+            <a
+                href="#meet"
+                class="app-card"
+                hx-get="/suite/meet/meet.html"
+                hx-target="#main-content"
+                hx-push-url="/#meet"
+            >
+                <div class="app-icon meet">
+                    <svg
+                        width="28"
+                        height="28"
+                        viewBox="0 0 24 24"
+                        fill="none"
+                        stroke="currentColor"
+                        stroke-width="2"
+                    >
+                        <polygon points="23 7 16 12 23 17 23 7" />
+                        <rect
+                            x="1"
+                            y="5"
+                            width="15"
+                            height="14"
+                            rx="2"
+                            ry="2"
+                        />
+                    </svg>
+                </div>
+                <div class="app-content">
+                    <h3>Meet</h3>
+                    <p>
+                        Video conferencing with screen sharing, live
+                        transcription, and AI-powered meeting summaries.
+                    </p>
+                </div>
+            </a>
+
+            <!-- Productivity -->
+            <a
+                href="#calendar"
+                class="app-card"
+                hx-get="/suite/calendar/calendar.html"
+                hx-target="#main-content"
+                hx-push-url="/#calendar"
+            >
+                <div class="app-icon calendar">
+                    <svg
+                        width="28"
+                        height="28"
+                        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>
+                </div>
+                <div class="app-content">
+                    <h3>Calendar</h3>
+                    <p>
+                        Schedule meetings, events, and manage your time
+                        effectively. Smart scheduling with conflict detection.
+                    </p>
+                </div>
+            </a>
+
+            <a
+                href="#tasks"
+                class="app-card"
+                hx-get="/suite/tasks/tasks.html"
+                hx-target="#main-content"
+                hx-push-url="/#tasks"
+            >
+                <div class="app-icon tasks">
+                    <svg
+                        width="28"
+                        height="28"
+                        viewBox="0 0 24 24"
+                        fill="none"
+                        stroke="currentColor"
+                        stroke-width="2"
+                    >
+                        <path d="M9 11l3 3L22 4" />
+                        <path
+                            d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"
+                        />
+                    </svg>
+                </div>
+                <div class="app-content">
+                    <h3>Tasks</h3>
+                    <p>
+                        Stay organized with to-do lists, priorities, and due
+                        dates. Track progress and get things done.
+                    </p>
+                </div>
+            </a>
+
+            <a
+                href="#project"
+                class="app-card"
+                hx-get="/suite/project/project.html"
+                hx-target="#main-content"
+                hx-push-url="/#project"
+            >
+                <div class="app-icon project">
+                    <svg
+                        width="28"
+                        height="28"
+                        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"
+                        />
+                        <path d="M3 9h18" />
+                        <path d="M9 21V9" />
+                    </svg>
+                </div>
+                <div class="app-content">
+                    <h3>Project</h3>
+                    <p>
+                        Project management with Gantt charts, timelines, and
+                        team collaboration. Plan and execute projects.
+                    </p>
+                </div>
+            </a>
+
+            <a
+                href="#goals"
+                class="app-card"
+                hx-get="/suite/goals/goals.html"
+                hx-target="#main-content"
+                hx-push-url="/#goals"
+            >
+                <div class="app-icon goals">
+                    <svg
+                        width="28"
+                        height="28"
+                        viewBox="0 0 24 24"
+                        fill="none"
+                        stroke="currentColor"
+                        stroke-width="2"
+                    >
+                        <circle cx="12" cy="12" r="10" />
+                        <circle cx="12" cy="12" r="6" />
+                        <circle cx="12" cy="12" r="2" />
+                    </svg>
+                </div>
+                <div class="app-content">
+                    <h3>Goals</h3>
+                    <p>
+                        Set objectives and key results (OKRs). Track progress,
+                        align teams, and achieve your targets.
+                    </p>
+                </div>
+            </a>
+
+            <!-- Documents -->
+            <a
+                href="#paper"
+                class="app-card"
+                hx-get="/suite/paper/paper.html"
+                hx-target="#main-content"
+                hx-push-url="/#paper"
+            >
+                <div class="app-icon paper">
+                    <svg
+                        width="28"
+                        height="28"
+                        viewBox="0 0 24 24"
+                        fill="none"
+                        stroke="currentColor"
+                        stroke-width="2"
+                    >
+                        <path
+                            d="M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z"
+                        />
+                        <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>
+                </div>
+                <div class="app-content">
+                    <h3>Paper</h3>
+                    <p>
+                        Write documents with AI assistance. Notes, reports, and
+                        more with smart formatting and collaboration.
+                    </p>
+                </div>
+            </a>
+
+            <a
+                href="#docs"
+                class="app-card"
+                hx-get="/suite/docs/docs.html"
+                hx-target="#main-content"
+                hx-push-url="/#docs"
+            >
+                <div class="app-icon docs">
+                    <svg
+                        width="28"
+                        height="28"
+                        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>
+                </div>
+                <div class="app-content">
+                    <h3>Docs</h3>
+                    <p>
+                        Rich document editing with templates, real-time
+                        collaboration, and advanced formatting options.
+                    </p>
+                </div>
+            </a>
+
+            <a
+                href="#sheet"
+                class="app-card"
+                hx-get="/suite/sheet/sheet.html"
+                hx-target="#main-content"
+                hx-push-url="/#sheet"
+            >
+                <div class="app-icon sheet">
+                    <svg
+                        width="28"
+                        height="28"
+                        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="3" y1="15" x2="21" y2="15" />
+                        <line x1="9" y1="3" x2="9" y2="21" />
+                        <line x1="15" y1="3" x2="15" y2="21" />
+                    </svg>
+                </div>
+                <div class="app-content">
+                    <h3>Sheet</h3>
+                    <p>
+                        Spreadsheets with formulas, charts, and real-time
+                        collaboration. Analyze data and create reports.
+                    </p>
+                </div>
+            </a>
+
+            <a
+                href="#slides"
+                class="app-card"
+                hx-get="/suite/slides/slides.html"
+                hx-target="#main-content"
+                hx-push-url="/#slides"
+            >
+                <div class="app-icon slides">
+                    <svg
+                        width="28"
+                        height="28"
+                        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"
+                        />
+                        <line x1="8" y1="21" x2="16" y2="21" />
+                        <line x1="12" y1="17" x2="12" y2="21" />
+                    </svg>
+                </div>
+                <div class="app-content">
+                    <h3>Slides</h3>
+                    <p>
+                        Create presentations with themes, animations, and
+                        collaboration. Present with confidence.
+                    </p>
+                </div>
+            </a>
+
+            <!-- Storage & Media -->
+            <a
+                href="#drive"
+                class="app-card"
+                hx-get="/suite/drive/drive.html"
+                hx-target="#main-content"
+                hx-push-url="/#drive"
+            >
+                <div class="app-icon drive">
+                    <svg
+                        width="28"
+                        height="28"
+                        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"
+                        />
+                    </svg>
+                </div>
+                <div class="app-content">
+                    <h3>Drive</h3>
+                    <p>
+                        Cloud storage for all your files. Upload, organize, and
+                        share with powerful search and versioning.
+                    </p>
+                </div>
+            </a>
+
+            <a
+                href="#video"
+                class="app-card"
+                hx-get="/suite/video/video.html"
+                hx-target="#main-content"
+                hx-push-url="/#video"
+            >
+                <div class="app-icon video">
+                    <svg
+                        width="28"
+                        height="28"
+                        viewBox="0 0 24 24"
+                        fill="none"
+                        stroke="currentColor"
+                        stroke-width="2"
+                    >
+                        <rect
+                            x="2"
+                            y="2"
+                            width="20"
+                            height="20"
+                            rx="2.18"
+                            ry="2.18"
+                        />
+                        <line x1="7" y1="2" x2="7" y2="22" />
+                        <line x1="17" y1="2" x2="17" y2="22" />
+                        <line x1="2" y1="12" x2="22" y2="12" />
+                    </svg>
+                </div>
+                <div class="app-content">
+                    <h3>Video</h3>
+                    <p>
+                        Video library and player. Watch, organize, and share
+                        videos with your team.
+                    </p>
+                </div>
+            </a>
+
+            <a
+                href="#player"
+                class="app-card"
+                hx-get="/suite/player/player.html"
+                hx-target="#main-content"
+                hx-push-url="/#player"
+            >
+                <div class="app-icon player">
+                    <svg
+                        width="28"
+                        height="28"
+                        viewBox="0 0 24 24"
+                        fill="none"
+                        stroke="currentColor"
+                        stroke-width="2"
+                    >
+                        <polygon points="5 3 19 12 5 21 5 3" />
+                    </svg>
+                </div>
+                <div class="app-content">
+                    <h3>Player</h3>
+                    <p>
+                        Media player for audio and video files. Stream content
+                        with playlists and playback controls.
+                    </p>
+                </div>
+            </a>
+
+            <!-- Social & Learning -->
+            <a
+                href="#social"
+                class="app-card"
+                hx-get="/suite/social/social.html"
+                hx-target="#main-content"
+                hx-push-url="/#social"
+            >
+                <div class="app-icon social">
+                    <svg
+                        width="28"
+                        height="28"
+                        viewBox="0 0 24 24"
+                        fill="none"
+                        stroke="currentColor"
+                        stroke-width="2"
+                    >
+                        <circle cx="18" cy="5" r="3" />
+                        <circle cx="6" cy="12" r="3" />
+                        <circle cx="18" cy="19" r="3" />
+                        <line x1="8.59" y1="13.51" x2="15.42" y2="17.49" />
+                        <line x1="15.41" y1="6.51" x2="8.59" y2="10.49" />
+                    </svg>
+                </div>
+                <div class="app-content">
+                    <h3>Social</h3>
+                    <p>
+                        Internal social network. Share updates, celebrate wins,
+                        and stay connected with your team.
+                    </p>
+                </div>
+            </a>
+
+            <a
+                href="#learn"
+                class="app-card"
+                hx-get="/suite/learn/learn.html"
+                hx-target="#main-content"
+                hx-push-url="/#learn"
+            >
+                <div class="app-icon learn">
+                    <svg
+                        width="28"
+                        height="28"
+                        viewBox="0 0 24 24"
+                        fill="none"
+                        stroke="currentColor"
+                        stroke-width="2"
+                    >
+                        <path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z" />
+                        <path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z" />
+                    </svg>
+                </div>
+                <div class="app-content">
+                    <h3>Learn</h3>
+                    <p>
+                        Learning management system. Courses, training materials,
+                        and skill development for your team.
+                    </p>
+                </div>
+            </a>
+
+            <a
+                href="#research"
+                class="app-card"
+                hx-get="/suite/research/research.html"
+                hx-target="#main-content"
+                hx-push-url="/#research"
+            >
+                <div class="app-icon research">
+                    <svg
+                        width="28"
+                        height="28"
+                        viewBox="0 0 24 24"
+                        fill="none"
+                        stroke="currentColor"
+                        stroke-width="2"
+                    >
+                        <circle cx="11" cy="11" r="8" />
+                        <path d="m21 21-4.35-4.35" />
+                        <path d="M11 8v6M8 11h6" />
+                    </svg>
+                </div>
+                <div class="app-content">
+                    <h3>Research</h3>
+                    <p>
+                        AI-powered search and discovery. Find information across
+                        all your sources with smart summaries.
+                    </p>
+                </div>
+            </a>
+
+            <!-- Analytics & Business -->
+            <a
+                href="#analytics"
+                class="app-card"
+                hx-get="/suite/analytics/analytics.html"
+                hx-target="#main-content"
+                hx-push-url="/#analytics"
+            >
+                <div class="app-icon analytics">
+                    <svg
+                        width="28"
+                        height="28"
+                        viewBox="0 0 24 24"
+                        fill="none"
+                        stroke="currentColor"
+                        stroke-width="2"
+                    >
+                        <line x1="18" y1="20" x2="18" y2="10" />
+                        <line x1="12" y1="20" x2="12" y2="4" />
+                        <line x1="6" y1="20" x2="6" y2="14" />
+                    </svg>
+                </div>
+                <div class="app-content">
+                    <h3>Analytics</h3>
+                    <p>
+                        Dashboards and reports to track usage and insights.
+                        Understand your data and make better decisions.
+                    </p>
+                </div>
+            </a>
+
+            <a
+                href="#dashboards"
+                class="app-card"
+                hx-get="/suite/dashboards/dashboards.html"
+                hx-target="#main-content"
+                hx-push-url="/#dashboards"
+            >
+                <div class="app-icon dashboards">
+                    <svg
+                        width="28"
+                        height="28"
+                        viewBox="0 0 24 24"
+                        fill="none"
+                        stroke="currentColor"
+                        stroke-width="2"
+                    >
+                        <rect x="3" y="3" width="7" height="7" rx="1" />
+                        <rect x="14" y="3" width="7" height="7" rx="1" />
+                        <rect x="3" y="14" width="7" height="7" rx="1" />
+                        <rect x="14" y="14" width="7" height="7" rx="1" />
+                    </svg>
+                </div>
+                <div class="app-content">
+                    <h3>Dashboards</h3>
+                    <p>
+                        Custom dashboards with widgets and visualizations.
+                        Monitor KPIs and business metrics in real-time.
+                    </p>
+                </div>
+            </a>
+
+            <a
+                href="#sources"
+                class="app-card"
+                hx-get="/suite/sources/index.html"
+                hx-target="#main-content"
+                hx-push-url="/#sources"
+            >
+                <div class="app-icon sources">
+                    <svg
+                        width="28"
+                        height="28"
+                        viewBox="0 0 24 24"
+                        fill="none"
+                        stroke="currentColor"
+                        stroke-width="2"
+                    >
+                        <ellipse cx="12" cy="5" rx="9" ry="3" />
+                        <path d="M21 12c0 1.66-4 3-9 3s-9-1.34-9-3" />
+                        <path d="M3 5v14c0 1.66 4 3 9 3s9-1.34 9-3V5" />
+                    </svg>
+                </div>
+                <div class="app-content">
+                    <h3>Sources</h3>
+                    <p>
+                        Repositories, Apps, Prompts, Templates and MCP Servers.
+                        Manage all your integrations in one place.
+                    </p>
+                </div>
+            </a>
+
+            <!-- Advanced Tools -->
+            <a
+                href="#canvas"
+                class="app-card"
+                hx-get="/suite/canvas/canvas.html"
+                hx-target="#main-content"
+                hx-push-url="/#canvas"
+            >
+                <div class="app-icon canvas">
+                    <svg
+                        width="28"
+                        height="28"
+                        viewBox="0 0 24 24"
+                        fill="none"
+                        stroke="currentColor"
+                        stroke-width="2"
+                    >
+                        <rect x="3" y="3" width="18" height="18" rx="2" />
+                        <path d="M8 12h8" />
+                        <path d="M12 8v8" />
+                    </svg>
+                </div>
+                <div class="app-content">
+                    <h3>Canvas</h3>
+                    <p>
+                        Infinite whiteboard for brainstorming. Draw, add sticky
+                        notes, and collaborate visually with your team.
+                    </p>
+                </div>
+            </a>
+
+            <a
+                href="#workspace"
+                class="app-card"
+                hx-get="/suite/workspace/workspace.html"
+                hx-target="#main-content"
+                hx-push-url="/#workspace"
+            >
+                <div class="app-icon workspace">
+                    <svg
+                        width="28"
+                        height="28"
+                        viewBox="0 0 24 24"
+                        fill="none"
+                        stroke="currentColor"
+                        stroke-width="2"
+                    >
+                        <rect
+                            x="2"
+                            y="7"
+                            width="20"
+                            height="14"
+                            rx="2"
+                            ry="2"
+                        />
+                        <path d="M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16" />
+                    </svg>
+                </div>
+                <div class="app-content">
+                    <h3>Workspace</h3>
+                    <p>
+                        Organize your work environment. Create custom workspaces
+                        for different projects and teams.
+                    </p>
+                </div>
+            </a>
+
+            <a
+                href="#designer"
+                class="app-card"
+                hx-get="/designer.html"
+                hx-target="#main-content"
+                hx-push-url="/#designer"
+            >
+                <div class="app-icon designer">
+                    <svg
+                        width="28"
+                        height="28"
+                        viewBox="0 0 24 24"
+                        fill="none"
+                        stroke="currentColor"
+                        stroke-width="2"
+                    >
+                        <path d="M12 2L2 7l10 5 10-5-10-5z" />
+                        <path d="M2 17l10 5 10-5" />
+                        <path d="M2 12l10 5 10-5" />
+                    </svg>
+                </div>
+                <div class="app-content">
+                    <h3>Designer</h3>
+                    <p>
+                        Visual dialog designer for bot conversations. Create
+                        flows, manage intents, and build chatbots.
+                    </p>
+                </div>
+            </a>
+
+            <a
+                href="#editor"
+                class="app-card"
+                hx-get="/editor.html"
+                hx-target="#main-content"
+                hx-push-url="/#editor"
+            >
+                <div class="app-icon editor">
+                    <svg
+                        width="28"
+                        height="28"
+                        viewBox="0 0 24 24"
+                        fill="none"
+                        stroke="currentColor"
+                        stroke-width="2"
+                    >
+                        <polyline points="16 18 22 12 16 6" />
+                        <polyline points="8 6 2 12 8 18" />
+                    </svg>
+                </div>
+                <div class="app-content">
+                    <h3>Editor</h3>
+                    <p>
+                        Code and text editor with syntax highlighting, AI
+                        completion, and multi-file support.
+                    </p>
+                </div>
+            </a>
+
+            <!-- Admin & Operations -->
+            <a
+                href="#attendant"
+                class="app-card"
+                hx-get="/suite/attendant/index.html"
+                hx-target="#main-content"
+                hx-push-url="/#attendant"
+            >
+                <div class="app-icon attendant">
+                    <svg
+                        width="28"
+                        height="28"
+                        viewBox="0 0 24 24"
+                        fill="none"
+                        stroke="currentColor"
+                        stroke-width="2"
+                    >
+                        <path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9" />
+                        <path d="M13.73 21a2 2 0 0 1-3.46 0" />
+                        <path d="M12 2v2" />
+                    </svg>
+                </div>
+                <div class="app-content">
+                    <h3>Attendant</h3>
+                    <p>
+                        Human handoff and queue management. Route conversations
+                        to the right team members.
+                    </p>
+                </div>
+            </a>
+
+            <a
+                href="#compliance"
+                class="app-card"
+                hx-get="/suite/tools/compliance.html"
+                hx-target="#main-content"
+                hx-push-url="/#compliance"
+            >
+                <div class="app-icon compliance">
+                    <svg
+                        width="28"
+                        height="28"
+                        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 d="M9 12l2 2 4-4" />
+                    </svg>
+                </div>
+                <div class="app-content">
+                    <h3>Compliance</h3>
+                    <p>
+                        Security, auditing, and compliance tools. Monitor
+                        access, track changes, and ensure data protection.
+                    </p>
+                </div>
+            </a>
+
+            <a
+                href="#monitoring"
+                class="app-card"
+                hx-get="/suite/monitoring/monitoring.html"
+                hx-target="#main-content"
+                hx-push-url="/#monitoring"
+            >
+                <div class="app-icon monitoring">
+                    <svg
+                        width="28"
+                        height="28"
+                        viewBox="0 0 24 24"
+                        fill="none"
+                        stroke="currentColor"
+                        stroke-width="2"
+                    >
+                        <path d="M22 12h-4l-3 9L9 3l-3 9H2" />
+                    </svg>
+                </div>
+                <div class="app-content">
+                    <h3>Monitoring</h3>
+                    <p>
+                        System health, logs, and metrics. Real-time monitoring
+                        of your infrastructure and applications.
+                    </p>
+                </div>
+            </a>
+
+            <a
+                href="#settings"
+                class="app-card"
+                hx-get="/suite/settings/index.html"
+                hx-target="#main-content"
+                hx-push-url="/#settings"
+            >
+                <div class="app-icon settings">
+                    <svg
+                        width="28"
+                        height="28"
+                        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>
+                </div>
+                <div class="app-content">
+                    <h3>Settings</h3>
+                    <p>
+                        Personal preferences, account settings, and
+                        administration. Customize your workspace experience.
+                    </p>
+                </div>
+            </a>
+        </div>
+    </section>
+</div>
+
+<script>
+    document.addEventListener("DOMContentLoaded", () => {
+        loadRecentDocuments();
+
+        document
+            .getElementById("home-search")
+            ?.addEventListener("focus", () => {
+                document.getElementById("omniboxInput")?.focus();
             });
-        </script>
-    </body>
-</html>
+    });
+
+    async function loadRecentDocuments() {
+        try {
+            const response = await fetch("/api/activity/recent");
+            if (response.ok) {
+                const items = await response.json();
+                renderRecentDocuments(items);
+            }
+        } catch (error) {
+            console.log("Using placeholder recent documents");
+        }
+    }
+
+    function renderRecentDocuments(items) {
+        if (!items || items.length === 0) return;
+
+        const container = document.getElementById("recent-documents");
+        container.innerHTML = items
+            .slice(0, 4)
+            .map(
+                (item) => `
+        <div class="recent-card" onclick="window.location.href='${item.url}'">
+            <div class="recent-icon ${item.type}">
+                ${getIconForType(item.type)}
+            </div>
+            <div class="recent-info">
+                <span class="recent-name">${item.name}</span>
+                <span class="recent-meta">${item.meta}</span>
+            </div>
+        </div>
+    `,
+            )
+            .join("");
+    }
+
+    function getIconForType(type) {
+        const icons = {
+            doc: '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/></svg>',
+            sheet: '<svg width="24" height="24" 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="3" x2="9" y2="21"/></svg>',
+            slides: '<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"/><line x1="8" y1="21" x2="16" y2="21"/><line x1="12" y1="17" x2="12" y2="21"/></svg>',
+            paper: '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z"/><polyline points="14 2 14 8 20 8"/></svg>',
+        };
+        return icons[type] || icons.doc;
+    }
+</script>
diff --git a/ui/suite/index.html b/ui/suite/index.html
index 1cd4d68..8ac3437 100644
--- a/ui/suite/index.html
+++ b/ui/suite/index.html
@@ -95,7 +95,9 @@
             <div class="header-left">
                 <button
                     class="logo-wrapper"
-                    onclick="window.location.href='/#chat'"
+                    hx-get="/suite/home.html"
+                    hx-target="#main-content"
+                    hx-push-url="/#home"
                     title="General Bots"
                     aria-label="General Bots - Home"
                 >
@@ -450,6 +452,69 @@
                                 <span data-i18n="nav-chat">Chat</span>
                             </a>
 
+                            <!-- People (Contacts) -->
+                            <a
+                                class="app-item"
+                                href="#people"
+                                data-section="people"
+                                role="menuitem"
+                                aria-label="People - Contacts"
+                                hx-get="/suite/people/people.html"
+                                hx-target="#main-content"
+                                hx-push-url="/#people"
+                            >
+                                <div class="app-icon" aria-hidden="true">
+                                    <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"
+                                        />
+                                        <circle cx="9" cy="7" r="4" />
+                                        <path d="M23 21v-2a4 4 0 0 0-3-3.87" />
+                                        <path d="M16 3.13a4 4 0 0 1 0 7.75" />
+                                    </svg>
+                                </div>
+                                <span data-i18n="nav-people">People</span>
+                            </a>
+
+                            <!-- Paper -->
+                            <a
+                                class="app-item"
+                                href="#paper"
+                                data-section="paper"
+                                role="menuitem"
+                                aria-label="Paper"
+                                hx-get="/suite/paper/paper.html"
+                                hx-target="#main-content"
+                                hx-push-url="/#paper"
+                            >
+                                <div class="app-icon" aria-hidden="true">
+                                    <svg
+                                        width="20"
+                                        height="20"
+                                        viewBox="0 0 24 24"
+                                        fill="none"
+                                        stroke="currentColor"
+                                        stroke-width="2"
+                                    >
+                                        <path
+                                            d="M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z"
+                                        />
+                                        <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" />
+                                        <line x1="10" y1="9" x2="8" y2="9" />
+                                    </svg>
+                                </div>
+                                <span data-i18n="nav-paper">Paper</span>
+                            </a>
+
                             <!-- Docs -->
                             <a
                                 class="app-item"
@@ -945,16 +1010,16 @@
                                 <span data-i18n="nav-sources">Sources</span>
                             </a>
 
-                            <!-- Tools -->
+                            <!-- Compliance -->
                             <a
                                 class="app-item"
-                                href="#tools"
-                                data-section="tools"
+                                href="#compliance"
+                                data-section="compliance"
                                 role="menuitem"
-                                aria-label="Tools"
+                                aria-label="Compliance"
                                 hx-get="/suite/tools/compliance.html"
                                 hx-target="#main-content"
-                                hx-push-url="/#tools"
+                                hx-push-url="/#compliance"
                             >
                                 <div class="app-icon" aria-hidden="true">
                                     <svg
@@ -966,11 +1031,14 @@
                                         stroke-width="2"
                                     >
                                         <path
-                                            d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76Z"
+                                            d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"
                                         />
+                                        <path d="M9 12l2 2 4-4" />
                                     </svg>
                                 </div>
-                                <span data-i18n="nav-tools">Tools</span>
+                                <span data-i18n="nav-compliance"
+                                    >Compliance</span
+                                >
                             </a>
 
                             <!-- Designer (.bas Editor) -->
@@ -1030,6 +1098,261 @@
                                 </div>
                                 <span data-i18n="nav-attendant">Attendant</span>
                             </a>
+
+                            <!-- Project -->
+                            <a
+                                class="app-item"
+                                href="#project"
+                                data-section="project"
+                                role="menuitem"
+                                aria-label="Project Management"
+                                hx-get="/suite/project/project.html"
+                                hx-target="#main-content"
+                                hx-push-url="/#project"
+                            >
+                                <div class="app-icon" aria-hidden="true">
+                                    <svg
+                                        width="20"
+                                        height="20"
+                                        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"
+                                        />
+                                        <path d="M3 9h18" />
+                                        <path d="M9 21V9" />
+                                    </svg>
+                                </div>
+                                <span data-i18n="nav-project">Project</span>
+                            </a>
+
+                            <!-- Canvas -->
+                            <a
+                                class="app-item"
+                                href="#canvas"
+                                data-section="canvas"
+                                role="menuitem"
+                                aria-label="Canvas Whiteboard"
+                                hx-get="/suite/canvas/canvas.html"
+                                hx-target="#main-content"
+                                hx-push-url="/#canvas"
+                            >
+                                <div class="app-icon" aria-hidden="true">
+                                    <svg
+                                        width="20"
+                                        height="20"
+                                        viewBox="0 0 24 24"
+                                        fill="none"
+                                        stroke="currentColor"
+                                        stroke-width="2"
+                                    >
+                                        <rect
+                                            x="3"
+                                            y="3"
+                                            width="18"
+                                            height="18"
+                                            rx="2"
+                                        />
+                                        <path d="M8 12h8" />
+                                        <path d="M12 8v8" />
+                                    </svg>
+                                </div>
+                                <span data-i18n="nav-canvas">Canvas</span>
+                            </a>
+
+                            <!-- Goals -->
+                            <a
+                                class="app-item"
+                                href="#goals"
+                                data-section="goals"
+                                role="menuitem"
+                                aria-label="Goals & OKRs"
+                                hx-get="/suite/goals/goals.html"
+                                hx-target="#main-content"
+                                hx-push-url="/#goals"
+                            >
+                                <div class="app-icon" aria-hidden="true">
+                                    <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 cx="12" cy="12" r="6" />
+                                        <circle cx="12" cy="12" r="2" />
+                                    </svg>
+                                </div>
+                                <span data-i18n="nav-goals">Goals</span>
+                            </a>
+
+                            <!-- Player -->
+                            <a
+                                class="app-item"
+                                href="#player"
+                                data-section="player"
+                                role="menuitem"
+                                aria-label="Media Player"
+                                hx-get="/suite/player/player.html"
+                                hx-target="#main-content"
+                                hx-push-url="/#player"
+                            >
+                                <div class="app-icon" aria-hidden="true">
+                                    <svg
+                                        width="20"
+                                        height="20"
+                                        viewBox="0 0 24 24"
+                                        fill="none"
+                                        stroke="currentColor"
+                                        stroke-width="2"
+                                    >
+                                        <polygon points="5 3 19 12 5 21 5 3" />
+                                    </svg>
+                                </div>
+                                <span data-i18n="nav-player">Player</span>
+                            </a>
+
+                            <!-- Workspace -->
+                            <a
+                                class="app-item"
+                                href="#workspace"
+                                data-section="workspace"
+                                role="menuitem"
+                                aria-label="Workspace"
+                                hx-get="/suite/workspace/workspace.html"
+                                hx-target="#main-content"
+                                hx-push-url="/#workspace"
+                            >
+                                <div class="app-icon" aria-hidden="true">
+                                    <svg
+                                        width="20"
+                                        height="20"
+                                        viewBox="0 0 24 24"
+                                        fill="none"
+                                        stroke="currentColor"
+                                        stroke-width="2"
+                                    >
+                                        <rect
+                                            x="2"
+                                            y="7"
+                                            width="20"
+                                            height="14"
+                                            rx="2"
+                                            ry="2"
+                                        />
+                                        <path
+                                            d="M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16"
+                                        />
+                                    </svg>
+                                </div>
+                                <span data-i18n="nav-workspace">Workspace</span>
+                            </a>
+
+                            <!-- Video -->
+                            <a
+                                class="app-item"
+                                href="#video"
+                                data-section="video"
+                                role="menuitem"
+                                aria-label="Video"
+                                hx-get="/suite/video/video.html"
+                                hx-target="#main-content"
+                                hx-push-url="/#video"
+                            >
+                                <div class="app-icon" aria-hidden="true">
+                                    <svg
+                                        width="20"
+                                        height="20"
+                                        viewBox="0 0 24 24"
+                                        fill="none"
+                                        stroke="currentColor"
+                                        stroke-width="2"
+                                    >
+                                        <rect
+                                            x="2"
+                                            y="2"
+                                            width="20"
+                                            height="20"
+                                            rx="2.18"
+                                            ry="2.18"
+                                        />
+                                        <line x1="7" y1="2" x2="7" y2="22" />
+                                        <line x1="17" y1="2" x2="17" y2="22" />
+                                        <line x1="2" y1="12" x2="22" y2="12" />
+                                    </svg>
+                                </div>
+                                <span data-i18n="nav-video">Video</span>
+                            </a>
+
+                            <!-- Learn -->
+                            <a
+                                class="app-item"
+                                href="#learn"
+                                data-section="learn"
+                                role="menuitem"
+                                aria-label="Learn"
+                                hx-get="/suite/learn/learn.html"
+                                hx-target="#main-content"
+                                hx-push-url="/#learn"
+                            >
+                                <div class="app-icon" aria-hidden="true">
+                                    <svg
+                                        width="20"
+                                        height="20"
+                                        viewBox="0 0 24 24"
+                                        fill="none"
+                                        stroke="currentColor"
+                                        stroke-width="2"
+                                    >
+                                        <path
+                                            d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z"
+                                        />
+                                        <path
+                                            d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z"
+                                        />
+                                    </svg>
+                                </div>
+                                <span data-i18n="nav-learn">Learn</span>
+                            </a>
+
+                            <!-- Settings (last) -->
+                            <a
+                                class="app-item"
+                                href="#settings"
+                                data-section="settings"
+                                role="menuitem"
+                                aria-label="Settings"
+                                hx-get="/suite/settings/index.html"
+                                hx-target="#main-content"
+                                hx-push-url="/#settings"
+                            >
+                                <div class="app-icon" aria-hidden="true">
+                                    <svg
+                                        width="20"
+                                        height="20"
+                                        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>
+                                </div>
+                                <span data-i18n="nav-settings">Settings</span>
+                            </a>
                         </div>
                     </nav>
                 </div>
diff --git a/ui/suite/js/i18n.js b/ui/suite/js/i18n.js
index 28c76b4..3c81184 100644
--- a/ui/suite/js/i18n.js
+++ b/ui/suite/js/i18n.js
@@ -28,6 +28,12 @@
       "nav-tools": "Tools",
       "nav-attendant": "Attendant",
       "nav-settings": "Settings",
+      "nav-workspace": "Workspace",
+      "nav-project": "Project",
+      "nav-goals": "Goals",
+      "nav-security": "Security",
+      "nav-player": "Player",
+      "nav-canvas": "Canvas",
       "nav-search": "Search...",
       "nav-all-apps": "All Applications",
       "dashboard-title": "Dashboard",
@@ -461,6 +467,66 @@
       "a11y-loading": "Loading, please wait",
       "a11y-menu-open": "Open menu",
       "a11y-menu-close": "Close menu",
+      "workspace-title": "Workspace",
+      "workspace-new-page": "New Page",
+      "workspace-search-pages": "Search pages...",
+      "workspace-recent": "Recent",
+      "workspace-favorites": "Favorites",
+      "workspace-shared": "Shared with me",
+      "workspace-trash": "Trash",
+      "workspace-settings": "Workspace Settings",
+      "workspace-members": "Members",
+      "workspace-templates": "Templates",
+      "project-title": "Project",
+      "project-new": "New Project",
+      "project-tasks": "Tasks",
+      "project-timeline": "Timeline",
+      "project-gantt": "Gantt Chart",
+      "project-resources": "Resources",
+      "project-milestones": "Milestones",
+      "project-critical-path": "Critical Path",
+      "project-progress": "Progress",
+      "goals-title": "Goals (OKR)",
+      "goals-objectives": "Objectives",
+      "goals-key-results": "Key Results",
+      "goals-new-objective": "New Objective",
+      "goals-new-key-result": "New Key Result",
+      "goals-progress": "Progress",
+      "goals-check-in": "Check-in",
+      "goals-alignment": "Alignment",
+      "goals-dashboard": "OKR Dashboard",
+      "goals-periods": "Periods",
+      "security-title": "Security",
+      "security-overview": "Security Overview",
+      "security-tls": "TLS Settings",
+      "security-cors": "CORS Settings",
+      "security-rate-limit": "Rate Limiting",
+      "security-api-keys": "API Keys",
+      "security-audit": "Audit Log",
+      "security-mfa": "Multi-Factor Auth",
+      "security-sessions": "Active Sessions",
+      "security-password-policy": "Password Policy",
+      "security-scan": "Run Security Scan",
+      "player-title": "Player",
+      "player-play": "Play",
+      "player-pause": "Pause",
+      "player-stop": "Stop",
+      "player-volume": "Volume",
+      "player-fullscreen": "Fullscreen",
+      "player-download": "Download",
+      "player-next": "Next",
+      "player-previous": "Previous",
+      "canvas-title": "Canvas",
+      "canvas-new": "New Canvas",
+      "canvas-draw": "Draw",
+      "canvas-shapes": "Shapes",
+      "canvas-text": "Text",
+      "canvas-image": "Image",
+      "canvas-undo": "Undo",
+      "canvas-redo": "Redo",
+      "canvas-clear": "Clear",
+      "canvas-export": "Export",
+      "canvas-collaborate": "Collaborate",
     },
     "pt-BR": {
       "app-name": "General Bots",
@@ -484,6 +550,12 @@
       "nav-tools": "Ferramentas",
       "nav-attendant": "Atendente",
       "nav-settings": "Configurações",
+      "nav-workspace": "Área de Trabalho",
+      "nav-project": "Projeto",
+      "nav-goals": "Metas",
+      "nav-security": "Segurança",
+      "nav-player": "Player",
+      "nav-canvas": "Canvas",
       "nav-search": "Buscar...",
       "nav-all-apps": "Todos os Aplicativos",
       "dashboard-title": "Painel",
@@ -922,6 +994,66 @@
       "a11y-loading": "Carregando, por favor aguarde",
       "a11y-menu-open": "Abrir menu",
       "a11y-menu-close": "Fechar menu",
+      "workspace-title": "Área de Trabalho",
+      "workspace-new-page": "Nova Página",
+      "workspace-search-pages": "Buscar páginas...",
+      "workspace-recent": "Recentes",
+      "workspace-favorites": "Favoritos",
+      "workspace-shared": "Compartilhados comigo",
+      "workspace-trash": "Lixeira",
+      "workspace-settings": "Configurações do Espaço",
+      "workspace-members": "Membros",
+      "workspace-templates": "Modelos",
+      "project-title": "Projeto",
+      "project-new": "Novo Projeto",
+      "project-tasks": "Tarefas",
+      "project-timeline": "Linha do Tempo",
+      "project-gantt": "Gráfico de Gantt",
+      "project-resources": "Recursos",
+      "project-milestones": "Marcos",
+      "project-critical-path": "Caminho Crítico",
+      "project-progress": "Progresso",
+      "goals-title": "Metas (OKR)",
+      "goals-objectives": "Objetivos",
+      "goals-key-results": "Resultados-Chave",
+      "goals-new-objective": "Novo Objetivo",
+      "goals-new-key-result": "Novo Resultado-Chave",
+      "goals-progress": "Progresso",
+      "goals-check-in": "Check-in",
+      "goals-alignment": "Alinhamento",
+      "goals-dashboard": "Painel OKR",
+      "goals-periods": "Períodos",
+      "security-title": "Segurança",
+      "security-overview": "Visão Geral de Segurança",
+      "security-tls": "Configurações TLS",
+      "security-cors": "Configurações CORS",
+      "security-rate-limit": "Limitação de Taxa",
+      "security-api-keys": "Chaves de API",
+      "security-audit": "Log de Auditoria",
+      "security-mfa": "Autenticação Multi-Fator",
+      "security-sessions": "Sessões Ativas",
+      "security-password-policy": "Política de Senhas",
+      "security-scan": "Executar Verificação",
+      "player-title": "Player",
+      "player-play": "Reproduzir",
+      "player-pause": "Pausar",
+      "player-stop": "Parar",
+      "player-volume": "Volume",
+      "player-fullscreen": "Tela Cheia",
+      "player-download": "Baixar",
+      "player-next": "Próximo",
+      "player-previous": "Anterior",
+      "canvas-title": "Canvas",
+      "canvas-new": "Novo Canvas",
+      "canvas-draw": "Desenhar",
+      "canvas-shapes": "Formas",
+      "canvas-text": "Texto",
+      "canvas-image": "Imagem",
+      "canvas-undo": "Desfazer",
+      "canvas-redo": "Refazer",
+      "canvas-clear": "Limpar",
+      "canvas-export": "Exportar",
+      "canvas-collaborate": "Colaborar",
     },
   };
 
diff --git a/ui/suite/people/people.css b/ui/suite/people/people.css
new file mode 100644
index 0000000..6df384a
--- /dev/null
+++ b/ui/suite/people/people.css
@@ -0,0 +1,622 @@
+.people-container {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    background: var(--bg-primary);
+    position: relative;
+}
+
+.people-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 20px 24px;
+    border-bottom: 1px solid var(--border-color);
+    background: var(--bg-secondary);
+}
+
+.people-header h1 {
+    margin: 0;
+    font-size: 1.5rem;
+    color: var(--text-primary);
+}
+
+.header-subtitle {
+    margin: 4px 0 0 0;
+    font-size: 0.875rem;
+    color: var(--text-secondary);
+}
+
+.header-actions {
+    display: flex;
+    gap: 12px;
+    align-items: center;
+}
+
+.search-box {
+    position: relative;
+    display: flex;
+    align-items: center;
+}
+
+.search-box svg {
+    position: absolute;
+    left: 12px;
+    color: var(--text-secondary);
+    pointer-events: none;
+}
+
+.search-box input {
+    padding: 10px 12px 10px 40px;
+    border: 1px solid var(--border-color);
+    border-radius: 8px;
+    background: var(--bg-primary);
+    color: var(--text-primary);
+    font-size: 0.875rem;
+    width: 280px;
+    transition: border-color 0.2s, box-shadow 0.2s;
+}
+
+.search-box input:focus {
+    outline: none;
+    border-color: var(--accent-color);
+    box-shadow: 0 0 0 3px var(--accent-color-alpha, rgba(99, 102, 241, 0.1));
+}
+
+.search-box input::placeholder {
+    color: var(--text-tertiary);
+}
+
+.btn {
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    padding: 10px 16px;
+    border: none;
+    border-radius: 8px;
+    font-size: 0.875rem;
+    font-weight: 500;
+    cursor: pointer;
+    transition: all 0.2s;
+}
+
+.btn-primary {
+    background: var(--accent-color);
+    color: white;
+}
+
+.btn-primary:hover {
+    background: var(--accent-hover);
+    transform: translateY(-1px);
+}
+
+.btn-secondary {
+    background: var(--bg-secondary);
+    color: var(--text-primary);
+    border: 1px solid var(--border-color);
+}
+
+.btn-secondary:hover {
+    background: var(--bg-tertiary);
+}
+
+.tab-nav {
+    display: flex;
+    gap: 4px;
+    padding: 12px 24px;
+    border-bottom: 1px solid var(--border-color);
+    background: var(--bg-secondary);
+}
+
+.tab-btn {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 10px 16px;
+    border: none;
+    border-radius: 8px;
+    background: transparent;
+    color: var(--text-secondary);
+    font-size: 0.875rem;
+    font-weight: 500;
+    cursor: pointer;
+    transition: all 0.2s;
+}
+
+.tab-btn:hover {
+    background: var(--bg-tertiary);
+    color: var(--text-primary);
+}
+
+.tab-btn.active {
+    background: var(--accent-color);
+    color: white;
+}
+
+.tab-btn svg {
+    flex-shrink: 0;
+}
+
+.people-content {
+    flex: 1;
+    overflow: hidden;
+    position: relative;
+}
+
+.tab-content {
+    display: none;
+    height: 100%;
+    overflow-y: auto;
+}
+
+.tab-content.active {
+    display: block;
+}
+
+.alphabet-filter {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 4px;
+    padding: 12px 24px;
+    border-bottom: 1px solid var(--border-color);
+    background: var(--bg-secondary);
+}
+
+.alpha-btn {
+    padding: 6px 10px;
+    border: none;
+    border-radius: 6px;
+    background: transparent;
+    color: var(--text-secondary);
+    font-size: 0.75rem;
+    font-weight: 600;
+    cursor: pointer;
+    transition: all 0.2s;
+    min-width: 28px;
+}
+
+.alpha-btn:hover {
+    background: var(--bg-tertiary);
+    color: var(--text-primary);
+}
+
+.alpha-btn.active {
+    background: var(--accent-color);
+    color: white;
+}
+
+.contacts-list {
+    padding: 16px 24px;
+}
+
+.contact-group {
+    margin-bottom: 24px;
+}
+
+.group-header {
+    font-size: 0.75rem;
+    font-weight: 700;
+    color: var(--text-tertiary);
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    padding: 8px 0;
+    border-bottom: 1px solid var(--border-color);
+    margin-bottom: 8px;
+}
+
+.group-contacts {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+}
+
+.contact-card {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    padding: 12px 16px;
+    border-radius: 10px;
+    cursor: pointer;
+    transition: all 0.2s;
+}
+
+.contact-card:hover {
+    background: var(--bg-secondary);
+}
+
+.contact-avatar {
+    width: 44px;
+    height: 44px;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 1rem;
+    font-weight: 600;
+    color: white;
+    flex-shrink: 0;
+}
+
+.contact-avatar.large {
+    width: 80px;
+    height: 80px;
+    font-size: 1.75rem;
+}
+
+.contact-info {
+    flex: 1;
+    min-width: 0;
+}
+
+.contact-name {
+    font-size: 0.9375rem;
+    font-weight: 500;
+    color: var(--text-primary);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.contact-detail {
+    font-size: 0.8125rem;
+    color: var(--text-secondary);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    margin-top: 2px;
+}
+
+.contact-actions {
+    display: flex;
+    gap: 4px;
+    opacity: 0;
+    transition: opacity 0.2s;
+}
+
+.contact-card:hover .contact-actions {
+    opacity: 1;
+}
+
+.icon-btn {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 36px;
+    height: 36px;
+    border: none;
+    border-radius: 8px;
+    background: transparent;
+    color: var(--text-secondary);
+    cursor: pointer;
+    transition: all 0.2s;
+}
+
+.icon-btn:hover {
+    background: var(--bg-tertiary);
+    color: var(--text-primary);
+}
+
+.icon-btn.small {
+    width: 32px;
+    height: 32px;
+}
+
+.contact-panel {
+    position: absolute;
+    top: 0;
+    right: 0;
+    width: 400px;
+    height: 100%;
+    background: var(--bg-primary);
+    border-left: 1px solid var(--border-color);
+    box-shadow: -4px 0 20px rgba(0, 0, 0, 0.1);
+    transform: translateX(100%);
+    transition: transform 0.3s ease;
+    display: flex;
+    flex-direction: column;
+    z-index: 100;
+}
+
+.contact-panel.open {
+    transform: translateX(0);
+}
+
+.panel-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 16px 20px;
+    border-bottom: 1px solid var(--border-color);
+}
+
+.panel-actions {
+    display: flex;
+    gap: 8px;
+}
+
+.close-btn {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 36px;
+    height: 36px;
+    border: none;
+    border-radius: 8px;
+    background: transparent;
+    color: var(--text-secondary);
+    cursor: pointer;
+    transition: all 0.2s;
+}
+
+.close-btn:hover {
+    background: var(--bg-tertiary);
+    color: var(--text-primary);
+}
+
+.panel-content {
+    flex: 1;
+    overflow-y: auto;
+    padding: 24px 20px;
+}
+
+.contact-header {
+    text-align: center;
+    padding-bottom: 24px;
+    border-bottom: 1px solid var(--border-color);
+    margin-bottom: 24px;
+}
+
+.contact-header h2 {
+    margin: 16px 0 4px 0;
+    font-size: 1.25rem;
+    color: var(--text-primary);
+}
+
+.contact-title {
+    margin: 0;
+    font-size: 0.875rem;
+    color: var(--text-secondary);
+}
+
+.contact-company {
+    margin: 4px 0 0 0;
+    font-size: 0.8125rem;
+    color: var(--text-tertiary);
+}
+
+.contact-fields {
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+    margin-bottom: 24px;
+}
+
+.field label {
+    display: block;
+    font-size: 0.75rem;
+    font-weight: 600;
+    color: var(--text-tertiary);
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    margin-bottom: 4px;
+}
+
+.field a,
+.field p {
+    margin: 0;
+    font-size: 0.9375rem;
+    color: var(--text-primary);
+}
+
+.field a {
+    color: var(--accent-color);
+    text-decoration: none;
+}
+
+.field a:hover {
+    text-decoration: underline;
+}
+
+.contact-quick-actions {
+    display: flex;
+    gap: 8px;
+    flex-wrap: wrap;
+}
+
+.action-btn {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 10px 16px;
+    border: 1px solid var(--border-color);
+    border-radius: 8px;
+    background: var(--bg-secondary);
+    color: var(--text-primary);
+    font-size: 0.875rem;
+    font-weight: 500;
+    cursor: pointer;
+    transition: all 0.2s;
+}
+
+.action-btn:hover {
+    background: var(--bg-tertiary);
+    border-color: var(--accent-color);
+}
+
+.modal {
+    border: none;
+    border-radius: 16px;
+    padding: 0;
+    max-width: 500px;
+    width: 90%;
+    background: var(--bg-primary);
+    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
+}
+
+.modal::backdrop {
+    background: rgba(0, 0, 0, 0.5);
+    backdrop-filter: blur(4px);
+}
+
+.modal-content {
+    padding: 24px;
+}
+
+.modal-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 24px;
+}
+
+.modal-header h2 {
+    margin: 0;
+    font-size: 1.25rem;
+    color: var(--text-primary);
+}
+
+.form-row {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 16px;
+}
+
+.form-group {
+    margin-bottom: 16px;
+}
+
+.form-group label {
+    display: block;
+    font-size: 0.875rem;
+    font-weight: 500;
+    color: var(--text-primary);
+    margin-bottom: 6px;
+}
+
+.form-group input,
+.form-group textarea {
+    width: 100%;
+    padding: 10px 12px;
+    border: 1px solid var(--border-color);
+    border-radius: 8px;
+    background: var(--bg-secondary);
+    color: var(--text-primary);
+    font-size: 0.875rem;
+    font-family: inherit;
+    transition: border-color 0.2s, box-shadow 0.2s;
+}
+
+.form-group input:focus,
+.form-group textarea:focus {
+    outline: none;
+    border-color: var(--accent-color);
+    box-shadow: 0 0 0 3px var(--accent-color-alpha, rgba(99, 102, 241, 0.1));
+}
+
+.form-group textarea {
+    resize: vertical;
+    min-height: 80px;
+}
+
+.form-actions {
+    display: flex;
+    justify-content: flex-end;
+    gap: 12px;
+    margin-top: 24px;
+    padding-top: 16px;
+    border-top: 1px solid var(--border-color);
+}
+
+.empty-state {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: 60px 24px;
+    text-align: center;
+    color: var(--text-secondary);
+}
+
+.empty-state svg {
+    margin-bottom: 16px;
+    opacity: 0.5;
+}
+
+.empty-state h3 {
+    margin: 0 0 8px 0;
+    font-size: 1.125rem;
+    color: var(--text-primary);
+}
+
+.empty-state p {
+    margin: 0 0 24px 0;
+    font-size: 0.875rem;
+}
+
+.loading-state {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: 60px 24px;
+    color: var(--text-secondary);
+}
+
+.spinner {
+    width: 32px;
+    height: 32px;
+    border: 3px solid var(--border-color);
+    border-top-color: var(--accent-color);
+    border-radius: 50%;
+    animation: spin 0.8s linear infinite;
+    margin-bottom: 16px;
+}
+
+@keyframes spin {
+    to {
+        transform: rotate(360deg);
+    }
+}
+
+.groups-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+    gap: 16px;
+    padding: 24px;
+}
+
+.directory-tree {
+    padding: 24px;
+}
+
+.recent-list {
+    padding: 16px 24px;
+}
+
+@media (max-width: 768px) {
+    .people-header {
+        flex-direction: column;
+        gap: 16px;
+        align-items: stretch;
+    }
+
+    .header-actions {
+        flex-direction: column;
+    }
+
+    .search-box input {
+        width: 100%;
+    }
+
+    .contact-panel {
+        width: 100%;
+    }
+
+    .form-row {
+        grid-template-columns: 1fr;
+    }
+
+    .alphabet-filter {
+        justify-content: center;
+    }
+}
diff --git a/ui/suite/people/people.html b/ui/suite/people/people.html
new file mode 100644
index 0000000..665d20f
--- /dev/null
+++ b/ui/suite/people/people.html
@@ -0,0 +1,527 @@
+<link rel="stylesheet" href="people/people.css" />
+
+<div class="people-container">
+    <!-- Header -->
+    <header class="people-header">
+        <div class="header-left">
+            <h1 data-i18n="people-title">People</h1>
+            <p class="header-subtitle" data-i18n="people-subtitle">
+                Contacts, Groups & Directory
+            </p>
+        </div>
+        <div class="header-actions">
+            <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 contacts..."
+                    data-i18n-placeholder="people-search"
+                    id="people-search"
+                />
+            </div>
+            <button class="btn btn-primary" onclick="openAddContact()">
+                <svg width="18" height="18" 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"/>
+                    <circle cx="8.5" cy="7" r="4"/>
+                    <line x1="20" y1="8" x2="20" y2="14"/>
+                    <line x1="23" y1="11" x2="17" y2="11"/>
+                </svg>
+                <span data-i18n="people-add">Add Contact</span>
+            </button>
+        </div>
+    </header>
+
+    <!-- Tab Navigation -->
+    <nav class="tab-nav" role="tablist">
+        <button class="tab-btn active" role="tab" aria-selected="true" onclick="showTab('contacts', 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"/>
+                <circle cx="9" cy="7" r="4"/>
+            </svg>
+            <span data-i18n="people-tab-contacts">Contacts</span>
+        </button>
+        <button class="tab-btn" role="tab" aria-selected="false" onclick="showTab('groups', 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"/>
+                <circle cx="9" cy="7" r="4"/>
+                <path d="M23 21v-2a4 4 0 0 0-3-3.87"/>
+                <path d="M16 3.13a4 4 0 0 1 0 7.75"/>
+            </svg>
+            <span data-i18n="people-tab-groups">Groups</span>
+        </button>
+        <button class="tab-btn" role="tab" aria-selected="false" onclick="showTab('directory', this)">
+            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                <path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"/>
+                <path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z"/>
+            </svg>
+            <span data-i18n="people-tab-directory">Directory</span>
+        </button>
+        <button class="tab-btn" role="tab" aria-selected="false" onclick="showTab('recent', 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"/>
+                <polyline points="12 6 12 12 16 14"/>
+            </svg>
+            <span data-i18n="people-tab-recent">Recent</span>
+        </button>
+    </nav>
+
+    <!-- Main Content -->
+    <div class="people-content">
+        <!-- Contacts Tab -->
+        <div id="contacts-tab" class="tab-content active">
+            <!-- Alphabet Filter -->
+            <div class="alphabet-filter">
+                <button class="alpha-btn active" onclick="filterByLetter('all', this)">All</button>
+                <button class="alpha-btn" onclick="filterByLetter('A', this)">A</button>
+                <button class="alpha-btn" onclick="filterByLetter('B', this)">B</button>
+                <button class="alpha-btn" onclick="filterByLetter('C', this)">C</button>
+                <button class="alpha-btn" onclick="filterByLetter('D', this)">D</button>
+                <button class="alpha-btn" onclick="filterByLetter('E', this)">E</button>
+                <button class="alpha-btn" onclick="filterByLetter('F', this)">F</button>
+                <button class="alpha-btn" onclick="filterByLetter('G', this)">G</button>
+                <button class="alpha-btn" onclick="filterByLetter('H', this)">H</button>
+                <button class="alpha-btn" onclick="filterByLetter('I', this)">I</button>
+                <button class="alpha-btn" onclick="filterByLetter('J', this)">J</button>
+                <button class="alpha-btn" onclick="filterByLetter('K', this)">K</button>
+                <button class="alpha-btn" onclick="filterByLetter('L', this)">L</button>
+                <button class="alpha-btn" onclick="filterByLetter('M', this)">M</button>
+                <button class="alpha-btn" onclick="filterByLetter('N', this)">N</button>
+                <button class="alpha-btn" onclick="filterByLetter('O', this)">O</button>
+                <button class="alpha-btn" onclick="filterByLetter('P', this)">P</button>
+                <button class="alpha-btn" onclick="filterByLetter('Q', this)">Q</button>
+                <button class="alpha-btn" onclick="filterByLetter('R', this)">R</button>
+                <button class="alpha-btn" onclick="filterByLetter('S', this)">S</button>
+                <button class="alpha-btn" onclick="filterByLetter('T', this)">T</button>
+                <button class="alpha-btn" onclick="filterByLetter('U', this)">U</button>
+                <button class="alpha-btn" onclick="filterByLetter('V', this)">V</button>
+                <button class="alpha-btn" onclick="filterByLetter('W', this)">W</button>
+                <button class="alpha-btn" onclick="filterByLetter('X', this)">X</button>
+                <button class="alpha-btn" onclick="filterByLetter('Y', this)">Y</button>
+                <button class="alpha-btn" onclick="filterByLetter('Z', this)">Z</button>
+            </div>
+
+            <!-- Contacts List -->
+            <div class="contacts-list" id="contacts-list">
+                <!-- Contacts will be loaded here -->
+                <div class="loading-state">
+                    <div class="spinner"></div>
+                    <p data-i18n="people-loading">Loading contacts...</p>
+                </div>
+            </div>
+        </div>
+
+        <!-- Groups Tab -->
+        <div id="groups-tab" class="tab-content">
+            <div class="groups-grid" id="groups-list">
+                <!-- Groups will be loaded here -->
+            </div>
+        </div>
+
+        <!-- Directory Tab -->
+        <div id="directory-tab" class="tab-content">
+            <div class="directory-tree" id="directory-tree">
+                <!-- Organization directory will be loaded here -->
+            </div>
+        </div>
+
+        <!-- Recent Tab -->
+        <div id="recent-tab" class="tab-content">
+            <div class="recent-list" id="recent-list">
+                <!-- Recent contacts will be loaded here -->
+            </div>
+        </div>
+    </div>
+
+    <!-- Contact Detail Panel (slides in from right) -->
+    <div class="contact-panel" id="contact-panel">
+        <div class="panel-header">
+            <button class="close-btn" onclick="closeContactPanel()">
+                <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 x1="6" y1="6" x2="18" y2="18"/>
+                </svg>
+            </button>
+            <div class="panel-actions">
+                <button class="icon-btn" title="Edit" onclick="editContact()">
+                    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                        <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/>
+                        <path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/>
+                    </svg>
+                </button>
+                <button class="icon-btn" title="Delete" onclick="deleteContact()">
+                    <svg width="18" height="18" 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>
+        <div class="panel-content" id="contact-detail">
+            <!-- Contact details will be loaded here -->
+        </div>
+    </div>
+</div>
+
+<!-- Add/Edit Contact Modal -->
+<dialog id="contact-modal" class="modal">
+    <div class="modal-content">
+        <div class="modal-header">
+            <h2 id="modal-title" data-i18n="people-add-contact">Add Contact</h2>
+            <button class="close-btn" onclick="closeModal()">
+                <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 x1="6" y1="6" x2="18" y2="18"/>
+                </svg>
+            </button>
+        </div>
+        <form id="contact-form" onsubmit="saveContact(event)">
+            <div class="form-row">
+                <div class="form-group">
+                    <label data-i18n="people-first-name">First Name</label>
+                    <input type="text" name="firstName" required />
+                </div>
+                <div class="form-group">
+                    <label data-i18n="people-last-name">Last Name</label>
+                    <input type="text" name="lastName" required />
+                </div>
+            </div>
+            <div class="form-group">
+                <label data-i18n="people-email">Email</label>
+                <input type="email" name="email" />
+            </div>
+            <div class="form-group">
+                <label data-i18n="people-phone">Phone</label>
+                <input type="tel" name="phone" />
+            </div>
+            <div class="form-group">
+                <label data-i18n="people-company">Company</label>
+                <input type="text" name="company" />
+            </div>
+            <div class="form-group">
+                <label data-i18n="people-title">Title</label>
+                <input type="text" name="title" />
+            </div>
+            <div class="form-group">
+                <label data-i18n="people-notes">Notes</label>
+                <textarea name="notes" rows="3"></textarea>
+            </div>
+            <div class="form-actions">
+                <button type="button" class="btn btn-secondary" onclick="closeModal()" data-i18n="cancel">Cancel</button>
+                <button type="submit" class="btn btn-primary" data-i18n="save">Save</button>
+            </div>
+        </form>
+    </div>
+</dialog>
+
+<script>
+let currentContact = null;
+let contacts = [];
+
+document.addEventListener('DOMContentLoaded', () => {
+    loadContacts();
+});
+
+async function loadContacts() {
+    try {
+        const response = await fetch('/api/contacts');
+        if (response.ok) {
+            contacts = await response.json();
+            renderContacts(contacts);
+        } else {
+            renderEmptyState();
+        }
+    } catch (error) {
+        console.error('Failed to load contacts:', error);
+        renderEmptyState();
+    }
+}
+
+function renderContacts(contactsList) {
+    const container = document.getElementById('contacts-list');
+    if (!contactsList || contactsList.length === 0) {
+        renderEmptyState();
+        return;
+    }
+
+    const grouped = groupByLetter(contactsList);
+    let html = '';
+
+    for (const [letter, group] of Object.entries(grouped)) {
+        html += `<div class="contact-group" data-letter="${letter}">
+            <div class="group-header">${letter}</div>
+            <div class="group-contacts">`;
+
+        for (const contact of group) {
+            html += renderContactCard(contact);
+        }
+
+        html += '</div></div>';
+    }
+
+    container.innerHTML = html;
+}
+
+function renderContactCard(contact) {
+    const initials = getInitials(contact.firstName, contact.lastName);
+    const name = `${contact.firstName} ${contact.lastName}`;
+
+    return `<div class="contact-card" onclick="showContact('${contact.id}')">
+        <div class="contact-avatar" style="background: ${getAvatarColor(name)}">${initials}</div>
+        <div class="contact-info">
+            <div class="contact-name">${name}</div>
+            <div class="contact-detail">${contact.email || contact.phone || ''}</div>
+        </div>
+        <div class="contact-actions">
+            <button class="icon-btn small" onclick="event.stopPropagation(); startChat('${contact.id}')" title="Chat">
+                <svg width="16" height="16" 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"/>
+                </svg>
+            </button>
+            <button class="icon-btn small" onclick="event.stopPropagation(); sendEmail('${contact.email}')" title="Email">
+                <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"/>
+                    <polyline points="22,6 12,13 2,6"/>
+                </svg>
+            </button>
+        </div>
+    </div>`;
+}
+
+function renderEmptyState() {
+    document.getElementById('contacts-list').innerHTML = `
+        <div class="empty-state">
+            <svg width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
+                <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/>
+                <circle cx="9" cy="7" r="4"/>
+                <path d="M23 21v-2a4 4 0 0 0-3-3.87"/>
+                <path d="M16 3.13a4 4 0 0 1 0 7.75"/>
+            </svg>
+            <h3 data-i18n="people-empty-title">No contacts yet</h3>
+            <p data-i18n="people-empty-desc">Add your first contact to get started</p>
+            <button class="btn btn-primary" onclick="openAddContact()">
+                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                    <line x1="12" y1="5" x2="12" y2="19"/>
+                    <line x1="5" y1="12" x2="19" y2="12"/>
+                </svg>
+                <span data-i18n="people-add">Add Contact</span>
+            </button>
+        </div>
+    `;
+}
+
+function groupByLetter(contactsList) {
+    const grouped = {};
+    for (const contact of contactsList) {
+        const letter = (contact.lastName || contact.firstName || '#').charAt(0).toUpperCase();
+        if (!grouped[letter]) grouped[letter] = [];
+        grouped[letter].push(contact);
+    }
+    return Object.fromEntries(Object.entries(grouped).sort());
+}
+
+function getInitials(firstName, lastName) {
+    return ((firstName?.charAt(0) || '') + (lastName?.charAt(0) || '')).toUpperCase() || '?';
+}
+
+function getAvatarColor(name) {
+    const colors = ['#6366f1', '#8b5cf6', '#ec4899', '#ef4444', '#f97316', '#eab308', '#22c55e', '#14b8a6', '#06b6d4', '#3b82f6'];
+    let hash = 0;
+    for (let i = 0; i < name.length; i++) {
+        hash = name.charCodeAt(i) + ((hash << 5) - hash);
+    }
+    return colors[Math.abs(hash) % colors.length];
+}
+
+function showTab(tabId, btn) {
+    document.querySelectorAll('.tab-content').forEach(tab => tab.classList.remove('active'));
+    document.querySelectorAll('.tab-btn').forEach(b => {
+        b.classList.remove('active');
+        b.setAttribute('aria-selected', 'false');
+    });
+
+    document.getElementById(tabId + '-tab').classList.add('active');
+    btn.classList.add('active');
+    btn.setAttribute('aria-selected', 'true');
+}
+
+function filterByLetter(letter, btn) {
+    document.querySelectorAll('.alpha-btn').forEach(b => b.classList.remove('active'));
+    btn.classList.add('active');
+
+    document.querySelectorAll('.contact-group').forEach(group => {
+        if (letter === 'all' || group.dataset.letter === letter) {
+            group.style.display = '';
+        } else {
+            group.style.display = 'none';
+        }
+    });
+}
+
+function showContact(id) {
+    currentContact = contacts.find(c => c.id === id);
+    if (!currentContact) return;
+
+    const panel = document.getElementById('contact-panel');
+    const detail = document.getElementById('contact-detail');
+
+    detail.innerHTML = `
+        <div class="contact-header">
+            <div class="contact-avatar large" style="background: ${getAvatarColor(currentContact.firstName + ' ' + currentContact.lastName)}">
+                ${getInitials(currentContact.firstName, currentContact.lastName)}
+            </div>
+            <h2>${currentContact.firstName} ${currentContact.lastName}</h2>
+            ${currentContact.title ? `<p class="contact-title">${currentContact.title}</p>` : ''}
+            ${currentContact.company ? `<p class="contact-company">${currentContact.company}</p>` : ''}
+        </div>
+        <div class="contact-fields">
+            ${currentContact.email ? `
+                <div class="field">
+                    <label>Email</label>
+                    <a href="mailto:${currentContact.email}">${currentContact.email}</a>
+                </div>
+            ` : ''}
+            ${currentContact.phone ? `
+                <div class="field">
+                    <label>Phone</label>
+                    <a href="tel:${currentContact.phone}">${currentContact.phone}</a>
+                </div>
+            ` : ''}
+            ${currentContact.notes ? `
+                <div class="field">
+                    <label>Notes</label>
+                    <p>${currentContact.notes}</p>
+                </div>
+            ` : ''}
+        </div>
+        <div class="contact-quick-actions">
+            <button class="action-btn" onclick="startChat('${currentContact.id}')">
+                <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"/>
+                </svg>
+                Chat
+            </button>
+            <button class="action-btn" onclick="sendEmail('${currentContact.email}')">
+                <svg width="20" height="20" 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"/>
+                    <polyline points="22,6 12,13 2,6"/>
+                </svg>
+                Email
+            </button>
+            <button class="action-btn" onclick="scheduleMeeting('${currentContact.id}')">
+                <svg width="20" height="20" 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>
+                Meeting
+            </button>
+        </div>
+    `;
+
+    panel.classList.add('open');
+}
+
+function closeContactPanel() {
+    document.getElementById('contact-panel').classList.remove('open');
+    currentContact = null;
+}
+
+function openAddContact() {
+    currentContact = null;
+    document.getElementById('modal-title').textContent = 'Add Contact';
+    document.getElementById('contact-form').reset();
+    document.getElementById('contact-modal').showModal();
+}
+
+function editContact() {
+    if (!currentContact) return;
+    document.getElementById('modal-title').textContent = 'Edit Contact';
+    const form = document.getElementById('contact-form');
+    form.firstName.value = currentContact.firstName || '';
+    form.lastName.value = currentContact.lastName || '';
+    form.email.value = currentContact.email || '';
+    form.phone.value = currentContact.phone || '';
+    form.company.value = currentContact.company || '';
+    form.title.value = currentContact.title || '';
+    form.notes.value = currentContact.notes || '';
+    document.getElementById('contact-modal').showModal();
+}
+
+function closeModal() {
+    document.getElementById('contact-modal').close();
+}
+
+async function saveContact(event) {
+    event.preventDefault();
+    const form = event.target;
+    const data = {
+        firstName: form.firstName.value,
+        lastName: form.lastName.value,
+        email: form.email.value,
+        phone: form.phone.value,
+        company: form.company.value,
+        title: form.title.value,
+        notes: form.notes.value
+    };
+
+    try {
+        const url = currentContact ? `/api/contacts/${currentContact.id}` : '/api/contacts';
+        const method = currentContact ? 'PUT' : 'POST';
+
+        const response = await fetch(url, {
+            method,
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify(data)
+        });
+
+        if (response.ok) {
+            closeModal();
+            loadContacts();
+            if (currentContact) closeContactPanel();
+        }
+    } catch (error) {
+        console.error('Failed to save contact:', error);
+    }
+}
+
+async function deleteContact() {
+    if (!currentContact || !confirm('Delete this contact?')) return;
+
+    try {
+        const response = await fetch(`/api/contacts/${currentContact.id}`, { method: 'DELETE' });
+        if (response.ok) {
+            closeContactPanel();
+            loadContacts();
+        }
+    } catch (error) {
+        console.error('Failed to delete contact:', error);
+    }
+}
+
+function startChat(contactId) {
+    window.location.href = `/#chat?contact=${contactId}`;
+}
+
+function sendEmail(email) {
+    if (email) window.location.href = `mailto:${email}`;
+}
+
+function scheduleMeeting(contactId) {
+    window.location.href = `/#calendar?new=meeting&contact=${contactId}`;
+}
+
+// Search functionality
+document.getElementById('people-search')?.addEventListener('input', (e) => {
+    const query = e.target.value.toLowerCase();
+    const filtered = contacts.filter(c =>
+        (c.firstName + ' ' + c.lastName).toLowerCase().includes(query) ||
+        (c.email || '').toLowerCase().includes(query) ||
+        (c.company || '').toLowerCase().includes(query)
+    );
+    renderContacts(filtered);
+});
+</script>
diff --git a/ui/suite/player/player.html b/ui/suite/player/player.html
new file mode 100644
index 0000000..7aec989
--- /dev/null
+++ b/ui/suite/player/player.html
@@ -0,0 +1,1003 @@
+<!-- =============================================================================
+     PLAYER APP - Media Viewer for Documents, Audio, Video, and Presentations
+     Respects Theme Manager - No hardcoded theme
+     ============================================================================= -->
+
+<div class="player-app">
+    <!-- Sidebar - File Browser -->
+    <aside class="player-sidebar">
+        <div class="sidebar-header">
+            <h2 data-i18n="player-title">Player</h2>
+        </div>
+
+        <div class="sidebar-search">
+            <input
+                type="search"
+                placeholder="Search files..."
+                hx-get="/api/drive/list"
+                hx-trigger="keyup changed delay:300ms"
+                hx-target="#file-list"
+                hx-swap="innerHTML"
+                name="q"
+            />
+        </div>
+
+        <nav class="sidebar-nav">
+            <div class="nav-section">
+                <h3>Recent</h3>
+                <div
+                    id="recent-files"
+                    hx-get="/api/drive/list?filter=recent&types=media"
+                    hx-trigger="load"
+                    hx-swap="innerHTML"
+                >
+                    <div class="loading-placeholder">Loading...</div>
+                </div>
+            </div>
+
+            <div class="nav-section">
+                <h3>Files</h3>
+                <div class="file-type-filters">
+                    <button class="filter-btn active" data-type="all" onclick="filterFiles('all')">All</button>
+                    <button class="filter-btn" data-type="video" onclick="filterFiles('video')">🎬</button>
+                    <button class="filter-btn" data-type="audio" onclick="filterFiles('audio')">🎵</button>
+                    <button class="filter-btn" data-type="document" onclick="filterFiles('document')">📄</button>
+                    <button class="filter-btn" data-type="image" onclick="filterFiles('image')">🖼️</button>
+                </div>
+                <div
+                    id="file-list"
+                    hx-get="/api/drive/list?types=media"
+                    hx-trigger="load, fileUploaded from:body"
+                    hx-swap="innerHTML"
+                >
+                    <div class="loading-placeholder">Loading files...</div>
+                </div>
+            </div>
+        </nav>
+    </aside>
+
+    <!-- Main Content - Player Area -->
+    <main class="player-main">
+        <!-- Player Header -->
+        <header class="player-header">
+            <div class="file-info">
+                <h1 id="file-name">No file selected</h1>
+                <div class="file-meta">
+                    <span id="file-type">--</span>
+                    <span id="file-size">--</span>
+                    <span id="file-duration">--</span>
+                </div>
+            </div>
+            <div class="player-actions">
+                <button class="btn-icon" id="btn-download" title="Download" disabled onclick="downloadFile()">
+                    <span>📥</span>
+                </button>
+                <button class="btn-icon" id="btn-share" title="Share" disabled onclick="shareFile()">
+                    <span>🔗</span>
+                </button>
+                <button class="btn-icon" id="btn-fullscreen" title="Fullscreen" disabled onclick="toggleFullscreen()">
+                    <span>⛶</span>
+                </button>
+            </div>
+        </header>
+
+        <!-- Player Container -->
+        <div class="player-container" id="player-container">
+            <!-- Video Player -->
+            <div id="video-player" class="media-player hidden">
+                <video id="video-element" controls>
+                    <source src="" type="video/mp4">
+                    Your browser does not support the video tag.
+                </video>
+            </div>
+
+            <!-- Audio Player -->
+            <div id="audio-player" class="media-player hidden">
+                <div class="audio-visualizer" id="audio-visualizer">
+                    <div class="album-art">🎵</div>
+                </div>
+                <audio id="audio-element" controls>
+                    <source src="" type="audio/mpeg">
+                    Your browser does not support the audio tag.
+                </audio>
+            </div>
+
+            <!-- Document Viewer -->
+            <div id="document-viewer" class="media-player hidden">
+                <iframe id="document-frame" src="" frameborder="0"></iframe>
+            </div>
+
+            <!-- Image Viewer -->
+            <div id="image-viewer" class="media-player hidden">
+                <img id="image-element" src="" alt="">
+            </div>
+
+            <!-- Presentation Viewer -->
+            <div id="presentation-viewer" class="media-player hidden">
+                <div class="slide-container">
+                    <div id="slide-content"></div>
+                </div>
+                <div class="slide-navigation">
+                    <button class="nav-btn" onclick="prevSlide()">←</button>
+                    <span id="slide-counter">1 / 1</span>
+                    <button class="nav-btn" onclick="nextSlide()">→</button>
+                </div>
+            </div>
+
+            <!-- Empty State -->
+            <div id="empty-state" class="empty-state">
+                <div class="empty-state-icon">🎬</div>
+                <h2>No Media Selected</h2>
+                <p>Select a file from the sidebar to start viewing</p>
+                <div class="supported-formats">
+                    <h4>Supported Formats</h4>
+                    <div class="format-grid">
+                        <div class="format-item">
+                            <span class="format-icon">🎬</span>
+                            <span class="format-label">MP4, WebM, OGV</span>
+                        </div>
+                        <div class="format-item">
+                            <span class="format-icon">🎵</span>
+                            <span class="format-label">MP3, WAV, OGG</span>
+                        </div>
+                        <div class="format-item">
+                            <span class="format-icon">📄</span>
+                            <span class="format-label">PDF, TXT, MD</span>
+                        </div>
+                        <div class="format-item">
+                            <span class="format-icon">🖼️</span>
+                            <span class="format-label">PNG, JPG, GIF</span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <!-- Playback Controls (for video/audio) -->
+        <div class="playback-controls hidden" id="playback-controls">
+            <div class="progress-bar">
+                <div class="progress-track">
+                    <div class="progress-fill" id="progress-fill"></div>
+                    <div class="progress-handle" id="progress-handle"></div>
+                </div>
+                <div class="time-display">
+                    <span id="current-time">0:00</span>
+                    <span id="total-time">0:00</span>
+                </div>
+            </div>
+            <div class="control-buttons">
+                <button class="control-btn" onclick="skipBackward()" data-i18n-title="player-previous">
+                    <span>⏪</span>
+                </button>
+                <button class="control-btn play-pause" id="play-pause-btn" onclick="togglePlayPause()" data-i18n-title="player-play">
+                    <span id="play-icon">▶</span>
+                </button>
+                <button class="control-btn" onclick="skipForward()" data-i18n-title="player-next">
+                    <span>⏩</span>
+                </button>
+                <div class="volume-control">
+                    <button class="control-btn" onclick="toggleMute()" data-i18n-title="player-volume">
+                        <span id="volume-icon">🔊</span>
+                    </button>
+                    <input type="range" id="volume-slider" min="0" max="100" value="100" onchange="setVolume(this.value)">
+                </div>
+                <div class="playback-speed">
+                    <select id="speed-select" onchange="setPlaybackSpeed(this.value)">
+                        <option value="0.5">0.5x</option>
+                        <option value="0.75">0.75x</option>
+                        <option value="1" selected>1x</option>
+                        <option value="1.25">1.25x</option>
+                        <option value="1.5">1.5x</option>
+                        <option value="2">2x</option>
+                    </select>
+                </div>
+            </div>
+        </div>
+    </main>
+
+    <!-- Playlist Panel -->
+    <aside class="playlist-panel collapsed" id="playlist-panel">
+        <button class="panel-toggle" onclick="togglePlaylistPanel()">
+            <span>📋</span>
+        </button>
+        <div class="panel-content">
+            <h3>Playlist</h3>
+            <div id="playlist-items">
+                <p class="empty-message">No playlist created</p>
+            </div>
+            <button class="btn-secondary btn-sm" onclick="createPlaylist()">
+                Create Playlist
+            </button>
+        </div>
+    </aside>
+</div>
+
+<style>
+.player-app {
+    display: flex;
+    height: 100%;
+    background: var(--bg-primary);
+    color: var(--text-primary);
+}
+
+.player-sidebar {
+    width: 280px;
+    min-width: 280px;
+    background: var(--bg-secondary);
+    border-right: 1px solid var(--border-color);
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+}
+
+.sidebar-header {
+    padding: 1rem;
+    border-bottom: 1px solid var(--border-color);
+}
+
+.sidebar-header h2 {
+    font-size: 1rem;
+    font-weight: 600;
+    margin: 0;
+}
+
+.sidebar-search {
+    padding: 0.75rem 1rem;
+}
+
+.sidebar-search input {
+    width: 100%;
+    padding: 0.5rem 0.75rem;
+    border: 1px solid var(--border-color);
+    border-radius: 6px;
+    background: var(--bg-primary);
+    color: var(--text-primary);
+    font-size: 0.875rem;
+}
+
+.sidebar-nav {
+    flex: 1;
+    overflow-y: auto;
+    padding: 0.5rem 0;
+}
+
+.nav-section {
+    margin-bottom: 1rem;
+}
+
+.nav-section h3 {
+    font-size: 0.75rem;
+    font-weight: 600;
+    color: var(--text-muted);
+    text-transform: uppercase;
+    padding: 0.5rem 1rem;
+    margin: 0;
+}
+
+.file-type-filters {
+    display: flex;
+    gap: 0.25rem;
+    padding: 0 1rem 0.5rem;
+}
+
+.filter-btn {
+    padding: 0.375rem 0.5rem;
+    border: 1px solid var(--border-color);
+    background: var(--bg-primary);
+    color: var(--text-secondary);
+    font-size: 0.75rem;
+    cursor: pointer;
+    border-radius: 4px;
+}
+
+.filter-btn.active {
+    background: var(--accent-color);
+    color: white;
+    border-color: var(--accent-color);
+}
+
+.player-main {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+}
+
+.player-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 1rem 1.5rem;
+    border-bottom: 1px solid var(--border-color);
+    background: var(--bg-secondary);
+}
+
+.file-info h1 {
+    font-size: 1.125rem;
+    font-weight: 600;
+    margin: 0 0 0.25rem 0;
+}
+
+.file-meta {
+    display: flex;
+    gap: 1rem;
+    font-size: 0.875rem;
+    color: var(--text-muted);
+}
+
+.player-actions {
+    display: flex;
+    gap: 0.5rem;
+}
+
+.player-container {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: #000;
+    position: relative;
+    overflow: hidden;
+}
+
+.media-player {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.media-player.hidden {
+    display: none;
+}
+
+#video-element {
+    max-width: 100%;
+    max-height: 100%;
+}
+
+#audio-player {
+    flex-direction: column;
+    background: var(--bg-secondary);
+}
+
+.audio-visualizer {
+    width: 200px;
+    height: 200px;
+    background: var(--bg-primary);
+    border-radius: 12px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-bottom: 2rem;
+}
+
+.album-art {
+    font-size: 4rem;
+}
+
+#audio-element {
+    width: 80%;
+    max-width: 500px;
+}
+
+#document-frame {
+    width: 100%;
+    height: 100%;
+    background: white;
+}
+
+#image-element {
+    max-width: 100%;
+    max-height: 100%;
+    object-fit: contain;
+}
+
+.slide-container {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: white;
+    color: #000;
+    padding: 2rem;
+}
+
+.slide-navigation {
+    position: absolute;
+    bottom: 1rem;
+    left: 50%;
+    transform: translateX(-50%);
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+    background: rgba(0, 0, 0, 0.7);
+    padding: 0.5rem 1rem;
+    border-radius: 9999px;
+    color: white;
+}
+
+.nav-btn {
+    width: 32px;
+    height: 32px;
+    border: none;
+    background: transparent;
+    color: white;
+    font-size: 1rem;
+    cursor: pointer;
+    border-radius: 50%;
+}
+
+.nav-btn:hover {
+    background: rgba(255, 255, 255, 0.2);
+}
+
+.empty-state {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+    color: var(--text-muted);
+    background: var(--bg-primary);
+    width: 100%;
+    height: 100%;
+}
+
+.empty-state-icon {
+    font-size: 4rem;
+    margin-bottom: 1rem;
+}
+
+.empty-state h2 {
+    color: var(--text-primary);
+    margin: 0 0 0.5rem 0;
+}
+
+.supported-formats {
+    margin-top: 2rem;
+    padding: 1.5rem;
+    background: var(--bg-secondary);
+    border-radius: 8px;
+}
+
+.supported-formats h4 {
+    margin: 0 0 1rem 0;
+    color: var(--text-primary);
+}
+
+.format-grid {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: 1rem;
+}
+
+.format-item {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+}
+
+.format-icon {
+    font-size: 1.25rem;
+}
+
+.format-label {
+    font-size: 0.875rem;
+}
+
+.playback-controls {
+    padding: 1rem 1.5rem;
+    background: var(--bg-secondary);
+    border-top: 1px solid var(--border-color);
+}
+
+.playback-controls.hidden {
+    display: none;
+}
+
+.progress-bar {
+    margin-bottom: 0.75rem;
+}
+
+.progress-track {
+    height: 6px;
+    background: var(--border-color);
+    border-radius: 3px;
+    position: relative;
+    cursor: pointer;
+}
+
+.progress-fill {
+    height: 100%;
+    background: var(--accent-color);
+    border-radius: 3px;
+    width: 0%;
+}
+
+.progress-handle {
+    position: absolute;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    width: 14px;
+    height: 14px;
+    background: var(--accent-color);
+    border-radius: 50%;
+    cursor: pointer;
+    left: 0%;
+}
+
+.time-display {
+    display: flex;
+    justify-content: space-between;
+    font-size: 0.75rem;
+    color: var(--text-muted);
+    margin-top: 0.25rem;
+}
+
+.control-buttons {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 1rem;
+}
+
+.control-btn {
+    width: 40px;
+    height: 40px;
+    border: none;
+    background: transparent;
+    color: var(--text-primary);
+    font-size: 1.25rem;
+    cursor: pointer;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.control-btn:hover {
+    background: var(--bg-hover);
+}
+
+.control-btn.play-pause {
+    width: 48px;
+    height: 48px;
+    background: var(--accent-color);
+    color: white;
+}
+
+.control-btn.play-pause:hover {
+    background: var(--accent-hover);
+}
+
+.volume-control {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+}
+
+#volume-slider {
+    width: 80px;
+    height: 4px;
+    cursor: pointer;
+}
+
+.playback-speed select {
+    padding: 0.25rem 0.5rem;
+    border: 1px solid var(--border-color);
+    border-radius: 4px;
+    background: var(--bg-primary);
+    color: var(--text-primary);
+    font-size: 0.75rem;
+}
+
+.playlist-panel {
+    width: 280px;
+    background: var(--bg-secondary);
+    border-left: 1px solid var(--border-color);
+    transition: width 0.2s;
+}
+
+.playlist-panel.collapsed {
+    width: 48px;
+}
+
+.playlist-panel.collapsed .panel-content {
+    display: none;
+}
+
+.panel-toggle {
+    width: 100%;
+    padding: 0.75rem;
+    border: none;
+    background: transparent;
+    cursor: pointer;
+    font-size: 1.25rem;
+}
+
+.panel-content {
+    padding: 1rem;
+}
+
+.panel-content h3 {
+    font-size: 0.875rem;
+    font-weight: 600;
+    margin: 0 0 1rem 0;
+}
+
+.btn-icon {
+    width: 36px;
+    height: 36px;
+    border: none;
+    background: var(--bg-primary);
+    color: var(--text-secondary);
+    cursor: pointer;
+    border-radius: 6px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 1rem;
+}
+
+.btn-icon:hover:not(:disabled) {
+    background: var(--bg-hover);
+    color: var(--text-primary);
+}
+
+.btn-icon:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+}
+
+.btn-secondary {
+    padding: 0.5rem 1rem;
+    background: var(--bg-primary);
+    color: var(--text-primary);
+    border: 1px solid var(--border-color);
+    border-radius: 6px;
+    font-size: 0.875rem;
+    cursor: pointer;
+    width: 100%;
+}
+
+.btn-sm {
+    padding: 0.375rem 0.75rem;
+    font-size: 0.75rem;
+}
+
+.loading-placeholder {
+    color: var(--text-muted);
+    font-size: 0.875rem;
+    padding: 1rem;
+    text-align: center;
+}
+
+.empty-message {
+    color: var(--text-muted);
+    font-size: 0.875rem;
+    text-align: center;
+}
+
+.file-item {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+    padding: 0.5rem 1rem;
+    cursor: pointer;
+    border-radius: 4px;
+}
+
+.file-item:hover {
+    background: var(--bg-hover);
+}
+
+.file-item.active {
+    background: var(--accent-color);
+    color: white;
+}
+
+.file-item-icon {
+    font-size: 1.25rem;
+}
+
+.file-item-name {
+    flex: 1;
+    font-size: 0.875rem;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.file-item-duration {
+    font-size: 0.75rem;
+    color: var(--text-muted);
+}
+
+@media (max-width: 1024px) {
+    .playlist-panel {
+        display: none;
+    }
+}
+
+@media (max-width: 768px) {
+    .player-sidebar {
+        position: absolute;
+        left: -280px;
+        height: 100%;
+        z-index: 50;
+        transition: left 0.2s;
+    }
+
+    .player-sidebar.open {
+        left: 0;
+    }
+
+    .format-grid {
+        grid-template-columns: 1fr;
+    }
+}
+</style>
+
+<script>
+let currentFile = null;
+let currentPlayer = null;
+let currentSlide = 0;
+let totalSlides = 1;
+
+function loadFile(path, type, name) {
+    hideAllPlayers();
+    currentFile = { path, type, name };
+
+    document.getElementById('file-name').textContent = name;
+    document.getElementById('btn-download').disabled = false;
+    document.getElementById('btn-share').disabled = false;
+    document.getElementById('btn-fullscreen').disabled = false;
+
+    const streamUrl = `/api/player/default/stream/${path}`;
+
+    switch (type) {
+        case 'video':
+            showVideoPlayer(streamUrl);
+            break;
+        case 'audio':
+            showAudioPlayer(streamUrl);
+            break;
+        case 'document':
+        case 'pdf':
+            showDocumentViewer(streamUrl);
+            break;
+        case 'image':
+            showImageViewer(streamUrl);
+            break;
+        case 'presentation':
+            showPresentationViewer(streamUrl);
+            break;
+        default:
+            showDocumentViewer(streamUrl);
+    }
+}
+
+function hideAllPlayers() {
+    document.getElementById('video-player').classList.add('hidden');
+    document.getElementById('audio-player').classList.add('hidden');
+    document.getElementById('document-viewer').classList.add('hidden');
+    document.getElementById('image-viewer').classList.add('hidden');
+    document.getElementById('presentation-viewer').classList.add('hidden');
+    document.getElementById('empty-state').classList.add('hidden');
+    document.getElementById('playback-controls').classList.add('hidden');
+}
+
+function showVideoPlayer(url) {
+    const player = document.getElementById('video-player');
+    const video = document.getElementById('video-element');
+    video.src = url;
+    player.classList.remove('hidden');
+    document.getElementById('playback-controls').classList.remove('hidden');
+    currentPlayer = video;
+    setupMediaEvents(video);
+}
+
+function showAudioPlayer(url) {
+    const player = document.getElementById('audio-player');
+    const audio = document.getElementById('audio-element');
+    audio.src = url;
+    player.classList.remove('hidden');
+    document.getElementById('playback-controls').classList.remove('hidden');
+    currentPlayer = audio;
+    setupMediaEvents(audio);
+}
+
+function showDocumentViewer(url) {
+    const viewer = document.getElementById('document-viewer');
+    const frame = document.getElementById('document-frame');
+    frame.src = url;
+    viewer.classList.remove('hidden');
+}
+
+function showImageViewer(url) {
+    const viewer = document.getElementById('image-viewer');
+    const img = document.getElementById('image-element');
+    img.src = url;
+    viewer.classList.remove('hidden');
+}
+
+function showPresentationViewer(url) {
+    const viewer = document.getElementById('presentation-viewer');
+    viewer.classList.remove('hidden');
+    currentSlide = 0;
+    updateSlideCounter();
+}
+
+function setupMediaEvents(media) {
+    media.addEventListener('timeupdate', updateProgress);
+    media.addEventListener('loadedmetadata', function() {
+        document.getElementById('total-time').textContent = formatTime(media.duration);
+        document.getElementById('file-duration').textContent = formatTime(media.duration);
+    });
+    media.addEventListener('play', function() {
+        document.getElementById('play-icon').textContent = '⏸';
+    });
+    media.addEventListener('pause', function() {
+        document.getElementById('play-icon').textContent = '▶';
+    });
+}
+
+function updateProgress() {
+    if (!currentPlayer) return;
+    const progress = (currentPlayer.currentTime / currentPlayer.duration) * 100;
+    document.getElementById('progress-fill').style.width = progress + '%';
+    document.getElementById('progress-handle').style.left = progress + '%';
+    document.getElementById('current-time').textContent = formatTime(currentPlayer.currentTime);
+}
+
+function formatTime(seconds) {
+    if (isNaN(seconds)) return '0:00';
+    const mins = Math.floor(seconds / 60);
+    const secs = Math.floor(seconds % 60);
+    return `${mins}:${secs.toString().padStart(2, '0')}`;
+}
+
+function togglePlayPause() {
+    if (!currentPlayer) return;
+    if (currentPlayer.paused) {
+        currentPlayer.play();
+    } else {
+        currentPlayer.pause();
+    }
+}
+
+function skipBackward() {
+    if (!currentPlayer) return;
+    currentPlayer.currentTime = Math.max(0, currentPlayer.currentTime - 10);
+}
+
+function skipForward() {
+    if (!currentPlayer) return;
+    currentPlayer.currentTime = Math.min(currentPlayer.duration, currentPlayer.currentTime + 10);
+}
+
+function toggleMute() {
+    if (!currentPlayer) return;
+    currentPlayer.muted = !currentPlayer.muted;
+    document.getElementById('volume-icon').textContent = currentPlayer.muted ? '🔇' : '🔊';
+}
+
+function setVolume(value) {
+    if (!currentPlayer) return;
+    currentPlayer.volume = value / 100;
+    document.getElementById('volume-icon').textContent = value == 0 ? '🔇' : '🔊';
+}
+
+function setPlaybackSpeed(speed) {
+    if (!currentPlayer) return;
+    currentPlayer.playbackRate = parseFloat(speed);
+}
+
+function prevSlide() {
+    if (currentSlide > 0) {
+        currentSlide--;
+        updateSlideCounter();
+    }
+}
+
+function nextSlide() {
+    if (currentSlide < totalSlides - 1) {
+        currentSlide++;
+        updateSlideCounter();
+    }
+}
+
+function updateSlideCounter() {
+    document.getElementById('slide-counter').textContent = `${currentSlide + 1} / ${totalSlides}`;
+}
+
+function toggleFullscreen() {
+    const container = document.getElementById('player-container');
+    if (document.fullscreenElement) {
+        document.exitFullscreen();
+    } else {
+        container.requestFullscreen();
+    }
+}
+
+function downloadFile() {
+    if (!currentFile) return;
+    const link = document.createElement('a');
+    link.href = `/api/player/default/stream/${currentFile.path}`;
+    link.download = currentFile.name;
+    link.click();
+}
+
+function shareFile() {
+    if (!currentFile) return;
+    const url = `${window.location.origin}/player?file=${encodeURIComponent(currentFile.path)}`;
+    navigator.clipboard.writeText(url);
+    alert('Link copied to clipboard!');
+}
+
+function filterFiles(type) {
+    document.querySelectorAll('.filter-btn').forEach(btn => {
+        btn.classList.toggle('active', btn.dataset.type === type);
+    });
+
+    const typeParam = type === 'all' ? 'media' : type;
+    htmx.ajax('GET', `/api/drive/list?types=${typeParam}`, {
+        target: '#file-list',
+        swap: 'innerHTML'
+    });
+}
+
+function togglePlaylistPanel() {
+    const panel = document.getElementById('playlist-panel');
+    panel.classList.toggle('collapsed');
+}
+
+function createPlaylist() {
+    alert('Playlist feature coming soon!');
+}
+
+document.addEventListener('keydown', function(e) {
+    if (!currentPlayer) return;
+
+    switch (e.key) {
+        case ' ':
+            e.preventDefault();
+            togglePlayPause();
+            break;
+        case 'ArrowLeft':
+            skipBackward();
+            break;
+        case 'ArrowRight':
+            skipForward();
+            break;
+        case 'ArrowUp':
+            e.preventDefault();
+            setVolume(Math.min(100, currentPlayer.volume * 100 + 10));
+            break;
+        case 'ArrowDown':
+            e.preventDefault();
+            setVolume(Math.max(0, currentPlayer.volume * 100 - 10));
+            break;
+        case 'f':
+            toggleFullscreen();
+            break;
+        case 'm':
+            toggleMute();
+            break;
+        case 'Escape':
+            if (document.fullscreenElement) {
+                document.exitFullscreen();
+            }
+            break;
+    }
+});
+
+document.querySelector('.progress-track').addEventListener('click', function(e) {
+    if (!currentPlayer) return;
+    const rect = this.getBoundingClientRect();
+    const percent = (e.clientX - rect.left) / rect.width;
+    currentPlayer.currentTime = percent * currentPlayer.duration;
+});
+</script>
diff --git a/ui/suite/project/project.html b/ui/suite/project/project.html
new file mode 100644
index 0000000..fe2c0e3
--- /dev/null
+++ b/ui/suite/project/project.html
@@ -0,0 +1,758 @@
+<!-- =============================================================================
+     PROJECT APP - Project Management with Gantt Chart
+     Respects Theme Manager - No hardcoded theme
+     ============================================================================= -->
+
+<div class="project-app">
+    <!-- Sidebar -->
+    <aside class="project-sidebar">
+        <div class="sidebar-header">
+            <h2 data-i18n="project-title">Projects</h2>
+            <button
+                class="btn-icon"
+                id="new-project-btn"
+                title="New Project"
+                hx-get="/api/ui/project/new"
+                hx-target="#project-modal"
+                hx-swap="innerHTML"
+            >
+                <span>+</span>
+            </button>
+        </div>
+
+        <div class="sidebar-search">
+            <input
+                type="search"
+                placeholder="Search projects..."
+                hx-get="/projects"
+                hx-trigger="keyup changed delay:300ms"
+                hx-target="#project-list"
+                hx-swap="innerHTML"
+                name="q"
+            />
+        </div>
+
+        <nav class="sidebar-nav">
+            <div
+                id="project-list"
+                hx-get="/projects"
+                hx-trigger="load, projectCreated from:body, projectDeleted from:body"
+                hx-swap="innerHTML"
+            >
+                <div class="loading-placeholder">Loading projects...</div>
+            </div>
+        </nav>
+    </aside>
+
+    <!-- Main Content -->
+    <main class="project-main">
+        <!-- Project Header -->
+        <header class="project-header">
+            <div class="project-info">
+                <h1 id="project-name">Select a Project</h1>
+                <div class="project-meta">
+                    <span class="meta-item" id="project-status">
+                        <span class="status-dot"></span>
+                        <span>No project selected</span>
+                    </span>
+                    <span class="meta-item" id="project-progress">
+                        <span class="progress-label">Progress:</span>
+                        <span class="progress-value">--</span>
+                    </span>
+                </div>
+            </div>
+            <div class="project-actions">
+                <div class="view-toggle">
+                    <button class="view-btn active" data-view="gantt" onclick="switchView('gantt')">
+                        <span>📊</span> Gantt
+                    </button>
+                    <button class="view-btn" data-view="timeline" onclick="switchView('timeline')">
+                        <span>📅</span> Timeline
+                    </button>
+                    <button class="view-btn" data-view="list" onclick="switchView('list')">
+                        <span>📋</span> List
+                    </button>
+                    <button class="view-btn" data-view="board" onclick="switchView('board')">
+                        <span>📌</span> Board
+                    </button>
+                </div>
+                <button
+                    class="btn-primary"
+                    id="add-task-btn"
+                    hx-get="/api/ui/project/task/new"
+                    hx-target="#project-modal"
+                    hx-swap="innerHTML"
+                    disabled
+                >
+                    <span>+</span> Add Task
+                </button>
+            </div>
+        </header>
+
+        <!-- View Containers -->
+        <div class="project-views">
+            <!-- Gantt Chart View -->
+            <div id="gantt-view" class="view-container active">
+                <div class="gantt-toolbar">
+                    <div class="gantt-zoom">
+                        <button class="zoom-btn" onclick="zoomGantt('day')">Day</button>
+                        <button class="zoom-btn active" onclick="zoomGantt('week')">Week</button>
+                        <button class="zoom-btn" onclick="zoomGantt('month')">Month</button>
+                        <button class="zoom-btn" onclick="zoomGantt('quarter')">Quarter</button>
+                    </div>
+                    <div class="gantt-filters">
+                        <label>
+                            <input type="checkbox" id="show-critical" checked onchange="toggleCriticalPath()">
+                            <span data-i18n="project-critical-path">Show Critical Path</span>
+                        </label>
+                        <label>
+                            <input type="checkbox" id="show-milestones" checked onchange="toggleMilestones()">
+                            <span data-i18n="project-milestones">Show Milestones</span>
+                        </label>
+                    </div>
+                    <button class="btn-secondary" onclick="fitGanttToScreen()">
+                        Fit to Screen
+                    </button>
+                </div>
+
+                <div class="gantt-container">
+                    <div class="gantt-table">
+                        <div class="gantt-table-header">
+                            <div class="col-name">Task Name</div>
+                            <div class="col-start">Start</div>
+                            <div class="col-end">End</div>
+                            <div class="col-duration">Duration</div>
+                            <div class="col-progress">Progress</div>
+                            <div class="col-assignee">Assignee</div>
+                        </div>
+                        <div
+                            id="gantt-table-body"
+                            class="gantt-table-body"
+                            hx-get="/api/ui/project/tasks"
+                            hx-trigger="projectSelected from:body"
+                            hx-swap="innerHTML"
+                        >
+                            <div class="empty-state-inline">
+                                Select a project to view tasks
+                            </div>
+                        </div>
+                    </div>
+
+                    <div class="gantt-chart">
+                        <div class="gantt-timeline-header" id="gantt-timeline-header">
+                            <!-- Timeline headers generated by JS -->
+                        </div>
+                        <div
+                            id="gantt-chart-body"
+                            class="gantt-chart-body"
+                            hx-get="/api/ui/project/gantt"
+                            hx-trigger="projectSelected from:body"
+                            hx-swap="innerHTML"
+                        >
+                            <div class="empty-state-inline">
+                                <p>No tasks to display</p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Timeline View -->
+            <div id="timeline-view" class="view-container">
+                <div
+                    class="timeline-container"
+                    hx-get="/api/ui/project/timeline"
+                    hx-trigger="projectSelected from:body"
+                    hx-swap="innerHTML"
+                >
+                    <div class="empty-state-inline">Select a project to view timeline</div>
+                </div>
+            </div>
+
+            <!-- List View -->
+            <div id="list-view" class="view-container">
+                <div
+                    class="list-container"
+                    hx-get="/api/ui/project/tasks/list"
+                    hx-trigger="projectSelected from:body"
+                    hx-swap="innerHTML"
+                >
+                    <div class="empty-state-inline">Select a project to view tasks</div>
+                </div>
+            </div>
+
+            <!-- Board View -->
+            <div id="board-view" class="view-container">
+                <div class="board-columns">
+                    <div class="board-column" data-status="not-started">
+                        <h3>Not Started</h3>
+                        <div class="column-tasks" hx-get="/api/ui/project/tasks?status=not_started" hx-trigger="projectSelected from:body" hx-swap="innerHTML"></div>
+                    </div>
+                    <div class="board-column" data-status="in-progress">
+                        <h3>In Progress</h3>
+                        <div class="column-tasks" hx-get="/api/ui/project/tasks?status=in_progress" hx-trigger="projectSelected from:body" hx-swap="innerHTML"></div>
+                    </div>
+                    <div class="board-column" data-status="completed">
+                        <h3>Completed</h3>
+                        <div class="column-tasks" hx-get="/api/ui/project/tasks?status=completed" hx-trigger="projectSelected from:body" hx-swap="innerHTML"></div>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <!-- Empty State -->
+        <div id="project-empty" class="empty-state">
+            <div class="empty-state-icon">📋</div>
+            <h2>No Project Selected</h2>
+            <p>Select a project from the sidebar or create a new one</p>
+            <button
+                class="btn-primary"
+                hx-get="/api/ui/project/new"
+                hx-target="#project-modal"
+                hx-swap="innerHTML"
+            >
+                <span>+</span> Create Project
+            </button>
+        </div>
+    </main>
+
+    <!-- Details Panel -->
+    <aside class="details-panel collapsed" id="details-panel">
+        <button class="panel-toggle" onclick="toggleDetailsPanel()">
+            <span>ℹ️</span>
+        </button>
+        <div class="panel-content">
+            <div id="task-details">
+                <p class="empty-message">Select a task to view details</p>
+            </div>
+        </div>
+    </aside>
+
+    <!-- Modal Container -->
+    <div id="project-modal" class="modal-container"></div>
+</div>
+
+<style>
+.project-app {
+    display: flex;
+    height: 100%;
+    background: var(--bg-primary);
+    color: var(--text-primary);
+}
+
+.project-sidebar {
+    width: 280px;
+    min-width: 280px;
+    background: var(--bg-secondary);
+    border-right: 1px solid var(--border-color);
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+}
+
+.sidebar-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 1rem;
+    border-bottom: 1px solid var(--border-color);
+}
+
+.sidebar-header h2 {
+    font-size: 1rem;
+    font-weight: 600;
+    margin: 0;
+}
+
+.sidebar-search {
+    padding: 0.75rem 1rem;
+}
+
+.sidebar-search input {
+    width: 100%;
+    padding: 0.5rem 0.75rem;
+    border: 1px solid var(--border-color);
+    border-radius: 6px;
+    background: var(--bg-primary);
+    color: var(--text-primary);
+    font-size: 0.875rem;
+}
+
+.sidebar-nav {
+    flex: 1;
+    overflow-y: auto;
+    padding: 0.5rem;
+}
+
+.project-main {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+}
+
+.project-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 1rem 1.5rem;
+    border-bottom: 1px solid var(--border-color);
+    background: var(--bg-secondary);
+}
+
+.project-info h1 {
+    font-size: 1.25rem;
+    font-weight: 600;
+    margin: 0 0 0.25rem 0;
+}
+
+.project-meta {
+    display: flex;
+    gap: 1.5rem;
+    font-size: 0.875rem;
+    color: var(--text-muted);
+}
+
+.status-dot {
+    display: inline-block;
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    background: var(--text-muted);
+    margin-right: 0.375rem;
+}
+
+.project-actions {
+    display: flex;
+    gap: 1rem;
+    align-items: center;
+}
+
+.view-toggle {
+    display: flex;
+    background: var(--bg-primary);
+    border-radius: 6px;
+    padding: 2px;
+    border: 1px solid var(--border-color);
+}
+
+.view-btn {
+    display: flex;
+    align-items: center;
+    gap: 0.375rem;
+    padding: 0.5rem 0.75rem;
+    border: none;
+    background: transparent;
+    color: var(--text-secondary);
+    font-size: 0.875rem;
+    cursor: pointer;
+    border-radius: 4px;
+    transition: all 0.15s;
+}
+
+.view-btn:hover {
+    color: var(--text-primary);
+}
+
+.view-btn.active {
+    background: var(--accent-color);
+    color: white;
+}
+
+.project-views {
+    flex: 1;
+    overflow: hidden;
+    position: relative;
+}
+
+.view-container {
+    display: none;
+    height: 100%;
+    overflow: auto;
+}
+
+.view-container.active {
+    display: flex;
+    flex-direction: column;
+}
+
+/* Gantt Chart Styles */
+.gantt-toolbar {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0.75rem 1rem;
+    background: var(--bg-secondary);
+    border-bottom: 1px solid var(--border-color);
+}
+
+.gantt-zoom {
+    display: flex;
+    gap: 0.25rem;
+}
+
+.zoom-btn {
+    padding: 0.375rem 0.75rem;
+    border: 1px solid var(--border-color);
+    background: var(--bg-primary);
+    color: var(--text-secondary);
+    font-size: 0.75rem;
+    cursor: pointer;
+    border-radius: 4px;
+}
+
+.zoom-btn.active {
+    background: var(--accent-color);
+    color: white;
+    border-color: var(--accent-color);
+}
+
+.gantt-filters {
+    display: flex;
+    gap: 1rem;
+}
+
+.gantt-filters label {
+    display: flex;
+    align-items: center;
+    gap: 0.375rem;
+    font-size: 0.875rem;
+    color: var(--text-secondary);
+    cursor: pointer;
+}
+
+.gantt-container {
+    flex: 1;
+    display: flex;
+    overflow: hidden;
+}
+
+.gantt-table {
+    width: 400px;
+    min-width: 400px;
+    border-right: 2px solid var(--border-color);
+    overflow-y: auto;
+}
+
+.gantt-table-header {
+    display: grid;
+    grid-template-columns: 1fr 80px 80px 70px 70px 90px;
+    padding: 0.75rem 0.5rem;
+    background: var(--bg-secondary);
+    border-bottom: 1px solid var(--border-color);
+    font-size: 0.75rem;
+    font-weight: 600;
+    color: var(--text-muted);
+    text-transform: uppercase;
+    position: sticky;
+    top: 0;
+    z-index: 10;
+}
+
+.gantt-table-body {
+    font-size: 0.875rem;
+}
+
+.gantt-chart {
+    flex: 1;
+    overflow: auto;
+    position: relative;
+}
+
+.gantt-timeline-header {
+    display: flex;
+    background: var(--bg-secondary);
+    border-bottom: 1px solid var(--border-color);
+    position: sticky;
+    top: 0;
+    z-index: 10;
+    min-width: max-content;
+}
+
+.gantt-chart-body {
+    position: relative;
+    min-height: 200px;
+}
+
+/* Board View */
+.board-columns {
+    display: flex;
+    gap: 1rem;
+    padding: 1rem;
+    height: 100%;
+    overflow-x: auto;
+}
+
+.board-column {
+    width: 300px;
+    min-width: 300px;
+    background: var(--bg-secondary);
+    border-radius: 8px;
+    display: flex;
+    flex-direction: column;
+}
+
+.board-column h3 {
+    padding: 1rem;
+    margin: 0;
+    font-size: 0.875rem;
+    font-weight: 600;
+    border-bottom: 1px solid var(--border-color);
+}
+
+.column-tasks {
+    flex: 1;
+    padding: 0.5rem;
+    overflow-y: auto;
+}
+
+/* Details Panel */
+.details-panel {
+    width: 320px;
+    background: var(--bg-secondary);
+    border-left: 1px solid var(--border-color);
+    transition: width 0.2s;
+}
+
+.details-panel.collapsed {
+    width: 48px;
+}
+
+.details-panel.collapsed .panel-content {
+    display: none;
+}
+
+.panel-toggle {
+    width: 100%;
+    padding: 0.75rem;
+    border: none;
+    background: transparent;
+    cursor: pointer;
+    font-size: 1.25rem;
+}
+
+.panel-content {
+    padding: 1rem;
+    overflow-y: auto;
+    height: calc(100% - 48px);
+}
+
+/* Empty State */
+.empty-state {
+    display: none;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+    text-align: center;
+    color: var(--text-muted);
+}
+
+.project-app:not(.has-project) .project-views {
+    display: none;
+}
+
+.project-app:not(.has-project) .empty-state {
+    display: flex;
+}
+
+.empty-state-icon {
+    font-size: 4rem;
+    margin-bottom: 1rem;
+}
+
+.empty-state-inline {
+    padding: 2rem;
+    text-align: center;
+    color: var(--text-muted);
+}
+
+/* Buttons */
+.btn-icon {
+    width: 28px;
+    height: 28px;
+    border: none;
+    background: transparent;
+    color: var(--text-secondary);
+    cursor: pointer;
+    border-radius: 4px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.btn-icon:hover {
+    background: var(--bg-hover);
+    color: var(--text-primary);
+}
+
+.btn-primary {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.5rem;
+    padding: 0.5rem 1rem;
+    background: var(--accent-color);
+    color: white;
+    border: none;
+    border-radius: 6px;
+    font-size: 0.875rem;
+    font-weight: 500;
+    cursor: pointer;
+}
+
+.btn-primary:hover {
+    background: var(--accent-hover);
+}
+
+.btn-primary:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+}
+
+.btn-secondary {
+    padding: 0.375rem 0.75rem;
+    background: var(--bg-primary);
+    color: var(--text-primary);
+    border: 1px solid var(--border-color);
+    border-radius: 6px;
+    font-size: 0.875rem;
+    cursor: pointer;
+}
+
+.loading-placeholder {
+    color: var(--text-muted);
+    font-size: 0.875rem;
+    padding: 1rem;
+    text-align: center;
+}
+
+.modal-container:empty {
+    display: none;
+}
+
+@media (max-width: 1024px) {
+    .gantt-table {
+        width: 300px;
+        min-width: 300px;
+    }
+
+    .gantt-table-header {
+        grid-template-columns: 1fr 70px 70px 60px;
+    }
+
+    .gantt-table-header .col-progress,
+    .gantt-table-header .col-assignee {
+        display: none;
+    }
+}
+
+@media (max-width: 768px) {
+    .project-sidebar {
+        position: absolute;
+        left: -280px;
+        height: 100%;
+        z-index: 50;
+        transition: left 0.2s;
+    }
+
+    .project-sidebar.open {
+        left: 0;
+    }
+
+    .details-panel {
+        display: none;
+    }
+
+    .view-toggle {
+        display: none;
+    }
+}
+</style>
+
+<script>
+let currentView = 'gantt';
+let currentZoom = 'week';
+
+function switchView(view) {
+    currentView = view;
+
+    document.querySelectorAll('.view-btn').forEach(btn => {
+        btn.classList.toggle('active', btn.dataset.view === view);
+    });
+
+    document.querySelectorAll('.view-container').forEach(container => {
+        container.classList.toggle('active', container.id === `${view}-view`);
+    });
+}
+
+function zoomGantt(level) {
+    currentZoom = level;
+
+    document.querySelectorAll('.zoom-btn').forEach(btn => {
+        btn.classList.toggle('active', btn.textContent.toLowerCase() === level);
+    });
+
+    htmx.trigger('#gantt-chart-body', 'ganttZoomChanged');
+}
+
+function toggleCriticalPath() {
+    const show = document.getElementById('show-critical').checked;
+    document.querySelectorAll('.gantt-bar.critical').forEach(bar => {
+        bar.style.display = show ? '' : 'none';
+    });
+}
+
+function toggleMilestones() {
+    const show = document.getElementById('show-milestones').checked;
+    document.querySelectorAll('.gantt-milestone').forEach(ms => {
+        ms.style.display = show ? '' : 'none';
+    });
+}
+
+function fitGanttToScreen() {
+    const container = document.querySelector('.gantt-chart');
+    if (container) {
+        container.scrollLeft = 0;
+    }
+}
+
+function toggleDetailsPanel() {
+    const panel = document.getElementById('details-panel');
+    panel.classList.toggle('collapsed');
+}
+
+function selectProject(projectId) {
+    document.querySelector('.project-app').classList.add('has-project');
+    document.getElementById('add-task-btn').disabled = false;
+    htmx.trigger(document.body, 'projectSelected', { projectId: projectId });
+}
+
+document.addEventListener('DOMContentLoaded', function() {
+    generateTimelineHeaders();
+});
+
+function generateTimelineHeaders() {
+    const header = document.getElementById('gantt-timeline-header');
+    if (!header) return;
+
+    const today = new Date();
+    let html = '';
+
+    for (let i = 0; i < 30; i++) {
+        const date = new Date(today);
+        date.setDate(date.getDate() + i);
+        const day = date.getDate();
+        const dayName = date.toLocaleDateString('en-US', { weekday: 'short' });
+        const isWeekend = date.getDay() === 0 || date.getDay() === 6;
+
+        html += `
+            <div class="timeline-day ${isWeekend ? 'weekend' : ''}" style="width: 40px; text-align: center; padding: 0.5rem 0; border-right: 1px solid var(--border-color);">
+                <div style="font-size: 0.625rem; color: var(--text-muted);">${dayName}</div>
+                <div style="font-size: 0.75rem; font-weight: 600;">${day}</div>
+            </div>
+        `;
+    }
+
+    header.innerHTML = html;
+}
+</script>
diff --git a/ui/suite/workspace/workspace.html b/ui/suite/workspace/workspace.html
new file mode 100644
index 0000000..0a9df15
--- /dev/null
+++ b/ui/suite/workspace/workspace.html
@@ -0,0 +1,535 @@
+<!-- =============================================================================
+     WORKSPACE APP - Notion-style Pages & Blocks
+     Respects Theme Manager - No hardcoded theme
+     ============================================================================= -->
+
+<div class="workspace-app">
+    <!-- Sidebar -->
+    <aside class="workspace-sidebar">
+        <div class="sidebar-header">
+            <h2 data-i18n="workspace-title">Workspace</h2>
+            <button
+                class="btn-icon"
+                id="new-page-btn"
+                title="New Page"
+                hx-post="/api/workspaces/current/pages"
+                hx-vals='{"title": "Untitled"}'
+                hx-target="#page-tree"
+                hx-swap="beforeend"
+            >
+                <span>+</span>
+            </button>
+        </div>
+
+        <div class="sidebar-search">
+            <input
+                type="search"
+                placeholder="Search pages..."
+                data-i18n-placeholder="workspace-search-pages"
+                hx-get="/api/workspaces/current/search"
+                hx-trigger="keyup changed delay:300ms"
+                hx-target="#search-results"
+                hx-swap="innerHTML"
+                name="q"
+            />
+            <div id="search-results" class="search-results"></div>
+        </div>
+
+        <nav class="sidebar-nav">
+            <div class="nav-section">
+                <h3 data-i18n="workspace-recent">Recent</h3>
+                <div
+                    id="recent-pages"
+                    hx-get="/api/workspaces/current/pages?filter=recent"
+                    hx-trigger="load"
+                    hx-swap="innerHTML"
+                >
+                    <div class="loading-placeholder">Loading...</div>
+                </div>
+            </div>
+
+            <div class="nav-section">
+                <h3 data-i18n="workspace-favorites">Favorites</h3>
+                <div
+                    id="favorite-pages"
+                    hx-get="/api/workspaces/current/pages?filter=favorites"
+                    hx-trigger="load"
+                    hx-swap="innerHTML"
+                >
+                    <div class="loading-placeholder">Loading...</div>
+                </div>
+            </div>
+
+            <div class="nav-section">
+                <h3>Pages</h3>
+                <div
+                    id="page-tree"
+                    hx-get="/api/workspaces/current/pages"
+                    hx-trigger="load, pageCreated from:body, pageDeleted from:body"
+                    hx-swap="innerHTML"
+                >
+                    <div class="loading-placeholder">Loading...</div>
+                </div>
+            </div>
+        </nav>
+
+        <div class="sidebar-footer">
+            <button class="sidebar-btn" data-i18n="workspace-templates">
+                <span class="btn-icon">📄</span>
+                Templates
+            </button>
+            <button class="sidebar-btn" data-i18n="workspace-trash">
+                <span class="btn-icon">🗑️</span>
+                Trash
+            </button>
+            <button
+                class="sidebar-btn"
+                hx-get="/api/workspaces/current/settings"
+                hx-target="#workspace-modal"
+                hx-swap="innerHTML"
+                data-i18n="workspace-settings"
+            >
+                <span class="btn-icon">⚙️</span>
+                Settings
+            </button>
+        </div>
+    </aside>
+
+    <!-- Main Content -->
+    <main class="workspace-main">
+        <div id="page-content" class="page-content">
+            <!-- Page Header -->
+            <header class="page-header">
+                <div class="page-icon" id="page-icon">📄</div>
+                <input
+                    type="text"
+                    class="page-title"
+                    id="page-title"
+                    value="Untitled"
+                    placeholder="Untitled"
+                    hx-put="/api/pages/current"
+                    hx-trigger="blur changed"
+                    hx-vals='js:{title: document.getElementById("page-title").value}'
+                />
+                <div class="page-meta">
+                    <span class="meta-item">Last edited: just now</span>
+                </div>
+            </header>
+
+            <!-- Page Body - Block Editor -->
+            <div class="page-body">
+                <div
+                    id="blocks-container"
+                    class="blocks-container"
+                    hx-get="/api/pages/current/blocks"
+                    hx-trigger="load"
+                    hx-swap="innerHTML"
+                >
+                    <!-- Empty state -->
+                    <div class="empty-page">
+                        <p>Press <kbd>/</kbd> for commands or start typing...</p>
+                    </div>
+                </div>
+
+                <!-- Slash Command Menu -->
+                <div id="slash-menu" class="slash-menu hidden">
+                    <div class="slash-menu-header">
+                        <span data-i18n="paper-commands">Commands</span>
+                    </div>
+                    <div
+                        class="slash-menu-items"
+                        hx-get="/api/workspaces/commands"
+                        hx-trigger="load"
+                        hx-swap="innerHTML"
+                    >
+                        <!-- Commands loaded dynamically -->
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <!-- Empty State (no page selected) -->
+        <div id="empty-state" class="empty-state hidden">
+            <div class="empty-state-icon">📝</div>
+            <h2>Select a page or create a new one</h2>
+            <p>Your workspace pages will appear in the sidebar</p>
+            <button
+                class="btn-primary"
+                hx-post="/api/workspaces/current/pages"
+                hx-vals='{"title": "Untitled"}'
+                hx-target="#page-tree"
+                hx-swap="beforeend"
+            >
+                <span>+</span> New Page
+            </button>
+        </div>
+    </main>
+
+    <!-- Members Panel (collapsible) -->
+    <aside class="members-panel collapsed" id="members-panel">
+        <button class="panel-toggle" onclick="toggleMembersPanel()">
+            <span>👥</span>
+        </button>
+        <div class="panel-content">
+            <h3 data-i18n="workspace-members">Members</h3>
+            <div
+                id="members-list"
+                hx-get="/api/workspaces/current/members"
+                hx-trigger="load"
+                hx-swap="innerHTML"
+            >
+                <div class="loading-placeholder">Loading...</div>
+            </div>
+            <button
+                class="btn-secondary btn-sm"
+                hx-get="/api/workspaces/current/invite"
+                hx-target="#workspace-modal"
+                hx-swap="innerHTML"
+            >
+                Invite Members
+            </button>
+        </div>
+    </aside>
+
+    <!-- Modal Container -->
+    <div id="workspace-modal" class="modal-container"></div>
+</div>
+
+<style>
+.workspace-app {
+    display: flex;
+    height: 100%;
+    background: var(--bg-primary);
+    color: var(--text-primary);
+}
+
+.workspace-sidebar {
+    width: 260px;
+    min-width: 260px;
+    background: var(--bg-secondary);
+    border-right: 1px solid var(--border-color);
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+}
+
+.sidebar-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 1rem;
+    border-bottom: 1px solid var(--border-color);
+}
+
+.sidebar-header h2 {
+    font-size: 1rem;
+    font-weight: 600;
+    margin: 0;
+}
+
+.sidebar-search {
+    padding: 0.75rem 1rem;
+    position: relative;
+}
+
+.sidebar-search input {
+    width: 100%;
+    padding: 0.5rem 0.75rem;
+    border: 1px solid var(--border-color);
+    border-radius: 6px;
+    background: var(--bg-primary);
+    color: var(--text-primary);
+    font-size: 0.875rem;
+}
+
+.sidebar-nav {
+    flex: 1;
+    overflow-y: auto;
+    padding: 0.5rem 0;
+}
+
+.nav-section {
+    margin-bottom: 1rem;
+}
+
+.nav-section h3 {
+    font-size: 0.75rem;
+    font-weight: 600;
+    color: var(--text-muted);
+    text-transform: uppercase;
+    padding: 0.5rem 1rem;
+    margin: 0;
+}
+
+.sidebar-footer {
+    padding: 0.5rem;
+    border-top: 1px solid var(--border-color);
+}
+
+.sidebar-btn {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    width: 100%;
+    padding: 0.5rem 0.75rem;
+    border: none;
+    background: transparent;
+    color: var(--text-secondary);
+    font-size: 0.875rem;
+    cursor: pointer;
+    border-radius: 4px;
+    text-align: left;
+}
+
+.sidebar-btn:hover {
+    background: var(--bg-hover);
+    color: var(--text-primary);
+}
+
+.workspace-main {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+}
+
+.page-content {
+    flex: 1;
+    overflow-y: auto;
+    max-width: 900px;
+    margin: 0 auto;
+    padding: 2rem;
+    width: 100%;
+}
+
+.page-header {
+    margin-bottom: 2rem;
+}
+
+.page-icon {
+    font-size: 3rem;
+    margin-bottom: 0.5rem;
+    cursor: pointer;
+}
+
+.page-title {
+    font-size: 2.5rem;
+    font-weight: 700;
+    border: none;
+    background: transparent;
+    color: var(--text-primary);
+    width: 100%;
+    outline: none;
+}
+
+.page-title::placeholder {
+    color: var(--text-muted);
+}
+
+.page-meta {
+    font-size: 0.875rem;
+    color: var(--text-muted);
+    margin-top: 0.5rem;
+}
+
+.blocks-container {
+    min-height: 200px;
+}
+
+.empty-page {
+    color: var(--text-muted);
+    padding: 1rem 0;
+}
+
+.empty-page kbd {
+    background: var(--bg-secondary);
+    padding: 0.125rem 0.375rem;
+    border-radius: 4px;
+    font-family: monospace;
+    border: 1px solid var(--border-color);
+}
+
+.slash-menu {
+    position: absolute;
+    background: var(--bg-primary);
+    border: 1px solid var(--border-color);
+    border-radius: 8px;
+    box-shadow: var(--shadow-lg);
+    min-width: 280px;
+    max-height: 400px;
+    overflow-y: auto;
+    z-index: 100;
+}
+
+.slash-menu.hidden {
+    display: none;
+}
+
+.slash-menu-header {
+    padding: 0.75rem 1rem;
+    font-size: 0.75rem;
+    font-weight: 600;
+    color: var(--text-muted);
+    text-transform: uppercase;
+    border-bottom: 1px solid var(--border-color);
+}
+
+.members-panel {
+    width: 280px;
+    background: var(--bg-secondary);
+    border-left: 1px solid var(--border-color);
+    transition: width 0.2s;
+}
+
+.members-panel.collapsed {
+    width: 48px;
+}
+
+.members-panel.collapsed .panel-content {
+    display: none;
+}
+
+.panel-toggle {
+    width: 100%;
+    padding: 0.75rem;
+    border: none;
+    background: transparent;
+    cursor: pointer;
+    font-size: 1.25rem;
+}
+
+.panel-content {
+    padding: 1rem;
+}
+
+.panel-content h3 {
+    font-size: 0.875rem;
+    font-weight: 600;
+    margin: 0 0 1rem 0;
+}
+
+.empty-state {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+    text-align: center;
+    color: var(--text-muted);
+}
+
+.empty-state.hidden {
+    display: none;
+}
+
+.empty-state-icon {
+    font-size: 4rem;
+    margin-bottom: 1rem;
+}
+
+.btn-icon {
+    width: 28px;
+    height: 28px;
+    border: none;
+    background: transparent;
+    color: var(--text-secondary);
+    cursor: pointer;
+    border-radius: 4px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.btn-icon:hover {
+    background: var(--bg-hover);
+    color: var(--text-primary);
+}
+
+.btn-primary {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.5rem;
+    padding: 0.75rem 1.5rem;
+    background: var(--accent-color);
+    color: white;
+    border: none;
+    border-radius: 6px;
+    font-size: 0.875rem;
+    font-weight: 500;
+    cursor: pointer;
+}
+
+.btn-primary:hover {
+    background: var(--accent-hover);
+}
+
+.btn-secondary {
+    padding: 0.5rem 1rem;
+    background: var(--bg-primary);
+    color: var(--text-primary);
+    border: 1px solid var(--border-color);
+    border-radius: 6px;
+    font-size: 0.875rem;
+    cursor: pointer;
+}
+
+.btn-sm {
+    padding: 0.375rem 0.75rem;
+    font-size: 0.75rem;
+}
+
+.loading-placeholder {
+    color: var(--text-muted);
+    font-size: 0.875rem;
+    padding: 0.5rem 1rem;
+}
+
+.modal-container:empty {
+    display: none;
+}
+
+.search-results:empty {
+    display: none;
+}
+
+@media (max-width: 768px) {
+    .workspace-sidebar {
+        position: absolute;
+        left: -260px;
+        height: 100%;
+        z-index: 50;
+        transition: left 0.2s;
+    }
+
+    .workspace-sidebar.open {
+        left: 0;
+    }
+
+    .members-panel {
+        display: none;
+    }
+}
+</style>
+
+<script>
+function toggleMembersPanel() {
+    const panel = document.getElementById('members-panel');
+    panel.classList.toggle('collapsed');
+}
+
+document.addEventListener('DOMContentLoaded', function() {
+    const blocksContainer = document.getElementById('blocks-container');
+    if (blocksContainer) {
+        blocksContainer.addEventListener('keydown', function(e) {
+            if (e.key === '/') {
+                const slashMenu = document.getElementById('slash-menu');
+                slashMenu.classList.remove('hidden');
+            }
+            if (e.key === 'Escape') {
+                const slashMenu = document.getElementById('slash-menu');
+                slashMenu.classList.add('hidden');
+            }
+        });
+    }
+});
+</script>