diff --git a/apps/desktop-ui/DESIGN.md b/apps/desktop-ui/DESIGN.md
new file mode 100644
index 00000000..f85a045e
--- /dev/null
+++ b/apps/desktop-ui/DESIGN.md
@@ -0,0 +1,62 @@
+# DESIGN — MyDevTools Desktop ("Pro Instrument")
+
+The desktop app is a **pro instrument**, not a web dashboard. Reference the things
+that make Figma, Linear, Raycast, and Adobe apps feel native and expensive:
+custom window chrome, dense information, one confident accent, keyboard-first
+navigation, and motion that only ever conveys state.
+
+Register: **product** (design serves the task). The tool disappears into the work.
+
+## Anti-references (what it must NOT look like)
+- shadcn/Vercel starter dark mode (neutral zinc). The current dark theme IS this — replace it.
+- A 247px white sidebar + uniform card grid + `0.5rem` radius everywhere (SaaS template silhouette).
+- User-selectable accent colors (blue/purple/green picker). One brand accent only.
+- A browser-style OS title bar sitting above web content.
+
+## Theme
+- **Dark is the signature and default.** One genuinely-refined **Light** exists (manual toggle). No `system`, no color picker.
+- Graphite blue-black surfaces (hue ~225, low chroma), stepped by lightness — never pure black, never zinc-neutral.
+
+## Color (HSL tokens, dark)
+| Role | Token | Value | Use |
+|---|---|---|---|
+| App base | `--background` | `225 14% 8%` | behind panels, titlebar |
+| Panel | `--surface-1` / `--card` | `225 13% 11%` | content surface |
+| Raised | `--surface-2` | `225 12% 13%` | toolbars, tab strip |
+| Hover/input | `--surface-3` | `225 11% 16%` | inputs, hovered rows |
+| Ink | `--foreground` | `220 16% 96%` | primary text |
+| Muted ink | `--muted-foreground` | `222 10% 64%` | labels (≥4.5:1) |
+| Hairline | `--border` | `225 9% 20%` | 1px separators |
+| **Accent** | `--primary` / `--ring` | `235 84% 67%` | **electric indigo — selection + primary action + state only, never decoration** |
+
+- Per-**category** accent colors stay (they help navigate 80 tools). The single brand accent is separate.
+- Semantic: destructive red kept; success/warning/info to be added as tokens when needed.
+- Mono (`--font-geist-mono`) for all values: hashes, JSON, timestamps, byte counts. Values feel like data.
+
+## Typography
+- One family: **Geist Sans** (UI) + **Geist Mono** (data). No display pairing.
+- Fixed rem scale, tight ratio (~1.2). UI is dense: ~13px controls, 12px secondary labels, 11px micro. Reading prose 14px, capped 65–75ch.
+- Headings tighten letter-spacing slightly; never fluid/clamp in-app.
+
+## Shape, density, elevation
+- `--radius: 0.375rem` (6px) base; controls tighter. No 8px-everywhere.
+- Dense spacing on a 4px grid. Rely on **surface steps + hairline borders**, not shadows. One soft shadow reserved for popovers / the ⌘K palette.
+
+## Chrome architecture
+- **Custom unified titlebar+toolbar** (Tauri, decorations off): inset macOS traffic lights, app mark, current-tool breadcrumb, ⌘K trigger, actions. No OS strip.
+- **Left nav**: dense sidebar (~220px) collapsible to a ~52px icon rail. Not a white 247px web sidebar.
+- **⌘K command palette**: the primary way to move across 80 tools.
+
+## Tabs (Figma-style)
+- **Not pills.** Square tabs, softly rounded **top** corners only (`rounded-t`, square bottom).
+- Tabs sit on a raised strip (`--surface-2`) and align to its bottom edge.
+- **Dividers** (1px) between inactive tabs; suppressed next to the active tab.
+- **Active tab is welded to the content**: its background matches the content surface and it breaks the strip's bottom border (the seam), with a 2px accent bar on top. Clear top-strip / content separation.
+- Monochrome tool icon (accent-tinted when active) — no random rainbow chips.
+
+## Motion
+- 120–200ms, ease-out (quart/expo). State only: selection, panel open, palette, feedback. No page-load choreography, no decorative motion.
+- Every animation has a `prefers-reduced-motion` fallback.
+
+## Component contract
+Every interactive element ships default/hover/focus/active/disabled/loading. Skeletons over spinners. Empty states teach. Same button/control vocabulary everywhere.
diff --git a/apps/desktop-ui/src/app/globals.css b/apps/desktop-ui/src/app/globals.css
index 76fed569..88d4cd27 100644
--- a/apps/desktop-ui/src/app/globals.css
+++ b/apps/desktop-ui/src/app/globals.css
@@ -38,7 +38,7 @@ body {
     --chart-3: 197 37% 24%;
     --chart-4: 43 74% 66%;
     --chart-5: 27 87% 67%;
-    --radius: 0.5rem;
+    --radius: 0.375rem;
     --surface-1: 0 0% 100%;
     --surface-2: 225 24% 97.5%;
     --surface-3: 225 22% 94.5%;
@@ -61,144 +61,50 @@ body {
   }
 
   .dark {
-    /* Minimalist dark theme - shadcn neutral zinc defaults */
-    --background: 240 10% 3.9%;
-    --foreground: 0 0% 98%;
-    --card: 240 10% 3.9%;
-    --card-foreground: 0 0% 98%;
-    --popover: 240 10% 3.9%;
-    --popover-foreground: 0 0% 98%;
-    --primary: 0 0% 98%;
-    --primary-foreground: 240 5.9% 10%;
-    --secondary: 240 3.7% 15.9%;
-    --secondary-foreground: 0 0% 98%;
-    --muted: 240 3.7% 15.9%;
-    --muted-foreground: 240 5% 64.9%;
-    --accent: 240 3.7% 15.9%;
-    --accent-foreground: 0 0% 98%;
-    --destructive: 0 62.8% 30.6%;
-    --destructive-foreground: 0 0% 98%;
-    --border: 240 3.7% 15.9%;
-    --input: 240 3.7% 15.9%;
-    --ring: 240 4.9% 83.9%;
-    /* Chart colors remain balanced */
-    --chart-1: 220 70% 50%;
-    --chart-2: 160 60% 45%;
-    --chart-3: 30 80% 55%;
-    --chart-4: 280 65% 60%;
-    --chart-5: 340 75% 55%;
-    --card: 240 10% 5.5%;
-    --surface-1: 240 8% 7%;
-    --surface-2: 240 7% 9%;
-    --surface-3: 240 6% 12%;
-    /* Sidebar aligned to the deck blue-black theme (was a desaturated grey) */
-    --sidebar-background: 240 10% 5%;
-    --sidebar-foreground: 240 4.8% 95.9%;
-    --sidebar-primary: 0 0% 98%;
-    --sidebar-primary-foreground: 240 5.9% 10%;
-    --sidebar-accent: 240 3.7% 15.9%;
-    --sidebar-accent-foreground: 240 4.8% 95.9%;
-    --sidebar-border: 240 3.7% 15.9%;
-    --sidebar-ring: 240 4.9% 83.9%;
-  }
-
-  /* Color Theme Overrides - Light Mode */
-  :root.blue {
-    --primary: 217.2 91.2% 59.8%;
-    --primary-foreground: 0 0% 98%;
-    --ring: 217.2 91.2% 59.8%;
-    --sidebar-primary: 217.2 91.2% 59.8%;
-  }
-
-  :root.purple {
-    --primary: 258.3 89.5% 66.3%;
-    --primary-foreground: 0 0% 98%;
-    --ring: 258.3 89.5% 66.3%;
-    --sidebar-primary: 258.3 89.5% 66.3%;
-  }
-
-  :root.green {
-    --primary: 142.1 76.2% 36.3%;
-    --primary-foreground: 0 0% 98%;
-    --ring: 142.1 76.2% 36.3%;
-    --sidebar-primary: 142.1 76.2% 36.3%;
-  }
-
-  :root.orange {
-    --primary: 24.6 95% 53.1%;
-    --primary-foreground: 0 0% 98%;
-    --ring: 24.6 95% 53.1%;
-    --sidebar-primary: 24.6 95% 53.1%;
-  }
-
-  :root.red {
-    --primary: 0 72.2% 50.6%;
-    --primary-foreground: 0 0% 98%;
-    --ring: 0 72.2% 50.6%;
-    --sidebar-primary: 0 72.2% 50.6%;
-  }
-
-  :root.pink {
-    --primary: 340.7 82.1% 52.7%;
-    --primary-foreground: 0 0% 98%;
-    --ring: 340.7 82.1% 52.7%;
-    --sidebar-primary: 340.7 82.1% 52.7%;
-  }
-
-  :root.cyan {
-    --primary: 199.1 89.1% 48.2%;
-    --primary-foreground: 0 0% 98%;
-    --ring: 199.1 89.1% 48.2%;
-    --sidebar-primary: 199.1 89.1% 48.2%;
-  }
-
-  :root.indigo {
-    --primary: 239.4 83.9% 66.7%;
-    --primary-foreground: 0 0% 98%;
-    --ring: 239.4 83.9% 66.7%;
-    --sidebar-primary: 239.4 83.9% 66.7%;
-  }
-
-  /* Color Theme Overrides - Dark Mode */
-  .dark.blue {
-    --primary: 217.2 91.2% 59.8%;
-    --sidebar-primary: 217.2 91.2% 59.8%;
-  }
-
-  .dark.purple {
-    --primary: 258.3 89.5% 66.3%;
-    --sidebar-primary: 258.3 89.5% 66.3%;
-  }
-
-  .dark.green {
-    --primary: 142.1 70.6% 45.3%;
-    --sidebar-primary: 142.1 70.6% 45.3%;
-  }
-
-  .dark.orange {
-    --primary: 24.6 95% 53.1%;
-    --sidebar-primary: 24.6 95% 53.1%;
-  }
-
-  .dark.red {
-    --primary: 0 72.2% 50.6%;
-    --sidebar-primary: 0 72.2% 50.6%;
-  }
-
-  .dark.pink {
-    --primary: 340.7 82.1% 52.7%;
-    --sidebar-primary: 340.7 82.1% 52.7%;
-  }
-
-  .dark.cyan {
-    --primary: 199.1 89.1% 48.2%;
-    --sidebar-primary: 199.1 89.1% 48.2%;
+    /* Pro Instrument — graphite blue-black (hue ~225, low chroma). Surfaces
+       step by lightness; one electric-indigo accent; hairline borders. */
+    --background: 225 14% 8%;          /* app base behind panels + titlebar */
+    --foreground: 220 16% 96%;
+    --card: 225 13% 11%;               /* = surface-1 (content panels) */
+    --card-foreground: 220 16% 96%;
+    --popover: 225 14% 13%;            /* menus / ⌘K palette, slightly lifted */
+    --popover-foreground: 220 16% 96%;
+    --primary: 235 84% 67%;            /* signature accent — electric indigo */
+    --primary-foreground: 0 0% 100%;
+    --secondary: 225 10% 16%;
+    --secondary-foreground: 220 14% 92%;
+    --muted: 225 10% 15%;
+    --muted-foreground: 222 10% 64%;   /* ≥4.5:1 on surfaces */
+    --accent: 225 11% 18%;             /* hover tint (neutral, not brand) */
+    --accent-foreground: 220 16% 96%;
+    --destructive: 0 72% 57%;
+    --destructive-foreground: 0 0% 100%;
+    --border: 225 9% 20%;              /* hairline */
+    --input: 225 9% 22%;
+    --ring: 235 84% 67%;
+    /* Chart / category palette (kept vivid for data + category accents) */
+    --chart-1: 235 84% 67%;
+    --chart-2: 190 80% 55%;
+    --chart-3: 160 60% 50%;
+    --chart-4: 40 90% 62%;
+    --chart-5: 330 75% 62%;
+    --surface-1: 225 13% 11%;
+    --surface-2: 225 12% 13%;
+    --surface-3: 225 11% 16%;
+    --sidebar-background: 225 14% 9%;
+    --sidebar-foreground: 222 11% 72%;
+    --sidebar-primary: 235 84% 67%;
+    --sidebar-primary-foreground: 0 0% 100%;
+    --sidebar-accent: 225 12% 15%;
+    --sidebar-accent-foreground: 220 16% 96%;
+    --sidebar-border: 225 9% 18%;
+    --sidebar-ring: 235 84% 67%;
   }
 
-  .dark.indigo {
-    --primary: 239.4 83.9% 66.7%;
-    --sidebar-primary: 239.4 83.9% 66.7%;
-  }
+  /* Pro Instrument commits to ONE brand accent (electric indigo, set above).
+     The user-selectable accent-color overrides were removed intentionally —
+     multiple brand colors dilute identity and read as a web-app template.
+     Per-category tool accents live in CATEGORY_ACCENT, not here. */
 }
 
 /* Custom Scrollbar for Sidebar */
