diff --git a/.stitch/DESIGN.md b/.stitch/DESIGN.md
new file mode 100644
index 0000000..fb91c36
--- /dev/null
+++ b/.stitch/DESIGN.md
@@ -0,0 +1,133 @@
+# Design System: BellSystems Console Design
+**Project ID:** 18406618574074411899
+
+---
+
+## 1. Visual Theme & Atmosphere
+
+**"The Digital Observatory"** — A high-fidelity, immersive enterprise command center aesthetic that rejects the typical boxed-in SaaS feel. The mood is best described as **Atmospheric Depth**: dark, spacious, and precision-focused. Inspired by high-end editorial design and command center interfaces, data is treated as a premium asset surfaced through tonal layering rather than structural lines.
+
+The base is built on **Midnight Navy** — a deep blue-black that evokes an infinite canvas — with UI elements that appear to float and glow rather than sit flat. Hierarchy is established exclusively through surface tone shifts; hard borders are forbidden. The result feels like peering through a high-resolution window into enterprise data, where clarity comes from contrast in depth rather than weight.
+
+Overall density is **medium-high** — information-rich layouts with generous vertical whitespace between elements, but no wasted screen real estate.
+
+---
+
+## 2. Color Palette & Roles
+
+### Core Surfaces (darkest to lightest)
+| Name | Hex | Role |
+|---|---|---|
+| **Abyss** | `#0a0e14` | Deepest well; nested content backgrounds |
+| **Midnight** | `#10141a` | Main application viewport / page background |
+| **Void Navy** | `#181c22` | Sidebar, header, and secondary navigation surfaces |
+| **Deep Slate** | `#1c2026` | Default card and information module background |
+| **Elevated Slate** | `#262a31` | High cards, hovered table rows |
+| **Island** | `#31353c` | Active states, selected rows, top-layer containers |
+| **Frosted Glass** | `#353940` | Floating modals and dropdowns (at 80% opacity with blur) |
+
+### Accent & Brand Colors
+| Name | Hex | Role |
+|---|---|---|
+| **Indigo Glow** | `#c0c1ff` | Primary accent; CTA text, key metrics, active nav indicator |
+| **Lavender Soft** | `#8083ff` | Primary container fills |
+| **Violet Pulse** | `#d2bbff` | Secondary accent; gradient pair to Indigo Glow |
+| **Deep Indigo** | `#6001d1` | Secondary container fills |
+| **Royal Indigo** | `#494bd6` | Inverse primary; used on light-over-dark contexts |
+| **Aqua Sky** | `#7bd0ff` | Tertiary accent; data visualization, device status indicators |
+| **Ocean** | `#009bd1` | Tertiary container |
+
+### Semantic / State Colors
+| Name | Hex | Role |
+|---|---|---|
+| **Coral Error** | `#ffb4ab` | Error text and destructive action labels |
+| **Crimson** | `#93000a` | Error container backgrounds |
+| **Emerald** (Tailwind) | `emerald-*` | Online / active device status badges |
+| **Amber** (Tailwind) | `amber-*` | Warning / pending device status badges |
+
+### Text Colors
+| Name | Hex | Role |
+|---|---|---|
+| **Cloud** | `#dfe2eb` | Primary text; body copy, data values, headings |
+| **Mist** | `#c7c4d7` | Secondary / muted text; labels, metadata |
+| **Ghost** | `#908fa0` | Placeholder text, disabled states, divider fill |
+| **Boundary** | `#464554` | Ghost border fallback for inputs (used at low opacity) |
+
+---
+
+## 3. Typography Rules
+
+**Single font family throughout: Inter** (geometric sans-serif). Used for headlines, body, and labels alike — unity is achieved through weight and tracking variation rather than font switching.
+
+| Level | Size | Weight | Tracking | Usage |
+|---|---|---|---|---|
+| **Display** | 56px / 3.5rem | Bold (700) | Tight (negative) | Hero KPI metrics, total counts |
+| **Headline** | 24px / 1.5rem | SemiBold (600) | Normal | Page titles, major section headings |
+| **Title** | 16px / 1.0rem | Medium (500) | Normal | Card titles, module headers, tab labels |
+| **Body** | 14px / 0.875rem | Regular (400) | Normal | Default text, table rows, descriptions |
+| **Label** | 11px / 0.6875rem | SemiBold (600) | Wide (+0.1em) | Sidebar category headers, metadata chips — All Caps |
+
+**The Editorial Rule:** Sidebar category headers use the Label style in all-caps with wide letter-spacing (+0.1em). This creates a "system-level" authority that contrasts with fluid body text and signals structural navigation. Body text must never be all-caps.
+
+---
+
+## 4. Component Stylings
+
+### Buttons
+- **Primary CTA:** Gradient fill from Indigo Glow (`#c0c1ff`) to Violet Pulse (`#d2bbff`). White text. Softly rounded corners (matching `lg` radius — just barely rounded, not pill). On hover, a high-glow indigo shadow emanates beneath the button.
+- **Secondary / Outline:** Island background (`#31353c`) with an extremely faint ghost border — outline-variant (`#464554`) at 20–30% opacity. Mist text (`#c7c4d7`).
+- **Tertiary / Ghost:** Fully transparent background. Mist text. On hover: Cloud text with elevated background tint.
+- **Destructive:** Coral Error text (`#ffb4ab`) on a Crimson container (`#93000a` at low opacity). Used for delete and irreversible actions. Never bright red.
+
+### Cards & Containers
+- **Default Card:** Deep Slate background (`#1c2026`). No visible border — separation is purely tonal. Features a **subtle top-edge inner glow**: `inset 0px 1px 0px rgba(192, 193, 255, 0.05)` — mimics a ceiling light reflecting off the card's glass surface.
+- **Corner Rounding:** Minimal — just enough to soften, not enough to feel playful. Approximately 4px (the `lg` token = 0.25rem). Cards feel rectangular and purposeful, not bubbly.
+- **Elevation principle:** No drop shadows on standard cards. Hierarchy comes from the surface color step (Void Navy → Deep Slate → Elevated Slate).
+- **Floating Modals / Dropdowns:** Frosted Glass background (`rgba(53, 57, 64, 0.8)`) with `backdrop-filter: blur(12px)`. This "Glassmorphism" effect keeps the user contextually anchored to the underlying page while the modal floats above. Shadow: `0px 8px 24px rgba(13, 17, 23, 0.6)` — navy-tinted, never pure black.
+
+### Inputs & Forms
+- **Default state:** Deep Slate background. Ghost border at very low opacity (near invisible). Text in Cloud color.
+- **Focus state:** Indigo Glow (`#c0c1ff`) border at 40% alpha creates a soft halo glow — not a hard ring. The inner glow on the input also subtly strengthens.
+- **Placeholder text:** Ghost color (`#908fa0`).
+- **Select / Dropdown:** Same surface as inputs; opens as a Frosted Glass panel with blur.
+- **No hard outlines at rest** — inputs feel embedded in the surface until interacted with.
+
+### Status Badges
+- **Shape:** Fully pill-shaped (maximum border-radius / `full` = 0.75rem).
+- **Style:** Functional color (Emerald, Amber, Coral) at approximately 15% background opacity, with the same color at full 100% opacity for the label text. Creates a "glowing ink" effect — the badge appears illuminated from within.
+- **Examples:** Online → soft emerald glow; Warning → soft amber glow; Error/Offline → soft coral glow.
+
+### Navigation Sidebar (224px wide)
+- **Background:** Void Navy (`#181c22`) — one step lighter than the main viewport.
+- **Active item indicator:** A `3px` vertical bar on the far-left edge using Indigo Glow (`#c0c1ff`). The text weight also increases slightly. No background highlight on active items — the light bar IS the indicator.
+- **Inactive items:** Mist text (`#c7c4d7`) at normal weight.
+- **Category headers:** Label-style — all-caps, 11px, SemiBold, wide tracking. Ghost color (`#908fa0`).
+- **Item padding:** Comfortable vertical padding (~9.6px / 0.6rem) for breathing room between items.
+- **No dividers** between nav sections — spacing does the work.
+
+### Data Tables
+- **Row separation:** No horizontal dividers. Alternating subtle tonal rows (Island `#31353c` on hover) and consistent vertical gap rhythm.
+- **Header row:** Mist text (`#c7c4d7`), Label-style capitalization, slightly smaller than body.
+- **Hovered row:** Elevated Slate (`#262a31`) or Island (`#31353c`) background.
+- **Selected row:** Island background with Indigo Glow left border accent.
+
+### Scrollbars
+- Slim — 4px wide track.
+- Thumb: Boundary color (`#464554`), with 2px border-radius.
+- Track: Transparent.
+- Overall feel: Nearly invisible unless sought out.
+
+---
+
+## 5. Layout Principles
+
+**Whitespace is structure.** The design never uses lines or dividers to separate sections — space does that job. When content feels disconnected, the solution is always to add vertical breathing room, never to draw a border.
+
+- **Page content area:** Fills the viewport to the right of the 224px sidebar. Padding inside the content area is generous — approximately 24–32px on all sides.
+- **Section spacing:** Major sections within a page are separated by approximately 24px of vertical space. Sub-sections by 16px.
+- **Card grid:** Cards sit in fluid grids with 16px gaps. Cards never touch each other.
+- **Alignment:** Strong left-edge alignment for all content. Data tables, card headers, and page titles all share the same left origin point.
+- **No horizontal rules / `` elements:** Surface color transitions and whitespace define the visual structure entirely.
+- **Modals:** Centered in the viewport, overlaid on a dark scrim. The page content behind is still readable through the frosted glass effect, maintaining spatial context.
+- **The "No Raw Border" rule:** Any element requiring a visible boundary for accessibility (e.g., an active input) must use the ghost border approach — Boundary color (`#464554`) at 20% opacity maximum. Full-opacity borders are strictly prohibited.
+- **Mobile / responsive:** The sidebar collapses to a drawer on narrow viewports. Cards reflow to single-column. The design's depth relies on background layers, so it translates naturally to smaller screens.
diff --git a/CLAUDE.md b/CLAUDE.md
new file mode 100644
index 0000000..7cd53c0
--- /dev/null
+++ b/CLAUDE.md
@@ -0,0 +1,383 @@
+# CLAUDE.md — BellSystems Control Panel v2
+# Instructions for Claude Code
+
+> Read this file at the start of every session.
+> This is the v2 project — a clean rebuild. The old v1 code lives in `frontend/src/_archive/` for reference only.
+> Also read `DESIGN.md` before writing any UI code.
+
+---
+
+## Project Structure
+
+```
+C:\development\bellsystems-cp-v2\
+│ CLAUDE.md ← you are here
+│ DESIGN.md ← design rules, component contracts, page layout spec
+│ docker-compose.yml
+│
+├── backend/ ← FastAPI backend — DO NOT MODIFY
+│
+└── frontend/
+ ├── src/
+ │ ├── _archive/ ← v1 reference code — READ ONLY, never import from here except auth
+ │ ├── assets/
+ │ │ ├── global-icons/ ← action SVGs (edit, delete, download, etc.)
+ │ │ ├── side-menu-icons/ ← sidebar navigation SVGs
+ │ │ ├── comms/ ← communication type SVGs
+ │ │ ├── other-icons/ ← misc SVGs
+ │ │ └── customer-status/ ← CRM status SVGs
+ │ ├── components/
+ │ │ ├── ui/ ← design system components (the ONLY place to source UI)
+ │ │ ├── layout/ ← Sidebar, Header, MainLayout
+ │ │ └── shared/
+ │ ├── hooks/
+ │ ├── lib/
+ │ ├── modals/ ← all modal components live here, grouped by domain
+ │ ├── pages/ ← one file per page, grouped by domain
+ │ ├── providers/
+ │ ├── router/
+ │ │ └── index.jsx ← all routes defined here
+ │ ├── styles/
+ │ │ ├── tokens.css ← ALL design tokens (colors, fonts, spacing, shadows)
+ │ │ ├── components.css ← ALL component-level styles
+ │ │ └── global.css ← base resets, typography, scrollbar, .page-wrapper
+ │ └── main.jsx ← app entry point
+ └── vite.config.js
+```
+
+---
+
+## Project Overview
+
+Bespoke SaaS Admin Console for BellSystems. Manages Devices, Customers (CRM),
+Manufacturing, Firmware, MQTT, Melodies, Staff, and more.
+
+- **Backend:** FastAPI at `backend/` — never modify
+- **Archive:** `frontend/src/_archive/` — v1 reference, read-only
+- **Active code:** `frontend/src/` (everything except `_archive/`)
+- **Design rules:** `DESIGN.md` at project root — read before writing any UI
+- **Style Guide:** live at `/dev/styleguide` — shows every component with every variant
+- **API client:** `frontend/src/lib/api.js` wraps `_archive/api/client.js`
+
+---
+
+## Import Alias
+
+`@/` maps to `frontend/src/`:
+
+```js
+import Button from '@/components/ui/Button' ✅
+import Select from '@/components/ui/Select' ✅
+import { useAuth } from '@/hooks/useAuth' ✅
+import MainLayout from '@/components/layout/MainLayout' ✅
+```
+
+Never use relative `../` paths except inside `providers/` and `hooks/` when referencing `_archive/`.
+
+---
+
+## The Golden Rules
+
+- **Never modify `_archive/`** — it is read-only reference material
+- **All new code goes in `frontend/src/`** — no exceptions
+- **No `/v2/` prefix anywhere** — routes start from `/`, imports start from `@/`
+- **Read `DESIGN.md` before writing any UI code**
+- **Source every UI element from `@/components/ui/`** — no raw HTML elements for styled things
+- **Use only CSS tokens** — never raw hex, rgb, or pixel values in component or page files
+- **Use `.masonry-grid` for all content pages with multiple variable-height sections** — never `display: grid` with fixed columns for card layouts. See DESIGN.md §11.
+
+---
+
+## Available UI Components
+
+Every component lives in `frontend/src/components/ui/`. These are the ONLY components to use.
+Check the live Style Guide at `/dev/styleguide` to see all variants and states.
+
+| Component | Import path | Purpose |
+|-----------------|--------------------------------------|----------------------------------------------|
+| `Button` | `@/components/ui/Button` | All interactive actions |
+| `StatusBadge` | `@/components/ui/StatusBadge` | Coloured status pills |
+| `FormField` | `@/components/ui/FormField` | Every text/email/password/textarea input |
+| `Select` | `@/components/ui/Select` | Custom dropdown (used inside FormField type="select") |
+| `Modal` | `@/components/ui/Modal` | All overlay dialogs |
+| `ConfirmDialog` | `@/components/ui/ConfirmDialog` | Destructive / confirmation prompts |
+| `DataTable` | `@/components/ui/DataTable` | All tabular data with sorting/selection |
+| `Pagination` | `@/components/ui/Pagination` | Page controls beneath DataTable |
+| `Spinner` | `@/components/ui/Spinner` | Loading indicators |
+| `PageHeader` | `@/components/ui/PageHeader` | Page title block — every page starts with this |
+| `Card` | `@/components/ui/Card` | Contained content sections |
+| `Tabs` | `@/components/ui/Tabs` | Tabbed navigation within a page |
+| `Toast` | `@/components/ui/Toast` | Transient notifications (via `useToast`) |
+| `SearchBar` | `@/components/ui/SearchBar` | Search inputs with debounce |
+| `Breadcrumbs` | `@/components/ui/Breadcrumbs` | Navigation trail on detail pages |
+| `Icon` | `@/components/ui/Icon` | Inline SVG icons by name |
+
+---
+
+## Folder Structure — Pages & Modals
+
+Folders mirror the sidebar section hierarchy exactly.
+
+```
+frontend/src/pages/
+├── auth/ ← unauthenticated routes (login)
+├── dashboard/ ← General section
+├── bellcloud/ ← Bell Cloud section
+│ ├── devices/
+│ │ └── notes/
+│ ├── users/
+│ ├── melodies/
+│ │ └── archetypes/
+│ └── mqtt/
+├── crm/ ← Headquarters section
+│ ├── comms/
+│ │ └── mail/
+│ ├── customers/
+│ │ └── tabs/
+│ ├── orders/
+│ ├── quotations/
+│ └── products/
+├── engineering/ ← Engineering section
+│ ├── manufacturing/
+│ ├── firmware/
+│ └── developer/
+├── public/ ← Public / unauthenticated pages
+│ ├── cloudflash/
+│ └── serial/
+├── settings/ ← Console Settings section
+│ └── staff/
+└── dev/ ← Internal dev tools (StyleGuide)
+```
+
+```
+frontend/src/modals/
+├── bellcloud/
+│ ├── devices/
+│ ├── melodies/
+│ └── users/
+├── crm/
+│ └── products/
+├── engineering/
+│ └── manufacturing/
+└── shared/
+```
+
+---
+
+## Page Layout — How Every Page Is Structured
+
+Every authenticated page is rendered inside `MainLayout`, which provides:
+- **Sidebar** — fixed left, `224px` wide (`--sidebar-width`)
+- **Header** — fixed top, `56px` tall (`--header-height`)
+- **Content area** — the remaining viewport space
+
+Inside the content area, every page uses the `.page-wrapper` class (defined in `global.css`):
+
+```css
+.page-wrapper {
+ flex: 1;
+ display: flex;
+ flex-direction: column;
+ padding: var(--space-12); /* 48px on all sides — desktop */
+ gap: var(--space-6); /* 24px between top-level sections */
+ min-width: 0;
+}
+
+@media (max-width: 768px) {
+ .page-wrapper {
+ padding: var(--space-8); /* 32px on mobile */
+ gap: var(--space-4);
+ }
+}
+```
+
+**This is the consistency guarantee**: because every page uses `.page-wrapper`, the `` title on every page starts at exactly the same position — 48px from the top and 48px from the left edge of the content area. Never override these paddings. Never add extra wrappers around `page-wrapper` that introduce additional offset.
+
+### Content width modes
+
+Pages fall into two modes — choose based on how much content the page has:
+
+**Full-width** (default — lists, tables, dashboards):
+```jsx
+
+```
+
+**Centered** (forms, settings, pages with very few items):
+```jsx
+
+```
+Centered mode caps each direct child at `--content-max-width-sm` (640px) by default and centers it horizontally. Override when needed:
+```jsx
+
+```
+Available tokens: `--content-max-width-xs` (480px), `--content-max-width-sm` (640px), `--content-max-width-md` (800px), `--content-max-width-lg` (1024px).
+
+---
+
+## Rules for Every Page
+
+### Before writing any code
+1. Read `DESIGN.md` — confirm tokens and components to use
+2. Check `frontend/src/components/ui/` — use existing components only
+3. Check the Style Guide at `/dev/styleguide` for the correct variant/props
+4. Check `frontend/src/_archive/` for the equivalent v1 page — copy API calls and data shape only, never styling
+
+### Page template
+
+```jsx
+// frontend/src/pages/[domain]/PageName.jsx
+
+import PageHeader from '@/components/ui/PageHeader'
+import { useAuth } from '@/hooks/useAuth'
+// Import ONLY from @/components/ui/ — never raw HTML elements for styled things
+
+export default function PageName() {
+ // 1. Auth
+ const { user } = useAuth()
+
+ // 2. State & data fetching
+
+ // 3. Event handlers
+
+ // 4. Render — always handle: loading, error, empty, data states
+ return (
+
+
+ {/* Action buttons — use
+
+ {/* Page content — use Card, DataTable, Tabs, etc. */}
+
+ )
+}
+```
+
+### Styling rules
+- **Tailwind** for layout only: `flex`, `grid`, `items-center`, `min-w-0`, etc.
+- **CSS token variables** for ALL colors, spacing, typography — `var(--token-name)`
+- **No** `.module.css` or per-page scoped CSS files
+- **No** `style={{ }}` inline styles except for genuinely dynamic values (e.g. calculated widths)
+- **No** raw hex, rgb, or pixel values anywhere
+
+### Toolbar buttons — matching SearchBar height
+
+`.btn` has `line-height: 1` while `.searchbar-input` has `line-height: var(--line-height-base)` (1.5). This makes buttons shorter than the search bar by default. Whenever a `