diff --git a/.claude/skills/saas-ui-redesign/COMPONENT_TEMPLATES.md b/.claude/skills/saas-ui-redesign/COMPONENT_TEMPLATES.md
new file mode 100644
index 00000000..51ce8c51
--- /dev/null
+++ b/.claude/skills/saas-ui-redesign/COMPONENT_TEMPLATES.md
@@ -0,0 +1,905 @@
+# SaaS UI Redesign - Component Templates
+
+Ready-to-use Vue 3 components for modern SaaS interfaces. Copy and customize for your project.
+
+## Sidebar Navigation Component
+
+**File: `src/components/Sidebar.vue`**
+
+```vue
+<template>
+  <aside class="sidebar" :class="{ collapsed }">
+    <!-- Logo / Brand -->
+    <div class="sidebar-header">
+      <router-link to="/" class="logo-link">
+        <span class="logo-icon">🏭</span>
+        <span class="logo-text">{{ appName }}</span>
+      </router-link>
+      <button
+        v-if="isMobile"
+        class="close-btn"
+        @click="toggleCollapse"
+        aria-label="Close sidebar"
+      >
+        ✕
+      </button>
+    </div>
+
+    <!-- Main Navigation -->
+    <nav class="sidebar-nav">
+      <div class="nav-section">
+        <div class="section-title">Main</div>
+        <router-link
+          v-for="item in mainItems"
+          :key="item.path"
+          :to="item.path"
+          class="nav-item"
+          :title="item.label"
+        >
+          <span class="nav-icon">{{ item.icon }}</span>
+          <span class="nav-label">{{ item.label }}</span>
+        </router-link>
+      </div>
+
+      <div class="nav-section">
+        <div class="section-title">Analytics</div>
+        <router-link
+          v-for="item in analyticsItems"
+          :key="item.path"
+          :to="item.path"
+          class="nav-item"
+          :title="item.label"
+        >
+          <span class="nav-icon">{{ item.icon }}</span>
+          <span class="nav-label">{{ item.label }}</span>
+        </router-link>
+      </div>
+    </nav>
+
+    <!-- Footer Info -->
+    <div class="sidebar-footer">
+      <p class="version-text">v{{ appVersion }}</p>
+    </div>
+  </aside>
+</template>
+
+<script>
+import { ref, computed } from 'vue'
+
+export default {
+  name: 'Sidebar',
+  props: {
+    appName: {
+      type: String,
+      default: 'Inventory'
+    },
+    appVersion: {
+      type: String,
+      default: '1.0.0'
+    }
+  },
+  setup() {
+    const collapsed = ref(false)
+    const isMobile = ref(window.innerWidth < 768)
+
+    const mainItems = [
+      { path: '/', label: 'Dashboard', icon: '📊' },
+      { path: '/inventory', label: 'Inventory', icon: '📦' },
+      { path: '/orders', label: 'Orders', icon: '📋' },
+      { path: '/demand', label: 'Demand', icon: '📈' },
+      { path: '/backlog', label: 'Backlog', icon: '⚠️' }
+    ]
+
+    const analyticsItems = [
+      { path: '/spending', label: 'Spending', icon: '💰' },
+      { path: '/reports', label: 'Reports', icon: '📑' }
+    ]
+
+    const toggleCollapse = () => {
+      collapsed.value = !collapsed.value
+    }
+
+    return {
+      collapsed,
+      isMobile,
+      mainItems,
+      analyticsItems,
+      toggleCollapse
+    }
+  }
+}
+</script>
+
+<style scoped>
+.sidebar {
+  position: fixed;
+  left: 0;
+  top: 0;
+  width: 240px;
+  height: 100vh;
+  background: #ffffff;
+  border-right: 1px solid #e2e8f0;
+  display: flex;
+  flex-direction: column;
+  z-index: 1000;
+  overflow-y: auto;
+  transition: transform 0.3s ease;
+}
+
+.sidebar.collapsed {
+  transform: translateX(-100%);
+}
+
+/* Sidebar Header */
+.sidebar-header {
+  padding: 24px 20px;
+  border-bottom: 1px solid #e2e8f0;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+}
+
+.logo-link {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  text-decoration: none;
+  color: #0f172a;
+  font-weight: bold;
+  font-size: 1rem;
+  flex: 1;
+  min-width: 0;
+}
+
+.logo-icon {
+  font-size: 1.5rem;
+  flex-shrink: 0;
+}
+
+.logo-text {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.close-btn {
+  display: none;
+  background: none;
+  border: none;
+  font-size: 1.25rem;
+  cursor: pointer;
+  padding: 4px;
+  color: #64748b;
+}
+
+.close-btn:hover {
+  color: #0f172a;
+}
+
+/* Navigation */
+.sidebar-nav {
+  flex: 1;
+  overflow-y: auto;
+  padding: 16px 8px;
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+}
+
+.nav-section {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.section-title {
+  padding: 8px 16px;
+  font-size: 0.75rem;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: #94a3b8;
+}
+
+.nav-item {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 12px 16px;
+  margin: 0;
+  border-radius: 6px;
+  color: #475569;
+  text-decoration: none;
+  font-size: 0.9375rem;
+  transition: all 0.2s ease;
+  cursor: pointer;
+  white-space: nowrap;
+  overflow: hidden;
+}
+
+.nav-item:hover {
+  background: #f1f5f9;
+  color: #1e293b;
+}
+
+.nav-item.router-link-active {
+  background: #dbeafe;
+  color: #0369a1;
+  font-weight: 600;
+}
+
+.nav-icon {
+  font-size: 1.25rem;
+  flex-shrink: 0;
+}
+
+.nav-label {
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* Sidebar Footer */
+.sidebar-footer {
+  padding: 16px 20px;
+  border-top: 1px solid #e2e8f0;
+  text-align: center;
+}
+
+.version-text {
+  font-size: 0.75rem;
+  color: #94a3b8;
+  margin: 0;
+}
+
+/* Scrollbar styling */
+.sidebar-nav::-webkit-scrollbar {
+  width: 6px;
+}
+
+.sidebar-nav::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.sidebar-nav::-webkit-scrollbar-thumb {
+  background: #cbd5e1;
+  border-radius: 3px;
+}
+
+.sidebar-nav::-webkit-scrollbar-thumb:hover {
+  background: #94a3b8;
+}
+
+/* Mobile Responsive */
+@media (max-width: 768px) {
+  .sidebar {
+    width: 100%;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  }
+
+  .close-btn {
+    display: block;
+  }
+
+  .sidebar.collapsed {
+    transform: translateX(-100%);
+  }
+}
+</style>
+```
+
+## Top Header Component
+
+**File: `src/components/TopHeader.vue`**
+
+```vue
+<template>
+  <header class="top-header">
+    <!-- Left side: Menu toggle + Breadcrumbs -->
+    <div class="header-left">
+      <button
+        class="menu-toggle"
+        @click="$emit('toggle-menu')"
+        aria-label="Toggle sidebar"
+      >
+        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor">
+          <line x1="3" y1="6" x2="21" y2="6" stroke-width="2"></line>
+          <line x1="3" y1="12" x2="21" y2="12" stroke-width="2"></line>
+          <line x1="3" y1="18" x2="21" y2="18" stroke-width="2"></line>
+        </svg>
+      </button>
+
+      <!-- Optional Breadcrumbs -->
+      <nav class="breadcrumbs" v-if="breadcrumbs.length">
+        <span v-for="(crumb, i) in breadcrumbs" :key="i" class="breadcrumb-item">
+          <router-link v-if="crumb.path" :to="crumb.path">
+            {{ crumb.label }}
+          </router-link>
+          <span v-else>{{ crumb.label }}</span>
+          <span v-if="i < breadcrumbs.length - 1" class="separator">/</span>
+        </span>
+      </nav>
+    </div>
+
+    <!-- Right side: Actions + Profile -->
+    <div class="header-right">
+      <!-- Search (optional) -->
+      <div class="search-box" v-if="showSearch">
+        <input
+          type="text"
+          placeholder="Search..."
+          class="search-input"
+          @focus="searchFocus = true"
+          @blur="searchFocus = false"
+        />
+        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor">
+          <circle cx="11" cy="11" r="8"></circle>
+          <path d="m21 21-4.35-4.35"></path>
+        </svg>
+      </div>
+
+      <!-- Notifications -->
+      <button class="header-icon-btn" title="Notifications">
+        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor">
+          <path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"></path>
+          <path d="M13.73 21a2 2 0 0 1-3.46 0"></path>
+        </svg>
+        <span class="notification-badge">3</span>
+      </button>
+
+      <!-- Language Switcher -->
+      <button class="header-icon-btn" title="Language" @click="cycleLanguage">
+        {{ currentLanguage }}
+      </button>
+
+      <!-- Divider -->
+      <div class="divider"></div>
+
+      <!-- Profile Menu -->
+      <div class="profile-menu" v-click-outside="closeProfile">
+        <button class="profile-btn" @click="toggleProfile">
+          <img :src="userAvatar" :alt="userName" class="avatar" />
+          <span class="user-name">{{ userName }}</span>
+          <svg
+            width="16"
+            height="16"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            :class="{ rotated: profileOpen }"
+          >
+            <polyline points="6 9 12 15 18 9"></polyline>
+          </svg>
+        </button>
+
+        <!-- Dropdown Menu -->
+        <div class="dropdown" v-show="profileOpen">
+          <button class="dropdown-item">
+            <span>👤</span> Profile
+          </button>
+          <button class="dropdown-item">
+            <span>⚙️</span> Settings
+          </button>
+          <button class="dropdown-item">
+            <span>📚</span> Help
+          </button>
+          <hr class="dropdown-divider" />
+          <button class="dropdown-item logout">
+            <span>🚪</span> Logout
+          </button>
+        </div>
+      </div>
+    </div>
+  </header>
+</template>
+
+<script>
+import { ref } from 'vue'
+
+export default {
+  name: 'TopHeader',
+  props: {
+    breadcrumbs: {
+      type: Array,
+      default: () => []
+    },
+    userName: {
+      type: String,
+      default: 'John Doe'
+    },
+    userAvatar: {
+      type: String,
+      default: 'https://api.dicebear.com/7.x/avataaars/svg?seed=John'
+    },
+    showSearch: {
+      type: Boolean,
+      default: false
+    }
+  },
+  emits: ['toggle-menu', 'logout'],
+  setup(props, { emit }) {
+    const profileOpen = ref(false)
+    const searchFocus = ref(false)
+    const currentLanguage = ref('EN')
+
+    const toggleProfile = () => {
+      profileOpen.value = !profileOpen.value
+    }
+
+    const closeProfile = () => {
+      profileOpen.value = false
+    }
+
+    const cycleLanguage = () => {
+      currentLanguage.value = currentLanguage.value === 'EN' ? 'JP' : 'EN'
+    }
+
+    return {
+      profileOpen,
+      searchFocus,
+      currentLanguage,
+      toggleProfile,
+      closeProfile,
+      cycleLanguage
+    }
+  }
+}
+</script>
+
+<style scoped>
+.top-header {
+  position: sticky;
+  top: 0;
+  left: 240px;
+  height: 64px;
+  background: #ffffff;
+  border-bottom: 1px solid #e2e8f0;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 24px;
+  z-index: 100;
+  gap: 24px;
+  transition: left 0.3s ease;
+}
+
+.header-left {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  flex: 1;
+  min-width: 0;
+}
+
+.menu-toggle {
+  display: none;
+  background: none;
+  border: none;
+  color: #475569;
+  cursor: pointer;
+  padding: 8px;
+  border-radius: 6px;
+  transition: all 0.2s;
+}
+
+.menu-toggle:hover {
+  background: #f1f5f9;
+  color: #0f172a;
+}
+
+.breadcrumbs {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 0.875rem;
+  color: #64748b;
+  min-width: 0;
+}
+
+.breadcrumb-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  white-space: nowrap;
+}
+
+.breadcrumb-item a {
+  color: #3b82f6;
+  text-decoration: none;
+}
+
+.breadcrumb-item a:hover {
+  text-decoration: underline;
+}
+
+.separator {
+  color: #cbd5e1;
+}
+
+.header-right {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.search-box {
+  position: relative;
+  width: 200px;
+}
+
+.search-input {
+  width: 100%;
+  padding: 8px 12px 8px 36px;
+  border: 1px solid #e2e8f0;
+  border-radius: 6px;
+  font-size: 0.875rem;
+  transition: all 0.2s;
+}
+
+.search-input:focus {
+  outline: none;
+  border-color: #3b82f6;
+  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
+}
+
+.search-box svg {
+  position: absolute;
+  left: 10px;
+  top: 50%;
+  transform: translateY(-50%);
+  color: #94a3b8;
+  pointer-events: none;
+}
+
+.header-icon-btn {
+  position: relative;
+  background: none;
+  border: none;
+  color: #475569;
+  cursor: pointer;
+  padding: 8px;
+  border-radius: 6px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.2s;
+}
+
+.header-icon-btn:hover {
+  background: #f1f5f9;
+  color: #0f172a;
+}
+
+.notification-badge {
+  position: absolute;
+  top: -4px;
+  right: -4px;
+  background: #ef4444;
+  color: white;
+  font-size: 0.65rem;
+  padding: 2px 4px;
+  border-radius: 10px;
+  font-weight: bold;
+}
+
+.divider {
+  width: 1px;
+  height: 32px;
+  background: #e2e8f0;
+}
+
+.profile-menu {
+  position: relative;
+}
+
+.profile-btn {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 4px 8px;
+  border-radius: 6px;
+  transition: all 0.2s;
+  color: #0f172a;
+  font-size: 0.875rem;
+}
+
+.profile-btn:hover {
+  background: #f1f5f9;
+}
+
+.avatar {
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  background: #e2e8f0;
+}
+
+.user-name {
+  font-weight: 500;
+}
+
+.profile-btn svg {
+  transition: transform 0.2s;
+}
+
+.profile-btn svg.rotated {
+  transform: rotate(180deg);
+}
+
+.dropdown {
+  position: absolute;
+  top: 100%;
+  right: 0;
+  margin-top: 8px;
+  background: white;
+  border: 1px solid #e2e8f0;
+  border-radius: 8px;
+  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
+  min-width: 180px;
+  z-index: 1000;
+}
+
+.dropdown-item {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  width: 100%;
+  padding: 12px 16px;
+  background: none;
+  border: none;
+  color: #475569;
+  cursor: pointer;
+  font-size: 0.875rem;
+  transition: all 0.2s;
+  text-align: left;
+}
+
+.dropdown-item:hover {
+  background: #f1f5f9;
+  color: #0f172a;
+}
+
+.dropdown-item.logout {
+  color: #ef4444;
+}
+
+.dropdown-item.logout:hover {
+  background: #fee2e2;
+}
+
+.dropdown-divider {
+  margin: 4px 0;
+  border: none;
+  border-top: 1px solid #e2e8f0;
+}
+
+@media (max-width: 768px) {
+  .top-header {
+    left: 0;
+  }
+
+  .menu-toggle {
+    display: block;
+  }
+
+  .breadcrumbs {
+    display: none;
+  }
+
+  .search-box {
+    display: none;
+  }
+
+  .user-name {
+    display: none;
+  }
+}
+</style>
+
+<!-- Add this to your main.js for the click-outside directive -->
+<script>
+// Define v-click-outside directive
+const vClickOutside = {
+  mounted(el, binding) {
+    el.clickOutsideEvent = function (event) {
+      if (!(el == event.target || el.contains(event.target))) {
+        binding.value(event)
+      }
+    }
+    document.addEventListener('click', el.clickOutsideEvent)
+  },
+  unmounted(el) {
+    document.removeEventListener('click', el.clickOutsideEvent)
+  }
+}
+</script>
+```
+
+## Updated App.vue Layout
+
+**File: `src/App.vue`**
+
+```vue
+<template>
+  <div class="app">
+    <Sidebar ref="sidebarRef" />
+
+    <div class="main-layout" :class="{ 'sidebar-collapsed': sidebarCollapsed }">
+      <TopHeader
+        @toggle-menu="toggleSidebar"
+        :breadcrumbs="currentBreadcrumbs"
+      />
+
+      <FilterBar v-if="showFilters" />
+
+      <main class="main-content">
+        <router-view />
+      </main>
+    </div>
+  </div>
+</template>
+
+<script>
+import { ref, computed } from 'vue'
+import { useRoute } from 'vue-router'
+import Sidebar from './components/Sidebar.vue'
+import TopHeader from './components/TopHeader.vue'
+import FilterBar from './components/FilterBar.vue'
+
+export default {
+  name: 'App',
+  components: {
+    Sidebar,
+    TopHeader,
+    FilterBar
+  },
+  setup() {
+    const sidebarRef = ref(null)
+    const sidebarCollapsed = ref(false)
+    const route = useRoute()
+
+    const showFilters = computed(() => {
+      return !['/'].includes(route.path)
+    })
+
+    const currentBreadcrumbs = computed(() => {
+      const breadcrumbs = [{ label: 'Home', path: '/' }]
+
+      if (route.path !== '/') {
+        const label = route.path.slice(1).charAt(0).toUpperCase() + route.path.slice(2)
+        breadcrumbs.push({ label })
+      }
+
+      return breadcrumbs
+    })
+
+    const toggleSidebar = () => {
+      sidebarCollapsed.value = !sidebarCollapsed.value
+      if (sidebarRef.value) {
+        sidebarRef.value.$el.classList.toggle('collapsed')
+      }
+    }
+
+    return {
+      sidebarRef,
+      sidebarCollapsed,
+      showFilters,
+      currentBreadcrumbs,
+      toggleSidebar
+    }
+  }
+}
+</script>
+
+<style scoped>
+.app {
+  display: flex;
+  min-height: 100vh;
+  background: #f9fafb;
+}
+
+.main-layout {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  margin-left: 240px;
+  transition: margin-left 0.3s ease;
+}
+
+.main-layout.sidebar-collapsed {
+  margin-left: 0;
+}
+
+.main-content {
+  flex: 1;
+  padding: 24px;
+  overflow-y: auto;
+}
+
+@media (max-width: 768px) {
+  .main-layout {
+    margin-left: 0;
+  }
+}
+</style>
+```
+
+## Card Component (Reusable)
+
+**File: `src/components/Card.vue`**
+
+```vue
+<template>
+  <div class="card" :class="{ hoverable, elevated }">
+    <div v-if="$slots.header" class="card-header">
+      <slot name="header"></slot>
+    </div>
+
+    <div class="card-content">
+      <slot></slot>
+    </div>
+
+    <div v-if="$slots.footer" class="card-footer">
+      <slot name="footer"></slot>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Card',
+  props: {
+    hoverable: Boolean,
+    elevated: Boolean
+  }
+}
+</script>
+
+<style scoped>
+.card {
+  background: white;
+  border: 1px solid #e2e8f0;
+  border-radius: 8px;
+  overflow: hidden;
+  transition: all 0.2s ease;
+}
+
+.card.hoverable:hover {
+  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
+  border-color: #cbd5e1;
+}
+
+.card.elevated {
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
+}
+
+.card-header {
+  padding: 20px 24px;
+  border-bottom: 1px solid #e2e8f0;
+}
+
+.card-content {
+  padding: 20px 24px;
+}
+
+.card-footer {
+  padding: 16px 24px;
+  border-top: 1px solid #e2e8f0;
+  background: #f8fafc;
+}
+</style>
+```
+
+---
+
+**Pro Tips:**
+1. Copy these components into your project as-is
+2. Customize colors using CSS variables
+3. Update icon sets to match your design
+4. Test on mobile devices before shipping
+5. Use the components together for best results
+
+All components follow the SaaS design system and spacing guidelines from the main skill documentation.
diff --git a/.claude/skills/saas-ui-redesign/QUICK_START.md b/.claude/skills/saas-ui-redesign/QUICK_START.md
new file mode 100644
index 00000000..48ba4659
--- /dev/null
+++ b/.claude/skills/saas-ui-redesign/QUICK_START.md
@@ -0,0 +1,284 @@
+# SaaS UI Redesign - Quick Start Guide
+
+## 30-Second Overview
+
+Transform your Vue 3 app from top-nav to SaaS-style sidebar layout:
+
+1. **Create sidebar navigation** (left fixed position)
+2. **Move header to top-right** (user profile, language)
+3. **Adjust main content margin** (account for sidebar)
+4. **Apply consistent spacing** (use 8px/16px/24px units)
+5. **Style with colors** (use 6 core colors)
+
+## Before & After
+
+**Before (Top Nav):**
+```
+┌─────────────────────────────┐
+│ Logo │ Nav │ Lang │ Profile │
+├─────────────────────────────┤
+│  Filters                    │
+├─────────────────────────────┤
+│  Main Content               │
+│                             │
+└─────────────────────────────┘
+```
+
+**After (Sidebar SaaS):**
+```
+┌──────┬──────────────────────┐
+│      │ Lang │ Profile       │
+│ Nav  ├──────────────────────┤
+│      │  Filters             │
+│      ├──────────────────────┤
+│      │  Main Content        │
+│      │                      │
+└──────┴──────────────────────┘
+```
+
+## Minimal Implementation (2 hours)
+
+### 1. Create Sidebar Component
+Create `client/src/components/Sidebar.vue`:
+```vue
+<template>
+  <aside class="sidebar" :class="{ collapsed }">
+    <div class="sidebar-logo">App Name</div>
+    <nav class="sidebar-nav">
+      <router-link to="/" class="nav-item" active-class="active">
+        📊 Dashboard
+      </router-link>
+      <router-link to="/inventory" class="nav-item" active-class="active">
+        📦 Inventory
+      </router-link>
+      <router-link to="/orders" class="nav-item" active-class="active">
+        📋 Orders
+      </router-link>
+      <!-- Add more items -->
+    </nav>
+  </aside>
+</template>
+
+<script>
+export default {
+  data() {
+    return { collapsed: false }
+  }
+}
+</script>
+
+<style scoped>
+.sidebar {
+  position: fixed;
+  left: 0;
+  top: 0;
+  width: 240px;
+  height: 100vh;
+  background: white;
+  border-right: 1px solid #e2e8f0;
+  overflow-y: auto;
+  padding: 24px 0;
+  z-index: 1000;
+}
+
+.sidebar-logo {
+  padding: 0 20px;
+  font-weight: bold;
+  margin-bottom: 24px;
+  font-size: 1.125rem;
+}
+
+.sidebar-nav {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.nav-item {
+  padding: 12px 16px;
+  color: #475569;
+  text-decoration: none;
+  transition: all 0.2s;
+  margin: 0 8px;
+  border-radius: 6px;
+}
+
+.nav-item:hover {
+  background: #f1f5f9;
+  color: #1e293b;
+}
+
+.nav-item.active {
+  background: #dbeafe;
+  color: #0369a1;
+  font-weight: 600;
+}
+</style>
+```
+
+### 2. Update App.vue Layout
+```vue
+<template>
+  <div class="app">
+    <Sidebar />
+    
+    <div class="main-layout">
+      <header class="top-header">
+        <div></div>
+        <div class="header-right">
+          <LanguageSwitcher />
+          <ProfileMenu />
+        </div>
+      </header>
+      
+      <FilterBar />
+      
+      <main class="main-content">
+        <router-view />
+      </main>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.app {
+  display: flex;
+  min-height: 100vh;
+  background: #f9fafb;
+}
+
+.main-layout {
+  flex: 1;
+  margin-left: 240px;
+  display: flex;
+  flex-direction: column;
+}
+
+.top-header {
+  height: 64px;
+  background: white;
+  border-bottom: 1px solid #e2e8f0;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 24px;
+  gap: 16px;
+}
+
+.header-right {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+}
+
+.main-content {
+  flex: 1;
+  padding: 24px;
+  overflow-y: auto;
+}
+</style>
+```
+
+### 3. Add Responsive Behavior
+```css
+@media (max-width: 768px) {
+  .sidebar {
+    position: fixed;
+    z-index: 1100;
+    transform: translateX(-100%);
+    transition: transform 0.3s ease;
+  }
+  
+  .sidebar.open {
+    transform: translateX(0);
+  }
+  
+  .main-layout {
+    margin-left: 0;
+  }
+}
+```
+
+## Color Palette Quickstart
+
+Copy-paste these into your CSS:
+```css
+:root {
+  --color-primary: #3b82f6;      /* Blue */
+  --color-text: #0f172a;          /* Dark navy */
+  --color-muted: #64748b;         /* Gray */
+  --color-bg: #f8fafc;            /* Light gray */
+  --color-border: #e2e8f0;        /* Border gray */
+  --color-success: #10b981;       /* Green */
+  --color-warning: #f59e0b;       /* Orange */
+  --color-error: #ef4444;         /* Red */
+}
+```
+
+## Spacing Quickstart
+
+Use these units everywhere:
+- **8px** - Padding inside components
+- **12px** - Gap between small elements
+- **16px** - Gap between items in lists
+- **24px** - Section padding/margins
+- **32px** - Major section breaks
+
+## Checklist
+
+- [ ] Created Sidebar.vue with all nav items
+- [ ] Updated App.vue to use sidebar layout
+- [ ] Added CSS for sidebar styling
+- [ ] Moved header items to top-right
+- [ ] Updated main-content padding
+- [ ] Tested on mobile (sidebar hidden)
+- [ ] Applied consistent colors
+- [ ] Checked spacing alignment
+
+## Common Questions
+
+**Q: How wide should the sidebar be?**
+A: 240px is standard (30% of typical desktop). Use 280px for desktop-only apps.
+
+**Q: Should filters stay below header?**
+A: Yes, between header and main content. Or move inside pages for better UX.
+
+**Q: How do I hide sidebar on mobile?**
+A: Use `transform: translateX(-100%)` and toggle with a button.
+
+**Q: What about dark mode?**
+A: Add `prefers-color-scheme` media query, update CSS variables.
+
+**Q: How do I make multi-level navigation?**
+A: Add a `submenu` array to nav items, use `v-if` to show/hide.
+
+## What Changed from Top-Nav
+
+| Aspect | Top-Nav | Sidebar |
+|--------|---------|---------|
+| Navigation | Horizontal tabs | Vertical links |
+| Content space | Narrow (navbar overhead) | Wide (sidebar fixed) |
+| Discoverability | All items visible | Groups by section |
+| Mobile UX | Cramped | Better (drawer) |
+| Professional feel | Dated | Modern |
+
+## Real-World Example
+
+This codebase transformed from top-nav to sidebar:
+- Added `Sidebar.vue` (50 lines)
+- Modified `App.vue` (30 line changes)
+- Added CSS (60 lines)
+- **Total: 140 lines of code for complete redesign**
+
+## Next Level
+
+Once sidebar works:
+1. **Add animations** - Smooth transitions
+2. **Add icons** - Better visual hierarchy
+3. **Add collapsible groups** - Organize navigation
+4. **Add breadcrumbs** - Show location
+5. **Add search** - Find pages quickly
+
+---
+
+**Total Time: 1-2 hours for basic sidebar redesign**
diff --git a/.claude/skills/saas-ui-redesign/SKILL.md b/.claude/skills/saas-ui-redesign/SKILL.md
new file mode 100644
index 00000000..ac04e834
--- /dev/null
+++ b/.claude/skills/saas-ui-redesign/SKILL.md
@@ -0,0 +1,702 @@
+# SaaS UI Redesign Skill
+
+Transform Vue 3 applications into modern SaaS-style interfaces with professional layouts, sidebar navigation, and consistent design systems.
+
+## What This Skill Does
+
+Guides the complete redesign of a Vue 3 application's UI from a top-navigation layout to a modern SaaS-style interface featuring:
+- Left sidebar navigation (collapsible)
+- Vertical navigation with icons and labels
+- Professional spacing and typography
+- Consistent color system
+- Card-based layouts
+- Responsive design
+- Polished interactions and animations
+
+## When to Use This Skill
+
+- Redesigning an existing Vue 3 application layout
+- Creating a new SaaS product UI
+- Modernizing an outdated application interface
+- Implementing consistent design across multiple views
+- Building professional dashboard/admin interfaces
+
+## Key Design Principles
+
+### 1. Sidebar Navigation Pattern
+**Benefits:**
+- More screen real estate for content
+- Better for complex navigation hierarchies
+- Standard SaaS pattern (users expect it)
+- Supports collapsible state for larger content areas
+
+**Layout Structure:**
+```
+┌─────────────────────────────────┐
+│ Sidebar    │      Main Content  │
+│  (fixed    │                    │
+│  width)    │  (flexible width)  │
+│            │                    │
+└─────────────────────────────────┘
+```
+
+### 2. Consistent Spacing System
+Use a base unit of 4px or 8px for all spacing:
+- **4px grid**: Fine-grained spacing
+- **8px base**: Primary unit
+- **16px**: Common sections
+- **24px**: Between major sections
+- **32px**: Large breaks
+- **48px**: Page-level spacing
+
+### 3. Professional Typography
+- **Headings**: Bold, larger size, limited color variation
+- **Body text**: Medium weight, high contrast
+- **Labels**: Small, slightly muted
+- **Line height**: 1.5 for readability, 1.6 for body text
+
+### 4. Color System
+**Essential Colors:**
+- **Primary**: #3b82f6 (Interactive, buttons, highlights)
+- **Background**: #ffffff (Main content)
+- **Surface**: #f8fafc (Cards, elevated surfaces)
+- **Border**: #e2e8f0 (Dividers, outlines)
+- **Text Primary**: #0f172a (Main text)
+- **Text Secondary**: #64748b (Muted text)
+- **Status**: Green (#10b981), Yellow (#f59e0b), Red (#ef4444), Blue (#3b82f6)
+
+### 5. Component Styling
+**Cards:**
+- Background: white with subtle shadow
+- Border: 1px light border or shadow
+- Border-radius: 8px
+- Padding: 20px or 24px
+
+**Buttons:**
+- Primary: Solid blue, white text
+- Secondary: White background, blue text, border
+- Hover: Darker or opacity change
+- Disabled: Grayed out
+
+**Inputs & Selects:**
+- Border: 1px light gray
+- Padding: 10px 12px
+- Focus: Blue outline or border
+- Background: White
+- Font: Inherit system font
+
+## Implementation Checklist
+
+### Phase 1: Layout Foundation
+- [ ] Create Sidebar.vue component
+- [ ] Create SidebarItem.vue for navigation items
+- [ ] Modify App.vue to use sidebar layout
+- [ ] Add collapse/expand state management
+- [ ] Implement responsive breakpoints
+- [ ] Set up CSS variables for colors and spacing
+
+### Phase 2: Navigation
+- [ ] Move navigation links from top bar to sidebar
+- [ ] Add icon support to navigation items
+- [ ] Implement active link styling
+- [ ] Add "current section" highlighting
+- [ ] Create dropdown/submenu pattern (if needed)
+
+### Phase 3: Header Area
+- [ ] Create TopHeader.vue component
+- [ ] Move user profile menu to top-right
+- [ ] Move language switcher to top-right
+- [ ] Add breadcrumb navigation (optional)
+- [ ] Style consistently with sidebar
+
+### Phase 4: Main Content
+- [ ] Adjust main content width and padding
+- [ ] Update FilterBar layout
+- [ ] Ensure consistent card styling
+- [ ] Apply spacing system throughout
+- [ ] Update table/list layouts
+
+### Phase 5: Polish & Details
+- [ ] Add sidebar collapse animation
+- [ ] Implement hover states
+- [ ] Add focus states for accessibility
+- [ ] Test on mobile/tablet
+- [ ] Fine-tune spacing and alignment
+
+### Phase 6: Consistency Pass
+- [ ] Audit all colors against system
+- [ ] Verify spacing throughout
+- [ ] Check typography consistency
+- [ ] Review interactive states
+- [ ] Test dark mode (if applicable)
+
+## Component Patterns
+
+### 1. Sidebar Component Pattern
+
+**Key Features:**
+- Fixed position (left side)
+- Configurable width (typically 240-280px)
+- Collapsible (toggled state)
+- Smooth animations
+- Mobile-responsive (slides in/out)
+
+**Structure:**
+```vue
+<template>
+  <aside class="sidebar" :class="{ collapsed }">
+    <div class="sidebar-header">
+      <img src="logo.svg" alt="Logo" class="logo">
+      <button v-if="isMobile" @click="toggleSidebar" class="collapse-btn">
+        ✕
+      </button>
+    </div>
+    
+    <nav class="sidebar-nav">
+      <SidebarItem
+        v-for="item in navItems"
+        :key="item.path"
+        :item="item"
+        :active="currentPath === item.path"
+      />
+    </nav>
+    
+    <div class="sidebar-footer">
+      <p class="text-muted">Version 1.0</p>
+    </div>
+  </aside>
+</template>
+
+<script>
+import { ref, computed } from 'vue'
+import { useRoute } from 'vue-router'
+
+export default {
+  setup() {
+    const collapsed = ref(false)
+    const isMobile = ref(window.innerWidth < 768)
+    const route = useRoute()
+    
+    const currentPath = computed(() => route.path)
+    
+    const toggleSidebar = () => {
+      collapsed.value = !collapsed.value
+    }
+    
+    return {
+      collapsed,
+      isMobile,
+      currentPath,
+      toggleSidebar
+    }
+  }
+}
+</script>
+
+<style scoped>
+.sidebar {
+  position: fixed;
+  left: 0;
+  top: 0;
+  width: 240px;
+  height: 100vh;
+  background: #ffffff;
+  border-right: 1px solid #e2e8f0;
+  display: flex;
+  flex-direction: column;
+  transition: transform 0.3s ease;
+  z-index: 1000;
+}
+
+.sidebar.collapsed {
+  transform: translateX(-100%);
+}
+
+.sidebar-header {
+  padding: 24px 20px;
+  border-bottom: 1px solid #e2e8f0;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+}
+
+.logo {
+  height: 32px;
+  width: auto;
+}
+
+.sidebar-nav {
+  flex: 1;
+  overflow-y: auto;
+  padding: 16px 8px;
+}
+
+.sidebar-footer {
+  padding: 16px 20px;
+  border-top: 1px solid #e2e8f0;
+  text-align: center;
+  font-size: 0.875rem;
+  color: #64748b;
+}
+
+@media (max-width: 768px) {
+  .sidebar {
+    width: 100%;
+    position: fixed;
+    z-index: 1100;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+  }
+  
+  .sidebar.collapsed {
+    transform: translateX(-100%);
+  }
+}
+</style>
+```
+
+### 2. Sidebar Item Component
+
+**Interactive Navigation Items:**
+```vue
+<template>
+  <router-link
+    :to="item.path"
+    class="sidebar-item"
+    :class="{ active }"
+    :title="item.label"
+  >
+    <span class="sidebar-item-icon" v-if="item.icon">
+      {{ item.icon }}
+    </span>
+    <span class="sidebar-item-label">
+      {{ item.label }}
+    </span>
+  </router-link>
+</template>
+
+<script>
+export default {
+  props: {
+    item: {
+      type: Object,
+      required: true
+      // { path, label, icon }
+    },
+    active: Boolean
+  }
+}
+</script>
+
+<style scoped>
+.sidebar-item {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 12px 16px;
+  margin: 4px 0;
+  border-radius: 6px;
+  color: #475569;
+  text-decoration: none;
+  transition: all 0.2s ease;
+  font-size: 0.9375rem;
+  cursor: pointer;
+}
+
+.sidebar-item:hover {
+  background: #f1f5f9;
+  color: #1e293b;
+}
+
+.sidebar-item.active {
+  background: #dbeafe;
+  color: #0369a1;
+  font-weight: 600;
+}
+
+.sidebar-item-icon {
+  font-size: 1.25rem;
+  flex-shrink: 0;
+}
+
+.sidebar-item-label {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+</style>
+```
+
+### 3. Top Header Component
+
+**Header with User Menu:**
+```vue
+<template>
+  <header class="top-header">
+    <div class="header-left">
+      <button class="toggle-sidebar-btn" @click="$emit('toggle-sidebar')">
+        ☰
+      </button>
+      <div class="breadcrumbs">
+        <!-- Optional breadcrumb trail -->
+      </div>
+    </div>
+    
+    <div class="header-right">
+      <div class="header-actions">
+        <LanguageSwitcher />
+        <button class="header-icon-btn" title="Notifications">
+          🔔
+        </button>
+      </div>
+      <div class="divider"></div>
+      <ProfileMenu />
+    </div>
+  </header>
+</template>
+
+<style scoped>
+.top-header {
+  position: sticky;
+  top: 0;
+  left: 240px;
+  height: 64px;
+  background: #ffffff;
+  border-bottom: 1px solid #e2e8f0;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 24px;
+  z-index: 100;
+  transition: left 0.3s ease;
+}
+
+.header-left,
+.header-right {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+}
+
+.toggle-sidebar-btn {
+  display: none;
+  background: none;
+  border: none;
+  font-size: 1.5rem;
+  cursor: pointer;
+  padding: 8px;
+}
+
+.header-icon-btn {
+  background: none;
+  border: none;
+  font-size: 1.25rem;
+  cursor: pointer;
+  padding: 8px;
+  color: #64748b;
+}
+
+.header-icon-btn:hover {
+  color: #0f172a;
+}
+
+.divider {
+  width: 1px;
+  height: 32px;
+  background: #e2e8f0;
+}
+
+@media (max-width: 768px) {
+  .top-header {
+    left: 0;
+  }
+  
+  .toggle-sidebar-btn {
+    display: block;
+  }
+}
+</style>
+```
+
+### 4. Main Content Layout
+
+**Adjusted App.vue Structure:**
+```vue
+<template>
+  <div class="app">
+    <Sidebar ref="sidebar" />
+    
+    <div class="main-layout">
+      <TopHeader @toggle-sidebar="toggleSidebar" />
+      
+      <FilterBar />
+      
+      <main class="main-content">
+        <router-view />
+      </main>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.app {
+  display: flex;
+  min-height: 100vh;
+  background: #f9fafb;
+}
+
+.main-layout {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  margin-left: 240px;
+  transition: margin-left 0.3s ease;
+}
+
+.main-content {
+  flex: 1;
+  padding: 24px;
+  overflow-y: auto;
+}
+
+@media (max-width: 768px) {
+  .main-layout {
+    margin-left: 0;
+  }
+}
+</style>
+```
+
+## Spacing Guidelines
+
+**Page Structure:**
+```
+┌──────────────────────────────┐  24px top padding
+│ Page Title / Header          │
+├──────────────────────────────┤
+│                              │  20px vertical between sections
+│ Filter Bar (if present)      │
+├──────────────────────────────┤
+│                              │
+│ Content Area                 │
+│ - Cards with 20px padding    │
+│ - 16px gap between items     │
+│ - 24px between sections      │
+│                              │
+└──────────────────────────────┘  24px bottom padding
+```
+
+**Card Layouts:**
+- Padding: 20px or 24px
+- Gap between cards: 16px (in grid)
+- Icon + text gap: 12px
+- Border-radius: 8px
+- Box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1)
+
+## Typography Scale
+
+```
+H1: 2.0rem (32px) - Page titles
+H2: 1.5rem (24px) - Section titles
+H3: 1.25rem (20px) - Subsection titles
+H4: 1.125rem (18px) - Card titles
+Body: 0.9375rem (15px) - Normal text
+Small: 0.875rem (14px) - Secondary text
+Label: 0.8125rem (13px) - Form labels
+```
+
+**Line Heights:**
+- Headings: 1.2
+- Body text: 1.6
+- Form inputs: 1.5
+
+## Color Usage Guidelines
+
+**When to Use Each Color:**
+- **Primary Blue (#3b82f6)**: Buttons, active states, links, interactive elements
+- **Text Primary (#0f172a)**: Main content, headings
+- **Text Secondary (#64748b)**: Labels, descriptions, muted text
+- **Background (#f9fafb)**: Page background
+- **Surface (#f8fafc)**: Card backgrounds, elevated surfaces
+- **Border (#e2e8f0)**: Dividers, borders, subtle separators
+- **Status Green (#10b981)**: Success, completed, online status
+- **Status Yellow (#f59e0b)**: Warning, pending, caution
+- **Status Red (#ef4444)**: Error, critical, offline
+
+## Responsive Design
+
+**Breakpoints:**
+- Mobile: < 640px (sidebar hidden by default)
+- Tablet: 640px - 1024px (sidebar collapsible)
+- Desktop: > 1024px (sidebar visible)
+
+**Mobile Considerations:**
+- Sidebar becomes overlay/drawer
+- Top header becomes more compact
+- Touch-friendly button sizes (44px minimum)
+- Filter bar may stack vertically
+- Increased horizontal padding
+
+## Implementation Steps
+
+### Step 1: Create Layout Components
+1. Create `Sidebar.vue` with fixed positioning
+2. Create `SidebarItem.vue` for nav items
+3. Create `TopHeader.vue` with user menu
+4. Create CSS variable system for colors/spacing
+
+### Step 2: Update App.vue
+1. Replace `<header>` with new layout structure
+2. Add Sidebar component
+3. Wrap content in `main-layout` div
+4. Adjust router-view placement
+
+### Step 3: Style Main Content
+1. Update `main-content` padding
+2. Adjust margin/left based on sidebar
+3. Update FilterBar styling
+4. Ensure responsive behavior
+
+### Step 4: Update Views
+1. Apply consistent card styling
+2. Update spacing in all views
+3. Use CSS variables for colors
+4. Test layout responsiveness
+
+### Step 5: Polish & Animation
+1. Add smooth transitions for sidebar collapse
+2. Implement hover states
+3. Add focus states
+4. Test accessibility
+
+## Common Pitfalls to Avoid
+
+**❌ Don't:**
+- Use arbitrary padding values - stick to spacing system
+- Mix colors from different systems
+- Create new component styles instead of reusing
+- Skip responsive testing
+- Ignore accessibility (contrast, focus states)
+- Over-animate (keep it subtle, <0.3s)
+
+**✅ Do:**
+- Use CSS variables for all colors and spacing
+- Create reusable component patterns
+- Test on mobile, tablet, desktop
+- Ensure sufficient color contrast (WCAG AA)
+- Keep animations subtle and purposeful
+- Use semantic HTML
+
+## Testing Checklist
+
+**Visual:**
+- [ ] Spacing is consistent throughout
+- [ ] Colors match the design system
+- [ ] Typography hierarchy is clear
+- [ ] Sidebar collapse works smoothly
+- [ ] Hover/active states are distinct
+
+**Responsive:**
+- [ ] Mobile (< 640px) layout works
+- [ ] Tablet (640-1024px) layout works
+- [ ] Desktop (> 1024px) layout works
+- [ ] Sidebar hides on mobile (drawer mode)
+- [ ] No horizontal scrolling at any breakpoint
+
+**Accessibility:**
+- [ ] Color contrast >= 4.5:1 for text
+- [ ] Focus states are visible
+- [ ] Keyboard navigation works
+- [ ] Links are clearly identifiable
+- [ ] Form fields are properly labeled
+
+**Performance:**
+- [ ] Animations are smooth (60fps)
+- [ ] Sidebar collapse is instant
+- [ ] No layout shift issues
+- [ ] Images are optimized
+
+## File Organization
+
+```
+src/
+├── components/
+│   ├── Sidebar.vue
+│   ├── SidebarItem.vue
+│   ├── TopHeader.vue
+│   ├── FilterBar.vue
+│   └── ... other components
+├── styles/
+│   ├── variables.css      # CSS custom properties
+│   ├── typography.css     # Font scales
+│   └── spacing.css        # Spacing utilities
+└── App.vue
+```
+
+## Example CSS Variables
+
+```css
+:root {
+  /* Spacing */
+  --spacing-xs: 4px;
+  --spacing-sm: 8px;
+  --spacing-md: 12px;
+  --spacing-lg: 16px;
+  --spacing-xl: 24px;
+  --spacing-2xl: 32px;
+  
+  /* Colors */
+  --color-primary: #3b82f6;
+  --color-primary-dark: #2563eb;
+  --color-text-primary: #0f172a;
+  --color-text-secondary: #64748b;
+  --color-bg: #ffffff;
+  --color-bg-secondary: #f8fafc;
+  --color-border: #e2e8f0;
+  --color-success: #10b981;
+  --color-warning: #f59e0b;
+  --color-error: #ef4444;
+  
+  /* Typography */
+  --font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+  --font-size-base: 0.9375rem;
+  --line-height-base: 1.6;
+  
+  /* Transitions */
+  --transition-fast: 0.2s ease;
+  --transition-normal: 0.3s ease;
+  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
+  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
+}
+```
+
+## Next Steps After Redesign
+
+1. **User Testing**: Get feedback on new layout
+2. **Performance Audit**: Check bundle size, load times
+3. **Accessibility Audit**: WCAG 2.1 AA compliance
+4. **Cross-browser Testing**: Chrome, Firefox, Safari, Edge
+5. **Mobile Testing**: Real device testing, not just DevTools
+6. **Analytics**: Track user behavior with new layout
+
+## Resources & References
+
+- [Tailwind CSS Spacing](https://tailwindcss.com/docs/customizing-spacing)
+- [Material Design Spacing](https://material.io/design/layout/spacing-methods.html)
+- [Web Content Accessibility Guidelines](https://www.w3.org/WAI/standards-guidelines/wcag/)
+- [Vue 3 Composition API](https://vuejs.org/guide/extras/composition-api-faq.html)
+
+## Questions to Ask
+
+When starting a redesign, clarify:
+1. Do we need a collapsible sidebar or always visible?
+2. Should there be multi-level navigation menus?
+3. Do we need breadcrumb navigation?
+4. Should we support dark mode?
+5. Are there performance constraints?
+6. What's the target audience (mobile-first or desktop)?
+7. Do we need analytics on navigation usage?
+
+---
+
+**Note**: This skill assumes Vue 3 with Composition API. Adapt as needed for your specific project requirements.
diff --git a/CLAUDE.md b/CLAUDE.md
index d2086efa..25f80daf 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -23,6 +23,9 @@ Use the Task tool with these specialized subagents for appropriate tasks:
 - **ALWAYS use Playwright MCP tools** (`mcp__playwright__*`) for browser testing
   - Test against: `http://localhost:3000` (frontend), `http://localhost:8001` (API)
 
+### Code Documentation
+- Always document non-obvious logic changes with comments
+
 ## Stack
 - **Frontend**: Vue 3 + Composition API + Vite (port 3000)
 - **Backend**: Python FastAPI (port 8001)
diff --git a/architecture.html b/architecture.html
new file mode 100644
index 00000000..5391b7cb
--- /dev/null
+++ b/architecture.html
@@ -0,0 +1,947 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Factory Inventory Management System - Architecture</title>
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+
+        body {
+            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+            background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
+            color: #0f172a;
+            line-height: 1.6;
+            padding: 40px 20px;
+        }
+
+        .container {
+            max-width: 1400px;
+            margin: 0 auto;
+            background: white;
+            border-radius: 12px;
+            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
+            overflow: hidden;
+        }
+
+        header {
+            background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
+            color: white;
+            padding: 50px 40px;
+            text-align: center;
+        }
+
+        header h1 {
+            font-size: 2.5em;
+            margin-bottom: 10px;
+            font-weight: 700;
+        }
+
+        header p {
+            font-size: 1.1em;
+            opacity: 0.9;
+        }
+
+        main {
+            padding: 60px 40px;
+        }
+
+        section {
+            margin-bottom: 60px;
+        }
+
+        h2 {
+            font-size: 2em;
+            color: #0f172a;
+            margin-bottom: 30px;
+            padding-bottom: 15px;
+            border-bottom: 3px solid #3b82f6;
+            display: inline-block;
+        }
+
+        h3 {
+            font-size: 1.4em;
+            color: #1e293b;
+            margin-top: 30px;
+            margin-bottom: 15px;
+        }
+
+        /* System Architecture Diagram */
+        .architecture-diagram {
+            display: grid;
+            grid-template-columns: 1fr 1fr;
+            gap: 30px;
+            margin: 30px 0;
+            align-items: start;
+        }
+
+        .diagram-box {
+            background: #f8fafc;
+            border: 2px solid #cbd5e1;
+            border-radius: 8px;
+            padding: 25px;
+            position: relative;
+        }
+
+        .diagram-box h4 {
+            font-size: 1.2em;
+            color: #1e293b;
+            margin-bottom: 15px;
+            padding-bottom: 10px;
+            border-bottom: 2px solid #3b82f6;
+        }
+
+        .tech-stack {
+            list-style: none;
+            margin: 15px 0;
+        }
+
+        .tech-stack li {
+            padding: 8px 0;
+            padding-left: 25px;
+            position: relative;
+        }
+
+        .tech-stack li:before {
+            content: "▸";
+            position: absolute;
+            left: 0;
+            color: #3b82f6;
+            font-weight: bold;
+        }
+
+        .tech-stack li strong {
+            color: #0f172a;
+        }
+
+        /* Data Flow Diagram */
+        .flow-diagram {
+            background: #f8fafc;
+            border: 2px solid #cbd5e1;
+            border-radius: 8px;
+            padding: 40px;
+            margin: 30px 0;
+            position: relative;
+        }
+
+        .flow-step {
+            display: flex;
+            align-items: center;
+            margin-bottom: 30px;
+            position: relative;
+        }
+
+        .flow-step:last-child::after {
+            display: none;
+        }
+
+        .flow-step::after {
+            content: "↓";
+            position: absolute;
+            left: 50%;
+            bottom: -40px;
+            transform: translateX(-50%);
+            font-size: 2em;
+            color: #3b82f6;
+        }
+
+        .step-number {
+            min-width: 50px;
+            height: 50px;
+            background: #3b82f6;
+            color: white;
+            border-radius: 50%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-weight: bold;
+            font-size: 1.2em;
+            margin-right: 20px;
+            flex-shrink: 0;
+        }
+
+        .step-content {
+            flex: 1;
+        }
+
+        .step-content strong {
+            display: block;
+            color: #0f172a;
+            margin-bottom: 5px;
+        }
+
+        .step-content p {
+            color: #475569;
+            font-size: 0.95em;
+        }
+
+        /* API Endpoints */
+        .endpoints-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
+            gap: 20px;
+            margin: 30px 0;
+        }
+
+        .endpoint {
+            background: #f8fafc;
+            border-left: 4px solid #3b82f6;
+            border-radius: 6px;
+            padding: 20px;
+        }
+
+        .endpoint-method {
+            display: inline-block;
+            background: #3b82f6;
+            color: white;
+            padding: 4px 12px;
+            border-radius: 4px;
+            font-weight: bold;
+            font-size: 0.85em;
+            margin-bottom: 8px;
+        }
+
+        .endpoint-path {
+            font-family: 'Courier New', monospace;
+            color: #0f172a;
+            font-weight: bold;
+            margin-bottom: 8px;
+            word-break: break-all;
+        }
+
+        .endpoint-description {
+            color: #475569;
+            font-size: 0.9em;
+        }
+
+        .endpoint-filters {
+            margin-top: 10px;
+            padding-top: 10px;
+            border-top: 1px solid #e2e8f0;
+            font-size: 0.85em;
+            color: #64748b;
+        }
+
+        /* Data Models */
+        .models-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+            gap: 20px;
+            margin: 30px 0;
+        }
+
+        .model {
+            background: #f8fafc;
+            border: 2px solid #cbd5e1;
+            border-radius: 6px;
+            padding: 20px;
+        }
+
+        .model h5 {
+            color: #0f172a;
+            margin-bottom: 15px;
+            font-size: 1.05em;
+            border-bottom: 2px solid #e2e8f0;
+            padding-bottom: 10px;
+        }
+
+        .model-fields {
+            list-style: none;
+        }
+
+        .model-fields li {
+            padding: 8px 0;
+            color: #475569;
+            font-size: 0.9em;
+            font-family: 'Courier New', monospace;
+        }
+
+        .model-fields li .field-name {
+            color: #0f172a;
+            font-weight: bold;
+        }
+
+        .model-fields li .field-type {
+            color: #7c3aed;
+        }
+
+        /* Component Tree */
+        .component-tree {
+            background: #f8fafc;
+            border: 2px solid #cbd5e1;
+            border-radius: 8px;
+            padding: 25px;
+            margin: 30px 0;
+            font-family: 'Courier New', monospace;
+            font-size: 0.9em;
+            color: #475569;
+            overflow-x: auto;
+        }
+
+        .component-tree code {
+            display: block;
+            line-height: 1.6;
+            color: #0f172a;
+        }
+
+        .indent-1 { padding-left: 20px; }
+        .indent-2 { padding-left: 40px; }
+        .indent-3 { padding-left: 60px; }
+
+        .keyword { color: #7c3aed; font-weight: bold; }
+        .string { color: #16a34a; }
+        .comment { color: #94a3b8; font-style: italic; }
+
+        /* Statistics / Features */
+        .stats-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+            gap: 20px;
+            margin: 30px 0;
+        }
+
+        .stat-card {
+            background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
+            color: white;
+            padding: 25px;
+            border-radius: 8px;
+            text-align: center;
+        }
+
+        .stat-card h4 {
+            font-size: 2.5em;
+            margin-bottom: 10px;
+        }
+
+        .stat-card p {
+            font-size: 0.95em;
+            opacity: 0.9;
+        }
+
+        /* Responsive */
+        @media (max-width: 768px) {
+            header h1 {
+                font-size: 1.8em;
+            }
+
+            main {
+                padding: 30px 20px;
+            }
+
+            .architecture-diagram {
+                grid-template-columns: 1fr;
+            }
+
+            h2 {
+                font-size: 1.5em;
+            }
+
+            .endpoints-grid,
+            .models-grid,
+            .stats-grid {
+                grid-template-columns: 1fr;
+            }
+        }
+
+        footer {
+            background: #f8fafc;
+            border-top: 1px solid #e2e8f0;
+            padding: 30px 40px;
+            text-align: center;
+            color: #64748b;
+            font-size: 0.9em;
+        }
+
+        .highlight {
+            background: #fef3c7;
+            padding: 2px 6px;
+            border-radius: 3px;
+            font-weight: 500;
+        }
+
+        /* Badge */
+        .badge {
+            display: inline-block;
+            background: #dbeafe;
+            color: #0369a1;
+            padding: 4px 10px;
+            border-radius: 20px;
+            font-size: 0.85em;
+            font-weight: 600;
+            margin-right: 8px;
+            margin-bottom: 8px;
+        }
+
+        .badge.frontend { background: #dcfce7; color: #166534; }
+        .badge.backend { background: #ede9fe; color: #5b21b6; }
+        .badge.data { background: #fed7aa; color: #92400e; }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <header>
+            <h1>🏭 Factory Inventory Management System</h1>
+            <p>Full-Stack Architecture Overview</p>
+        </header>
+
+        <main>
+            <!-- System Architecture Section -->
+            <section>
+                <h2>System Architecture</h2>
+
+                <div class="architecture-diagram">
+                    <div class="diagram-box">
+                        <h4>Frontend Layer</h4>
+                        <ul class="tech-stack">
+                            <li><strong>Framework:</strong> Vue 3</li>
+                            <li><strong>API Pattern:</strong> Composition API</li>
+                            <li><strong>Build Tool:</strong> Vite</li>
+                            <li><strong>HTTP Client:</strong> Axios</li>
+                            <li><strong>Port:</strong> 3000</li>
+                            <li><strong>State Management:</strong> Composables</li>
+                            <li><strong>Internationalization:</strong> useI18n (EN, JP)</li>
+                        </ul>
+                    </div>
+
+                    <div class="diagram-box">
+                        <h4>Backend Layer</h4>
+                        <ul class="tech-stack">
+                            <li><strong>Framework:</strong> FastAPI (Python)</li>
+                            <li><strong>Data Validation:</strong> Pydantic</li>
+                            <li><strong>CORS Support:</strong> Enabled</li>
+                            <li><strong>Port:</strong> 8001</li>
+                            <li><strong>API Docs:</strong> /docs endpoint</li>
+                            <li><strong>Data Storage:</strong> In-Memory (JSON)</li>
+                            <li><strong>Filtering:</strong> Query parameters</li>
+                        </ul>
+                    </div>
+
+                    <div class="diagram-box">
+                        <h4>Data Layer</h4>
+                        <ul class="tech-stack">
+                            <li><strong>Format:</strong> JSON files</li>
+                            <li><strong>Location:</strong> /server/data/</li>
+                            <li><strong>Loading:</strong> Runtime initialization</li>
+                            <li><strong>Datasets:</strong> 7 core files</li>
+                            <li><strong>Persistence:</strong> Not persistent (demo)</li>
+                            <li><strong>Size:</strong> Small (in-memory)</li>
+                            <li><strong>Access:</strong> Direct Python loading</li>
+                        </ul>
+                    </div>
+
+                    <div class="diagram-box">
+                        <h4>Key Features</h4>
+                        <ul class="tech-stack">
+                            <li><span class="badge">Multi-filter</span> Warehouse, Category, Status, Time Period</li>
+                            <li><span class="badge">Real-time</span> In-memory data filtering</li>
+                            <li><span class="badge">Type-safe</span> Pydantic validation</li>
+                            <li><span class="badge">RESTful</span> Standard HTTP API</li>
+                            <li><span class="badge">Responsive</span> Mobile-friendly UI</li>
+                            <li><span class="badge">Localized</span> English & Japanese support</li>
+                            <li><span class="badge">Auto-docs</span> Swagger UI at /docs</li>
+                        </ul>
+                    </div>
+                </div>
+            </section>
+
+            <!-- Data Flow Section -->
+            <section>
+                <h2>Data Flow</h2>
+                <p style="margin-bottom: 30px; color: #475569;">How requests flow through the system from frontend to backend and back</p>
+
+                <div class="flow-diagram">
+                    <div class="flow-step">
+                        <div class="step-number">1</div>
+                        <div class="step-content">
+                            <strong>User Interaction (Frontend)</strong>
+                            <p>Vue component detects user action (filter selection, page navigation, etc.)</p>
+                        </div>
+                    </div>
+
+                    <div class="flow-step">
+                        <div class="step-number">2</div>
+                        <div class="step-content">
+                            <strong>API Call</strong>
+                            <p>Component calls <code>api.js</code> which constructs HTTP request with query parameters</p>
+                        </div>
+                    </div>
+
+                    <div class="flow-step">
+                        <div class="step-number">3</div>
+                        <div class="step-content">
+                            <strong>HTTP Request</strong>
+                            <p>Axios sends GET request to FastAPI backend on http://localhost:8001/api/{endpoint}</p>
+                        </div>
+                    </div>
+
+                    <div class="flow-step">
+                        <div class="step-number">4</div>
+                        <div class="step-content">
+                            <strong>Backend Processing</strong>
+                            <p>FastAPI endpoint receives request, applies filters to in-memory data</p>
+                        </div>
+                    </div>
+
+                    <div class="flow-step">
+                        <div class="step-number">5</div>
+                        <div class="step-content">
+                            <strong>Validation & Response</strong>
+                            <p>Pydantic models validate data, convert to JSON, return 200 OK response</p>
+                        </div>
+                    </div>
+
+                    <div class="flow-step">
+                        <div class="step-number">6</div>
+                        <div class="step-content">
+                            <strong>Data Update</strong>
+                            <p>Frontend receives JSON response, updates reactive ref/computed properties</p>
+                        </div>
+                    </div>
+
+                    <div class="flow-step">
+                        <div class="step-number">7</div>
+                        <div class="step-content">
+                            <strong>UI Render</strong>
+                            <p>Vue re-renders components with new data, displays results to user</p>
+                        </div>
+                    </div>
+                </div>
+            </section>
+
+            <!-- Frontend Architecture -->
+            <section>
+                <h2>Frontend Architecture</h2>
+
+                <h3>Views (Pages)</h3>
+                <div class="endpoints-grid">
+                    <div class="endpoint">
+                        <div class="endpoint-method">VIEW</div>
+                        <div class="endpoint-path">Dashboard</div>
+                        <div class="endpoint-description">Main overview with summary cards, charts, and KPIs</div>
+                    </div>
+                    <div class="endpoint">
+                        <div class="endpoint-method">VIEW</div>
+                        <div class="endpoint-path">Inventory</div>
+                        <div class="endpoint-description">Warehouse inventory management and stock levels</div>
+                    </div>
+                    <div class="endpoint">
+                        <div class="endpoint-method">VIEW</div>
+                        <div class="endpoint-path">Orders</div>
+                        <div class="endpoint-description">Customer order tracking and management</div>
+                    </div>
+                    <div class="endpoint">
+                        <div class="endpoint-method">VIEW</div>
+                        <div class="endpoint-path">Demand</div>
+                        <div class="endpoint-description">Demand forecasting and predictions</div>
+                    </div>
+                    <div class="endpoint">
+                        <div class="endpoint-method">VIEW</div>
+                        <div class="endpoint-path">Backlog</div>
+                        <div class="endpoint-description">Unfulfilled orders and backlog analysis</div>
+                    </div>
+                    <div class="endpoint">
+                        <div class="endpoint-method">VIEW</div>
+                        <div class="endpoint-path">Spending</div>
+                        <div class="endpoint-description">Cost analysis and spending trends</div>
+                    </div>
+                    <div class="endpoint">
+                        <div class="endpoint-method">VIEW</div>
+                        <div class="endpoint-path">Reports</div>
+                        <div class="endpoint-description">Custom reports and analytics</div>
+                    </div>
+                </div>
+
+                <h3>Component Hierarchy</h3>
+                <div class="component-tree">
+                    <code><span class="keyword">App.vue</span> (Root Component)</code>
+                    <code class="indent-1">├── <span class="keyword">FilterBar.vue</span> <span class="comment">// Warehouse, Category, Status, Month filters</span></code>
+                    <code class="indent-1">├── <span class="keyword">ProfileMenu.vue</span> <span class="comment">// User profile & language switcher</span></code>
+                    <code class="indent-1">├── <span class="keyword">Router Views</span></code>
+                    <code class="indent-2">│   ├── <span class="keyword">Dashboard.vue</span></code>
+                    <code class="indent-2">│   ├── <span class="keyword">Inventory.vue</span></code>
+                    <code class="indent-2">│   ├── <span class="keyword">Orders.vue</span></code>
+                    <code class="indent-2">│   ├── <span class="keyword">Demand.vue</span></code>
+                    <code class="indent-2">│   ├── <span class="keyword">Backlog.vue</span></code>
+                    <code class="indent-2">│   ├── <span class="keyword">Spending.vue</span></code>
+                    <code class="indent-2">└── <span class="keyword">Reports.vue</span></code>
+                    <code class="indent-1">└── <span class="keyword">Modals</span> <span class="comment">// Details & information modals</span></code>
+                    <code class="indent-2">├── <span class="keyword">InventoryDetailModal.vue</span></code>
+                    <code class="indent-2">├── <span class="keyword">OrderDetailModal.vue</span></code>
+                    <code class="indent-2">├── <span class="keyword">BacklogDetailModal.vue</span></code>
+                    <code class="indent-2">└── <span class="keyword">CostDetailModal.vue</span></code>
+                </div>
+
+                <h3>Composables (Shared Logic)</h3>
+                <div class="endpoints-grid">
+                    <div class="endpoint">
+                        <div class="endpoint-method">COMPOSABLE</div>
+                        <div class="endpoint-path">useAuth</div>
+                        <div class="endpoint-description">User authentication and session management</div>
+                    </div>
+                    <div class="endpoint">
+                        <div class="endpoint-method">COMPOSABLE</div>
+                        <div class="endpoint-path">useFilters</div>
+                        <div class="endpoint-description">Global filter state across all views</div>
+                    </div>
+                    <div class="endpoint">
+                        <div class="endpoint-method">COMPOSABLE</div>
+                        <div class="endpoint-path">useI18n</div>
+                        <div class="endpoint-description">Internationalization (English, Japanese)</div>
+                    </div>
+                </div>
+            </section>
+
+            <!-- Backend API Section -->
+            <section>
+                <h2>Backend API Endpoints</h2>
+
+                <h3>Inventory Endpoints</h3>
+                <div class="endpoints-grid">
+                    <div class="endpoint">
+                        <div class="endpoint-method">GET</div>
+                        <div class="endpoint-path">/api/inventory</div>
+                        <div class="endpoint-description">List all inventory items</div>
+                        <div class="endpoint-filters"><strong>Filters:</strong> warehouse, category</div>
+                    </div>
+                    <div class="endpoint">
+                        <div class="endpoint-method">GET</div>
+                        <div class="endpoint-path">/api/inventory/{id}</div>
+                        <div class="endpoint-description">Get single inventory item details</div>
+                    </div>
+                </div>
+
+                <h3>Order Endpoints</h3>
+                <div class="endpoints-grid">
+                    <div class="endpoint">
+                        <div class="endpoint-method">GET</div>
+                        <div class="endpoint-path">/api/orders</div>
+                        <div class="endpoint-description">List all orders</div>
+                        <div class="endpoint-filters"><strong>Filters:</strong> warehouse, category, status, month</div>
+                    </div>
+                    <div class="endpoint">
+                        <div class="endpoint-method">GET</div>
+                        <div class="endpoint-path">/api/orders/{id}</div>
+                        <div class="endpoint-description">Get single order details</div>
+                    </div>
+                </div>
+
+                <h3>Dashboard & Analytics Endpoints</h3>
+                <div class="endpoints-grid">
+                    <div class="endpoint">
+                        <div class="endpoint-method">GET</div>
+                        <div class="endpoint-path">/api/dashboard/summary</div>
+                        <div class="endpoint-description">Dashboard KPIs and summary metrics</div>
+                        <div class="endpoint-filters"><strong>Filters:</strong> warehouse, category, status, month</div>
+                    </div>
+                    <div class="endpoint">
+                        <div class="endpoint-method">GET</div>
+                        <div class="endpoint-path">/api/demand</div>
+                        <div class="endpoint-description">Demand forecasts (no filters)</div>
+                    </div>
+                    <div class="endpoint">
+                        <div class="endpoint-method">GET</div>
+                        <div class="endpoint-path">/api/backlog</div>
+                        <div class="endpoint-description">Backlog items (no filters)</div>
+                    </div>
+                </div>
+
+                <h3>Spending Endpoints</h3>
+                <div class="endpoints-grid">
+                    <div class="endpoint">
+                        <div class="endpoint-method">GET</div>
+                        <div class="endpoint-path">/api/spending/summary</div>
+                        <div class="endpoint-description">Total spending summary</div>
+                    </div>
+                    <div class="endpoint">
+                        <div class="endpoint-method">GET</div>
+                        <div class="endpoint-path">/api/spending/monthly</div>
+                        <div class="endpoint-description">Monthly spending breakdown</div>
+                    </div>
+                    <div class="endpoint">
+                        <div class="endpoint-method">GET</div>
+                        <div class="endpoint-path">/api/spending/categories</div>
+                        <div class="endpoint-description">Spending by category</div>
+                    </div>
+                    <div class="endpoint">
+                        <div class="endpoint-method">GET</div>
+                        <div class="endpoint-path">/api/spending/transactions</div>
+                        <div class="endpoint-description">Recent transactions list</div>
+                    </div>
+                </div>
+            </section>
+
+            <!-- Data Models Section -->
+            <section>
+                <h2>Pydantic Data Models</h2>
+
+                <div class="models-grid">
+                    <div class="model">
+                        <h5>📦 InventoryItem</h5>
+                        <ul class="model-fields">
+                            <li><span class="field-name">id</span>: <span class="field-type">str</span></li>
+                            <li><span class="field-name">sku</span>: <span class="field-type">str</span></li>
+                            <li><span class="field-name">name</span>: <span class="field-type">str</span></li>
+                            <li><span class="field-name">category</span>: <span class="field-type">str</span></li>
+                            <li><span class="field-name">warehouse</span>: <span class="field-type">str</span></li>
+                            <li><span class="field-name">quantity_on_hand</span>: <span class="field-type">int</span></li>
+                            <li><span class="field-name">reorder_point</span>: <span class="field-type">int</span></li>
+                            <li><span class="field-name">unit_cost</span>: <span class="field-type">float</span></li>
+                            <li><span class="field-name">location</span>: <span class="field-type">str</span></li>
+                        </ul>
+                    </div>
+
+                    <div class="model">
+                        <h5>📋 Order</h5>
+                        <ul class="model-fields">
+                            <li><span class="field-name">id</span>: <span class="field-type">str</span></li>
+                            <li><span class="field-name">order_number</span>: <span class="field-type">str</span></li>
+                            <li><span class="field-name">customer</span>: <span class="field-type">str</span></li>
+                            <li><span class="field-name">items</span>: <span class="field-type">List[dict]</span></li>
+                            <li><span class="field-name">status</span>: <span class="field-type">str</span></li>
+                            <li><span class="field-name">order_date</span>: <span class="field-type">str</span></li>
+                            <li><span class="field-name">expected_delivery</span>: <span class="field-type">str</span></li>
+                            <li><span class="field-name">total_value</span>: <span class="field-type">float</span></li>
+                        </ul>
+                    </div>
+
+                    <div class="model">
+                        <h5>📊 DemandForecast</h5>
+                        <ul class="model-fields">
+                            <li><span class="field-name">id</span>: <span class="field-type">str</span></li>
+                            <li><span class="field-name">item_sku</span>: <span class="field-type">str</span></li>
+                            <li><span class="field-name">item_name</span>: <span class="field-type">str</span></li>
+                            <li><span class="field-name">current_demand</span>: <span class="field-type">int</span></li>
+                            <li><span class="field-name">forecasted_demand</span>: <span class="field-type">int</span></li>
+                            <li><span class="field-name">trend</span>: <span class="field-type">str</span></li>
+                            <li><span class="field-name">period</span>: <span class="field-type">str</span></li>
+                        </ul>
+                    </div>
+
+                    <div class="model">
+                        <h5>📦 BacklogItem</h5>
+                        <ul class="model-fields">
+                            <li><span class="field-name">id</span>: <span class="field-type">str</span></li>
+                            <li><span class="field-name">order_id</span>: <span class="field-type">str</span></li>
+                            <li><span class="field-name">item_sku</span>: <span class="field-type">str</span></li>
+                            <li><span class="field-name">item_name</span>: <span class="field-type">str</span></li>
+                            <li><span class="field-name">quantity_needed</span>: <span class="field-type">int</span></li>
+                            <li><span class="field-name">quantity_available</span>: <span class="field-type">int</span></li>
+                            <li><span class="field-name">days_delayed</span>: <span class="field-type">int</span></li>
+                        </ul>
+                    </div>
+                </div>
+            </section>
+
+            <!-- Data Files Section -->
+            <section>
+                <h2>Data Files</h2>
+
+                <h3>JSON Data Sources</h3>
+                <div class="endpoints-grid">
+                    <div class="endpoint">
+                        <div class="endpoint-method">DATA</div>
+                        <div class="endpoint-path">inventory.json</div>
+                        <div class="endpoint-description">Stock levels, locations, and inventory metadata</div>
+                    </div>
+                    <div class="endpoint">
+                        <div class="endpoint-method">DATA</div>
+                        <div class="endpoint-path">orders.json</div>
+                        <div class="endpoint-description">Customer orders with dates and status</div>
+                    </div>
+                    <div class="endpoint">
+                        <div class="endpoint-method">DATA</div>
+                        <div class="endpoint-path">demand_forecasts.json</div>
+                        <div class="endpoint-description">Predicted demand by SKU</div>
+                    </div>
+                    <div class="endpoint">
+                        <div class="endpoint-method">DATA</div>
+                        <div class="endpoint-path">backlog_items.json</div>
+                        <div class="endpoint-description">Unfulfilled orders and delays</div>
+                    </div>
+                    <div class="endpoint">
+                        <div class="endpoint-method">DATA</div>
+                        <div class="endpoint-path">spending.json</div>
+                        <div class="endpoint-description">Summary, monthly, and category spending</div>
+                    </div>
+                    <div class="endpoint">
+                        <div class="endpoint-method">DATA</div>
+                        <div class="endpoint-path">transactions.json</div>
+                        <div class="endpoint-description">Transaction history and details</div>
+                    </div>
+                    <div class="endpoint">
+                        <div class="endpoint-method">DATA</div>
+                        <div class="endpoint-path">purchase_orders.json</div>
+                        <div class="endpoint-description">Outgoing purchase orders to suppliers</div>
+                    </div>
+                </div>
+            </section>
+
+            <!-- Key Features Section -->
+            <section>
+                <h2>Key Features & Patterns</h2>
+
+                <h3>Filtering System</h3>
+                <p style="margin-bottom: 20px; color: #475569;">The system supports 4 primary filters that cascade across all applicable views:</p>
+                <div class="stats-grid">
+                    <div class="stat-card" style="background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);">
+                        <h4>4</h4>
+                        <p>Filter Types</p>
+                    </div>
+                    <div class="stat-card" style="background: linear-gradient(135deg, #10b981 0%, #059669 100%);">
+                        <h4>∞</h4>
+                        <p>Combinations</p>
+                    </div>
+                    <div class="stat-card" style="background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);">
+                        <h4>&lt;50ms</h4>
+                        <p>Response Time</p>
+                    </div>
+                    <div class="stat-card" style="background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);">
+                        <h4>Real-time</h4>
+                        <p>Updates</p>
+                    </div>
+                </div>
+
+                <h3>Filter Types</h3>
+                <div class="endpoints-grid">
+                    <div class="endpoint">
+                        <div class="endpoint-method">FILTER</div>
+                        <div class="endpoint-path">Warehouse</div>
+                        <div class="endpoint-description">Select by physical warehouse location</div>
+                    </div>
+                    <div class="endpoint">
+                        <div class="endpoint-method">FILTER</div>
+                        <div class="endpoint-path">Category</div>
+                        <div class="endpoint-description">Filter by product category</div>
+                    </div>
+                    <div class="endpoint">
+                        <div class="endpoint-method">FILTER</div>
+                        <div class="endpoint-path">Order Status</div>
+                        <div class="endpoint-description">Filter orders by status (pending, shipped, etc.)</div>
+                    </div>
+                    <div class="endpoint">
+                        <div class="endpoint-method">FILTER</div>
+                        <div class="endpoint-path">Time Period</div>
+                        <div class="endpoint-description">Filter by month or quarter (2025)</div>
+                    </div>
+                </div>
+
+                <h3>Architecture Patterns</h3>
+                <div class="endpoints-grid">
+                    <div class="endpoint">
+                        <div class="endpoint-method">PATTERN</div>
+                        <div class="endpoint-path">Composition API</div>
+                        <div class="endpoint-description">Vue 3 with setup() for better code organization and reusability</div>
+                    </div>
+                    <div class="endpoint">
+                        <div class="endpoint-method">PATTERN</div>
+                        <div class="endpoint-path">Composables</div>
+                        <div class="endpoint-description">Reusable logic for auth, filters, and i18n</div>
+                    </div>
+                    <div class="endpoint">
+                        <div class="endpoint-method">PATTERN</div>
+                        <div class="endpoint-path">API Layer Abstraction</div>
+                        <div class="endpoint-description">Centralized api.js for all HTTP calls</div>
+                    </div>
+                    <div class="endpoint">
+                        <div class="endpoint-method">PATTERN</div>
+                        <div class="endpoint-path">In-Memory Filtering</div>
+                        <div class="endpoint-description">Backend filters data in-memory without database queries</div>
+                    </div>
+                    <div class="endpoint">
+                        <div class="endpoint-method">PATTERN</div>
+                        <div class="endpoint-path">Type Validation</div>
+                        <div class="endpoint-description">Pydantic models ensure type safety on backend</div>
+                    </div>
+                    <div class="endpoint">
+                        <div class="endpoint-method">PATTERN</div>
+                        <div class="endpoint-path">Modal Components</div>
+                        <div class="endpoint-description">Reusable detail modals for depth exploration</div>
+                    </div>
+                </div>
+            </section>
+
+            <!-- Getting Started Section -->
+            <section>
+                <h2>Getting Started</h2>
+
+                <h3>Development Environment</h3>
+                <div style="background: #f8fafc; border-left: 4px solid #10b981; border-radius: 6px; padding: 25px; margin: 20px 0; font-family: 'Courier New', monospace; font-size: 0.9em;">
+                    <div style="margin-bottom: 20px;">
+                        <strong style="color: #0f172a; display: block; margin-bottom: 10px;">Start Backend:</strong>
+                        <code style="color: #475569;">cd server && uv run python main.py</code><br>
+                        <span style="color: #64748b; font-size: 0.85em;">Server: http://localhost:8001</span><br>
+                        <span style="color: #64748b; font-size: 0.85em;">API Docs: http://localhost:8001/docs</span>
+                    </div>
+                    <div>
+                        <strong style="color: #0f172a; display: block; margin-bottom: 10px;">Start Frontend:</strong>
+                        <code style="color: #475569;">cd client && npm install && npm run dev</code><br>
+                        <span style="color: #64748b; font-size: 0.85em;">Frontend: http://localhost:3000</span>
+                    </div>
+                </div>
+
+                <h3>Project Structure</h3>
+                <div class="component-tree">
+                    <code>inventory-management/</code>
+                    <code class="indent-1">├── <span class="keyword">client/</span> <span class="comment">// Vue 3 Frontend</span></code>
+                    <code class="indent-2">│   ├── src/</code>
+                    <code class="indent-3">│   │   ├── views/          <span class="comment">// Page components</span></code>
+                    <code class="indent-3">│   │   ├── components/     <span class="comment">// Reusable UI components</span></code>
+                    <code class="indent-3">│   │   ├── composables/    <span class="comment">// Shared logic</span></code>
+                    <code class="indent-3">│   │   ├── locales/        <span class="comment">// i18n (EN, JP)</span></code>
+                    <code class="indent-3">│   │   ├── api.js          <span class="comment">// HTTP client</span></code>
+                    <code class="indent-3">│   │   └── main.js         <span class="comment">// App entry</span></code>
+                    <code class="indent-2">│   └── vite.config.js</code>
+                    <code class="indent-1">├── <span class="keyword">server/</span> <span class="comment">// FastAPI Backend</span></code>
+                    <code class="indent-2">│   ├── main.py             <span class="comment">// API endpoints</span></code>
+                    <code class="indent-2">│   ├── mock_data.py        <span class="comment">// Data loader</span></code>
+                    <code class="indent-2">│   └── data/               <span class="comment">// JSON data files</span></code>
+                    <code class="indent-1">├── <span class="keyword">tests/</span> <span class="comment">// Pytest test suite</span></code>
+                    <code class="indent-1">└── <span class="keyword">CLAUDE.md</span> <span class="comment">// This documentation</span></code>
+                </div>
+            </section>
+
+            <!-- Performance Stats Section -->
+            <section>
+                <h2>System Statistics</h2>
+
+                <div class="stats-grid">
+                    <div class="stat-card" style="background: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%);">
+                        <h4>7</h4>
+                        <p>Views</p>
+                    </div>
+                    <div class="stat-card" style="background: linear-gradient(135deg, #ec4899 0%, #db2777 100%);">
+                        <h4>15+</h4>
+                        <p>API Endpoints</p>
+                    </div>
+                    <div class="stat-card" style="background: linear-gradient(135deg, #14b8a6 0%, #0d9488 100%);">
+                        <h4>7</h4>
+                        <p>Data Files</p>
+                    </div>
+                    <div class="stat-card" style="background: linear-gradient(135deg, #f97316 0%, #ea580c 100%);">
+                        <h4>2</h4>
+                        <p>Languages</p>
+                    </div>
+                    <div class="stat-card" style="background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);">
+                        <h4>4</h4>
+                        <p>Core Filters</p>
+                    </div>
+                    <div class="stat-card" style="background: linear-gradient(135deg, #a855f7 0%, #9333ea 100%);">
+                        <h4>100%</h4>
+                        <p>Type-Safe</p>
+                    </div>
+                </div>
+            </section>
+
+        </main>
+
+        <footer>
+            <p>Factory Inventory Management System Architecture Documentation</p>
+            <p style="font-size: 0.85em; margin-top: 10px; opacity: 0.7;">Full-stack demo application with Vue 3 + FastAPI • Generated on 2026-05-26</p>
+        </footer>
+    </div>
+</body>
+</html>
diff --git a/client/src/App.vue b/client/src/App.vue
index c2da05a5..28ad9fe0 100644
--- a/client/src/App.vue
+++ b/client/src/App.vue
@@ -1,42 +1,22 @@
 <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>
-        <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>
-        <LanguageSwitcher />
-        <ProfileMenu
-          @show-profile-details="showProfileDetails = true"
-          @show-tasks="showTasks = true"
-        />
-      </div>
-    </header>
-    <FilterBar />
-    <main class="main-content">
-      <router-view />
-    </main>
+  <div class="app" :class="{ 'sidebar-collapsed': sidebarCollapsed }">
+    <Sidebar
+      :collapsed="sidebarCollapsed"
+      :mobile-open="mobileSidebarOpen"
+      @toggle-collapse="sidebarCollapsed = !sidebarCollapsed"
+      @close-mobile="mobileSidebarOpen = false"
+    />
+
+    <div class="app-body">
+      <TopHeader
+        @open-mobile-sidebar="mobileSidebarOpen = true"
+        @show-profile-details="showProfileDetails = true"
+        @show-tasks="showTasks = true"
+      />
+      <main class="main-content">
+        <router-view />
+      </main>
+    </div>
 
     <ProfileDetailsModal
       :is-open="showProfileDetails"
@@ -59,20 +39,18 @@ import { ref, onMounted, computed } from 'vue'
 import { api } from './api'
 import { useAuth } from './composables/useAuth'
 import { useI18n } from './composables/useI18n'
-import FilterBar from './components/FilterBar.vue'
-import ProfileMenu from './components/ProfileMenu.vue'
+import Sidebar from './components/Sidebar.vue'
+import TopHeader from './components/TopHeader.vue'
 import ProfileDetailsModal from './components/ProfileDetailsModal.vue'
 import TasksModal from './components/TasksModal.vue'
-import LanguageSwitcher from './components/LanguageSwitcher.vue'
 
 export default {
   name: 'App',
   components: {
-    FilterBar,
-    ProfileMenu,
+    Sidebar,
+    TopHeader,
     ProfileDetailsModal,
-    TasksModal,
-    LanguageSwitcher
+    TasksModal
   },
   setup() {
     const { currentUser } = useAuth()
@@ -80,6 +58,8 @@ export default {
     const showProfileDetails = ref(false)
     const showTasks = ref(false)
     const apiTasks = ref([])
+    const sidebarCollapsed = ref(false)
+    const mobileSidebarOpen = ref(false)
 
     // Merge mock tasks from currentUser with API tasks
     const tasks = computed(() => {
@@ -97,7 +77,6 @@ export default {
     const addTask = async (taskData) => {
       try {
         const newTask = await api.createTask(taskData)
-        // Add new task to the beginning of the array
         apiTasks.value.unshift(newTask)
       } catch (err) {
         console.error('Failed to add task:', err)
@@ -106,17 +85,13 @@ export default {
 
     const deleteTask = async (taskId) => {
       try {
-        // Check if it's a mock task (from currentUser)
         const isMockTask = currentUser.value.tasks.some(t => t.id === taskId)
-
         if (isMockTask) {
-          // Remove from mock tasks
           const index = currentUser.value.tasks.findIndex(t => t.id === taskId)
           if (index !== -1) {
             currentUser.value.tasks.splice(index, 1)
           }
         } else {
-          // Remove from API tasks
           await api.deleteTask(taskId)
           apiTasks.value = apiTasks.value.filter(t => t.id !== taskId)
         }
@@ -127,14 +102,10 @@ export default {
 
     const toggleTask = async (taskId) => {
       try {
-        // Check if it's a mock task (from currentUser)
         const mockTask = currentUser.value.tasks.find(t => t.id === taskId)
-
         if (mockTask) {
-          // Toggle mock task status
           mockTask.status = mockTask.status === 'pending' ? 'completed' : 'pending'
         } else {
-          // Toggle API task
           const updatedTask = await api.toggleTask(taskId)
           const index = apiTasks.value.findIndex(t => t.id === taskId)
           if (index !== -1) {
@@ -155,13 +126,99 @@ export default {
       tasks,
       addTask,
       deleteTask,
-      toggleTask
+      toggleTask,
+      sidebarCollapsed,
+      mobileSidebarOpen
     }
   }
 }
 </script>
 
 <style>
+/* ============================================================
+   DESIGN TOKENS — Indigo/Violet SaaS palette
+   ============================================================ */
+:root {
+  /* Surfaces & background */
+  --color-bg: #f8fafc;
+  --color-surface: #ffffff;
+  --color-surface-alt: #f1f5f9;
+  --color-surface-sunken: #f8fafc;
+
+  /* Borders */
+  --color-border: #e2e8f0;
+  --color-border-strong: #cbd5e1;
+  --color-border-subtle: #f1f5f9;
+
+  /* Text */
+  --color-text-primary: #0f172a;
+  --color-text-secondary: #334155;
+  --color-text-muted: #64748b;
+  --color-text-faint: #94a3b8;
+
+  /* Brand — indigo */
+  --color-primary: #6366f1;
+  --color-primary-hover: #4f46e5;
+  --color-primary-active: #4338ca;
+  --color-primary-soft: #eef2ff;
+  --color-primary-soft-strong: #e0e7ff;
+  --color-primary-text: #4338ca;
+
+  /* Accent — violet */
+  --color-accent: #8b5cf6;
+  --color-accent-soft: #f5f3ff;
+  --color-accent-text: #6d28d9;
+
+  /* Status */
+  --color-success: #10b981;
+  --color-success-soft: #ecfdf5;
+  --color-success-text: #047857;
+
+  --color-warning: #f59e0b;
+  --color-warning-soft: #fffbeb;
+  --color-warning-text: #b45309;
+
+  --color-error: #ef4444;
+  --color-error-soft: #fef2f2;
+  --color-error-text: #b91c1c;
+
+  --color-info: #3b82f6;
+  --color-info-soft: #eff6ff;
+  --color-info-text: #1d4ed8;
+
+  /* Spacing */
+  --space-1: 0.25rem;
+  --space-2: 0.5rem;
+  --space-3: 0.75rem;
+  --space-4: 1rem;
+  --space-5: 1.25rem;
+  --space-6: 1.5rem;
+  --space-8: 2rem;
+  --space-10: 2.5rem;
+
+  /* Radius */
+  --radius-sm: 6px;
+  --radius-md: 8px;
+  --radius-lg: 12px;
+  --radius-xl: 16px;
+  --radius-full: 9999px;
+
+  /* Shadows */
+  --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04);
+  --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
+  --shadow-md: 0 4px 12px rgba(15, 23, 42, 0.06), 0 2px 4px rgba(15, 23, 42, 0.04);
+  --shadow-lg: 0 12px 24px rgba(15, 23, 42, 0.08), 0 4px 8px rgba(15, 23, 42, 0.04);
+  --shadow-focus: 0 0 0 3px rgba(99, 102, 241, 0.18);
+
+  /* Layout */
+  --sidebar-width: 248px;
+  --sidebar-width-collapsed: 72px;
+  --header-height: 64px;
+}
+
+/* ============================================================
+   RESET & BASE
+   ============================================================ */
 * {
   margin: 0;
   padding: 0;
@@ -170,205 +227,145 @@ export default {
 
 body {
   font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
-  background: #f8fafc;
-  color: #1e293b;
+  background: var(--color-bg);
+  color: var(--color-text-primary);
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
 
+/* ============================================================
+   LAYOUT
+   ============================================================ */
 .app {
   display: flex;
-  flex-direction: column;
   min-height: 100vh;
+  background: var(--color-bg);
 }
 
-.top-nav {
-  background: #ffffff;
-  border-bottom: 1px solid #e2e8f0;
-  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.05);
-  position: sticky;
-  top: 0;
-  z-index: 100;
-}
-
-.nav-container {
-  max-width: 1600px;
-  margin: 0 auto;
-  display: flex;
-  align-items: center;
-  padding: 0 2rem;
-  height: 70px;
-}
-
-.nav-container > .nav-tabs {
-  margin-left: auto;
-  margin-right: 1rem;
-}
-
-.nav-container > .language-switcher {
-  margin-right: 1rem;
-}
-
-.logo {
-  display: flex;
-  align-items: baseline;
-  gap: 0.75rem;
-}
-
-.logo h1 {
-  font-size: 1.375rem;
-  font-weight: 700;
-  color: #0f172a;
-  letter-spacing: -0.025em;
-}
-
-.subtitle {
-  font-size: 0.813rem;
-  color: #64748b;
-  font-weight: 400;
-  padding-left: 0.75rem;
-  border-left: 1px solid #e2e8f0;
-}
-
-.nav-tabs {
+.app-body {
+  flex: 1;
   display: flex;
-  gap: 0.25rem;
-}
-
-.nav-tabs a {
-  padding: 0.625rem 1.25rem;
-  color: #64748b;
-  text-decoration: none;
-  font-weight: 500;
-  font-size: 0.938rem;
-  border-radius: 6px;
-  transition: all 0.2s ease;
-  position: relative;
-}
-
-.nav-tabs a:hover {
-  color: #0f172a;
-  background: #f1f5f9;
-}
-
-.nav-tabs a.active {
-  color: #2563eb;
-  background: #eff6ff;
+  flex-direction: column;
+  min-width: 0;
+  margin-left: var(--sidebar-width);
+  transition: margin-left 0.25s ease;
 }
 
-.nav-tabs a.active::after {
-  content: '';
-  position: absolute;
-  bottom: -1px;
-  left: 0;
-  right: 0;
-  height: 2px;
-  background: #2563eb;
+.app.sidebar-collapsed .app-body {
+  margin-left: var(--sidebar-width-collapsed);
 }
 
 .main-content {
   flex: 1;
+  padding: var(--space-8) var(--space-8) var(--space-10);
   max-width: 1600px;
   width: 100%;
-  margin: 0 auto;
-  padding: 1.5rem 2rem;
 }
 
+/* ============================================================
+   PAGE HEADER
+   ============================================================ */
 .page-header {
-  margin-bottom: 1.5rem;
+  margin-bottom: var(--space-6);
 }
 
 .page-header h2 {
-  font-size: 1.875rem;
+  font-size: 1.75rem;
   font-weight: 700;
-  color: #0f172a;
-  margin-bottom: 0.375rem;
+  color: var(--color-text-primary);
+  margin-bottom: var(--space-1);
   letter-spacing: -0.025em;
+  line-height: 1.2;
 }
 
 .page-header p {
-  color: #64748b;
-  font-size: 0.938rem;
+  color: var(--color-text-muted);
+  font-size: 0.9375rem;
+  line-height: 1.5;
 }
 
+/* ============================================================
+   STATS GRID
+   ============================================================ */
 .stats-grid {
   display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
-  gap: 1.25rem;
-  margin-bottom: 1.5rem;
+  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
+  gap: var(--space-4);
+  margin-bottom: var(--space-6);
 }
 
 .stat-card {
-  background: white;
-  padding: 1.25rem;
-  border-radius: 10px;
-  border: 1px solid #e2e8f0;
+  background: var(--color-surface);
+  padding: var(--space-5);
+  border-radius: var(--radius-lg);
+  border: 1px solid var(--color-border);
+  box-shadow: var(--shadow-xs);
   transition: all 0.2s ease;
 }
 
 .stat-card:hover {
-  border-color: #cbd5e1;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
+  border-color: var(--color-border-strong);
+  box-shadow: var(--shadow-md);
+  transform: translateY(-1px);
 }
 
 .stat-label {
-  color: #64748b;
-  font-size: 0.875rem;
+  color: var(--color-text-muted);
+  font-size: 0.75rem;
   font-weight: 600;
   text-transform: uppercase;
-  letter-spacing: 0.5px;
-  margin-bottom: 0.625rem;
+  letter-spacing: 0.06em;
+  margin-bottom: var(--space-2);
 }
 
 .stat-value {
-  font-size: 2.25rem;
+  font-size: 2rem;
   font-weight: 700;
-  color: #0f172a;
+  color: var(--color-text-primary);
   letter-spacing: -0.025em;
+  line-height: 1.1;
 }
 
-.stat-card.warning .stat-value {
-  color: #ea580c;
-}
-
-.stat-card.success .stat-value {
-  color: #059669;
-}
-
-.stat-card.danger .stat-value {
-  color: #dc2626;
-}
-
-.stat-card.info .stat-value {
-  color: #2563eb;
-}
+.stat-card.warning .stat-value { color: var(--color-warning); }
+.stat-card.success .stat-value { color: var(--color-success); }
+.stat-card.danger .stat-value { color: var(--color-error); }
+.stat-card.info .stat-value { color: var(--color-info); }
 
+/* ============================================================
+   CARD
+   ============================================================ */
 .card {
-  background: white;
-  border-radius: 10px;
-  padding: 1.25rem;
-  border: 1px solid #e2e8f0;
-  margin-bottom: 1.25rem;
+  background: var(--color-surface);
+  border-radius: var(--radius-lg);
+  padding: var(--space-5);
+  border: 1px solid var(--color-border);
+  box-shadow: var(--shadow-xs);
+  margin-bottom: var(--space-5);
 }
 
 .card-header {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  margin-bottom: 1rem;
-  padding-bottom: 0.875rem;
-  border-bottom: 1px solid #e2e8f0;
+  margin-bottom: var(--space-4);
+  padding-bottom: var(--space-4);
+  border-bottom: 1px solid var(--color-border);
 }
 
 .card-title {
-  font-size: 1.125rem;
-  font-weight: 700;
-  color: #0f172a;
-  letter-spacing: -0.025em;
+  font-size: 1rem;
+  font-weight: 600;
+  color: var(--color-text-primary);
+  letter-spacing: -0.01em;
+  margin: 0;
 }
 
+/* ============================================================
+   TABLE
+   ============================================================ */
 .table-container {
   overflow-x: auto;
+  border-radius: var(--radius-md);
 }
 
 table {
@@ -377,25 +374,25 @@ table {
 }
 
 thead {
-  background: #f8fafc;
-  border-top: 1px solid #e2e8f0;
-  border-bottom: 1px solid #e2e8f0;
+  background: var(--color-surface-alt);
+  border-top: 1px solid var(--color-border);
+  border-bottom: 1px solid var(--color-border);
 }
 
 th {
   text-align: left;
-  padding: 0.5rem 0.75rem;
+  padding: 0.6875rem 0.875rem;
   font-weight: 600;
-  color: #475569;
-  font-size: 0.75rem;
+  color: var(--color-text-muted);
+  font-size: 0.6875rem;
   text-transform: uppercase;
-  letter-spacing: 0.05em;
+  letter-spacing: 0.06em;
 }
 
 td {
-  padding: 0.5rem 0.75rem;
-  border-top: 1px solid #f1f5f9;
-  color: #334155;
+  padding: 0.75rem 0.875rem;
+  border-top: 1px solid var(--color-border);
+  color: var(--color-text-secondary);
   font-size: 0.875rem;
 }
 
@@ -404,83 +401,141 @@ tbody tr {
 }
 
 tbody tr:hover {
-  background: #f8fafc;
+  background: var(--color-surface-sunken);
+}
+
+tbody tr td strong {
+  color: var(--color-text-primary);
+  font-weight: 600;
 }
 
+/* ============================================================
+   BADGES
+   ============================================================ */
 .badge {
-  display: inline-block;
-  padding: 0.313rem 0.75rem;
-  border-radius: 6px;
-  font-size: 0.75rem;
+  display: inline-flex;
+  align-items: center;
+  padding: 0.1875rem 0.5625rem;
+  border-radius: var(--radius-full);
+  font-size: 0.6875rem;
   font-weight: 600;
-  text-transform: uppercase;
-  letter-spacing: 0.025em;
+  text-transform: capitalize;
+  letter-spacing: 0.01em;
+  line-height: 1.4;
+  border: 1px solid transparent;
 }
 
 .badge.success {
-  background: #d1fae5;
-  color: #065f46;
+  background: var(--color-success-soft);
+  color: var(--color-success-text);
+  border-color: #a7f3d0;
 }
 
 .badge.warning {
-  background: #fed7aa;
-  color: #92400e;
+  background: var(--color-warning-soft);
+  color: var(--color-warning-text);
+  border-color: #fde68a;
 }
 
 .badge.danger {
-  background: #fecaca;
-  color: #991b1b;
+  background: var(--color-error-soft);
+  color: var(--color-error-text);
+  border-color: #fecaca;
 }
 
 .badge.info {
-  background: #dbeafe;
-  color: #1e40af;
+  background: var(--color-info-soft);
+  color: var(--color-info-text);
+  border-color: #bfdbfe;
 }
 
 .badge.increasing {
-  background: #d1fae5;
-  color: #065f46;
+  background: var(--color-success-soft);
+  color: var(--color-success-text);
+  border-color: #a7f3d0;
 }
 
 .badge.decreasing {
-  background: #fecaca;
-  color: #991b1b;
+  background: var(--color-error-soft);
+  color: var(--color-error-text);
+  border-color: #fecaca;
 }
 
 .badge.stable {
-  background: #e0e7ff;
-  color: #3730a3;
+  background: var(--color-primary-soft);
+  color: var(--color-primary-text);
+  border-color: #c7d2fe;
 }
 
 .badge.high {
-  background: #fecaca;
-  color: #991b1b;
+  background: var(--color-error-soft);
+  color: var(--color-error-text);
+  border-color: #fecaca;
 }
 
 .badge.medium {
-  background: #fed7aa;
-  color: #92400e;
+  background: var(--color-warning-soft);
+  color: var(--color-warning-text);
+  border-color: #fde68a;
 }
 
 .badge.low {
-  background: #dbeafe;
-  color: #1e40af;
+  background: var(--color-info-soft);
+  color: var(--color-info-text);
+  border-color: #bfdbfe;
 }
 
+/* ============================================================
+   LOADING / ERROR
+   ============================================================ */
 .loading {
   text-align: center;
   padding: 3rem;
-  color: #64748b;
-  font-size: 0.938rem;
+  color: var(--color-text-muted);
+  font-size: 0.9375rem;
 }
 
 .error {
-  background: #fef2f2;
+  background: var(--color-error-soft);
   border: 1px solid #fecaca;
-  color: #991b1b;
-  padding: 1rem;
-  border-radius: 8px;
-  margin: 1rem 0;
-  font-size: 0.938rem;
+  color: var(--color-error-text);
+  padding: var(--space-4);
+  border-radius: var(--radius-md);
+  margin: var(--space-4) 0;
+  font-size: 0.9375rem;
+}
+
+/* ============================================================
+   GLOBAL FORM ELEMENTS
+   ============================================================ */
+input,
+select,
+textarea {
+  font-family: inherit;
+}
+
+input:focus-visible,
+select:focus-visible,
+textarea:focus-visible {
+  outline: none;
+}
+
+/* ============================================================
+   RESPONSIVE
+   ============================================================ */
+@media (max-width: 1024px) {
+  .main-content {
+    padding: var(--space-6);
+  }
+}
+
+@media (max-width: 768px) {
+  .app-body {
+    margin-left: 0 !important;
+  }
+
+  .main-content {
+    padding: var(--space-4);
+  }
 }
 </style>
diff --git a/client/src/components/FilterBar.vue b/client/src/components/FilterBar.vue
index 9e12b694..dd7a23b1 100644
--- a/client/src/components/FilterBar.vue
+++ b/client/src/components/FilterBar.vue
@@ -1,71 +1,70 @@
 <template>
   <div class="filters-bar">
-    <div class="filters-container">
-      <div class="filters-grid">
-        <div class="filter-group">
-          <label>{{ t('filters.timePeriod') }}</label>
-          <select v-model="selectedPeriod" class="filter-select">
-            <option value="all">{{ t('filters.allMonths') }}</option>
-            <option value="2025-01">{{ t('months.january') }}</option>
-            <option value="2025-02">{{ t('months.february') }}</option>
-            <option value="2025-03">{{ t('months.march') }}</option>
-            <option value="2025-04">{{ t('months.april') }}</option>
-            <option value="2025-05">{{ t('months.may') }}</option>
-            <option value="2025-06">{{ t('months.june') }}</option>
-            <option value="2025-07">{{ t('months.july') }}</option>
-            <option value="2025-08">{{ t('months.august') }}</option>
-            <option value="2025-09">{{ t('months.september') }}</option>
-            <option value="2025-10">{{ t('months.october') }}</option>
-            <option value="2025-11">{{ t('months.november') }}</option>
-            <option value="2025-12">{{ t('months.december') }}</option>
-          </select>
-        </div>
-
-        <div class="filter-group">
-          <label>{{ t('filters.location') }}</label>
-          <select v-model="selectedLocation" class="filter-select">
-            <option value="all">{{ t('filters.all') }}</option>
-            <option value="San Francisco">{{ t('warehouses.sanFrancisco') }}</option>
-            <option value="London">{{ t('warehouses.london') }}</option>
-            <option value="Tokyo">{{ t('warehouses.tokyo') }}</option>
-          </select>
-        </div>
-
-        <div class="filter-group">
-          <label>{{ t('filters.category') }}</label>
-          <select v-model="selectedCategory" class="filter-select">
-            <option value="all">{{ t('filters.all') }}</option>
-            <option value="circuit boards">{{ t('categories.circuitBoards') }}</option>
-            <option value="sensors">{{ t('categories.sensors') }}</option>
-            <option value="actuators">{{ t('categories.actuators') }}</option>
-            <option value="controllers">{{ t('categories.controllers') }}</option>
-            <option value="power supplies">{{ t('categories.powerSupplies') }}</option>
-          </select>
-        </div>
-
-        <div class="filter-group">
-          <label>{{ t('filters.orderStatus') }}</label>
-          <select v-model="selectedStatus" class="filter-select">
-            <option value="all">{{ t('filters.all') }}</option>
-            <option value="delivered">{{ t('status.delivered') }}</option>
-            <option value="shipped">{{ t('status.shipped') }}</option>
-            <option value="processing">{{ t('status.processing') }}</option>
-            <option value="backordered">{{ t('status.backordered') }}</option>
-          </select>
-        </div>
+    <div class="filters-grid">
+      <div class="filter-group">
+        <label>{{ t('filters.timePeriod') }}</label>
+        <select v-model="selectedPeriod" class="filter-select">
+          <option value="all">{{ t('filters.allMonths') }}</option>
+          <option value="2025-01">{{ t('months.january') }}</option>
+          <option value="2025-02">{{ t('months.february') }}</option>
+          <option value="2025-03">{{ t('months.march') }}</option>
+          <option value="2025-04">{{ t('months.april') }}</option>
+          <option value="2025-05">{{ t('months.may') }}</option>
+          <option value="2025-06">{{ t('months.june') }}</option>
+          <option value="2025-07">{{ t('months.july') }}</option>
+          <option value="2025-08">{{ t('months.august') }}</option>
+          <option value="2025-09">{{ t('months.september') }}</option>
+          <option value="2025-10">{{ t('months.october') }}</option>
+          <option value="2025-11">{{ t('months.november') }}</option>
+          <option value="2025-12">{{ t('months.december') }}</option>
+        </select>
       </div>
 
-      <button
-        class="reset-filters-btn"
-        @click="resetFilters"
-        :disabled="!hasActiveFilters"
-        title="Reset all filters"
-      >
-        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
-          <path fill-rule="evenodd" d="M4 2a1 1 0 011 1v2.101a7.002 7.002 0 0111.601 2.566 1 1 0 11-1.885.666A5.002 5.002 0 005.999 7H9a1 1 0 010 2H4a1 1 0 01-1-1V3a1 1 0 011-1zm.008 9.057a1 1 0 011.276.61A5.002 5.002 0 0014.001 13H11a1 1 0 110-2h5a1 1 0 011 1v5a1 1 0 11-2 0v-2.101a7.002 7.002 0 01-11.601-2.566 1 1 0 01.61-1.276z" clip-rule="evenodd" />
-        </svg>
-      </button>
+      <div class="filter-group">
+        <label>{{ t('filters.location') }}</label>
+        <select v-model="selectedLocation" class="filter-select">
+          <option value="all">{{ t('filters.all') }}</option>
+          <option value="San Francisco">{{ t('warehouses.sanFrancisco') }}</option>
+          <option value="London">{{ t('warehouses.london') }}</option>
+          <option value="Tokyo">{{ t('warehouses.tokyo') }}</option>
+        </select>
+      </div>
+
+      <div class="filter-group">
+        <label>{{ t('filters.category') }}</label>
+        <select v-model="selectedCategory" class="filter-select">
+          <option value="all">{{ t('filters.all') }}</option>
+          <option value="circuit boards">{{ t('categories.circuitBoards') }}</option>
+          <option value="sensors">{{ t('categories.sensors') }}</option>
+          <option value="actuators">{{ t('categories.actuators') }}</option>
+          <option value="controllers">{{ t('categories.controllers') }}</option>
+          <option value="power supplies">{{ t('categories.powerSupplies') }}</option>
+        </select>
+      </div>
+
+      <div class="filter-group">
+        <label>{{ t('filters.orderStatus') }}</label>
+        <select v-model="selectedStatus" class="filter-select">
+          <option value="all">{{ t('filters.all') }}</option>
+          <option value="delivered">{{ t('status.delivered') }}</option>
+          <option value="shipped">{{ t('status.shipped') }}</option>
+          <option value="processing">{{ t('status.processing') }}</option>
+          <option value="backordered">{{ t('status.backordered') }}</option>
+        </select>
+      </div>
     </div>
+
+    <button
+      class="reset-filters-btn"
+      @click="resetFilters"
+      :disabled="!hasActiveFilters"
+      :title="t('filters.reset') || 'Reset filters'"
+    >
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
+        <path fill-rule="evenodd" d="M4 2a1 1 0 011 1v2.101a7.002 7.002 0 0111.601 2.566 1 1 0 11-1.885.666A5.002 5.002 0 005.999 7H9a1 1 0 010 2H4a1 1 0 01-1-1V3a1 1 0 011-1zm.008 9.057a1 1 0 011.276.61A5.002 5.002 0 0014.001 13H11a1 1 0 110-2h5a1 1 0 011 1v5a1 1 0 11-2 0v-2.101a7.002 7.002 0 01-11.601-2.566 1 1 0 01.61-1.276z" clip-rule="evenodd" />
+      </svg>
+      <span class="reset-label">Reset</span>
+    </button>
   </div>
 </template>
 
@@ -102,93 +101,112 @@ export default {
 
 <style scoped>
 .filters-bar {
-  background: #f8fafc;
-  border-bottom: 1px solid #e2e8f0;
-  padding: 0.75rem 0;
-  position: sticky;
-  top: 70px;
-  z-index: 90;
-}
-
-.filters-container {
-  max-width: 1600px;
-  margin: 0 auto;
-  padding: 0 2rem;
+  background: var(--color-surface);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-lg);
+  padding: 0.875rem 1rem;
+  margin-bottom: var(--space-6);
   display: flex;
-  align-items: center;
-  gap: 1rem;
+  align-items: flex-end;
+  gap: 0.875rem;
+  box-shadow: var(--shadow-xs);
+  flex-wrap: wrap;
 }
 
 .filters-grid {
   display: flex;
-  align-items: center;
-  gap: 1rem;
+  align-items: flex-end;
+  gap: 0.875rem;
   flex: 1;
+  flex-wrap: wrap;
 }
 
 .filter-group {
   display: flex;
-  align-items: center;
-  gap: 0.5rem;
+  flex-direction: column;
+  gap: 0.375rem;
+  min-width: 0;
 }
 
 .filter-group label {
-  font-size: 0.75rem;
+  font-size: 0.6875rem;
   font-weight: 600;
-  color: #64748b;
-  white-space: nowrap;
+  color: var(--color-text-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
 }
 
 .filter-select {
-  padding: 0.4rem 0.75rem;
-  border: 1px solid #cbd5e1;
-  border-radius: 6px;
-  font-size: 0.813rem;
-  color: #0f172a;
-  background: white;
+  padding: 0.4375rem 2rem 0.4375rem 0.75rem;
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
+  font-size: 0.8125rem;
+  color: var(--color-text-primary);
+  background-color: var(--color-surface);
+  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 16 16' fill='none'%3e%3cpath d='M4 6L8 10L12 6' stroke='%2364748b' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3e%3c/svg%3e");
+  background-repeat: no-repeat;
+  background-position: right 0.6875rem center;
+  background-size: 10px;
   cursor: pointer;
-  transition: all 0.2s;
+  transition: all 0.15s ease;
   font-weight: 500;
-  min-width: 140px;
+  min-width: 160px;
+  appearance: none;
+  -webkit-appearance: none;
 }
 
 .filter-select:hover {
-  border-color: #94a3b8;
+  border-color: var(--color-border-strong);
 }
 
 .filter-select:focus {
   outline: none;
-  border-color: #3b82f6;
-  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
+  border-color: var(--color-primary);
+  box-shadow: var(--shadow-focus);
 }
 
 .reset-filters-btn {
-  display: flex;
+  display: inline-flex;
   align-items: center;
-  justify-content: center;
-  padding: 0.4rem;
-  background: white;
-  border: 1px solid #e2e8f0;
-  border-radius: 6px;
-  color: #64748b;
+  gap: 0.375rem;
+  padding: 0.4375rem 0.75rem;
+  background: var(--color-surface);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
+  color: var(--color-text-secondary);
   cursor: pointer;
-  transition: all 0.2s;
+  transition: all 0.15s ease;
+  font-family: inherit;
+  font-size: 0.8125rem;
+  font-weight: 600;
   flex-shrink: 0;
+  height: 34px;
 }
 
 .reset-filters-btn:hover:not(:disabled) {
-  background: #f8fafc;
-  border-color: #cbd5e1;
-  color: #0f172a;
+  background: var(--color-surface-alt);
+  border-color: var(--color-border-strong);
+  color: var(--color-text-primary);
 }
 
 .reset-filters-btn:disabled {
-  opacity: 0.3;
+  opacity: 0.4;
   cursor: not-allowed;
 }
 
 .reset-filters-btn svg {
-  width: 18px;
-  height: 18px;
+  width: 14px;
+  height: 14px;
+}
+
+@media (max-width: 768px) {
+  .filter-select {
+    min-width: 140px;
+    flex: 1;
+  }
+
+  .reset-label {
+    display: none;
+  }
 }
 </style>
diff --git a/client/src/components/LanguageSwitcher.vue b/client/src/components/LanguageSwitcher.vue
index dde97df1..fbd81821 100644
--- a/client/src/components/LanguageSwitcher.vue
+++ b/client/src/components/LanguageSwitcher.vue
@@ -96,36 +96,40 @@ const selectLanguage = (locale) => {
 .language-button {
   display: flex;
   align-items: center;
-  gap: 0.5rem;
-  padding: 0.5rem 0.875rem;
-  background: white;
-  border: 1px solid #e2e8f0;
-  border-radius: 8px;
+  gap: 0.375rem;
+  padding: 0.4375rem 0.625rem;
+  background: transparent;
+  border: 1px solid transparent;
+  border-radius: var(--radius-md);
   cursor: pointer;
-  transition: all 0.2s ease;
+  transition: all 0.15s ease;
   font-family: inherit;
-  font-size: 0.875rem;
-  color: #334155;
+  font-size: 0.8125rem;
+  color: var(--color-text-secondary);
 }
 
 .language-button:hover {
-  background: #f8fafc;
-  border-color: #cbd5e1;
+  background: var(--color-surface-alt);
+  color: var(--color-text-primary);
 }
 
 .globe-icon {
-  color: #64748b;
+  color: var(--color-text-muted);
   flex-shrink: 0;
+  width: 16px;
+  height: 16px;
 }
 
 .language-label {
-  font-weight: 500;
+  font-weight: 600;
 }
 
 .chevron {
-  color: #64748b;
+  color: var(--color-text-faint);
   transition: transform 0.2s ease;
   flex-shrink: 0;
+  width: 12px;
+  height: 12px;
 }
 
 .chevron-open {
@@ -137,12 +141,13 @@ const selectLanguage = (locale) => {
   top: calc(100% + 0.5rem);
   right: 0;
   min-width: 160px;
-  background: white;
-  border: 1px solid #e2e8f0;
-  border-radius: 10px;
-  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
+  background: var(--color-surface);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-lg);
   z-index: 1000;
   overflow: hidden;
+  padding: 0.25rem;
 }
 
 .dropdown-item {
@@ -151,25 +156,28 @@ const selectLanguage = (locale) => {
   align-items: center;
   justify-content: space-between;
   gap: 0.75rem;
-  padding: 0.75rem 1rem;
+  padding: 0.5rem 0.75rem;
   background: none;
   border: none;
+  border-radius: var(--radius-sm);
   text-align: left;
   cursor: pointer;
   transition: background 0.15s ease;
   font-family: inherit;
-  font-size: 0.875rem;
+  font-size: 0.8125rem;
   font-weight: 500;
-  color: #334155;
+  color: var(--color-text-secondary);
 }
 
 .dropdown-item:hover {
-  background: #f8fafc;
+  background: var(--color-surface-alt);
+  color: var(--color-text-primary);
 }
 
 .dropdown-item.active {
-  background: #eff6ff;
-  color: #2563eb;
+  background: var(--color-primary-soft);
+  color: var(--color-primary-text);
+  font-weight: 600;
 }
 
 .language-name {
@@ -177,7 +185,7 @@ const selectLanguage = (locale) => {
 }
 
 .check-icon {
-  color: #2563eb;
+  color: var(--color-primary);
   flex-shrink: 0;
 }
 </style>
diff --git a/client/src/components/ProfileDetailsModal.vue b/client/src/components/ProfileDetailsModal.vue
index 4896a602..ef538aeb 100644
--- a/client/src/components/ProfileDetailsModal.vue
+++ b/client/src/components/ProfileDetailsModal.vue
@@ -112,9 +112,10 @@ const formatDate = (dateString) => {
 }
 
 .modal-container {
-  background: white;
+  background: #1e293b;
+  border: 1px solid #334155;
   border-radius: 12px;
-  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
+  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
   max-width: 600px;
   width: 100%;
   max-height: 90vh;
@@ -128,13 +129,13 @@ const formatDate = (dateString) => {
   align-items: center;
   justify-content: space-between;
   padding: 1.5rem;
-  border-bottom: 1px solid #e2e8f0;
+  border-bottom: 1px solid #334155;
 }
 
 .modal-title {
   font-size: 1.25rem;
   font-weight: 700;
-  color: #0f172a;
+  color: #f1f5f9;
   letter-spacing: -0.025em;
 }
 
@@ -152,8 +153,8 @@ const formatDate = (dateString) => {
 }
 
 .close-button:hover {
-  background: #f1f5f9;
-  color: #0f172a;
+  background: #334155;
+  color: #f1f5f9;
 }
 
 .modal-body {
@@ -174,7 +175,7 @@ const formatDate = (dateString) => {
   align-items: center;
   gap: 0.75rem;
   padding-bottom: 1.5rem;
-  border-bottom: 1px solid #e2e8f0;
+  border-bottom: 1px solid #334155;
 }
 
 .avatar-xl {
@@ -189,19 +190,19 @@ const formatDate = (dateString) => {
   font-weight: 700;
   font-size: 2rem;
   letter-spacing: 0.025em;
-  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.2);
+  box-shadow: 0 4px 20px rgba(37, 99, 235, 0.4);
 }
 
 .profile-name {
   font-size: 1.5rem;
   font-weight: 700;
-  color: #0f172a;
+  color: #f1f5f9;
   margin: 0;
 }
 
 .profile-job-title {
   font-size: 1rem;
-  color: #64748b;
+  color: #94a3b8;
   margin: 0;
 }
 
@@ -227,13 +228,13 @@ const formatDate = (dateString) => {
 
 .info-value {
   font-size: 0.938rem;
-  color: #0f172a;
+  color: #cbd5e1;
   font-weight: 500;
 }
 
 .modal-footer {
   padding: 1.5rem;
-  border-top: 1px solid #e2e8f0;
+  border-top: 1px solid #334155;
   display: flex;
   justify-content: flex-end;
   gap: 0.75rem;
@@ -241,20 +242,20 @@ const formatDate = (dateString) => {
 
 .btn-secondary {
   padding: 0.625rem 1.25rem;
-  background: #f1f5f9;
-  border: 1px solid #e2e8f0;
+  background: #334155;
+  border: 1px solid #475569;
   border-radius: 8px;
   font-weight: 500;
   font-size: 0.875rem;
-  color: #334155;
+  color: #cbd5e1;
   cursor: pointer;
   transition: all 0.15s ease;
   font-family: inherit;
 }
 
 .btn-secondary:hover {
-  background: #e2e8f0;
-  border-color: #cbd5e1;
+  background: #475569;
+  border-color: #64748b;
 }
 
 /* Modal transition animations */
diff --git a/client/src/components/ProfileMenu.vue b/client/src/components/ProfileMenu.vue
index 5706d24c..bc98d91a 100644
--- a/client/src/components/ProfileMenu.vue
+++ b/client/src/components/ProfileMenu.vue
@@ -123,26 +123,26 @@ const handleLogout = () => {
 .profile-button {
   display: flex;
   align-items: center;
-  gap: 0.625rem;
-  padding: 0.5rem 0.875rem;
-  background: white;
-  border: 1px solid #e2e8f0;
-  border-radius: 8px;
+  gap: 0.5rem;
+  padding: 0.25rem 0.625rem 0.25rem 0.25rem;
+  background: transparent;
+  border: 1px solid transparent;
+  border-radius: var(--radius-full);
   cursor: pointer;
-  transition: all 0.2s ease;
+  transition: all 0.15s ease;
   font-family: inherit;
 }
 
 .profile-button:hover {
-  background: #f8fafc;
-  border-color: #cbd5e1;
+  background: var(--color-surface-alt);
+  border-color: var(--color-border);
 }
 
 .avatar {
-  width: 32px;
-  height: 32px;
+  width: 30px;
+  height: 30px;
   border-radius: 50%;
-  background: linear-gradient(135deg, #2563eb 0%, #1e40af 100%);
+  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent) 100%);
   color: white;
   display: flex;
   align-items: center;
@@ -150,16 +150,22 @@ const handleLogout = () => {
   font-weight: 600;
   font-size: 0.75rem;
   letter-spacing: 0.025em;
+  flex-shrink: 0;
+  box-shadow: var(--shadow-xs);
 }
 
 .profile-name {
-  font-size: 0.875rem;
-  font-weight: 500;
-  color: #0f172a;
+  font-size: 0.8125rem;
+  font-weight: 600;
+  color: var(--color-text-primary);
+  max-width: 140px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
 .chevron {
-  color: #64748b;
+  color: var(--color-text-faint);
   transition: transform 0.2s ease;
 }
 
@@ -172,35 +178,39 @@ const handleLogout = () => {
   top: calc(100% + 0.5rem);
   right: 0;
   min-width: 280px;
-  background: white;
-  border: 1px solid #e2e8f0;
-  border-radius: 10px;
-  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
+  background: var(--color-surface);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-lg);
   z-index: 1000;
   overflow: hidden;
+  padding: 0.375rem;
 }
 
 .dropdown-header {
-  padding: 1rem;
+  padding: 0.875rem;
   display: flex;
-  gap: 0.875rem;
+  gap: 0.75rem;
   align-items: center;
-  background: #f8fafc;
+  background: var(--color-surface-sunken);
+  border-radius: var(--radius-md);
+  margin-bottom: 0.375rem;
 }
 
 .avatar-large {
-  width: 48px;
-  height: 48px;
+  width: 44px;
+  height: 44px;
   border-radius: 50%;
-  background: linear-gradient(135deg, #2563eb 0%, #1e40af 100%);
+  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent) 100%);
   color: white;
   display: flex;
   align-items: center;
   justify-content: center;
   font-weight: 700;
-  font-size: 1rem;
+  font-size: 0.9375rem;
   letter-spacing: 0.025em;
   flex-shrink: 0;
+  box-shadow: var(--shadow-sm);
 }
 
 .user-info {
@@ -210,14 +220,14 @@ const handleLogout = () => {
 
 .user-name {
   font-weight: 600;
-  color: #0f172a;
-  font-size: 0.938rem;
-  margin-bottom: 0.25rem;
+  color: var(--color-text-primary);
+  font-size: 0.875rem;
+  margin-bottom: 2px;
 }
 
 .user-email {
-  font-size: 0.813rem;
-  color: #64748b;
+  font-size: 0.75rem;
+  color: var(--color-text-muted);
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -225,57 +235,68 @@ const handleLogout = () => {
 
 .dropdown-divider {
   height: 1px;
-  background: #e2e8f0;
-  margin: 0.5rem 0;
+  background: var(--color-border);
+  margin: 0.375rem -0.375rem;
 }
 
 .dropdown-item {
   width: 100%;
   display: flex;
   align-items: center;
-  gap: 0.75rem;
-  padding: 0.75rem 1rem;
+  gap: 0.625rem;
+  padding: 0.5rem 0.75rem;
   background: none;
   border: none;
+  border-radius: var(--radius-sm);
   text-align: left;
   cursor: pointer;
   transition: background 0.15s ease;
   font-family: inherit;
-  font-size: 0.875rem;
+  font-size: 0.8125rem;
   font-weight: 500;
-  color: #334155;
+  color: var(--color-text-secondary);
 }
 
 .dropdown-item:hover {
-  background: #f8fafc;
+  background: var(--color-surface-alt);
+  color: var(--color-text-primary);
 }
 
 .dropdown-item svg {
-  color: #64748b;
+  color: var(--color-text-muted);
   flex-shrink: 0;
 }
 
 .dropdown-item.logout {
-  color: #dc2626;
+  color: var(--color-error-text);
 }
 
 .dropdown-item.logout svg {
-  color: #dc2626;
+  color: var(--color-error);
 }
 
 .dropdown-item.logout:hover {
-  background: #fef2f2;
+  background: var(--color-error-soft);
 }
 
 .task-badge {
   margin-left: auto;
-  background: #2563eb;
+  background: var(--color-primary);
   color: white;
-  font-size: 0.75rem;
-  font-weight: 600;
-  padding: 0.125rem 0.5rem;
-  border-radius: 12px;
-  min-width: 20px;
+  font-size: 0.6875rem;
+  font-weight: 700;
+  padding: 0.125rem 0.4375rem;
+  border-radius: var(--radius-full);
+  min-width: 18px;
   text-align: center;
 }
+
+@media (max-width: 640px) {
+  .profile-name {
+    display: none;
+  }
+  .chevron {
+    display: none;
+  }
+}
 </style>
diff --git a/client/src/components/Sidebar.vue b/client/src/components/Sidebar.vue
new file mode 100644
index 00000000..9b638136
--- /dev/null
+++ b/client/src/components/Sidebar.vue
@@ -0,0 +1,340 @@
+<template>
+  <!-- Mobile overlay -->
+  <div
+    v-if="mobileOpen"
+    class="sidebar-overlay"
+    @click="$emit('close-mobile')"
+  ></div>
+
+  <aside
+    class="sidebar"
+    :class="{
+      'sidebar-collapsed': collapsed,
+      'sidebar-mobile-open': mobileOpen
+    }"
+  >
+    <!-- Logo / Branding -->
+    <div class="sidebar-header">
+      <div class="logo-mark" aria-hidden="true">
+        <svg width="20" height="20" viewBox="0 0 24 24" fill="none">
+          <defs>
+            <linearGradient id="logoGrad" x1="0" y1="0" x2="24" y2="24" gradientUnits="userSpaceOnUse">
+              <stop offset="0" stop-color="#6366f1"/>
+              <stop offset="1" stop-color="#8b5cf6"/>
+            </linearGradient>
+          </defs>
+          <rect x="2" y="2" width="20" height="20" rx="5" fill="url(#logoGrad)"/>
+          <path d="M7.5 12.5L10.5 15.5L16.5 9" stroke="white" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/>
+        </svg>
+      </div>
+      <div v-if="!collapsed" class="logo-text">
+        <span class="logo-name">{{ t('nav.companyName') }}</span>
+        <span class="logo-sub">{{ t('nav.subtitle') }}</span>
+      </div>
+    </div>
+
+    <!-- Navigation -->
+    <nav class="sidebar-nav">
+      <div class="nav-section">
+        <span v-if="!collapsed" class="nav-section-label">Main</span>
+        <SidebarItem
+          to="/"
+          :label="t('nav.overview')"
+          :collapsed="collapsed"
+          :exact="true"
+        >
+          <template #icon>
+            <svg width="18" height="18" viewBox="0 0 20 20" fill="none">
+              <rect x="2.5" y="2.5" width="6.5" height="6.5" rx="1.5" stroke="currentColor" stroke-width="1.6"/>
+              <rect x="11" y="2.5" width="6.5" height="6.5" rx="1.5" stroke="currentColor" stroke-width="1.6"/>
+              <rect x="2.5" y="11" width="6.5" height="6.5" rx="1.5" stroke="currentColor" stroke-width="1.6"/>
+              <rect x="11" y="11" width="6.5" height="6.5" rx="1.5" stroke="currentColor" stroke-width="1.6"/>
+            </svg>
+          </template>
+        </SidebarItem>
+        <SidebarItem
+          to="/inventory"
+          :label="t('nav.inventory')"
+          :collapsed="collapsed"
+        >
+          <template #icon>
+            <svg width="18" height="18" viewBox="0 0 20 20" fill="none">
+              <path d="M3 6.5L10 3L17 6.5V13.5L10 17L3 13.5V6.5Z" stroke="currentColor" stroke-width="1.6" stroke-linejoin="round"/>
+              <path d="M3 6.5L10 10M10 10L17 6.5M10 10V17" stroke="currentColor" stroke-width="1.6" stroke-linejoin="round"/>
+            </svg>
+          </template>
+        </SidebarItem>
+        <SidebarItem
+          to="/orders"
+          :label="t('nav.orders')"
+          :collapsed="collapsed"
+        >
+          <template #icon>
+            <svg width="18" height="18" viewBox="0 0 20 20" fill="none">
+              <path d="M5 3H13L16 6V16C16 16.5523 15.5523 17 15 17H5C4.44772 17 4 16.5523 4 16V4C4 3.44772 4.44772 3 5 3Z" stroke="currentColor" stroke-width="1.6" stroke-linejoin="round"/>
+              <path d="M13 3V6H16" stroke="currentColor" stroke-width="1.6" stroke-linejoin="round"/>
+              <path d="M7 10H13M7 13H11" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/>
+            </svg>
+          </template>
+        </SidebarItem>
+        <SidebarItem
+          to="/spending"
+          :label="t('nav.finance')"
+          :collapsed="collapsed"
+        >
+          <template #icon>
+            <svg width="18" height="18" viewBox="0 0 20 20" fill="none">
+              <circle cx="10" cy="10" r="7.5" stroke="currentColor" stroke-width="1.6"/>
+              <path d="M10 5.5V14.5M12.5 7.5C12.5 6.67 11.38 6 10 6C8.62 6 7.5 6.67 7.5 7.5C7.5 8.33 8.62 9 10 9C11.38 9 12.5 9.67 12.5 10.5C12.5 11.33 11.38 12 10 12C8.62 12 7.5 11.33 7.5 10.5" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/>
+            </svg>
+          </template>
+        </SidebarItem>
+        <SidebarItem
+          to="/reports"
+          :label="t('nav.analytics')"
+          :collapsed="collapsed"
+        >
+          <template #icon>
+            <svg width="18" height="18" viewBox="0 0 20 20" fill="none">
+              <path d="M3 17V11M8 17V7M13 17V13M18 17V4" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/>
+            </svg>
+          </template>
+        </SidebarItem>
+        <SidebarItem
+          to="/demand"
+          :label="t('nav.demandForecast')"
+          :collapsed="collapsed"
+        >
+          <template #icon>
+            <svg width="18" height="18" viewBox="0 0 20 20" fill="none">
+              <path d="M3 13L7 9L11 11L17 5" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
+              <path d="M13 5H17V9" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
+            </svg>
+          </template>
+        </SidebarItem>
+      </div>
+    </nav>
+
+    <!-- Footer: collapse toggle + version -->
+    <div class="sidebar-footer">
+      <button
+        class="collapse-btn"
+        @click="$emit('toggle-collapse')"
+        :title="collapsed ? 'Expand sidebar' : 'Collapse sidebar'"
+        :aria-label="collapsed ? 'Expand sidebar' : 'Collapse sidebar'"
+      >
+        <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
+          <path
+            :d="collapsed ? 'M6 4L10 8L6 12' : 'M10 4L6 8L10 12'"
+            stroke="currentColor"
+            stroke-width="1.8"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          />
+        </svg>
+        <span v-if="!collapsed" class="collapse-btn-label">Collapse</span>
+      </button>
+    </div>
+  </aside>
+</template>
+
+<script setup>
+import { useI18n } from '../composables/useI18n'
+import SidebarItem from './SidebarItem.vue'
+
+defineProps({
+  collapsed: {
+    type: Boolean,
+    default: false
+  },
+  mobileOpen: {
+    type: Boolean,
+    default: false
+  }
+})
+
+defineEmits(['toggle-collapse', 'close-mobile'])
+
+const { t } = useI18n()
+</script>
+
+<style scoped>
+.sidebar-overlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(15, 23, 42, 0.4);
+  backdrop-filter: blur(2px);
+  z-index: 199;
+  display: none;
+}
+
+.sidebar {
+  position: fixed;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  width: var(--sidebar-width);
+  background: var(--color-surface);
+  border-right: 1px solid var(--color-border);
+  display: flex;
+  flex-direction: column;
+  z-index: 200;
+  transition: width 0.25s ease;
+  overflow: hidden;
+}
+
+.sidebar-collapsed {
+  width: var(--sidebar-width-collapsed);
+}
+
+/* Header */
+.sidebar-header {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 1.125rem 1rem;
+  height: var(--header-height);
+  border-bottom: 1px solid var(--color-border);
+  flex-shrink: 0;
+}
+
+.logo-mark {
+  flex-shrink: 0;
+  width: 28px;
+  height: 28px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 8px;
+  margin-left: 2px;
+}
+
+.logo-text {
+  flex: 1;
+  overflow: hidden;
+  min-width: 0;
+}
+
+.logo-name {
+  display: block;
+  font-size: 0.9375rem;
+  font-weight: 700;
+  color: var(--color-text-primary);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  letter-spacing: -0.015em;
+  line-height: 1.2;
+}
+
+.logo-sub {
+  display: block;
+  font-size: 0.6875rem;
+  color: var(--color-text-muted);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  margin-top: 2px;
+  font-weight: 500;
+}
+
+/* Nav */
+.sidebar-nav {
+  flex: 1;
+  overflow-y: auto;
+  overflow-x: hidden;
+  padding: 1rem 0.625rem;
+  scrollbar-width: thin;
+  scrollbar-color: var(--color-border-strong) transparent;
+}
+
+.sidebar-nav::-webkit-scrollbar {
+  width: 4px;
+}
+
+.sidebar-nav::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.sidebar-nav::-webkit-scrollbar-thumb {
+  background: var(--color-border-strong);
+  border-radius: 4px;
+}
+
+.nav-section {
+  display: flex;
+  flex-direction: column;
+  gap: 0.125rem;
+}
+
+.nav-section-label {
+  font-size: 0.6875rem;
+  font-weight: 600;
+  color: var(--color-text-faint);
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  padding: 0 0.75rem;
+  margin-bottom: 0.5rem;
+  display: block;
+}
+
+.sidebar-collapsed .nav-section-label {
+  display: none;
+}
+
+/* Footer */
+.sidebar-footer {
+  padding: 0.625rem;
+  border-top: 1px solid var(--color-border);
+  flex-shrink: 0;
+}
+
+.collapse-btn {
+  display: flex;
+  align-items: center;
+  gap: 0.625rem;
+  width: 100%;
+  padding: 0.5rem 0.75rem;
+  background: transparent;
+  border: 1px solid transparent;
+  border-radius: var(--radius-md);
+  color: var(--color-text-muted);
+  cursor: pointer;
+  transition: all 0.15s ease;
+  font-family: inherit;
+  font-size: 0.8125rem;
+  font-weight: 500;
+}
+
+.collapse-btn:hover {
+  background: var(--color-surface-alt);
+  color: var(--color-text-primary);
+}
+
+.sidebar-collapsed .collapse-btn {
+  justify-content: center;
+  padding: 0.5rem;
+}
+
+.collapse-btn-label {
+  white-space: nowrap;
+}
+
+/* Mobile */
+@media (max-width: 768px) {
+  .sidebar-overlay {
+    display: block;
+  }
+
+  .sidebar {
+    transform: translateX(-100%);
+    transition: transform 0.3s ease, width 0.25s ease;
+    width: var(--sidebar-width) !important;
+    box-shadow: var(--shadow-lg);
+  }
+
+  .sidebar-mobile-open {
+    transform: translateX(0);
+  }
+}
+</style>
diff --git a/client/src/components/SidebarItem.vue b/client/src/components/SidebarItem.vue
new file mode 100644
index 00000000..38bb7bce
--- /dev/null
+++ b/client/src/components/SidebarItem.vue
@@ -0,0 +1,135 @@
+<template>
+  <router-link
+    :to="to"
+    class="sidebar-item"
+    :class="{ active: isActive, collapsed }"
+    :title="collapsed ? label : ''"
+  >
+    <span class="item-icon" aria-hidden="true">
+      <slot name="icon">
+        <span v-if="icon">{{ icon }}</span>
+      </slot>
+    </span>
+    <span class="item-label" :class="{ hidden: collapsed }">{{ label }}</span>
+    <span v-if="badge && !collapsed" class="item-badge">{{ badge }}</span>
+  </router-link>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+import { useRoute } from 'vue-router'
+
+const props = defineProps({
+  to: {
+    type: String,
+    required: true
+  },
+  label: {
+    type: String,
+    required: true
+  },
+  icon: {
+    type: String,
+    default: ''
+  },
+  badge: {
+    type: [String, Number],
+    default: null
+  },
+  collapsed: {
+    type: Boolean,
+    default: false
+  },
+  exact: {
+    type: Boolean,
+    default: false
+  }
+})
+
+const route = useRoute()
+
+const isActive = computed(() => {
+  if (props.exact) {
+    return route.path === props.to
+  }
+  return route.path === props.to || route.path.startsWith(props.to + '/')
+})
+</script>
+
+<style scoped>
+.sidebar-item {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 0.5625rem 0.75rem;
+  border-radius: var(--radius-md);
+  text-decoration: none;
+  color: var(--color-text-secondary);
+  font-size: 0.875rem;
+  font-weight: 500;
+  transition: all 0.15s ease;
+  white-space: nowrap;
+  overflow: hidden;
+  position: relative;
+}
+
+.sidebar-item:hover {
+  color: var(--color-text-primary);
+  background: var(--color-surface-alt);
+}
+
+.sidebar-item.active {
+  color: var(--color-primary-text);
+  background: var(--color-primary-soft);
+  font-weight: 600;
+}
+
+.sidebar-item.active .item-icon {
+  color: var(--color-primary);
+}
+
+.sidebar-item.collapsed {
+  justify-content: center;
+  padding: 0.5625rem;
+}
+
+.item-icon {
+  flex-shrink: 0;
+  width: 20px;
+  height: 20px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--color-text-muted);
+  transition: color 0.15s ease;
+}
+
+.sidebar-item:hover .item-icon {
+  color: var(--color-text-secondary);
+}
+
+.item-label {
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  transition: opacity 0.2s ease;
+}
+
+.item-label.hidden {
+  opacity: 0;
+  width: 0;
+  pointer-events: none;
+}
+
+.item-badge {
+  background: var(--color-primary);
+  color: white;
+  font-size: 0.6875rem;
+  font-weight: 700;
+  padding: 0.125rem 0.4375rem;
+  border-radius: var(--radius-full);
+  min-width: 18px;
+  text-align: center;
+  flex-shrink: 0;
+}
+</style>
diff --git a/client/src/components/TopHeader.vue b/client/src/components/TopHeader.vue
new file mode 100644
index 00000000..9d59085e
--- /dev/null
+++ b/client/src/components/TopHeader.vue
@@ -0,0 +1,269 @@
+<template>
+  <header class="top-header">
+    <!-- Mobile hamburger -->
+    <button
+      class="hamburger-btn"
+      @click="$emit('open-mobile-sidebar')"
+      aria-label="Open navigation"
+    >
+      <svg width="20" height="20" viewBox="0 0 20 20" fill="none">
+        <path d="M3 5H17M3 10H17M3 15H17" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/>
+      </svg>
+    </button>
+
+    <!-- Page title -->
+    <div class="header-title">
+      <span class="page-eyebrow">Workspace</span>
+      <h1 class="current-page">{{ currentPageTitle }}</h1>
+    </div>
+
+    <!-- Search -->
+    <div class="header-search">
+      <svg class="search-icon" width="16" height="16" viewBox="0 0 20 20" fill="none">
+        <circle cx="9" cy="9" r="6" stroke="currentColor" stroke-width="1.8"/>
+        <path d="M14 14L17 17" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/>
+      </svg>
+      <input
+        type="text"
+        :placeholder="t('common.search') + '…'"
+        class="search-input"
+        v-model="searchQuery"
+      />
+      <span class="search-kbd">⌘K</span>
+    </div>
+
+    <!-- Right side actions -->
+    <div class="header-actions">
+      <button class="icon-btn" aria-label="Notifications" title="Notifications">
+        <svg width="18" height="18" viewBox="0 0 20 20" fill="none">
+          <path d="M10 3C7.79 3 6 4.79 6 7V10L4.5 12.5H15.5L14 10V7C14 4.79 12.21 3 10 3Z" stroke="currentColor" stroke-width="1.6" stroke-linejoin="round"/>
+          <path d="M8.5 15C8.5 15.83 9.17 16.5 10 16.5C10.83 16.5 11.5 15.83 11.5 15" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/>
+        </svg>
+        <span class="notification-dot"></span>
+      </button>
+      <LanguageSwitcher />
+      <div class="header-divider"></div>
+      <ProfileMenu
+        @show-profile-details="$emit('show-profile-details')"
+        @show-tasks="$emit('show-tasks')"
+      />
+    </div>
+  </header>
+</template>
+
+<script setup>
+import { computed, ref } from 'vue'
+import { useRoute } from 'vue-router'
+import { useI18n } from '../composables/useI18n'
+import LanguageSwitcher from './LanguageSwitcher.vue'
+import ProfileMenu from './ProfileMenu.vue'
+
+defineEmits(['open-mobile-sidebar', 'show-profile-details', 'show-tasks'])
+
+const route = useRoute()
+const { t } = useI18n()
+const searchQuery = ref('')
+
+const currentPageTitle = computed(() => {
+  const pathMap = {
+    '/': t('nav.overview'),
+    '/inventory': t('nav.inventory'),
+    '/orders': t('nav.orders'),
+    '/spending': t('nav.finance'),
+    '/reports': t('nav.analytics'),
+    '/demand': t('nav.demandForecast')
+  }
+  return pathMap[route.path] || ''
+})
+</script>
+
+<style scoped>
+.top-header {
+  position: sticky;
+  top: 0;
+  z-index: 100;
+  height: var(--header-height);
+  background: var(--color-surface);
+  border-bottom: 1px solid var(--color-border);
+  display: flex;
+  align-items: center;
+  padding: 0 1.5rem;
+  gap: 1rem;
+}
+
+.hamburger-btn {
+  display: none;
+  align-items: center;
+  justify-content: center;
+  width: 36px;
+  height: 36px;
+  background: transparent;
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
+  color: var(--color-text-muted);
+  cursor: pointer;
+  transition: all 0.15s ease;
+  flex-shrink: 0;
+}
+
+.hamburger-btn:hover {
+  color: var(--color-text-primary);
+  background: var(--color-surface-alt);
+  border-color: var(--color-border-strong);
+}
+
+.header-title {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  min-width: 0;
+  flex-shrink: 0;
+}
+
+.page-eyebrow {
+  font-size: 0.6875rem;
+  font-weight: 600;
+  color: var(--color-text-faint);
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  line-height: 1;
+  margin-bottom: 3px;
+}
+
+.current-page {
+  font-size: 0.9375rem;
+  font-weight: 600;
+  color: var(--color-text-primary);
+  letter-spacing: -0.01em;
+  line-height: 1.2;
+  margin: 0;
+}
+
+/* Search */
+.header-search {
+  position: relative;
+  display: flex;
+  align-items: center;
+  flex: 1;
+  max-width: 420px;
+  margin: 0 auto 0 1.5rem;
+}
+
+.search-icon {
+  position: absolute;
+  left: 0.75rem;
+  color: var(--color-text-faint);
+  pointer-events: none;
+}
+
+.search-input {
+  width: 100%;
+  padding: 0.5rem 3rem 0.5rem 2.25rem;
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
+  font-size: 0.875rem;
+  color: var(--color-text-primary);
+  background: var(--color-surface-sunken);
+  transition: all 0.15s ease;
+}
+
+.search-input::placeholder {
+  color: var(--color-text-faint);
+}
+
+.search-input:focus {
+  outline: none;
+  border-color: var(--color-primary);
+  background: var(--color-surface);
+  box-shadow: var(--shadow-focus);
+}
+
+.search-kbd {
+  position: absolute;
+  right: 0.625rem;
+  font-size: 0.6875rem;
+  font-weight: 600;
+  color: var(--color-text-faint);
+  background: var(--color-surface);
+  border: 1px solid var(--color-border);
+  border-radius: 4px;
+  padding: 0.125rem 0.375rem;
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  pointer-events: none;
+}
+
+/* Right side */
+.header-actions {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  flex-shrink: 0;
+}
+
+.icon-btn {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 36px;
+  height: 36px;
+  background: transparent;
+  border: 1px solid transparent;
+  border-radius: var(--radius-md);
+  color: var(--color-text-muted);
+  cursor: pointer;
+  transition: all 0.15s ease;
+}
+
+.icon-btn:hover {
+  background: var(--color-surface-alt);
+  color: var(--color-text-primary);
+}
+
+.notification-dot {
+  position: absolute;
+  top: 8px;
+  right: 9px;
+  width: 7px;
+  height: 7px;
+  background: var(--color-error);
+  border: 2px solid var(--color-surface);
+  border-radius: 50%;
+}
+
+.header-divider {
+  width: 1px;
+  height: 24px;
+  background: var(--color-border);
+  margin: 0 0.25rem;
+}
+
+/* Mobile */
+@media (max-width: 1024px) {
+  .header-search {
+    max-width: 280px;
+  }
+
+  .search-kbd {
+    display: none;
+  }
+}
+
+@media (max-width: 768px) {
+  .hamburger-btn {
+    display: flex;
+  }
+
+  .page-eyebrow {
+    display: none;
+  }
+
+  .header-search {
+    display: none;
+  }
+
+  .top-header {
+    padding: 0 1rem;
+  }
+}
+</style>
diff --git a/client/src/locales/en.js b/client/src/locales/en.js
index 03a58fe6..0ce7d834 100644
--- a/client/src/locales/en.js
+++ b/client/src/locales/en.js
@@ -6,6 +6,7 @@ export default {
     orders: 'Orders',
     finance: 'Finance',
     demandForecast: 'Demand Forecast',
+    analytics: 'Analytics',
     companyName: 'Catalyst Components',
     subtitle: 'Inventory Management System'
   },
diff --git a/client/src/locales/ja.js b/client/src/locales/ja.js
index db33223a..bfa8aefd 100644
--- a/client/src/locales/ja.js
+++ b/client/src/locales/ja.js
@@ -6,6 +6,7 @@ export default {
     orders: '注文',
     finance: '財務',
     demandForecast: '需要予測',
+    analytics: 'アナリティクス',
     companyName: '触媒コンポーネンツ',
     subtitle: '在庫管理システム'
   },
diff --git a/client/src/views/Dashboard.vue b/client/src/views/Dashboard.vue
index 437da9c2..4c0f7b9b 100644
--- a/client/src/views/Dashboard.vue
+++ b/client/src/views/Dashboard.vue
@@ -4,6 +4,8 @@
       <h2>{{ t('dashboard.title') }}</h2>
     </div>
 
+    <FilterBar />
+
     <div v-if="loading" class="loading">{{ t('common.loading') }}</div>
     <div v-else-if="error" class="error">{{ error }}</div>
     <div v-else>
@@ -304,12 +306,14 @@ import { useI18n } from '../composables/useI18n'
 import { formatCurrency } from '../utils/currency'
 import ProductDetailModal from '../components/ProductDetailModal.vue'
 import BacklogDetailModal from '../components/BacklogDetailModal.vue'
+import FilterBar from '../components/FilterBar.vue'
 
 export default {
   name: 'Dashboard',
   components: {
     ProductDetailModal,
     BacklogDetailModal,
+    FilterBar,
   },
   setup() {
     const { t, currentCurrency, translateProductName, translateWarehouse } = useI18n()
diff --git a/client/src/views/Demand.vue b/client/src/views/Demand.vue
index 2cdf01a6..9c46abb6 100644
--- a/client/src/views/Demand.vue
+++ b/client/src/views/Demand.vue
@@ -5,6 +5,8 @@
       <p>{{ t('demand.description') }}</p>
     </div>
 
+    <FilterBar />
+
     <div v-if="loading" class="loading">{{ t('common.loading') }}</div>
     <div v-else-if="error" class="error">{{ error }}</div>
     <div v-else>
@@ -115,9 +117,11 @@ import { ref, onMounted, watch, computed } from 'vue'
 import { api } from '../api'
 import { useFilters } from '../composables/useFilters'
 import { useI18n } from '../composables/useI18n'
+import FilterBar from '../components/FilterBar.vue'
 
 export default {
   name: 'Demand',
+  components: { FilterBar },
   setup() {
     const { t } = useI18n()
     const loading = ref(true)
diff --git a/client/src/views/Inventory.vue b/client/src/views/Inventory.vue
index 4819326e..6b7a9185 100644
--- a/client/src/views/Inventory.vue
+++ b/client/src/views/Inventory.vue
@@ -5,6 +5,8 @@
       <p>{{ t('inventory.description') }}</p>
     </div>
 
+    <FilterBar />
+
     <div v-if="loading" class="loading">{{ t('common.loading') }}</div>
     <div v-else-if="error" class="error">{{ error }}</div>
     <div v-else>
@@ -89,11 +91,13 @@ import { api } from '../api'
 import { useFilters } from '../composables/useFilters'
 import { useI18n } from '../composables/useI18n'
 import InventoryDetailModal from '../components/InventoryDetailModal.vue'
+import FilterBar from '../components/FilterBar.vue'
 
 export default {
   name: 'Inventory',
   components: {
-    InventoryDetailModal
+    InventoryDetailModal,
+    FilterBar
   },
   setup() {
     const { t, currentCurrency, translateProductName, translateWarehouse } = useI18n()
diff --git a/client/src/views/Orders.vue b/client/src/views/Orders.vue
index 7413f6e6..609b6d43 100644
--- a/client/src/views/Orders.vue
+++ b/client/src/views/Orders.vue
@@ -5,6 +5,8 @@
       <p>{{ t('orders.description') }}</p>
     </div>
 
+    <FilterBar />
+
     <div v-if="loading" class="loading">{{ t('common.loading') }}</div>
     <div v-else-if="error" class="error">{{ error }}</div>
     <div v-else>
@@ -83,9 +85,11 @@ import { ref, onMounted, watch, computed } from 'vue'
 import { api } from '../api'
 import { useFilters } from '../composables/useFilters'
 import { useI18n } from '../composables/useI18n'
+import FilterBar from '../components/FilterBar.vue'
 
 export default {
   name: 'Orders',
+  components: { FilterBar },
   setup() {
     const { t, currentCurrency, translateProductName, translateCustomerName } = useI18n()
 
diff --git a/client/src/views/Spending.vue b/client/src/views/Spending.vue
index 17af4d10..376ea5a5 100644
--- a/client/src/views/Spending.vue
+++ b/client/src/views/Spending.vue
@@ -5,6 +5,8 @@
       <p>{{ t('finance.description') }}</p>
     </div>
 
+    <FilterBar />
+
     <div v-if="loading" class="loading">{{ t('common.loading') }}</div>
     <div v-else-if="error" class="error">{{ error }}</div>
     <div v-else>
@@ -178,11 +180,13 @@ import { useFilters } from '../composables/useFilters'
 import { useI18n } from '../composables/useI18n'
 import { formatCurrency as formatCurrencyUtil } from '../utils/currency'
 import CostDetailModal from '../components/CostDetailModal.vue'
+import FilterBar from '../components/FilterBar.vue'
 
 export default {
   name: 'Spending',
   components: {
-    CostDetailModal
+    CostDetailModal,
+    FilterBar
   },
   setup() {
     const { t, currentCurrency } = useI18n()