diff --git a/.claude/skills/saas-ui-redesign/SKILL.md b/.claude/skills/saas-ui-redesign/SKILL.md
new file mode 100644
index 00000000..6cde8179
--- /dev/null
+++ b/.claude/skills/saas-ui-redesign/SKILL.md
@@ -0,0 +1,403 @@
+---
+name: saas-ui-redesign
+description: Redesigns a Vue 3 application's UI into a modern SaaS-style interface with a vertical navigation sidebar, consistent spacing system, and polished professional look. Replaces the existing top nav bar in App.vue.
+---
+
+# SaaS UI Redesign Skill
+
+This skill converts a Vue 3 app with a horizontal top-nav bar into a modern SaaS-style layout with a fixed vertical sidebar, consistent spacing, and a polished professional look. All changes are made through the `vue-expert` agent — never edit `.vue` files directly.
+
+---
+
+## Overview of Changes
+
+| Before | After |
+|---|---|
+| `.top-nav` horizontal bar at top | Fixed vertical sidebar, 220px wide |
+| Nav links in a row | Nav links stacked vertically with icons |
+| Logo + subtitle inline in nav bar | Logo block at top of sidebar |
+| `FilterBar` below the nav bar | `FilterBar` in a slim horizontal bar below the topbar |
+| `ProfileMenu` + `LanguageSwitcher` in top-right of nav | Footer section at the bottom of the sidebar |
+| Full-width main content area | `margin-left: 220px` main content area |
+
+---
+
+## Layout Structure to Implement
+
+```
+┌─────────────────────────────────────────────────────┐
+│  SIDEBAR (220px fixed, full height)                  │  TOPBAR (header, 56px, left: 220px)
+│  ┌──────────────────┐                               │  ┌───────────────────────────────────┐
+│  │  Logo / App name  │                               │  │  Page title        [FilterBar]    │
+│  ├──────────────────┤                               │  └───────────────────────────────────┘
+│  │  Nav links        │                               │
+│  │  > Dashboard      │                               │  MAIN CONTENT (padding: 24px)
+│  │  > Inventory      │                               │  ┌───────────────────────────────────┐
+│  │  > Orders         │                               │  │  <router-view />                  │
+│  │  > Finance        │                               │  │                                   │
+│  │  > Demand         │                               │  └───────────────────────────────────┘
+│  │  > Reports        │                               │
+│  ├──────────────────┤
+│  │  LanguageSwitcher │
+│  │  ProfileMenu      │
+│  └──────────────────┘
+└──────────────────────
+```
+
+---
+
+## Step-by-Step Implementation
+
+### Step 1 — Audit the current App.vue
+
+Read `client/src/App.vue` before making any changes. Note:
+- The `.top-nav` / `.nav-container` / `.nav-tabs` selectors — these will be removed
+- The `.main-content` selector — its padding/max-width must be preserved
+- Global CSS classes (`.card`, `.badge`, `.table`, etc.) — these do NOT change
+- All `<script>` logic — this does NOT change
+
+### Step 2 — Redesign App.vue template
+
+Replace the `<header class="top-nav">...</header>` block with a sidebar + topbar structure:
+
+```vue
+<template>
+  <div class="app-shell">
+
+    <!-- Vertical Sidebar -->
+    <aside class="sidebar">
+      <div class="sidebar-logo">
+        <span class="sidebar-logo-mark">FI</span>
+        <div class="sidebar-logo-text">
+          <span class="sidebar-app-name">{{ t('nav.companyName') }}</span>
+          <span class="sidebar-app-sub">{{ t('nav.subtitle') }}</span>
+        </div>
+      </div>
+
+      <nav class="sidebar-nav">
+        <router-link to="/"          class="sidebar-link" :class="{ active: $route.path === '/' }">
+          <svg class="nav-icon" viewBox="0 0 20 20" fill="currentColor"><path d="M3 4a1 1 0 011-1h3a1 1 0 011 1v3a1 1 0 01-1 1H4a1 1 0 01-1-1V4zm0 8a1 1 0 011-1h3a1 1 0 011 1v3a1 1 0 01-1 1H4a1 1 0 01-1-1v-3zm8-8a1 1 0 011-1h3a1 1 0 011 1v3a1 1 0 01-1 1h-3a1 1 0 01-1-1V4zm0 8a1 1 0 011-1h3a1 1 0 011 1v3a1 1 0 01-1 1h-3a1 1 0 01-1-1v-3z"/></svg>
+          {{ t('nav.overview') }}
+        </router-link>
+        <router-link to="/inventory" class="sidebar-link" :class="{ active: $route.path === '/inventory' }">
+          <svg class="nav-icon" viewBox="0 0 20 20" fill="currentColor"><path d="M4 3a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V5a2 2 0 00-2-2H4zm3 2h6v4H7V5zm-2 8h10v2H5v-2z"/></svg>
+          {{ t('nav.inventory') }}
+        </router-link>
+        <router-link to="/orders"    class="sidebar-link" :class="{ active: $route.path === '/orders' }">
+          <svg class="nav-icon" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M3 3a1 1 0 000 2v8a2 2 0 002 2h2.586l-1.293 1.293a1 1 0 101.414 1.414L10 15.414l2.293 2.293a1 1 0 001.414-1.414L12.414 15H15a2 2 0 002-2V5a1 1 0 100-2H3zm11 4a1 1 0 10-2 0v4a1 1 0 102 0V7zm-3 1a1 1 0 10-2 0v3a1 1 0 102 0V8zM8 9a1 1 0 00-2 0v2a1 1 0 102 0V9z" clip-rule="evenodd"/></svg>
+          {{ t('nav.orders') }}
+        </router-link>
+        <router-link to="/spending"  class="sidebar-link" :class="{ active: $route.path === '/spending' }">
+          <svg class="nav-icon" viewBox="0 0 20 20" fill="currentColor"><path d="M8.433 7.418c.155-.103.346-.196.567-.267v1.698a2.305 2.305 0 01-.567-.267C8.07 8.34 8 8.114 8 8c0-.114.07-.34.433-.582zM11 12.849v-1.698c.22.071.412.164.567.267.364.243.433.468.433.582 0 .114-.07.34-.433.582a2.305 2.305 0 01-.567.267z"/><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-13a1 1 0 10-2 0v.092a4.535 4.535 0 00-1.676.662C6.602 6.234 6 7.009 6 8c0 .99.602 1.765 1.324 2.246.48.32 1.054.545 1.676.662v1.941c-.391-.127-.68-.317-.843-.504a1 1 0 10-1.51 1.31c.562.649 1.413 1.028 2.353 1.118V15a1 1 0 102 0v-.092a4.535 4.535 0 001.676-.662C13.398 13.766 14 12.991 14 12c0-.99-.602-1.765-1.324-2.246A4.535 4.535 0 0011 9.092V7.151c.391.127.68.317.843.504a1 1 0 101.511-1.31c-.563-.649-1.413-1.028-2.354-1.118V5z" clip-rule="evenodd"/></svg>
+          {{ t('nav.finance') }}
+        </router-link>
+        <router-link to="/demand"    class="sidebar-link" :class="{ active: $route.path === '/demand' }">
+          <svg class="nav-icon" viewBox="0 0 20 20" fill="currentColor"><path d="M2 11a1 1 0 011-1h2a1 1 0 011 1v5a1 1 0 01-1 1H3a1 1 0 01-1-1v-5zM8 7a1 1 0 011-1h2a1 1 0 011 1v9a1 1 0 01-1 1H9a1 1 0 01-1-1V7zM14 4a1 1 0 011-1h2a1 1 0 011 1v12a1 1 0 01-1 1h-2a1 1 0 01-1-1V4z"/></svg>
+          {{ t('nav.demandForecast') }}
+        </router-link>
+        <router-link to="/reports"   class="sidebar-link" :class="{ active: $route.path === '/reports' }">
+          <svg class="nav-icon" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M6 2a2 2 0 00-2 2v12a2 2 0 002 2h8a2 2 0 002-2V7.414A2 2 0 0015.414 6L12 2.586A2 2 0 0010.586 2H6zm2 10a1 1 0 10-2 0v3a1 1 0 102 0v-3zm2-3a1 1 0 011 1v5a1 1 0 11-2 0v-5a1 1 0 011-1zm4-1a1 1 0 10-2 0v7a1 1 0 102 0V8z" clip-rule="evenodd"/></svg>
+          Reports
+        </router-link>
+      </nav>
+
+      <div class="sidebar-footer">
+        <LanguageSwitcher />
+        <ProfileMenu
+          @show-profile-details="showProfileDetails = true"
+          @show-tasks="showTasks = true"
+        />
+      </div>
+    </aside>
+
+    <!-- Right-side wrapper -->
+    <div class="app-body">
+      <header class="topbar">
+        <FilterBar />
+      </header>
+      <main class="main-content">
+        <router-view />
+      </main>
+    </div>
+
+    <!-- Modals — unchanged -->
+    <ProfileDetailsModal
+      :is-open="showProfileDetails"
+      @close="showProfileDetails = false"
+    />
+    <TasksModal
+      :is-open="showTasks"
+      :tasks="tasks"
+      @close="showTasks = false"
+      @add-task="addTask"
+      @delete-task="deleteTask"
+      @toggle-task="toggleTask"
+    />
+  </div>
+</template>
+```
+
+### Step 3 — Replace App.vue layout CSS
+
+Remove the old `.top-nav`, `.nav-container`, `.nav-tabs` blocks entirely.
+Replace the `*`, `body`, and `.app` blocks and add the new sidebar CSS.
+
+Keep ALL existing global utility classes unchanged:
+`.card`, `.card-header`, `.card-title`, `.stats-grid`, `.stat-card`, `.stat-label`, `.stat-value`, `.table-container`, `table`, `thead`, `th`, `td`, `tbody tr`, `.badge`, `.loading`, `.error`, `.page-header`
+
+```css
+/* ---- Reset & base ---- */
+*, *::before, *::after {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+body {
+  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  background: #f8fafc;
+  color: #1e293b;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+/* ---- Shell ---- */
+.app-shell {
+  display: flex;
+  min-height: 100vh;
+}
+
+/* ---- Sidebar ---- */
+.sidebar {
+  width: 220px;
+  min-width: 220px;
+  background: #0f172a;
+  display: flex;
+  flex-direction: column;
+  position: fixed;
+  top: 0;
+  left: 0;
+  height: 100vh;
+  z-index: 200;
+  border-right: 1px solid #1e293b;
+}
+
+.sidebar-logo {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 20px 16px 20px;
+  border-bottom: 1px solid #1e293b;
+}
+
+.sidebar-logo-mark {
+  width: 32px;
+  height: 32px;
+  background: #2563eb;
+  color: #fff;
+  font-size: 0.75rem;
+  font-weight: 700;
+  border-radius: 8px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  letter-spacing: 0.02em;
+}
+
+.sidebar-logo-text {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+}
+
+.sidebar-app-name {
+  font-size: 0.85rem;
+  font-weight: 700;
+  color: #f1f5f9;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  letter-spacing: -0.01em;
+}
+
+.sidebar-app-sub {
+  font-size: 0.68rem;
+  color: #475569;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* ---- Sidebar nav links ---- */
+.sidebar-nav {
+  flex: 1;
+  padding: 12px 10px;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  overflow-y: auto;
+}
+
+.sidebar-link {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 8px 10px;
+  border-radius: 6px;
+  color: #94a3b8;
+  text-decoration: none;
+  font-size: 0.85rem;
+  font-weight: 500;
+  transition: background 0.15s ease, color 0.15s ease;
+  white-space: nowrap;
+}
+
+.sidebar-link:hover {
+  background: #1e293b;
+  color: #e2e8f0;
+}
+
+.sidebar-link.active {
+  background: #1e3a5f;
+  color: #93c5fd;
+}
+
+.nav-icon {
+  width: 16px;
+  height: 16px;
+  flex-shrink: 0;
+  opacity: 0.8;
+}
+
+.sidebar-link.active .nav-icon {
+  opacity: 1;
+}
+
+/* ---- Sidebar footer (profile + language) ---- */
+.sidebar-footer {
+  padding: 12px 10px;
+  border-top: 1px solid #1e293b;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+/* ---- Right-side body ---- */
+.app-body {
+  margin-left: 220px;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+}
+
+/* ---- Topbar (filter bar row) ---- */
+.topbar {
+  position: sticky;
+  top: 0;
+  z-index: 100;
+  background: #ffffff;
+  border-bottom: 1px solid #e2e8f0;
+  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.05);
+}
+
+/* ---- Main content ---- */
+.main-content {
+  flex: 1;
+  padding: 24px 28px;
+}
+```
+
+---
+
+## Spacing System
+
+Use this consistent spacing scale throughout all views. Do not introduce arbitrary px values.
+
+| Token | Value | Usage |
+|---|---|---|
+| `4px` | `0.25rem` | Tight gaps within a component |
+| `8px` | `0.5rem` | Icon-to-label gaps |
+| `12px` | `0.75rem` | Internal card padding (small) |
+| `16px` | `1rem` | Standard card padding |
+| `20px` | `1.25rem` | Between cards in a grid |
+| `24px` | `1.5rem` | Page section vertical spacing |
+| `28px` | `1.75rem` | Page content horizontal padding |
+| `32px` | `2rem` | Between major sections |
+
+---
+
+## Colour Tokens
+
+These are the design system colours already in use. Do not introduce new ones.
+
+```
+Background page:    #f8fafc
+Sidebar bg:         #0f172a
+Sidebar border:     #1e293b
+Sidebar active bg:  #1e3a5f
+Sidebar active txt: #93c5fd
+Sidebar muted txt:  #94a3b8
+Topbar / card bg:   #ffffff
+Card border:        #e2e8f0
+Body text:          #1e293b
+Muted text:         #64748b
+Accent blue:        #2563eb
+```
+
+---
+
+## Sidebar Footer: ProfileMenu and LanguageSwitcher
+
+Both components render as small interactive elements. In the sidebar footer they stack vertically. Wrap each in the `.sidebar-footer` container — no additional wrapper needed.
+
+If `ProfileMenu` or `LanguageSwitcher` have hardcoded horizontal layout styles (e.g., `display: flex; flex-direction: row`) that look wrong in a vertical context, patch their `<style scoped>` to add `width: 100%` and adjust padding. Do not change their emitted events or props.
+
+---
+
+## FilterBar Placement
+
+`FilterBar` moves from being a full-width block below the top-nav to living inside the `.topbar` `<header>` element. The `FilterBar` component itself does not need to change — only where it is rendered in `App.vue`.
+
+If `FilterBar` has a hardcoded top-level `max-width` or centering wrapper matching the old nav's `1600px` container, update it to `width: 100%` with `padding: 8px 24px` so it fills the topbar naturally.
+
+---
+
+## Checklist Before Finishing
+
+- [ ] Old `.top-nav`, `.nav-container`, `.nav-tabs` CSS removed from App.vue
+- [ ] New `.app-shell`, `.sidebar`, `.app-body`, `.topbar`, `.main-content` CSS in place
+- [ ] `.main-content` has `margin-left: 220px` via `.app-body` (not direct)
+- [ ] All 6 route links are present in sidebar with correct paths and active class bindings
+- [ ] Sidebar icons are inline SVG (no external icon library)
+- [ ] Logo mark (2-letter monogram) renders in sidebar header
+- [ ] `ProfileMenu` and `LanguageSwitcher` render in `.sidebar-footer`
+- [ ] `FilterBar` renders inside `.topbar` header
+- [ ] All modal components and their event bindings are unchanged
+- [ ] All `<script>` logic is unchanged
+- [ ] All global utility classes (`.card`, `.badge`, `.table`, etc.) are unchanged
+- [ ] App renders without console errors at `http://localhost:3000`
+- [ ] Active nav link highlights correctly on route change
+
+---
+
+## Common Pitfalls
+
+**Sidebar overlapping content**: Ensure `.app-body` has `margin-left: 220px` to match the fixed sidebar width, not padding-left.
+
+**FilterBar misaligned**: If `FilterBar.vue` has `max-width: 1600px; margin: 0 auto` on its root element, the topbar height will look off. Remove the centering constraint from `FilterBar.vue` when it moves into the topbar.
+
+**ProfileMenu dropdown clipping**: The sidebar has `overflow: hidden` if not explicitly set. If the ProfileMenu dropdown appears clipped, add `overflow: visible` to `.sidebar-footer` and ensure the dropdown uses `position: fixed` rather than `absolute`.
+
+**Sidebar link underlines**: `router-link` renders as `<a>` tags. Make sure `text-decoration: none` is set on `.sidebar-link` and there's no inherited `a { text-decoration: underline }` rule from a CSS reset.
+
+**Active class mismatch**: This project uses `:class="{ active: $route.path === '/...' }"` for active detection instead of Vue Router's `linkActiveClass`. Keep this pattern — do not switch to `linkActiveClass`.
+
+---
+
+## Delegation Rule
+
+**Every `.vue` file change in this skill MUST be made via the `vue-expert` subagent.**
+
+Do not edit `.vue` files directly. Pass the full specification above plus the current file contents to `vue-expert` with clear before/after intent.
diff --git a/README.md b/README.md
index c12419ee..9f1d926e 100644
--- a/README.md
+++ b/README.md
@@ -100,3 +100,4 @@ To stop the servers, press Ctrl+C in each terminal window.
 ---
 
 **Note:** Demo application with in-memory data. Not production-ready without database, authentication, and security implementation.