diff --git a/apps/desktop-ui/src/app/layout.tsx b/apps/desktop-ui/src/app/layout.tsx
index 390f2741..69fd690b 100644
--- a/apps/desktop-ui/src/app/layout.tsx
+++ b/apps/desktop-ui/src/app/layout.tsx
@@ -118,8 +118,8 @@ export default async function RootLayout({
       <body suppressHydrationWarning className="min-h-screen bg-background font-sans antialiased">
         <ThemeProvider
           attribute="class"
-          defaultTheme="system"
-          enableSystem
+          defaultTheme="dark"
+          enableSystem={false}
           disableTransitionOnChange
         >
           <NextIntlClientProvider messages={messages}>
diff --git a/apps/desktop-ui/src/components/dashboard/dashboard-hero.tsx b/apps/desktop-ui/src/components/dashboard/dashboard-hero.tsx
index 1054da6e..befde774 100644
--- a/apps/desktop-ui/src/components/dashboard/dashboard-hero.tsx
+++ b/apps/desktop-ui/src/components/dashboard/dashboard-hero.tsx
@@ -48,7 +48,7 @@ function Stat({
           'flex h-7 w-7 shrink-0 items-center justify-center rounded-lg ring-1 ring-inset ring-border/50',
           isZero
             ? 'bg-muted text-muted-foreground'
-            : 'bg-gradient-to-br from-primary/15 to-violet-500/10 text-primary',
+            : 'bg-primary/[0.12] text-primary',
         )}
       >
         <Icon size={14} className={isZero ? 'text-muted-foreground' : 'text-primary'} />
@@ -120,10 +120,10 @@ export function DashboardHero({
         <div className="hidden md:flex flex-col gap-4">
           <div className="space-y-1.5">
             <p className="inline-flex items-center gap-1.5 text-[11px] font-semibold uppercase tracking-[0.18em] text-muted-foreground">
-              <span className="h-1.5 w-1.5 rounded-full bg-gradient-to-br from-primary to-violet-500" />
+              <span className="h-1.5 w-1.5 rounded-full bg-primary" />
               {dashboardGreeting(t)}
             </p>
-            <h1 className="dash-greeting text-2xl sm:text-[1.75rem] font-bold tracking-tight leading-tight">
+            <h1 className="text-2xl sm:text-[1.75rem] font-bold tracking-tight leading-tight text-foreground">
               {user?.displayName
                 ? t('welcomeBackNamed', { name: user.displayName.split(' ')[0] })
                 : t('welcomeBack')}
diff --git a/apps/desktop-ui/src/components/dashboard/dashboard-tool-card.tsx b/apps/desktop-ui/src/components/dashboard/dashboard-tool-card.tsx
index bdc678f0..6f286555 100644
--- a/apps/desktop-ui/src/components/dashboard/dashboard-tool-card.tsx
+++ b/apps/desktop-ui/src/components/dashboard/dashboard-tool-card.tsx
@@ -95,7 +95,7 @@ export const ToolCard = React.memo(function ToolCard({
         <Card
           ref={cardRef}
           className={cn(
-            'dash-card-sheen relative h-full overflow-hidden rounded-xl border border-border bg-gradient-to-br from-card to-card/80',
+            'dash-card-sheen relative h-full overflow-hidden rounded-lg border border-border bg-card',
             'shadow-sm dark:shadow-none',
             'transition-[colors,transform,box-shadow,border-color] duration-200 ease-out',
             'hover:border-primary/40 hover:shadow-lg hover:shadow-primary/5 motion-safe:hover:-translate-y-0.5',
diff --git a/apps/desktop-ui/src/components/global-command-palette.tsx b/apps/desktop-ui/src/components/global-command-palette.tsx
index 510a34b2..92985236 100644
--- a/apps/desktop-ui/src/components/global-command-palette.tsx
+++ b/apps/desktop-ui/src/components/global-command-palette.tsx
@@ -156,11 +156,11 @@ export function GlobalCommandPalette() {
   const commandSurfaceClass =
     '[&_[cmdk-group-heading]]:px-3 [&_[cmdk-group-heading]]:pt-2.5 [&_[cmdk-group-heading]]:pb-1 [&_[cmdk-group-heading]]:text-[10px] [&_[cmdk-group-heading]]:font-semibold [&_[cmdk-group-heading]]:uppercase [&_[cmdk-group-heading]]:tracking-[0.14em] [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-14 [&_[cmdk-input]]:text-base'
 
-  // Shared row treatment — gradient selection sweep + icon chip (Raycast-style).
+  // Shared row treatment — solid accent selection + icon chip.
   const itemClass =
-    'group mx-1 flex items-center gap-3 rounded-xl px-2 py-2 transition-colors aria-selected:bg-gradient-to-r aria-selected:from-primary/[0.14] aria-selected:via-primary/[0.06] aria-selected:to-transparent aria-selected:ring-1 aria-selected:ring-inset aria-selected:ring-primary/20'
+    'group mx-1 flex items-center gap-3 rounded-lg px-2 py-2 transition-colors aria-selected:bg-primary/10 aria-selected:ring-1 aria-selected:ring-inset aria-selected:ring-primary/20'
   const chipClass =
-    'flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-muted/60 text-muted-foreground ring-1 ring-inset ring-border/50 transition-colors group-aria-selected:bg-gradient-to-br group-aria-selected:from-primary/20 group-aria-selected:to-violet-500/10 group-aria-selected:text-primary group-aria-selected:ring-primary/20'
+    'flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-[hsl(var(--surface-3))] text-muted-foreground ring-1 ring-inset ring-border/50 transition-colors group-aria-selected:bg-primary/15 group-aria-selected:text-primary group-aria-selected:ring-primary/30'
 
   return (
     <Dialog open={open} onOpenChange={setOpen}>
@@ -169,16 +169,12 @@ export function GlobalCommandPalette() {
         className={cn(
           'overflow-hidden p-0 gap-0 max-w-2xl',
           'max-h-[min(85vh,640px)] flex flex-col',
-          'rounded-2xl border-border/60 bg-popover/90 backdrop-blur-2xl',
-          'shadow-2xl shadow-primary/10 ring-1 ring-inset ring-white/[0.04]'
+          'rounded-xl border-border bg-popover/95 backdrop-blur-xl',
+          'shadow-2xl shadow-black/40'
         )}
       >
         <DialogTitle className="sr-only">Search tools and pages</DialogTitle>
-        {/* Gradient hairline — the palette's signature accent */}
-        <div
-          aria-hidden
-          className="h-px w-full shrink-0 bg-gradient-to-r from-transparent via-primary/50 to-transparent"
-        />
+        <div aria-hidden className="h-px w-full shrink-0 bg-border" />
         <Command
           className={cn(
             'rounded-none border-none bg-transparent shadow-none',
diff --git a/apps/desktop-ui/src/components/json-formatter/json-formatter-layout.tsx b/apps/desktop-ui/src/components/json-formatter/json-formatter-layout.tsx
index 369b2cd0..981c9021 100644
--- a/apps/desktop-ui/src/components/json-formatter/json-formatter-layout.tsx
+++ b/apps/desktop-ui/src/components/json-formatter/json-formatter-layout.tsx
@@ -413,7 +413,7 @@ export function JsonFormatterLayout() {
     const state = pane === 'left' ? leftPane : rightPane
     const isTextMode = state.mode === ('text' as Mode)
     return (
-      <div className="flex flex-wrap items-center gap-1 border-b border-border/60 bg-muted/30 px-2 py-1.5">
+      <div className="flex flex-wrap items-center gap-1 border-b border-border bg-[hsl(var(--surface-2))] px-2 py-1.5">
         <DropdownMenu>
           <DropdownMenuTrigger asChild>
             <Button variant="ghost" size="sm" className="h-8 max-w-[180px] gap-1 px-2">
@@ -544,7 +544,7 @@ export function JsonFormatterLayout() {
 
       {isMobile ? (
         /* Mobile: single full-height pane, toggled by tabs */
-        <div className="min-h-0 flex-1 rounded-xl border border-border/70 bg-card shadow-sm overflow-hidden flex flex-col">
+        <div className="min-h-0 flex-1 rounded-lg border border-border bg-card overflow-hidden flex flex-col">
           {renderPaneToolbar(activePane)}
           <div className="min-h-0 flex-1">{renderEditor(activePane)}</div>
         </div>
@@ -552,7 +552,7 @@ export function JsonFormatterLayout() {
         /* Desktop: side-by-side resizable panes */
         <ResizablePanelGroup
           direction="horizontal"
-          className="min-h-0 flex-1 rounded-xl border border-border/70 bg-card shadow-sm overflow-hidden"
+          className="min-h-0 flex-1 rounded-lg border border-border bg-card overflow-hidden"
         >
           <ResizablePanel defaultSize={50} minSize={20} className="min-h-0">
             <div className="flex h-full min-h-0 flex-col">
diff --git a/apps/desktop-ui/src/components/regex-tester/regex-tester-layout.tsx b/apps/desktop-ui/src/components/regex-tester/regex-tester-layout.tsx
index 174fb8e8..6beb2f2e 100644
--- a/apps/desktop-ui/src/components/regex-tester/regex-tester-layout.tsx
+++ b/apps/desktop-ui/src/components/regex-tester/regex-tester-layout.tsx
@@ -213,7 +213,7 @@ export function RegexTesterLayout() {
       </Card>
 
       <Card className="flex flex-col flex-1 min-h-0 overflow-hidden p-0">
-        <div className="flex items-center justify-between px-3 py-2 border-b border-border/50 bg-muted/30 shrink-0">
+        <div className="flex items-center justify-between px-3 py-2 border-b border-border bg-[hsl(var(--surface-2))] shrink-0">
           <Label htmlFor="regex-text" className="text-xs font-medium text-muted-foreground uppercase tracking-wider">
             {t('testTextLabel')}
           </Label>
diff --git a/apps/desktop-ui/src/components/shell/top-bar.tsx b/apps/desktop-ui/src/components/shell/top-bar.tsx
new file mode 100644
index 00000000..ccbe4a78
--- /dev/null
+++ b/apps/desktop-ui/src/components/shell/top-bar.tsx
@@ -0,0 +1,171 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+import Image from 'next/image'
+import Link from 'next/link'
+import { useRouter } from 'next/navigation'
+import { Settings, LogOut, User as UserIcon, HelpCircle } from 'lucide-react'
+import { Logo } from '@/components/logo'
+import { ModeToggle } from '@/components/modeToggle'
+import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu'
+import { useAppUser } from '@/hooks/use-app-user'
+import { useSignOut } from '@/hooks/use-sign-out'
+import { isDesktop } from '@/lib/desktop/is-desktop'
+import { cn } from '@/lib/utils'
+
+/**
+ * Unified top bar — the pro-app chrome that replaces the sidebar logo lockup
+ * and footer profile card. Left: brand → dashboard. Right: theme, settings,
+ * profile. The wide middle is a drag region (empty by design — tool search
+ * lives on the dashboard + the ⌘K palette). `data-tauri-drag-region` makes it
+ * draggable once the OS title bar is turned off (traffic lights inset).
+ */
+export function TopBar() {
+  const router = useRouter()
+  const user = useAppUser()
+  const signOut = useSignOut()
+
+  // macOS traffic lights are inset into this bar (titleBarStyle: Overlay), so
+  // pad the left only inside the Tauri window. Mounted-guarded to avoid an SSR
+  // hydration mismatch (isDesktop() is false on the server).
+  const [isTauri, setIsTauri] = useState(false)
+  const [version, setVersion] = useState('')
+  useEffect(() => {
+    setIsTauri(isDesktop())
+    let cancelled = false
+    import('@tauri-apps/api/app')
+      .then((m) => m.getVersion())
+      .then((v) => {
+        if (!cancelled) setVersion(v)
+      })
+      .catch(() => {})
+    return () => {
+      cancelled = true
+    }
+  }, [])
+
+  const isLoggedIn = Boolean(user.name || user.email)
+  const displayName = user.name?.trim() || user.email?.split('@')[0] || 'User'
+  const initial = (user.name?.trim()?.[0] || user.email?.[0] || '?').toUpperCase()
+
+  return (
+    <header
+      data-tauri-drag-region
+      className={cn(
+        'flex h-14 w-full shrink-0 items-center gap-3 border-b border-border bg-[hsl(var(--surface-2))]',
+        isTauri ? 'pl-[22px] pr-6' : 'px-4',
+      )}
+    >
+      {/* Brand → dashboard. Icon (logo mark) + a larger wordmark, sized
+          independently so the wordmark can grow without the mark. */}
+      <button
+        onClick={() => router.push('/dashboard')}
+        className="flex shrink-0 items-center gap-2.5 rounded-md px-1.5 py-1.5 transition-colors hover:bg-foreground/[0.06]"
+        aria-label="Go to dashboard"
+      >
+        <Logo size={28} showText={false} />
+        <span className="relative hidden h-8 w-40 sm:block">
+          <Image
+            src="/logo-text-light.png"
+            alt="MyDevTools"
+            fill
+            className="object-contain object-left dark:hidden"
+          />
+          <Image
+            src="/logo-text-dark.png"
+            alt="MyDevTools"
+            fill
+            className="hidden object-contain object-left dark:block"
+          />
+        </span>
+        {version ? (
+          <span className="-ml-1.5 hidden shrink-0 self-center rounded border border-border bg-[hsl(var(--surface-3))] px-1.5 py-0.5 font-mono text-[11px] leading-none text-muted-foreground sm:inline-block">
+            v{version}
+          </span>
+        ) : null}
+      </button>
+
+      {/* Draggable spacer — the breathing room in the middle */}
+      <div data-tauri-drag-region className="h-full flex-1" />
+
+      {/* Right cluster */}
+      <div className="flex shrink-0 items-center gap-2">
+        <ModeToggle />
+
+        <div className="mx-0.5 h-5 w-px bg-border" />
+
+        <Link
+          href="/settings"
+          className="flex h-8 w-8 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-foreground/[0.06] hover:text-foreground"
+          aria-label="Settings"
+        >
+          <Settings className="h-[18px] w-[18px]" strokeWidth={1.75} />
+        </Link>
+
+        <DropdownMenu modal={false}>
+          <DropdownMenuTrigger asChild>
+            <button
+              className="ml-0.5 flex h-9 w-9 items-center justify-center rounded-full outline-none ring-offset-2 ring-offset-[hsl(var(--surface-2))] transition focus-visible:ring-2 focus-visible:ring-ring"
+              aria-label="Account"
+            >
+              <Avatar className="h-8 w-8 border border-border">
+                {user.avatar ? <AvatarImage src={user.avatar} alt={displayName} /> : null}
+                <AvatarFallback className="bg-[hsl(var(--surface-3))] text-xs font-semibold text-foreground">
+                  {initial}
+                </AvatarFallback>
+              </Avatar>
+            </button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="end" sideOffset={8} className="w-56">
+            {isLoggedIn ? (
+              <>
+                <div className="px-2 py-1.5">
+                  <p className="truncate text-sm font-medium">{displayName}</p>
+                  {user.email ? (
+                    <p className="truncate text-xs text-muted-foreground">{user.email}</p>
+                  ) : null}
+                </div>
+                <DropdownMenuSeparator />
+                <DropdownMenuItem asChild>
+                  <Link href="/profile" className="cursor-pointer gap-2.5">
+                    <UserIcon className="h-4 w-4 text-muted-foreground" /> Profile
+                  </Link>
+                </DropdownMenuItem>
+                <DropdownMenuItem asChild>
+                  <Link href="/settings" className="cursor-pointer gap-2.5">
+                    <Settings className="h-4 w-4 text-muted-foreground" /> Settings
+                  </Link>
+                </DropdownMenuItem>
+                <DropdownMenuItem asChild>
+                  <Link href="/help" className="cursor-pointer gap-2.5">
+                    <HelpCircle className="h-4 w-4 text-muted-foreground" /> Help
+                  </Link>
+                </DropdownMenuItem>
+                <DropdownMenuSeparator />
+                <DropdownMenuItem
+                  onClick={() => void signOut()}
+                  className={cn('cursor-pointer gap-2.5 text-destructive focus:text-destructive')}
+                >
+                  <LogOut className="h-4 w-4" /> Sign out
+                </DropdownMenuItem>
+              </>
+            ) : (
+              <DropdownMenuItem asChild>
+                <Link href="/login" className="cursor-pointer gap-2.5">
+                  <UserIcon className="h-4 w-4 text-muted-foreground" /> Sign in
+                </Link>
+              </DropdownMenuItem>
+            )}
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </div>
+    </header>
+  )
+}
diff --git a/apps/desktop-ui/src/components/sidebar/app-sidebar.tsx b/apps/desktop-ui/src/components/sidebar/app-sidebar.tsx
index 183479e0..9e3ffd01 100644
--- a/apps/desktop-ui/src/components/sidebar/app-sidebar.tsx
+++ b/apps/desktop-ui/src/components/sidebar/app-sidebar.tsx
@@ -1,6 +1,4 @@
 'use client'
-import { useEffect, useState } from 'react'
-import Image from 'next/image'
 import Link from 'next/link'
 import { usePathname } from 'next/navigation'
 import { motion } from 'framer-motion'
@@ -9,133 +7,28 @@ import {
   Sidebar,
   SidebarContent,
   SidebarFooter,
-  SidebarHeader,
   SidebarRail,
 } from '@/components/ui/sidebar'
 import { NavGroup } from './nav-group'
-import { NavUser } from './nav-user'
 import { FeedbackDialog } from '@/components/feedback-dialog'
-import { Logo } from '../logo'
 import { SidebarMenu, SidebarMenuButton, SidebarMenuItem } from '@/components/ui/sidebar'
 import { LayoutDashboard, Sparkles } from 'lucide-react'
-import { onAuthStateChanged, signOut as firebaseSignOut } from 'firebase/auth'
-import { auth } from '../../database/firebase'
-import { useRouter } from 'next/navigation'
-import { usePasswordStore } from '@/store/password-store'
-import { useEnvironmentManagerStore } from '@/store/environment-manager-store'
-import { useMasterKeyStore } from '@/store/master-key-store'
-import { useUserKeypairStore } from '@/store/user-keypair-store'
-import { clearMasterKey } from '@/lib/key-storage'
-import { logoutBackendSession } from '@/lib/backend-auth'
 import { usePinnedToolsForActiveWorkspace } from '@/store/pinned-tools-store'
-import { useWorkspaceStore, useActiveWorkspace } from '@/store/workspace-store'
+import { useActiveWorkspace } from '@/store/workspace-store'
 import { IconPin } from '@tabler/icons-react'
 import { buildPinnedNavItems } from './app-sidebar.helpers'
 
 export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
-  const { clearPasswords } = usePasswordStore()
-  const { clearSets } = useEnvironmentManagerStore()
-  const { clearKey: clearMasterKeyStore } = useMasterKeyStore()
-  const { clear: clearUserKeypair } = useUserKeypairStore()
   const pinnedTools = usePinnedToolsForActiveWorkspace()
-  const clearWorkspaceStore = useWorkspaceStore((s) => s.clear)
   const activeWs = useActiveWorkspace()
   const pinnedNavItems = buildPinnedNavItems(pinnedTools, activeWs)
-  const [user, setUser] = useState({
-    name: '',
-    email: '',
-    avatar: ''
-  })
-
-  const router = useRouter();
   const pathname = usePathname();
   const isDashboardActive = pathname === '/dashboard';
 
-  // ...
-
-  const handleSignOut = async () => {
-    try {
-      clearPasswords()       // clear decrypted passwords from memory
-      clearSets()            // clear decrypted environment sets from memory
-      clearMasterKeyStore()  // clear global master key in-memory state
-      clearUserKeypair()     // clear workspace keypair from memory
-      clearWorkspaceStore()  // clear workspace selection on sign-out
-
-      // Clear password-manager vault key from IndexedDB
-      if (typeof window !== 'undefined' && window.indexedDB) {
-        await new Promise<void>((resolve) => {
-          const req = window.indexedDB.open("PasswordManagerDB", 1)
-          req.onsuccess = (e: any) => {
-            const db = e.target.result
-            if (db.objectStoreNames.contains("keys")) {
-              const tx = db.transaction("keys", "readwrite")
-              tx.objectStore("keys").delete("vaultKey")
-              tx.oncomplete = () => resolve()
-              tx.onerror = () => resolve()
-            } else {
-              resolve()
-            }
-          }
-          req.onerror = () => resolve()
-        })
-      }
-
-      // Clear global master key from IndexedDB
-      await clearMasterKey()
-
-      await logoutBackendSession()
-      await firebaseSignOut(auth);
-      router.push('/login');
-    } catch (error) {
-      console.error('Error signing out:', error);
-    }
-  };
-
-  useEffect(() => {
-    const unsubscribe = onAuthStateChanged(auth, (user) => {
-      if (user) {
-        setUser({
-          name: user.displayName || '',
-          email: user.email || '',
-          avatar: user.photoURL || ''
-        })
-      }
-    })
-
-    return () => unsubscribe()
-  }, [])
-
   return (
     <Sidebar collapsible='icon' variant='floating' {...props}>
-      <SidebarHeader className="border-b border-border/30 dark:border-white/5 pb-3 hidden md:flex">
-        <div
-          className="flex items-center space-x-3 px-3 py-3 transition-all duration-300 hover:cursor-pointer hover:bg-primary/5 rounded-xl bg-transparent border border-transparent hover:border-primary/10 group-data-[state=collapsed]:bg-transparent group-data-[state=collapsed]:border-none group-data-[state=collapsed]:p-0 group-data-[state=collapsed]:justify-center overflow-hidden group/logo"
-          onClick={() => router.push('/dashboard')}
-        >
-          <div className="flex items-center justify-center transition-transform duration-300 group-hover/logo:scale-105">
-            <Logo size={36} showText={false} />
-          </div>
-          <div className="flex flex-col justify-center transition-all duration-300 origin-left group-data-[state=collapsed]:opacity-0 group-data-[state=collapsed]:w-0 group-data-[state=collapsed]:translate-x-[-10px]">
-            <div className="flex items-center gap-1.5">
-              <div className="relative h-6 w-28 -ml-1 whitespace-nowrap shrink-0">
-                <Image
-                  src="/logo-text-light.png"
-                  alt="MyDevTools"
-                  fill
-                  className="dark:hidden object-contain object-left"
-                />
-                <Image
-                  src="/logo-text-dark.png"
-                  alt="MyDevTools"
-                  fill
-                  className="hidden dark:block object-contain object-left"
-                />
-              </div>
-            </div>
-            <p className="text-[10px] text-muted-foreground/80 font-medium tracking-wider uppercase pl-0.5 whitespace-nowrap">Developer&apos;s Toolkit</p>
-          </div>
-        </div>
-      </SidebarHeader>
+      {/* Brand lockup moved to the unified TopBar (components/shell/top-bar.tsx).
+          The sidebar is now pure navigation. */}
       <SidebarContent className="mt-2 md:mt-0">
         <SidebarMenu className="px-2 mb-1">
           <SidebarMenuItem>
@@ -152,10 +45,10 @@ export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
                 {isDashboardActive && (
                   <motion.div
                     layoutId="sidebar-active-pill"
-                    className="absolute inset-0 -z-10 rounded-md bg-gradient-to-r from-primary/15 to-primary/[0.03] ring-1 ring-inset ring-primary/15 dark:from-primary/25 dark:to-primary/5"
+                    className="absolute inset-0 -z-10 rounded-md bg-primary/10 ring-1 ring-inset ring-primary/20"
                     transition={{ type: 'spring', stiffness: 400, damping: 30 }}
                   >
-                    <span className="absolute left-0 top-1/2 h-5 w-[3px] -translate-y-1/2 rounded-r-full bg-gradient-to-b from-primary to-violet-500" />
+                    <span className="absolute left-0 top-1/2 h-5 w-[3px] -translate-y-1/2 rounded-r-full bg-primary" />
                   </motion.div>
                 )}
                 <LayoutDashboard className={cn('z-10 size-4 transition-colors', isDashboardActive && 'text-primary')} />
@@ -187,7 +80,6 @@ export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
       </SidebarContent>
       <SidebarFooter className="hidden md:block border-t border-border/30 dark:border-white/5">
         <FeedbackDialog variant="sidebar" />
-        <NavUser user={user} onSignout={handleSignOut} />
       </SidebarFooter>
       <SidebarRail />
     </Sidebar>
diff --git a/apps/desktop-ui/src/components/sidebar/client-layout.tsx b/apps/desktop-ui/src/components/sidebar/client-layout.tsx
index 5a2edee4..14367310 100644
--- a/apps/desktop-ui/src/components/sidebar/client-layout.tsx
+++ b/apps/desktop-ui/src/components/sidebar/client-layout.tsx
@@ -6,6 +6,7 @@ import { AppSidebar } from "./app-sidebar";
 import { NavBar } from '@/components/nav-bar';
 import { MobileNav } from '@/components/mobile-nav';
 import { TabBar } from '@/components/tab-bar/tab-bar';
+import { TopBar } from '@/components/shell/top-bar';
 import { useTabStore } from '@/store/tab-store';
 import { isTabRoute } from '@/lib/route-config';
 import { getTabComponent, isRegisteredTab } from '@/lib/tab-registry';
@@ -77,10 +78,14 @@ function Layout({ children }: { children: React.ReactNode }) {
   return (
     <div
       style={{ "--sidebar-width": "16rem", "--sidebar-width-icon": "3rem" } as React.CSSProperties}
-      className="group/sidebar-wrapper flex h-screen w-full has-[[data-variant=inset]]:bg-sidebar relative overflow-hidden"
+      className="group/sidebar-wrapper flex flex-col h-screen w-full has-[[data-variant=inset]]:bg-sidebar relative overflow-hidden"
     >
       <TabSyncer />
-      <div className="flex h-full w-full">
+      <TopBar />
+      {/* transform establishes a containing block so the sidebar's `fixed`
+          positioning is bounded to this row (below the top bar) instead of
+          the viewport top — otherwise it overlaps the top bar / logo. */}
+      <div className="flex min-h-0 w-full flex-1" style={{ transform: 'translateZ(0)' }}>
         <aside
           className={`${state === 'collapsed' ? 'w-[var(--sidebar-width-icon)]' : 'w-[var(--sidebar-width)]'} ${state === 'collapsed' ? '' : 'border-r'
             } p-4 hidden md:flex flex-col z-30 relative shrink-0`}
diff --git a/apps/desktop-ui/src/components/sidebar/nav-group.tsx b/apps/desktop-ui/src/components/sidebar/nav-group.tsx
index b187c8ce..8106fed8 100644
--- a/apps/desktop-ui/src/components/sidebar/nav-group.tsx
+++ b/apps/desktop-ui/src/components/sidebar/nav-group.tsx
@@ -243,10 +243,10 @@ const SidebarMenuLink = ({
           {isActive && (
             <motion.div
               layoutId="sidebar-active-pill"
-              className="absolute inset-0 -z-10 rounded-md bg-gradient-to-r from-primary/15 to-primary/[0.03] ring-1 ring-inset ring-primary/15 dark:from-primary/25 dark:to-primary/5"
+              className="absolute inset-0 -z-10 rounded-md bg-primary/10 ring-1 ring-inset ring-primary/20"
               transition={{ type: "spring", stiffness: 400, damping: 30 }}
             >
-              <span className="absolute left-0 top-1/2 h-5 w-[3px] -translate-y-1/2 rounded-r-full bg-gradient-to-b from-primary to-violet-500" />
+              <span className="absolute left-0 top-1/2 h-5 w-[3px] -translate-y-1/2 rounded-r-full bg-primary" />
             </motion.div>
           )}
           {item.icon && (
diff --git a/apps/desktop-ui/src/components/tab-bar/tab-bar.tsx b/apps/desktop-ui/src/components/tab-bar/tab-bar.tsx
index 271d5e01..fc20a940 100644
--- a/apps/desktop-ui/src/components/tab-bar/tab-bar.tsx
+++ b/apps/desktop-ui/src/components/tab-bar/tab-bar.tsx
@@ -13,16 +13,6 @@ import {
   TooltipTrigger,
 } from '@/components/ui/tooltip'
 
-// App-icon chip background tints (matches the blue "Z" badge in the reference).
-const chipColors = [
-  'bg-sky-500',
-  'bg-violet-500',
-  'bg-emerald-500',
-  'bg-rose-500',
-  'bg-amber-500',
-  'bg-indigo-500',
-]
-
 interface TabBarProps {
   onNewTab?: () => void
 }
@@ -137,15 +127,17 @@ export function TabBar({ onNewTab }: TabBarProps) {
 
   return (
     <TooltipProvider delayDuration={500}>
-      <div className="flex h-12 w-full shrink-0 items-center border-b bg-background/95 px-2 gap-1 backdrop-blur">
+      {/* Raised strip; tabs align to its bottom edge and weld to the content
+          below across the shared seam (the strip's bottom border). */}
+      <div className="flex h-11 w-full shrink-0 items-end gap-0 border-b border-border bg-[hsl(var(--surface-2))] pl-2 pr-1.5">
 
         {/* Left scroll arrow */}
         <button
           onClick={() => scroll('left')}
           aria-hidden={!canScrollLeft}
           className={cn(
-            'flex h-6 w-5 shrink-0 items-center justify-center rounded text-muted-foreground transition-all hover:bg-muted hover:text-foreground',
-            canScrollLeft ? 'opacity-100 pointer-events-auto' : 'opacity-0 pointer-events-none'
+            'mb-[9px] flex h-6 shrink-0 items-center justify-center rounded text-muted-foreground transition-all duration-150 hover:bg-[hsl(var(--surface-3))] hover:text-foreground',
+            canScrollLeft ? 'w-5 opacity-100 pointer-events-auto' : 'w-0 opacity-0 pointer-events-none'
           )}
         >
           <ChevronLeft className="h-3.5 w-3.5" strokeWidth={2.5} />
@@ -154,7 +146,7 @@ export function TabBar({ onNewTab }: TabBarProps) {
         {/* Scrollable tab list */}
         <div
           ref={scrollRef}
-          className="flex min-w-0 flex-1 items-center gap-1 overflow-x-auto py-1.5"
+          className="flex min-w-0 flex-1 items-end gap-0 overflow-x-auto"
           style={{ scrollbarWidth: 'none', msOverflowStyle: 'none' }}
         >
           {tabs.map((tab, i) => {
@@ -162,61 +154,80 @@ export function TabBar({ onNewTab }: TabBarProps) {
             const Icon = config?.icon
             const title = config?.title ?? tab.path.split('/').pop() ?? tab.path
             const isActive = tab.path === activeTabPath
-            const chipColor = chipColors[i % chipColors.length]
+            const prevActive = i > 0 && tabs[i - 1].path === activeTabPath
+            // Bifurcation between two inactive neighbours; suppressed next to the
+            // active tab, whose own border already separates it. Always occupies
+            // 1px so tabs never shift when the divider toggles.
+            const showDivider = i > 0 && !isActive && !prevActive
 
             return (
-              <Tooltip key={tab.path}>
-                <TooltipTrigger asChild>
-                  <button
-                    ref={isActive ? activeTabRef : null}
-                    onClick={() => handleTabClick(tab.path)}
-                    className={cn(
-                      'group relative flex h-8 max-w-[200px] min-w-[80px] shrink-0 cursor-pointer items-center gap-2 rounded-full border px-2.5 text-xs font-medium transition-all duration-150',
-                      isActive
-                        ? 'border-border/60 bg-foreground/[0.07] text-foreground shadow-[inset_0_1px_0_hsl(var(--foreground)/0.06)] backdrop-blur-sm'
-                        : 'border-transparent text-muted-foreground hover:bg-foreground/[0.04] hover:text-foreground'
-                    )}
-                  >
-                    {Icon && (
+              <React.Fragment key={tab.path}>
+                <div
+                  aria-hidden
+                  className={cn(
+                    'h-5 w-px shrink-0 self-center bg-border transition-opacity duration-150',
+                    showDivider ? 'opacity-100' : 'opacity-0'
+                  )}
+                />
+                <Tooltip>
+                  <TooltipTrigger asChild>
+                    <button
+                      ref={isActive ? activeTabRef : null}
+                      onClick={() => handleTabClick(tab.path)}
+                      className={cn(
+                        'group relative flex h-[34px] max-w-[230px] min-w-[144px] shrink-0 cursor-pointer items-center gap-2.5 rounded-t-[8px] border border-b-0 px-4 text-[13px] font-medium leading-none transition-colors duration-150',
+                        isActive
+                          // Welded to content: content surface, sits 1px over the
+                          // strip's bottom border (breaks the seam), accent cap on top.
+                          ? 'z-10 -mb-px border-border bg-[hsl(var(--surface-1))] text-foreground'
+                          : 'border-transparent text-foreground/60 hover:bg-foreground/[0.05] hover:text-foreground/90'
+                      )}
+                    >
+                      {isActive && (
+                        <span className="pointer-events-none absolute inset-x-0 top-0 h-0.5 rounded-t-[8px] bg-primary" />
+                      )}
+
+                      {Icon && (
+                        <Icon
+                          className={cn(
+                            'h-3.5 w-3.5 shrink-0 transition-colors',
+                            isActive
+                              ? 'text-primary'
+                              : 'text-muted-foreground/70 group-hover:text-foreground/70'
+                          )}
+                          strokeWidth={2}
+                        />
+                      )}
+
+                      <span className="min-w-0 flex-1 truncate text-left">
+                        {title}
+                      </span>
+
                       <span
+                        role="button"
+                        aria-label={`Close ${title}`}
+                        onClick={(e) => handleClose(e, tab.path)}
                         className={cn(
-                          'flex h-4 w-4 shrink-0 items-center justify-center rounded-[5px] shadow-sm transition-all',
-                          chipColor,
-                          isActive ? 'opacity-100' : 'opacity-60 saturate-[0.7] group-hover:opacity-90'
+                          'flex h-4 w-4 shrink-0 cursor-pointer items-center justify-center rounded transition-all duration-100 hover:bg-[hsl(var(--surface-3))] hover:text-foreground',
+                          isActive
+                            ? 'text-muted-foreground opacity-100'
+                            : 'text-muted-foreground/40 opacity-0 group-hover:opacity-100'
                         )}
                       >
-                        <Icon className="h-2.5 w-2.5 text-white" strokeWidth={2.5} />
+                        <X className="h-3 w-3" strokeWidth={2.5} />
                       </span>
+                    </button>
+                  </TooltipTrigger>
+                  <TooltipContent side="bottom" className="flex items-center gap-1.5 text-xs">
+                    {title}
+                    {i < 9 && (
+                      <kbd className="rounded border border-border/60 bg-muted/60 px-1 font-mono text-[10px] text-muted-foreground">
+                        ⌥{i + 1}
+                      </kbd>
                     )}
-
-                    <span className="min-w-0 flex-1 truncate text-left leading-none tracking-tight">
-                      {title}
-                    </span>
-
-                    <span
-                      role="button"
-                      aria-label={`Close ${title}`}
-                      onClick={(e) => handleClose(e, tab.path)}
-                      className={cn(
-                        'flex h-3.5 w-3.5 shrink-0 cursor-pointer items-center justify-center rounded-full transition-all duration-100',
-                        isActive
-                          ? 'text-muted-foreground hover:bg-muted hover:text-foreground opacity-100'
-                          : 'text-muted-foreground/30 hover:bg-muted hover:text-foreground opacity-0 group-hover:opacity-100'
-                      )}
-                    >
-                      <X className="h-2.5 w-2.5" strokeWidth={2.5} />
-                    </span>
-                  </button>
-                </TooltipTrigger>
-                <TooltipContent side="bottom" className="flex items-center gap-1.5 text-xs">
-                  {title}
-                  {i < 9 && (
-                    <kbd className="rounded border border-border/60 bg-muted/60 px-1 font-mono text-[10px] text-muted-foreground">
-                      ⌥{i + 1}
-                    </kbd>
-                  )}
-                </TooltipContent>
-              </Tooltip>
+                  </TooltipContent>
+                </Tooltip>
+              </React.Fragment>
             )
           })}
         </div>
@@ -226,22 +237,22 @@ export function TabBar({ onNewTab }: TabBarProps) {
           onClick={() => scroll('right')}
           aria-hidden={!canScrollRight}
           className={cn(
-            'flex h-6 w-5 shrink-0 items-center justify-center rounded text-muted-foreground transition-all hover:bg-muted hover:text-foreground',
-            canScrollRight ? 'opacity-100 pointer-events-auto' : 'opacity-0 pointer-events-none'
+            'mb-[9px] flex h-6 shrink-0 items-center justify-center rounded text-muted-foreground transition-all duration-150 hover:bg-[hsl(var(--surface-3))] hover:text-foreground',
+            canScrollRight ? 'w-5 opacity-100 pointer-events-auto' : 'w-0 opacity-0 pointer-events-none'
           )}
         >
           <ChevronRight className="h-3.5 w-3.5" strokeWidth={2.5} />
         </button>
 
         {/* Divider */}
-        <div className="mx-0.5 h-4 w-px shrink-0 bg-border/60" />
+        <div className="mx-1 mb-[9px] h-5 w-px shrink-0 self-center bg-border" />
 
         {/* New tab button */}
         <Tooltip>
           <TooltipTrigger asChild>
             <button
               onClick={onNewTab}
-              className="flex h-6 w-6 shrink-0 cursor-pointer items-center justify-center rounded-full text-muted-foreground transition-colors hover:bg-muted hover:text-foreground"
+              className="mb-[9px] flex h-6 w-6 shrink-0 cursor-pointer items-center justify-center rounded text-muted-foreground transition-colors duration-150 hover:bg-[hsl(var(--surface-3))] hover:text-foreground"
               aria-label="Open tool (⌘K)"
             >
               <Grid2x2Plus className="h-4 w-4" strokeWidth={2} />
diff --git a/apps/desktop-ui/src/components/tools/tool-page-header.tsx b/apps/desktop-ui/src/components/tools/tool-page-header.tsx
index 286e9025..df1a4e0b 100644
--- a/apps/desktop-ui/src/components/tools/tool-page-header.tsx
+++ b/apps/desktop-ui/src/components/tools/tool-page-header.tsx
@@ -33,7 +33,7 @@ export function ToolPageHeader({
     <div className={cn('flex items-start gap-3', className)}>
       <span
         className={cn(
-          'mt-0.5 flex h-9 w-9 shrink-0 items-center justify-center rounded-xl shadow-sm ring-1 ring-inset ring-border/60',
+          'mt-0.5 flex h-9 w-9 shrink-0 items-center justify-center rounded-lg ring-1 ring-inset ring-border/60',
           accent.bg,
           accent.text,
         )}
diff --git a/apps/desktop-ui/src/hooks/use-app-user.ts b/apps/desktop-ui/src/hooks/use-app-user.ts
new file mode 100644
index 00000000..b85954ab
--- /dev/null
+++ b/apps/desktop-ui/src/hooks/use-app-user.ts
@@ -0,0 +1,29 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+import { onAuthStateChanged } from 'firebase/auth'
+import { auth } from '@/database/firebase'
+
+export interface AppUser {
+  name: string
+  email: string
+  avatar: string
+}
+
+/** Live Firebase profile (empty strings when signed out). */
+export function useAppUser(): AppUser {
+  const [user, setUser] = useState<AppUser>({ name: '', email: '', avatar: '' })
+
+  useEffect(() => {
+    const unsubscribe = onAuthStateChanged(auth, (u) => {
+      setUser(
+        u
+          ? { name: u.displayName || '', email: u.email || '', avatar: u.photoURL || '' }
+          : { name: '', email: '', avatar: '' },
+      )
+    })
+    return () => unsubscribe()
+  }, [])
+
+  return user
+}
diff --git a/apps/desktop-ui/src/hooks/use-sign-out.ts b/apps/desktop-ui/src/hooks/use-sign-out.ts
new file mode 100644
index 00000000..df8108ad
--- /dev/null
+++ b/apps/desktop-ui/src/hooks/use-sign-out.ts
@@ -0,0 +1,62 @@
+'use client'
+
+import { useRouter } from 'next/navigation'
+import { signOut as firebaseSignOut } from 'firebase/auth'
+import { auth } from '@/database/firebase'
+import { usePasswordStore } from '@/store/password-store'
+import { useEnvironmentManagerStore } from '@/store/environment-manager-store'
+import { useMasterKeyStore } from '@/store/master-key-store'
+import { useUserKeypairStore } from '@/store/user-keypair-store'
+import { useWorkspaceStore } from '@/store/workspace-store'
+import { clearMasterKey } from '@/lib/key-storage'
+import { logoutBackendSession } from '@/lib/backend-auth'
+
+/**
+ * Full sign-out: wipes every in-memory secret + the encrypted vault key from
+ * IndexedDB, ends the backend session, signs out of Firebase, and routes to
+ * /login. Single source of truth used by the top-bar profile menu.
+ */
+export function useSignOut(): () => Promise<void> {
+  const router = useRouter()
+  const { clearPasswords } = usePasswordStore()
+  const { clearSets } = useEnvironmentManagerStore()
+  const { clearKey: clearMasterKeyStore } = useMasterKeyStore()
+  const { clear: clearUserKeypair } = useUserKeypairStore()
+  const clearWorkspaceStore = useWorkspaceStore((s) => s.clear)
+
+  return async function signOut() {
+    try {
+      clearPasswords()      // decrypted passwords in memory
+      clearSets()           // decrypted environment sets in memory
+      clearMasterKeyStore() // in-memory master key
+      clearUserKeypair()    // workspace keypair in memory
+      clearWorkspaceStore() // workspace selection
+
+      // Clear password-manager vault key from IndexedDB
+      if (typeof window !== 'undefined' && window.indexedDB) {
+        await new Promise<void>((resolve) => {
+          const req = window.indexedDB.open('PasswordManagerDB', 1)
+          req.onsuccess = (e: Event) => {
+            const db = (e.target as IDBOpenDBRequest).result
+            if (db.objectStoreNames.contains('keys')) {
+              const tx = db.transaction('keys', 'readwrite')
+              tx.objectStore('keys').delete('vaultKey')
+              tx.oncomplete = () => resolve()
+              tx.onerror = () => resolve()
+            } else {
+              resolve()
+            }
+          }
+          req.onerror = () => resolve()
+        })
+      }
+
+      await clearMasterKey()      // global master key in IndexedDB
+      await logoutBackendSession()
+      await firebaseSignOut(auth)
+      router.push('/login')
+    } catch (error) {
+      console.error('Error signing out:', error)
+    }
+  }
+}
diff --git a/apps/desktop/src-tauri/capabilities/default.json b/apps/desktop/src-tauri/capabilities/default.json
index 4a587643..cfae5e63 100644
--- a/apps/desktop/src-tauri/capabilities/default.json
+++ b/apps/desktop/src-tauri/capabilities/default.json
@@ -3,5 +3,5 @@
   "identifier": "default",
   "description": "Default capability for the main window",
   "windows": ["main"],
-  "permissions": ["core:default", "deep-link:default", "opener:default", "updater:default", "process:default"]
+  "permissions": ["core:default", "core:window:allow-start-dragging", "deep-link:default", "opener:default", "updater:default", "process:default"]
 }
diff --git a/apps/desktop/src-tauri/tauri.conf.json b/apps/desktop/src-tauri/tauri.conf.json
index 29be7b40..aecae7de 100644
--- a/apps/desktop/src-tauri/tauri.conf.json
+++ b/apps/desktop/src-tauri/tauri.conf.json
@@ -17,7 +17,10 @@
         "height": 800,
         "minWidth": 1024,
         "minHeight": 700,
-        "center": true
+        "center": true,
+        "titleBarStyle": "Overlay",
+        "hiddenTitle": true,
+        "trafficLightPosition": { "x": 14, "y": 21 }
       }
     ],
     "security": {
diff --git a/package.json b/package.json
index 0d259716..69bfea32 100644
--- a/package.json
+++ b/package.json
@@ -2,7 +2,7 @@
   "name": "mydevtools-monorepo",
   "version": "0.1.0",
   "private": true,
-  "packageManager": "pnpm@11.12.0",
+  "packageManager": "pnpm@11.13.1",
   "scripts": {
     "dev": "pnpm --filter @mydevtools/web dev",
     "dev:web": "pnpm --filter @mydevtools/web dev",