+test change
diff --git a/architecture.html b/architecture.html
new file mode 100644
index 00000000..1f95fee3
--- /dev/null
+++ b/architecture.html
@@ -0,0 +1,623 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Architecture — Factory Inventory Management</title>
+  <style>
+    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+
+    body {
+      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+      background: #0f172a;
+      color: #e2e8f0;
+      line-height: 1.6;
+      padding: 48px 32px;
+      min-height: 100vh;
+    }
+
+    h1 {
+      font-size: 1.6rem;
+      font-weight: 700;
+      color: #f1f5f9;
+      margin-bottom: 4px;
+    }
+    .subtitle {
+      color: #64748b;
+      font-size: 0.9rem;
+      margin-bottom: 40px;
+    }
+
+    /* ---- Section titles ---- */
+    h2 {
+      font-size: 0.7rem;
+      font-weight: 600;
+      letter-spacing: 0.1em;
+      text-transform: uppercase;
+      color: #475569;
+      margin-bottom: 16px;
+    }
+
+    section { margin-bottom: 48px; }
+
+    /* ---- Cards ---- */
+    .card {
+      background: #1e293b;
+      border: 1px solid #334155;
+      border-radius: 10px;
+      padding: 20px 24px;
+    }
+
+    /* ---- Tech Stack ---- */
+    .stack-grid {
+      display: grid;
+      grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
+      gap: 12px;
+    }
+    .stack-item {
+      background: #1e293b;
+      border: 1px solid #334155;
+      border-radius: 8px;
+      padding: 16px;
+    }
+    .stack-item .layer {
+      font-size: 0.65rem;
+      font-weight: 600;
+      letter-spacing: 0.08em;
+      text-transform: uppercase;
+      color: #64748b;
+      margin-bottom: 6px;
+    }
+    .stack-item .tech {
+      font-size: 0.95rem;
+      font-weight: 600;
+      color: #f1f5f9;
+      margin-bottom: 4px;
+    }
+    .stack-item .detail {
+      font-size: 0.8rem;
+      color: #94a3b8;
+    }
+    .stack-item.blue  { border-left: 3px solid #3b82f6; }
+    .stack-item.green { border-left: 3px solid #22c55e; }
+    .stack-item.amber { border-left: 3px solid #f59e0b; }
+    .stack-item.slate { border-left: 3px solid #64748b; }
+
+    /* ---- Architecture Diagram ---- */
+    .arch-diagram {
+      display: flex;
+      flex-direction: column;
+      gap: 0;
+      align-items: stretch;
+    }
+
+    .arch-row {
+      display: flex;
+      gap: 12px;
+      justify-content: center;
+    }
+
+    .arch-layer {
+      flex: 1;
+      max-width: 320px;
+      background: #1e293b;
+      border: 1px solid #334155;
+      border-radius: 8px;
+      padding: 16px 20px;
+    }
+
+    .arch-layer .layer-title {
+      font-size: 0.7rem;
+      font-weight: 700;
+      letter-spacing: 0.08em;
+      text-transform: uppercase;
+      margin-bottom: 10px;
+    }
+    .arch-layer .layer-title.blue  { color: #3b82f6; }
+    .arch-layer .layer-title.green { color: #22c55e; }
+    .arch-layer .layer-title.amber { color: #f59e0b; }
+
+    .arch-layer ul {
+      list-style: none;
+      display: flex;
+      flex-direction: column;
+      gap: 4px;
+    }
+    .arch-layer ul li {
+      font-size: 0.82rem;
+      color: #cbd5e1;
+      padding: 3px 8px;
+      background: #0f172a;
+      border-radius: 4px;
+      border: 1px solid #1e293b;
+    }
+    .arch-layer ul li span {
+      color: #64748b;
+      font-size: 0.75rem;
+      margin-left: 6px;
+    }
+
+    .arch-arrow {
+      text-align: center;
+      padding: 8px 0;
+      color: #334155;
+      font-size: 1.2rem;
+      line-height: 1;
+    }
+
+    /* ---- Data Flow ---- */
+    .flow {
+      display: flex;
+      align-items: flex-start;
+      gap: 0;
+      flex-wrap: wrap;
+    }
+    .flow-step {
+      display: flex;
+      align-items: center;
+      gap: 0;
+    }
+    .flow-box {
+      background: #1e293b;
+      border: 1px solid #334155;
+      border-radius: 6px;
+      padding: 10px 14px;
+      min-width: 130px;
+      text-align: center;
+    }
+    .flow-box .f-label {
+      font-size: 0.7rem;
+      font-weight: 600;
+      letter-spacing: 0.06em;
+      text-transform: uppercase;
+      margin-bottom: 4px;
+    }
+    .flow-box .f-label.blue  { color: #3b82f6; }
+    .flow-box .f-label.green { color: #22c55e; }
+    .flow-box .f-label.amber { color: #f59e0b; }
+    .flow-box .f-label.slate { color: #64748b; }
+    .flow-box .f-desc {
+      font-size: 0.8rem;
+      color: #94a3b8;
+    }
+    .flow-arrow {
+      color: #475569;
+      font-size: 1rem;
+      padding: 0 6px;
+      white-space: nowrap;
+    }
+
+    /* ---- API Endpoints ---- */
+    .endpoints-grid {
+      display: grid;
+      grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+      gap: 10px;
+    }
+    .endpoint {
+      background: #1e293b;
+      border: 1px solid #334155;
+      border-radius: 6px;
+      padding: 12px 16px;
+      display: flex;
+      flex-direction: column;
+      gap: 4px;
+    }
+    .endpoint .method {
+      display: inline-block;
+      font-size: 0.65rem;
+      font-weight: 700;
+      background: #0f172a;
+      color: #22c55e;
+      border: 1px solid #166534;
+      border-radius: 3px;
+      padding: 1px 6px;
+      margin-right: 6px;
+      letter-spacing: 0.05em;
+    }
+    .endpoint .path {
+      font-size: 0.82rem;
+      color: #93c5fd;
+      font-family: "SF Mono", Menlo, Consolas, monospace;
+    }
+    .endpoint .desc {
+      font-size: 0.78rem;
+      color: #64748b;
+      margin-top: 2px;
+    }
+    .endpoint .filters {
+      font-size: 0.72rem;
+      color: #475569;
+      font-family: "SF Mono", Menlo, Consolas, monospace;
+    }
+
+    /* ---- File Structure ---- */
+    .tree {
+      font-family: "SF Mono", Menlo, Consolas, monospace;
+      font-size: 0.8rem;
+      color: #94a3b8;
+      line-height: 1.9;
+    }
+    .tree .dir  { color: #60a5fa; }
+    .tree .file { color: #cbd5e1; }
+    .tree .note { color: #475569; font-size: 0.75rem; }
+
+    /* ---- Filter System ---- */
+    .filters-row {
+      display: flex;
+      gap: 10px;
+      flex-wrap: wrap;
+    }
+    .filter-chip {
+      background: #1e293b;
+      border: 1px solid #334155;
+      border-radius: 6px;
+      padding: 10px 16px;
+      flex: 1;
+      min-width: 140px;
+    }
+    .filter-chip .fc-name {
+      font-size: 0.75rem;
+      font-weight: 600;
+      color: #e2e8f0;
+      margin-bottom: 4px;
+    }
+    .filter-chip .fc-values {
+      font-size: 0.72rem;
+      color: #64748b;
+      font-family: "SF Mono", Menlo, Consolas, monospace;
+    }
+
+    /* ---- Composables ---- */
+    .composables-grid {
+      display: grid;
+      grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
+      gap: 10px;
+    }
+    .composable {
+      background: #1e293b;
+      border: 1px solid #334155;
+      border-radius: 6px;
+      padding: 14px 16px;
+    }
+    .composable .c-name {
+      font-size: 0.85rem;
+      font-weight: 600;
+      color: #c084fc;
+      font-family: "SF Mono", Menlo, Consolas, monospace;
+      margin-bottom: 6px;
+    }
+    .composable ul {
+      list-style: none;
+      display: flex;
+      flex-direction: column;
+      gap: 3px;
+    }
+    .composable ul li {
+      font-size: 0.78rem;
+      color: #94a3b8;
+    }
+    .composable ul li::before {
+      content: "—  ";
+      color: #334155;
+    }
+
+    /* ---- Divider ---- */
+    .divider {
+      border: none;
+      border-top: 1px solid #1e293b;
+      margin: 48px 0;
+    }
+
+    /* ---- Footer ---- */
+    footer {
+      color: #334155;
+      font-size: 0.75rem;
+      text-align: center;
+      margin-top: 48px;
+    }
+  </style>
+</head>
+<body>
+
+  <h1>Factory Inventory Management</h1>
+  <p class="subtitle">System Architecture — Vue 3 + FastAPI + In-Memory Data</p>
+
+  <!-- TECH STACK -->
+  <section>
+    <h2>Tech Stack</h2>
+    <div class="stack-grid">
+      <div class="stack-item blue">
+        <div class="layer">Frontend</div>
+        <div class="tech">Vue 3.4 + Vite 5</div>
+        <div class="detail">Composition API · Vue Router 4 · Axios · Custom SVG charts</div>
+      </div>
+      <div class="stack-item green">
+        <div class="layer">Backend</div>
+        <div class="tech">Python FastAPI</div>
+        <div class="detail">Uvicorn · Pydantic v2 · uv package manager · Port 8001</div>
+      </div>
+      <div class="stack-item amber">
+        <div class="layer">Data</div>
+        <div class="tech">JSON Files (In-Memory)</div>
+        <div class="detail">7 JSON files · Loaded at startup · No database · server/data/</div>
+      </div>
+      <div class="stack-item slate">
+        <div class="layer">Internationalisation</div>
+        <div class="tech">Custom i18n + Currency</div>
+        <div class="detail">EN / JA locales · USD / JPY · Intl API formatting</div>
+      </div>
+    </div>
+  </section>
+
+  <!-- SYSTEM ARCHITECTURE -->
+  <section>
+    <h2>System Architecture</h2>
+    <div class="arch-diagram">
+
+      <div class="arch-row">
+        <div class="arch-layer" style="max-width:660px;">
+          <div class="layer-title blue">Browser — Vue 3 SPA (port 3000)</div>
+          <ul>
+            <li>Dashboard.vue <span>KPIs, order health donut chart</span></li>
+            <li>Inventory.vue <span>Stock table, search, detail modals</span></li>
+            <li>Orders.vue <span>Order list, status badges, item dropdowns</span></li>
+            <li>Demand.vue <span>Forecast table, trend indicators</span></li>
+            <li>Spending.vue <span>Revenue vs costs, monthly charts</span></li>
+            <li>Reports.vue <span>Quarterly table, monthly trends bar chart</span></li>
+            <li>Backlog.vue <span>Shortage items, priority levels</span></li>
+          </ul>
+        </div>
+      </div>
+
+      <div class="arch-arrow">&#8595; HTTP / Axios</div>
+
+      <div class="arch-row">
+        <div class="arch-layer" style="max-width:660px;">
+          <div class="layer-title green">FastAPI (port 8001)</div>
+          <ul>
+            <li>/api/inventory <span>warehouse · category filters</span></li>
+            <li>/api/orders <span>warehouse · category · status · month filters</span></li>
+            <li>/api/dashboard/summary <span>all 4 filters, computed totals</span></li>
+            <li>/api/demand &amp; /api/backlog <span>no filters</span></li>
+            <li>/api/spending/* <span>summary · monthly · categories · transactions</span></li>
+            <li>/api/reports/* <span>quarterly · monthly-trends</span></li>
+            <li>/api/tasks &amp; /api/purchase-orders <span>CRUD</span></li>
+          </ul>
+        </div>
+      </div>
+
+      <div class="arch-arrow">&#8595; In-Memory</div>
+
+      <div class="arch-row">
+        <div class="arch-layer" style="max-width:660px;">
+          <div class="layer-title amber">Data Layer — mock_data.py + server/data/*.json</div>
+          <ul>
+            <li>inventory.json <span>~80 SKUs, 5 categories, 3 warehouses</span></li>
+            <li>orders.json <span>~1 300 orders, Jan–Sep 2025</span></li>
+            <li>demand_forecasts.json <span>9 items with trend direction</span></li>
+            <li>backlog_items.json <span>4 shortage records</span></li>
+            <li>spending.json <span>12-month cost breakdown by 4 cost types</span></li>
+            <li>transactions.json &amp; purchase_orders.json</li>
+          </ul>
+        </div>
+      </div>
+
+    </div>
+  </section>
+
+  <!-- DATA FLOW -->
+  <section>
+    <h2>Data Flow — Filter Request Lifecycle</h2>
+    <div class="card">
+      <div class="flow">
+        <div class="flow-step">
+          <div class="flow-box">
+            <div class="f-label blue">FilterBar.vue</div>
+            <div class="f-desc">User selects period / warehouse / category / status</div>
+          </div>
+          <div class="flow-arrow">&#8594;</div>
+        </div>
+        <div class="flow-step">
+          <div class="flow-box">
+            <div class="f-label blue">useFilters()</div>
+            <div class="f-desc">Singleton reactive state shared across all views</div>
+          </div>
+          <div class="flow-arrow">&#8594;</div>
+        </div>
+        <div class="flow-step">
+          <div class="flow-box">
+            <div class="f-label blue">api.js</div>
+            <div class="f-desc">Builds URLSearchParams, Axios GET request</div>
+          </div>
+          <div class="flow-arrow">&#8594;</div>
+        </div>
+        <div class="flow-step">
+          <div class="flow-box">
+            <div class="f-label green">FastAPI route</div>
+            <div class="f-desc">Receives query params as typed arguments</div>
+          </div>
+          <div class="flow-arrow">&#8594;</div>
+        </div>
+        <div class="flow-step">
+          <div class="flow-box">
+            <div class="f-label green">apply_filters()</div>
+            <div class="f-desc">Immutable list comprehension filtering in Python</div>
+          </div>
+          <div class="flow-arrow">&#8594;</div>
+        </div>
+        <div class="flow-step">
+          <div class="flow-box">
+            <div class="f-label green">Pydantic</div>
+            <div class="f-desc">Validates &amp; serialises response models</div>
+          </div>
+          <div class="flow-arrow">&#8594;</div>
+        </div>
+        <div class="flow-step">
+          <div class="flow-box">
+            <div class="f-label blue">computed()</div>
+            <div class="f-desc">Vue derived state applies local search on top</div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- FILTER SYSTEM -->
+  <section>
+    <h2>Filter System</h2>
+    <div class="filters-row">
+      <div class="filter-chip">
+        <div class="fc-name">Time Period</div>
+        <div class="fc-values">all · 2025-01 … 2025-09 · Q1-2025 … Q4-2025</div>
+      </div>
+      <div class="filter-chip">
+        <div class="fc-name">Warehouse</div>
+        <div class="fc-values">all · San Francisco · London · Tokyo</div>
+      </div>
+      <div class="filter-chip">
+        <div class="fc-name">Category</div>
+        <div class="fc-values">all · Circuit Boards · Sensors · Actuators · Controllers · Power Supplies</div>
+      </div>
+      <div class="filter-chip">
+        <div class="fc-name">Order Status</div>
+        <div class="fc-values">all · Processing · Shipped · Delivered · Backordered</div>
+      </div>
+    </div>
+    <p style="font-size:0.78rem; color:#475569; margin-top:12px;">
+      Inventory endpoint ignores the month filter (no time dimension on stock data).
+      Quarter strings are mapped to individual months on the backend via QUARTER_MAP.
+    </p>
+  </section>
+
+  <!-- COMPOSABLES -->
+  <section>
+    <h2>Frontend Composables</h2>
+    <div class="composables-grid">
+      <div class="composable">
+        <div class="c-name">useFilters.js</div>
+        <ul>
+          <li>Singleton — shared mutable refs across all views</li>
+          <li>selectedPeriod, selectedLocation, selectedCategory, selectedStatus</li>
+          <li>getCurrentFilters() → query param object</li>
+          <li>resetFilters(), hasActiveFilters computed</li>
+        </ul>
+      </div>
+      <div class="composable">
+        <div class="c-name">useI18n.js</div>
+        <ul>
+          <li>currentLocale (en / ja), currentCurrency (USD / JPY)</li>
+          <li>t(key, params) — nested lookup with EN fallback</li>
+          <li>translateProductName(), translateWarehouse()</li>
+          <li>Intl API for currency/number formatting</li>
+        </ul>
+      </div>
+      <div class="composable">
+        <div class="c-name">useAuth.js</div>
+        <ul>
+          <li>Mock user — name, jobTitle, department, location</li>
+          <li>Tasks array hardcoded per locale</li>
+          <li>Locale-aware field values</li>
+        </ul>
+      </div>
+    </div>
+  </section>
+
+  <!-- API ENDPOINTS -->
+  <section>
+    <h2>API Endpoints</h2>
+    <div class="endpoints-grid">
+      <div class="endpoint">
+        <div><span class="method">GET</span><span class="path">/api/inventory</span></div>
+        <div class="desc">All inventory items</div>
+        <div class="filters">?warehouse &amp; ?category</div>
+      </div>
+      <div class="endpoint">
+        <div><span class="method">GET</span><span class="path">/api/inventory/{id}</span></div>
+        <div class="desc">Single inventory item by ID</div>
+      </div>
+      <div class="endpoint">
+        <div><span class="method">GET</span><span class="path">/api/orders</span></div>
+        <div class="desc">All orders</div>
+        <div class="filters">?warehouse &amp; ?category &amp; ?status &amp; ?month</div>
+      </div>
+      <div class="endpoint">
+        <div><span class="method">GET</span><span class="path">/api/orders/{id}</span></div>
+        <div class="desc">Single order by ID</div>
+      </div>
+      <div class="endpoint">
+        <div><span class="method">GET</span><span class="path">/api/dashboard/summary</span></div>
+        <div class="desc">KPI totals — inventory value, low stock, pending orders, backlog</div>
+        <div class="filters">all 4 filters</div>
+      </div>
+      <div class="endpoint">
+        <div><span class="method">GET</span><span class="path">/api/demand</span></div>
+        <div class="desc">Demand forecasts with trend direction</div>
+      </div>
+      <div class="endpoint">
+        <div><span class="method">GET</span><span class="path">/api/backlog</span></div>
+        <div class="desc">Backlog items, enriched with has_purchase_order flag</div>
+      </div>
+      <div class="endpoint">
+        <div><span class="method">GET</span><span class="path">/api/spending/summary</span></div>
+        <div class="desc">Procurement, operational, labor, overhead + YoY</div>
+      </div>
+      <div class="endpoint">
+        <div><span class="method">GET</span><span class="path">/api/spending/monthly</span></div>
+        <div class="desc">12-month cost breakdown by type</div>
+      </div>
+      <div class="endpoint">
+        <div><span class="method">GET</span><span class="path">/api/spending/categories</span></div>
+        <div class="desc">Category spend with percentages</div>
+      </div>
+      <div class="endpoint">
+        <div><span class="method">GET</span><span class="path">/api/spending/transactions</span></div>
+        <div class="desc">Recent transaction list</div>
+      </div>
+      <div class="endpoint">
+        <div><span class="method">GET</span><span class="path">/api/reports/quarterly</span></div>
+        <div class="desc">Q1–Q4 2025 revenue, fulfillment rates</div>
+      </div>
+      <div class="endpoint">
+        <div><span class="method">GET</span><span class="path">/api/reports/monthly-trends</span></div>
+        <div class="desc">Month-by-month revenue and order counts</div>
+      </div>
+      <div class="endpoint">
+        <div><span class="method">GET</span><span class="path">/api/tasks</span></div>
+        <div class="desc">Task list</div>
+      </div>
+      <div class="endpoint">
+        <div><span class="method">GET</span><span class="path">/api/purchase-orders/{backlogItemId}</span></div>
+        <div class="desc">Purchase orders for a backlog item</div>
+      </div>
+    </div>
+  </section>
+
+  <!-- FILE STRUCTURE -->
+  <section>
+    <h2>Key File Locations</h2>
+    <div class="card">
+      <div class="tree">
+        <span class="dir">inventory-management/</span><br>
+        &nbsp;&nbsp;<span class="dir">client/src/</span><br>
+        &nbsp;&nbsp;&nbsp;&nbsp;<span class="dir">views/</span> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="note">Dashboard, Inventory, Orders, Demand, Spending, Reports, Backlog</span><br>
+        &nbsp;&nbsp;&nbsp;&nbsp;<span class="dir">components/</span> &nbsp;&nbsp;&nbsp;<span class="note">Detail modals, FilterBar, ProfileMenu, LanguageSwitcher</span><br>
+        &nbsp;&nbsp;&nbsp;&nbsp;<span class="dir">composables/</span> &nbsp;&nbsp;<span class="note">useFilters, useI18n, useAuth</span><br>
+        &nbsp;&nbsp;&nbsp;&nbsp;<span class="dir">locales/</span> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="note">en.js, ja.js</span><br>
+        &nbsp;&nbsp;&nbsp;&nbsp;<span class="file">api.js</span> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="note">Axios client, all API calls</span><br>
+        &nbsp;&nbsp;&nbsp;&nbsp;<span class="file">main.js</span> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="note">Vue app bootstrap + Vue Router config</span><br>
+        &nbsp;&nbsp;&nbsp;&nbsp;<span class="file">App.vue</span> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="note">Root component + global styles</span><br>
+        <br>
+        &nbsp;&nbsp;<span class="dir">server/</span><br>
+        &nbsp;&nbsp;&nbsp;&nbsp;<span class="file">main.py</span> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="note">FastAPI app, all routes and Pydantic models</span><br>
+        &nbsp;&nbsp;&nbsp;&nbsp;<span class="file">mock_data.py</span> &nbsp;&nbsp;&nbsp;<span class="note">JSON loader, in-memory data store</span><br>
+        &nbsp;&nbsp;&nbsp;&nbsp;<span class="dir">data/</span> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="note">inventory, orders, demand_forecasts, backlog, spending, transactions, purchase_orders</span><br>
+        <br>
+        &nbsp;&nbsp;<span class="dir">tests/</span> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="note">pytest · FastAPI TestClient</span><br>
+      </div>
+    </div>
+  </section>
+
+  <footer>Factory Inventory Management &mdash; Architecture Reference</footer>
+
+</body>
+</html>
diff --git a/client/src/App.vue b/client/src/App.vue
index c2da05a5..b42c45a0 100644
--- a/client/src/App.vue
+++ b/client/src/App.vue
@@ -1,48 +1,74 @@
 <template>
-  <div class="app">
-    <header class="top-nav">
-      <div class="nav-container">
-        <div class="logo">
-          <h1>{{ t('nav.companyName') }}</h1>
-          <span class="subtitle">{{ t('nav.subtitle') }}</span>
+  <div class="app-shell">
+
+    <!-- Vertical Sidebar -->
+    <aside class="sidebar" :class="{ collapsed: sidebarCollapsed }">
+      <div class="sidebar-logo">
+        <span class="sidebar-logo-mark">FI</span>
+        <div class="sidebar-logo-text">
+          <span class="sidebar-app-name">{{ t('nav.companyName') }}</span>
+          <span class="sidebar-app-sub">{{ t('nav.subtitle') }}</span>
         </div>
-        <nav class="nav-tabs">
-          <router-link to="/" :class="{ active: $route.path === '/' }">
-            {{ t('nav.overview') }}
-          </router-link>
-          <router-link to="/inventory" :class="{ active: $route.path === '/inventory' }">
-            {{ t('nav.inventory') }}
-          </router-link>
-          <router-link to="/orders" :class="{ active: $route.path === '/orders' }">
-            {{ t('nav.orders') }}
-          </router-link>
-          <router-link to="/spending" :class="{ active: $route.path === '/spending' }">
-            {{ t('nav.finance') }}
-          </router-link>
-          <router-link to="/demand" :class="{ active: $route.path === '/demand' }">
-            {{ t('nav.demandForecast') }}
-          </router-link>
-          <router-link to="/reports" :class="{ active: $route.path === '/reports' }">
-            Reports
-          </router-link>
-        </nav>
+      </div>
+
+      <button class="sidebar-toggle" @click="sidebarCollapsed = !sidebarCollapsed" :title="sidebarCollapsed ? 'Expand sidebar' : 'Collapse sidebar'">
+        <svg class="nav-icon" viewBox="0 0 20 20" fill="currentColor">
+          <path v-if="!sidebarCollapsed" fill-rule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zm0 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zm0 5a1 1 0 011-1h6a1 1 0 110 2H4a1 1 0 01-1-1z" clip-rule="evenodd"/>
+          <path v-else fill-rule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zm0 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zm0 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z" clip-rule="evenodd"/>
+        </svg>
+      </button>
+
+      <nav class="sidebar-nav">
+        <router-link to="/" data-tooltip="Dashboard" class="sidebar-link" :class="{ active: $route.path === '/' }">
+          <svg class="nav-icon" viewBox="0 0 20 20" fill="currentColor"><path d="M3 4a1 1 0 011-1h3a1 1 0 011 1v3a1 1 0 01-1 1H4a1 1 0 01-1-1V4zm0 8a1 1 0 011-1h3a1 1 0 011 1v3a1 1 0 01-1 1H4a1 1 0 01-1-1v-3zm8-8a1 1 0 011-1h3a1 1 0 011 1v3a1 1 0 01-1 1h-3a1 1 0 01-1-1V4zm0 8a1 1 0 011-1h3a1 1 0 011 1v3a1 1 0 01-1 1h-3a1 1 0 01-1-1v-3z"/></svg>
+          <span class="nav-label">{{ t('nav.overview') }}</span>
+        </router-link>
+        <router-link to="/inventory" data-tooltip="Inventory" class="sidebar-link" :class="{ active: $route.path === '/inventory' }">
+          <svg class="nav-icon" viewBox="0 0 20 20" fill="currentColor"><path d="M4 3a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V5a2 2 0 00-2-2H4zm3 2h6v4H7V5zm-2 8h10v2H5v-2z"/></svg>
+          <span class="nav-label">{{ t('nav.inventory') }}</span>
+        </router-link>
+        <router-link to="/orders" data-tooltip="Orders" class="sidebar-link" :class="{ active: $route.path === '/orders' }">
+          <svg class="nav-icon" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M3 3a1 1 0 000 2v8a2 2 0 002 2h2.586l-1.293 1.293a1 1 0 101.414 1.414L10 15.414l2.293 2.293a1 1 0 001.414-1.414L12.414 15H15a2 2 0 002-2V5a1 1 0 100-2H3zm11 4a1 1 0 10-2 0v4a1 1 0 102 0V7zm-3 1a1 1 0 10-2 0v3a1 1 0 102 0V8zM8 9a1 1 0 00-2 0v2a1 1 0 102 0V9z" clip-rule="evenodd"/></svg>
+          <span class="nav-label">{{ t('nav.orders') }}</span>
+        </router-link>
+        <router-link to="/spending" data-tooltip="Finance" class="sidebar-link" :class="{ active: $route.path === '/spending' }">
+          <svg class="nav-icon" viewBox="0 0 20 20" fill="currentColor"><path d="M8.433 7.418c.155-.103.346-.196.567-.267v1.698a2.305 2.305 0 01-.567-.267C8.07 8.34 8 8.114 8 8c0-.114.07-.34.433-.582zM11 12.849v-1.698c.22.071.412.164.567.267.364.243.433.468.433.582 0 .114-.07.34-.433.582a2.305 2.305 0 01-.567.267z"/><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-13a1 1 0 10-2 0v.092a4.535 4.535 0 00-1.676.662C6.602 6.234 6 7.009 6 8c0 .99.602 1.765 1.324 2.246.48.32 1.054.545 1.676.662v1.941c-.391-.127-.68-.317-.843-.504a1 1 0 10-1.51 1.31c.562.649 1.413 1.028 2.353 1.118V15a1 1 0 102 0v-.092a4.535 4.535 0 001.676-.662C13.398 13.766 14 12.991 14 12c0-.99-.602-1.765-1.324-2.246A4.535 4.535 0 0011 9.092V7.151c.391.127.68.317.843.504a1 1 0 101.511-1.31c-.563-.649-1.413-1.028-2.354-1.118V5z" clip-rule="evenodd"/></svg>
+          <span class="nav-label">{{ t('nav.finance') }}</span>
+        </router-link>
+        <router-link to="/demand" data-tooltip="Demand" class="sidebar-link" :class="{ active: $route.path === '/demand' }">
+          <svg class="nav-icon" viewBox="0 0 20 20" fill="currentColor"><path d="M2 11a1 1 0 011-1h2a1 1 0 011 1v5a1 1 0 01-1 1H3a1 1 0 01-1-1v-5zM8 7a1 1 0 011-1h2a1 1 0 011 1v9a1 1 0 01-1 1H9a1 1 0 01-1-1V7zM14 4a1 1 0 011-1h2a1 1 0 011 1v12a1 1 0 01-1 1h-2a1 1 0 01-1-1V4z"/></svg>
+          <span class="nav-label">{{ t('nav.demandForecast') }}</span>
+        </router-link>
+        <router-link to="/reports" data-tooltip="Reports" class="sidebar-link" :class="{ active: $route.path === '/reports' }">
+          <svg class="nav-icon" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M6 2a2 2 0 00-2 2v12a2 2 0 002 2h8a2 2 0 002-2V7.414A2 2 0 0015.414 6L12 2.586A2 2 0 0010.586 2H6zm2 10a1 1 0 10-2 0v3a1 1 0 102 0v-3zm2-3a1 1 0 011 1v5a1 1 0 11-2 0v-5a1 1 0 011-1zm4-1a1 1 0 10-2 0v7a1 1 0 102 0V8z" clip-rule="evenodd"/></svg>
+          <span class="nav-label">Reports</span>
+        </router-link>
+      </nav>
+
+      <div class="sidebar-footer">
         <LanguageSwitcher />
         <ProfileMenu
           @show-profile-details="showProfileDetails = true"
           @show-tasks="showTasks = true"
         />
       </div>
-    </header>
-    <FilterBar />
-    <main class="main-content">
-      <router-view />
-    </main>
-
+    </aside>
+
+    <!-- Right-side wrapper -->
+    <div class="app-body" :class="{ 'sidebar-collapsed': sidebarCollapsed }">
+      <header class="topbar">
+        <FilterBar />
+      </header>
+      <main class="main-content">
+        <router-view />
+      </main>
+    </div>
+
+    <!-- Modals — keep all existing modals and bindings exactly as they are -->
     <ProfileDetailsModal
       :is-open="showProfileDetails"
       @close="showProfileDetails = false"
     />
-
     <TasksModal
       :is-open="showTasks"
       :tasks="tasks"
@@ -55,7 +81,7 @@
 </template>
 
 <script>
-import { ref, onMounted, computed } from 'vue'
+import { ref, onMounted, onUnmounted, computed } from 'vue'
 import { api } from './api'
 import { useAuth } from './composables/useAuth'
 import { useI18n } from './composables/useI18n'
@@ -80,6 +106,11 @@ export default {
     const showProfileDetails = ref(false)
     const showTasks = ref(false)
     const apiTasks = ref([])
+    const sidebarCollapsed = ref(window.innerWidth < 1024)
+
+    const handleResize = () => {
+      sidebarCollapsed.value = window.innerWidth < 1024
+    }
 
     // Merge mock tasks from currentUser with API tasks
     const tasks = computed(() => {
@@ -146,7 +177,14 @@ export default {
       }
     }
 
-    onMounted(loadTasks)
+    onMounted(() => {
+      loadTasks()
+      window.addEventListener('resize', handleResize)
+    })
+
+    onUnmounted(() => {
+      window.removeEventListener('resize', handleResize)
+    })
 
     return {
       t,
@@ -155,123 +193,190 @@ export default {
       tasks,
       addTask,
       deleteTask,
-      toggleTask
+      toggleTask,
+      sidebarCollapsed
     }
   }
 }
 </script>
 
 <style>
-* {
+/* ---- Reset & base ---- */
+*, *::before, *::after {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
 }
 
 body {
-  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
+  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
   background: #f8fafc;
   color: #1e293b;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
 
-.app {
+/* ---- Shell ---- */
+.app-shell {
   display: flex;
-  flex-direction: column;
   min-height: 100vh;
 }
 
-.top-nav {
-  background: #ffffff;
-  border-bottom: 1px solid #e2e8f0;
-  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.05);
-  position: sticky;
+/* ---- Sidebar ---- */
+.sidebar {
+  width: 220px;
+  min-width: 0;
+  background: #0f172a;
+  display: flex;
+  flex-direction: column;
+  position: fixed;
   top: 0;
-  z-index: 100;
+  left: 0;
+  height: 100vh;
+  z-index: 200;
+  border-right: 1px solid #1e293b;
+  transition: width 0.22s ease;
+  overflow: hidden;
 }
 
-.nav-container {
-  max-width: 1600px;
-  margin: 0 auto;
-  display: flex;
-  align-items: center;
-  padding: 0 2rem;
-  height: 70px;
+.sidebar.collapsed {
+  width: 64px;
 }
 
-.nav-container > .nav-tabs {
-  margin-left: auto;
-  margin-right: 1rem;
+.sidebar-logo {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 20px 16px;
+  border-bottom: 1px solid #1e293b;
+  flex-shrink: 0;
 }
 
-.nav-container > .language-switcher {
-  margin-right: 1rem;
+.sidebar-logo-mark {
+  width: 32px;
+  height: 32px;
+  background: #2563eb;
+  color: #fff;
+  font-size: 0.75rem;
+  font-weight: 700;
+  border-radius: 8px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  letter-spacing: 0.02em;
 }
 
-.logo {
+.sidebar-logo-text {
   display: flex;
-  align-items: baseline;
-  gap: 0.75rem;
+  flex-direction: column;
+  min-width: 0;
 }
 
-.logo h1 {
-  font-size: 1.375rem;
+.sidebar-app-name {
+  font-size: 0.85rem;
   font-weight: 700;
-  color: #0f172a;
-  letter-spacing: -0.025em;
+  color: #f1f5f9;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  letter-spacing: -0.01em;
 }
 
-.subtitle {
-  font-size: 0.813rem;
-  color: #64748b;
-  font-weight: 400;
-  padding-left: 0.75rem;
-  border-left: 1px solid #e2e8f0;
+.sidebar-app-sub {
+  font-size: 0.68rem;
+  color: #475569;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
-.nav-tabs {
+/* ---- Sidebar nav links ---- */
+.sidebar-nav {
+  flex: 1;
+  padding: 12px 10px;
   display: flex;
-  gap: 0.25rem;
+  flex-direction: column;
+  gap: 2px;
+  overflow-y: auto;
 }
 
-.nav-tabs a {
-  padding: 0.625rem 1.25rem;
-  color: #64748b;
+.sidebar-link {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 8px 10px;
+  border-radius: 6px;
+  color: #94a3b8;
   text-decoration: none;
+  font-size: 0.85rem;
   font-weight: 500;
-  font-size: 0.938rem;
-  border-radius: 6px;
-  transition: all 0.2s ease;
-  position: relative;
+  transition: background 0.15s ease, color 0.15s ease;
+  white-space: nowrap;
 }
 
-.nav-tabs a:hover {
-  color: #0f172a;
-  background: #f1f5f9;
+.sidebar-link:hover {
+  background: #1e293b;
+  color: #e2e8f0;
 }
 
-.nav-tabs a.active {
-  color: #2563eb;
-  background: #eff6ff;
+.sidebar-link.active {
+  background: #1e3a5f;
+  color: #93c5fd;
 }
 
-.nav-tabs a.active::after {
-  content: '';
-  position: absolute;
-  bottom: -1px;
-  left: 0;
-  right: 0;
-  height: 2px;
-  background: #2563eb;
+.nav-icon {
+  width: 16px;
+  height: 16px;
+  flex-shrink: 0;
+  opacity: 0.8;
+}
+
+.sidebar-link.active .nav-icon {
+  opacity: 1;
 }
 
+/* ---- Sidebar footer (profile + language) ---- */
+.sidebar-footer {
+  padding: 12px 10px;
+  border-top: 1px solid #1e293b;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  flex-shrink: 0;
+  overflow: visible;
+}
+
+/* ---- Right-side body ---- */
+.app-body {
+  margin-left: 220px;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+  min-width: 0;
+  transition: margin-left 0.22s ease;
+}
+
+.app-body.sidebar-collapsed {
+  margin-left: 64px;
+}
+
+/* ---- Topbar (sticky filter bar row) ---- */
+.topbar {
+  position: sticky;
+  top: 0;
+  z-index: 100;
+  background: #ffffff;
+  border-bottom: 1px solid #e2e8f0;
+  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.05);
+  flex-shrink: 0;
+}
+
+/* ---- Main content ---- */
 .main-content {
   flex: 1;
-  max-width: 1600px;
-  width: 100%;
-  margin: 0 auto;
-  padding: 1.5rem 2rem;
+  padding: 24px 28px;
 }
 
 .page-header {
@@ -483,4 +588,78 @@ tbody tr:hover {
   margin: 1rem 0;
   font-size: 0.938rem;
 }
+
+/* ---- Logo: hide text when collapsed ---- */
+.sidebar.collapsed .sidebar-logo-text {
+  display: none;
+}
+
+.sidebar.collapsed .sidebar-logo {
+  justify-content: center;
+  padding: 20px 0;
+}
+
+/* ---- Toggle button ---- */
+.sidebar-toggle {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  padding: 8px 0;
+  background: transparent;
+  border: none;
+  border-bottom: 1px solid #1e293b;
+  color: #475569;
+  cursor: pointer;
+  transition: color 0.15s ease, background 0.15s ease;
+  flex-shrink: 0;
+}
+
+.sidebar-toggle:hover {
+  background: #1e293b;
+  color: #94a3b8;
+}
+
+/* ---- Nav links: hide labels when collapsed ---- */
+.sidebar.collapsed .nav-label {
+  display: none;
+}
+
+.sidebar.collapsed .sidebar-link {
+  justify-content: center;
+  padding: 10px 0;
+}
+
+/* Tooltip on hover in collapsed mode */
+.sidebar.collapsed .sidebar-link {
+  position: relative;
+}
+
+.sidebar.collapsed .sidebar-link::after {
+  content: attr(data-tooltip);
+  position: fixed;
+  left: 72px;
+  background: #1e293b;
+  color: #e2e8f0;
+  font-size: 0.75rem;
+  font-weight: 500;
+  padding: 4px 10px;
+  border-radius: 5px;
+  white-space: nowrap;
+  pointer-events: none;
+  opacity: 0;
+  transition: opacity 0.15s ease;
+  z-index: 300;
+  border: 1px solid #334155;
+}
+
+.sidebar.collapsed .sidebar-link:hover::after {
+  opacity: 1;
+}
+
+/* ---- Sidebar footer: center icons when collapsed ---- */
+.sidebar.collapsed .sidebar-footer {
+  align-items: center;
+  padding: 12px 0;
+}
 </style>
diff --git a/client/src/components/FilterBar.vue b/client/src/components/FilterBar.vue
index 9e12b694..67e34def 100644
--- a/client/src/components/FilterBar.vue
+++ b/client/src/components/FilterBar.vue
@@ -102,21 +102,16 @@ export default {
 
 <style scoped>
 .filters-bar {
-  background: #f8fafc;
-  border-bottom: 1px solid #e2e8f0;
-  padding: 0.75rem 0;
-  position: sticky;
-  top: 70px;
-  z-index: 90;
+  background: #ffffff;
+  padding: 8px 20px;
+  width: 100%;
 }
 
 .filters-container {
-  max-width: 1600px;
-  margin: 0 auto;
-  padding: 0 2rem;
   display: flex;
   align-items: center;
   gap: 1rem;
+  width: 100%;
 }
 
 .filters-grid {
diff --git a/client/src/components/LanguageSwitcher.vue b/client/src/components/LanguageSwitcher.vue
index dde97df1..b73bb4d1 100644
--- a/client/src/components/LanguageSwitcher.vue
+++ b/client/src/components/LanguageSwitcher.vue
@@ -97,24 +97,25 @@ const selectLanguage = (locale) => {
   display: flex;
   align-items: center;
   gap: 0.5rem;
-  padding: 0.5rem 0.875rem;
-  background: white;
-  border: 1px solid #e2e8f0;
-  border-radius: 8px;
+  padding: 8px 10px;
+  background: transparent;
+  border: none;
+  border-radius: 6px;
   cursor: pointer;
-  transition: all 0.2s ease;
+  transition: background 0.15s ease;
   font-family: inherit;
-  font-size: 0.875rem;
-  color: #334155;
+  font-size: 0.85rem;
+  color: #94a3b8;
+  width: 100%;
 }
 
 .language-button:hover {
-  background: #f8fafc;
-  border-color: #cbd5e1;
+  background: #1e293b;
+  color: #e2e8f0;
 }
 
 .globe-icon {
-  color: #64748b;
+  color: #475569;
   flex-shrink: 0;
 }
 
@@ -123,9 +124,10 @@ const selectLanguage = (locale) => {
 }
 
 .chevron {
-  color: #64748b;
+  color: #475569;
   transition: transform 0.2s ease;
   flex-shrink: 0;
+  margin-left: auto;
 }
 
 .chevron-open {
@@ -134,8 +136,8 @@ const selectLanguage = (locale) => {
 
 .dropdown-menu {
   position: absolute;
-  top: calc(100% + 0.5rem);
-  right: 0;
+  bottom: calc(100% + 0.5rem);
+  left: 0;
   min-width: 160px;
   background: white;
   border: 1px solid #e2e8f0;
diff --git a/client/src/components/ProfileMenu.vue b/client/src/components/ProfileMenu.vue
index 5706d24c..68fc6091 100644
--- a/client/src/components/ProfileMenu.vue
+++ b/client/src/components/ProfileMenu.vue
@@ -124,18 +124,18 @@ const handleLogout = () => {
   display: flex;
   align-items: center;
   gap: 0.625rem;
-  padding: 0.5rem 0.875rem;
-  background: white;
-  border: 1px solid #e2e8f0;
-  border-radius: 8px;
+  padding: 8px 10px;
+  background: transparent;
+  border: none;
+  border-radius: 6px;
   cursor: pointer;
-  transition: all 0.2s ease;
+  transition: background 0.15s ease;
   font-family: inherit;
+  width: 100%;
 }
 
 .profile-button:hover {
-  background: #f8fafc;
-  border-color: #cbd5e1;
+  background: #1e293b;
 }
 
 .avatar {
@@ -153,14 +153,15 @@ const handleLogout = () => {
 }
 
 .profile-name {
-  font-size: 0.875rem;
+  font-size: 0.85rem;
   font-weight: 500;
-  color: #0f172a;
+  color: #94a3b8;
 }
 
 .chevron {
-  color: #64748b;
+  color: #475569;
   transition: transform 0.2s ease;
+  margin-left: auto;
 }
 
 .chevron-open {
@@ -169,8 +170,8 @@ const handleLogout = () => {
 
 .dropdown-menu {
   position: absolute;
-  top: calc(100% + 0.5rem);
-  right: 0;
+  bottom: calc(100% + 0.5rem);
+  left: 0;
   min-width: 280px;
   background: white;
   border: 1px solid #e2e8f0;